Website Planning Flashcards
List 4 design techniques used for planning websites in the past and a disadvantage of each.
Tables (Cells holding elements) - Editing pages was cumbersome and difficult.
Frames (multiple HTML files for single layout) - Not search engine friendly
Client-side Imagemaps (entire layout a single image with hotspots) - Large download times
CSS position and float - acceptable but uses too many divs and source file less readable.
Explain the difference between an adaptive and responsive design.
An adaptive design has different fixed layouts to cater to different screen sizes with the correct one loaded by the browser.
A responsive design will reconfigure all design elements whether its viewed on a desktop, laptop, tablet, or mobile phone.
Explain the difference between a fixed and fluid layout.
A fixed layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. No matter the screen size of the user they will see the same width.
In a fluid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.
What is a media query? Other than screen size, what else can media queries determine?
A media query is a piece of CSS code that determines the resolution of the device showing the page and applies different CSS or layouts depending on what it determines.
Orientation.
List three advantages of CSS grid.
-design vertically and horizontally at the same time.
-redefine easily with queries
-change location of elements easily
What is a site map?
Is a diagram of how pages of content relate to each other.
What is a wireframe?
Relates to the visual page-level design of a website.
What is information architecture?
Refers to the way a website is structured and how the content is organised.
Three aspects of content presentation planning?
Content used.
How content is styled and displayed
Extra Site Functionality such as User input
Explain the difference between UI and UX.
User-Interface (UI) is a specialisation of web design that deals with the controls people use to interact with a website, app, or other electronic device.
User-Experience (UX) refers to another specialisation of web design, this one dealing with user behaviour and feeling when using the site or app.
Disadvantages of organisational structures that are too shallow or too deep?
Too shallow - main menu becomes a massive laundry list to unrelated topics.
Too Deep - User driven through endless selection before content is loaded.
How many clicks before the average User gives up?
3
What is content chucking?
Dividing content into smaller chunks to enable easier scanning and understanding of the main points.
What is a site metaphor?
A set of user interface visuals that exploits spefic knowledge user’s already have to create an interactive metaphor.
What makes a good site metaphor?
Objective: Site metaphor adds meaning.
A good metaphor should trigger a user’s intuitive assumption in a way that helps them to use your Web site.
Explain the difference between orientation and navigation.
O: Refers to how site visitors figure out where they are.
N: Refers to how users move through the site.
What are breadcrumbs?
A secondary navigation aid that helps the user easily see the relation between their location on a page and higher-level pages. Shows the path they have travelled/selected.
What are the four behaviours of users?
They want to have control.
They do not read, they scan.
They are impatient & insist on instant gratification.
They do not make optimal choices.
List three benefits of good VIM? What does it stand for?
-Quality & Consistency allows for advertisements.
-Minimised Bounce Rates
-Better Google Rankings.
Visual Information Management
What are the five functional elements of VIM?
Navigation.
User interaction
Speed
Site Structure
Cross-device compatibility
Briefly explain the four principles of visual design.
Visual Hierarchy: Place elements in terms of importance while maintaining optimal visual contrast and balance.
Typography: Legible, Clear and visually appealing style.
Space: The amount of white space is important.
Gestalt: How humans make sense of images.
What four aspects help to create a visual hierarchy?
Scale
Contrast
Direction
Position
What is the most serious and least serious fonts?
Most: Times
Least: Comic Sans MS
What is the critical measurement for a font’s readability?
x-height, the height of a lowercase x.
Distinguish between seriffed and sans-seriffed typefaces? What is the effect of seriffs?
Finishing strokes found in Roman inscriptional lettering are seriffed. Sans seriffed lacks them.
Seriffs help to emphasise and aid reading with textual flow. However not having them leads to high legibility for individual words or short lines.
Distinguish between stressed and monoline typefaces.
Strokes with a clear different thickness are called stressed. Monoline have no stresses.
Distinguish between monospaced and proportional typefaces.
Which appears more pleasing?
In monospace every letter has the same width be it a capital W or small i. Every letter is just the width of a character.
The proportional typeface.
What is the rule of two thirds?
States that every composition can be divided into nine equal parts by two equally-spaced horizontal lines and two equally spaced vertical lines and that objects of importance should be placed at the intersection of these lines for optimum performance.
What is the golden ratio to three decimal places?
1 : 1.618
