Chapter 5

Find a large, industrial-strength site (Toyota, Apple, Adobe, ATT). There is often a button for the “index” or “site map” Take a look at the index. Do you think this company would have made that many pages in full-color print? Would you ever own or want to own all those printed pages?

I visited Apple.com and viewed their site map.  I would think that this company would not make this many pages in full color because it would be too costly.  Placing this information and pictures on their website is a lot more cost effective.  Considering that the world wide web is becoming available to everyone, it would make sense to use the web to dispense these color photos.  Personally, I would not want to own all these printed pages.  It would clutter my desk and would waste lots of paper.

Do you find sites that put too much information on one page? Do you find pages that could easily be broken down into several topics, each with its own page?

https://members.tripod.com/~INDIA_RESOURCE/mathematics.htm

http://members.ozemail.com.au/~kevrenor/dunk-s.htm

https://members.tripod.com/ggdavid/georgia/history.htm

https://members.tripod.com/~RWallsTeacher/index-3.html

Yes, these websites can easily break down the information into several pages.  The information is too cluttered on one page.

Do you find pages that are too broken up, pages where you would rather not have to click another time and wait for another page to load to get to the information? Do you find pages where there is only one short paragraph and wonder why the designer made you jump? Or pages with one large photo and no caption or buttons or other reason to be there? Making lots of pages is cheap, yes, but make sure each page is important enough to make it worth someone’s while to get there.

http://zenas4.tripod.com/orestesindianahistory/

This website has too many webpages within the main menu.  The pages appear to be too broken up with so many links within the website.  Although each page has lots of information, it is the structure of the menu and the large number of internal hyperlinks within the website that make the website appear to be broken up into too many small pieces.

Find a site, like www.weather.com, that is updated every few minutes. How useful would a weather site be if it could only be updated every three months?

A website that is updated every three months would be uninviting because there is no new information to keep visitors from coming back for more.  Weatherbug.com is a perfect example of a website that offers daily updates of weather.  As a matter of fact, each weather station that is hosted on weatherbug.com updates their weather data live.

When you come across a form that the designer wants you to print, fill out, then mail or fax in, do you respond as quickly as you might if the form had a Submit button?

No, I would not respond as quickly if I had to print out a form, fill it in with a pen and then mail or fax it in because there are too many steps and I have to physically do all that work.  If there was an electronic form provided for me with a submit button it would make it a lot easier for me to complete the form because of the fewer steps and the convenience.

Chapter 5 Quiz

For each problem, choose whether “Print” or “Web” media would be the best solution; circle your choice. Most problems would benefit from a combination of the two media (as well as other media, of course), but circle a choice for the predominant vehicle. Write a short statement justifying that choice.

1. Your corporation has an annual report that must get to every one of its stockholders.

Print because not all stockholders have immediate access to a computer.  In addition, many don’t have time to print out a full annual report and it can become a hassle.  It is much better to provide one in full color so stockholders don’t have to worry about printing it out themselves.  It is also good that they are holding an annual report in their hands while in a meeting.  Last, it would make the company look cheap if they don’t print the reports out for distribution.

2. You’re a graphic artist and you want to relocate from a small town to a big city. You can print up four-color brochures to send to all the ad agencies and studios, or you can put part of your portfolio in the mail, or you can send every agency and studio your web address.

Web because if you are a graphic artist, most of your work will be on a website.  In addition, printing four color brochures and sending them to all ad agencies and studios would be extremely expensive.  Placing all your work on a website and then sending a letter to all ad agencies and studios to inform them of your website that contains your portfolio would make economic sense.

3. You’re a small software company and every few months you have updates to your software. You need to notify existing customers and find a way to get them the updates.

If I am a small software company and every few months I have updates to my software, I would notify my existing customers through the web.  I wouldn’t bother with printing out documents and mailing them to my customers because by the time the letter reaches my customers by snail mail, there will be newer updates.  Updates happen quite frequently so snail mail is not a good idea.  I would perhaps build into my software program an automatic update feature that will periodically check for updates.  If there is a new update, the software program will inform the customer with a pop-up window.

4. You have valuable information that your clients pay a lot of money for. But the information changes regularly—sometimes as often as weekly.

If information changes as often as weekly, it would be best to use the web rather than print.  Printing would be expensive, but also would become outdated as soon as the print is sent in the mail.

5. You’re a teacher/businessperson and you have a great collection of small booklets that are extremely useful for your students/clients. You know the rest of the world would like the information, but publishers complain the booklets are too small and don’t want to deal with them. Because your readers’ responses have been very strong, you are willing to publish the booklets yourself.

The web is a great place to publish your collection of small booklets.  That way, the entire world can access those booklets online.  However, you can also self publish through various publishers that will print out your booklets for cheap.  You will have to do your own marketing, but if your works are already in high demand, then you will not have a problem.

6. Your sweetheart has decided it is time for the world to recognize the phenomenal breadth of your artistic talent. She wants to compile a high quality collection of your life’s work.

The best way to approach this is by using the web.  That way, you can be discovered by someone who has the money and the connections to make you famous.  Mailing would be too costly and you wouldn’t know where to start mailing those color glossy brochures to.

Chapter 6

Watch for the following sorts of design concepts on the web. You might want to save a bookmark or favorite of several of the worst pages you find so you can use them in the quiz on the next page.

Go to ten different pages, chosen at random. How many of the pages utilize strong alignments in the layout? How many have an arbitrary mix of alignments? Which pages have more organized, clean presentations, and why do they appear that way?

www.cnn.com

http://abc.go.com/

www.yahoo.com

www.google.com

www.cnet.com

www.dpreview.com

http://www.myhouseplayhouse.com/  (Not good alignment)

http://shop.a1resources.co.uk/epages/es111483.sf/en_GB/?ObjectPath=/Shops/es111483_shop (Not good alignment)

http://www.wordq.com/ (Poor alignment)

http://www.youthchg.com/ (Poor alignment)

Almost all of the websites that I visited utilized strong alignments in the layout.  I found the last four websites to have poor alignment.  Objects and text were not aligned into columns.  The websites that appeared clean had invisible columns and rows that made everything neat and easy to read.

 On every web page you look at from now on, notice how elements have been aligned. Spend a minute to put into words what the page looks like, how it affects you. When viewing a messy page, think about how it might look if things were aligned.

http://www.amazon.com/

I took a look at Amazon.com and didn’t like how the first row of pictures had 3 columns while the all other rows had 5 columns.  Pictures look a bit messy for a professional website like Amazon.com.  I thought the alignment could have been better.

On the next ten web pages you see, consciously note how the principle of proximity affects your instant impression of the page and what it is trying to communicate, both positively and negatively.

http://www.corkd.com/

www.download.com

http://www.drawinglessons.info/

http://www.teachplanet.net/index.html

http://www.songsforteaching.com/

http://www.myhouseplayhouse.com/  http://shop.a1resources.co.uk/epages/es111483.sf/en_GB/?ObjectPath=/Shops/es111483_shop

http://www.wordq.com/

http://www.youthchg.com/

http://www.kidzworld.com/

The principle of proximity affects my first impression of the webpage by telling me how organized the information on that page is.  Proximity communicates that a particular heading is associated with the paragraph adjacent to it.  Without proximity, the viewer would not know where that heading belongs or where that paragraph belongs.  Proximity is good for organization of text and pictures on a webpage.  Viewers will consider a website to be unprofessional if the rule of proximity has been ignored.

 Choose three web pages that are oblivious to the principle of proximity. Put into words how the lack of proximity disrupts the design layout, and how it disrupts the communication process. Think of solutions and put them into words.

http://www.nstasubs.org/index.html

http://www.teaching-esl-to-adults.com/

http://www.unitstudyhelps.com/homepage.shtml

These websites are quite oblivious to the principle of proximity, but they can definitely improve on it.  The space above and below each heading are separated by the same number of line space.  This makes the pages a little bit more difficult to read.  It would have been better if the heading and the paragraph that is associated with it are closer together.

Go to several large, corporate web sites. Try some museums or art sites. Poke around in the pages and put into words what the designers have done, using repetitive elements, to unify all the pages of their sites.

http://www.philamuseum.org/

http://www.sdmart.org/

www.ibm.com

http://www.intel.com/

As I poked through the different webpages of each of these websites, the thing that I noticed was how each webpage for each site had a common theme or design that let me know that I was still on the same website even though I’ve changed webpages.  Some were better designed than others, but they all had a common color scheme, design and layout of menus that made it recognizable.

If the designers didn’t do a very good job, put that into words also: Why doesn’t the site appear unified? What could be done to make it unified? Do you see why it is important to use repetition?

The sites all seemed unified because they all used the same color scheme and similar menu bars.  The fonts were also the same.  The alignments were kept the same or similar from page to page.  This gave these sites a unified feeling.

 Find pages where the “rules” have been consciously broken, yet the pages communicate clearly. Put into words how the designer did this.

www.dell.com and www.hp.com has pages that break rules, but it works because the information is layout well and it is easy to follow.  Actually, I find information on their webpages to be a bit cluttered as they try to put a lot of different products on the same page.  Nevertheless, information on each page is organized enough that I can still follow it.  This is probably why rules can be broken and yet the pages still communicate clearly.

Find two pages where the contrasting elements disrupt the natural flow of the page. What can be done to improve those pages?

http://www.atomicdeathray.com/unprofessional/

http://www.atomicdeathray.com/unprofessional/xmasquiz.html

http://www.atomicdeathray.com/unprofessional/taste.html

http://www.atomicdeathray.com/unprofessional/confessions.html

Here are four webpages from the same website atomicdeathray.com.  All four have completely different color schemes, alignment, font styles, sizes and colors.  It seems each webpage is a different website.  To improve it, there needs to be a common background that needs to be placed on each webpage with the same color scheme.  Font styles, sizes and colors must be kept the same.  Alignment and the element of repetition must be introduced in order to improve these pages.

Chapter 6 Quiz

Do some simple redesigning of two of your own web pages. Open them in your web authoring software. Print the pages as they are right now, then print them again after you do some easy rearranging.

1. Check the alignment. Remember, this doesn’t mean everything is aligned on one edge—you might have three columns, but they should all be left-aligned (not two left-aligned and one centered, for instance), or maybe they’re all centered under a centered head. Just don’t mix alignments.

Does everything on the page have some visual connection with something else on the page? Can you draw a straight line from the edge of each item, such as a block of text, to the edge of another?

Yes, everything on the page has some visual connection with something else on the page.  Yes I can draw a straight line from the edge of each item to edge of anther.

2. Group similar elements into closer proximity. Make sure headlines are closer to their related body copy than to the text or graphics above them.

. If a headline is two lines, make sure the lines are close to each other.

. Make sure captions are close to their photos.

. Make sure subheads have more space above than below them.

. Make sure there is enough space between elements that are not similar.

. Make sure the spatial arrangements provide a visitor with instant visual clues as to the hierarchy of information.

3. Create repetitive elements. Especially if this page is part of a larger site (which it probably is), create repetitive elements that will let a reader know instantly that this page is part of the complete site. The repetition might be as simple as a color scheme, a consistent background pattern, an arrangement of elements, graphic headlines, a navigation bar, etc. Even if your entire web “site” is only one page, that page could probably use some repetitive elements to unify the various pieces. Find something you’re using already, such as bullets, and make them interesting (but not big) bullets—those can be your repeating element.

My website is multiple pages and it uses a common background and menu bar as well as a common color scheme to unite all the webpages.

4. Create contrast in appropriate places. Avoid a flat, gray page. Use a background that contrasts with the text and graphics. If there isn’t one already, establish a hierarchy of information so the reader can easily skim to the section they need. Use contrast of size and weight (boldness) to create the hierarchy. Pick up a color from your color scheme and use it in headlines and important words.

Yes, all my text is black which contrasts against a white background with an orange menu bar on the left hand side.

Chapter 7 Quiz (pg 154)

Of the two examples below, which one instantly strikes you with a visual impression as having a better interface and navigation?  Why is that?  What is going on in both of these pages that gives you your instant impressions?  Put into word the problems with one and the solutions of the other, specifically in regard to the interface and navigation.  Add other comments, if you wish.

Webpage B definitely strikes me with a visual impression of having a better interface and navigation.  That is because it has a menu bar on the left hand side that organizes all categories.  All text and paragraphs are aligned with an invisible column and are left justified within that column.  Last, the color scheme works because brown, orange, red and yellow background colors makes the website easy to look at.  Webpage A’s color scheme is okay, but the graphics need to be redone to make the color scheme work.