Transcript JMA501 - Web Design PowerPoint

WEB
DESIGN
Define Web Design


Good web design is more than creating pretty
pages.
Involves concepts of
 color
theory
 typography
 layout , and
 usability - all part of a good design.
Definition

Web Design is a multidisciplinary field, influenced
by:










library science
graphic design
programming
networking
user interface design
usability
human computer interaction
User experience design
psychology
and a host of other fields.
Definition

Web Design influenced by recent fields…
 Interaction
design (IxD),
 User Experience design (UXD), and
 User Interface design (UID)
Definition
…multidisciplinary pursuit pertaining to the
planning and production of Web sites, including,
but not limited to,




Powerll, T.
technical development
information structure,
visual design, and
networked delivery.
Web Design | Components
Web design & development has many components:






Visual (graphic) design
User interface and experience design, usability
Web document and style sheet production (HTML & CSS)
Scripting and programming (JS, jQuery, PHP, JAVA, etc.)
Content strategy
Multimedia
Define Web Design


At it’s core, design is all about visual communication.
To be an effective designer, you have to be able to
clearly communicate your ideas to users or else lose
their attention. (Jones, 2011)
DON’T MAKE ME THING
Eliminate questions
Krug’s Thoughts

Truth about the right way to design Web sites…
 there
 It’s
is no RIGHT way to design sites.
a complicated process and the right answer to most
of the questions people ask is “it depends”
Steve Krug, 2006
Krug’s Thoughts
1.
Don’t make me think.
If its hard to use, we just don’t use it as much.
2.
3.
4.
5.
A page should be self-evident
People don’t read - they scan pages
We satisfice
Use Conventions
Krug’s Thoughts

Page should be immediately self-evident, purpose must
be obvious.
Pages have to work at a glance.

Eliminate as many questions as possible.

Directions
say, follow
Hillrise until
you get
to…
Buy
boots?
This is women’s boots
Eliminate as many questions as possible.
Web ID?
How are these
items different?
Krug’s Thoughts

People don’t read they scan pages
We design for this...
We think people read like this...so we design for it.
But they probably read like this…
F-Shaped Pattern For Reading Web Content
Eyetracking visualizations show that users often read Web pages in an Fshaped pattern: two horizontal stripes followed by a vertical stripe.
(Nielsen)
Source: http://www.useit.com/alertbox/reading_pattern.html
Krug’s Thoughts


We satisfice – people often don’t make the best,
most logical choices – they do what works for them.
How much effort will users put into learning your
interface? Not much? They don’t care about your
design!
Krug’s Thoughts
Navigation isn’t just a feature of a web site, it
is the web site. Without it, there’s no there
there.
—Steve Krug
Use Conventions: All web navigation
must answer these questions:






Where am I?
What’s here?
Where have I been?
Where can I go next?
Where's the Home Page?
What’s most important?
Krug’s Thoughts
Proximity to Pull-down suggests
search functions in a similar manner
http://www.iit.edu/arch/
Use expected conventions – deviating
from them can be problematic.
Where users
expect to find
standard page
components
Shaikh & Lenz,
2006
Source: http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
Lynch & Horton, Web Style Guide, http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html
IT’S ALSO ABOUT
AESTHETICS
Beautiful web design

Aesthetically pleasing objects appear more
effective to the user because of their appeal.
Don Norman, Emotional Design
Source: http://thevisualcommunicationguy.com/2013/06/20/design-principle-aesthetic-usability-effect/
Aesthetically pleasing objects appear more effective to the user because
of their appeal.
Fifty Ugliest Cars of the Past 50 Years
http://images.businessweek.com/ss/09/10/1028_50_ugliest_cars_of_past_50_years/7.htm
Aesthetically pleasing objects appear
more effective to the user because of
their appeal.
100 Most Beautiful Cars of All Time
http://www.edmunds.com/car-reviews/features/100-most-beautiful-cars-ever-made.html
Aesthetics play powerful role in shaping
how we come to know, feel, respond.
In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http://alistapart.com/article/indefenseofeyecandy
Aesthetics play powerful role in shaping
how we come to know, feel, respond.
In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http://alistapart.com/article/indefenseofeyecandy
Aesthetics play powerful role in shaping
how we come to know and respond.
This suggest,
I’m a box on a
page
This suggest
I’m a button –
click me
This suggest, a
house
This suggest
click to go
home
In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http://alistapart.com/article/indefenseofeyecandy
Aesthetics play powerful role in shaping how we
come to know and respond.
The
aesthetic of
this door
tells a lot
about how
to use it.
The door affords
the act of pushing.
We know to push
outward by looking
at it.
It signals where it should be pushed.
Clues about
functionality
Affordance!
The design of the
control tells us how
to use it
Aesthetics play powerful role in shaping how we
come to know and respond.
The
aesthetic of
these
controls
tells a lot
about how
to use them.
SITE EXAMPLES | THEN
AND NOW
Web Design Of The Year 2000
www.topdesignmag.com/web-design-of-the-year-2000/
Web Design Of The Year 2000
www.topdesignmag.com/web-design-of-the-year-2000/
Web Design Of The Year 2000
www.topdesignmag.com/web-design-of-the-year-2000/
Best of Web Design in 2012
webdesignledger.com/inspiration/best-of-web-design-in-2012
Best of Web Design in 2012
webdesignledger.com/inspiration/best-of-web-design-in-2012
Best of Web Design in 2012
webdesignledger.com/inspiration/best-of-web-design-in-2012
Differences:
• Images
• Imagery/realism
• Typography
• Dimension, scale
• Color
• Texture
• Central dominance
• Text density
Web Design: Responsive
Web Design: Responsive
Web Design: Responsive
Web Design: Responsive
Web Design: Responsive
Web Design: Responsive
Useful sites

http://mattkersley.com/responsive/

http://ipadpeek.com/
TRENDS
Trends


Content is king. Interface plays a supporting role.
Increased use of Mobile devices
iOS 7 UI never
competes with
content – supports it.
Trends






Content is king. Interface plays a supporting role.
Increased use of Mobile devices
Single page navigation (EX1) (EX2) (EX3)(EX4)
Responsive Web Design RWD becoming norm (EX1)
(EX2)(EX3)
Large type | typography | simplicity, legibility and objectivity
– Swiss design style influence
Creative navigation (Ex1) (EX2) (50 Creative Nav Sites)
Examine a variety of designs
Useful sites on CSS and Design: .net best uses of CSS
http://www.netmagazine.com/features/top-20-css-sites-2012
Zen Garden: http://www.csszengarden.com/
Web Design: Responsive
Web Design: Responsive
Web Design: Responsive
Web Design: Responsive
Examine a variety of designs | CSS
CSS
• CSS3 features: http://tapbots.com/ (Fixed)
• Veerle Pieters: http://veerle.duoh.com/design (Fixed)
Responsive:
•
http://www.stuffandnonsense.co.uk/design
• http://www.netmagazine.com/features/top-25-responsive-design-tools
• http://www.awwwards.com/websites/responsive-design/
A FEW DESIGN CONCEPTS
Size and hierarchy – bigger is important and gets attention
Color- schemes (e.g., Greyscale With Bright Accents). Few colors to
attract attention, to differentiate important information and elements.
Contrast shows relative important. Dramatic shifts in
text-size or color will impart a message that something
is different.
Contrast - Color
Contrast - Size
Alignment - creates order between elements.
Alignment - creates order between elements.
Information in columns is distinct.
Alignment – use a grid (e.g., 960.gs)
Proximity – objects near to one another are
related. Separates elements from each other and
creates sub-hierarchies.
DEVELOPMENT STRATEGY
Progressive Enhancement



Start with a baseline experience that makes the
content or functionality available to most
rudimentary browsers or assistive devices.
From there, you layer on more advanced features
for the browsers that can handle them.
Working from content out…
Progressive Enhancement
1. Authoring strategy
 HTML document written in logical order.
 Elements marked up in a meaningfully – semantic
markup.
 Document is usable on the widest range of devices
 Clean HTML document with elements accurately and
thoroughly described.
Progressive Enhancement
2. CSS Styling strategy
 Create layers of experience by taking advantage
of the way browsers use style sheet rules.

E.g., Write style rules for enhanced and unenhanced
browsers.
Progressive Enhancement
3. Scripting strategy
 JavaScript scripting language that makes web
pages interactive and dynamic.

Make sure basic functionality is intact even when
JavaScript is off.
Site Performance


Users expect a site to load in under two seconds,
will leave your site for another if it doesn’t (Robbins,
2012).
Tolerable wait times have decreased to just 2
seconds (Fiona Fui-Hoon Nah).
Site Performance
Akamai (2009)
 47% expect a page to load in 2 seconds or less.
 40% abandon page if takes more than 3 seconds
to load.
 52% of online shoppers claim quick page loads are
important for their loyalty.
http://munchweb.com/effect-of-website-speed
Site Performance: What you can do.
1.
2.
3.
4.
5.
Optimize images - small file size without sacrificing
quality.
Minimize HTML/CSS documents - remove extra
characters and line returns.
Keep JavaScript to minimum.
Don’t load unnecessary assets (i.e., images, JS libraries).
Reduce HTTP requests - number of times the browser
makes requests of the server.
Assets:
http://www.jma.duq.edu/users/gibbsw/pub/a_jma501/