The making of rapid prototype a web love story
-
Upload
anil-kumar-krishnashetty -
Category
Design
-
view
612 -
download
4
Transcript of The making of rapid prototype a web love story
![Page 1: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/1.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/2.jpg)
USER UX DESIGNER
DEVELOPER
![Page 6: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/6.jpg)
![Page 7: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/7.jpg)
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 8: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/8.jpg)
Cost of fixing poorly designed apps
50 - 100 % 25 - 50 %
reference - Developer VS Designer friction is ruining your ux
0 - 25 %
![Page 10: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/10.jpg)
designers + engineers + empathy = greatness
reference Design + Engineer + Empathy = Greatness
![Page 12: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/12.jpg)
Web Technologies - Human Body Analogy
● HTML● CSS● Javascript
![Page 13: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/13.jpg)
Content
![Page 14: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/14.jpg)
wirify demo
![Page 15: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/15.jpg)
Content
<HTML>
</HTML>
![Page 16: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/16.jpg)
HTML
![Page 17: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/17.jpg)
X-ray goggles - Demo
X-ray Goggles
![Page 18: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/18.jpg)
No close tag
![Page 19: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/19.jpg)
Organs
![Page 20: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/20.jpg)
Web - Organs
![Page 21: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/21.jpg)
Web - tissues & cells
Patternlab by Brad Frost
![Page 23: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/23.jpg)
CSS = Makeup
![Page 24: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/24.jpg)
CSS makeup demo
Baby girl makeup link
![Page 25: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/25.jpg)
Javascript = Brain
![Page 26: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/26.jpg)
Browser = Restaurant Table
![Page 27: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/27.jpg)
Protocol request = Waiter
![Page 28: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/28.jpg)
Server = Kitchen
![Page 29: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/29.jpg)
Pregnancy
Bookofspeedby Stoyan
![Page 30: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/30.jpg)
Response
![Page 31: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/31.jpg)
Evolution of Life & Web
![Page 33: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/33.jpg)
Tools
Code colaPerfect pixelSnagitAtomic
![Page 34: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/34.jpg)
![Page 36: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/36.jpg)
![Page 38: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/38.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/39.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/40.jpg)
Let's build better Web (human)
![Page 41: The making of rapid prototype a web love story](https://reader034.fdocuments.us/reader034/viewer/2022042619/58eec4bf1a28ab81718b46c9/html5/thumbnails/41.jpg)
Thank you
Follow on @anilbms75
Email [email protected]
Icon reference - thenounproject flaticon.com
Icon reference - thenounproject flaticon.com
anilbms