ELEMENTS OF GOOD DESIGN AND WHAT TO AVOID

Transcription

1 ELEMENTS OF GOOD DESIGN AND WHAT TO AVOID

2 BALANCE RHYTHM PROPORTION DOMINANCE UNITY

3 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

4 SYMMETRY ASYMMETRY

5 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

6 Regular Rhythym Flowing Rhythym Progressive Rhythym

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

8 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

9 POINT LINE FORM (SHAPE) TEXTURE COLOR

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

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

12 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

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

14 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

15 Complementary Analogous Triadic

16 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

17 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

18 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

19 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?

20 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

21 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.

22 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.

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 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

31 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)

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

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

34 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

35 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

36 Digital Web Magazine, 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, Bad Web Design Features, Robin Williams,