“Content is king,” writes Jason Beaird in our second assigned textbook, The Principles of Beautiful Web Design. He emphasizes that it is important that a website be not only attractive but also usable, at once pleasing to visitors and drawing them to the content. “If visitors can’t find what they’re looking for, they will undoubtedly close the browser or move on to another site.” And borrowing a term from newspaper design, Beaird says they should see the main content block “above the fold” — that is, before they scroll down the page.

The first chapter of the book is available free at

http://www.sitepoint.com/books/design1/

Beaird says to start by sketching ideas on a blank sheet of paper. “Here’s why: It’s easy to lose focus on the design if you start thinking about the layout in front of computer. If you start out on paper, you can ignore the technical limitations of browsers and CSS, and focus on how you want the final product to look.”

He follows the “rule of thirds,” which approximates the “golden ratio” of Pythagoras. He draws a couple of vertical lines in a rectangle to divide it into thirds, and then a couple of horizontal lines to divide the up-and-down dimension into thirds. The result looks something like a tic-tac-toe challenge, with nine squares. He describes different ways to place the blocks of content within this grid — for example, with the main content block occupying either the left- or right-hand two-thirds of the pages and the links running down the other third. He recommends using the lines creating the three main vertical columns as alignment guides.

Beaird goes on to discuss other principles used to place elements on the grid.

Balance — both symmetrical and asymmetrical, which is when smaller elements combine to balance one larger element. Web sites often use asymmetrical design.

Unity — not only within each element but across the entire web page, so it works as a unit. Placing elements in proximity to one another creates the feeling of a single unit. So does repetition of patterns and textures throughout a design.

Emphasis — focusing the viewer’s attention on a particular element of the design.

Contrast — Using a different color or shape to lend emphasis.

Proportion — Differing proportions among elements catch the eye as well.

(Parenthetically, Beaird advises against using the blink and marquee tags at all.)

Beaird moves on to the advantages and disadvantages of some of the most common web layouts:

Left-column navigation (the most common) versus right-column (sometimes used for sub-navigation)
A three-column format can be used on an exceptional basis, as Apple does to display product choices.

Beaird lists some sites offering “a plethora” of other design choices:
CSS Zen Garden at http://www.csszengarden.com/
CSS Beauty at http://www.cssbeauty.com/
Stylegala Gallery at http://www.stylegala.com/archive/
CSS Vault at http://cssvault.com/
Design Interact Site of the Week at http://www.designinteract.com/sow/

Borrowing another term from newspapers, Beaird recommends a “morgue file” of web site designs that can be used for inspiration. To capture a design, you can use alt/print screen on a PC to capture the image and then copy it into a graphics program (or MS Word for that matter).

Beaird says he has picked up some new trends, notably three columns with content first.

The decision whether to use a fixed-width layout (with the width of the entire page set with a specific numeric value) or a liquid layout (which is flexible depending on how wide the viewer’s browser is) depends on the target audience — that is, what the client wants — and the accessibility goals of each web site, Beaird says, but the most sites he has designed have been fixed-width. A recent alternative is “variable fixed-width,” one example of which allows content to spread into an additional column when the browser window is expanded from 800 to 1024 pixels in width.

Working With Text, Lists & Tables

Lesson 3 in our primary textbook, Dreamweaver CS4 Classroom in a Book, walked us through inserting text from another source and changing its formatting. There was an initial problem with vanishing images, but I had learned to deal with that in Lesson 2 and just did it again. For some reason, though, when I reached the part about formatting blockquotes, I got an error message saying:
“mystyles.css cannot be found. If the file exists on the server, use the Files panel to get the files from the server.” Which server? Where? I could see the file listed on my flash drive and the FTP server, but how do I “get” it? Classmate Mark D’s blog said he had solved a problem by going into coding. So I opened the Code view. There was no definition of body type there. Also, the font in Design view appeared to be Times New Roman although I was pretty sure it should be sans serif. So I opened up an HTML file from an earlier chapter and copied the tag for body type. Sure enough, the font changed to sans serif and I got the chance to update the mystyles.css file. The resulting web page is at http://bcts-potomac.aacc.edu/cat/cat17/lesson03/santorini.html

although some of the formatting disappeared because of some issues I have been having with links. After consultation with the teacher, I believe these have been resolved — but too late for this exercise.

In our class exercise we set up a web site featuring our instructor’s cute dog, Kona.
http://bcts-potomac.aacc.edu/cat/cat17/week3/index.html

Although I carried out the border-collapse procedure, it had no apparent effect. There are still white spaces between the cell borders on the Santorini Hotels table.

Class Videos:

We watched some new videos in class:

Styling Text in Dreamweaver

Adding Text and Images to Your Page

We also got a list of videos about Fireworks, which we will use in class:
Fireworks – Managing the Design Suite
Understanding Fireworks
The Fireworks Interface
Importing Files Into Fireworks

Finally, there are some sites that provide stock photos:

http://www.gettyimages.com
http://www.comstock.com
http://www.fotosearch.com
http://pro.corbis.com
http://www.shutterstock.com/ (subscription based system)
http://www.istockphoto.com/ (micro-payment plan per image system)

Advertisements