Death to Pixel Perfect Design: Prototyping for the Real World
61
-
Upload
jason-cranfordteague -
Category
Design
-
view
109 -
download
1
description
Designers often begin their work with a sketch. A sketch is the best way to begin planning a design; it's a quick way to see the visual challenges being faced. But there is a disconnect between what you can imagine in a static image and the actual design capabilities of the Web. UX Designers spend hours iterating around visual comps created in applications designed for print production, trying to create high fidelity visual prototypes, but for the wrong medium. Instead of drawing prototypes, we need to start working in HTML and CSS as quickly as possible to realize our visions in the medium for which it will be produced. What you will learn: •How to design dynamic prototypes. •Working with responsive design from the ground-up. •How to reduce the number of misfires between design and development.
Transcript of Death to Pixel Perfect Design: Prototyping for the Real World
![Page 1: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/1.jpg)
![Page 2: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/2.jpg)
![Page 3: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/3.jpg)
![Page 4: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/4.jpg)
![Page 5: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/5.jpg)
![Page 6: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/6.jpg)
![Page 7: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/7.jpg)
![Page 8: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/8.jpg)
![Page 9: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/9.jpg)
![Page 10: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/10.jpg)
![Page 11: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/11.jpg)
![Page 12: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/12.jpg)
![Page 13: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/13.jpg)
![Page 14: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/14.jpg)
![Page 15: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/15.jpg)
![Page 16: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/16.jpg)
![Page 17: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/17.jpg)
![Page 18: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/18.jpg)
![Page 19: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/19.jpg)
![Page 20: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/20.jpg)
![Page 21: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/21.jpg)
![Page 22: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/22.jpg)
![Page 23: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/23.jpg)
![Page 24: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/24.jpg)
![Page 25: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/25.jpg)
![Page 26: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/26.jpg)
![Page 27: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/27.jpg)
![Page 28: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/28.jpg)
![Page 29: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/29.jpg)
![Page 30: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/30.jpg)
![Page 31: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/31.jpg)
![Page 32: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/32.jpg)
![Page 33: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/33.jpg)
![Page 34: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/34.jpg)
![Page 35: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/35.jpg)
![Page 36: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/36.jpg)
![Page 37: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/37.jpg)
![Page 38: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/38.jpg)
![Page 39: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/39.jpg)
![Page 40: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/40.jpg)
![Page 41: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/41.jpg)
![Page 42: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/42.jpg)
![Page 43: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/43.jpg)
![Page 44: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/44.jpg)
![Page 45: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/45.jpg)
![Page 46: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/46.jpg)
![Page 47: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/47.jpg)
![Page 48: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/48.jpg)
![Page 49: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/49.jpg)
![Page 50: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/50.jpg)
![Page 51: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/51.jpg)
![Page 52: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/52.jpg)
![Page 53: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/53.jpg)
![Page 54: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/54.jpg)
![Page 55: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/55.jpg)
![Page 56: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/56.jpg)
![Page 57: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/57.jpg)
![Page 58: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/58.jpg)
![Page 59: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/59.jpg)
![Page 60: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/60.jpg)
![Page 61: Death to Pixel Perfect Design: Prototyping for the Real World](https://reader033.fdocuments.us/reader033/viewer/2022052820/54c78d304a79591f0a8b45e6/html5/thumbnails/61.jpg)