1. Web Design

2. 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.

3. 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.

4. Definition Web Design influenced by recent fields…
Interaction design (IxD),
User Experience design (UXD), and
User Interface design (UID)

5. Definition
…multidisciplinary pursuit pertaining to the planning and production of Web sites, including, but not limited to,
technical development
information structure,
visual design, and
networked delivery.
Powerll, T.

6. 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

7. 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)

8. Don’t make me thing
Eliminate questions

9. Krug’s Thoughts Truth about the right way to design Web sites…
there is no RIGHT way to design sites.
It’s a complicated process and the right answer to most of the questions people ask is “it depends”
Steve Krug, 2006

10. Krug’s Thoughts Don’t make me think. A page should be self-evident
If its hard to use, we just don’t use it as much.
A page should be self-evident
People don’t read - they scan pages
We satisfice
Use Conventions

11. Krug’s Thoughts Eliminate as many questions as possible.
Page should be immediately self-evident, purpose must be obvious.
Pages have to work at a glance.
Eliminate as many questions as possible.

12. Directions say, follow Hillrise until you get to…

13. Buy boots?
This is women’s boots

14. Eliminate as many questions as possible.
Web ID?
How are these items different?

15. Krug’s Thoughts
People don’t read they scan pages

16. We design for this...

17. We think people read like this...so we design for it.

18. But they probably read like this…

19. F-Shaped Pattern For Reading Web Content
Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
(Nielsen)
Source:

20. 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!

21. 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

22. 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?

23. Krug’s Thoughts
Proximity to Pull-down suggests search functions in a similar manner
Use expected conventions – deviating from them can be problematic.

24. Where users expect to find standard page components
Shaikh & Lenz, 2006
Source:

25. Lynch & Horton, Web Style Guide, http://webstyleguide

26. It’s also about aesthetics

27. Beautiful web design
Aesthetically pleasing objects appear more effective to the user because of their appeal.
Don Norman, Emotional Design
Source:

28. Aesthetically pleasing objects appear more effective to the user because of their appeal.

29. Fifty Ugliest Cars of the Past 50 Years
Aesthetically pleasing objects appear more effective to the user because of their appeal.
100 Most Beautiful Cars of All Time

30. Aesthetics play powerful role in shaping how we come to know, feel, respond.
In Defense of Eye Candy by Stephen P. Anderson April 21,

31. Aesthetics play powerful role in shaping how we come to know, feel, respond.
In Defense of Eye Candy by Stephen P. Anderson April 21,

32. Aesthetics play powerful role in shaping how we come to know and respond.
This suggest I’m a button – click me
This suggest, I’m a box on a page
This suggest click to go home
This suggest, a house
In Defense of Eye Candy by Stephen P. Anderson April 21,

33. 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.

34. The design of the control tells us how to use it
The door affords the act of pushing. We know to push outward by looking at it.
Affordance!
It signals where it should be pushed.
Clues about functionality
The design of the control tells us how to use it

35. 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.

36. Site examples | then and Now

37. Web Design Of The Year 2000

38. Web Design Of The Year 2000

39. Web Design Of The Year 2000

40. Best of Web Design in 2012
webdesignledger.com/inspiration/best-of-web-design-in-2012

41. Best of Web Design in 2012
webdesignledger.com/inspiration/best-of-web-design-in-2012

42. Best of Web Design in 2012
webdesignledger.com/inspiration/best-of-web-design-in-2012

44. Differences:
Images
Imagery/realism
Typography
Dimension, scale
Color
Texture
Central dominance
Text density

45. Web Design: Responsive

46. Web Design: Responsive

47. Web Design: Responsive

48. Web Design: Responsive

49. Web Design: Responsive

50. Web Design: Responsive

51. Useful sites

52. Trends

53. Trends Content is king. Interface plays a supporting role.
Increased use of Mobile devices
iOS 7 UI never competes with content – supports it.

54. 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)

55. Examine a variety of designs
Useful sites on CSS and Design: .net best uses of CSS
Zen Garden:

56. Web Design: Responsive

57. Web Design: Responsive

58. Web Design: Responsive

59. Web Design: Responsive

60. Examine a variety of designs | CSS
CSS3 features: (Fixed)
Veerle Pieters: (Fixed)
Responsive:

61. A Few design concepts

62. Size and hierarchy – bigger is important and gets attention

63. Color- schemes (e. g. , Greyscale With Bright Accents)
Color- schemes (e.g., Greyscale With Bright Accents). Few colors to attract attention, to differentiate important information and elements.

64. Contrast shows relative important
Contrast shows relative important. Dramatic shifts in text-size or color will impart a message that something is different.
Contrast - Color
Contrast - Size

65. Alignment - creates order between elements.

66. Alignment - creates order between elements.
Information in columns is distinct.

67. Alignment – use a grid (e.g., 960.gs)

68. Proximity – objects near to one another are related
Proximity – objects near to one another are related. Separates elements from each other and creates sub-hierarchies.

69. Development strategy

70. 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…

71. 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.

72. 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.

73. 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.

74. 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).

75. 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.

76. Site Performance: What you can do.
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.

77. Assets: http://www.jma.duq.edu/users/gibbsw/pub/a_jma501/