Website+Desgin

 In thinking about the design of a website, there are many factors to consider. Read through the following categories and visit the links used to illustrate some design pitfalls. You will have an opportunity to comment on a website later in this lesson.

Background •Is it distracting? •Is it eye-catching?

Sometimes plain and subdued backgrounds are best. If the background is too busy or too bright, it may draw the audience away from the content you are trying to share.

I found this background to be a bit distracting. What do you think? @http://foundation.webdesignforkids.net/Jacob/Jacob.html

Although bright and plain, this site kinda hurt my eyes. http://mail.colonial.net/~hkaiter/fun_stuff.htm

Text Size •Is the text large enough to be read easily? •Is the text too big so I have to scroll down the page?

Text Font •Is the font readable? Cursive or outlined fonts are often difficult to read.

Text Style •Is the text too bold? Are items underlined that aren’t links?

Text Color •Is the text color too close to the background that it’s difficult to read? •Is the text color too light be be readable? •Is the text color hard on the eyes? (too vividly bright, etc.)

On iWeb, the templates from which you choose have text size, font, style, and color already set. I've seen students make changes in their text that have jazzed things up a bit, but I've also seen them make changes that make their site look unpolished and amateur-looking. Feel free to make changes, but look at your choices critically. It's easy to get carried away.

I'm not sure if it's the background or the font color, but I found it to be difficult to read. @http://foundation.webdesignforkids.net/Jacob/jerica.html

Sweet, but the font is too big. @http://foundation.webdesignforkids.net/Alex/adult.html

Navigation Menu •Is there a navigation menu? •Is the navigation menu at the same spot on every page? •Can I get to any page from any page? •Is the navigation menu consistent from page to page? •Is the navigation menu organized well? Does it make sense? •Is the navigation menu consistent regardless of page size?

Navigating a website is critical. You want navigation to be seamless for your audience. The way to do this is to have a clean navigation menu on EVERY page displayed in the SAME way. Your audience becomes familiar with the navigation menu. It becomes a seamless part of their experience. They spend less time trying to figure out how to move around in the site, and can spend more time looking at the content you are trying to present. A good Navigation Menu is like a good official... If they're doing a good job, you shouldn't notice them.

I found this navigation menu to be quite confusing on the main page, and is non-existent on the child pages. http://www.cc.kyoto-su.ac.jp/~trobb/arashiyama/index.html

Tables •Are there tables present to keep text contained?

Some items in a website may do well to live in a table. Tables can help the designer define exactly where and how something is to display. Often the navigation menu is built in a table so that it won't change regardless of the end-users' display settings. iWeb has the navigation framework set up for you. Most of the other items in your pages in iWeb are simply "drag and drop," but in the olden days, tables did all the work. You may not see the tables, but they may actually be there holding everything together!

This navigation menu looks fine if you have the same display size as the web developers, but change the size of the window and watch what happens to the menu items... especially Recycle 2. At a certain window size, part of the navigation link jumps to the second line. @http://greenmonkeyhomes.com/

Consistent Design •Do all pages in the site have a similar look and feel?

Nothing makes a site look more amateur than those that have a different look from page to page. Keep things consistent not only with the selection of the template, but also your frames, shadows, text, layout, etc. Color choices and all design elements should have a certain flow about them.

This is one where the pages don't all match. Visit a few of the pages... http://www.cc.kyoto-su.ac.jp/~trobb/arashiyama/index.html

Spacing •Are images, links, text boxes, animations, tables spaced out on the page in a neat and organized fashion? •Are items spaced in such a way as to avoid unnecessary scrolling?

Things should be organized in a fashion that makes sense. Even if you want things to appear random, it should make sense.

I think this page could have been spaced in such a way that the audience would not have had to scroll. http://www.cc.kyoto-su.ac.jp/~trobb/arashiyama/taka.html

Audience •Who is the audience? •Is the audience too broad or too specific? •Does the design match the intended audience?

Gearing your design to one audience when your content is intended for another doesn't make good design sense. Use your design to attract the audience for whom the content is intended.

I showed this to my students, and the girls in my class were less drawn to it than the boys. The audience would be ALL kids. @http://greenmonkeyhomes.com/

Images •Are the images on topic, or merely a distraction? •Are images of high quality? •Are images consistent? (all illustrations vs. all photographs)

It's easy to get excited over images to jazz up your site, but often less is more. Keep everything the same style and be sure that items are of high quality.

Animations •Are the animations on topic, or merely a distraction? •Are there too many animations/too much movement?

Again, less may be more... especially when it comes to animations. It's difficult to find good, free animations to use and even more difficult to find animations that fit in with your topic. Sometimes designers are tempted to put lots of animations into their websites even if they don't fit well with the topic. More than one or two animations will draw the audience away from the content... or make them car sick.

Is Kevia's website distracting to you? @http://foundation.webdesignforkids.net/Kevia/kevia.html

Links •Do links work? •Are links of high quality? •Are links on topic? •Do the links match the audience?

Remember that adding a link on a webpage implies that that author endorses the page they're linking to. Make sure that you spend the time to find quality sites to include as links on your page. Don't just link the first website you happened to find. Be patient.

I built a webpage about volcanoes and found this site to include as a link. My audience would be middle-school kids, and this page was full of images that I thought would appeal to them. I think this is more interesting than the Wikipedia page about volcanoes... Do you agree? http://mail.colonial.net/~hkaiter/volcanoes.html

Update Frequency •How often does this website NEED to be updated based on the content? •Is there out-of-date material on the website?

When a webpage is created, the author needs to be realistic on how dynamic the information needs to be and whether he can keep up with that schedule. Update frequency based on the content that is included may be one of the most important things to consider in the initial stages of planning.

This site gets updated daily in some areas (announcements), as-needed in other areas (parent announcements), and rarely in other areas (clubs). @http://www.dublinschools.net/davis_home.aspx

You are logged in as [|Rhonda Luetje] ( [|Logout] ) [|iWeb]