Layout and Design er Above: The rule of thirds says that designs based on dividing things into thirds look harmonious. The website of singer and songwriter Lily Allen (wwwillyallenmusic. com) uses three equally big columns on th homepage, and thirds / one-third layout on content pages two Right: The inconsistent alignment a aligned text Far right: The pictures line up with each other, the text above and the company name, The left-aligned main text looks cleaner. The footer is right-aligned with the right-margin of the main content box. This is far from a complete web design, but it does show the difference good alignment makes. Tips for Good Alignment ‘To ensure your web page lines up well, follow these steps: 8 Mark up your content correctly, using the right HTML, tags, to identify a heading or a list item, for example. By default, HTML brings consistency, ensuring that all headlines and bullets line up. You'll learn more about HTML in Chapter 6. e ‘Take care when adding spacing using CSS (changing the padding and margin around an element). This can introduce inconsistencies that throw out the natural alignment that HTML gives you. You'll learn how to control spacing using CSS in Chapter 7. 6 Be careful if you're using a visual editing system to build your web pages. They will often let you place content ‘wherever you want on the page, but wont alert you if you're a few pixels out in lining things up. That can lead to designs that look sloppy. oe Tt easier to create a strong alignment, and the impression, of good design that goes with it, if you align content with the left or right cdge of the page or content box. If you center content, the alignment is harder to see. Centered paragraphs are also harder to read, because the start of each line is harder to find. Newcomers often want to center everything, but you should limit your use of center alignment to a few carefully selected parts of your design. ‘Gener Bed Den Lt SAS Up. upand Away!Thinking Above the Fold As well as column based layouts, there's another idea the web has borrowed from the newspaper industry: the fold. When broadsheet newspapers are laid out for sale, they're folded ‘Avoid having deep down the middle and only the top half can be seen. The bit that's 89s "09! =aure foo ‘on show is said to be “above the fold”. Newspapers are designed splitting 5 one ania to have their major headlines and photos in this top half of the into lots of shorter page, so that people are drawn to them and pick up the paper. The rticlos. It's easier to newspaper's branding also appears prominently in this top half,so ——pavigate, and can help that people can recognise it immediately. your search rankings, In web design, the term “above the fold” is used to refer to the first screenful of content. It’s what people can see without having to scroll the page, so itis their first impression of your website. Ie’ essential that your website's identity or branding, and its navigation, appears above the fold. By having multiple columns of text, you can also start several different stories above the fold and invite people to click to read more or scroll down the page to finish reading, OF course, the fold doesn't appear at the same place for everyone. Tevaries depending on the screen resolution, browser used, and the number of browser toolbars in use. If you're assuming a minimum screen height of 768 pixels, a good place to think of the fold is being 575-590 pixels down the page. But remember that this is the minimum and that people will see lots of different sized sereenfuls. People don't always notice the scrollbar, so you need to provide a visual cue to encourage people to scroll down the page. An easy way to do this is to box some of the content, and stagger where the boxes end. People will understand that if they cantt see the bottom border of the box, they haven't seen everything, Far left: The user has no clue that this page continues below the fold (the red line) Left: Boxing the left column tells the user the web page continues below the fold, prompting them to scrollLayout and Design 56 ee Make your navigation stand out. Use color, text size, or spacing to make it immediately obvious to visitors. While your text and other content has to be there, most of the time, people are just skim-reading it to find the next link they need rte Proximity helps communicate meaning, Don't put half your navigation links on the left and half on the right: they belong Make sure your headings are closer to the content they title, rather than the content above. People igno} they think ar ts So don’t make your content or navigation look the same size and shape as an advert (see Chapter 15 for standard advert sizes). Take care with positioning important content on the right, too. Adverts are often placed here, so content there might be more easily overlooked. Organizing Information Within cach web page, you need to create a hierarchy of information. It needs to be easy for visitors to see what's most important on any given page, and easy for them to skim-read the page to find what they're looking for. ‘Think of it like a newspaper. The size of the headlines, and their position on the page, tells you a lot about the relative importance of different stories. Here are some tips for organizing the content on your web page: © Larger text looks more important than smaller text. © Things higher up the page tend to be more important than things further down the page. © Be consistent. If you have 20 different sizes of text, it will be difficult for people to gauge their relative importance, Use up to three different types of headings which are consistently formatted. Using the HTML

to

tags correctly will enforce consistency by default. © Use bulleted lists and subheadings to structure your content: You can create them using HTML, so they're part of the language of navigating the web. © You can use contrasting color or spacing around elements to call attention to them, Audiobook company Audible (www. audible.com), for example, could use 2 text link that says “continue” to bring people into its subscription process. But it uses a bright orange button with space around it, so that there's no mistaking the most important action on this page. Best Seller sms, ees pane CESS yoCreating a Color Scheme ‘The typical computer can display millions of colors, so how do you choose a handful that work well? The good news is that there are lots of tools that encapsulate the important color design theories, and they're often free. Here's a suggested approach: 0 Think of a starting color. You could take it from your company logo, your favorite color, or from the association of a color with a particular meaning or mood. Red spells, danger or romance, green references nature, and blue communicates stability, for example. If you have an image that will be a prominent part of your design, you could take the color from that. The pipette tool in Photoshop can HTML Editor includes a olor scheme creator. ee be used to grab a color fom a You can atten change photo, £0 you ne personality of your can find out palette by using neem its RGB color pure color. You get a tint number, when you add white to 3 color You get a shade e Open a color scheme tool. You can find one at when you add black to a olor. A monochromat color scheme consists solely of tints and shades f one color, ike a sepia photograph. Although the co wheels mal fun to¢ eme, they encapsula important design theories. If you just make Up your own set of without reference r wheel there's a good chance ‘they'll clash, wwrw.colorschemedesigner.com, and Adobe has one called Kuler at http:/kuler-adobe.com. You might have one built in to your web design software or image editing software too. easy and e a color teLayout and Design ets} Above: Contrast-A, by Das Plankton, offers much more in-depth analysis of contrast. It's free to use at http: ton. del d can also be downloaded for free from the Adobe Marketplace, Don't be afraid to use black on white for large areas of text. It offers the best contrast, so it’s easy to read. Most of the major websites (including search engines, news sites, shops, and si networks) use black text on a white background for their core content The Color Contrast Checker helps you make sure your foreground and background colors make a combinatio gible ..cont’d Choose your starting color. You usually do this by clicking. it on a color wheel. Using Kuler, you can also type in a hex value of the color or its RGB value. Choose what type of color scheme you would like to create. You have several options here. A monochromatic scheme uses shades of one color. A complementary scheme uses two colors that are directly opposite each other on the color wheel, A triad uses three colors that are the same distance apart on the wheel. There's also @ split complement triad, which uses one color, and the two colors beside its complement on the other side of the wheel. An analogous color scheme uses colors that are next to cach other on the color wheel. Experiment to see what works well for you. Note the color numbers in the palette provided. You'll need to put them in your CSS code later. ‘To make sure that your site is easy for everyone to read, it’s important to make sure there is enough contrast between your foreground and background colors. ‘Take a screengrab of your color combination (text on background) and then use an art package to make it grayscale, to see how legible itis. Alternatively, enter your colors into the Color Contrast Check at http://snook. ca/technical/colour_contrast/colourlhtml. It will tell you whether your colors comply with accessibility guidelines.Using Gradients Solid blocks of color can be overwhelming, if the color is a warm one like red or yellow, or might just look a bit flat if not. That's why websites often use a gradient instead, where one color fades into another. The easiest way to do this isto ereate a background image that represents part of the gradient, and then repeat it. For example, this stripe of color: is set as a repeating background on the website for web surfing game Wild Mood Swings (www.wildmoodswings.co.uk), like this: You can use a gradient to soften any area of color, however big itis. You could apply a gradient image as the background to a button, to give it a 3D look that makes it stand out. Fresh Books (www. freshbooks.com) uses a gradient on its navigation tab and its button, as well as in its blue background. Central Snowsports (www. centralsnowsports.com. au) uses gradients in its predominantly pink design, to create a sense of texture. You can also put ‘an image in the background, to add texture to your page You could use a photo of wood or a wall, or something more subtle like sand. Carbon offsetting company Carbonica (www. carbonica.org) uses @ photo of brown paper in the background, to complement the cloth texture in its design he design gains a sense of unity when a few well-selected colors are repeated ‘throughout the design. ssh Books uses the same contrasting green color to call attention to its navigation tab and its pricing button, for example, The site have used two dif colors, but it looks better to repeat one,Layout and Design important thing is that an comfortably read your message. ewe See Chapter 7 for details to style your web page content ee I you specify very different fonts, test your website to ow it significantly different fonts are used. Choosing Fonts ‘The style of text you use on your website has a huge impact on its design. Some fonts are playful, some are business-like; some speak of tradition, while others look futuristic. All this information is conveyed before somebody has even read what the text says. ‘You should use fonts that convey the personality of your site, where possible, although there are lots of technical limitations on this. When the web browser displays text, it uses the fonts on the Visitor's PC, That means you'e limited to a relatively small set of safe fonts if you want everyone to see the same thing, However, you can give the browser a list of font options, Harrington so you could request a daring . and relatively rare font and give © DoRerman the browser a safe substitute if that font isn’t available. You Old English Text could use a font that comes with Adobe Creative Suite or Faloce Serjpt Microsoft Office, for people 2 Nols who have those packages, for Rage example, and declare a basic Ravie font that comes with the operating system, as a back-up. ROSETOOD STD For small pieces of text, such as a headline, you could create Snap Ive 4 picture that shows the text STENCIL STD and put that in your web page. ‘That approach is always used for logos, and could also be used for small headlines, but it should be used selectively. It makes your web page slower to load, creates a lot of work for you, in building and editing the site, and makes it harder for search engines and users of assistive technology to understand your content. If you're using Flash, you can embed a font in your Flash file, too, so you can send the font over the internet with your content. Pay attention to the size of the text and its color. Some fonts look. good at larger sizes but not at smaller, and vice versa. You can use color to change how heavy the font looks on sereen, too. A big blocky font can be softened by changing its color from black to blue, for example.