Designing for the Web 7 Useful Design Principles

What is Web Design? “Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.”

Plan First, Design Later 1.Start with questions What is the purpose? What are you trying to achieve? Who is going to be visiting the site? Be specific. You will probably have multiple audiences, so you need to prioritize them. What will they need to accomplish on your site? Answering these questions will help you make good design decisions. 2.Build and organize your content This is why your visitors are coming to your site. The content must be of interest to one or more of your audiences, relevant to your site goals and organized efficiently. 3.Design and Develop This step comes last! If you don’t understand the purpose and goal of a project, you can’t create a successful design. Related Links:

Hierarchy 1.Prioritize Everything can’t be important all the time. Referring to your site’s goals, give all of the content on the page a number: 1, 2 or 3. Then decide how to give the first priorities more weight and keep the third priorities from interfering from the rest of the design. 2.Minimize People don’t read on the Web. They scan. That means they look for headings, short blurbs of text, bullet points, etc., to find the information they need quickly. If your site needs to cover highly techincal or academic topics in great detail, find ways to minimize content on landing pages and link to the rest of the full text. 3.Organize Keep similar information grouped together and label each section of the page clearly. Consistency in organization across pages is also important, so that visitors know where to find certain types of information on every page. Related Link:

Hierarchy Examples

Composition 1.Visual Flow The page layout should naturally lead visitors from one key element to the next. Test your design by closing your eyes and open them again. Did your eyes look at the most important element first before moving on to the second most important element and so on? Ask others to review your site and rank the most important elements. 2.Balance Is there a strong underlying structure to you pages? Do elements align in logical ways? Try mapping out your page with blocks of color to see if everything has the proper weight.

Whitespace Definition: the space between elements in a composition. 1.It’s not empty space Whitespace: Gives your eyes a place to rest Improves legibility and helps to prevent eye fatigue Creates a welcoming environment Gives balance and structure to a page 2.Don’t forget typography The space between lines and paragraphs of text is white space too! Increasing the spacing will improve readability and give your page a more polished feel. Related Link:

Whitespace Examples

Glitz and Glam 1.You don’t need 37 pieces of flair Too much can make your site look unprofessional and cheap—or downright unusable. Your visitors are far more interested in how they find the information they’re looking for than in how cool that lens flare behind your navigation is. 2.Use Flash wisely Avoid using Flash intros that require a visitor to wait before navigating your site. Flash does not work well for sites with a lot of content. Unless you are needing a high level of interactivity and only need a paragraph or two of text on each page, it is probably not going to do what you need. Don’t use Flash for navigation. Do not build your entire site in Flash. Unless you are highly accomplished in Flash, either of these will result in: > poor search engine ranking > poor accessibility > difficulty in making updates.

Color 1.Color is subjective What kind of emotions do you want your site to convey? Trust and authority? Vibrancy and youth? Color choice can help you achieve this goal. Don’t just choose your “favorite colors.” Color choice should relate to the site goals, intended audiences and subject matter. 2.Less is more Choose two to three colors at most: primary, secondary and tertiary If you’re going to choose colors from the recommended color palette on the Web Policy site, make sure you use the exact colors, not approximations. Keeping these colors consistent across our site will strengthen our image.Web Policy site 3.Some tools to use Color Palette Generators: Palette Picker: Color Wizard:

Color Examples

And Don’t Forget… 1.Compatibility Don’t forget to test your site in various browsers and resolutions and on PC and Mac. We recommend testing in at least Internet Explorer and Firefox on the PC and Firefox and Safari on the Mac. 2.Accessibility Check that the contrast between foreground text and background color is high enough for easy legibility.Is there alternate content available for visual aids like photos and artwork so that visitors using screen readers will be able to fully navigate your site?Is your text built so that it can be resized using browser preferences? 1.UsabilityDo links look like links?Are all of the options for navigation managed so the visitor doesn’t get overwhelmed? Does the placement of elements on your page make sense for users across a variety of browsers and resolutions?

Resources A List Apart Web Page Design for Designers Boagworld