Web Design Basics
Creating Appealing Websites
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.c

Use colors and images that appeal to your
target audience.
◦ www.nasa.gov
◦ www.bls.gov

Browser friendly
◦ Test in IE, Firefox, Chrome

Screen Resolution
◦ Old monitors and mobile devices
Design for Target Audience
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Hierarchical
◦ Too shallow
◦ Too deep

Linear
◦ Need for sequencing

Random
◦ Not common
Website Organization
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

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.
Principles of Visual Design
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.
Accessible design can benefit search
engine listing.
 Legal Requirement

◦ mandated by U.S. government for all federal
agencies.

W3C also actively involved.
Design to Provide for Accessibility
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.






Use short sentences and phrases.
Be concise.
Organize the page with headings and subheadings.
Keep in mind that bulleted lists stand out
on the page and are easily read.
Use common fonts.
Typeface – Arial and Verdana
Use of Text
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

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.

Use of Text
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.





Hexadecimal color values.
Try to use web-safe colors
www.colorschemedesigner.com
www.colorjack.com
www.colorsontheweb.com/colorwizard.asp
Web Color Palette
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.

Appealing to children and pre-teens.
◦ www.usmint.gov/kids

Appealing to young adults.
◦ www.underatedrock.com

Appealing to everybody.
◦ www.nps.gov

Appealing to older adults.
◦ www.nihseniorhealth.gov
Use of Color
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.
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.
Use of Graphics and Media
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.
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.
Page Layout Design
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.
Load time.
 Above the fold.
 Adequate white space.
 Avoid horizontal scrolling.

Other Considerations
Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.