Download day one - Flying Dog Creative

Event Apart: Day 1 (10.12.09)
Zeldman: Site Redesign
“What problem are we trying to solve?”
"You get tired of a site before the public does."
(Apple, Amazon don’t redesign to redesign…)



Research helps answer that question: research produces achievable goals
Research makes you a credible partner
Build the relationship before you show design
Business Goals & User Needs
Big problem: design looks great until real content arrives; all hell breaks loose
Need to develop content strategy guidelines: suggest tones, voice, lengths
“Alzheimer’s Method”

Always go back to re-explain where we were, what was discussed, what happened
last time

Remind them what you discussed before (again, relationship building)
Learn to Translate (Interpret questions, comments)
Develop a content strategy/guideline document
Convey the Meaning of Design
Discussions over aesthetic fine points are a problem: discuss MEANING of design
“Ideas not pixels”
Communicate feelings, experience, not just images and art
“Contiki” example: nostalgia, web app, or “sex on the beach” (photo-driven, sexy pitch)
Handling Criticism
“That color is ugly” how respond?
Go back to user research, competive audit: what does audience want?
“That button is too big!”
People didn’t know, understand process: button helps solve problem
Listen between the words
Go beyond basic question or comment: what are they really saying??
Is it about the color or the button, a bigger problem, concern?
When the client is YOU?
What’s happening in the field: Competitive audit
“Inspiration”: look at ideas and designs
“What problem are we trying to solve”: what are our goals?
If it’s about reading, don’t use wide grid
“Design from the Content Out”
Starrt with the basic grid: don’t be scared if it looks ugly at first
Tips for non-designers: limit number of colors, type styles, type sizes, and
use a simple layout
“What about NAV?”
Footer says “there’s more” (make it more useful, promotional)
– see Zeldman’s examples of modular, promotional footer
Do some beta testing of basic design
The Business Site
Example: communicate “value”
Start with the Content (persuasive content)
Focus on cities, locations as visual anchor...
Focus on speakers, speaking…
“Curated Web 2.0”
Connect speakers & sessions visually
Use some user-generated stuff
– It costs more to change design late rather than early
* Zeldman’s PPT Fonts: Jubilat, Freight Sans
Jason Santa Maria: “Thinking Small”
Anecdote about “choose your adventure” books when he was a kid
“Decisions, decisions”: lots of small decisions add up
Seven Things (that are helpful over a process):
1. Be a thinker




Hold your horses (think about problem first)
Pretty Sketchy (keep a sketchbook, start simple; it’s not about being a good artist,
it’s about being a good thinker)
Let’s get acquainted (get familiar with content, text, words)
Know your process, know your tools (don’t jump onto the computer too soon; let
it be a tool of refinement)
2. Find the Message


Know what you’re trying to say with the design
Let design represent the theme/message
3. Be a (reverse) Engineer



Example of photoshop tennis
Approaches:
o next/previous
o zoom in/out
o embellish or exaggerate
o disarm
o deconstruct
o re-contextualize
“Yes. and…”
4. Plot it Out






“the grid represents the basic structure of our graphic design, it helps to organize
the content, it provides consistency, it gives an orderly look and it projects a level
of intellectual elegance that we like to express.”
grid systems/models are helpful, but can be over-used
“The grid system is an aid, not a guarantee"
“it’s about choice”
uniform grids aren’t essential; asymmetrical can work as well
grids can be limiting or liberating, depending on how used
5. Think Horizontally, then Vertically

think about design in layers, like a “parfait”
6. Stop modulate and listen




making modular systems (see article)
flexible, adaptable
easy to explain and share with others (“it just makes sense”)
clients like modular css systems
7. Be a Matchmaker

Typography on the web is a challenge



There’s nothing wrong with Helvetica, but…
Try to find ways to use new typefaces via web
Drop-dead guide to not making ugly stuff with type
o Don’t use two scripts
o Don’t use two display typefaces
o Don’t use two sans serif faces (with rare exceptions)
o Rule of thumb: ONE OF EACH. Kinda. (the key is CONTRAST)
o Pair fonts from the same designer
o Find harmony in structure
o Look for contrast (don’t be too close; find a lot of contrast between
typefaces)
Q on design, color, etc: when in process…. JSM touches on that stuff early, part of
thinking through the “mood”/“feel” of design… thinks about it in sketch mode
“Discovery” phase: research, inspiration, sketching, comparative research
Tips for developers trying to learn/understand design: check out JSM “reading” section
on design
Think of design concepts, ideas first; worry about CSS later (don’t be limited by the
shackles of css; start with the concept and idea, then figure out how to implement it)
“Content First” Kristina Halvorson
“content strategy and why I care so much”
@halvorson
#contentstrategy
#aea
Web writers often detached from process, brought in about 2/3 of the way into the
process of a project
Lies we tell ourselves


we can figure it out late
we can re-use old content
Problem: we don’t need “copywriters” for the web: it’s content, not copy
“Content is not a feature”: can’t be marginalized to a step in the process; most people
overlook this, which is why most web content sucks
Late content is almost always the biggest reason for delay with web work
Slides will be text-heavy; but share them as you go
Content is: text, images, audio, video, infographics, widgets, etc.. (not just words)
Plan. Create. Deliver. Govern
NEVER use lorem ipsum. Use real text to mock up
Content should be useful, usable, and enjoyable
mint.com as example of content driven to user needs…
Process: (FEH.. for details see PDF)



audit
o quantitative
o develop content inventory
o assess what you HAVE
analysis
o create a project foundation
 align on business objectives and user goals
 identity success metrics
 define risks and how to mitigate
o research & analysis
 brand & messaging
 user research
 competitor site audits
 government or regulatory requirements
 qualitative audit
plan
o provides clarity
o makes informed decisions
o facilitates smart decision making
o documents the action plan
o troubleshoots implementation
Use page tables to mock up content use
 objective of page
 source material
 maintenance
Editors love these page tables; helps tell them what they need to do, what they need to
work on
A paradigm shift: content has to be more central to process, not an afterthought
Hard work, challenge…. but it makes users happier:
 Better user experience
 Great brand consistency
 New operational efficiencies
 Better risk management
 Improved SEO and analytics
 More effective personalization & targeting
Bringing in web writers late is a flawed strategy; it has to be a major,
integrated process
Dan Brown: “Concept Models: A Tool for Planning
Websites”
Comic Book Store anecdote/example: information on cover as a design model
CNN: examples of IA in action
Basic questions: where am I… where can I go…
Netflix: example of “moving target” design – customized categories, based on
preferences; granular categories, i.e. comedies with a strong female lead
Content types:
 Genre
 Format
 Function
Content types as playing pieces, governed by rules
Evolving world of navigation
 Conventional navigation
 Contextual, anticipatory navigation
 Traditional static site maps are increasingly obsolete
Concept Models are diagrams that describe complex ideas
How they help: Making Decisions
Building concept models:

start with a list of concepts, themes (?)
WTF?? How is this useful?
“from concept model to site model”
Look for concepts that are destinations, hubs, starting points
Look for concepts that bridges other concepts, are less-weighty desinations
Look for relations that imply ownership or belonging
Eight tips:
1.
2.
3.
4.
5.
6.
7.
8.
determine context
do research
make a list
start with less
….. or start with more (?)
label everything
balance familiar and unfamiliar
involve others
How know when done? Deadlines help. AS designers, we’re prone to endless iterations,
obsessed with imperfections
"The curse of being a designer is you are perpetually unsatisfied with your work."
Whitney Hess: DIY UX: Give Your Users an Upgrade
(Without Calling In a Pro)
We are all user experience designers.
It’s not a specialty. Embrace it.
Iridesco example.




Design research
Web analytics
Usability testing
Experimentation & iteration
Design research: what do our users actually NEED?




Iridesco takes feedback & aggregate to fuel innovation and improvements of their
tools
Also uses user surveys (another avenue for communication)
“we don’t want to patch; we want to address the core problem”
give people the chance to talk about themselves and they will talk all day (about
workflow)
Design research keys:
 Make it easy for customers to reach you
 Log their requests & use them to prioritize new features
 Dig deeper to discover the underlying problems
 Keep in touch
Web Analytics: what are our users actually DOING?
What users do and what the say they do aren’t always the same…
Cool tools:
– Crazy egg
– Google Website Optimizer (try multiple design options, buttons, colors
Keys to studying analytics:
 Understand traffic cycles
 Uncover usage patterns
 Test design variations
 Explore search logs to see what people are looking for

Usability testing: How well dos our stuff ACTUALLY WORK?
Usability Testing light works well
Show a build, prototype, comp, sketch
Doesn’t tell participant what she’s supposed to be doing
asks “what are your general feelings about this”?
“‘It looks good’ is the worst feedback we can get” – iridesco
“You have t have humility and listen. Users aren’t always right, but you need to hear
them.” – Iridesco
Get people who will tell you you’re wrong and what doesn’t work; don’t get “supportive”
people who won’t be honest
– HR people are great
– Receptionists are great
– Twitter followers are useful
– Starbucks
– Craigslist
Hess likes old fashioned notepad, pen to record responses…
Cheap tools:
 silverback
 morae
 windows media encoder
 quicktime X (with snow leopard)
What about online testing?
"Don't be a wimp. Be in the room with the test subject. Feel the pain."
Lots of drawbacks: don’t SEE feedback, can’t follow up, harder to internalize findings,
and finally, it’s cowardly (feel the embarrassment of a sucky design)
Online testing tools (if you insist)
 open hallway
 five second test
 usabilla
Experimentation & Iteration











Sketch
Photoshop
Test
Static HTML prototype
Test again
Working prototype
Test again
Tweak
Launch quietly
Get feedback
Tweak (and then back to feedback)
Roz Duffy (example, works on Comcast team)
"We aren't always working on interesting stuff, but we always want to work smarter."




Never stop improving your product
Make your working environment a creative one
Encourage everyone on the team to solve problems together
Soak up inspiration from everywhere
IMPORTANT STUFF TO TAKE AWAY (and make users happy):




Always be listening
Ask questions to get to underlying problems
Use data and anecdotes to inform the design
Test your designs and have the humility to admit you’re wrong


Complete the feedback loop
Never stop trying to make things better
Andy Clarke: “Walls Come Tumbling Down”
“My little pony” factory work as a young man taught him a lot about web design
Creativity is the essential ingredient




Designing better workflows
Designing in the browser
Living with constraints
Designing systems, not site
Paradigm shift is coming: old methods shifting for more steamlined, creative web design
Content – > Design in the browser –> Testing
Design in a browser
“Content out” approach (not design first, content second)
Work in sprints, short bursts… fiddle live with clients to allow them to be involved
“New Internationalist” redesign process




All browser markup design models; NO photoshop
Static visuals fail by definition
o We’re designing web pages, not a photo of a page (don’t demo something
that isn’t real)
o Photoshop comps create unrealistic, inflexible expectations for design on
live site
o Can’t reproduce liquid, resizing, hover effects by users
o Screws up sense of scale
o Requires a lot of explanation
o Leaves out lots of time-consuming details (how to handle overflows,
wraps, content variations)
o Pushes problems down the road to be handled later, closer to deadlines
CSS/Markup design gives an interactive, live, “tactile” model for users to try
It’s time to stop showing clients static design visuals
Do web sites need to look the same in every browser?
No. They don’t need to look the same in every browser. But different does not mean
broken.
Differences that look good, but other’s might not notice are missing aren’t a problem;
who’s going to notice the aesthetic differences? (ie border radius, shadows, css3
elements)
Side rant: "It's only web geeks that know that more than one browser exists"
Browser differences not a problem, especially if the differences aren’t essential; don’t go
mad trying to unify it all across the board: “learn to live with it”
“Support” or “Work” with browsers isn’t binary; it’s a sliding scale
Universal IE6 design CSS: an option to simplify & clean up IE6 to minimalist
presentation?
How to Design in the Browser




Sketch & build look and feel gradually
Don’t shoot for perfection: work in bursts
Start with “great package” (base html elements, css)
import CSS; add a “scratch.css” to the end of the stack
modernizr.js
onload.js
belated.js
Use version control with daily folder of HTML, CSS files (DIY)
Test & design within clear grid that makes switches, swapping easy
“It’s our time, not theirs”
We’re being paid not for our time, but for our knowledge and experience brought to the
job
Other things to do with time saved:
 professional development
 build business
 learn skills
 do some pro bono work
Change how we work for the better: do things more creatively, efficiently