Popular in ADV FRONT END WEB DEVELOPMNT
verified elite notetaker
Popular in ComputerScienence
This 5 page Class Notes was uploaded by Petey Martin on Friday October 30, 2015. The Class Notes belongs to CSC 209 at University of Rochester taught by KOSTIN R in Summer 2015. Since its upload, it has received 22 views. For similar materials see ADV FRONT END WEB DEVELOPMNT in ComputerScienence at University of Rochester.
Reviews for Week 9
Report this Material
What is Karma?
Karma is the currency of StudySoup.
You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!
Date Created: 10/30/15
Petey Martin Notes 102615 Web UI Design for the Human Eye 0 The Gutenberg Diagram in Web Design The Gutenberg Rule is used to show a user behavior known as reading gravity the western habit of reading lefttoright topto bottom It is represented by dividing the visible content area in 4 quadrants 0 Primary optical area upper left 0 Strong follow area upper right 0 Weak visual area lower left 0 Terminal area lower right 0 Designing for Scanning Fpattern FShaped Pattern for Reading Web Content What is the FPattern Users will rarely read every word of your text in fact only 20 o The rst two sections are the most important and should contain your hook Cover only one idea per paragraph using bullets as much as possible 0 Start paragraphs and new sections with enticing keywords How to Use the FPattern Point 1 best most important content across the top starting on the left 0 Typical logo branding company information 0 Point 2 navigation or quothelpquot stretching across 0 Typical horizontal navigation bar 0 Points 3 amp 4 Content stories sections including purposefully placed quotawkwardquot items to breakup monotony How the Fpattern works 0 Present options in a noticeable way Without distracting from the primary content 0 The righthand sidebar lesser content 0 Featuring relevant but unrelated content Anything you want your user to see but that doesn t t in organically with the primary content These could be advertisements links to other posts a social media widget etc As a search tool This place could obviously host a search bar but could also have category listings tag clouds a quotpopular postsquot widget etc Why Is This Pattern Effective Mimics users natural sight patterns topto bottom lefttoright AB Testing con rms putting a phone number a calltoaction in the topright increases conversions 30 The Fpattern Summary Not just text Works because our human brains work that way Not a rule it s a guideline Works even ifjust using a logo navigation bar and a calltoaction in the corner it can make all the difference 0 Designing for Scanning ZPattern ZShaped Pattern for Less ContentHeavy Webpages What is the ZPattern The Fpattern organizes content The user will scan a straight vertical line down the left side until it reaches something of interest The Zpattern emphasizes callstoaction The user will more or less cover every line which is why it mostly applies to pages that feature a small enough amount of content to make this feasible How to Use the ZPattern Point 1 still the most valuable spot Point 2 important but this time notthe main calltoaction Prime area of the Zpattern is the center of the page Point 3 amp 4 reengaged scanning leading to the real calltoaction Important factors when using the ZPattern Backgrounds should be clean simple muted or nonexistent 0 You can quotstackquot multiple 25 one over another zigzag Why Is This Pattern Effective Adheres to the concept of Organizational Outline 0 Remember HTML structure the rst layer of Progressive Enhancement 0 Good for quotstory tellingquot leading the reader through major points Happens to be inherently mobile friendly 0 Centerpoint can shrink or grow naturally based on the device width The Zpattern Summary 0 If it must organize a large selection of content choose the Fpattern If it leans towards eliciting a speci c action as a result of visual narrative choose the Z pattern 0 Be careful to not derail the user39s sight pathway with inadvertently strong content Petey Martin Notes 102815 Web Design and Development 0 What is a web designer What is a web developer In the modern day one must be pro cient in both 0 Learn Code 0 Ruby 0 Angular HTML amp CSS 0 PHP 0 Python JavaScdpt Swift 0 WordPress 0 Android Design 0 Photoshop 0 Illustrator 0 UI o Branding o Typography UX 0 Illustration 0 InDeggn 0 Print Where are the Unicorns 0 Over the wall With so many new directions in design with so many new developments in technology pick your side 0 Why change Something changed Interactivity 0 Better than walls collaboration Find ways to communicate and collaborate Great designers and developers see creativity as a key part of their craft Learn enough to understand mindsets not technical details Learn the art of collaboration 0 Collaboration is highly diversi ed teams working together inside and outside an organization with the purpose to create value by improving innovation relationships and efficiency Master your own art New Learn and practice the art of everything used on the project 0 Pick up new tools 0 Understand different mindsets Learn how your colleagues think and why they indent code the way they do or why they choose certain typefaces over others
Are you sure you want to buy this material for
You're already Subscribed!
Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'