41
The making of rapid prototype: A Web love story @anilbms75 UXCAMP, Hamburg, 15th August 2015 We’re going to Webtools! We’re leaving this native town for good. I will share you a prototype link. coverpage

The making of rapid prototype a web love story

Embed Size (px)

Citation preview

Page 1: The making of rapid prototype  a web love story

The making of rapid

prototype: A Web love story

@anilbms75UXCAMP,Hamburg,

15th August 2015

We’re going to Webtools! We’re leaving this native town for good. I will share you a prototype link.

coverpage

Page 2: The making of rapid prototype  a web love story

USER UX DESIGNER

DEVELOPER

Page 5: The making of rapid prototype  a web love story

“I’m glad we all agree then”

reference jeff patton

Page 6: The making of rapid prototype  a web love story
Page 7: The making of rapid prototype  a web love story

Business users, designers, and developers don’t see eye-to-eye when it comes to user experience and interface design. - Dave Shirk, CMO, Kony

Page 10: The making of rapid prototype  a web love story

designers + engineers + empathy = greatness

reference Design + Engineer + Empathy = Greatness

Page 11: The making of rapid prototype  a web love story

“I’m glad we all agree then”

reference jeff patton

Page 12: The making of rapid prototype  a web love story

Web Technologies - Human Body Analogy

● HTML● CSS● Javascript

Page 13: The making of rapid prototype  a web love story

Content

Page 14: The making of rapid prototype  a web love story

wirify demo

Page 15: The making of rapid prototype  a web love story

Content

<HTML>

</HTML>

Page 16: The making of rapid prototype  a web love story

HTML

Page 18: The making of rapid prototype  a web love story

No close tag

Page 19: The making of rapid prototype  a web love story

Organs

Page 20: The making of rapid prototype  a web love story

Web - Organs

Page 21: The making of rapid prototype  a web love story

Web - tissues & cells

Patternlab by Brad Frost

Page 23: The making of rapid prototype  a web love story

CSS = Makeup

Page 25: The making of rapid prototype  a web love story

Javascript = Brain

Page 26: The making of rapid prototype  a web love story

Browser = Restaurant Table

Page 27: The making of rapid prototype  a web love story

Protocol request = Waiter

Page 28: The making of rapid prototype  a web love story

Server = Kitchen

Page 30: The making of rapid prototype  a web love story

Response

Page 31: The making of rapid prototype  a web love story

Evolution of Life & Web

Page 32: The making of rapid prototype  a web love story

Design = FORM + CONTENT

Page 34: The making of rapid prototype  a web love story
Page 36: The making of rapid prototype  a web love story
Page 38: The making of rapid prototype  a web love story

When I design, I work very hard to make the interface experience feel like there’s a human on the other end, not a computer.

Page 39: The making of rapid prototype  a web love story

Let’s think of our designs not as a facade for interaction, but as people with whom our audience can have an inspired conversation. Products are people, too.

Page 40: The making of rapid prototype  a web love story

Let's build better Web (human)

Page 41: The making of rapid prototype  a web love story

Thank you

Follow on @anilbms75

Email [email protected]

Icon reference - thenounproject flaticon.com

Icon reference - thenounproject flaticon.com

anilbms