02. web design
TRANSCRIPT
Web Design
Lecture 2
IA, Clean Presentation, Adaptive Design Vladimir Tomberg, PhD
Estonian Entrepreneurship University
of Applied Sciences
March 2016
Pic
ture
sou
rce:
http
://us
erce
nter
edco
nten
t.com
1
Reporting Homework
• A short description of your project; Title, business, products and services, target
audience, business tasks• Business goals of the web site;• Three examples of similar web sites;• Personas and scenarios
2
3
Information Architecture
•Navigation as articulated in a Sitemap,
•Hierarchy of information,
•On page layouts,•Organizing the content
into a user centric structure,
•Creating and plotting the user/visitor journey
4
User Journey Example #1
Image Source: http://www.servicedesigntools.org
5
User Journey Example #2
Image Source: http://mobile.bazaarvoice.com
6
Site Maps
Image Source: http://fostermilo.com
7
CLEAN PRESENTATION (CONTEXT)Supports Meaning
8
Clean Presentation
• A clean presentation enhances the usability of the site for everyone by designing the visual layout and typography for easy perception;
• However, to ensure that the presentation is accessible for the wide variety of visual disabilities, the site must also be designed to allow users to customize the look, either through the browser or through controls built into the site
9
Presentation of Information
People can perceive and understand elements in the design
Image source: http://www.consumerreports.org
10
Flexible Presentation Allows for User Needs & Preferences
Source: http://www.csszengarden.com/
11
Structure Content First
Picture Source http://blog.braintraffic.com
12
Structure Content First
• Recommended Webcast http://www.slideshare.net/stephenhay/structured-content-first
Picture Source http://blog.braintraffic.com
14
Design Simply
• Simple designs are stable and coherent;• Consistent designs are easier to use because,
once learned, the interaction model can be applied throughout the product;
• Design conventions can help with usability because we all know how they work;
• Design patterns are also helpful
15
Complexity VS Simplicity
Image Source: http://habrahabr.ru
16
Example: Phone App
Image Source: http://behance.net
17
Example: Phone App
Image Source: http://behance.net
18
Example: Web Page
Image Source: http://behance.net
19
Example: Web Page
Source: http://www.brooksengland.com
20
Example: Web Page
Source: http://www.apple.com
21
Design for Customization of the Display
Readability removes everything on the page except the main content so that readers are not distracted
Source: https://www.readability.com/
22
Design Responsive Layouts
23
flexible, grid-based layout
flexible imagesflexible video
added to CSS3 specifications
Three Main Components of Responsive Layout
24
Flying Grid – One Content on Different Layout
25
Sample Grid
Source: http://aaronkwhite.com
26
Popular Grid Frameworks
Skeleton
Twitter Bootstrap
LESS
27
Defining Flexible Fonts
body {font-size: 100% /* 16px */}
h1 {font-size: 1.5em
/* 24px / 16px */ }
28
Scaling Fonts in Browser
29
Em Font Size
• “Ems” (em): The “em” is a scalable unit that is used in web document media.
• An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt.
• Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc.
Source http://kyleschaeffer.com
30
Flexible Media
img {max-width: 100%;}
• This rule allows our image to size to it's maximum size, or the width of the containing element... Which ever comes first
31
Flexible Media
32
Media Query
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen)
Source http://www.downgraf.com
33
Media Query Operators
@media (min-width: 700px) { ... }
@media (min-width: 700px) and (orientation: landscape) { ... }
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
Source https://developer.mozilla.org
34
Embedding Media Query<!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet --><style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>
Source https://developer.mozilla.org
36
RWD Testing Tools
Viewport Resizer and Responsive Design Bookmarklet
http://lab.maltewassermann.com/viewport-resizer/ http://responsive.victorcoulon.fr/
37
Home Responsiveness Exercise 4
• Test the examples of web sites that you previously selected on responsiveness;
• Report back to us: What are results? Which features are implemented well? What doesn’t work?
38
Recommended Reading
39
Adaptive VS ResponsiveWeb Design
40
Start with Mobile
If you can support the mobile web, you can support anything
41
Mobile First
Source http://bradfrostweb.com
42
4.12.2014 – the day Google predicted mobile queries will reach 50%
Source http://www.themobilewebtrends.com
43
Mobile-Oriented Design and Input Changes
Source http://blog.cloudfour.com
44
Mobile-Oriented Design and Input Changes
Source http://blog.cloudfour.com
45
Comfortable Touch Zones
Source http://blog.cloudfour.com
46
Recommended Books
Homework 3
• Design the wireframes of your adaptive web site in Axure;
• Use Progressive enhancement method: start from Mobile;
• Be ready to connect each version of the web site with one scenario;
• Upload results to Google Drive
47