PBA Front-End Programming

Web Design Elements

Web design elements

• For now, we will primarily focus on web design as such

• Given the– Purpose– Target Audience– Information Architecture– …

• … create ”good” web page designs

Web design elements

• Overall principle: Simplicity– KISS (Keep It Simple, Stupid)– Don’t make me think…– Minimal surprise– The user (usually) doesn’t want to spend time on

our website, so help the user get the job done

Web design elements

Web design elements

• Design elements to consider– Colors, and other visual elements– Fonts/typefaces– Choice of proper text– Forms of appeal– Website structure and navigation– Page composition

• Overview now, details later

Web design elements

• Why are colors important…?

Web design elements

• Vision is (usually) the ”strongest” human sense – primary source of information

• Humans are good at spotting differences in colors (~10 million hues)

• Colors and feelings are closely related• On a website, colors is the first thing we

notice – first impression is important!

Web design elements

Web design elements

• Fonts/typefaces – the visual form of text• Why is it important…?• Practical – must be easy to read textual

content on the website• Emotional – we also associate certain

typefaces with certain feelings, etc..

Web design elements

The Cuba Libre Club

Ye Olde Pirates Inn

Web design elements

The Cuba Libre Club

Ye Olde Pirates Inn

Web design elements

The Cuba Libre Club

Ye Olde Pirates Inn

Web design elements

Death and Honor

Death and Honor

Web design elements

• Different target audiences require different textual formulations and complexity

• Kids hate long words!• Is your site supposed to be– Explicit (Introductory/casual)– Implicit (knowledgable/experienced)– Focused (kids/elderly/ethnic/subculture/…)

Web design elements

Uhhh, what…?

Web design elements

• Rhetoric: the art and technique of persuasion, through oral, written, or visual media

• Elements of Rhetorics– Ethos (authority)– Logos (rationality)– Pathos (feelings)

Web design elements

• How do we divide content into multiple pages?

• Depends on purpose!• Two main structures– Linear– Hierachical

• Search!

Web design elements

• How do we navigate from one area of a wesbite to another (or to other websites)…?

• …through links!• Manifestations of links– Explicit link (www.cnn.com)– Anchor text (click here for info)– Metaphor (picture, icon, symbol,…)

Web design elements

Web design elements

Web design elements

• How do we ”put it all together” – how do we compose a good web page?

• Again, main driver is– KISS– Minimal surprise– Help the user get the job done

Web design elements