В 2017 году разработчики говорили о нейросети, которая верстает код по картинке — и все думали, что верстальщики больше не нужны. Чуть раньше вышла программа TheGrid, которая генерирует модули сайта — и пошел слух, что дизайнеры останутся без работы.

Работа нейросетевых программ за несколько лет их существования не достигла совершенства, и часть задач все еще им не под силу. Пока рано говорить о том, что машины вытеснят IT-специалистов, но уже сейчас искусственный интеллект можно использовать, чтобы ускорять выполнение задач и делегировать их. Рассказываем об инструментах-помощниках на основе нейросетей, которые пригодятся дизайнеру и разработчику.

Шрифты

Fontmap — интерактивная карта шрифтов, созданная ИИ. Разработчик сайта Кевин Хо вдохновился исследователем из Стенфорда, который с помощью нейросети организовал тысячи фотографий на одной карте. В блоге Кевин пишет, что эксперимент с фотографиями показал, насколько полезными стали нейросети в работе с визуальной информацией. Программист задумался, как применить машинное обучение к дизайнерской рутине, и нашел решение — выбор шрифтовых сочетаний.

По мнению Кевина, для новых проектов дизайнеры берут шрифты, которые уже использовали, и выбирают из них по простым категориям — гротеск или антиква. Но в них большой спектр различий — в макете один шрифт без засечек может не сочетаться с другим.

Тогда Кевин совместно с Google Creative Lab разработал Fontmap. Алгоритм машинного обучения сортирует шрифты по визуальным характеристикам и подбирает сочетающиеся. Сейчас в базе Fontmap 750 шрифтов.

Шрифты, которые нейронные сети Fontmap выбрали для использования с Roboto

René — программа, которая поиграет со шрифтами за вас. Ее создал разработчик Джон Голд из Airbnb и TheGrid. Работа René построена на машинном обучении — с каждым новым подбором программа учится понимать принципы сочетания шрифтов. René помогает дизайнерам и разработчикам экономить время и составлять подборки шрифтов для разных проектов.

Джон Голд настраивает базовые характеристики для подбора шрифтов

Разработчик поддерживает идею, что нейросети — это инструменты-помощники, и высказывается против автоматизированного подхода. По мнению разработчика, René будет полезна только для дизайнера-профессионала, который будет «рулить» программой.

Логотипы

Logojoy — сайт, генерирующий логотипы. Разработчики системы считают, что сегодня создать качественный логотип можно быстро и без дизайн-студий. Полезное действие Logojoy — дать владельцам бизнеса больше свободы в брендинге.

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

Варианты логотипов, которые предложила нам система. Не ДжонФедор, но начинающей компании пригодится

Посмотреть логотипы можно бесплатно, но за скачивание в хорошем качестве придется заплатить 20 $. Полный пакет с логотипом в растре и векторе, водяной знак, авторские права и фирменный стиль стоят 65 $. Те, кто не уверен в предложенных вариантах, могут сделать скриншот понравившихся и показать дизайнеру, который на их основе сделает логотип.

Для российских пользователей 65 $ за логотип — не совсем бюджетный вариант. Отечественный аналог Logojoy — «Турболого» — делает то же самое, но дешевле. Логотип в низком разрешении стоит 690 рублей, одиннадцать файлов с логотипом, включая версию для печати, — 990 рублей, а за бизнес-пакет с дополнительным набором для соцсетей, фирменной документацией, водяным знаком и фавиконкой придется заплатить 2290 рублей. «Турболого» работает на той же системе машинного обучения и нейронных сетей, что и Logojoy.

Лучшие логотипы за апрель 2018 по версии разработчиков «Турболого»

Популярные логотипы, истории знаменитых брендингов, лайфхаки для дизайнеров, разработчиков и владельцев бизнеса компания «Турболого» публикует в блоге.

Иллюстрации

Autodraw — инструмент для рисования от Google. В 2017 году компания выпустила нейросетевую программу, которая превращает набросок от руки в полноценную иллюстрацию. Разработка построена на алгоритме, который анализирует рисунок, распознает тип изображения и подбирает похожие клип-арт иллюстрации. Пока нейросеть работает не идеально — Autodraw выдает несколько похожих картинок, из которых пользователь выбирает наиболее подходящую. Иногда программа ошибается, но чем больше вы пользуетесь инструментом, тем быстрее нейросеть учится.

Autodraw пригодится для рисования иконок, логотипов, баннеров, афиш и быстрого прототипирования.

Пример работы Autodraw от The Verge

ProjectQuick3D — инструмент для создания 3D-моделей от Adobe. Программа работает по схожему с Autodraw алгоритму: пользователь рисует быстрый скетч, а программа с помощью машинного обучения находит в библиотеке Adobe Stock нужную 3D-модель. Нейросеть обучается — чем больше пользователей рисуют, тем точнее работает алгоритм. Разработчики представили проект на конференции Adobe MAX как инструмент для начинающих дизайнеров, которые прежде не работали с 3D.

Разработчики Adobe демонстрируют работу программы на конференции Adobe MAX

Фото

Let’s Enhance — сервис, улучшающий фотографии с низким разрешением. Его основатель Александр Савсуненко давно занимается машинным обучением, и после неудачного проекта по производству ДНК-тестов Titanovo решился на новый стартап. Идею для сервиса Александру подсказал отец — он продает камины, сауны и аксессуары для них, и товар возит из разных стран, в том числе из Китая. О качестве фотографий китайских товаров известно по AliExpress: большинство снимков — низкого разрешения, размещать на сайте их стыдно.

Тогда Александр Савсуненко совместно с разработчиком Владиславом Пранскевичусом создали Let’s Enhance. Сервис убирает jpeg-артефакты с фотографий, увеличивает разрешение в 4 раза, восстанавливает детали и увеличивает четкость снимков.

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

Работает система на основе трех нейронных сетей, которые учатся улучшать фотографии. Технология Super-resolution обучается на базе из сотен тысяч фотографий низкого и высокого качества. Нейросеть обрабатывает два снимка, восстанавливает детали и сохраняет четкие линии, опираясь на знание типовых объектов и текстур. Вторая нейросеть — Boring — увеличивает четкость изображения. Третья — Magic — дорисовывает детали, которых нет на фотографии, чтобы сделать снимок более реалистичным.

Так работает нейросеть Boring, которая лучше всего восстанавливает текст, логотипы и комиксы. «Boring is not so boring» — говорит Александр Савсуненко

Сначала сервис был бесплатным, и пользователям разрешали обрабатывать любое количество фотографий. Сейчас сайт работает по подписке — без нее можно обработать только пять изображений. Для покупки доступны пакеты на 20, 50, 120 фотографий или подписка на месяц или год. Обработка двадцати изображений стоит 5 $, месячная подписка с возможностью обработать до тысячи фото — 7 $, годовая — 52 $.

Еще одна нейросеть для улучшения фотографий — программа от NVIDIA. Исследователи компании анонсировали технологию как алгоритм, который «может исправить зернистые фотографии одним взглядом».

Обучается NVIDIA схоже с Let’s Enhance — сравнивает фотографии с шумом и без. Нейросеть умеет удалять артефакты, шум, зерно. Создатели NVIDIA считают, что технологию уже можно использовать для улучшения изображений МРТ, а в будущем  — применять для визуализации в медицине.

Исследователи NVIDIA в ролике об ИИ демонстрируют работу технологии

Дизайн

uKit AI — программа для редизайна сайтов. Чтобы выяснить, насколько он актуален для старых веб-ресурсов малого бизнеса, разработчики сервиса серьезно вложились в исследование. Оно показало, что частые проблемы сайтов и их владельцев — неадаптивность, устаревший дизайн и низкая конверсия. Предприниматели не могли предсказать, что мобильный трафик превысит десктопный, и многие веб-ресурсы работают на устаревшем Flash. При этом владельцы понимают, что технологии и тренды меняются, и видят, что сайты устарели, но откладывают обновление из-за нехватки денег и времени.

Решением для быстрого редизайна стал uKit AI — это сервис на основе SaaS+AI, сочетающий конструктор сайтов и машинное обучение. Система перекомпоновывает контент с учетом современных требований к дизайну и формирует новые версии страниц. uKit AI работает так: технология распознает контент и структуру старого сайта, алгоритм перестраивает и переоформляет контент, а нейросеть оценивает результат и выкатывает новую адаптивную версию. Лучший вариант система выбирает с помощью нейросети WebScore AI, которая не только оценивает сайт визуально, но и проверяет код на соответствие современным требованиям. Пока uKit AI дорабатывается, но уже можно записаться на бета-тестирование.

На главной странице uKit AI — «шторка», которая демонстрирует редизайн сайта с помощью этой разработки

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

Перевод

Thing Translator — инструмент, который помогает учить иностранный язык с помощью фото. Технологию разработали совместно с Google Creative Lab в рамках проекта AI Experiments. Это простые эксперименты с машинным обучением, которые помогают разработчикам всего мира узнать о возможностях ИИ.

Thing Translator помогает учить новые слова на иностранном языке без учебников, словарей и карточек. Нейронная сеть построена на Cloud Vision API и переводчике Translate API. Технологии распознают форму предмета, выбирают несколько совпадений и переводят слова. Наведите камеру на предмет, сфотографируйте его — и программа выдаст его название на любом языке и даже воспроизведет слово голосом.

За 4 секунды Thing Translator узнает предмет, подбирает совпадения, выдает название на английском и переводит на другой иностранный язык. Для русскоговорящих пользователей — двойной профит

Сервис иногда не понимает, какой предмет перед камерой, долго думает, прежде чем выдать совпадения, ошибается в выборе. Но чем чаще люди пользуются сайтом, тем больше Thing Translator совершенствуется, как и любой инструмент машинного обучения.

Стив Джобс говорил, что компьютеры — велосипеды для ума. Нейросетевые инструменты и машинное обучение соответствуют этой метафоре уже сейчас, пусть и работают пока не идеально.

Посмотрите еще несколько программ и сервисов на основе ИИ, которые пригодятся в работе:

10 программ Adobe, которые работают на машинном обучении

Проекты AI Experiments совместно с Google

Итан Маркотт «Отзывчивый веб-дизайн»

Дизайнер-разработчик Итан Маркотт рассказывает, как создать удобный веб-ресурс современного формата. Он призывает учитывать все виды устройств и показывает, как адаптировать сайт под каждый из них, дает готовые решения и коды.

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

Аарон Уолтер «Эмоциональный веб-дизайн»

Автор книги — дизайнер в области пользовательского опыта, сотрудник сервиса рассылок MailChimp. Он объясняет, почему шаблонное мышление вредно, а однообразный дизайн, который предлагают пользователю, не продает. Уолтер рассказывает, как важно, чтобы сайт вызывал у посетителя положительные эмоции, и показывает, как этого достичь.

Если хотите, чтобы ваши работы вызывали удивление и восторг, обязательно прочтите это издание.

Майк Монтейро «Дизайн — это работа»

Опытные веб-дизайнеры, глядя на заголовок, кивают головой. Новичкам с помощью этой книги предстоит уяснить, что дизайн, как практически любая творческая профессия, это не коктейль из творчества и вдохновения. В первую очередь это тяжелый труд, дисциплина и ответственность.

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

Скотт Макклауд «Понимание комикса»

О природе комикса повествуют в виде комикса, и это уже интересно. Но главное, что в книге доходчиво рассказывают про визуальные коммуникации. Применить эти знания можно в любой работе, касающейся изображений, в том числе в веб-разработке и дизайне интерфейсов.

Майкл Микалко «Рисовый штурм»

Автор книги, специалист по креативности с мировым именем, предлагает десятки способов, как развить творческие способности и научиться мыслить нестандартно.

Микалко не дает инструкцию, как стать успешнее в отраслях, где нужно воображение. Он просто приводит инструменты, с помощью которых можно понять этот механизм. Это головоломки, игры, научно обоснованные методы.

Уитни Кесенбери, Кевин Брокс «Сторителлинг в проектировании интерфейсов»

Нельзя недооценивать силу текста при создании сайтов — и эта книга рассказывает, почему. А еще она учит, как с помощью историй понять целевую аудиторию и предложить сайт, который не оставит пользователей равнодушными.

Подзаголовок книги — «Как создавать истории, улучшающие дизайн». Она пригодится всем, кто занимается интерфейсами и пользовательским взаимодействием.

Джеф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»

Книга не новая, но все еще интересная. Новичкам прочесть ее будет особенно полезно, так как она раскрывает механизмы процессов, многие из которых уже применяются дизайнерами «на автомате».

Джеф Раскин — создатель проекта Apple Macintosh — знает, о чем говорит, когда рассказывает об эффективном подходе к дизайну.

Алан Купер «Об интерфейсе»

Первое издание книги вышло в 1995 году, но ее содержание периодически обновляется. В ней учтен опыт ведущих мировых экспертов, и значительная часть содержания — про принципы и шаблоны проектирования взаимодействия с пользователями. Учтены все виды платформ, на которых отображаются сайты.

Алан Купер «Психбольница в руках пациентов»

Нас окружает безумный мир современных интерфейсов, и отец Visual Basic, дизайнер и программист Алан Купер расскажет, почему все так плохо. Останется чуть-чуть подумать, чтобы понять, как сделать хорошо.

Голден Кришна «Хороший интерфейс — невидимый интерфейс»

Благодаря манере повествования автора книга читается легко, как зафиксированное на бумаге стендап-выступление. Голден Кришна с юмором, но достаточно остро критикует все, что отображается на наших экранах, и заставляет мыслить глобальнее.

Виктор Брет — Magic Ink

Бывший сотрудник Apple в эссе рассказывает, что дизайн интерфейсов имеет три главных функции: обучение, общение, самовыражение. А интерактивность — зло.

Пол Рэнд «Дизайн: форма и хаос»

Книга о дизайне в широком смысле. Автор рассказывает о современных тенденциях и пагубности скоротечных трендов, призывает учиться у классиков и вообще — постоянно учиться.

Эрик Шпикерманн «О шрифте»

Типографика может иметь решающее значение — и об этом расскажет президент Международного общества дизайнеров типографики Эрик Шпикерман. Он покажет, как гарнитуры помогают или мешают взаимодействию с читателем, и совершит краткий экскурс в историю шрифтов.

Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне»

Практикующий графический дизайнер показывает, что модульные сетки могут быть эффективными при создании практически чего угодно. Они логически упорядочивают материал и облегчают взаимодействие с ним для читателя, зрителя, пользователя.

 Иоханнес Иттен «Искусство цвета»

Швейцарский художник, преподаватель Высшей школы строительства и художественного конструирования Bauhaus делится закономерностями, выведенными им за годы исследований цвета в природе и искусстве. Эксперт советует, как использовать, сочетать, конструировать цвета. Книга необходима каждому, кто работает с визуальными компонентами.

Тим Браун «Дизайн-мышление в бизнесе»

СЕО компании IDEO рассказывает, как при создании дизайна ориентироваться на клиента и почему это необходимо. Дизайн-мышление поможет получить максимальный эффект от результата.

Стив Круг «Как сделать сайт удобным»

Автор учит оценивать и тестировать удобство и функциональность сайта. Поняв, как это работает, вы научитесь сразу создавать веб-продукты без проблем с юзабилити.

Тим Кедлек «Адаптивный дизайн. Делаем сайты для любых устройств»

Еще недавно сайт должен был корректно отображаться только на экранах компьютеров, а сегодня устройств с выходом в интернет значительно прибавилось. Автор учит, как создавать сайты, адаптированные для всех платформ.

Есть чем дополнить нашу подборку? Ждем в комментариях ваше мнение про книги из категории must read для веб-дизайнера.

На Dribbble за вдохновением ежегодно приходят 25 миллионов уникальных посетителей, на платформу Behance от Adobe — еще больше.

Иногда дизайнерам сложно найти полезные материалы в ленте популярных сообществ — только в Dribbble пользователи уже загрузили больше триллиона пикселей. Кроме сайтов-гигантов есть сервисы поменьше, но с не менее полезным контентом. Мы составили подборку из десяти небольших сайтов, которые помогут не теряться в информационном потоке, развивать вкус и понимать тенденции дизайна и разработки.

Designspiration — вдохновляющие подборки

Разработчик сайта вдохновился когда-то популярным сервисом FFFFOUND и решил создать что-то похожее. Когда он опросил студентов института искусств в Сиэтле, оказалось, что половина тех, кто учится графическому дизайну, не слышали о FFFFOUND, а Behance посещали всего пару раз. Когда источником вдохновения большинство студентов назвали Google Images, разработчик решил создать ресурс вроде FFFFOUND, но с большим функционалом.

Так появился Designspiration — сайт с коллекциями дизайнов и иллюстраций в стиле Pinterest. Из небольшого сервиса, куда дизайнеры приходили по приглашениям, Designspiration вырос в проект с огромной базой идей. Основные функции сервиса — возможность делиться работами, создавать тематические доски, как на Pinterest, искать изображения по цветам. Последняя функция — самая интересная: пользователь указывает пять цветов из ста двадцати, и сайт выдает картинки в выбранной гамме.

Поиск дизайнов по цветовой гамме работает точно: все цвета, которые выбрал пользователь, встречаются в картинках.

Цвета картинок подписаны в формате HEX. Пригодится, если захотите сохранить понравившийся цвет и использовать его в проектах

Muzli — расширение для Chrome

Плагин Muzli для браузера Chrome собирает свежие посты из дизайнерских сообществ на домашней вкладке. Расширение анализирует 120 источников — Pocket, Vox, Artstation, Product Hunt и еще сотню других — и выбирает то, что интересно конкретному пользователю. В настройках можно выбрать темы, которые плагин выводит на домашней странице: дизайн и вдохновение, технологии и разработка, бизнес, культура, — и тематические сайты. Новости можно добавлять в закладки или скрывать из ленты. Расширение анализирует пользовательский опыт, запоминает самые посещаемые сайты и со временем учится показывать только интересное.

Установите Muzli вместо домашней страницы, чтобы следить за важными для вас новостями

Uplabs — макеты приложений и сайтов

Uplabs — сообщество, которое помогает дизайнерам и разработчикам делиться UI-макетами для приложений и сайтов. Создатели Uplabs наблюдали за популярными платформами и заметили, что сервисы вроде Dribbble изолируют участников сообщества друг от друга и не помогают работать эффективно. Макеты проектов, которые выкладывают пользователи Dribbble, часто так и остаются концептами из-за до невозможности сложной реализации. Тогда решили создать инструмент, который поможет разработчикам и дизайнерам сосредоточиться на работоспособности проекта, а не на визуальной привлекательности.

Так появился Uplabs. Пользователи сайта делятся интерактивными прототипами интерфейсов для iOS, Android и веба. Контент в Uplabs разнообразный: иллюстрации, анимация, прототипы приложений с открытым кодом, библиотеки и готовые продукты. Некоторые работы доступны бесплатно, за другие нужно заплатить — так Uplabs помогает пользователям не только эффективно взаимодействовать и вдохновлять друг друга, но и зарабатывать.

В коллекциях Uplabs собраны работы из всех областей дизайна. Можно создавать собственные подборки

Graphic boutique — тамблер с дизайнерскими работами

Создатель профиля описывает свой тамблер как «Daily inspiration to go». Как и в других хороших сервисах для дизайнеров, в тамблере работы разделены на категории: графический дизайн, брендинг, иллюстрации, типографика, 3D, анимация. Найдется все — от классической швейцарской типографики до флэт-дизайна.

Вдохновляют не только работы, но и оформление профиля — близкие друг к другу публикации выдержаны в одной цветовой гамме

The perfect grid — подборка современного веб-дизайна

Еще один тамблер владельцев graphicboutique.tumblr.com, который посвящен современному веб-дизайну. Работы разделены на три категории: веб, приложения, UI-элементы. Много интересных решений для лендингов, фирменного стиля, навигации на сайтах и пользовательских сценариев.

В блоге встречается и поп-культура — кроме концептов приложений автор вдохновляется тизером к клипу Бузовой

Pttrns — коллекция макетов iOS и Android

За шесть лет коллекция скриншотов мобильных приложений в Pttrns выросла до восьми тысяч. Сервис доступен в пробном периоде и премиум-аккаунте. В бесплатной пробной версии функционал ограничен: можно просматривать ленту из двадцати макетов, сохранять скриншоты, фильтровать работы по категориям. Основные функции платные — чтобы загружать свои макеты и просматривать сайт без рекламы, придется купить премиум-подписку за 5 долларов в месяц.

Разработчики удобно структурировали контент — скриншоты разбиты на категории, что облегчает поиск. Он, кстати, также доступен только в премиум-аккаунтах.

Категории на сайте максимально подробные — все скриншоты разбиты на ОС, темы, даты и тэги. Интересное не потеряется в ленте

Really good emails — дизайнерские электронные письма

«Making great email is hard» — пишут разработчики сайта на странице о компании. Действительно, электронные письма в рассылках редко выглядят хорошо: странные шрифты, стоковые фотографии, некрасивая типографика. Создатели Really good emails решили исправить ситуацию и разработали сервис красивых электронных писем. Пользователи загружают на сайт шаблоны имейлов с открытым кодом — любой сможет сохранить код, заменить содержимое и рассылать эстетичные письма. В эпоху популярности рассылок шаблоны имейлов с профессиональными фотографиями и чистой версткой — незаменимый инструмент.

Пример имейла, который присылает сайт Universe. Оказывается, уведомления о регистрации аккаунта могут быть нескучными

Panda 5 — сборник новостей для дизайнеров и разработчиков

«An easy way to keep up with industry news and inspiration» — пишет про сервис издание TechCrunch. Panda 5 — это платформа, которая собирает картинки и новости с интернет-ресурсов в одном месте. Сервис доступен в веб-версии, в мобильном приложении и расширении для Chrome.

Panda 5 работает по схожему с Muzli принципу — собирает контент из разных источников и выводит на домашней странице. Отличает сайт больший выбор информационных ресурсов, разнообразие фильтров и список информации — в отличие от Muzli, контент выводится списком, а не плиткой. Перед первым запуском расширения Panda 5 спросит, какие темы и рубрики вам интересны. Для пользователей, которые интересуются разработкой и технологиями, Panda 5 предложит новости даже из CSS-Tricks — об изменениях в спецификациях и обучающих статьях вы узнаете первыми.  

Главная фишка Panda 5 — сервис собирает информацию из неограниченной подборки интернет-ресурсов

Подборка тамблер-профилей Даниэля Эклера

К десятилетнему юбилею Tumblr креативный директор и дизайнер Даниэль Эклер составил подборку из 165 выдающихся дизайнерских аккаунтов. Профили Эклер разделил по группам: графдизайн, типографика, искусство, архитектура, дизайн интерьера, книжный дизайн, инсталляции, мода, фотография. Есть раздел с интересными тамблерами, которые не подходят под категории: профиль про африканскую культуру, концепты в стиле киберпанк, фото и видео перформансов. Подборка крайне разнообразная — например, в категории «Графический дизайн» найдутся примеры от японского дизайна со странными иллюстрациями до работ в серо-белых тонах.

Профиль пользователя OLD HORSE из раздела «Искусство»  

Fubiz — новости дизайн-индустрии

Французский онлайн-журнал, который специализируется на творческом контенте. Fubiz начинал как маленькое интернет-издание Ромена Колина — студента, который увлекался культурой и искусством. Колин создавал сайт как агрегатор контента об искусстве и поп-культуре, и сейчас Fubiz вырос до 20 миллионов уникальных посетителей в год и по версии Forbes считается лучшим креативным медиа в мире.

Сейчас Fubiz специализируется на рекламе — на сайте рекламируют знаменитые бренды и продвигают малоизвестных талантливых людей. Благодаря платформе многие дизайнеры, модельеры, иллюстраторы становятся популярными. Как говорит создатель сайта, они предоставляют рекламодателям список креативных людей, которые способны создавать оригинальный контент и распространять его в СМИ. Материал на Fubiz распределен по структурированным разделам о дизайне, архитектуре, фотографии и поп-культуре.

Новости из мира технологий, которые мы заслужили: в старую технику Apple посадили растения

Сохранили что-нибудь себе? Расскажите в комментариях, какой сервис оказался самым полезным и какие инструменты помогают вам развивать вкус и насмотренность.

Это перевод статьи «Master Hot Design Trends (with Photoshop Tutorials)». Автор оригинала — Миклош Филипс (Miklos Philips) — UX-дизайнер с опытом более 16 лет.

Повседневная жизнь полна ярких визуальных образов. Из экспериментов в области графического дизайна рождаются горячие тренды и — внезапно — проникают всюду. Мы видим броские дизайнерские решения на автобусах, билбордах, в телерекламе, журналах и, конечно, в цифровом контенте. Приемов много: двойная экспозиция, глитч (glitch  — цифровые помехи, сбой, ошибка), цветовые каналы, фотомаски, смазанность, ультраяркие цвета или «ошибки печати» (misprint).

Трендовый эффект «глитч» на рекламе в метро Нью-Йорка

Как и в мире моды, в дизайне тренды — это переосмысленный опыт прошлых десятилетий: русский конструктивизм, Баухаус, шелкография, стиль 1970-х. Почти целый век художники используют простую геометрию, и она работает так же хорошо, как и 100 лет назад.

Для создания трендовых эффектов сегодня как никогда много цифровых инструментов. Но давайте помнить, что при всей доступности этих средств действительно притягательные работы не появляются без творческой смелости и новаторского подхода.

Стоит ли следовать трендам

Некоторые дизайнеры и креативные директора избегают трендовых решений, потому что не хотят выглядеть подражателями. Но следование тенденциям может привнести в ваши работы современные штрихи. У решения быть не таким, как все, тоже есть преимущества. Поэтому лучшие дизайнеры заимствуют идеи из трендов прошлого и настоящего, комбинируют и подчас получают нечто принципиально новое и поразительное.

Небольшое предостережение: прежде чем использовать тренд, убедитесь, что он не противоречит вашему брендингу. Банки, страховые и инвестиционные компании людям хочется ассоциировать с надежностью и доверием. В этом контексте едва ли уместны эффекты, связанные с подрывом устоев и контркультурой — глитч, например.

Прием двойной экспозиции украсил вступительную заставку сериала «True Detective» от HBO.

Ниже мы рассмотрим несколько модных дизайнерских приемов и поделимся уроками по созданию эффектов в Photoshop.

Горячий тренд №1: двойная экспозиция

Этот прием позволяет создавать эффектные визуальные сочетания. Название пришло из пленочной фотографии, где можно сделать два или три снимка без прокрутки пленки — и кадры накладываются друг на друга. Эффект часто используют на киноафишах и в рекламных роликах на ТВ. Выше вы видели кадр из заставки сериала “True Detective”: сочетание двойной экспозиции с анимацией усиливает впечатление.

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

А вот несколько хороших уроков, как сделать подобное в Photoshop:

Двойная экспозиция. Урок #1

Двойная экспозиция. Урок #2

Двойная экспозиция. Урок #3

Эффекты «глитч», «ошибка печати» и «визуальные помехи»

Это приемы одного ряда. С ними изображение притягивает взгляд, потому что выбивается из потока «идеальных картинок». В основе — цифровые искажения, или глитч. Когда все вокруг отфотошоплено до безупречности (кто-то назовет это фальшивым или «эстетически загрязненным»), хочется взглянуть на что-то более реалистичное, естественное и неприлизанное.

Эффекты, основанные на ошибках или сбоях, обычно нравятся молодому поколению. Стремление разоблачить притворство — контркультурная составляющая, которая выделяет произведение из общего ряда. Но и эти эффекты уместны не в любой ситуации.

То, что  дизайнеры называют глитчем, еще может встречаться как VHS, RGB-сдвиг, искажение при сканировании, визуальные помехи и «ошибка печати». Дизайнеры-новаторы иногда совмещают несколько таких эффектов, чтобы получить оригинальный результат.

На постере к сериалу «Мистер Робот» несколько разновидностей глитч-эффекта подчеркивают контркультурный антураж.

Цветовой сдвиг + «ошибка печати» + цифровые помехи.

Чересполосное сканирование со смещением изображения создает необычный, притягательный для глаза эффект.

Добиться подобных результатов можно разными способами — осмотритесь на YouTube и выберите, что вам понравится. Есть даже готовые Photoshop Actions, которые можно купить, чтоб накладывать глитч в один клик.  

Парочка крутых Photoshop-уроков по этому тренду:

Глитч. Урок #1

Глитч. Урок  #2

Вы даже можете создавать glitch-эффект средствами CSS. Вот примеры слайдшоу и лендинга.

Двухтоновые эффекты

Прием «дуплекс» (duotone) давно в моде и не устаревает. Сотни лет назад с помощью сангины — красного мелового карандаша — однотонные рисунки создавал Леонардо да Винчи. Манера разбивать изображение на простые тона укоренилась, и современная двухтональная техника развивает идеи мастеров прошлого.

Рисунки сангиной, созданные да Винчи и мадемуазель де Мондран (de Mondran), а также современное фото в двухтоновой технике.

Дуплекс сегодня используют всюду: от постеров к голливудским блокбастерам до рекламы Apple и Spotify. Смысл — выделиться, выглядеть иначе. И здесь на помощь приходят Photoshop Actions и мобильные приложения.

Несколько хороших уроков Photoshop, из которых вы узнаете, как получить этот модный эффект:

Дуплекс. Урок Photoshop #1

Дуплекс. Урок Photoshop #2

Дуплекс. Урок Photoshop #3

Разделение RGB-каналов, цветовые каналы, двухцветная двойная экспозиция

Еще один примечательный эффект, который работает на фотографиях, тексте и контурах. Иногда, чтобы получилось интересно, берут три разных изображения в трех различных цветовых каналах и все это совмещают. Другая разновидность — смесь глитча и разделения RGB-каналов. Некоторые дизайнеры идут дальше — добавляют еще и двойную экспозицию.

Вот несколько крутых уроков по работе с цветовыми эффектами в Photoshop и Affinity Photo. Не обращайте внимания, как эти приемы там называют — каждый волен именовать их по-своему.

Двухцветная двойная экспозиция в Photoshop

Двухцветная двойная экспозиция в Affinity Photo

Яркие, кричащие цвета и флуоресцентный дуплекс

И снова задача — обратить на себя внимание. Чтобы следовать тренду, щедро используем в дизайне сочные и сияющие оттенки.

Флуоресцентный дуплекс в дизайне сайта компании New Deal Design.

Тот же веб-дизайнерский тренд использовали при создании календаря для AfriSam 2018 Corporate Stationery.

По моде — в ярких насыщенных цветах — оформлен и сайт дизайнерского агентства ELJE Group.

Сайт Hackernoon использует сочные флуоресцентные тона, чтобы стать заметнее.

Главное в этом деле  — уместная смелость, готовность рискнуть и попробовать кричащие цвета в дизайне сайта, на обложке альбома или на постере.

Маски, вырезки, абстракционизм, кубизм

Бесконечно возвращающийся тренд, который прочно закрепился в графическом дизайне. Это может быть сочетание жирного шрифта, плоских цветных поверхностей, монтажа и маскирования. Этой технике почти 100 лет, как и выполненным ее средствами советским пропагандистским плакатам 1920-х годов. (На самом деле нам показывают афиши к раннесоветскому кино  — прим. пер.)

Чтобы создавать работы со сложной структурой и цветовым разнообразием, Анри Матисс в последнее десятилетие жизни использовал всего два материала: белую бумагу и гуашь. Так появились его знаменитые аппликации. Обычными ножницами художник превращал краску и бумагу в мир растений, животных, форм и фигур.

Цифровой кубизм, абстрактное искусство и коллажи сегодня — растиражированные техники, которые доказали свою способность привлекать внимание.

Иногда современные эффекты визуального наслоения напоминают коллажи Матисса.

Интересный эффект фотомаски можно получить за счет игры со шрифтами и простыми геометрическими фигурами.

Не существует четких и жестких правил, как получить такой эффект. Все зависит от ваших исходных материалов и изобретательности. Вдохновляйтесь искусством советского плаката, абстрактным кубизмом Пикассо и коллажами Матисса. Большинство приемов фотомаски и аппликации можно воссоздать с помощью маски слоя в Photoshop. Дело не столько в технических навыках, сколько в вашем творческом воображении и умении сочетать визуальные образы.

Тем не менее есть пара классных уроков Photoshop, которые на примере показывают, как создать подобные эффекты:

Как создать портрет из текста в Photoshop

Как создать букву-портрет в Photoshop

А вот еще один интересный урок — как с помощью слой-масок в Photoshop получить такой результат:

Из урока вы узнаете, как несколько простых приемов позволяют делать замысловатые иллюстрации с  несколькими слоями, маскированием, инструментом «Перо», базовым освещением и одной простой текстурой.

Анализируйте, будьте смелыми и прокладывайте свою колею

Сегодня творческая смелость — не выбор, а обязательное качество дизайнера. Ожидания публики растут, а ее внимание становится все труднее удерживать. Не стесняйтесь следовать трендам дизайна — берите и перерабатывайте их во что-то свое! Переверните привычное положение дел, исследуйте свои фантазии и совершите дерзкий творческий скачок!

Почти все ответили: «креатив», «оригинальность», «что-то красивое», «минимализм». Но должен ли дизайн всегда быть необычным и красивым, а интерфейс — минималистичным? Давайте разрушим популярные мифы.

Миф № 1: Дизайн должен быть оригинальным

Никому не нужен креатив ради креатива, особенно это касается проектирования интерфейсов. Лучше адаптировать привычный для пользователя дизайн, чем изобретать колесо. Люди больше ценят удобство и простоту использования, чем новизну. «Привычное — ваш друг», — говорит Стив Круг в книге «Don’t make me think». И он прав, ведь если пользователю что-то непонятно, то он уйдет (разве что у продукта нет ни одного конкурента). Поэтому креативить нужно, если новое решение точно лучше существующего. Или если ваша задача — поразить пользователя собственной креативностью. Крутой дизайн зачастую сначала незаметен, ведь он в первую очередь передает идею.

Миф № 2: Дизайн должен быть красивым

Мне нравятся пастельные тона и строгие шрифты, а посетителям сайта анекдот.ру — кричащие цвета и Comic Sans. Стоит ли делать, как нравится мне (у меня же так развито чувство прекрасного)? Вряд ли. Главное, чтобы нравилось целевой аудитории. «Суть дизайна не в том, чтобы радовать глаз и красиво смотреться. Дизайн должен работать», — говорит Оливер Райхенштейн, дизайнер, CEO компании iA.

«Красивого» в вакууме не бывает. «В графическом дизайне нет чего-то правильного или неправильного. Существует только эффективная и неэффективная коммуникация. Каждый может критиковать рекламные баннеры, но заказчику важно только то, привлекают они клиентов или нет», — считает словацкий графический дизайнер Питер Билак.

Миф № 3: Плевать на эстетику, главное — функционал

Не надо игнорировать эстетику. Доказано, что эмоции влияют на пользовательский опыт. Если вам принесут два одинаково вкусных блюда, но первое будет вывалено на тарелку как попало, а второе — оформлено аккуратно и привлекательно, какое вы предпочтете? Я почти уверена, что второй вариант многие даже выложат в Instagram, особенно если в подаче будет изюминка. Дизайн должен производить приятное первое впечатление (на целевую аудиторию, конечно). Дизайнер Дэн Норман объясняет, что, как и почему в книге «Emotion & Design: Attractive things work better».

Миф № 4: Пользователи знают, чего хотят

Выявить реальную потребность пользователей — суперсложная задача. Недостаточно просто спросить, чего они хотят от дизайна. Здесь в тему цитата, которую приписывают изобретателю автомобильного конвейера Генри Форду: «Если бы я спросил, чего хотят люди, они бы ответили, что им нужны лошади побыстрее». Пользователи зачастую не знают, чего хотят. Они не могут предсказать свою реакцию на те или иные вещи. Но они точно знают, какие проблемы и «боли» у них есть сейчас. Спроси Форд о том, что раздражает людей в нынешнем способе передвижения, — конечно, они бы сказали, что низкая скорость, что лошади быстро устают, болеют и так далее. Из подобных данных уже можно понять, каким должен быть дизайн, не упираясь в предыдущий способ решения задачи.

«Критическая ошибка пользовательских интервью в том, что вы просите людей либо учитывать предыдущий опыт использования, либо спекулировать на будущем использовании продукта», — говорит Якоб Нильсен в статье «Interviewing Users». Нужно добраться до истинной проблемы — только так появляются прорывные, креативные решения. Это сложно, но чертовски интересно.

Миф № 5: Чем проще и удобнее, тем лучше

Мне нравится цитата Джоэла Спольски, которая объясняет, почему удобство — относительная штука: «Если бы юзабилити-дизайнеры проектировали ночной клуб, то там было бы чисто, спокойно, хорошо освещено, всем хватало бы сидячих мест и меню, напечатанных Sans-serif, было бы много барменов и туалетов, которые легко найти. Но никто бы там не тусовался. Все бы пили пиво в “Гадком Койоте”».

Миф № 6: Детали важны только перфекционистам

«Детали — не просто детали. Они и есть дизайн», — сказал американский дизайнер Чарльз Эймс, который придумал кресло с оттоманкой, на котором так удобно релаксировать. Правка на 5 минут может стоить миллионы долларов. Например, для сайта BestBuy.com небольшое изменение, позволяющее пропускать регистрацию во время оформления заказа, привело к росту доходов на 300 миллионов долларов в год. Корпорация Apple, которая стоит более триллиона долларов, маниакально помешана на «мелочах». Как пользователь айфона (в прошлом ярый его противник), могу уверенно сказать, что не зря.

Миф № 7: Минимализм = простота

Упрощение часто путают с минимализмом — сокращением элементов. Но сокращать нужно не всегда. Иконки без текста сложно понять, как и трудно выбрать блюдо с помощью меню без фотографий еды. Эйнштейн отлично сказал на этот счет: «Все должно быть простым, насколько это возможно, но не проще». Джулия Жуо, директор по дизайну продуктов в Facebook, в статье «The 5 Most Common Design Mistakes» акцентирует, что не нужно жертвовать понятностью ради минимализма. Простота исходит из понимания целостного опыта пользователя, а минимализм — это стиль. Он не самоценен.

А какие мифы о дизайне знаете вы?

Технологии упрощаются: раньше для создания сайта требовалась команда программистов, сейчас — собственные знания и навыки. Фронтенд и бэкенд оставим профессиональным разработчикам, для обычных пользователей придумали конструкторы. Они предлагают широкие возможности, сопоставимые с самописными сайтами, и простой интерфейс, как у ресурсов на CMS (Content management system).

Видео-курс по Tilda

Мы совместно с командой платформы Tilda запускаем видео-курс по созданию сайтов. За 16 уроков слушатели познакомятся с техническими настройками и функциональными возможностями конструктора, чтобы научиться запускать продвинутые web-ресурсы.

Благодаря понятному интерфейсу научиться работать на конструкторе просто, но создавать нешаблонные сайты, которые ничем не уступают самописным, — уже искусство. Поэтому в курс включены занятия по прототипированию, контенту, типографике и тестированию, которые помогут не только создавать эффектные сайты, но и эффективно привлекать на них трафик и конвертировать его.

Курс подойдет дизайнерам, маркетологам, предпринимателям, а также всем, кто хочет создавать wow-проекты самостоятельно. Для обучения не требуется знать языки программирования или разбираться в дизайне. Достаточно начальных навыков работы на компьютере и желания.

Программа курса

Слушатели изучают теорию с помощью видеолекций и методический материалов. Теория закрепляется на практике через домашние задания. Обучение разработано по системе микроленинга — короткие уроки по 10 минут и простые задания. Это помогает быстро учиться и не терять мотивацию. За время учебы вы создадите четыре сайта, пройдя полный цикл: прототип — сайт — контент.

Домашние задания проверяют преподаватели. Они подскажут, что изменить и как сделать лучше. На курсе преподают digital-специалисты со специализацией в дизайне, рекламе и маркетинге.

В течение курса вы изучите темы:

• обзор конструктора;
• предварительное исследование перед созданием сайта;
• предконцепция;
• прототипирование;
• текстовый и визуальный контент;
• типографика и композиция;
• колористика и модульные сетки;
• функциональные возможности — формы, интернет-магазин, seo;
• анимация;
• zero-блоки;
• верстка;
• метрики и тестирование.

В конце курса учащиеся выполнят дипломный проект для настоящего заказчика. Каждый получит техническое задание с поставленной бизнес-задачей. Вы проведете предварительное исследование, разработаете прототип и согласуете его с заказчиком, а затем создадите сайт с нуля, используя все возможности платформы. Диплом отлично прокачивает навыки работы в реальной жизни.

Почему Тильда

Tilda — конструктор сайтов, который был создан в 2014 году компанией FunkyPunky. Он сочетает в себе продвинутые возможности и простой интерфейс разработчика. На платформе есть готовые шаблоны, которые можно сразу использовать в работе.Однако это будут примитивные лендинги с типовой структурой.

Чтобы воспользоваться всеми возможностями платформы, лучше создавать сайт с нуля. Тогда вы получите интернет-ресурс, заточенный под ваши задачи: лендинг, интернет-магазин, информационный портал, страница мероприятия и другое. Тильда позволяет создавать и контентные проекты — лонгриды, в которых сочетается большой объем текста как в блогах и впечатляющее визуальное наполнение как в мультимедиа.

Для интерактивности Тильда предлагает использовать анимацию. Вы сможете продумывать сценарий: когда и что будет открываться и выезжать, как будет прокручиваться страница. Сможете внедрить функции animation, parallax и fixing. Это даст эффект параллакс при скроллинге, фиксацию меню, футера или другого элемента и разное появление блоков.

Сайт на Тильде — это не просто страничка в интернете с доменом третьего уровня. Вы сможете подключить собственный домен, добавить форму оплаты, проводить А/В-тестирование. Сайты корректно работают на всех мобильных устройствах благодаря встроенному адаптивному дизайну. Есть seo-продвижение: вы самостоятельно прописываете ключевые слова и оптимизируете ресурс под поисковики.

Сайты на конструкторе подходят для любого бизнеса. Крупный бизнес экономит время — проект создается за рабочий день. Малый бизнес экономит средства — ему не требуются дизайнер, верстальщик и разработчик. На Тильде можно сделать основной сайт, а можно — отдельные работы: промо-страницы мероприятий, лендинги под акции или продукт, дайджесты, имиджевые проекты.

Запись на курс

Курс начинается 24 сентября. Чтобы записаться на курс, оставьте заявку или позвоните по телефону 8-800-700-68-41. Запись закрывается в воскресенье 23 сентября. Если у вас остались вопросы, задавайте их по телефону или в комментариях.

Дизайн-система — термин, который в моде и у всех UI-дизайнеров на устах. Чтобы разобраться, что это и зачем, я перевела обзор полезных материалах по дизайн-системам. Автор — Ведран Арнаутович (Vedran Arnautovic) — ведущий продуктовый дизайнер в Zendesk. Оригинал здесь: «Design System Resources».

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

Этот контент повлиял на мое понимание темы и на то, как мы с коллегами из Zendesk работаем над собственной системой Garden.

Список не претендует на полноту, но здесь собраны статьи, которые я счел самыми полезными и информативными. Надеюсь, такими же найдете их и вы. Каждый материал я коротко прокомментировал, чтобы вы могли быстрее понять, интересен ли он вам.

Видео

«Дизайн-системы. Когда и сколько?»

Мне очень понравилась формулировка, что к дизайн-системе нужно подходить как к сочетанию правил, ограничений и принципов. Все хорошо объяснено на понятном примере.

По мере того как дизайн-системы перерастают хайп и укореняются в культуре продуктового дизайна, все важнее становится вопрос, как оценивать их успешность. Спикеры углубляются в эту тему на временной отметке 12:20. IBM использовала качественные и количественные методы исследования, чтобы понять, насколько созданная ими дизайн-система подходила их большой и очень распределенной команде.

Дизайн-системы в Zendesk

Дизайн-системы способствуют распространению принципов доступности. На 17-й минуте 35-й секунде мой коллега Остин Грин (Austin Green) начинает говорить о проектировании в рамках нашей дизайн-системы. Это моя любимая часть доклада, потому что Остин объясняет, как мы встраиваем средства обеспечения доступности (accessibility) в каждый компонент системы. Объяснение хорошо тем, что доступно (улавливаете?) даже неспециалистам в разработке и проектировании.

Устойчивые дизайн-системы

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

Статьи

Design Systems Handbook («Руководство по дизайн-системам»)

Создавать дизайн каждого продукта индивидуально — это медленно и непоследовательно. Обслуживать его со временем становится все сложнее.

Дизайн-системы позволяют командам создавать более качественные продукты быстрее — за счет повторного использования дизайна и возможности масштабировать его применение. В этом ключевой принцип и главная ценность дизайн-систем.

Прочтите, если…

...вы ищете, с чего начать. Эта статья — просто находка. Она описывает практически все аспекты дизайн-системы и дает фундамент для дальнейшего исследования тем, в которые вы захотите углубиться.

Больше всего мне понравился раздел, где развенчиваются мифы о дизайн-системах. Например о том, что своими излишними ограничениями они убивают творчество.

Для моей работы и текущих задач также оказался очень полезен раздел, посвященный формированию команд и разным моделям участия специалистов.

Why design systems fail («Почему дизайн-системы не достигают цели»)

Ваша дизайн-система должна стать путем наименьшего сопротивления — снижать накладные расходы на разработку, а не увеличивать их. Это жизненно важно.

Прочтите, если…

...вы уже поняли, что дизайн-системы прекрасны, и хотите узнать, как в работе с ними избежать распространенных ошибок. Статья раскрывает главные организационные требования, без которых дизайн-системе не устоять.

Your sketch library is not a design system («Ваша скетч-библиотека — еще не дизайн-система»)

Может прозвучать банально, но надо понимать, что приложение не создашь из одних скриншотов и файлов Sketch.

Прочтите, если…

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

People over pixels («Люди за пикселями»)

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

Прочтите, если…

...вам интересен пошаговый отчет о том, как распределенная команда сообща переработала дизайн компонентов, которые использовались более чем в 40 продуктах на двух континентах.

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

The most exciting design systems are boring («Лучшие дизайн-системы скучны»)

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

Прочтите, если…

...вы ищите объяснение, почему дизайн-система — это не просто набор UI-элементов. Я твердо верю в важность руководящих принципов и инструкций, которые раскрывают, что делать (и чего не делать) с компонентами дизайн-системы.

Особенно близко моим взглядами утверждение, что дизайн-система — не повод провести ребрендинг и выкинуть все старое ради новеньких компонентов и фреймворков. Внедрение дизайн-системы — это когда вы находите самые частые, рутинные и значимые взаимодействия и оптимизируете их в рамках существующей системы.

AirBnB: Building a visual language ( «AirBnB: создание визуального языка»)

В сравнении с другими направлениями дизайна, у проектирования ПО мало физических ограничений. Поэтому для любой задачи можно предложить множество решений. Но при таком подходе у пользователя не сложится целостного представления о том, с чем он работает. Как владельцы и дизайнеры продукта, мы должны сами ставить себе ограничения и придерживаться их.

Прочтите, если…

...вам нужно толковое объяснение, зачем создавать дизайн-системы, как это делать и какие от этого плюсы. Статья приводит список причин, почему дизайн-системы необходимы и использовать их — хорошая идея. Наверное, это лучший подобный список из всех, что я видел до сих пор. AirBnB — одни из лидеров в этой области, так что их мнение достойно внимания. А еще в статье отличные цитаты о дизайн-системах и их преимуществах.

Интереснее всего часть текста, где обсуждается определение более крупных компонентов, чем элементы атомарного уровня.

Designing design systems for complex products («Создание дизайн-систем для сложных продуктов»)

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

Прочтите, если…

...вы хотите понять разницу между дизайн-системой и руководством по стилю. Статья написана очень просто и подходит тем, кто только начал вникать в дизайн-системы и их достоинства.

Animation in design systems («Анимация в дизайн-системах»)

Мы относимся к анимации, как к чему-то второстепенному — отчасти потому, что не понимаем всей ее силы. Когда пользователи просматривают фото, сайт и любое окружение, они пытаются мысленно достроить карту пространства вокруг себя. И ничто в этот момент так не управляет вниманием, как движущийся объект.

Прочтите, если…

...вам нужны практические советы, как обосновать и сделать приоритетным включение UI-анимации в вашу дизайн-систему.

Atomic Design («Атомарный дизайн»)

Прочтите, если…

...просто прочтите! Скорее всего, об этой вещи будут говорить как об одной из основополагающих работ по дизайн-системам.

Atomic design: how to design systems of components («Атомарный дизайн: как создать систему компонентов»)

Прочтите, если…

...вам интересно, как один дизайнер реализовал «атомарный дизайн» на практике.

А какие материалы по дизайн-системам нравятся вам?

Надеюсь, вы нашли в этом списке хотя бы один интересный пост или видеоролик. Если у вас на примете есть другие классные источники — пожалуйста, делитесь ими в комментариях.

За 8,5 лет мы накопили огромный опыт обучения далёких от программирования людей крутой IT-профессии. Мы идем дальше и перезапускаем обучение дизайну.

Мы сделали самый полный курс по веб-дизайну для тех, кто хочет освоить профессию с нуля, создать мощное портфолио с реальными проектами и получить оплачиваемую стажировку в Mail.Ru Group.

Первый поток уже набран и стартует 25 сентября. Открыта запись на 29 октября; вот что ждёт студентов:

Для кого

Программа подойдет:

• Новичкам. Курс даст необходимые знания и навыки, сформирует видение и поможет собрать портфолио. После успешного завершения курса вы сможете работать дизайнером.
• Дизайнерам. Веб — передовая сфера, где определяются и утверждаются тренды. Поэтому даже те дизайнеры, чья работа не связана непосредственно с «паутиной», вынуждены осваивать новое для себя направление веб-дизайна.
• Менеджерам проектов и тем, кто так или иначе отвечает за запуск сайтов и приложений. На курсе вы узнаете, сколько сотрудникам требуется времени на задачу, оцените уровень их компетенций, узнаете, когда задержки вызваны объективными причинами, а когда — ленью. Кроме того, после вы всегда сможете вставить свои 5 копеек. Объективно.

Как проходит обучение

Обучение длится 8 месяцев, но не думайте, что это слишком долго. Предстоит сделать многое:

• Настроиться на правильный лад. Вы узнаете, что такое веб-дизайн, в чём особенности профессии и как стать в ней успешным.
• Научиться работать с софтом. Главные инструменты: Adobe Illustrator, Adobe Photoshop, Figma.
• Научиться работать с графикой. Как использовать цвета, шрифты, иконки и изображения так, чтобы это решало задачи проекта.
• Познакомиться с UX и UI. Вы поймете разницу между мобильным и веб-дизайном, обучитесь правильным методам работы в команде.
• Освоить базовые знания вёрстки. Вы узнаете, что нужно учитывать на этапе проектирования и идей для успешной технической реализации.
• Создать пять проектов для портфолио. Плюс выпускная работа на основе реального брифа — с презентацией решения, фидбеком, победителями и наградами.

Кстати, награда за лучший выпускной проект — оплачиваемая стажировка в Mail.Ru Group. Отличный старт для карьеры!

Что дают курсы

Помимо профессиональных навыков, у вас останется ещё кое-что:

• Отличное портфолио. Его вы будете качественно наполнять весь курс обучения.
• Сертификат. Очевидное подтверждение уровня ваших знаний.
• Связи. Расширится сеть контактов за счет одногруппников, преподавателей, экспертов и организаторов стажировки.
• Экспертные рецензии. Эксперты оценят качество ваших работ и подскажут, куда расти дальше.

А вот что об этом говорит куратор курса, арт-директор дизайн-студии Mail.Ru Group Артем Фенелонов:

Видео:

Что будет после

По всей России открыто более 1000 вакансий на позицию веб-дизайнера со средней зарплатой 80 тысяч рублей. Так что ваша задача сведётся лишь к поддержанию себя в хорошей дизайнерской форме и выбору наиболее приемлемых позиций.

Но до это момента ещё 8 месяцев трудного, но интересного обучения. Мы начинаем совсем скоро. Вы с нами?

1. Как стать уверенным в своей креативности

Дэвид Келли, основатель легендарной международной компании IDEO, 40 лет занимается дизайном компьютерной техники, IT-продуктов и не только. В 1979 году его клиентом был Стив Джобс — тогда еще мало кому известный. Келли считает, что люди не делятся на рациональных и творческих. Человек зачастую не выдвигает смелых идей не из-за их отсутствия, а из страха критики и осуждения.

Бороться с боязнью творческой неудачи Келли предлагает так же, как с любым другим страхом. По его мнению, креативность может прокачать каждый, как только решится отступить от шаблона.

2. Почему современный дизайн сосредотачивается на опыте пользователя

Еще один интересный разговор с Дэвидом Келли — о том, что в прошлом дизайнеры концентрировались на объекте и впечатлении, которое он производит. Сейчас же приходится учитывать личность потребителя и его поведение. Для этого создаются прототипы, которые проигрывают возможные сценарии взаимодействия человека с продуктом.

Келли приводит в пример магазин Prada New York. Для него разработали сразу несколько технологий, которые облегчают посетителям выбор и подталкивают к покупкам. Зеркало-дисплей в примерочной может показывать отражение с задержкой — людям удобно рассматривать себя со спины. Келли говорит и о других примерах дизайна «для людей», которые подтверждают, что все гениальное — просто.

3. Как дизайн развивает доверие

Джо Геббиа — сооснователь сервиса для краткосрочной аренды жилья Airbnb. В основе площадки — доверие людей друг к другу: одни готовы приехать в дом незнакомца, другие — пустить путешественников в свое жилье. Геббиа уверяет, что добиться этого удалось благодаря дизайну.

Спикер рассказывает, как в Airbnb придумали систему отзывов и почему комментарии арендаторов и домовладельцев публикуются одновременно. По словам Геббиа, важно соблюсти баланс при раскрытии информации, выбрав «нужную дозу». Для этого окна для ввода данных на сайте имеют фиксированный размер. Ресурс подсказывает, как написать объявление, чтобы оно вызывало доверие.

Все секреты Airbnb — в видео.

4. Почему в дизайне важен незамыленный глаз

Тони Фаделл, разработчик дизайна iPod и термостатов Nest, заявляет — дизайнеру нельзя «привыкать» к проекту. Когда что-то происходит из раза в раз, перестаешь замечать нюансы. Это ограничивает творческие способности. Именно внимательность к деталям позволяет сделать продукт, удобный для пользователя — и потому востребованный.

Раскрывая тему, Фаделл рассказывает об изобретении стеклоочистителя и создании iPod. Плеер, который не надо заряжать перед первым использованием, был революционной идеей, которую оценили покупатели. Спикер предлагает «мыслить моложе», чтобы делать больше.

5. Как делать людей счастливее через дизайн

Графический дизайнер Стефан Загмайстер рассказывает, как в своих продуктах отойти от имитации счастья и научиться призывать к нему. В видео нет практических секретов мастерства, зато оно пропитано теми эмоциями, на которые спикер призывает ориентироваться в работе.

6. Из каких компонентов состоит дизайн, который делает счастливым

Если предыдущая лекция — об эмоциях «в теории», то критик дизайна Дон Норман рассказывает о прикладных способах привнести счастье в разработки.

«Новый я — это красота, — начинает лекцию Норман. — Люди обычно говорят: „То, что говорит Норман, это хорошо. Но если следовать всем его советам, все будет удобным, и при этом уродливым“. Что же, я об этом не думал, так что...».

Дальше спикер убедительно доказывает, что красота — это далеко не все, на что нужно ориентироваться дизайнеру. Он делится теорией о чувствах, у которой три составляющие. Чтобы узнать, какие — смотрите видео.

7. Почему проще — не значит лучше

Создатель популярных шрифтов Дэвид Карсон, которого называют Паганини типографики, продолжает тему веселья в дизайне. По его мнению, тренд на минимализм достиг крайней точки, и маятник качнулся в обратную сторону — к экспрессии.

Он демонстрирует, какое значение может иметь шрифт, почему в дизайне не всегда стоит идти очевидным путем и все упрощать. Карсон призывает быть смелее и экспериментировать: «Я начал думать о некоторых своих решениях. Например, выборе между шрифтом Serif и San-Serif. По большей части это не представляет опасности для жизни. Почему бы не повеселиться?»

8. Чем грешат дизайнеры интерфейсов

Обозреватель технологий в New York Times и технический корреспондент CBS News Дэвид Поуг делится взглядом на интерфейсы. По его мнению, самое сложное — не решить, какие функции добавить, а определить, что убрать с экрана. Хороший интерфейс должен быть простым, иначе он препятствует развитию технологий.

Имейте в виду, Поуг сравнивает операционные системы от Microsoft и Apple в пользу последней. Если тема для вас холиварная, будьте готовы мужественно встретиться с ней лицом к лицу.

9. Как создается дизайн топовых сайтов

От UX-дизайнера Маргарет Гулд Стюарт вы узнаете, как крошечные изменения во внешнем виде сайтов могут привести в негодование тысячи людей или сделать их жизнь лучше. Эксперт делится секретами, как проектировать интернет-площадки для огромной аудитории. Маргарет Гулд Стюарт работала с Facebook, YouTube, Google. Она рассказывает, что на обновление кнопки «Нравится» в Facebook было потрачено 280 часов рабочего времени, и объясняет, почему оценка на YouTube сменилась с пяти звездочек на «лайк» и «дизлайк».

Даже если вы далеки от дизайна, посмотрите это видео, чтобы заглянуть на кухню сайтов-гигантов.

10. Почему простота не означает примитивных решений

Сотрудник MIT Media Lab Джон Маэда отмечает, что людям нравится сложное. «Я задумался о простоте. Что включала бы простота на пляже? А что, если бы небо было на 41% серым? Не было бы оно тогда совершенным небом?», — размышляет он.

По словам спикера, все элементарно: жизнь должна содержать больше удовольствия и меньше боли. И в дизайне это тоже работает. Чтобы узнать, как — смотрите видео.

11. Как технологии влияют на типографику

Создатель шрифтов Verdana и Georgia Мэтью Картер рассказывает, как менялись технологии и адаптировалась к ним форма букв. Эта лекция — преимущественно экскурсия по его профессиональной жизни, но она дает исчерпывающую информацию о шрифтах.

12. Как выглядит книга будущего

Разработчик ПО Майк Матас показывает на iPad первую полностью интерактивную книгу. Это час документальной съемки, интерактивной графики, аудио и карт, сочетающихся с текстом. Само выступление длится меньше — всего 4:34.

Книга не только демонстрирует новые концепции иллюстративного искусства, но и предлагает способы взаимодействия и организации данных для обмена историями. Видео было опубликовано в 2011 году, а книга будущего все еще не воплотилась в настоящем — есть над чем подумать.

13. Что ждет интернет

В 2007 году, когда интернету исполнилось 5 тысяч дней, футуролог в сфере киберкультуры попытался предсказать развитие Сети на последующий период такой же продолжительности. Прошло две трети этого времени — можно оценить, сбылись ли прогнозы, и решить, доверять ли им на оставшийся срок.

14. Как выглядит пользовательский интерфейс будущего

Еще один взрыв из прошлого. Дизайнер Джон Андеркоффлер в 2010 году представил футуристический интерфейс, которым можно управлять жестами. С помощью специальных перчаток он во время лекции перемещает трехмерные изображения с экрана на экран, приближает и отдаляет их, не прикасаясь к мышке и клавиатуре.

Если знаете еще видео TED Talks о дизайне, которыми можно дополнить подборку, делитесь ими в комментариях.