Lecture 2 Flashcards
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?
- Header
- Feature Area
- Body and Content
- Sidebar
- Footer
- Background
What is a header?
• Identifies and unifies a site • i.e., branding • Presents a call to action • e.g., ‘Register Today’, ‘Sign Up’, ‘Buy’ • A vital component of: • SEO due to important coding elements • e.g., HTML markup, metadata, CSS filters • Usability • e.g., Navigation, Sign In
A feature area?
• Indicates information hierarchy • Provides a focal point for the page/ site • Tends to take up a large portion of a homepage • Visible elements used • e.g., color scheme, typography, animation
What is the body and content of a web page?
• Where users spend most of their time
• Clarity and legibility are extremely
important
• Long stretches of content should
be broken down
• Should make proper use of
subheadings and white space
• Subheadings are important to
SEO
• 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
designWhat 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 placement • e.g., above the fold or below the fold
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 functions • Used differently on smartphones
What are some characteristics of a background of a webpage
• Complements the content • Can add to the content: • Dimension • Richness • Texture • e.g., wiski.com uses a topographical map to give a sense of snow
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
formed
• 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:
- Margins
- Gutters
- Padding
- Line Spacing
- Paragraph
- 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:
- Similarity
- Proximity
- Closure
- Common Region
- Continuance
- Connectedness
- Size
- Shape
- Shade
- Color
What are the design elements that make up a user interface?
- What users interact with, what users come back for
- Navigation
- Search bars
- Headings
- Buttons
- Forms
- Tables
- Calls to action
