pba front-end programming
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/1.jpg)
PBA Front-End Programming
Web Design Elements
![Page 2: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/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://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/3.jpg)
Web design elements
• Overall principle: Simplicity– KISS (Keep It Simple, Stupid)– Don’t make me think…– Minimal surprise– The user doesn’t want to spend time on our
website (usually)
![Page 4: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/4.jpg)
Web design elements
![Page 5: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/5.jpg)
Web design elements
• Design elements to consider– Colors, and other visual elements– Fonts/typefaces– Choice of proper text– Website structure and navigation– Page composition (Gestalt laws)– Using contrast
• Overview now, details later
![Page 6: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/6.jpg)
Web design elements
• Why are colors important…?
![Page 7: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/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://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/8.jpg)
Web design elements
![Page 9: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/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 feeling, etc..
![Page 10: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/10.jpg)
Web design elements
The Cocoa Libre Club
Ye Olde Pirates Inn
![Page 11: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/11.jpg)
Web design elements
The Cocoa Libre Club
Ye Olde Pirates Inn
![Page 12: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/12.jpg)
Web design elements
The Cocoa Libre Club
Ye Olde Pirates Inn
![Page 13: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/13.jpg)
Web design elements
Death and Honor
Death and Honor
![Page 14: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/14.jpg)
Web design elements
• Different target audiences require different textual formulations and complexties
• 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://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/15.jpg)
Web design elements
Uhhh, what…?
![Page 16: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/16.jpg)
Web design elements
• How do we divide content into multiple pages?
• Depends on purpose!• Two main structures– Linear– Hierachical
• Search!
![Page 17: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/17.jpg)
Web design elements
• How do we navigate from one page to another…?
• …through links!• Manifestations of links– Explicit link (www.cnn.com)– Text link (click here for info)– Metaphor (picture, icon, symbol,…)
![Page 18: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/18.jpg)
Web design elements
![Page 19: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/19.jpg)
Web design elements
![Page 20: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/20.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– Get the users job done
![Page 21: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/21.jpg)
Web design elements
• Gestalt psychology deals with how humans make sense of visual input
• Gestalt laws: laws (empirical) about how humans assign meaning to collections of visual elements
• A sort of ”visual grammar”
![Page 22: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/22.jpg)
Web design elements
• Example: Law of Proximity
![Page 23: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/23.jpg)
Web design elements
• Example: Law of Similarity
![Page 24: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/24.jpg)
Web design elements
• Example: Law of Isomorphism
![Page 25: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/25.jpg)
Web design elements
• List of Gestalt Laws– Law of Proximity– Law of Symmetry– Law of Similarity– Law of Common Fate– Law of Continuation– Law of Isomorphism
– Law of Closure– Law of Figure-Ground– Law of Focal Point– Law of Simplicity– Law of Prägnanz– Law of Unity
![Page 26: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/26.jpg)
Web design elements
![Page 27: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/27.jpg)
Web design elements
• Gestalt laws deal primarily with perception of similar elements
• Elements are only similar if they are different from something else
• Making elements that are different or in contrast to other elements is a powerful effect
![Page 28: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/28.jpg)
Web design elements
![Page 29: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/29.jpg)
Web design elements
• Types of contrast– Color (several variants)– Size– Shape– Position– Formulation
![Page 30: PBA Front-End Programming](https://reader035.vdocument.in/reader035/viewer/2022070421/568161b3550346895dd17c67/html5/thumbnails/30.jpg)
Web design elements