A Modern Design Process
…Coming from a developer
Answer is historical; client conditioned to expect them
You’ve always offered them.
Also involves typical workflow/process
Starts with sales:
Client says they need a website.
That’ll be $8250
You’re super stoked:
Paid for your lunch
Get their name, logo, and email and they say, “Sweet, see you in two weeks!”
Boot up Photoshop
Create the next big thing. It’s glorious.
Email the client an export of the PSD.
“Here’s what your website will look like.”
“Let me know what you think!”
Make changes in PS
“Here’s what your website will look like.”
Great! What will it look like on my iPhone?
Oh, like this!
What about my iPad?
Here you go!
Will it look good on my boss’s Blackberry? What about the Surface? I think I might get a Galaxy Tab. Retina screens!
You get the point.
Has to rely on previous experience
It’s their responsibility to ensure the success of the project
This is our fault! We condition them to do this.
You determine which.
Every time you start a new project.
Part of your job description is defining the details of a project.
Feedback makes you want to tear your eyeballs out.
Lack of appropriate expectations
A process and set of tools that may not be best fit for the job.
Starts with meetings.
Communication not only helps you design w/ data, it shows:
You know what you’re doing
You can be trusted with success
Gotta do a little handholding
Conversation is cheap and not as hard as redesigning
(once you’re used to it)
Meetings are money left on the table.
Bill for these—they’re necessary
Can even happen pre-sales.
Particularly helpful for atypical client/project
You may not comfortable quoting w/o discovery
Have everyone involved and have buy-in
A lack of buy-in will show throughout the project when devs/designers just do it because they don’t care about the biz’s success.
Little? A lot? None? What does this look like?
One PSD? Five? Wireframes? Timeframes?
Preference/style? Or objective goal-based feedback?
Still doing handholding.
Besides making money.
Number of downloads
Specific traffic stats
Specific sales figures
Easiest when client is in product biz.
Every biz has some type of target market.
Website shouldn’t ask “how can I help you?”
Design around the answers to that question.
Persona for recent client
Defining/obtaining a sitemap
Waterfall of content based on importance
Napkin sketching – internal “un”-deliverable
Design spikes; may not even end up anywhere.
Do something you think would look and work well, w/o constraints or preconceptions
Don’t design before you know content; don’t define content before you design.
Know what the content is made up of.
Is this an informational site?
Maybe you’re defining these at this time.
Don’t define style of content-just placement
Responsive, interactive prototyping tool—in the browser.
Online, no emailing files back and forth with 18 different names that you’re never sure which is current
Let’s you define breakpoints and prototype the content around those.
Library of pre-existing tools
- Bootstrap, Foundation
Make this as bare-bones as possible. It’s for IA, not style
More cool features:
Let’s you define actions-hover states, clicks, etc.
Give people the link, it will be responsive!
Built with a large library of pre-made tools – Bootstrap/Foundation grids and systems, button styles, form styles, etc.
Make this in the browser! Write it in Sass!
Typecast lets you just get in the browser and see what fonts look like, on all screen resolutions.
Opposite of many design processes; we often design from the page down (this is bad, bloats CSS, and is not future-friendly)
Encourages modular components for use throughout the site.
Designed in the browser
Has animation, hover states, and combinations that need to respond to their environment.
“What You See Is Never What You Get”
Fonts, line heights, gradients, colors, can all look differently in the browser.
Predefined screen widths
Multiple PSDs for diff. screen widths
Copying and pasting to duplicate elements
Requires changes in multiple places
Parameters of app and web design in mind
Doesn’t enable/encourage you to design in browser-incompatible ways
Create symbols for frequently used/repeating elements.
Change once, change everywhere.
Ditto Layer Styles and Text Styles; are akin to CSS—styles that apply throughout your document.
Change them in one place, they change everywhere
Generate 1x, 2x, PNG, SVG, all in one step
Don’t pull a drive-by email delivery of the design, shouting “Let me know what you think” over your shoulder as you speed away.
In fact, NEVER ask, “what do you think”.
Do not send a deliverable to the client and ask for their feedback.
Have a meeting where you present the purpose, thought, data behind each component of the deliverable.
No real-estate tours. Your client knows what their logo looks like; don’t point to it and say, “here’s your logo”
“Sell” how the current deliverable meets their business goals (it does, right?).
Walk through the site as if you’re in the persona you designed: Are your needs met?
Encourage the client to give feedback based on their area of expertise (their business) and leave the rest up to you.
Be open to being wrong.
It’s ok if you misunderstood or misinterpreted a business goal and how you translated that to design. Let the client know that it is helpful to know this as soon as it is recognized.
The goal of a presentation is to show your client what you believe will meet their business goals.
It sucks to get to the end of the project and be told that the CEO has some additional feedback/changes
Whittle the number of inputs down; often people just want to throw something in anyway.
Do this up front and be clear that this needs to happen and be done with.
Tone – does it feel like your company?
Voice – does the language match the intended brand perception?
Require feedback to have reasoning behind it (in a non-confrontational way)
Don’t accept feedback like, “the logo/header should be bigger”. The green should be greener. Font more bold. NO.
Prohibit the client from making their own “version” of your design, in your contract.
You’re both working towards the same end goal - an awesome end product! You’re not waging war against each other.