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

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

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

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

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

 Развитие “дизайнера” и доп. литература
СЕГОДНЯ В ПРОГРАММЕ Модуль 3. Принципы хороших интерфейсов Модуль 4. Advanced Mode (FYI) - Computer Science Center
Когда делаешь домашку про дизайн–концепт
СЕГОДНЯ В ПРОГРАММЕ Модуль 3. Принципы хороших интерфейсов Модуль 4. Advanced Mode (FYI) - Computer Science Center
НЕ ТОЛЬКО
МАЛЕНЬКИЕ
СЕГОДНЯ В ПРОГРАММЕ Модуль 3. Принципы хороших интерфейсов Модуль 4. Advanced Mode (FYI) - Computer Science Center
ПРОБЛЕМА
БОЛЬШИХ ПРОДУКТОВ
Исследование пользователей и рынка →

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

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

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

 Разработка

Слишком много артефактов для передачи знаний между командой
СЕГОДНЯ В ПРОГРАММЕ Модуль 3. Принципы хороших интерфейсов Модуль 4. Advanced Mode (FYI) - Computer Science Center
ДИЗАЙН
 =
 КОД
 =
 UI KIT
СЕГОДНЯ В ПРОГРАММЕ Модуль 3. Принципы хороших интерфейсов Модуль 4. Advanced Mode (FYI) - Computer Science Center
СЕГОДНЯ В ПРОГРАММЕ Модуль 3. Принципы хороших интерфейсов Модуль 4. Advanced Mode (FYI) - Computer Science Center
КОМПОНЕНТНЫЙ
ПОДХОД
• Создать базу MVC вьюшек или компонентов (например HTML, CSS, JS),
 чтобы уже из них собирать экраны/страницы

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

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

• Дизайнить не в вакууме, а из компонентов
СЕГОДНЯ В ПРОГРАММЕ Модуль 3. Принципы хороших интерфейсов Модуль 4. Advanced Mode (FYI) - Computer Science Center
Независим
от окружения
Хороший компонент
мы можем переиспользовать
на любой странице без
опасения, что он сломается
СЕГОДНЯ В ПРОГРАММЕ Модуль 3. Принципы хороших интерфейсов Модуль 4. Advanced Mode (FYI) - Computer Science Center
Atomic Design

 Atomic Design
СЕГОДНЯ В ПРОГРАММЕ Модуль 3. Принципы хороших интерфейсов Модуль 4. Advanced Mode (FYI) - Computer Science Center
ПУТЬ 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
Вы также можете почитать
СЛЕДУЮЩИЕ СЛАЙДЫ ... Отмена