the future of webdesign (london 2008)
DESCRIPTION
This a presentation wich I made about the Future of webdesign 2008. I\'ve used the presentations of the speakers, and inserted some thoughts and pictures from my side..TRANSCRIPT
The future of webdesign
(FOWD)Matthijs kleverlaan
Photo by: http://www.flickr.com/photos/bastienlabelle/2424793737/in/set-72157604624144691/
Photo by: http://www.flickr.com/photos/bastienlabelle/2425607744/sizes/l/in/set-72157604624144691/
Photo by: http://www.flickr.com/photos/bastienlabelle/2424852479/
The topics
Finding inspiration for design
User Experience v.s. Brand Experience
Desiging the user Experience
Getting your designs approved: 12 simple Rules
Print is the new web
From design to deployment
Unconventional ways to promote your site
Evolving the User Experience
Finding inspiration for design
User Experience v.s. Brand Experience
Desiging the user Experience curve
Getting your designs approved: 12 simple Rules
Part 1
Finding inspiration for
design
So what is inspiration?
Finding inspiration is a lifestyle
and an ongoing view
of the world
Inspiration is an ongoing process
Every time a dayyou can get
inspired
Direct &Indirect Sources
Direct Sources• Trade Magazines
– Computer Arts, Creatie, Print, ID etc.
• Cataloging books– Typography – Color– Layouts– Design
More direct Sources• Everyday life
– Billboards– Restaurant menus– Commercials– Everything
• Online– Blogs – Design showcases
Photo credit http://www.thenextcorner.com/2007/06/ipod_bud_light_.html
Indirect sourcesFor fresh ideas, look in fresh places
Fresh ideas in fresh places• Art history
Supper at Emmaus by Caravaggio
Fresh ideas in fresh places• Art history
• Unexpected Books
How to avoid abuseInspiration vs duplication
Inspiration Summary• Know your sources
• Try to store your inspiration resources
• Inspiration is a never ending process
• Inspiration takes practice
Don’t look at websitesLook at the elements
on different sitesCollect links with
elements you want to use
Design trends
Current design trends• Homepage big banner spots
Current design trends• Homepage big banner spots
• Brown colored websites
Current design trends• Homepage big banner spots
• Brown colored websites
• Supersize me
Future design trends
Future design trends• Softer colors
Future design trends• Softer colors
• Horizontal vs. Vertical
Future design trends• Softer colors
• Horizontal vs. Vertical
• Video
Finding inspiration for designSpeaker:Patrick McNeil
You know him from:http://www.designmeltdown.com/
The presentation slides:http://www.slideshare.net/carsonified/
inspiration-design-trends-patrick-mc-neil
Watch the recorded presentation:http://www.vimeo.com/946121
User experience v.s.
Brand experience
There is no competition
There is no winner of loser
There is no war
Client and studio must be in harmony
The user experience
The iceberg is the user experience
through the whole website
You see the top
You want to see the whole iceberg..
Most designers create a great top
of the iceberg But have an poor
bottom of the iceberg.
You want this
But you have this
For example take google
Not a great design
but a great user experience
Look at the whole user experience
Work on the whole
user experience
And then
Brand experience
Brand experience
Is NOT about billboards
It’s about the experience
It’s about the emotional attachment
It’s people talking to each other
Branding as an experience
Branding is about the
emotional aspect
Why do we grab coffee at
Instead off
It’s branding
Branding is about people
talking to each other
Think aboutvirals / word of
mouth
http://www.flickr.com/photos/45457688@N00/82283972/
Brand experiencein the past
We all use to watch the same television shows
http://www.flickr.com/photos/giaochau/272060799/
And share our thoughts
http://www.flickr.com/photos/nguyenkhanhduy/1336659604/
Back thenwe consumed
media in a different way
Family listening to radio
http://www.flickr.com/photos/giaochau/272060780/
That's one small step for man,
one giant leap for mankind
Is the most widely watched television
broadcast..
These days it’s harder to
create something
That’s shares the same
experience
Design the experience
Systems-centered designA design philosophy and a process in which the needs, wants, and limitations of the end user of the design process.
User-centerd designask people what they want
Activity-centerd designLook what people do instead of asking him
Genius-centerd design The apple approach. Create something you think it's perfect and the user will tell you if your were right..
Do not fear failure
Otherwiseyou will never
release something risky.
Learn from your mistakes
User experience vs Brand experienceSpeakers:Steve Pearces and Andy Clarke
You know them from:Steve Pearces http://www.pokelondon.com/Andy Clarke http://www.stuffandnonsense.co.uk/
The presentation slides:http://www.slideshare.net/carsonified/
user-experience-v-brand-experience-steve-pearce-andy-clarke
Some notes are from:http://adactio.com/journal/1439/
Watch the recorded presentation:http://vimeo.com/931504
Design the user experience
First impressions countAttentive ServicePersonalisation and customisationAttention to detail
The user experience
FeedbackMake it funCreate the perfect environment
First impressions count
http://flickr.com/photos/47313217@N00/1360279731/
http://flickr.com/photos/joshb/58408568/
Attentive Service
http://flickr.com/photos/ari/418042736/
The doorman hailing a cab
http://flickr.com/photos/steve-brandon/414392862/
Opening a new line
Personalisation and
customisation
Attention to detail
http://flickr.com/photos/kb-a/43723177/
http://www.flickr.com/photos/bmw328driver/2443315790/
Feedback
Make it fun
http://flickr.com/photos/duncan/2084134925/
Create the perfect
environment
Arrive at lobby hotelChecking in at hotelSearching for your roomRoomservice
The perfect hotel experience
First visit / arrive at Homepage Log in to your accountNavigation and searchingSupport and feedback
Perfect website experience
Create the perfect user experience
Designing the user experienceSpeaker:Patrick McNeil
You know him from:http://www.clearleft.com
The presentation slides:http://www.slideshare.net/carsonified/
designing-the-user-experience-curve-andybudd/
Watch the recorded presentation:http://vimeo.com/935747
Getting your designs
approved: 12 Simple Rules
Designer
The ideal process
The real process
Why is it such a challenge
Design is often subjectiveComps (presentations) are not interactiveInnovation can be hard to graspEveryone has an opinion because we all use the web
Why is it such a challenge
Make friends with your client
1. Make friends with your client• Most likely, your clients are overworked and under a lot of
pressure with a variety of responsibilities.
• Be understanding, a positive relationship is key.
2: Ask lots of questions.
2. Ask lots of questions• Get to know your client’s industry and business objectives.
• Perform a competitive analysis to see what others in the industry are doing.
• What does the client want to get out of the site?
• What is their business all about?
Hotdogs
• What are hot dogs exactly?
• Why are they called hot dogs?
• Are your hot dogs kosher?
• What makes a hot dog kosher?
• What is the history of Frankfurters?
• How are hot dogs stuffed?
• What is the “outside” made of?
• What’s in vegetarian hot dogs?
Ask questions
• Why are hot dog buns longer than hot dogs?
• How many ways can you cook a hot dog?
• What’s the best way to cook a hot dog?
• Why are hot dogs associated with baseball games?
• Is there a danger of children choking on them?
• How much sodium is in your hot dogs?
Ask some morequestions
• Can hot dogs be eaten cold?
• What kind of seasoning do you use?
• What’s the best side to accompany a hot dog?
• How many calories are in a hot dog?
• What are the most popular toppings?
• What are the best toppings?
Ask EVEN MOREquestions
• What do you think of hot dog eating contests?
• Have your hot dogs been used in contests?
• How long have you been making hot dogs?
• Could you arrange for me to talk on the phone with some of the people who make your hot dogs?
• Etc...
You get the idea
3. Ask more questions• Who will be using this site• What’s the target age range• What are their browser capabilities?• What does the user need to take away?
• The user needs are often different from the business objectives.
• User profiles will help support your design choices.
3. Use wireframes but don’t be tied to them• Wireframes are a vital part of communicating with
your client.• They make a great conversation starter.
3. Use wireframes but don’t be tied to them• Wireframes are a vital part of communicating with
your client.• They make a great conversation starter.
• Use wireframes to indicate content priority and general placement.
• It’s okay if they change when you go to comp.
• Define content blocks and the overall IA for the site
• Get your clients thinking about functionality andwhat makes sense for the user
• Make wireframes to scale
• Walk your clients through the wireframes
Provide good notes
B Search
AA IAB 728x90
D
C Featured Content
B
D IAB 300x250
C
E Tag Cloud
E
F Chronological Content
G
G Recent Comments
F
Subtle Changes Are Okay
5. Talk about design before you open Photoshop
• Before you start the design process, reference other sites, mood boards or present color palettes to get the conversation started.
• This will help reduce the number of revisions.
Use site Examples & Color paletts
6. One design direction will do.
It is not a take-out menu!
6. One design direction will do.
• Giving the client a variety of design options to choose from might seem like a good idea
•- but generally it’s not.
6. One design direction will do.
• Giving the client a variety of design options to choose from might seem like a good idea
•- but generally it’s not.
• It can cause an “add this to that” mentality resulting in a lack of design consistency and poor usability.
7. Present in the browser
Don’t just E-mail it!
7. Present in the browser
• Viewing comps only on paper or PDF doesn’t give a true sense of how the comps will look in a browser.
• If at all possible, “walk through” the designs don’t just email them.
• Provide notes: Your clients might have to show the designs to others for approval.
8. Prototype as needed
• Simple prototypes will help your clients grasp innovative concepts.
• It’s not always required, but it can help to sell an idea that your client has never seen before.
Fireworks allows you to rapidly prototype web site designs.
Taking your design mockups from sketches to an interactive prototype can help you test your design.
It can also help to communicate your vision for the site to your client.
Fireworks CS3 is Your Friend
9: Ask for consolidated feedback + limited rounds of revisions.• Educate your clients on the importance of
providing consolidated feedback.
• A project can quickly spiral out of control when feedback is given in piece-meal.
• Limiting the number of revisions will help the project to stay on track.
Too Many Cooks in the KitchenToo Many Cooks in the Kitchen
Tips to Get the Feedback You Need
• Help your clients to focus on the user’s needs and not just their own creative “opinions”
• Ask for specifics if they say “It just doesn’t feel right”
• If they need to get approval from their superiors, ask that they give you all feedback in a consolidated format per round
10. Be confident in your work.
• Don’t fall into the trap of asking your clients what they think is right.
• Design with the users in mind and have research to back up your decisions.
You are the expert
11. Time will tell.
• With time, your client will understand the design process.
• You will come to find ways to improve the client approval process.
Getting sign-offs is a smoother process after a working relationship has been
established.
12. Make the most of a difficult situation.• Web Design is a service industry
• A top priority is listening to your client’s concerns and feedback.
• Be sure to recognize and address their concerns with the user in mind.
Stay positive. The client will feel like you are working with them and not
against them.
Conclusion• Getting approval on designs is not a science
• Each project is different
• These 12 simple rules aim for the best case scenario
12 simple steps• 1. Make friends with your client• 2. Ask lots of questions - about the client's industry• 3. Ask more questions – know the user• 4. Use wireframes but don’t be tied to them• 5. Talk about design before you open Photoshop• 6. One design direction will do• 7. Present in the browser• 8. Prototype as needed• 9. Ask for consolidated feedback & limit the revisions• 10. Be confident in your work• 11. Time will tell• 12. Make the most of a difficult situation
Thats part 1..
Part 2Next time..
Part 2 contains..
Print is the new webFrom design to deploymentUnconventional ways to promote your siteEvolving the User Experience
Questions?Matthijs Kleverlaan
Questions just say hello to [email protected] – www.thaisie.com On twitter: http://twitter.com/thaisie