Lecture 2 Flashcards Preview

Web-Centric > Lecture 2 > Flashcards

Flashcards in Lecture 2 Deck (18)
Loading flashcards...
1

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

2

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

3

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

4

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

5

What are the structural design elements of a webpage?

• Header
• Feature Area
• Body and Content
• Sidebar
• Footer
• Background

6

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

7

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

8

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
design

9

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
placement
• e.g., above the fold or below the
fold

10

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

11

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

12

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

13

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

14

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

15

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

16

What is "Containment"?

• Can be achieved through
• Borders
• Lines
• Boxes
• Stylized through CSS

17

Why use a grid?

• Create a balance of figure and
ground
• Help organize elements and
space within a design
• Modularity
• Creating reusable design
elements
• Increases a design’s
efficiency and Usability
• Allows for designs to be
flexible to various lengths

18

What is the 960 grid system?

• A set of CSS templates and
sketches
• Mainly a CSS framework
• Most 960px width designs fit
in most 1024px wide
displays
• 3 layout foundations
• Can be 12, 16, 24 columns