Web Design and Development
theLonelyWolf
0320-20Design20Principles.pptxDesign Principles
Some content from:
The Principles of Beautiful Web Design (Jason Beaird and James George)
Principles of Web Design (Joel Sklar)
1
Learning Outcomes
apply user-centred design principles and methods
understand and be able to follow a suitable design process
appreciate the design principles that make a “good” website
be able to apply these principles at a basic level
2
Design Process
somewhere between art, science, and problem solving
the process of creating a design comp can be boiled down to:
discovery
exploration
implementation
3
What's a comp?
the word comp is an abbreviation of the phrase “comprehensive dummy” – a term that comes from the print design world.
complete simulation of a printed layout created before the layout goes to press.
in Web design, a comp is an image of a layout that’s created before we prototype the design in HTML
4
Discovery
meeting and learning about the client(s)
gathering information, desires, goals…
What questions should you ask a client?
5
Exploration (using the information from the client)
put yourself in the shoes of the website visitors and ask yourself what they are looking for
thinking about buying a product…
what do you need to know before you buy?
signing up for a service…
where would you learn about the different offerings and which option you need?
what is the clearest title possible for page x?
how many steps does it take to reach page y?
6
Exploration
Information Architecture (IA)
focus on organising the content and flow of the website into a logical structure
make a list of all the bits and pieces of the site and start arranging them into groups
use paper, sticky notes or a whiteboard – or a digital tool that lets you move things easily
turn this into a flowchart (more on this later)
every box is a page
every line (arrow) is a link
the order matches the site
7
This is a very brief summary – more to come in the next lecture.
7
Implementation – Creating a layout
use… paper!
too easy to lose focus when using a computer
sketch a few possible layouts
use (something like) Photoshop to block out the planned areas
experiment with foreground and background colours
keep tweaking until you have a comp you can show the client
8
Defining Good (& Bad) Design
two ways of looking at it:
strict usability angle
functionality, the effective presentation of information, and efficiency
purely aesthetic perspective
artistic value and visual appeal of the design
goal: maximise both
9
Design is about communication
the elements and functionality of a finished website design should work together, so that:
users are pleased by the design but drawn to the content
users can move about easily via intuitive navigation
users recognise each page as belonging to the site
10
11
Talk about the following website (screenshot)
What do you notice first?
What is good/bad about it?
…
12
http://www.harmonyrepublic.com/
The richly textured, colorful illustrations flow around the structure of the page, which is embellished with hand-drawn navigation and a simple layout. The abundance of handcrafted, organic elements creates contrast and helps to draw your eyes to the featured artists without interfering with the pages’ readability or how it’s organized.
12
Good Navigation Design
main navigation should be clearly visible
each link should have a descriptive title
help users recognise where they are:
links change appearance when hovered over
indicate the active page or section
13
Good Navigation Design
make content and navigation clear, dominant
secondary navigation, search fields, outgoing links should not be dominant features
make these easy to find,
separate them visually from the content,
this allows users to focus on the information, yet they’ll know where to look when they’re ready to move on to other content.
14
Cohesive Design
have a unified/cohesive theme or style
helps hold the design together across whole site
users should never think they've left the site
15
How can we make site designs cohesive?
16
Although the content blocks on these pages are divided differently, there are several visual indicators that let users know that these are pages from the same site. Much of this unity is due to the repetition of the identity and navigation blocks. The consistent use of a very limited color palette (black, gray, yellow, and red) also helps to unify the pages.
16
How to create a cohesive design:
consistency and repetition create smooth transitions (no "jumps" in layout)
reinforce identifying elements
e.g. logo in the same top-left spot on every page
place navigation elements in the same position on each page
use the same navigation graphics throughout the site
use a consistent colour scheme
17
17
Testing Smooth Transitions
One way to test for smooth transitions is to click through several pages of the site, then use back and forward shortcut keys to change pages without having to move the mouse or scroll and you'll quickly see if any page elements are in different spots from one page to another
18
Web Page Anatomy
19
Web Page Anatomy
containing block
body or container div...
can be fluid (flexible) or fixed
flexible: http://en.wikipedia.org/wiki/ Main_Page
fixed: https://www.facebook.com/groups/1547903532143110 /
you can have a combination of both by using % widths and pixel-based min-width and max-width
20
Flexible Page Layouts
Pros:
user gets to control view
adapt to different screen resolutions (devices)
usually less scrolling for user
Cons:
harder to design - must account for the movement of elements at different resolutions
at high resolutions, your content can break apart or be hard to read
21
Fixed-Width Page Layouts
Pros:
easier to design - allows Web pages to be designed like print pages
designer has more control
Cons:
user can not control view
don't adjust to make use of larger screen sizes
at lower resolutions you get horizontal scrolling
22
no right or wrong layouts - based on your content whether you are going to scan or scroll the page
Web Page Anatomy
logo
identity block
should usually be at top
navigation
horizontal or vertical
close to the top – definitely above the "fold"
23
The Fold
this metaphor is derived from the fold in a newspaper
the end of one screen – where the content of a page ends before users scroll down
ensure important content is above the fold so users don't miss it
problem page: https ://secure.jcu.edu.au/app/studyfinder /
http :// www.cpr-promotions.com/dead-air-in-radio-webdesign
24
The studyfinder app (https://secure.jcu.edu.au/app/studyfinder/) shows the results below the page fold, so it looks like nothing has happened.
24
Web Page Anatomy
content
content is king! Make this the focal point
needs to be designed ("information design")
footer
bottom, usually contains ©, contact, legal, links
some designs use minimal footers (https://twitter.com /), others have expansive ones with lots of links (https://www.docker.com /, http://yodiv.com /)
25
Active Whitespace
white spaces are the blank areas of the page
good use of whitespace guides the reader, reduces clutter and clarifies organisation
deliberate whitespace is "active whitespace"
passive whitespace is normally the result of mismatched shapes
don't add space by entering blank line breaks, instead - use CSS margins and padding
26
27
Principles of Web Design 5th Ed.
28
Principles of Web Design 5th Ed.
Grids
longing for structure and ideal proportion is deeply ingrained in human nature
grids are an essential tool for layout design
help you create alignment easily
29
https://css-tricks.com/snippets/css/complete-guide-grid /
https://gridbyexample.com/examples /
Website to learn to create Grids
30
Principles of Web Design 5th Ed.
Grids
The black lines are not visible, just conceptual
30
Grids
31
The pink lines are overlaid here to show the 16-column grid used
the Pythagoreans observed a mathematical pattern that occurred so often in nature that they believed it to be divinely inspired.
ϕ = 1.6180339 (1.62)
e.g. sunflower's centre is total diameter / ϕ
thirds is a close-enough approximation
Golden Ratio & Rule of Thirds
32
Rule Of Thirds in Photography
33
Rule Of Thirds in Photography
34
Start with a grid. Make a wireframe
35
Note the use of thirds (3 columns) in a few different ways
35
Grid Systems for Websites – CSS Frameworks
these frameworks provide a bunch of CSS classes to work with out of the box
based on (responsive) grids
unsemantic - http:// unsemantic.com
foundation - http:// foundation.zurb.com
bootstrap - http :// getbootstrap.com
36
We are not using any of these in the subject, but you can learn a lot from them
36
Balance - Symmetrical
37
Balance - Asymmetrical
38
Unity – all the design elements work as a whole
two ways to achieve unity:
proximity
repetition
39
Unity – Proximity
placing elements closer together (compared to other elements) makes them appear related
40
In the column on the left, the word “Unkgnome” is equidistant from the top and bottom paragraphs. The result is that it looks more like a separator
than a heading for the next paragraph.
In the second column, the “Gnomenclature” heading is placed closer to the paragraph that follows it. In accordance with the rules of proximity, this heading appears to belong to that block of text.
40
Unity – Proximity
What's wrong with this form?
This is much better:
41
.proximityDemo input { margin-left: 1em; }
The first example has the text labels and radio buttons all the same distance apart, so looking in the middle, you can't tell if the button for, say 17-25 is to its left or right.
Adding just a little margin on one side groups the elements enough to solve this problem.
41
Unity – Repetition
reuse elements to create unity
42
the repeated thumbnail images with the views, comments & like icons create a sense of unity
42
What draws your attention?
43
Emphasis
making a particular feature draw the viewer’s attention
often you want an item to stand out
a button for users to press
an error message
…
make that element into a focal point
44
placement
the direct centre is the highest value screen real estate (users look there first)
top-left is second
Placement Examples
45
Placement
know what expectations your user might have about your navigation and content
users have come to expect common elements of a Web page in certain locations
46
What are some of these expectations?
When is it a good idea to break these conventions?
There are usually no good reasons to break common conventions unless your site is intended to be unconventional – you want people to find it awkward or difficult.
46
47
I would add contact details in the footer.
47
Emphasis
continuance
your eyes keep going in one direction when they start looking that way
place call-to-action elements at the end of 'lines' of elements
isolation
make elements stand out by moving them away from others (opposite of proximity)
proportion
differences in scale draw attention
48
Emphasis
Contrast
juxtaposition of dissimilar graphic elements
most common method of creating emphasis
the greater the between a graphic element and its surroundings, the more that element will stand out
can be created using differences in:
colour
size
shape
49
difference
What draws your attention?
50
Call To Action
(CTA)
The bright orange sign up button is the only orange thing in a page of blues…
50
Standard "bread and butter" Layouts
left-column Navigation
51
Right-column Navigation
52
Three-column Navigation
53
Information Design
soooo important!
don't just design the frame/layout for your content to sit inside…
design the content sections as well
existing print-designed content (like a client might provide) needs to be re-formatted
line length, font, layout do not transfer well
print = portrait, screen = landscape
54
From this…
55
To this… (almost the same content)
56
What can we do?
56
Information Design
information should be easy to read and legible
break text into reasonable (logical) segments
include logical headings where appropriate
helps focus the user's attention
breaks up blocks of content
control the width of your text
paragraphs that are too wide (lose your place) or too narrow (eyes move too much) are harder to read
57
Example – Contact Information
58
Contact Us
Phone (07) 4781 4619 Fax (07) 4781 4629
Contact Us
| Phone | (07) 4781 4619 |
| Fax | (07) 4781 4629 |
Contact Us
| Phone | (07) 4781 4619 |
| Fax | (07) 4781 4629 |
This is a great example of a small change that makes a big difference.
Without adjusting fonts, but only aligning the phone numbers, you can quickly see that the fax number is the same as the phone number except for one digit. This information is there in the first presentation, but it is not readily clear.
Design your information carefully and with the goal of communicating as clearly and quickly as possible.
58
How Much Content Is Too Much?
don't overcrowd your pages/sections
be conscious of the user's "cognitive load"
don't make them think!
too much can overwhelm people
carefully divide content into smaller sections
not less content.. still the same content, just broken up appropriately
probably with pictures… people like pictures
59
Designing for the User
keep your design efforts focused on your user
find out what users expect from your site
if you can, survey or watch them
what do users want when they get to your site?
60
What's the most ‘successful’ (most used) website in the world?
How is it designed?
Ask what people think of this first statement the book author makes? Is "Solely" too narrow? Should we focus on the client or the designer goals as well…?
60
2-61
Google's home page in 2007, then in 2011. What's changed? What's the same? Why?
Google's home page in 2007, then in 2011. What's changed? What's the same? Why?
2-62
A better demonstration of the similarity/change
The previous page was not the best example of showing the differences, because the screenshots didn't line up.
Here is a better way to show this, since you can actually see things like the difference in the logo size or the location of links, etc.
Design for Interaction
think about how the user wants to interact with your information
design for your content type - will the user:
read or
scan
design pages for reading or scanning based on the content type
63
64
(scanning)
64
65
This is a different page in the same website.
Notice the cohesion.
(reading) – same site
Notice the use of a grid – this page uses 2 of the 3 columns for content - very common and effective layout idea
65
Keep a Flat Hierarchy
don't make users navigate through too many layers of information
create content sections organised logically
use consistent navigation
consider providing a site map or search facility for larger sites
follow the three click rule*
66
*It's less important how many times people have to click than how much they have to think.
66
Use Hypertext Linking Effectively
let users move between pages as they please
make it easy for them
provide plenty of navigation options
use contextual (in context) linking
avoid the use of “click here” (why?)
67
"Click here" is a problem for screen readers, that read the text of the link, not the content around it. It's harder for scanning. It doesn't get indexed well by search engines that rate content in a link more highly.
67
68
Lindsay's Law – if the user would want to click there, let them click (make it a link)
The demo (download Sophos from JCU) shows how not to do this… follow the link (login required) and try and download the software (that's the main thing someone would want to do)… the link is not where you'd expect it (where it says "download"). Did you notice the left nav change? I didn't.
68
Design Principles
aesthetic design might never be your thing, but you can learn and implement these clear principles
notice what you do and don't like on the Web and in other areas of design (everywhere!)
mimic good design in your own work
without simply copying it
69
“Good artists copy, great artists steal.”
Pablo Picasso
70
Summary
be able to apply user-centred design principles and methods
understand and be able to follow a suitable design process
appreciate the design principles that make a “good” website
be able to apply these principles at a basic level
recognising why sites look “good” or “bad” is helpful
71
