New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here

Week 9

by: Petey Martin
Petey Martin
GPA 3.25

Almost Ready


These notes were just uploaded, and will be ready to view shortly.

Purchase these notes here, or revisit this page.

Either way, we'll remind you when they're ready :)

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

Week 9 of Notes.
Class Notes
25 ?





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.

Similar to CSC 209 at UR

Popular in ComputerScienence


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


Buy Material

Are you sure you want to buy this material for

25 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


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'

Why people love StudySoup

Steve Martinelli UC Los Angeles

"There's no way I would have passed my Organic Chemistry class this semester without the notes and study guides I got from StudySoup."

Janice Dongeun University of Washington

"I used the money I made selling my notes & study guides to pay for spring break in Olympia, Washington...which was Sweet!"

Jim McGreen Ohio University

"Knowing I can count on the Elite Notetaker in my class allows me to focus on what the professor is saying instead of just scribbling notes the whole time and falling behind."


"Their 'Elite Notetakers' are making over $1,200/month in sales by creating high quality content that helps their classmates in a time of need."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.