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 thaisie@gmail.com – www.thaisie.com On twitter: http://twitter.com/thaisie