ELEMENTS OF GOOD DESIGN AND WHAT TO AVOID

ELEMENTS OF GOOD DESIGN AND WHAT TO AVOID

BALANCE RHYTHM PROPORTION DOMINANCE UNITY

Arrangements of object in given design relating to their visual weight within a composition 2 forms: symmetrical and asymmetrical Symmetrical: weight of composition is evenly distributed around a vertical or horizontal axis, also known as formal balance Asymmetrical: weight of composition is not evenly distributed around a vertical or horizontal axis, also known as informal balance

SYMMETRY ASYMMETRY

Repetition or alternation of elements. Can create sense of movement and establish pattern and texture Regular: occurs when intervals between elements are similar in size and length Flowing: gives a sense of movement Progressive: shows a sequence of forms through a progression of steps

Regular Rhythym Flowing Rhythym Progressive Rhythym

Comparison of dimensions or distribution of forms Relationship in scale between one element and another or a whole and its parts

Relates to varying degrees of emphasis in design Determines the visual weight of a composition Establishes space and perspective Resolves where the eye goes first when looking at a design Dominance

POINT LINE FORM (SHAPE) TEXTURE COLOR

Element that has position Single mark in space with a precise, but limited, location POINT

Element characterized by length and direction Created contours and form Creates perspective LINE

Closed contour, element defined by its perimeter Can be two dimensional or three dimensional Can be realistic, abstract or in between Derived from the combination of point, line and shape FORM

Used to create surface appearance Often refers to the material something is made of Both a visual and tactile phenomenon

Response of the eye to differing wave lengths within the visible spectrum Three main components Hue: where the color is position on the color wheel. Red, blue-green and mauve are all hues of a given color Value: the general lightness or darkness of the color Saturation: the intensity of the color

Complementary Analogous Triadic

Harmony between 2 colors on the opposite side of the color wheel Placed side by side they enhance the intensity of each other Blended together they decrease the intensity of each other

Harmony of colors whose hues are adjacent to one other on the color wheel Tend to be families of colors Blue, blue-violet, blue-green Yellow, yellow-orange, yellow-green

Harmony of three colors equidistant from one another on the color wheel Examples are primary and secondary colors Primary: red, blue and yellow Secondary: green, purple and orange

CONTENT ASK THE FOLLOWING QUESTIONS: Who is my website for? What do they want from the website? What do I want from the website? What can I realistically provide and maintain?

TONE Tells the world what kind of department or program you have, is reflected in your choice of content, how you present the content and the look and feel of the website. What impression do you want your visitors to have? Formal Intellectual but fun Business-like Creative and sophisticated Scientific and cutting edge Exciting Academic but friendly Informal but smart

ORGANIZING INFORMATION (INFORMATION ARCHITECTURE) This is the way you structure the information on the website. Information should be categorized logically and labels should make sense to visitors. Think about your audience. Information should be placed where people would logically expect it to be. Every page should provide something more than just navigation. Pages should deliver what they promise. All pages should contain navigation to enable the user to get back to the starting point.

VISUAL DESIGN Make sure your text is easy to read. Keep readability in mind when choosing font, type size, page positioning and colors Think carefully about graphics. Do they add value to the site? Colors matter. Color choice should reflect the personality of your program or department and should not inhibit readability. Don t place anything on the site that doesn t serve a purpose.

ACCESSIBILITY Accommodate users who are colorblind, have visual impairments, are deaf or experience mobility or coordination challenges. Avoid Flash Avoid nested tables, use single tables sparingly Use Cascading Style Sheets to control layout and positioning Avoid or modify JavaScript drop-down menus Use alt attributes for all graphic images Don t rely on icons or images to communicate, especially in navigation

ACCESSIBILITY (cont d) Keep visual design clean and simple: no frames Make sure your information design is solid and logical Check your site with online accessibility tools, like WAVE Run your site through a screen reader or try to navigate it using only keyboard navigation; ideally, enlist differently-abled people to test your site and give feedback on its usability

Text Background does not interrupt the text Text is big enough to read, but not too big The hierarchy of information is perfectly clear Columns of text are narrower than in a book to make reading easier on the screen http://med.uth.tmc.edu/comm/

Navigation buttons and bars are easy to understand and use Navigation is consistent throughout the web site Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on Frames, if used, are not obtrusive A large site has an index or site map http://www.ashevilleschool.org/

Link colors coordinate with page colors Links are underlined so they are instantly clear to the visitor Buttons are not big and dorky Every graphic has an alt label Every graphic link has a matching text link Graphics and backgrounds use browser-safe colors Animated graphics turn off by themselves http://www.ashevilleschool.org/athletics/index.aspx

Pages download quickly Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text Every web page in a site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages http://www.ashevilleschool.org/athletics/index.aspx

Background Default gray color Color combinations of text and background that make the text hard to read Busy, distracting backgrounds that make the text hard to read

Text that is too small to read Text crowding against the left edge Text that stretches all the way across the page Paragraphs of type in all caps, bold or italic Paragraphs of type in all caps, bold and italic all at once Underlined text that is not a link

Links that are not clear about where they will take you Links in body copy that distract readers and take them off to remote, useless pages Text links that are not underlined so visitors do not know they are links Dead links (links that don t work anymore)

Graphic files that take forever to load Meaningless of useless graphics Graphics with no alt labels Missing graphics

Anything that blinks, especially text Multiple things that blink on the same page Animated pictures for e-mail Animations that never stop Multiple animations on the same page, that never stop

Unclear navigation Overly complex navigation Complicated frames, too many frames, unnecessary scroll bars in frames Orphan pages (no links back to where they came from) Page titles that don t explain what the page is about

Frames that make you scroll sideways No focal point on the page Too many focal points on the page Navigation buttons as the only visual interest on the page Cluttered Lack of contrast in color, text and hierarchy Pages that look ok in one browser but not in another http://anselme.homestead.com/afphaiti.html

Digital Web Magazine, www.digital-web.com, The Principles of Design, The Elements of Design, Designing for the Web, Principles and Elements of Design, Joshua David McClurg- Genevese LSCR (Berkeley University), lscr.berkeley.edu/advice/web/design, How to Design a Good Website Good Web Design Features, Robin Williams, www.ratz.com Bad Web Design Features, Robin Williams, www.ratz.com