Web Design Basics Creating Appealing Websites Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.c

Design for Target Audience Use colors and images that appeal to your target audience. ◦ ◦ Browser friendly ◦Test in IE, Firefox, Chrome Screen Resolution ◦Old monitors and mobile devices Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Website Organization Hierarchical ◦Too shallow ◦Too deep Linear ◦Need for sequencing Random ◦Not common Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Principles of Visual Design Repetition ◦Repeat visual elements throughout the design. Contrast ◦Add visual excitement and draw attention. Proximity ◦Group related items. Alignment ◦Align elements to create visual unity. Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Design to Provide for Accessibility Accessible design can benefit search engine listing. Legal Requirement ◦mandated by U.S. government for all federal agencies. W3C also actively involved. Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Use of Text Use short sentences and phrases. Be concise. Organize the page with headings and sub- headings. Keep in mind that bulleted lists stand out on the page and are easily read. Use common fonts. Typeface – Arial and Verdana Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Use of Text Check font weight. ◦Be careful not to bold everything, it has the same effect as bolding nothing. Check font color for contrast. Check alignment ◦Centered text is harder to read. Carefully choose text in hyperlinks. Check spelling and grammar. Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Web Color Palette Hexadecimal color values. Try to use web-safe colors Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Use of Color Appealing to children and pre-teens. ◦ Appealing to young adults. ◦ Appealing to everybody. ◦ Appealing to older adults. ◦ Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Use of Graphics and Media Avoid relying on images to convey meaning. Make sure file size is small as possible. Use only necessary multimedia ◦Use animation only if it makes the page more effective. ◦Younger audiences find animation more appealing than older audiences. Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Page Layout Design Use Cascading Style Sheets (CSS) for page layout Use consistent logo and color scheme. Ice ◦Fixed width, hugs left margin. Jello ◦Content stays centered. Liquid ◦Content expands. Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Other Considerations Load time. Above the fold. Adequate white space. Avoid horizontal scrolling. Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.