Embed Size (px)
DESCRIPTION
I didn't realize it during the presentation, but I was accidentally showing an older version of the slides!! This is the real thing!
Citation preview
The Professional Design Process
Prof. Uli GencarelleJohnson & 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, 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
Step-by-step web design approachprovides professional framework for start-ups, freelacers and web design teams.
I would like to provide a little toolbox:industry process for responsive web designquotes & tips from experienced designersexercises to enhance creativityinspiration & resourcesUX theory & testing strategies
This Show
3
Conceptual PhaseResearch/MarketingIdea GenerationGoals & PrioritiesFeatures & FunctionalitiesTarget Group/Users/Personas
VisualizationMoodboardSimple WireframesBreakpoint GraphsMock-ups
Prototypes/UX DesignFront-End DesignTheme Development
Design Process
4
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
Defining the design problem:RESEARCHBrainstorming, 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
>
“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
Some ideas: Web Design Trends 2014Grid-based design
Caption Mania with HTML5http://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/
What’s your project about?
9
Defining the design problem:
researchbrainstorminginterviewsfocus groups visual researchbrand matrix
ConceptualPhase
10
EXERCISEBrainstorming
Throw away the scissors in your headwrite down any idea on a pice of paper
don't take the first ideasecond round with one favorite idea from first round
Business Goals help reach consensusCollaborate with your client:
How does the brand look like?What content will be needed?
How often will the website need updates?
11
“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
Existing Branding
MissionStatement
Specs/BriefWants
Target Group
Toolbox:Objectives & Priorities
EXERCISEObjectives & Priorities
Sort objectives (goals) into pyramid: 2 high, 3 medium, and 5 low priority.
14
235
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
EXERCISEFeatures & Functionality Inventory of Screen Elements
How does it do it?What does it do?
Does it meet a goal or satisfy a user?
16
EXERCISEInvent 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, 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”
Competitors:Similar brands market analysis: What works? What doesn’t? What’s unique? What’s the same?
Draw a Brand MatrixDefine oppositesTea example: East/West, Informal/FormalEllen Lupton, Graphic Design Thinking
19
Formal
Informal
EastWest
What Types of Content?Location-basedEntertainmentCommunicationLearningShopping
Gamification: use with cautionApps: from telling to helping
20
“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 sitemaphttps://www.gliffy.com/
21
Conceptual PhaseResearch/MarketingIdea GenerationGoals & PrioritiesFeatures & FunctionalitiesTarget Group/Users/Personas
VisualizationMoodboardSimple WireframesBreakpoint GraphsMock-ups
Prototypes/UX DesignFront-End DesignTheme Development
Design Process
22
Ideas are safer on paper:
element inventorymoodboardquick wireframesbreakpoint graphsmock-ups
Visualization
23
Visualize early to avoid miscommunication:Get ideas out of your head, onto the paper.
EXERCISEDraw 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
UX Design/UsabilityWhat does a link look like?
if when lore ipsum
Mental ModelsHome, About, Contact vs. lore ipsum
Lines, bold/italic, color, shapes, order, roll-over
25
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 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
ResponsiveWeb
27
Breakpoint Graph for Responsive Web Design (Responsive Design Workflow, p.101)
Ethan Marcotte, Responsive Web Design, p.114
28
“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 layout2. 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>
Visualize early to avoid miscommunication:Simple wireframes save time & money
EXERCISESimple Wireframes
Use the marketing research to determine what will be on screen, and when,
in which viewport.
30
header/logo
nav
content
footer
Brand: Personality!Rational vs. Emotional
Storytelling
Example websites:
31
33
https://www.eyebobs.com/?gclid=CNu8wd7Ilr4CFcNafgodJGoA7g
EXERCISEMoodboard
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 abovehttp://styletil.es/
http://balsamiq.com/
35
https://kuler.adobe.com/create/color-wheel/
36
https://kuler.adobe.com/create/color-wheel/
41
DESIGNBeautiful design has underlying rules:
Principles of Designhttps://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
Balance
Emphasis
Movement
Pattern/Repetition
Rhythm
Variety
Unity
Principles of Design
https://www.getty.edu/education/teachers/building_lessons/principles_design.pdf
44
https://dribbble.com/designers
45
http://designarchives.aiga.org/#/home
46
https://www.commarts.com/creative
Conceptual PhaseResearch/MarketingIdea GenerationGoals & PrioritiesFeatures & FunctionalitiesTarget Group/Users/Personas
VisualizationMoodboardSimple WireframesBreakpoint GraphsMock-ups
Prototypes/UX DesignFront-End DesignTheme Development
Design Process
47
UX Design/UsabilityCan 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
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
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
EXERCISE Thumbnails sketches:
fill 3 pages in 10 minutes, think about the content
and structure.
Second round:Pick three favorite ideas.
51
EXERCISE Rough Design Sketches:
three layout ideas, in more detail,
on paper or device.
52
balsamiq.comwireframes
styletil.esresponsive
omnigrafflewireframes
jekyllrb.comstatic
Toolbox:Prototyping
PUBLISHINGAnticipate 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
DISCUSSIONUse 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-111140http://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
Use WordPress Themeshttp://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
themble.com/bones/
themeshaper.com/thematic/
studiopress.comgenesis
Toolbox:WordPress Themes and Frameworks
diythemes.comthesis
58
Choosing An Approach:Approach Time Cost Capability Future-
proofingRepetition
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/
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 peopleSteve Krug. Don’t Make Me Think.
59
EXERCISEUser Response tests, four areas:
1.Efficiency (steps & time)2. Accuracy (mistakes)
3. Recall of Functionality & Content4. Emotional Response
OR Heuristic AnalysisSoftware for testing: Silverback
Andy Pratt et.al., Interactive Design
60
“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
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
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
65
