PBA Front-End Programming
description
Transcript of PBA Front-End Programming
![Page 1: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/1.jpg)
PBA Front-End Programming
Web Design Elements
![Page 2: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/2.jpg)
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
![Page 3: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/3.jpg)
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
![Page 4: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/4.jpg)
Web design elements
![Page 5: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/5.jpg)
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
![Page 6: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/6.jpg)
Web design elements
• Why are colors important…?
![Page 7: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/7.jpg)
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!
![Page 8: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/8.jpg)
Web design elements
![Page 9: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/9.jpg)
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..
![Page 10: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/10.jpg)
Web design elements
The Cuba Libre Club
Ye Olde Pirates Inn
![Page 11: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/11.jpg)
Web design elements
The Cuba Libre Club
Ye Olde Pirates Inn
![Page 12: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/12.jpg)
Web design elements
The Cuba Libre Club
Ye Olde Pirates Inn
![Page 13: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/13.jpg)
Web design elements
Death and Honor
Death and Honor
![Page 14: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/14.jpg)
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/…)
![Page 15: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/15.jpg)
Web design elements
Uhhh, what…?
![Page 16: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/16.jpg)
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)
![Page 17: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/17.jpg)
Web design elements
• How do we divide content into multiple pages?
• Depends on purpose!• Two main structures– Linear– Hierachical
• Search!
![Page 18: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/18.jpg)
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,…)
![Page 19: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/19.jpg)
Web design elements
![Page 20: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/20.jpg)
Web design elements
![Page 21: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/21.jpg)
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
![Page 22: PBA Front-End Programming](https://reader036.fdocuments.net/reader036/viewer/2022062316/5681672c550346895ddbc9c6/html5/thumbnails/22.jpg)
Web design elements