Дизайн-система — термин, который в моде и у всех 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 месяцев трудного, но интересного обучения. Мы начинаем совсем скоро. Вы с нами?

Это перевод статьи «15 questions to ask yourself before publishing a new landing page».

«Посадочные страницы» (landing pages) — важная часть маркетинговых кампаний в интернете. Страница, которую люди видят, кликнув по вашей рекламе, связывает целевую аудиторию и рекламируемый продукт.

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

• Ищете решение по наитию?
• Создаете ленд и надеетесь на лучшее?
• Делаете ленд, а затем «допиливаете» по мере выяснения результатов?
• Готовите несколько вариантов страницы и проводите сравнительный тест?

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

Чтобы помочь вам в этом, я составил список из 15 вопросов, которые должен задать себе перед публикацией ленда каждый маркетолог. Если все ответы — «да», ваш лендинг может быть несовершенным, но он будет работать.

1. Контент верхней половины ленда — продолжение рекламы, которая ведет на страницу?

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

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

2. Ясно ли заголовок ленда характеризует мое предложение и/или бизнес?

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

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

3. Заголовок и подзаголовок раскрывают ценность продукта?

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

Лучший способ добиться этого — посвятить заголовок и подзаголовок тому, как именно ваш товар или сервис улучшит жизнь клиента. Вместо общих слов вроде «программный продукт №1 на рынке», напишите что-то в духе:

«Закрывайте вдвое больше сделок с нашим приложением для автоматизации продаж!»

4. Заметен ли призыв к действию с первой секунды?

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

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

5. Призыв к действию ясен?

Большинство хороших call to action (CTA) требуют от клиента вложений, а в каждом из них есть доля риска. Если хотите, чтобы люди оставляли вам контактные данные, деньги или еще что-то — объясните, что они получат взамен.

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

6. На ленде только нужные ссылки?

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

7. На странице только необходимое?

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

8. В центре внимания именно то, что важно клиенту?

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

Вместо рассказа о сильных сторонах компании сосредоточьтесь на том, как ваш продукт или услуга поможет клиентам и изменит их жизнь к лучшему. Что получит человек, если купит ваш продукт? Чем полнее вы ответите на этот вопрос, тем выше вероятность конверсии.

9. Отзывы о моем бизнесе/продукте актуальны и убедительны?

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

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

10. Я прошу у пользователя только самые необходимые данные?

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

11. У страницы есть <title>?

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

12. Ленд вычитан на ошибки?

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

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

13. Все ли поля и формы на ленде протестированы?

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

14. Есть ли у страницы мобильная версия?

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

15. Ленд вызывает у клиента чувство «это для меня»?

Следуя по созданной вами воронке продаж, люди постоянно спрашивают себя: «Это то, что мне нужно?». Потенциальные клиенты ищут компанию или предложение под свои предпочтения и нужды. Если вы сумеете убедить людей, что ваш продукт — это о них и для них, им будет сложно отказаться.

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

Заключение

После более чем десяти лет в разработке и тестировании посадочных страниц я убедился, что эти 15 вопросов помогают прокачать качество нового ленда. Ответили «да» на все? Значит, у ваших маркетинговых кампаний отличная база и они начнут приносить пользу с первого дня! Со временем вы можете что-то доработать, но надежная основа у вас уже есть.

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 о дизайне, которыми можно дополнить подборку, делитесь ими в комментариях.

Если узнаете себя — предрасположенность к профессии у вас точно есть.

Везде видите дизайн

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

Понимаете, что значит слово «улучшить»

Улучшение должно решать проблему — и оно не состоится, пока мы не понимаем, зачем вообще что-то менять. Вы знаете, что добавить анимации, стразов, градиентов, броских элементов — это не дизайн. Усовершенствовать — значит сделать удобнее, сократить расходы на производство, привлечь внимание потенциальной аудитории. Должна быть цель. А еще вы понимаете смысл фразы: «Лучший дизайн — незаметный дизайн».

Замечаете плохой дизайн

Вас смешит, когда благотворительная организация использует Comic Sans, а привокзальный ларек с шаурмой — золотую обводку шрифта и название «La ShAwErMa». Забавляют и слишком пестрые рекламные баннеры, и нарочито довольные лица из фотостоков. Чтобы смотреть на подобные дизайнерские фэйлы, вы подписались на тематические паблики вроде «Десигн», да и сами частенько выкладываете подобные находки в соцсети.

Обращаете внимание на детали

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

Любите оптимизировать

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

Умеете объяснять свои идеи людям или очень хотите научиться

Любой дизайн делается с людьми и для людей. Вы осознаете, что недостаточно сказать коллеге, менеджеру проекта или клиенту: «Я художник, я так вижу». Даже если идея кажется вам гениальной, нужно аргументировать это. Поэтому вы готовы учиться точно доносить мысли, слушать и слышать собеседника и воспринимать критику не как личную обиду, а как рабочий момент, который приведет к оптимальному решению задачи.

Друзья часто просят вас что-то придумать

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

Понимаете, что у каждого шрифта свой характер

Для вас нормально пофантазировать на тему: «Если представить Arial человеком, кем бы он был?». Возможно, выпускницей Гарварда, которая любит маленькие черные платья и никогда не наденет вульгарный наряд, а поговорить может о чем угодно: от абсурдных мемов до творчества Достоевского?

Редизайн известного бренда вам интереснее, чем скандал с участием знаменитостей

Вам интересно, как трансформировалась бутылка Coca-Cola с момента основания компании. Когда «ВКонтакте» сменила дизайн, а Instagram — логотип, вы увлеченно читали критику и участвовали в обсуждениях.

Вам важна форма, а не только содержание

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

Любите обустраивать пространство вокруг себя

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

Замечаете то, чего не видят другие

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

Кайфуете, когда что-то создаете

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

Узнаете себя? Или кого-то из друзей?

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

Программисту — познайте чистую архитектуру

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

Что почитать. Автор бестселлеров «Чистый код» и «Идеальный программист» Роберт Мартин выпустил новую книгу «Чистая архитектура. Искусство разработки программного обеспечения». «Чистая архитектура» — фундаментальный труд, который рассматривает парадигмы, принципы и компоненты. Издание будет полезно как начинающим программистам, так и кодерам с опытом. Дядюшка Боб дает системное понимание, с чего начать, какими принципами руководствоваться и как должен выглядеть идеальный вариант.

Что посмотреть. Послушайте выступления самого Дядюшки Боба: Чистый код, Принципы чистой архитектуры, SOLID. Тем, кто хочет видео покороче, предлагаем выступление Марка Бастьяна про правила проектирования.

Что попробовать. Поработайте над новым или текущим проектом с применением новых знаний. Попробуйте продумать архитектуру, ответив себе на три вопроса: «Что мы делаем?», «Зачем?» и «Как?». Возьмите лист бумаги и посидите часок, размышляя о превратностях судьбы и проектировании архитектуры. Попробуйте получить результат.

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

Веб-разработчику — создайте Progressive Web Apps

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

Что почитать. Изучите руководство Google для создания PWA — веб-приложения, которое работает как мобильное. Его можно запустить для любого сайта, но для этого не нужно знать язык мобильной разработки. Стека HTML & CSS & JavaScript  будет достаточно.

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

Progressive Web Apps: What, Why, and How?

From Website to Progressive Web App

Frameworks and Tools for Progressive Web Apps

PWA+AMP

Что попробовать. Познакомьтесь с технологией и создайте PWA для своего сайта или заказчика. Проверьте PWA через расширение Chrome Lighthouse. Поделитесь полученным с миром: опубликуйте результат на GitHUB, а в комментариях кидайте ссылку.

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

Рычащая кнопка

Виртуальное пианино

Цветочек или птичка?

Млечный путь

Медитация под полосочки

Бесконечные шары

Цветная бумага

Дизайнеру — визуализируйте

Почему важно. Информация делится на вербальную (10%) и визуальную (90%), но очень часто мы об этом забываем и пытаемся объяснить, научить и рассказать с помощью слов. Однако восприятие через рисунок будет намного проще и действенней.

Что почитать. Советуем обратить внимание на книгу Дэна Роэма «Рисуй, чтобы победить». Книга Дэна по сути иллюстрированный курс, который позволит по-новому взглянуть на процесс представления информации. Сам Дэн научился этому в начале 90-х в России, когда пытался коммуницировать без знания русского языка. Он — признанный лидер в области визуального представления информации. В 2009 г. его презентация системы здравоохранения в США на четырех салфетках была признана лучшей презентацией года. Если вы тоже хотите убеждать окружающих с помощью рисунка на салфетке, эта книга для вас.

Что посмотреть. Посмотрите вебинары, лекции и работы, посвященные визуализации, UХ-дизайну и методам предоставления информации.

UX-дизайн для начинающих

The beauty of data visualization

Легендарный Тафти

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

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

Маркетологу — продвиньтесь в топ

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

Что почитать. Почитайте англоязычный блог на ресурсе MOZ — экспертном портале, посвященном seo и маркетингу в мире. Сооснователь Рэнд Фишкин регулярно раскрывает секреты выхода в топ в видеороликах, поэтому здесь можно и почитать, и посмотреть. Здесь вы найдете все о продвижении в Гугл и западных технологиях. Яндекс ведет свой блог для вебмастеров, в котором рассказывает, как сделать сайт лучше, чтобы он попал на первую страницу поиска.

Что посмотреть. На портале GeekBrains мы подготовили ряд вебинаров на тему поисковой оптимизации. Мы рассмотрели структуру сайта и как ее проектировать, узнали, какие слова важны для seo и где их находить. Разобрали must have инструменты для seo-оптимизатора и определились, нужны нашему сайту ссылки или нет. Смотрите вебинары в записи, если будут вопросы, задавайте на форуме:

Ключевые составляющие SEO-оптимизации

Ключевые составляющие SEO оптимизации. Часть 2

Что попробовать. Попробуйте собрать семантическое ядро для сайта. Для этого воспользуйтесь бесплатным инструментом Wordstat.Yandex. Составьте на основе ядра структуру будущего ресурса. Подумайте, на основе каких слов сделать большие разделы, а какие ключи оставить для написания статей. Потренируйтесь в написании title, description и h1. Затем найдите ресурс похожей тематики в топе поисковой выдачи и сравните его с вашим вариантом оптимизации.

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

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

Один из наших читателей, Александр Морозовас, перевел статью Дженни Гоув “What Makes a Good Mobile Site?”. Предлагаем его перевод вашему вниманию.

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

Участники исследования тестировали мобильные версии сайтов на своих устройствах iOS и Android, оформляя покупки в интернет-магазинах или бронируя отели. После выполнения этих заданий они рассказывали о своих впечатлениях от мобильных версий.

Домашняя страница и навигация по сайту

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

Пользователи должны видеть call-to-action в центре страницы

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

Сделайте меню коротким и удобным

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

Сделайте простым возврат к домашней странице

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

Не позволяйте рекламным баннерам скрывать контент

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

Сделайте поиск по сайту заметным

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

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

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

В примере слева поиск реализован грамотно: показываются только детские вещи (пользователь делает поисковый запрос в интернет-магазине детской одежды). Справа — пример неудачно реализованного поиска: он показывает все, где есть слово «дети».

Разработайте фильтры для простых запросов

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

Покажите пользователям, как правильно делать поисковые запросы

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

Коммерция и конверсия

Поймите, куда хочет попасть и что там найти ваш клиент, и помогите ему в этом.

Позвольте пользователям просматривать сайт до регистрации

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

Создайте для пользователей возможность использовать гостевые аккаунты

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

Используйте существующую информацию о пользователе для его удобства

Настройте автозаполнение полей для зарегистрированных пользователей.

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

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

Сделайте простым переключение между устройствами

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

Форма ввода

Обеспечьте удобные переходы между формами.

Сделайте ввод информации удобным

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

Упрощайте ввод информации

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

Предложите визуальный календарь для выбора даты

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

Минимизируйте ошибки в формах

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

Повышайте КПД дизайна

Активно используйте автозаполнение: например, пусть пользователи вносят информацию в  формы с предварительно заполненной датой. Вносите сами известную вам информацию в поля.

Юзабилити и форм-фактор

Воспользуйтесь мелочами, которые усиливают возможности сайта.

Оптимизируйте ваш сайт

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

Не заставляйте пользователей работать с неудобными им масштабированием и прокруткой

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

Добавьте возможность увеличить фотографию продукта

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

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

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

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

Пусть у пользователя будет одно окно в браузере

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

Избегайте надписи «Полная версия сайта»

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

Объясните пользователю, почему вам важно знать его местонахождение

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