Mar 20

Day 2 – Site redesign

Posted by Matty

What will the new design look like?

Today is all about trying to figure out what the new website design will look like, and how people will interact with it. Taking a couple of extra hours to plan this stuff in the beginning saves me an awful lot of time later.

Since there is an existing design, what are some of the things that Nanc and I want to change? Here’s the list of issues:

  • We’ve outgrown the current design.
  • Too boxy.
  • Too blue.
  • Need higher contrast between text and background.
  • Top logo bar has a lot of wasted space.
  • Nutritional content bar for menu is confusing for new visitors.
  • Search function should be located higher on the page.
  • We don’t have the functionality to add links to sites we like.
  • Clicking on the title of an article should link to the article.
  • Reduce the number of categories that only have a couple of entries.
  • Need a page that is just easier to look at.
  • From our side, placing the photo thumbnails in is a pain. There’s too much futzing.
  • The post a comment (and the comment area) are unattractive also could provide more feedback during use (highlight the selected field, and so on).
  • We can change the way that thumbnails work, instead of opening in a new page.
  • How about allowing different types of interaction (at the bottom of the front page, allow folks to browse the 20 previous articles… allow people to view archives by month or by author.
  • Use CSS – Faster loading than tables, cleaner design, separates content from presentation. Will be far easier to tweak and make changes.
  • Whitespace gives the eyes a break. Make sure that the design allows for this.
  • The technology and the average web surfer has changed… The basic user has changed from using dialup on an 800×600 screen to a broadband user with 1024×768 – can increase the load time of the page from now… approx 50k to 100k (double the bandwidth).
  • Need to ensure that existing articles don’t break with new design… need to allow backward-compatibility.

Do you have an issue not listed in the beefs above? Add it to the comments.

Layout (3col)

Currently, the website uses a two-column layout. Since the average user’s screen size has increased, I want to use a three column design to provide a more order to the pages.

Ordering of content blocks

Also, I needed to figure out how I was going to order the different portions of content that are on the page. This is something that I will continuously futz with, so using CSS for positioning is going to help out a lot. I will be able to quickly change the appearance of the content.

Font choices

I still like the font that we use for the article text. The font, Georgia, is easy to read and looks pretty good. I do want to change the font of the sub heading and the menu items to a sans serif font, to make it stand out a little more, like a Helvetica font.

Color choices

So, I entered the colors that I have been looking at into an online color generator, and it provided me with a grid of complementary colors. From this, I have a number of colors to play with as I tweak the design.

That’s it for the planning. While inspiration can still strike and changes can be made, I have a pretty good idea of what I want the site to look like. Next, we start to develop the site’s design!

5 Responses to “Day 2 – Site redesign”

  1. Rachel Says:

    This has been interesting. A question for you: Do you always do all this planning or are you doing it for the audience’s benefit?
    R

  2. nanc Says:

    I think that I can answer this: YES. That MattyBonez is a planner! He thrives on the minute details and weighing opposing merits. All of the items listed above have been heavily discussed in our household.

    But don’t get me wrong. I’m not complaining. Matt is an efficient and thorough(-ly geeky) machine. And this compliments and balances out my haphazard and “free-style”, er.. style. So it’s all good.

  3. Matty Says:

    Hi Rachel, there are a couple of differences between what I am writing on the site, and what I do in ‘real life’.

    First, I generally consider all of the components as a whole. For the site, I had to try to break them back out into categories, so that it wouldn’t be a jumble of mush.

    The second difference is that I am doing some fierce editing. There are many other areas to consider in the design, such as designing for your audience, or researching other websites and design manuals for inspiration. I’ve glazed over some of this, mainly for scope. You could write a book on this (many have), and I am trying to cover the entire process in 7-10 posts.

  4. P-la Says:

    ummm…wow

  5. Matt Says:

    Test post… to make sure I put all the parts back together correctly.

Leave a Reply


3 + = four