Flashcards in Lecture 2 Deck (18)
What are some ways you can take a good development and design approach?
• Striving to understand the user
• Gaining an understanding of your target users provides:
• Is not cluttered
• Involves knowing your audience
How do we decide where to place elements on a page?
• How users view pages
• Can vary based on device used or culture
• Borrowed design conventions
What is the relationship between form and function?
Using the proper form (or selecting a particular form) can lead to increased/improved function. For example, using good markup and practices can help with SEO
How can we use form to increase SEO?
• Text links in main navigation
• Multiple keyword-rich text links
• Limited use of text images
• Proper markup (i.e., HTML tags)
• Proper above the fold content
What are the structural design elements of a webpage?
• Feature Area
• Body and Content
What is a header?
• Identifies and unifies a site
• i.e., branding
• Presents a call to action
• e.g., ‘Register Today’, ‘Sign Up’,
• A vital component of:
• SEO due to important coding
• e.g., HTML markup,
metadata, CSS filters
• e.g., Navigation, Sign In
A feature area?
• Indicates information hierarchy
• Provides a focal point for the page/
• Tends to take up a large portion
of a homepage
• Visible elements used
• e.g., color scheme,
What is the body and content of a web page?
• Where users spend most of their time
• Clarity and legibility are extremely
• Long stretches of content should
be broken down
• Should make proper use of
subheadings and white space
• Subheadings are important to
• Helps users scan contentquickly
• Careful planning, design, development
• Focused on usability and user satisfaction
• Some problems it focuses on addressing:
• Eye fatigue: optimal line length 52-65 chars.
• The ‘fat finger’ problem: guidelines used in App
What is a sidebar?
• Holds secondary information
• Supports main content
• Directs users to related content
• e.g., sub-menu
• Often used as advertising space
• Price determined by price and
• e.g., above the fold or below the
What is a footer?
• Very useful for SEO and usability
• Can be thought of as a minisitemap
• Helps search engines index the site
• Improves page-rank
• e.g., higher value on words
contained within links
• Contains tracking code and JS
• Used differently on smartphones
What are some characteristics of a background of a webpage
• Complements the content
• Can add to the content:
• e.g., wiski.com uses a
topographical map to give a sense
What is content hierarchy?
• One of the most important aspects of web pages/sites
• Design elements are grouped based on meaning or function
• Allows for visual relationships between design elements to be
• i.e., any element that breaks this design system will have
more visual value through styling
• E.g., size, color, scale, texture, depth, white space
How should we use White Space elements?
• Not to be thought of as ‘What’s left once the design is finished’
• Helps readability and the user’s ability to scan a page
• Involves careful use of:
• Line Spacing
What is The Gestalt Principles of design?
• Developed in early 20th Century
• Relates to the mind’s ability to group elements based on relationships
• It is based on:
• Common Region
What are the design elements that make up a user interface?
• What users interact with, what users come back for
• Search bars
• Calls to action
What is "Containment"?
• Can be achieved through
• Stylized through CSS
Why use a grid?
• Create a balance of figure and
• Help organize elements and
space within a design
• Creating reusable design
• Increases a design’s
efficiency and Usability
• Allows for designs to be
flexible to various lengths