1 / 30

PBA Front-End Programming

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

ludwig
Download Presentation

PBA Front-End Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PBA Front-End Programming Web Design Elements

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

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

  4. Web design elements

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

  6. Web design elements • Why are colors important…?

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

  8. Web design elements

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

  10. Web design elements The Cocoa Libre Club Ye Olde Pirates Inn

  11. Web design elements The Cocoa Libre Club Ye Olde Pirates Inn

  12. Web design elements The Cocoa Libre Club Ye Olde Pirates Inn

  13. Web design elements Death and Honor Death and Honor

  14. 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/…)

  15. Web design elements Uhhh, what…?

  16. Web design elements • How do we divide content into multiple pages? • Depends on purpose! • Two main structures • Linear • Hierachical • Search!

  17. 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,…)

  18. Web design elements

  19. Web design elements

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

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

  22. Web design elements • Example: Law of Proximity

  23. Web design elements • Example: Law of Similarity

  24. Web design elements • Example: Law of Isomorphism

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

  26. Web design elements

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

  28. Web design elements

  29. Web design elements • Types of contrast • Color (several variants) • Size • Shape • Position • Formulation

  30. Web design elements

More Related