I didn't realize it during the presentation, but I was accidentally showing an older version of the slides!! This is the real thing!

1. The
Professional
Design
Process
Prof. Uli Gencarelle
Johnson & Wales University
Providence, RI
WordCamp CT 2014
1

2. Creative Methods:
“Nearly any person can learn to improve his or her
creative abilities. Talent may be a mysterious
entity, yet the creative process tends to follow
predictable pathways.
By breaking down this process into steps, and im-
plementing conscious methods of thinking and doing,
designers can open their minds to vibrant solutions
that satisfy clients, users, and themselves.”
Ellen Lupton, Graphic Design Thinking
2

3. Step-by-step web design approach
provides professional framework for
start-ups, freelacers and web design
teams.
I would like to provide a little toolbox:
industry process for responsive web
design
quotes & tips from experienced designers
exercises to enhance creativity
inspiration & resources
UX theory & testing strategies
This Show
3

4. Conceptual Phase
Research/Marketing
Idea Generation
Goals & Priorities
Features & Functionalities
Target Group/Users/Personas
Visualization
Moodboard
Simple Wireframes
Breakpoint Graphs
Mock-ups
Prototypes/UX Design
Front-End Design
Theme Development
Design
Process
4

5. Finding Ideas
“Design is a messy endeavor. Designers
generate countless ideas that don’t get used.
They often find themselves starting over, going
backward, and making mistakes.
Successful designers learn to embrace this
back-and-forth, knowing that the first idea is
rarely the last and that the problem itself can
change as the project evolves.”
Ellen Lupton, Graphic Design Thinking
5

6. Defining the
design
problem:
RESEARCH
Brainstorming, interviews,
focus groups, visual
research, brand matrix
“We get it, we know exactly
where we stand in the
marketplace.” Radioshack
“The concept was the most
appealing thing about it.”
Frank Todaro, Moxie
Pictures
“The agency had fun.”
GSD&M
"The Phone Call" [Clip]
Agency: GSD&M, Austin, TX
6
>

7. “Yes, to powerful images.
Yes, to meaningful content.
Yes, to sleek and purposeful navigation."
"They [the designers] will also be able to use
pragmatism and remove your own personal bias
and emotion."
http://www.forbes.com/sites/thesba/2014/02/10/
top-web-design-trends-in-2014/
Client
Perspective
Web Design
Trends
7

8. Some ideas: Web Design Trends 2014
Grid-based design
Caption Mania with HTML5
http://tympanus.net/codrops/2013/05/02/automatic-
figure-numbering-with-css-counters
Sophisticated forms with jQuery
Landing Pages are back!
Play with Video
http://www.hongkiat.com/blog/html5-videos-things-
you-need-to-know/
Flat Design
Personal Portraits
More @font-face
Experiments with HTML5 Canvas and JavaScript
http://codepen.io/popular/
8
<figure>
<img src="path/to/your/
image.jpg" alt="" />
<figcaption>Here is the legend
for your image<figcaption>
</figure>
Source: http://
www.hongkiat.com/
blog/web-design-
trends-2014/

9. What’s your project about?
9

10. Defining the design problem:
research
brainstorming
interviews
focus groups
visual research
brand matrix
Conceptual
Phase
10

11. EXERCISE
Brainstorming
Throw away the scissors in your head
write down any idea on a pice of paper
don't take the first idea
second round with one favorite idea from first round
Business Goals help reach consensus
Collaborate with your client:
How does the brand look like?
What content will be needed?
How often will the website need updates?
11

12. “I want new visitors to be able to move down from the top of
the page to the bottom in 30 seconds and have a crystal
clear idea of who we are and what we do.”
“And for repeat visitors, I want them to easily identify where
to go to make a purchase, or visit our blog, virtually without
having to look.”
Forbes: http://www.forbes.com/sites/thesba/2014/02/10/top-
web-design-trends-in-2014/
Client
Perspective
UX Design
12

13. Existing
Branding
Mission
Statement
Specs/Brief
Wants
Target
Group
Toolbox:
Objectives &
Priorities

14. EXERCISE
Objectives & Priorities
Sort objectives (goals) into pyramid:
2 high, 3 medium, and 5 low priority.
14
2
3
5

15. Design for Possibility:
“What makes WordPress so great as a CMS is its
ability to expand and evolve.
The default installation is tremendous, but as you
begin to work with it you’ll quickly realize that your
client’s unique needs require some additions […]
Widgets let you easily add content and features into
designated areas of your WordPress site.”
Jeff Golinski in Web Designer’s Guide to WordPress
by Jesse Friedman
See also:
http://wordpress.org/plugins/browse/popular/
15

16. EXERCISE
Features & Functionality
Inventory of Screen Elements
How does it do it?
What does it do?
Does it meet a goal or satisfy a user?
16

17. EXERCISE
Invent Personas
Name, Age, Occupation, tech skills, interests.
Why do they visit the site? What do they do?
17

18. User Representatives
Watch typical environments, shadowing,
open-ended questions, surveys, focus groups
(perceptions, beliefs, language, attitutes)
User Scenario:
Who? What needs? How needs are met.
Draw stick figures.
Designing for user needs, not wants.
18
Source: http://xkcd.com/1254/ “Preferred Chat System”

19. Competitors:
Similar brands market analysis:
What works?
What doesn’t?
What’s unique?
What’s the same?
Draw a Brand Matrix
Define opposites
Tea example:
East/West, Informal/Formal
Ellen Lupton, Graphic Design Thinking
19
Formal
Informal
EastWest

20. What Types of Content?
Location-based
Entertainment
Communication
Learning
Shopping
Gamification: use with caution
Apps: from telling to helping
20

21. “Once I have a good
understanding of the site
structure, I’ll move
to wireframing, then later
to the design.”
Jesse Friedman, author of “Web
Designer’s Guide to WordPress”
Create a sitemap
https://www.gliffy.com/
21

22. Conceptual Phase
Research/Marketing
Idea Generation
Goals & Priorities
Features & Functionalities
Target Group/Users/Personas
Visualization
Moodboard
Simple Wireframes
Breakpoint Graphs
Mock-ups
Prototypes/UX Design
Front-End Design
Theme Development
Design
Process
22

23. Ideas are safer on paper:
element inventory
moodboard
quick wireframes
breakpoint graphs
mock-ups
Visualization
23

24. Visualize early to avoid miscommunication:
Get ideas out of your head, onto the paper.
EXERCISE
Draw in a sketchbook
At the beginning of a project, acclaimed
designer Stefan Sagmeister creates
notes and sketches in short “concept time”
sessions. The designers also keeps a
sketchbook with him at all times, to be able
to sketch during meetings, at the airport
or while taking a cab ride through
New York City.
24

25. UX Design/Usability
What does a link look like?
if when lore ipsum
Mental Models
Home, About, Contact vs. lore ipsum
Lines, bold/italic, color, shapes, order, roll-over
25

26. Typography Images
Positioning Colors
Toolbox:
Screen Design

27. "That’s where the design comes in, finding
a pro who knows what will work best on a
smartphone, tablet, or desktop-size screen,
and including the elements that make for
the most seamless and enjoyable format."
http://www.forbes.com/sites/thesba/2014/02/10/top-web-
design-trends-in-2014/
Client
Perspective
Responsive
Web
27

28. Breakpoint Graph for Responsive Web Design
(Responsive Design Workflow, p.101)
Ethan Marcotte, Responsive Web Design, p.114
28

29. “So what does it take to create a
responsive design?
Speaking purely in terms of front-end layout, it takes
three core ingredients:
1. A flexible, grid-based layout
2. Flexible images and media (% instead of px)
3. Media queries (CSS3)”
Ethan Marcotte, Responsive Web Design
29
<!-­‐-­‐
CSS
media
query
-­‐-­‐>
<style>
@media
(max-­‐width:
600px)
{
.facet_sidebar
{
display:
none;
}
}
</style>

30. Visualize early to avoid miscommunication:
Simple wireframes save time & money
EXERCISE
Simple Wireframes
Use the marketing research to determine
what will be on screen, and when,
in which viewport.
30
header/logo
nav
content
footer

31. Brand: Personality!
Rational vs. Emotional
Storytelling
Example websites:
31

32. 32
http://www.codecademy.com/

33. 33
https://www.eyebobs.com/?gclid=CNu8wd7Ilr4CFcNafgodJGoA7g

34. 34
http://www.nytimes.com/

35. EXERCISE
Moodboard
1. Pick three colors (two harmonious, one complimentary)
2. Pick two fonts (one serif, one sans-serif)
http://www.fontsquirrel.com/
3. What textures fit your content?
http://subtlepatterns.com/
4. What images could draw the user’s attention?
http://photography.tutsplus.com/articles/15-stock-photography-
sites-to-sell-your-photos-for-beginners-and-pros--photo-1189
5. Make a moodboard out of all of the above
http://styletil.es/
http://balsamiq.com/
35

36. 36
https://kuler.adobe.com/create/color-wheel/

37. 37
http://www.fontsquirrel.com/

38. 38
http://subtlepatterns.com/

39. 39
http://www.shutterstock.com/

40. 40
http://styletil.es/

41. 41

42. DESIGN
Beautiful design has underlying rules:
Principles of Design
https://www.getty.edu/education/teachers/
building_lessons/principles_design.pdf
Gestalt Theory
http://www.creativebloq.com/graphic-design/
designer-s-guide-gestalt-theory-10134960
Inspiration:
https://dribbble.com/designers
http://designarchives.aiga.org/#/home
https://www.commarts.com/creative
http://www.behance.net/
42

43. 43
Balance
Emphasis
Movement
Pattern/Repetition
Rhythm
Variety
Unity
Principles of Design
https://www.getty.edu/education/teachers/building_lessons/principles_design.pdf

44. 44
https://dribbble.com/designers

45. 45
http://designarchives.aiga.org/#/home

46. 46
https://www.commarts.com/creative

47. Conceptual Phase
Research/Marketing
Idea Generation
Goals & Priorities
Features & Functionalities
Target Group/Users/Personas
Visualization
Moodboard
Simple Wireframes
Breakpoint Graphs
Mock-ups
Prototypes/UX Design
Front-End Design
Theme Development
Design
Process
47

48. UX Design/Usability
Can I click that?
“What we design for… Read. Read. Read. Pause for
Reflection. Finally, click on a carefully chosen link.”
“The reality… Look around feverishly for anything that
a) is interesting, or vaguely resembles what you’re looking for
and
b) is clickable. As soon as you find a half-way decent match,
click. If it doesn’t pan out, click the Back button and try again.”
Steve Krug. Don’t Make Me Think.
48

49. Mobile First:
“If you design mobile first, you create
agreement on what matters most. You can then
apply the same rationale to the desktop/laptop
version of the web site.
We agreed that this way was the most
important set of features and content for our
customers and business–why should that
change with more screen space?”
Luke Wroblewski, Responsive Design
49

50. Sketches are affordable
“It’s very hard to push things or make
discoveries when you have to be good.
The act of making discoveries comes
from the freedom to fail.”
Paula Scher, Pentagram, in Design Diaries
50

51. EXERCISE
Thumbnails sketches:
fill 3 pages in 10 minutes,
think about the content
and structure.
Second round:
Pick three favorite ideas.
51

52. EXERCISE
Rough Design Sketches:
three layout ideas,
in more detail,
on paper
or device.
52

53. balsamiq.com
wireframes
styletil.es
responsive
omnigraffle
wireframes
jekyllrb.com
static
Toolbox:
Prototyping

54. PUBLISHING
Anticipate the admin-user:
For WordPress: “[…]take into consideration that
the client can move elements around.
When you design mock-ups, style common elements
in each widget areas to give some design control over
what will be placed there.
And if the site is responsive, anticipate how
those widgets will appear and function on different
devices.”
Jeff Golenski in Web Designer’s Guide to WordPress by
Jesse Friedman
54

55. DISCUSSION
Use a grid, create a mock-up in Photoshop, no?
http://www.thegridsystem.org/
http://photoshopetiquette.com/
http://www.creativebloq.com/web-design/photoshop-web-design-tips-111140
http://www.smashingmagazine.com/2013/04/22/repurposing-photoshop/
http://www.adobe.com/inspire/2013/11/photoshop-reflow-generator.html
https://gra617.expressions.syr.edu/wp-content/
uploads/2012/07/Photoshop-Optimizing-Images.pdf
55

56. Use WordPress Themes
http://wordpress.org/themes/
https://wordpress.org/themes/responsive/stats/
DISCUSSION:
“Code gives breath to ideas. Knowing how to
code is crucial! Knowing how to code well is
completely unnecessary.”
Pete Denman, designer, Intel Labs
(Interactive Design, P. 164)
http://www.smashingmagazine.com/2013/03/13/
guide-wordpress-theme-options/
https://yoast.com/wordpress-theme-anatomy
http://www.smashingmagazine.com/2013/02/21/
wp-theme-development-process/
Choosing an approach chart
Are your fancy ideas browser compatible?
http://caniuse.com/
56

57. themble.com/
bones/
themeshaper.com/
thematic/
studiopress.com
genesis
Toolbox:
WordPress Themes and
Frameworks
diythemes.com
thesis

58. 58
Choosing An Approach:
Approach Time Cost Capability
Future-
proofing
Repetition
Build from
scratch
high low high low low
Hack existing
theme
low low medium low low
Use theme
customizer
low low low low low
Create child
theme based on
existing theme
medium low medium high high
Create parent
theme
high low high high high
Theme
framework
(free)
medium low medium high high
Theme
framework
(premium)
medium high low to medium high high
http://www.smashingmagazine.com/2013/03/13/guide-wordpress-
theme-options/

59. UX Design/Usability Testing
“It’s not productive to ask questions like “Do most
people like pulldown menus?”
The right kind of question to ask is “Does this pulldown,
with these items and this wording in this context on this
page create a good user experience for most people
Steve Krug. Don’t Make Me Think.
59

60. EXERCISE
User Response tests, four areas:
1.Efficiency (steps & time)
2. Accuracy (mistakes)
3. Recall of Functionality & Content
4. Emotional Response
OR Heuristic Analysis
Software for testing: Silverback
Andy Pratt et.al., Interactive Design
60

61. “If your customers don’t know about what
you’ve designed, if they don’t realize how it can
help them, and if they don’t connect to it
emotionally, they will not visit your site…”
Steve Krug. Don’t Make Me Think.
Advertise for your website
Print media, ads, mailers, flyers,
radio, tv, other websites, email,
peer recommendation
61
Brand Loyalty

62. Works Cited:
Friedman, Jesse. Web Designer’s Guide to WordPress. Berkeley: New
Riders, 2013. Print.
Hay, Stephen. Responsive Design Workflow. New Riders, 2013. Print
Krug, Steve. Don’t Make Me Think – A Common Sense Approach to Web
Usability. Berkeley: New Riders, 2006. Print.
Marcotte, Ethan. Responsive Web Design. New York, New York: A Book
Apart, 2011. Print.
Lupton, Ellen. Graphic Design Thinking. New York, New York: Princeton
Architectural Press, 2011. Print.
Pratt, Andy & Nunes, Jason. Interactive Design. Beverly, MA: Rockport,
2012. Print.
Roberts, Lucienne & Wright, Rebecca. Design Diaries: Creative Process in
Graphic Design. London: Laurence King Publishing, 2010. Print.
62

63. 63
Works Cited/Online Sources:
Bernstein, Mark. "10 Tips on Writing the Living Web." A List Apart: For People
Who Make Websites. A List Apart Mag., 16 Aug. 2002. Web. 4 May 2009.
Hickox, David. “Life Below 960px”. Slide share. Sep 05, 2013. Web. 4 May 2014.
<http://www.slideshare.net/davidhickox/life-below-960px-an-intro-to-responsive-
design-wordcamp-birmingham-2013>.
http://www.smashingmagazine.com/2013/03/13/guide-wordpress-theme-
options/
https://yoast.com/wordpress-theme-anatomy
http://www.smashingmagazine.com/2013/02/21/wp-theme-development-
process/
http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/
http://www.shootonline.com/news/top-spot-todaro-gsdm-storm-radio-shack-
icons-1980s-phone-call
http://success.adobe.com/en/uk/programs/products/digitalmarketing/
1401-30364-econsultancy-digitaltrends.html?
s_cid=701a0000002IagkAAC&s_iid=701a0000002ILMVAA4&skwcid=AL!3085!3!
40807008245!p!!g!!web%20trends&ef_id=U2EExQAABYLZ-SmV:
20140430141221:s
http://www.forbes.com/sites/thesba/2014/02/10/top-web-design-trends-in-2014/
http://codepen.io/popular/
https://www.getty.edu/education/teachers/building_lessons/principles_design.pdf
http://responsive.is/typecast.com Prototyping with HTML & CSS

64. 64
Questions?
Ulrike Gencarelle
ugencarelle@jwu.edu
www.linkedin.com/pub/ulrike-gencarelle/
85/903/329/

65. 65