Developers and Designers

transcript

www.visug.be

Developers are from Mars

Designers from Venus[November 8, 2012 @ ALM Antwerp]

Developers are from MarsDesigners are from Venus

@kevinderudder working foreGuidelines and a lecturer at the Technical University of West Flanders.

Contact me on kevin@e-guidelines.be

NERVOUS1. Last session before dinner2. I need to talk about design

Everybody is a genius. But if you judge afish by its ability to climb a tree, it will liveits whole life believing it's stupid. - Einstein

Everybody is a genius. But ifyou judge a fish by its abilityto climb a tree, it will live itswhole life believing it'sstupid.

But on the otherhand, does a designer need to draw things

ANDL300

L300Intermediate architecture

Development

And more code

Development

And more code

Development

And more code

Development

And more code

Maybe just a little bit

DEVINER

DESIGNIS

DESIGNnot about “damn that looks good”

Actually I hate “damn that looks good”

DESIGNabout making things attractive

DESIGNmaking your app understandable

Users do not have to think, they only do

DESIGNabout making a great product

nothing more , nothing less

interface?

Fast and Fluid

Beautiful

Accessible

Intuitive

With some guidelines, even we can make good interfaces

The good thing is that these guidelines

work everywhere

0. design.windows.comwindows8designhandbook.comwindowsuserexperiencetraining.com

1. Content is king

Content before chrome

Content is the heart of any experience

Anything else is just a way to consume and interact

with content

Leave only the most relevant elements on the

screen

Reason

for chrome

Layout

Interactions

Navigation

2. Follow the Microsoft Design Principles

The five principles of Microsoft design

Pride in craftmanship

Attention to detail

Make it safe and reliable

Alignment to the grid

What about the size of

the tiles when big

screens are used

People buy bigger screens because they want to see more content

FAST & FLUIDDesign for touch

FAST & FLUIDResponsive

FAST & FLUIDIntuitive interaction

FAST & FLUIDDelight with motion

Authentically

digitalNo metaphors=

Authentically

digital=

Be great at something

Focused and direct

Content before chrome

Inspire confidence

Decide what your app needs to do!

Create a “Best at” statement

MY APPIS BEST AT

One sentence Truly differentiatedSpecific

Scenario brainstorming Food with Friends

Where do friends want to eat

Search for a restaurant

Read a review

Get prices, location, contact, ...

Where do I want to eat

View, send or print directions

Interact with restaurant owners

View or share photos

See suggested restaurants

Write a review

Activities before and after eating

Return to favorite restaurants

Get friend’s opinion

Bookmark restaurants

Create an app account and profile

Share my experiences

Food with friends is the best app in its category at helping users and their friends find a restaurant to eat at tonight

Scenario brainstorming Food with Friends

Where do friends want to eat

Read a review

Get prices, location, contact, ...

Where do I want to eat

View, send or print directions

Interact with restaurant owners

View or share photos

See suggested restaurants

Write a review

Activities before and after eating

Return to favorite restaurants

Get friend’s opinion

Bookmark restaurants

Create an app account and profile

Share my experiences

Best design is when there is nothing left to remove

WIN AS ONE

Fit into the UI modelReduce redundancyWork together

3. Ignore the user’s opinion about the app

1 day out of my life

Did anybody asked my advice on

these things?

BUT WE CAN WORK WITH THESE THINGS

BUT WE CAN WORK WITH THESE THINGSBECAUSE PEOPLE ADAPT TO TECHNOLOGY

But don’t make it too difficult for them

4. Don’t create an app because you

want one

This is my computer

This is the backside of my computer

Why in the world should I want to

use a TorchLight on my computer

5. A Windows 8 app is not a website

6. Icons

ICONSUse known icons

in the correct context

otherwise add text

Look through the toilet window???

7. Typography

What you want is a readable font

Not this one

WHAT ABOUT THIS ONE

What you want is a readable font

that works in different sizes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Maecenas porttitor congue massa. Fusce posuere, magna

sed pulvinar ultricies, purus lectus malesuada libero, sit amet

commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et

malesuada fames ac turpis egestas. Proin pharetra nonummy

pede. Mauris et orci.

Aenean nec lorem. In porttitor. Donec laoreet nonummy

augue.

Suspendisse dui purus, scelerisque at, vulputate vitae,

pretium mattis, nunc. Mauris eget neque at sem venenatis

eleifend. Ut nonummy.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,

purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit.

Maecenas porttitor congue

massa. Fusce posuere, magna

sed pulvinar ultricies, purus

lectus malesuada libero, sit

amet commodo magna eros

quis urna.

SEGOE UI

VERDANA

LUCIDA GRANDE

OOH, before I forget!

Never ever , and this is real,

deploy an app with spelling mistakes

I kid you not, you will get punched,

Things we don’t have time for

> Make it easy to go home

> Implement Search

> Handle errors wisely

> Watch out with unnatural things

http://www.worth1000.com/entries/542916/frightenedhttp://iwdrm.tumblr.com/page/15http://annelyse.be/2009/12/29/dyson-verslag/http://www.slowdownfast.com/life-balance-why-following-rules-is-liberating/http://iwdrm.tumblr.com/page/16http://www.campist.com/archives/light-my-fire-spork-utensil.jpghttp://www.fuelyourmotionography.com/files/monkey-thinking.pnghttp://s4.hubimg.com/u/5078555_f260.jpg

Developers and Designers

Technology