Дизайн и разработка фронтенда
-
Upload
yandex -
Category
Technology
-
view
116 -
download
2
description
Transcript of Дизайн и разработка фронтенда
![Page 1: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/1.jpg)
![Page 2: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/2.jpg)
Дизайн и разработка фронтенда
Вадим Пацев, Руководитель отдела разработки интерфейсов
![Page 3: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/3.jpg)
Обо мне
3
〉@basvasilich
〉Участник сообщества «Веб-стандарты»
〉Руководитель отдела разработки интерфейсов персонального направления Яндекса
![Page 4: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/4.jpg)
Чему мы научились
![Page 5: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/5.jpg)
"Be responsive or go home"
Mobile first
5
![Page 6: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/6.jpg)
Будь мобильным, или иди домой
![Page 7: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/7.jpg)
![Page 8: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/8.jpg)
![Page 9: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/9.jpg)
![Page 10: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/10.jpg)
![Page 11: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/11.jpg)
Минималистичный визуальный стиль
9
![Page 12: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/12.jpg)
![Page 13: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/13.jpg)
![Page 16: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/16.jpg)
![Page 17: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/17.jpg)
![Page 18: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/18.jpg)
![Page 19: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/19.jpg)
![Page 20: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/20.jpg)
![Page 21: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/21.jpg)
![Page 22: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/22.jpg)
Больше количество нетесктового контента
![Page 23: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/23.jpg)
![Page 24: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/24.jpg)
![Page 25: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/25.jpg)
![Page 26: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/26.jpg)
![Page 27: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/27.jpg)
![Page 28: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/28.jpg)
![Page 29: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/29.jpg)
![Page 30: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/30.jpg)
К чему мы пришли
!
〉Несколько платформ и контекстов
〉Простой визаульный язык
〉Большое количество нового контента
21
![Page 31: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/31.jpg)
Мы научились показывать разный контент в вебе
![Page 32: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/32.jpg)
Что дальше?
![Page 33: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/33.jpg)
Работа с пространством
![Page 34: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/34.jpg)
![Page 35: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/35.jpg)
![Page 36: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/36.jpg)
![Page 37: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/37.jpg)
![Page 38: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/38.jpg)
![Page 39: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/39.jpg)
![Page 40: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/40.jpg)
![Page 41: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/41.jpg)
![Page 42: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/42.jpg)
Интерактивные истории
![Page 43: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/43.jpg)
30
![Page 44: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/44.jpg)
30
![Page 45: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/45.jpg)
Персонализированный опыт
![Page 46: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/46.jpg)
![Page 47: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/47.jpg)
![Page 48: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/48.jpg)
![Page 49: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/49.jpg)
![Page 50: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/50.jpg)
![Page 51: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/51.jpg)
Что дальше?
〉Работа с пространством
〉Интерактивные истории
〉Персонализированный опыт
35
![Page 52: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/52.jpg)
Что делать?
![Page 53: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/53.jpg)
Технических ограничений в вебе становиться все меньше. Стоит затачивать инструменты.
![Page 54: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/54.jpg)
Живые прототипы
![Page 55: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/55.jpg)
![Page 56: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/56.jpg)
![Page 57: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/57.jpg)
![Page 58: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/58.jpg)
![Page 59: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/59.jpg)
Дизайн с каждым годом становится все более технической дисциплиной
![Page 60: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/60.jpg)
Инструменты:
〉Adobe reflow CC — инструмент для дизайна приложений в разных контекстах
〉Ionic — фреймворк для создания HTML5 приложений
〉Canvas, SVG:
D3.js, Processing.js, Snap.svg, Paper.js, Raphaël.js
42
![Page 61: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/61.jpg)
Инструменты:
〉WebGL:
Three.js, Babylon.js
〉framerjs — Invent, design and experiment with interaction
〉marvelapp — Free Prototyping for Everyone. No coding required.
〉POP — Prototype on Paper app
〉jetstrap.com — Not just a mock-up tool, Jetstrap is the premier interface-building tool for Bootstrap 3.
43
![Page 62: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/62.jpg)
Спасибо
![Page 63: Дизайн и разработка фронтенда](https://reader036.fdocuments.net/reader036/viewer/2022081401/5587886fd8b42a47318b4610/html5/thumbnails/63.jpg)
45
Вадим Пацев
Руководитель отдела разработки интерфейсов
Контакты
@basvasilich
basvasilich
+7 (909) 921 57 14