SlideShare ist ein Scribd-Unternehmen logo
1 von 132
Downloaden Sie, um offline zu lesen
#frontend #b_
#opensource #ui
#designdepression
@posthtml @protein_io
@awinogradov
Антон
Виноградов
Дизайн.
Дизайн.
Глазами и руками разработчика.
Работа в команде
Работа в команде
Свои привычки
Свои привычки
Те самые эмоции
Те самые эмоции
дизайнер + разработчик
дизайнер + разработчик
дизайнер + дизайнер
дизайнер + разработчик
дизайнер + дизайнер
разработчик + разработчик
Трудности перевода
Трудности перевода
Методология
Методология
#smacss
Методология
#smacss
#atomic
Методология
#smacss
#atomic
#oocss
единые правила
единые правила
терминология
единые правила
терминология
документация
единые правила
терминология
документация
bem.info
единые правила
терминология
документация
bem.info
Синхронизация
Синхронизация
Один путь
Один путь
На рынке
На рынке
@zeplin_io
На рынке
@zeplin_io
@avocode
На рынке
@zeplin_io
@avocode
@sympli_io
Дизайн-
система
bit.ly/ds-arch
Дизайн-
система
Дизайн-
система
Universal Windows PlatformДизайн-
система
Universal Windows Platform
Google Material
Дизайн-
система
Universal Windows Platform
Google Material
Apple (iOS, OSX, TV)
Дизайн-
система
Universal Windows Platform
Google Material
Apple (iOS, OSX, TV)
IBM Design Language
Дизайн-
система
Universal Windows Platform
Google Material
Apple (iOS, OSX, TV)
IBM Design Language
Lightning by Saleforce
Дизайн-
система
Universal Windows Platform
Google Material
Apple (iOS, OSX, TV)
IBM Design Language
Lightning by Saleforce
Mailchimp patterns
Дизайн-
система
Уникальность
Уникальность
Ok, Siri…
Projects
Projects
Teams
Бесшовная интеграция
Init
Trigger
Init
Trigger
git push
Init
Trigger
git push
Init Combine
Trigger Configs
git push
Init Combine
Trigger Configs
git push
Automatic
& Manual
Init Combine
Trigger Configs
git push
Automatic
& Manual
Init Combine Parse
Trigger Configs
git push
Automatic
& Manual
ProteinTree
Init Combine Parse
Trigger Configs
git push
Automatic
& Manual
ProteinTree
Init Combine Parse
Universal
format
Trigger Configs
git push
Automatic
& Manual
ProteinTree
Init Combine Parse
Generate
Universal
format
Trigger Configs
git push
Automatic
& Manual
ProteinTree
Init
Integrations
Combine Parse
Generate
Universal
format
Trigger Configs
git push
Automatic
& Manual
ProteinTree
Init
Integrations
Markup
& Assets
Combine Parse
Generate
Universal
format
Trigger Configs
git push
Automatic
& Manual
ProteinTree
Init
Integrations
Markup
& Assets
Combine Parse
Generate Delivery
Universal
format
Trigger Configs
git push
Automatic
& Manual
ProteinTree
Init
Integrations Methods
Markup
& Assets
Combine Parse
Generate Delivery
Universal
format
Trigger Configs
git push
Automatic
& Manual
ProteinTree
Init
Integrations Methods
Markup
& Assets
Files/PRs/etc
Combine Parse
Generate Delivery
Universal
format
Trigger Configs
git push
Automatic
& Manual
ProteinTree
Init
Integrations Methods
Markup
& Assets
Files/PRs/etc
Combine Parse
Generate Delivery
Universal
format
Finish
Другие эмоции
Другие эмоции
Страх и ненависть
в прототипах
Страх и ненависть
в прототипах
импорт/экспорт из/в Sketch и Illustrator
импорт/экспорт из/в Sketch и Illustrator
смешанное окружение
импорт/экспорт из/в Sketch и Illustrator
смешанное окружение
редактор UI компонентов
импорт/экспорт из/в Sketch и Illustrator
смешанное окружение
редактор UI компонентов
автоподстановка UI
импорт/экспорт из/в Sketch и Illustrator
смешанное окружение
редактор UI компонентов
автоподстановка UI
конвертация из SVG в HTML&CSS
импорт/экспорт из/в Sketch и Illustrator
смешанное окружение
редактор UI компонентов
автоподстановка UI
конвертация из SVG в HTML&CSS
поддержка ES2015 и CoffeeScript
импорт/экспорт из/в Sketch и Illustrator
смешанное окружение
редактор UI компонентов
автоподстановка UI
конвертация из SVG в HTML&CSS
поддержка ES2015 и CoffeeScript
любые npm модули
импорт/экспорт из/в Sketch и Illustrator
смешанное окружение
редактор UI компонентов
автоподстановка UI
конвертация из SVG в HTML&CSS
поддержка ES2015 и CoffeeScript
любые npm модули
0$
d
Антон
Виноградов
winogradovaa@gmail.com
+7 (916) 263-73-79
@awinogradov
Антон
Виноградов
winogradovaa@gmail.com
+7 (916) 263-73-79
@awinogradov

Weitere ähnliche Inhalte

Was ist angesagt?

Жизнь в изоляции / Роман Дворнов (Avito)
Жизнь в изоляции / Роман Дворнов (Avito)Жизнь в изоляции / Роман Дворнов (Avito)
Жизнь в изоляции / Роман Дворнов (Avito)Ontico
 
Мини-лекция о веб-приложениях
Мини-лекция о веб-приложенияхМини-лекция о веб-приложениях
Мини-лекция о веб-приложенияхAlexander Babich
 
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Ontico
 
Виталий Харисов - Общий цикл разработки
Виталий Харисов - Общий цикл разработкиВиталий Харисов - Общий цикл разработки
Виталий Харисов - Общий цикл разработкиYandex
 
Общие технологии между несколькими проектами в Яндексе
Общие технологии между несколькими проектами в ЯндексеОбщие технологии между несколькими проектами в Яндексе
Общие технологии между несколькими проектами в ЯндексеYandex
 
История про OpenSource в Яндексе
История про OpenSource в ЯндексеИстория про OpenSource в Яндексе
История про OpenSource в ЯндексеYandex
 
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...Ontico
 
UI Kit and design developig workflow
UI Kit and design developig workflowUI Kit and design developig workflow
UI Kit and design developig workflowArtem Molokov
 
Будущее шаблонизаторов
Будущее шаблонизаторовБудущее шаблонизаторов
Будущее шаблонизаторовAlexey Ivanov
 
YouLead Tomsk 2012 — Constantin Kaplinsky
YouLead Tomsk 2012 — Constantin KaplinskyYouLead Tomsk 2012 — Constantin Kaplinsky
YouLead Tomsk 2012 — Constantin KaplinskyConstantin Kaplinsky
 
"IntelliJ IDEA и Android Studio для Android-разработчиков". Филипп Торчинский...
"IntelliJ IDEA и Android Studio для Android-разработчиков". Филипп Торчинский..."IntelliJ IDEA и Android Studio для Android-разработчиков". Филипп Торчинский...
"IntelliJ IDEA и Android Studio для Android-разработчиков". Филипп Торчинский...Yandex
 
От БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектовОт БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектовCodeFest
 
SECON'2016. Бартунов Олег, Карьера в Open Source
SECON'2016. Бартунов Олег, Карьера в Open SourceSECON'2016. Бартунов Олег, Карьера в Open Source
SECON'2016. Бартунов Олег, Карьера в Open SourceSECON
 
О пользе Open Source
О пользе Open SourceО пользе Open Source
О пользе Open SourceAnton Konev
 

Was ist angesagt? (20)

Жизнь в изоляции / Роман Дворнов (Avito)
Жизнь в изоляции / Роман Дворнов (Avito)Жизнь в изоляции / Роман Дворнов (Avito)
Жизнь в изоляции / Роман Дворнов (Avito)
 
Мини-лекция о веб-приложениях
Мини-лекция о веб-приложенияхМини-лекция о веб-приложениях
Мини-лекция о веб-приложениях
 
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
 
Виталий Харисов - Общий цикл разработки
Виталий Харисов - Общий цикл разработкиВиталий Харисов - Общий цикл разработки
Виталий Харисов - Общий цикл разработки
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Общие технологии между несколькими проектами в Яндексе
Общие технологии между несколькими проектами в ЯндексеОбщие технологии между несколькими проектами в Яндексе
Общие технологии между несколькими проектами в Яндексе
 
История про OpenSource в Яндексе
История про OpenSource в ЯндексеИстория про OpenSource в Яндексе
История про OpenSource в Яндексе
 
WUD2010
WUD2010WUD2010
WUD2010
 
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
 
Progopedia - OSDN
Progopedia - OSDNProgopedia - OSDN
Progopedia - OSDN
 
UI Kit and design developig workflow
UI Kit and design developig workflowUI Kit and design developig workflow
UI Kit and design developig workflow
 
Будущее шаблонизаторов
Будущее шаблонизаторовБудущее шаблонизаторов
Будущее шаблонизаторов
 
83
8383
83
 
YouLead Tomsk 2012 — Constantin Kaplinsky
YouLead Tomsk 2012 — Constantin KaplinskyYouLead Tomsk 2012 — Constantin Kaplinsky
YouLead Tomsk 2012 — Constantin Kaplinsky
 
Ide
IdeIde
Ide
 
"IntelliJ IDEA и Android Studio для Android-разработчиков". Филипп Торчинский...
"IntelliJ IDEA и Android Studio для Android-разработчиков". Филипп Торчинский..."IntelliJ IDEA и Android Studio для Android-разработчиков". Филипп Торчинский...
"IntelliJ IDEA и Android Studio для Android-разработчиков". Филипп Торчинский...
 
От БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектовОт БЭМ-методологии до Мануфактуры проектов
От БЭМ-методологии до Мануфактуры проектов
 
SECON'2016. Бартунов Олег, Карьера в Open Source
SECON'2016. Бартунов Олег, Карьера в Open SourceSECON'2016. Бартунов Олег, Карьера в Open Source
SECON'2016. Бартунов Олег, Карьера в Open Source
 
О пользе Open Source
О пользе Open SourceО пользе Open Source
О пользе Open Source
 
02 docsvision
02 docsvision02 docsvision
02 docsvision
 

Ähnlich wie Дизайн. Глазами и руками разработчика

Secr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.jsSecr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.jsKirill Danilov
 
Эмоции в разработки. Спасаем продуктивность
Эмоции в разработки. Спасаем продуктивностьЭмоции в разработки. Спасаем продуктивность
Эмоции в разработки. Спасаем продуктивностьEgor Malkevich
 
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения МалковаДизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения МалковаCocoaHeads
 
5 правил успешной разработки приложений для бренда
5 правил успешной разработки приложений для бренда 5 правил успешной разработки приложений для бренда
5 правил успешной разработки приложений для бренда Heads&Hands
 
Организация эффективных процессов
Организация эффективных процессовОрганизация эффективных процессов
Организация эффективных процессовVladimir Melnikov
 
ТПСЭК 2013 Лекция 01 "Тренды"
ТПСЭК 2013 Лекция 01 "Тренды"ТПСЭК 2013 Лекция 01 "Тренды"
ТПСЭК 2013 Лекция 01 "Тренды"Олег Гудаев
 
Копирайтер? Fuck yeah!
Копирайтер? Fuck yeah!Копирайтер? Fuck yeah!
Копирайтер? Fuck yeah!Polina Besedina
 
А.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектированияА.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектированияAnatoly Levenchuk
 
Tech Talks @NSU: Проходим тест Джоэла
Tech Talks @NSU: Проходим тест ДжоэлаTech Talks @NSU: Проходим тест Джоэла
Tech Talks @NSU: Проходим тест ДжоэлаTech Talks @NSU
 
Итоги серии HackDay в 2014-м году
Итоги серии HackDay в 2014-м годуИтоги серии HackDay в 2014-м году
Итоги серии HackDay в 2014-м годуMikhail Kulakov
 
Проходим тест Джоэла
Проходим тест ДжоэлаПроходим тест Джоэла
Проходим тест Джоэла0leGG
 
"Без, платно: виды монетизации через Freemium в мобильной индустрии", Леонид ...
"Без, платно: виды монетизации через Freemium в мобильной индустрии", Леонид ..."Без, платно: виды монетизации через Freemium в мобильной индустрии", Леонид ...
"Без, платно: виды монетизации через Freemium в мобильной индустрии", Леонид ...Julia Lebedeva
 
holos_ITMO_BootCamp_Generative_SPB_final.pdf
holos_ITMO_BootCamp_Generative_SPB_final.pdfholos_ITMO_BootCamp_Generative_SPB_final.pdf
holos_ITMO_BootCamp_Generative_SPB_final.pdfssuser5b17ed1
 
Unity: "Очевидное-невероятное” или хитрости разработки на Unity Android
Unity: "Очевидное-невероятное” или хитрости разработки на Unity AndroidUnity: "Очевидное-невероятное” или хитрости разработки на Unity Android
Unity: "Очевидное-невероятное” или хитрости разработки на Unity AndroidDevGAMM Conference
 
Интерактивные прототипы в живом коде
Интерактивные прототипы в живом кодеИнтерактивные прототипы в живом коде
Интерактивные прототипы в живом кодеBeaversBrothers
 
Лингвистический тренажер. PoliglotPro
Лингвистический тренажер. PoliglotProЛингвистический тренажер. PoliglotPro
Лингвистический тренажер. PoliglotProatypus
 
Николай Мамадаев — Процесс создания дизайна мобильного приложения
Николай Мамадаев — Процесс создания дизайна мобильного приложения Николай Мамадаев — Процесс создания дизайна мобильного приложения
Николай Мамадаев — Процесс создания дизайна мобильного приложения Dev_Party
 
Personal robot sk ru
Personal robot sk ruPersonal robot sk ru
Personal robot sk ruAlexander Gan
 

Ähnlich wie Дизайн. Глазами и руками разработчика (20)

Secr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.jsSecr15 разработка кросс платформенных десктоп приложений nw.js
Secr15 разработка кросс платформенных десктоп приложений nw.js
 
Эмоции в разработки. Спасаем продуктивность
Эмоции в разработки. Спасаем продуктивностьЭмоции в разработки. Спасаем продуктивность
Эмоции в разработки. Спасаем продуктивность
 
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения МалковаДизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
 
5 правил успешной разработки приложений для бренда
5 правил успешной разработки приложений для бренда 5 правил успешной разработки приложений для бренда
5 правил успешной разработки приложений для бренда
 
Организация эффективных процессов
Организация эффективных процессовОрганизация эффективных процессов
Организация эффективных процессов
 
ТПСЭК 2013 Лекция 01 "Тренды"
ТПСЭК 2013 Лекция 01 "Тренды"ТПСЭК 2013 Лекция 01 "Тренды"
ТПСЭК 2013 Лекция 01 "Тренды"
 
Копирайтер? Fuck yeah!
Копирайтер? Fuck yeah!Копирайтер? Fuck yeah!
Копирайтер? Fuck yeah!
 
А.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектированияА.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектирования
 
Tech Talks @NSU: Проходим тест Джоэла
Tech Talks @NSU: Проходим тест ДжоэлаTech Talks @NSU: Проходим тест Джоэла
Tech Talks @NSU: Проходим тест Джоэла
 
Итоги серии HackDay в 2014-м году
Итоги серии HackDay в 2014-м годуИтоги серии HackDay в 2014-м году
Итоги серии HackDay в 2014-м году
 
Обзор курса
Обзор курсаОбзор курса
Обзор курса
 
Embarcadero strategy
Embarcadero strategyEmbarcadero strategy
Embarcadero strategy
 
Проходим тест Джоэла
Проходим тест ДжоэлаПроходим тест Джоэла
Проходим тест Джоэла
 
"Без, платно: виды монетизации через Freemium в мобильной индустрии", Леонид ...
"Без, платно: виды монетизации через Freemium в мобильной индустрии", Леонид ..."Без, платно: виды монетизации через Freemium в мобильной индустрии", Леонид ...
"Без, платно: виды монетизации через Freemium в мобильной индустрии", Леонид ...
 
holos_ITMO_BootCamp_Generative_SPB_final.pdf
holos_ITMO_BootCamp_Generative_SPB_final.pdfholos_ITMO_BootCamp_Generative_SPB_final.pdf
holos_ITMO_BootCamp_Generative_SPB_final.pdf
 
Unity: "Очевидное-невероятное” или хитрости разработки на Unity Android
Unity: "Очевидное-невероятное” или хитрости разработки на Unity AndroidUnity: "Очевидное-невероятное” или хитрости разработки на Unity Android
Unity: "Очевидное-невероятное” или хитрости разработки на Unity Android
 
Интерактивные прототипы в живом коде
Интерактивные прототипы в живом кодеИнтерактивные прототипы в живом коде
Интерактивные прототипы в живом коде
 
Лингвистический тренажер. PoliglotPro
Лингвистический тренажер. PoliglotProЛингвистический тренажер. PoliglotPro
Лингвистический тренажер. PoliglotPro
 
Николай Мамадаев — Процесс создания дизайна мобильного приложения
Николай Мамадаев — Процесс создания дизайна мобильного приложения Николай Мамадаев — Процесс создания дизайна мобильного приложения
Николай Мамадаев — Процесс создания дизайна мобильного приложения
 
Personal robot sk ru
Personal robot sk ruPersonal robot sk ru
Personal robot sk ru
 

Дизайн. Глазами и руками разработчика