The
Professional
Design
Process
Prof. Uli Gencarelle
Johnson & Wales University
Providence, RI
WordCamp CT 2014
1
Creative Methods:
“Nearly any person can learn to improve his or her
creative abilities. Talent may be a mysterious
entity...
Step-by-step web design approach
provides professional framework for
start-ups, freelacers and web design
teams.
I would l...
Conceptual Phase
Research/Marketing
Idea Generation
Goals & Priorities
Features & Functionalities
Target Group/Users/Perso...
Finding Ideas
“Design is a messy endeavor. Designers
generate countless ideas that don’t get used.
They often find themselv...
Defining the
design
problem:
RESEARCH
Brainstorming, interviews,
focus groups, visual
research, brand matrix
“We get it, w...
“Yes, to powerful images.
Yes, to meaningful content.
Yes, to sleek and purposeful navigation."
"They [the designers] will...
Some ideas: Web Design Trends 2014
Grid-based design
Caption Mania with HTML5
http://tympanus.net/codrops/2013/05/02/autom...
What’s your project about?
9
Defining the design problem:
research
brainstorming
interviews
focus groups
visual research
brand matrix
Conceptual
Phase
10
EXERCISE
Brainstorming
Throw away the scissors in your head
write down any idea on a pice of paper
don't take the first ide...
“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...
Existing
Branding
Mission
Statement
Specs/Brief
Wants
Target
Group
Toolbox:
Objectives &
Priorities
EXERCISE
Objectives & Priorities
Sort objectives (goals) into pyramid:
2 high, 3 medium, and 5 low priority.
14
2
3
5
Design for Possibility:
“What makes WordPress so great as a CMS is its
ability to expand and evolve.
The default installat...
EXERCISE
Features & Functionality
Inventory of Screen Elements
How does it do it?
What does it do?
Does it meet a goal or ...
EXERCISE
Invent Personas
Name, Age, Occupation, tech skills, interests.
Why do they visit the site? What do they do?
17
User Representatives
Watch typical environments, shadowing,
open-ended questions, surveys, focus groups
(perceptions, beli...
Competitors:
Similar brands market analysis:
What works?
What doesn’t?
What’s unique?
What’s the same?
Draw a Brand Matrix...
What Types of Content?
Location-based
Entertainment
Communication
Learning
Shopping
Gamification: use with caution
Apps: f...
“Once I have a good
understanding of the site
structure, I’ll move
to wireframing, then later
to the design.”
Jesse Friedm...
Conceptual Phase
Research/Marketing
Idea Generation
Goals & Priorities
Features & Functionalities
Target Group/Users/Perso...
Ideas are safer on paper:
element inventory
moodboard
quick wireframes
breakpoint graphs
mock-ups
Visualization
23
Visualize early to avoid miscommunication:
Get ideas out of your head, onto the paper.
EXERCISE
Draw in a sketchbook
At th...
UX Design/Usability
What does a link look like?
if when lore ipsum
Mental Models
Home, About, Contact vs. lore ipsum
Lines...
Typography Images
Positioning Colors
Toolbox:
Screen Design
"That’s where the design comes in, finding
a pro who knows what will work best on a
smartphone, tablet, or desktop-size sc...
Breakpoint Graph for Responsive Web Design
(Responsive Design Workflow, p.101)
Ethan Marcotte, Responsive Web Design, p.11...
“So what does it take to create a
responsive design?
Speaking purely in terms of front-end layout, it takes
three core ing...
Visualize early to avoid miscommunication:
Simple wireframes save time & money
EXERCISE
Simple Wireframes
Use the marketin...
Brand: Personality!
Rational vs. Emotional
Storytelling
Example websites:
31
32
http://www.codecademy.com/
33
https://www.eyebobs.com/?gclid=CNu8wd7Ilr4CFcNafgodJGoA7g
34
http://www.nytimes.com/
EXERCISE
Moodboard
1. Pick three colors (two harmonious, one complimentary)
2. Pick two fonts (one serif, one sans-serif)
...
36
https://kuler.adobe.com/create/color-wheel/
37
http://www.fontsquirrel.com/
38
http://subtlepatterns.com/
39
http://www.shutterstock.com/
40
http://styletil.es/
41
DESIGN
Beautiful design has underlying rules:
Principles of Design
https://www.getty.edu/education/teachers/
building_less...
43
Balance
Emphasis
Movement
Pattern/Repetition
Rhythm
Variety
Unity
Principles of Design
https://www.getty.edu/education/...
44
https://dribbble.com/designers
45
http://designarchives.aiga.org/#/home
46
https://www.commarts.com/creative
Conceptual Phase
Research/Marketing
Idea Generation
Goals & Priorities
Features & Functionalities
Target Group/Users/Perso...
UX Design/Usability
Can I click that?
“What we design for… Read. Read. Read. Pause for
Reflection. Finally, click on a car...
Mobile First:
“If you design mobile first, you create
agreement on what matters most. You can then
apply the same rational...
Sketches are affordable
“It’s very hard to push things or make
discoveries when you have to be good.
The act of making dis...
EXERCISE
Thumbnails sketches:
fill 3 pages in 10 minutes,
think about the content
and structure.
Second round:
Pick three ...
EXERCISE
Rough Design Sketches:
three layout ideas,
in more detail,
on paper
or device.
52
balsamiq.com
wireframes
styletil.es
responsive
omnigraffle
wireframes
jekyllrb.com
static
Toolbox:
Prototyping
PUBLISHING
Anticipate the admin-user:
For WordPress: “[…]take into consideration that
the client can move elements around....
DISCUSSION
Use a grid, create a mock-up in Photoshop, no?
http://www.thegridsystem.org/
http://photoshopetiquette.com/
htt...
Use WordPress Themes
http://wordpress.org/themes/
https://wordpress.org/themes/responsive/stats/
DISCUSSION:
“Code gives b...
themble.com/
bones/
themeshaper.com/
thematic/
studiopress.com
genesis
Toolbox:
WordPress Themes and
Frameworks
diythemes....
58
Choosing An Approach:
Approach Time Cost Capability
Future-
proofing
Repetition
Build from
scratch
high low high low low...
UX Design/Usability Testing
“It’s not productive to ask questions like “Do most
people like pulldown menus?”
The right kin...
EXERCISE
User Response tests, four areas:
1.Efficiency (steps & time)
2. Accuracy (mistakes)
3. Recall of Functionality & ...
“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 co...
Works Cited:
Friedman, Jesse. Web Designer’s Guide to WordPress. Berkeley: New
Riders, 2013. Print.
Hay, Stephen. Responsi...
63
Works Cited/Online Sources:
Bernstein, Mark. "10 Tips on Writing the Living Web." A List Apart: For People
Who Make Web...
64
Questions?
Ulrike Gencarelle
ugencarelle@jwu.edu
www.linkedin.com/pub/ulrike-gencarelle/
85/903/329/
65
Upcoming SlideShare
Loading in...5
×

The Professional Design Process

1,324

Published on

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

Published in: Design, Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,324
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
45
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

The Professional Design Process

  1. 1. The Professional Design Process Prof. Uli Gencarelle Johnson & Wales University Providence, RI WordCamp CT 2014 1
  2. 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. 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. 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. 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. 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. 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. 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. 9. What’s your project about? 9
  10. 10. Defining the design problem: research brainstorming interviews focus groups visual research brand matrix Conceptual Phase 10
  11. 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. 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. 13. Existing Branding Mission Statement Specs/Brief Wants Target Group Toolbox: Objectives & Priorities
  14. 14. EXERCISE Objectives & Priorities Sort objectives (goals) into pyramid: 2 high, 3 medium, and 5 low priority. 14 2 3 5
  15. 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. 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. 17. EXERCISE Invent Personas Name, Age, Occupation, tech skills, interests. Why do they visit the site? What do they do? 17
  18. 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. 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. 20. What Types of Content? Location-based Entertainment Communication Learning Shopping Gamification: use with caution Apps: from telling to helping 20
  21. 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. 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. 23. Ideas are safer on paper: element inventory moodboard quick wireframes breakpoint graphs mock-ups Visualization 23
  24. 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. 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. 26. Typography Images Positioning Colors Toolbox: Screen Design
  27. 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. 28. Breakpoint Graph for Responsive Web Design (Responsive Design Workflow, p.101) Ethan Marcotte, Responsive Web Design, p.114 28
  29. 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. 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. 31. Brand: Personality! Rational vs. Emotional Storytelling Example websites: 31
  32. 32. 32 http://www.codecademy.com/
  33. 33. 33 https://www.eyebobs.com/?gclid=CNu8wd7Ilr4CFcNafgodJGoA7g
  34. 34. 34 http://www.nytimes.com/
  35. 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. 36 https://kuler.adobe.com/create/color-wheel/
  37. 37. 37 http://www.fontsquirrel.com/
  38. 38. 38 http://subtlepatterns.com/
  39. 39. 39 http://www.shutterstock.com/
  40. 40. 40 http://styletil.es/
  41. 41. 41
  42. 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. 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. 44 https://dribbble.com/designers
  45. 45. 45 http://designarchives.aiga.org/#/home
  46. 46. 46 https://www.commarts.com/creative
  47. 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. 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. 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. 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. 51. EXERCISE Thumbnails sketches: fill 3 pages in 10 minutes, think about the content and structure. Second round: Pick three favorite ideas. 51
  52. 52. EXERCISE Rough Design Sketches: three layout ideas, in more detail, on paper or device. 52
  53. 53. balsamiq.com wireframes styletil.es responsive omnigraffle wireframes jekyllrb.com static Toolbox: Prototyping
  54. 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. 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. 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. 57. themble.com/ bones/ themeshaper.com/ thematic/ studiopress.com genesis Toolbox: WordPress Themes and Frameworks diythemes.com thesis
  58. 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. 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. 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. 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. 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. 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. 64 Questions? Ulrike Gencarelle ugencarelle@jwu.edu www.linkedin.com/pub/ulrike-gencarelle/ 85/903/329/
  65. 65. 65
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×