Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Professional Design Process


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
  • I think Mike Cruickshank's new Profit Maximiser service is going to be one of the big hits and I can say hand on heart, if you follow the instructions, and just get involved, you will make a lot of money over the coming weeks, months and years. ★★★
    Are you sure you want to  Yes  No
    Your message goes here
  • ...My Scandalous Secret to Crushing The Odds So Effortlessly... ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here
  • The Odds of The Lotto Are Changing With These Tricks! ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here

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." 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 figure-numbering-with-css-counters Sophisticated forms with jQuery  Landing Pages are back! Play with Video you-need-to-know/ Flat Design Personal Portraits More @font-face Experiments with HTML5 Canvas and JavaScript 8 <figure>     <img src="path/to/your/ image.jpg" alt="" />     <figcaption>Here is the legend for your image<figcaption> </figure> Source: http:// 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: 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: 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: “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 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." 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
  33. 33. 33
  34. 34. 34
  35. 35. EXERCISE Moodboard 1. Pick three colors (two harmonious, one complimentary) 2. Pick two fonts (one serif, one sans-serif) 3. What textures fit your content? 4. What images could draw the user’s attention? sites-to-sell-your-photos-for-beginners-and-pros--photo-1189 5. Make a moodboard out of all of the above 35
  36. 36. 36
  37. 37. 37
  38. 38. 38
  39. 39. 39
  40. 40. 40
  41. 41. 41
  42. 42. DESIGN Beautiful design has underlying rules: Principles of Design building_lessons/principles_design.pdf Gestalt Theory designer-s-guide-gestalt-theory-10134960 Inspiration: 42
  43. 43. 43 Balance Emphasis Movement Pattern/Repetition Rhythm Variety Unity Principles of Design
  44. 44. 44
  45. 45. 45
  46. 46. 46
  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. wireframes responsive omnigraffle wireframes 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? uploads/2012/07/Photoshop-Optimizing-Images.pdf 55
  56. 56. Use WordPress Themes 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) guide-wordpress-theme-options/ wp-theme-development-process/ Choosing an approach chart Are your fancy ideas browser compatible? 56
  57. 57. bones/ thematic/ genesis Toolbox: WordPress Themes and Frameworks 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 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, 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. < design-wordcamp-birmingham-2013>. options/ process/ icons-1980s-phone-call 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 Prototyping with HTML & CSS
  64. 64. 64 Questions? Ulrike Gencarelle 85/903/329/
  65. 65. 65