Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download WEB DESIGN ESSENTIALS
Transcript
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 McClurgGenevese 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
