СЕГОДНЯ В ПРОГРАММЕ Модуль 3. Принципы хороших интерфейсов Модуль 4. Advanced Mode (FYI) - Computer Science Center

СЕГОДНЯ
В ПРОГРАММЕ
Модуль 3. Принципы хороших интерфейсов

 Дизайн и код. Дизайн-системы.
 Atomic design и компонентный подход

Модуль 4. Advanced Mode (FYI)

 Инструментарий создания презентаций.
 Презентация интерфейсов.

 Развитие “дизайнера” и доп. литература

Когда делаешь домашку про дизайн–концепт

НЕ ТОЛЬКО
МАЛЕНЬКИЕ

ПРОБЛЕМА
БОЛЬШИХ ПРОДУКТОВ
Исследование пользователей и рынка →

 Сценарии, функциональность и информационная архитектура →

 Скетчи и прототипы →

 Дизайн-макеты и стайлгайды →

 Разработка

Слишком много артефактов для передачи знаний между командой

ДИЗАЙН
 =
 КОД
 =
 UI KIT

КОМПОНЕНТНЫЙ
ПОДХОД
• Создать базу MVC вьюшек или компонентов (например HTML, CSS, JS),
 чтобы уже из них собирать экраны/страницы

• Компонент — это готовый код с определенным визуальным стилем,
 логикой работы и ожидаемым взаимодействием пользователя с ним

• Компонент наследуется, переиспользуется, состоит из элементов.
 Получаем некую иерархию компонентов

• Дизайнить не в вакууме, а из компонентов

Независим
от окружения
Хороший компонент
мы можем переиспользовать
на любой странице без
опасения, что он сломается

Atomic Design

 Atomic Design

ПУТЬ 1. БЕРЕМ
ГОТОВЫЙ FRAMEWORK
• Bootstrap

• Material Theming

• Любой другой сервис

 • Github, Paypal, Dropbox, Twitter, Trello, Adobe, …

 • IBM, BBC, GOV.UK, The Guardian, …

• Лучше искать что-то менее попсовое

ПУТЬ 2. СОЗДАЕМ
СВОЙ FRAMEWORK
• Описываем правила в дизайне:
 Сетки, контейнеры, цвета, типографика.
 Самые популярные стандартные блоки +
 Все интерактивные состояния и модификации для
 нестандартных элементов интерфейса

• Нанимаем разработчика, который будет поддерживать
 этот фреймворк (если дизайнер не умеет кодить)

 Code of America UI Kit

Сетка

Цвета

Цвета = Константы

Типографика

Pixel Density

Адаптивная типографика = Константы

Стандартные компоненты

Сложные компоненты

 →

→

Старый Youtube

Обновленный Youtube

 Youtube обновился

“Вчерашний” Youtube

Помогает разработчикам переводить дизайн в код

 Zeplin io

Валидация. Через страдания и боль

Но когда все готово – это кайф

Интерфейсы собираются без дизайнера

ЗАЧЕТ
правила игры не поменяются

ОФОРМЛЕНИЕ
КЕЙСА–ПРЕЗЕНТАЦИИ
• В первую очередь нужно понять, для кого вы пишете:
 для сообщества-дизайнеров, для работодателя, для себя,
 для потенциальных клиентов

• А какие у них цели? Что они хотят узнать? 
 Отсюда: что им интересно, какой их уровень погруженности

• В нашем случае – вы и есть аудитория.
 Рефлексия: “Что было бы интересно вам узнать?”

Интересна внутренняя
кухня и как все под капотом
Все не знают, как выстроить
процесс, какие тулы выбрать и
какие плюшки в них есть.
Интересно также перенять
классные решения или просто
вдохновиться дизайном

 Это хороший кейс

Я собираю кейс
по каждому проекту

ПОРТФОЛИО
• Большинству из вас не понадобится “дизайнерское” портфолио.
 Однако добавить в свое резюме проект с хорошим GUI – показать
 свою разносторонность и наличие навыков

ПОРТФОЛИО
• Крайность 1: красивые картинки с айфоном в изометрии

• Крайность 2: длинные подробные рассказы про процесс работы над
 продуктом, в которых упоминаются все известные автору баззворды
 и термины и с фоточками доски со стикерами и схемами

Кто ваш “пользователь”? 

• Первое ни о чем не говорит, кроме визуальной части для дизайнеров

• Второе развивает комьюнити, но работодатель это читать не будет

• Хорошо думать, что ваше портфолио изучается не дольше 2 минут.
 У вашего портфолио должна быть мобильная версия.

 
Кейс 1 Кейс 2

ПРОБЛЕМЫ
ПОРТФОЛИО
• Фундаментальная проблема большинства портфолио дизайнеров,
 что многие собирают в портфолио финальные картинки-результаты,
 и не раскрывают процесс работы, который привёл к этому результату

• Какие решения принимал дизайнер, какие инструменты использовал,
 в чём ошибался, как в итоге решил проблему, и так далее. Такие
 «пути» решения дизайн-проблем в портфолио показывают дизайнера

• В конечном счете все берут себе сотрудника за мозги или за навык
 Ты либо концептуальный мыслитель, либо руки другого человека

Показывают внутреннюю кухню “as is"

 Anton & Irene дизайн-процесс Этот кейс

Возьмем за идеал – Anton & Irene

 Идеал Case Study

Возьмем за идеал – Anton & Irene

 Идеал Case Study 2

3 СОСТАВЛЯЮЩИХ
ПРЕЗЕНТАЦИИ
• Содержание. О чем вообще вы собираетесь говорить?
 Насколько это интересно? Может ли это стать интересным постом?
 Было ли все понятно или надо пересматривать/разбираться?

• Визуальная часть — слайды, иллюстрации.
 Можно и без слайдов (как частно на TED). Это намного сложнее.
 Нам, дизайнерам, с этой частью гораздо проще, чем остальным.

• Собственно, живое выступление.
 Как вы себя ведёте на сцене, как двигаетесь, как говорите.

Мотиватор или Информатор

ВАША ПРЕЗЕНТАЦИЯ

 Внимание на дизайн-процесс и артефакты

ОФОРМЛЕНИЕ
КЕЙСА
• Соберите кейс на Readymag или в Keynote
 (на редимаге 10 страницы бесплатно, поэтому делайте их со скроллом)

• Можно верстать картиночки в любом графическом редакторе
 Хоть Sketch или Adobe XD

• Но лучше с видео и gif-анимациями, поэтому просто картиночки sucks

• Презентация должна быть аккуратной, чтобы ее хотелось пересмотреть
 При этом иметь какой-то текст с основными идеями/тезисами

Используйте сетку

Посмотрите красивые редимаги

 Лучшее 2016 Repponen

Почитайте про граф. дизайн

 Школа Readymag

Можно взять шаблон

 Шаблоны

ПРЕЗЕНТАЦИЯ
НА ЗАЧЕТЕ
• На зачете выступить с презентацией–рассказом ~5–10 минут.
 Рассказ о проекте в формате кейса портфолио.
 О проекте. Описание ситуации, с чего начинали, ограничения.
 Как проходили все этапы. С картинками–примерами что сделано.
 Какие были идеи, какие решения были приняты, какие отброшены,
 интересные моменты, сложности (боль, страдание, отчаяние).

• Рассказ о процессе, как вы побыли дизайнером
 Поделитесь своим уникальным опытом с другими

• Качество презентации не оценивается, но постарайтесь хорошо,
 чтобы маме было не стыдно показать

Развитие
дизайнера

 Почитайте – это не только про дизайн

ПРАВИЛО
 Научиться дизайну, можно только через усидчивость

 «Прокачать уровень можно мозгами, читать книжки, думать.
Но технику только в тупую наработкой. «Правило 10 000 часов».
 Рисуешь-рисуешь и становишься самым крутым.»

КАК НАБИРАТЬСЯ
ОПЫТА?
• Воруйте все, что лежит очень хорошо.
 Новые – только технологии, к которым нужно применять то,
 чему мы научились со старыми технологиями

• Находиться в современном контексте.
 Прогнозировать тренды развития

• Трендспоттинг – посмотрел 100 картинок, понял что нужно.
 Для хорошего дизайнера просмотр профильных ресурсов —
 ежедневная рутина, такая же обязанность, как рисование макетов

• Арт-директор отличается от начинающего дизайнера не только тем,
 что он сделал сотни сайтов, но и тем, что арт-директор элементарно
 много видел. Он видел все.

Подписаться
на референсы.
Насмотренность

КАК РАЗВИВАТЬСЯ?
• Дизайн – мультидисциплинарная дисциплина.
 Интересуйтесь что нового в архитектуре, интерьерах, моде, культуре,
 брендинге, иллюстрации, фотографии, видео, мобильных приложениях

• Механизм очень простой — встречаешь хороший сайт, находишь ссылку
 на студию, переходишь и смотришь работы другие работы.

• Получать новый опыт из задач, за которые раньше боялся браться

• Самокритика и критическое мышление (нравится/не нравится).
 Как хороший математик-исследователь ставить всю науку под сомнение

• Системное мышление и системный подход к решению задач

• Развитие умения слышать и думать

Например, посмотреть на гигантов

 High Resolution

ЧТО ПОСМОТРЕТЬ (1)
• Бюро Горбунова (попахивает религией)
 Почитать Книги
 Почитать Советы (только начинать со старых)
 Поучиться в Школе (только не вступать в их карго-культ)

• Яндекс.
 Школа дизайна 2015 (только не думайте что Яндексе лучшие дизайнеры)
 Школа мобильного дизайна 2016 (особенно мобильные)

• Что-то еще? MailRu Coursera Да смысла нет

• Конференции (потусить).
 Дизайн выходные Дизайн Prosmotr (Россия для бедных)
 Helsinki Design Week (что поближе)
 offf.barcelona (для богатых, сам хочу)

ЧТО ПОСМОТРЕТЬ (2)
• Следить за дизайном в сервисах, которые вам нравятся.
 Мой топ-5:
 Uber.design (еще и AI Labs) Airbnb.design Atlassian.design Spotify Notion

• Подписаться на крутых дизайнеров
 Anton Repponen
 Claudio Guglieri
 Design Director @Spotify

• Подписаться на крутые студии/агентства
 Anton & Irene
 Sagmeister & Walsh
 Wolff Olins
 Fantasy

ЧТО ПОСМОТРЕТЬ (3)
• Почитать о UX и дизайне (если можно вообще об этом читать.
 ИМХО – вариант только набить шишки и попробовать что-то на практике)
 Sidebar
 Дайджест Ветрова (месячный дайджест – ок)
 NNGroup (аккуратно – бывает старовато)
 @uxdesigncc (аккуратно – много букв)
 UXPlanet (аккуратно – много воды)

• Про брендинг
 BrandNew
 BPO

• Послушать подкасты про индустрию
 Design Better

ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д
ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д
ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д
ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д
ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д
ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д
ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д
ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д
ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д
ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д
ДИЗАЙНИТЬ, ДИЗАЙНИТЬ, Д

Computer Vision

 Mechanic & Kinematics

 Machine Learning

 Embedded systems (C++, Java)

 Data Science (Engineering)

 VR / CAD / Unity Modeling

Web / Desktop software development
 (Frontend, Backend, QA)

Image Recognition

 Machine Learning & NN

Recommendation Systems

 Unstructured Data Mining

Algorithms & Data Structures

 Web / Mobile development
 (React, Python)

ВСЕМ СПАСИБО!
 Я — ВСЕ.

 Не скучайте, пишите.
 Ваш @mbryksin