Popular in ADV FRONT END WEB DEVELOPMNT
verified elite notetaker
Popular in ComputerScienence
This 5 page Class Notes was uploaded by Petey Martin on Thursday October 22, 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 36 views. For similar materials see ADV FRONT END WEB DEVELOPMNT in ComputerScienence at University of Rochester.
Reviews for Week 8
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/22/15
Petey Martin Notes 101915 Four Principles of Visual Design 0 Designing with the Mind in Mind 0 Basic Userinterface design rules and guidelines are more like laws than like rote recipes Just as a set of laws is best applied and interpreted by lawyers and judges who are well versed in the laws a set of userinterface design guidelines is best applied and interpreted by people who understand the basis for the guidelines and have learned from experience in applying them Technology especially computer technology advances quickly The state of the art of computer based interactive systems changes so quickly that it is difficult to get a book out before some the technologies and designs mentioned in it are obsolete On the other hand the fundamentals of how people perceive learn and think do not change quickly The basic operations of human perception and cognition have remained fairly stable for tens perhaps even hundreds of thousands of years Principles These principles are the underlying factors in every printed piece you see anywhere on screen or anywhere else If you just remember these four principles your web or printed pages will look clean neat and professional They will communicate more clearly people will enjoy them more and you will be proud Contrast RepeUUon Alignment Proximity These four basic principles are a distillation of the Gestalt principles of visual perception 0 Contrast Contrast draws your eye into the page it pulls you in Simply Elements that are visually different from each other The Rule If two elements are not the same make them very different Create a focal point anol visual hierarchy Lead 0 Repetition Simply Certain elements are repeated in multiple places on your pagesite The Rule Repeat elements throughout your site to unify disparate parts Each page in the web site should look like it belongs to the same site Elements to repeat 0 Colors 0 Style Illustrations 0 Format 0 Layout 0 Typography o Etc 0 Alignment Carless writing or presentation of text can reduce skilled readers automatic contextfree reading to conscious contextbased reading burdening working memory thereby decreasing speed and comprehension Simply Items are lined up with each other The Rule Choose one alignment probably not center and use it on the entire page It s all about the way your eyes move Avoid the very left edge of the browser window your eyes bump into it when they swing back to get the next line 0 Proximity Simply Items that are close together appear to have a relationship The Rule Group items together that belong together Check With a squint test 0 Grid Theory It isn t just about making things line up its about proportion as well Golden Ratio 0 There is a quotGolden Ratioquot a mathematical pattern that occurs so often in nature that Pythagoras felt it was divinely inspired 0 When things are designed with that ratio in mind they are more pleasing visually 0 Rule of Thirds Divide the page vertically and horizontally into thirds Locating content along these lines and at the intersections makes designs more balanced Users eyes naturally follow the lines o In practice many websites use the Golden Ratio and the Rule of Thirds as starting points only 0 Top 10 Web Design Trends for 2015 0 Flat Design The term quotFlat designquot emerged in 2013 with the release of Microsoft s Windows 8 operating system which utilized grid layouts sharp edges bright colors and san serif typography In the summer Apple abandoned its use of skeuomorphism in favor of a more at design with the release of iOS7 Google introduced the buzzword quotMaterial Designquot in its most recent design guide While Google s applications show signs of at design it does not completely remove the use of subtle gradients and drop shadows What s the difference 0 Flat Design 0 No shadows 0 No gradients o No textures 0 Material 0 Subtle gradients 0 Light shadows 0 Simple patterns 0 Simple textures 0 Skeuomorphism 0 Heavy use of gradients 0 Complex textures 0 Bold shadows 0 Textures o Microinteractions The details are not the details They make the deggn Microinteractions are constrained experiences or moments within a product or website that revolve around a single use case CSS3 transitions Hover effects Animated icons SVG Sounds Noti cations Interactive graphics 0 Card Design A card is an interactive website element most often rectangular in shape that is selfconstrained and has multiple options for viewing and interacting with its contents Pinterest is a great example of cardbased design Each pin is a card and each card contains content the image and the descriptive text as well as a bunch of options for interacting with the content Pin it Like Visit Site Send Share etc Cardbased design allows you to display information in an exciting and visuallyappealing way that encourages visitors to interact with your website 0 Scrolling Over Clicking If you own a smartphone you know it s much easier to scroll than it is to tap tiny buttons and links Due to the rise in mobile browsing many websites are now featuring longscrolling pages Advantages of scrolling over clicking o Scrolling is better for usability It s faster to scroll through content and users can see all content without needing to click links 0 Keep users in the reading ow Instead of clicking to a new page visitors only have to scroll to the next section Clicking breaks the user39s reading ow 0 User must wait for a new page to load Clicking small buttons and links on a mobile device can be dif cult 0 Hero Images The term quothero imagesquot has been adopted from the print industry It refers to a large image that is seen immediately upon visiting a website s homepage In 2015 we are seeing more websites move away from traditional image sliders and opt instead for fullwidth hero images Petey Martin Notes 102115 0 University Website 0 Things on the Front Page of a University Website Campus Photo Slideshow Alumni in the News Promotions for Campus Events Press Releases Statement of the School s Philosophy Letter from the President Virtual Tour Full Name of School 0 Things People go to the Site Looking for List of Faculty Numbers and Emails Campus Address Application Forms Academic Calendar Campus Police Phone Number DepartmentCourse Lists Parking Information Usable Campus Map Full Name of School
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'