Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Web Design Basics Creating Appealing Websites Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.c."— Presentation transcript:

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

2 Design for Target Audience Use colors and images that appeal to your target audience. ◦www.nasa.govwww.nasa.gov ◦www.bls.govwww.bls.gov 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.

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

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

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

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

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

8 Web Color Palette Hexadecimal color values. Try to use web-safe colors www.colorschemedesigner.com www.colorjack.com www.colorsontheweb.com/colorwizard.asp Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

9 Use of Color Appealing to children and pre-teens. ◦www.usmint.gov/kidswww.usmint.gov/kids Appealing to young adults. ◦www.underatedrock.comwww.underatedrock.com Appealing to everybody. ◦www.nps.govwww.nps.gov Appealing to older adults. ◦www.nihseniorhealth.govwww.nihseniorhealth.gov Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

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

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

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


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

Similar presentations


Ads by Google