Сегодня терминами UI и UX переполнены все ресурсы, относящиеся к дизайну. Начинающие дизайнеры (и не только!) зачастую смешивают эти понятия и используют их как одно целое. Но это не так.

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

Что такое пользовательский опыт, или UX

Аббревиатура UX расшифровывается как User Experience (пользовательский опыт) — это ощущения пользователя, возникающие при взаимодействии с продуктом, сервисом или услугой.

А UX-дизайн — это создание полезных, простых и приятных в использовании продуктов.

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

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

• Профилирование пользователей (User Profiling) — изучение личных данных пользователей: пол, возраст, страна, интересы и прочее.
• Создание или улучшение информационной архитектуры, то есть информационной структуры продукта.
• Исследования пользовательского поведения. Как долго пользователь ищет кнопку «Купить»? Почему уходит со страницы, не достигает цели?
• Изучение удобства использования. Комфортно ли работать с приложением при слабом интернет-сигнале? Приносят ли уведомления пользу или только раздражают пользователя?
• Работа с контентом. Сколько информации должно быть на первом экране лендинга? Какой текст стоит разместить на кнопке? Сколько слов должно помещаться на одной строке, чтобы было удобно читать?

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

Что такое пользовательский интерфейс, или UI

User Interface (пользовательский интерфейс) — это способ взаимодействия пользователя с продуктом, сервисом или услугой. UI-дизайнеры фокусируются на том, как выглядит интерфейс: меню, поиск, фильтрация на сайте и другие элементы. Цель UI-дизайнера — создать эстетичный дизайн интерфейса продукта.

UX-дизайн похож на науку, где все решения отталкиваются от цифр и закономерностей, в отличии от UI-дизайна — это искусство, где дизайнер фокусируется на притягательности и эстетике всех элементов — от шрифта и цветов до анимации элементов.

Посмотрим, каковы обязанности UI-дизайнера.

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

Вспомним пример про тропинку, которую люди предпочитают тротуару. Здесь UI-дизайнер решает, как сделать ее эстетически привлекательной: посадить вдоль цветы, оформить плиткой. Чтобы по тропинке было не только удобно, но и приятно ходить.

Зачем придумали это различие UI от UX?

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

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

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

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

Кто он — UI/UX-дизайнер?

Несмотря на различие этих терминов, на практике они используются чаще вместе, чем по отдельности. Кто же такой этот загадочный UI/UX-дизайнер и можно ли вообще так говорить?

User Interface является инструментом User Experience. Так что эти понятия по факту зависят друг от друга и отдельно в принципе не работают — это не эффективно.

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

Можно ставить эти понятия рядом, но ни в коем случае не объединять: UI- и UX-дизайнеры фокусируются на разном. И зачастую желание «быть универсальным» может на деле означать «быть везде бесполезным».

Кратко

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

Несмотря на разницу, эти понятия тесно связаны: UI является частью UX, поэтому UX-дизайнеры в разработке продукта играют более важную роль. Продуманный интерфейс может быть не очень красивым, но прекрасно работающим (например, Facebook) — а вот неэффективный пользовательский опыт красивым интерфейсом не спасешь.

Советуем сфокусироваться на чем-то одном, а не пытаться изучить все и сразу. Если вам больше нравится творческий аспект профессии, устремитесь в UI-дизайн. А если вы любитель аналитики и готовы оставаться в тени, но делать вещи удобнее и проще, то стоит учиться на UX-дизайнера.

Курсы GeekBrains по самым востребованным профессиям в дизайне:

1. Факультет дизайна с гарантированным трудоустройством.
2. Профессия «Веб-дизайнер». Обширный онлайн-курс с возможностью пройти онлайн-стажировку в Mail.ru Group.
3. Профессия «Графический дизайнер». Онлайн-курс для самых творческих людей в мире дизайна.
4. Дизайнер интерфейсов (UI/UX). В этом онлайн-курсе навыки интерфейсного дизайна отрабатываются на реальных задачах от крупных компаний.
5. Гейм-дизайнер. Курс для тех, кто хочет войти в игровую индустрию и начать зарабатывать в ней.

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

Стали ли понятнее различия терминов UI и UX? Как вы воспринимали их до прочтения статьи? Делитесь в комментариях!

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

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

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

Анатомия шрифта

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

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

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

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

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

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

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

Верхний выносной элемент — элемент строчных букв, выходящий за верхнюю линию (например, в буквах б и в).

Нижний выносной элемент — элемент строчных букв, опущенный ниже линии шрифта (например, в буквах у и ф).

Засечка (сериф) — короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака. У рубленых шрифтов засечки отсутствуют, отсюда и их название «sans serif» («без засечек»).

Понятие шрифта и его характеристики

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

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

Гарнитура — это семейство начертаний шрифта, имеющих общие стилевые особенности. Есть множество известных гарнитур: Helvetica, Futura, Roboto и другие.

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

Текст этой статьи набран гарнитурой Roboto, шрифтом Roboto Regular. Зачастую дизайнеры без углубленного знания о том, что такое типографика, совмещают понятия гарнитуры и шрифта и считают, что текст этого предложения «набран шрифтом Roboto». С точки зрения терминологии это грубая ошибка, но на качество повседневной коммуникации между дизайнерами она не влияет.

Начертание — это внешний вид шрифта. Большинство гарнитур предполагают стандартный набор начертаний: Regular (обычное), Italic (курсивное), Semibold (полужирное) и Bold (жирное).

Типографская система мер

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

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

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

Кегль — размер буквы или знака по вертикали, включающий ее нижние и верхние выносные элементы. Единица измерения кегля — пункт (pt). Например, популярны кегли шрифта в 14, 16, 24 pt и многие другие.

Интерлиньяж (межстрочный интервал) — это вертикальный интервал между строками текста. Измеряется в пунктах, но его размер зависит от кегля шрифта. Интерлиньяж в 120 % от размера шрифта принято считать минимальным. То есть при шрифте в 14 pt интерлиньяж составит по меньшей мере 17 pt. Размер межстрочного интервала зависит от кегля и начертания шрифта, а также от расположения текста, поэтому универсальной формулы по вычислению интерлиньяжа нет.

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

Полезные советы и ресурсы по теме

• Прочитайте книгу Александры Корольковой «Живая типографика». Это базовое пособие о типографике для начинающих дизайнеров, которое доступно бесплатно.
• Еще один электронный ресурс, но по платной подписке — учебник «Типографика и верстка» издательства «Бюро Горбунова». Обратите внимание на оформление сайта — это лучшая реклама содержания.
• На начальном этапе полагайтесь на готовые подборки сочетаний гарнитур. Они есть на множестве сайтов: FontPair, Fontjoy, Canva Font Combinations и других.
• Используйте не более 2–3 гарнитур в одном проекте. Это правило универсально для задач любой направленности. Если вы только начинаете изучать что такое типографика, рекомендуем сперва ограничиться одной гарнитурой.
• Установите расширение WhatFont для Chrome или для Safari, чтобы быстро узнать название понравившегося шрифта.
• Типографика построена на акцентах. Используйте начертания и кегль, чтобы расставлять их и создавать структуру текста. Традиционно заголовок имеет жирное начертание и значительно больший кегль, чем основной текст. Например, он может быть выполнен шрифтом Helvetica Bold 48 pt, а основной текст — Helvetica Regular 14 pt.

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

В этом материале мы собрали для вас проверенные ресурсы, которыми на самом деле пользуются дизайнеры — ежедневно и бесплатно. Сохраняйте и не забывайте делиться любимыми ссылками в комментариях!

Unsplash

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

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

Freebie Supply

Сегодня Freebie Supply, пожалуй, самый функциональный ресурс по поиску бесплатных файлов. В основном ориентирован на дизайнеров, но пригодиться может и разработчикам, и менеджерам. Охватывает все современные инструменты в сфере дизайна: Figma, Photoshop, Adobe XD, Illustrator, Sketch, Google Slides и другие.

Большой плюс Freebie Supply в том, что для скачивания файлов не нужно даже регистрироваться — только нажать кнопку «Скачать». Можно оформить бесплатную подписку, и еженедельно вам на почту будет приходить подборка новых материалов.

Google Fonts

Вы слышали о Google Fonts? В век лицензирования и борьбы с пиратством советуем задумываться, используя шрифты. Для собственных работ вы, конечно, можете брать и пиратские. Но если проект коммерческий, применение нелицензированных шрифтов может обернуться судебным иском.

Google Fonts — это библиотека, в которой более 800 свободно распространяемых шрифтов. Можно воспользоваться интерактивным предпросмотром и подобрать «тот самый» шрифт для любого проекта. А если поначалу вам сложно определиться, сохраните в закладки подборку шрифтовых пар Google Fonts.

ManyPixels Illustrations Gallery

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

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

Tilda Icons

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

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

UI Gradients

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

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

Coolors

Сервис по генерации цветовых палитр Coolors встречается в каждой подобной подборке, потому что он действительно классный! Как часто вы сталкиваетесь с тем, что вам нужно подобрать гармоничное сочетание трех или четырех цветов? Если вы дизайнер — почти ежедневно. Нет единой методологии: одни дизайнеры создают палитры «как чувствуют», другие — копируют чужие работы, третьи смотрят подборки на Pinterest. А Coolors — решение универсальное и подойдет всем.

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

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

В марте Лия уже делилась первыми впечатлениями от учебы в GeekBrains на вебинаре «Как стать дизайнером и получить первый заказ на фрилансе». Я решила подробнее расспросить ее о пути в новую профессию и о том, чем она занимается сейчас.

— Лия, привет! Первый вопрос — о выборе специальности. Почему изо всех направлений дизайна тебя привлек именно веб?

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

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

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

— Как ты пришла в GeekBrains и почему решила, что именно здесь хочешь осваивать профессию?

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

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

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

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

— Сейчас ты на финишной прямой: учишься уже семь месяцев — до выпуска остался один. Какие проекты за время обучения ты сделала и какие еще впереди?

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

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

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

Скриншот: миниатюры макетов разных страниц сайта

Дальше сарафанное радио помогло найти новых заказчиков. Меня привлекли к созданию сайта на конструкторе Tilda. Потом я делала лендинг и еще несколько небольших проектов.

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

Один из баннеров для музыкального фестиваля

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

— А можно примеры таких задач?

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

Были задания по Illustrator: повторить изображение полностью в векторе, чтобы «набить руку» в использовании инструмента. Мы рисовали лендинги, баннеры, логотипы. Вот такого плана были практические задачи.

— А проекты, выполненные на фрилансе, тебе засчитывают за учебные?

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

Фрагмент лендинга для кафе

— Какие курсы ты успела пройти к моменту, когда начала работать?

— Мы как раз закончили изучать основные инструменты. Возможности Adobe Photoshop я уже знала как любитель — обрабатывала с его помощью фотографии. Но мы познакомились с редактором Figma, очень удобным для работы над дизайном сайтов и интерфейсов. Дальше был курс «Основы веб-дизайна», где мы узнали от Сергея Чиркова о типографике, работе с цветом, композиции и многом другом.

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

— Что в процессе обучения давалось сложнее всего? Насколько быстро удалось освоить инструменты?

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

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

Фрагмент главной страницы сайта строительной компании

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

— Какие темы по ходу обучения принесли тебе больше удовольствия и открытий?

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

• Работа с брифом — лекции Артура Громадина, на которых мы очень подробно разобрали начальный этап работы над проектом. Это здорово, потому что эта фаза — одна из важнейших: не только проясняет, что предстоит сделать, но и задает общий тон общения с заказчиком, позволяет сторонам оценить профессионализм друг друга, умение организованно вести проект. Нам показали близкий к идеальному вариант, и я уверена, что не раз еще применю эти знания на практике.
• Дизайн-мышление — тема в принципе очень интересная, и по ней мы прослушали несколько лекций от Михаила Шишкина. Считаю, что прокачка мозга в этом направлении помогает дизайнеру генерировать идеи не только качественнее, но и быстрее.
• Продуктовый дизайн — материал по теме нам преподнесли тоже интересно. Мы научились смотреть на продукт в целом, а не только с точки зрения дизайна.

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

— На курсе вы уже изучали тренды дизайна?

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

— Какие тренды интересны лично тебе? Что вдохновляет, что хочется использовать?

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

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

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

В следующем проекте хочу поэкспериментировать со шрифтами. Еще одна тема, очень интересная мне в перспективе — анимация.

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

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

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

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

— У тебя есть любимые паблики для вдохновения? На кого ты ориентируешься и за кем следишь в мире дизайна?

— Да, разумеется. Это не только личности, но и агентства:

• «Логомашина», основанная Романом Горбачевым.
• Mail.ru, Юрий Ветров и его дайджест продуктового дизайна.
• Артемий Лебедев, конечно.
• Михаил Шишкин — основатель студии Shishki.pro и школы дизайна Controforma (восторг!).
• Андрей Кожанов — основатель Высшей школы брендинга. Очень информативные лекции.
• Юрий Гордон — типограф и шрифтовой дизайнер. Интересные лекции, работы.
• Дмитрий Черногаев — типограф, сооснователь и совладелец агентства «Артоника».
• Вова Лифанов — основатель агентства «Супрематика» (отдельный респект за ребрендинг «Буше»).

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

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

Люблю Behance за то, что некоторые проекты там подробно «расписаны». Авторы составляют длиннющие объяснения: почему они выбрали именно такие средства и решения.

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

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

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

— Спасибо огромное, что поделилась историей. Желаю работать с профи и скорее достичь следующей ступени!

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

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

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

Определитесь с направлением в дизайне

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

• Нравится рисовать, придумывать образы и воплощать творческие идеи? Рассмотрите профессию графического дизайнера. Он создает айдентику, логотипы, занимается версткой печатных материалов, иллюстрациями и многим другим. Подойдет тем, кто мечтал совместить художественное хобби и работу.
• Восхищаетесь визуальной частью интерфейсов, можете скачать приложение только из-за красивой иконки или предпочитаете один сервис другому исключительно благодаря оформлению? Возможно, вы станете хорошим визуальным дизайнером (UI). Эта профессия подойдет тем, кто отличается визуальным перфекционизмом и хорошим вкусом.
• Вам интересно продумывать логику работы интерфейсов и анализировать продукт? Дизайнер интерфейсов (UX) изучает потребности пользователя, тестирует гипотезы и работает с данными. По этому пути стоит идти людям с развитым аналитическим мышлением.
• Если вам нравится работать над продуктом комплексно, развивать его не только как работник, но и как владелец, — присмотритесь к специальности продуктового дизайнера.
• Гейм-дизайнер разрабатывает правила и содержание игрового процесса. Это профессия для тех, кто увлекается играми и хотел бы участвовать в их создании.

Окружите себя дизайном

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

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

Настройте информационное поле вокруг себя. Ежедневно уделяйте 30 минут просмотру лучших работ на популярных порталах: Behance, Dribbble, Awwwards. Эта практика поможет быстрее сориентироваться в среде, ловить тренды и вдохновляться творчеством ведущих дизайнеров.

На кого подписаться:

1. Кириллица · дизайн. Полюбите кириллицу благодаря регулярным подборкам свежих шрифтов в этом Telegram-канале. Полезно не только для новичков, но и для тех, кто давно работает в дизайне.
2. Design & Productivity. Канал экс-дизайн-директора Яндекса, Кости Горского, который пишет про дизайн и продуктивность.
3. Digital наизнанку. Канал о русском digital с упором на дизайн и веб-разработку.
4. Блог «Дизайн-кабак». Тематический блог «для своих», который не похож на большинство информационных порталов по дизайну. Здесь вы найдете советы, статьи и просто истории от состоявшихся дизайнеров.
5. Land-book. Большая подборка лендингов для вдохновения.
6. Graphic Story. Telegram-канал для графических дизайнеров и всех, кто любит смотреть на красивые работы.
7. Дайджест Юрия Ветрова. Блог дизайн-директора Mail.ru Group. Обязательно к прочтению дизайнерам интерфейсов и продуктовым дизайнерам.
8. Medium. Популярная платформа для публикации статей на любые темы. Для знающих английский язык это просто находка, так как здесь ведут блоги выдающиеся дизайнеры со всего мира.
9. Tilda Education. Образовательный журнал для дизайнеров — практические руководства по дизайну и маркетингу для цифровых проектов.
10. Бюро Горбунова. Ежедневные инсайты от одного из ведущих агенств России.

Освойте дизайнерскую базу

Самая большая проблема, с которой сталкиваются новички, — это недостаток дизайнерской базы знаний, в которую входят:

1. Графические редакторы и инструменты.
2. Типографика и верстка.
3. Композиция и сетка.
4. Текст и редактура.
5. Управление и результаты.

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

Графические редакторы и инструменты:

1. Видеокурс по Figma. Освойте за 6 уроков самый популярный графический редактор среди дизайнеров интерфейсов.
2. Векторная графика в веб-дизайне: основы и практика. Бесплатный вебинар с практической частью в Adobe Illustrator.
3. Основы Adobe Photoshop. Знать каждому, учить упорно!
4. Бесплатный интенсив «Основы веб-дизайна». Реальное погружение в профессию. За 2 часа вы создадите лендинг и узнаете, как профессионалы работают в Adobe Photoshop.
5. Как создать логотип для приложения в Sketch. Даже если вы далеки от графического дизайна или только начинаете путь в нем, посмотрите этот вебинар — и сможете создать свой первый логотип приложения в графическом редакторе Sketch.

Типографика и верстка:

1. Маст-хэв для новичков — «Живая Типографика» Александры Корольковой. Бесплатная электронная версия.
2. Электронный учебник «Типографика и верстка» издательства Бюро Горбунова. Доступен по платной подписке. Обратите внимание на оформление сайта — это лучшая реклама содержания.
3. Джеймс Крейг, Ирина К. Скала «Шрифт и дизайн». В книге много иллюстраций, она читается быстро и легко. Рекомендуем бумажную версию.
4. Ян Чихольд «Новая типографика». Фундаментальное исследование типографики ХХ века. Материал довольно сложный — подойдет тем, кто хочет углубиться в предмет.
5. Эмиль Рудер «Типографика». Книга даст базовые знания о контрасте, ритме, пропорциях и цвете в типографике.

Композиция и сетка:

1. Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне». Автор на конкретных примерах рассказывает о применении модульной системы в оформительской работе: в дизайне книг, выставочных пространств, корпоративной полиграфии. Издание адресовано широкому кругу дизайнеров и оформителей.
2. Пол Рэнд «Дизайн: форма и хаос». Знали ли вы, что автор этой книги считается самым влиятельным графическим дизайнером ХХ века? Именно он создал логотипы IBM, Ford и многие другие.
3. Юрий Гордон «О языке композиции». Как работает композиция — на примерах известных скульптур и произведений искусства.
4. И следите на Dribbble за этими авторами: BestServedBold, Geex Arts, outer.

Текст и редактура:

1. Максим Ильяхов, Людмила Сарычева «Пиши, сокращай». Обязательно к прочтению всем, кто использует текст в работе.
2. Бесплатная рассылка о дизайне текста от Максима Ильяхова.
3. Скачайте «Эгею» и создайте свой блог (это бесплатно). Практикуйтесь каждый день — пишите статьи, посты и рассказы, применяя изученные приемы редактуры.

Управление и результаты:

1. Работайте эффективно по технике управления временем Pomodoro.
2. Освойте самоорганизацию с книгой Дэвида Аллена «Как привести дела в порядок».
3. Юрген Апелло «Agile-менеджмент. Лидерство и управление командами». С помощью этой книги вы сможете глубже погрузиться в процесс управления проектами и создать собственный подход к задачам — в соответствии с вашими потребностями.

Пройдите курсы

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

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

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

Образовательные программы GeekBrains по дизайну:

1. Факультет дизайна с гарантированным трудоустройством. Здесь вы освоите профессию с нуля за 2 года, выполните дипломный проект и получите свидетельство установленного образца о том, что прошли профессиональное обучение.
2. Профессия «Веб-дизайнер». Обширный онлайн-курс с возможностью пройти онлайн-стажировку в Mail.ru Group. За 8 месяцев вы сможете создать 5 проектов для портфолио и по окончании обучения получить сертификат.
3. Профессия «Графический дизайнер». Это онлайн-курс, который расскажет все об индустрии. Как и во всех профессиях GeekBrains, акцент на практическом аспекте обучения: в курс входят вебинары в реальном времени, задания для самостоятельной работы, которые проверяет преподаватель, и проекты, на которых вы сможете закрепить знания.
4. Дизайнер интерфейсов (UI/UX). В этом онлайн-курсе навыки интерфейсного дизайна отрабатываются на реальных задачах от крупных компаний. Он длится 8 месяцев, по окончании — сертификат и несколько проектов в портфолио.
5. Гейм-дизайнер. Курс для тех, кто хочет войти в игровую индустрию и начать зарабатывать в ней. Обучение состоит из погружения, специализации и стажировки — она включает разработку реальной игры, которую оценят эксперты рынка и инвесторы.

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

Создайте портфолио и резюме

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

На этом этапе поможет только практика и усердие. Самый популярный способ получить первый проект в портфолио — придумать задачу самому. Редизайн — отличный способ потренировать навыки и заявить о себе в профессиональном сообществе: на крупных порталах популярны «ребрендинги» мировых компаний. Посмотрите на несколько успешных работ с Behance:

1. Михаил Глазурин, Facebook redesign concept — более 15 000 просмотров.
2. Edson Chilundo, Apple Music Redesign — более 35 000 просмотров.
3. Daniel Tan, Daphnie Loong, Starbucks — UI/UX Redesign — более 85 000 просмотров.

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

Как только в вашем портфолио появились первые работы, надо оформить резюме и опубликовать его на HeadHunter, SuperJob, 6nomads и других подобных порталах. Также используйте связи — расскажите в социальных сетях, что ищете работу. Среди ваших знакомых вполне может оказаться тот, кто поможет в трудоустройстве.

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

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

Метод Джеффа

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

Чтобы улучшить качество UX-исследований, Джефф придумал, как узнать истинное отношение респондентов к бренду. Для этого он разработал метод и испытал его на компаниях из топ-50 рейтинга Independent. Он состоит из семи шагов:

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

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

Сократите список, комбинируя однокоренные и синонимичные слова: «банковское дело» и «банки» — «банк».

Подсчитайте частоту слов из общего списка. Например, в анализе бренда Citi слово «банк» встречалось 22 раза. Это 16 % от общего количества слов — 136.

Установите рейтинг отношения. Например, присвойте каждому слову количество баллов: оно может быть отрицательным («дешево» — минус один), нейтральным («бизнесмен» — ноль) и позитивным («веселье» — один). Обратите внимание, что определить характер слов иногда бывает затруднительно. Поэтому работайте с несколькими исследователями, чтобы повысить объективность.

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

1 + 1 + (-1) + 0 + 0 = 1/5 = 20 %. Коэффициент симпатии может быть от –100 % (все слова отрицательные) до 100 % (только положительные ассоциации). Реальный коэффициент отношения к Honda — 63 %.

Ищите отрицательные слова, потому что именно они вскрывают слабые места брендов. Например, у Amazon коэффициент симпатии составляет 91 %, но некоторые недовольны доминированием компании. Люди не говорили об этом прямо, но использовали отрицательные слова — «всепоглощающий» и подобные.

Результаты исследования

Джефф Сауро вычислил коэффициент симпатии для каждого бренда. Средний показатель составил 39 %. Люди хуже всего воспринимают Louis Vuitton — коэффициент всего 6 %, а лидером симпатий стал Амазон — 91 %. Про Apple чаще всего говорили «дорогой» и «переоценено». За ним идут Mercedes-Benz, Louis Vuitton, Audi и Porsche — люди считают, что на товары этих марок цена завышена.

Другие способы оценить отношение к бренду

Net Promoter Score — методика, которая оценивает, насколько клиенты готовы рекомендовать бренд друзьям и знакомым. Для этого надо задать вопрос: «С какой вероятностью по шкале от нуля до десяти вы порекомендуете нас своим друзьям?» Респонденты выбирают ответы от 0 (никогда) до 10 (точно порекомендую). Затем ответы сортируются по количеству баллов на три группы: «критики» (до 6 баллов), «нейтралы» (7–8 баллов) и «промоутеры» (9–10 баллов).

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

Customer Loyalty Index — расширенный индекс лояльности. Он тоже основан на вопросе про рекомендации, но еще охватывает будущие покупки. Задайте респондентам три вопроса:

1. Какова вероятность, что вы порекомендуете нас своим друзьям?
2. Какова вероятность, что вы купите наш продукт еще раз?
3. Какова вероятность, что вы попробуете другие наши продукты и услуги?

Индекс оценивают по шестибалльной шкале: «точно да» — 1, «точно нет» — 6. Необходимо сложить три ответа и высчитать средний балл.

Customer Satisfaction Index — индекс удовлетворенности. Он позволяет оценить, насколько клиенты довольны продуктами или услугами компании. Индекс учитывает не только удовлетворенность определенными качествами продукции, но и то, насколько они важны для человека.

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

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

Кратко  

Отношение людей к бренду можно измерить. Для этого рассчитываются индексы NPS, CLI и CSI и применяется ассоциативный метод Джеффа Сауро. В любом случае расспросите несколько респондентов подробнее, чтобы не только оценить общее восприятие, но и узнать детали.    

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

Killed by Google

Список проектов, которые когда-то открыл или купил Google, а потом свернул. Сейчас их 149, но кажется, что подборка будет пополняться: за первые три месяца 2019 года компания закрыла девять проектов. На сайте они тоже есть — Inbox, Google+, сокращатель ссылок Goo.gl и другие.

Проекты представлены в виде списка со ссылками, небольшим описанием и датами «жизни». Google Graveyard для удобства поделено на разделы: кладбище всех проектов, приложений, сервисов, устройств и систем. Есть поиск по названиям.

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

Pixelator

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

Что умеет Pixelator:

• редактировать изображение с помощью набора фильтров-ползунков: они обрабатывают пикселизацию, цветовую палитру, сглаживают картинку;
• работать с множеством изображений любого стиля и настраивать пиксельность. На главной странице показаны примеры — пикселизация рисунка, дудла, фотографии;
• экспортировать в разные форматы — PNG, BMP, JPG, GIF, TIFF;
• преобразовывать изображения в Telegram с помощью бота. Загружайте картинку, а бот пришлет в ответ пиксель-арт.

Can’t Unsee

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

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

Calculate your carbon footprint

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

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

Тест разрабатывали в основном для Великобритании, но пройти его может житель любой страны. Я попробовала, и результат показал отрезвляющую цифру — углеродный след в 19 тонн СО 2 в год. Столько же выбрасывает в атмосферу путешествие на 45543 мили в автомобиле или три больших дома.

Jing Zhang illustration

Портфолио иллюстратора из Китая Цзин Чжана с инфографикой. Есть и другое портфолио с анимацией, но в подборку я включила именно это, потому что мало кто умеет делать хорошую инфографику. Описать работы сложно, рекомендую посмотреть самостоятельно — это крайне проработанные иллюстрации в современном стиле, иногда анимированные. Цзин представляет в инфографике самые разные темы: город будущего, Big Data, природу и человечество, карты городов и стран, забавные факты о Nintendo, даже состав коктейля Сангрия в виде схемы.

Nuclear Dissent

Интерактивная документалка об ужасе ядерного оружия. Опенинг знакомит с предысторией: «С начала 60-х до середины 90-х Франция провела 200 ядерных испытаний во Французской Полинезии. Фильм рассказывает истории жертв ядерных испытаний и активистов, которые боролись за справедливость».

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

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

Carbon

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

Bruegel

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

Сайт интересен не только любителям искусства, хотя на нем туча информации и о самом художнике, и о его картинах. Здесь можно послушать лекцию искусствоведов и детально рассмотреть картины. Даже любителям кино сайт понравится: они смогут почитать о картинке из фильма Тарковского «Солярис» — «Охотники на снегу» — и узнать, почему Брейгель рисует так много деталей, которые сложно различить. Разработчики заинтересуются сеткой в стиле Metro UI CSS, а дизайнеры вдохновятся цветовой палитрой в приглушенных оттенках, которая в последнее время полюбилась музеям и галереям.

Блог «Медузы» на Medium

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

О чем здесь можно узнать:

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

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

Многие воспринимают игру как противоположность обучению. Как мамы, которые жалуются, что их дети «не хотят учиться, а только сидят за компьютером». При этом чадо может и в Minecraft играть, и учиться кодить на Python. Но это ж игрушки, верно?

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

Игровая психология в изучении языков

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

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

Чтобы запомнить текст песни, которая вам понравилась, будет вполне достаточно 3–4 прослушиваний.

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

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

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

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

2. Игры улучшают восприятие на слух

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

3. Игры упрощают восприятие грамматики

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

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

4. Вы полностью погружаетесь в языковую среду

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

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

5. Игры повышают мотивацию

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

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

6. Игры улучшают мышление, память, реакцию

С помощью игр вы можете улучшать мышление в целом. Вот несколько примеров:

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

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

Выбираем жанр компьютерных игр для прокачки английского

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

Квесты Point-and-click

Что это? Игры на поиск предметов и взаимодействие с ними. Часто они отличаются простыми сюжетами в фантастических сеттингах и несложными заданиями.

Чем полезно? Вы изучаете лексику на конкретных примерах. Если на картинке нужно найти «Scissors», а вы не знаете, что это, — можно воспользоваться подсказкой, которая укажет на предмет. И станет ясно, что это ножницы.

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

Стоит попробовать: «Нэнси Дрю», The Adventures of Sherlock Holmes, L.A. Noire, Syberia, Deponia.

RPG — ролевые игры

Что это? Вы играете роль персонажа, у которого своя история и возможности. В рамках сюжета вы исследуете окружающий мир, общаетесь с NPC (Non-Player Characters — неигровыми персонажами), выполняете квесты. У героя есть глобальная миссия или цель, к которой он идет на протяжении всей игры.

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

Стоит попробовать: The Witcher, Kingdom Come: Deliverance, The Elder Scrolls, Neverwinter Nights.

MMO — онлайн-игры

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

Чем полезно? Общением с реальными игроками со всего мира. Регистрируйтесь на иностранном сервере, становитесь членом развитого клана или альянса — и переписывайтесь в чате или разговаривайте через микрофон. Отличный вариант, чтобы побороть стеснение и начать общаться на ранних этапах изучения языка.

Стоит попробовать: Lineage II, World of Warcraft, Archeage, Perfect World.

Action

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

Чем полезно? Экшн-игры учат воспринимать речь на слух. Для общего развития в плане языка они менее полезны, чем RPG или квесты. Зачастую диалоги нельзя приостановить, поэтому при уровне знаний Intermediate и ниже смысл будет ускользать. Но для разнообразия полезен и этот формат.

Стоит попробовать: GTA V, Far Cry, Call of Duty, Fallout, Assassins Creed, Dishonored, Mafia, BioShock.

Симуляторы жизни

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

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

Стоит попробовать: Sims, Second Life.

Советы для прокачки английского с помощью компьютерных игр

1. Держите на смартфоне открытый словарь, чтобы смотреть значения слов и фраз, не отвлекаясь от игры.
2. Все новые выражения записывайте, чтобы повторять в дальнейшем. Узкоспециализированную и фэнтези-лексику можно фиксировать по вашему усмотрению.
3. Не переводите мысленно английскую речь на русский язык — старайтесь сразу воспринимать образы. Это ускорит понимание и даст толчок к активному развитию языка.
4. Выбирайте игры, которые вам нравятся. Не старайтесь играть через силу — вы не получите удовольствия, поэтому и английский не прокачаете.
5. Не стоит слишком увлекаться играми. Часа в день будет вполне достаточно, чтобы расслабиться и поработать над английским. Если играть дольше, результативность изучения новой лексики сильно упадет.

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

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

И, конечно, бонусы для читателей.

Хотите прокачивать английский самостоятельно?

Ловите промокод на 2 месяца премиум-подписки на онлайн-курсы от EnglishDom.

Готовы учить, но мешает график, нет времени на дорогу или не нашли «своего» преподавателя?

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

Записывайтесь на пробное занятие в EnglishDom — это бесплатно.

А по промокоду GB_read_skype — при первой оплате 2 урока в подарок.

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

Что почитать у Джона Яблонски

Be the Wolf — о том, чему может научиться дизайнер у мистера Вульфа из «Криминального чтива». Уинстон Вульф из фильма Тарантино оказал большое влияние на Джона в профессиональном смысле. Персонаж Харви Кейтеля появляется в небольшом эпизоде для того, чтобы срочно исправить ситуацию, в которую попали главные герои. Мистер Вульф изящно с этим справляется, оставаясь хладнокровным в экстремальных условиях. Этому Джон Яблонски и призывает дизайнеров: быть спокойными и собранными в любой ситуации, расставлять приоритеты, делегировать задачи, всегда оставаться надежными и твердыми. Чек-лист мистера Вульфа для полного контроля над ситуацией вы найдете в статье.

Если вы не знакомы с фильмом или забыли эпизод с Уинстоном Вульфом, посмотрите его, чтобы понять, о чем говорит Джон

Thoughts on Productivity — методы повышения продуктивности. Джон рассматривает несколько принципов, которые помогли ему работать эффективнее: технику Pomodoro, метод Джерри Сайнфелда, коробку Эйзенхауэра и даже пользу от прокрастинации. Методики он подкрепляет историей их появления и реальными примерами. Вот как работает метод пунктирной линии:

«У Тупака Шакура была относительно короткая, но плодотворная музыкальная карьера. Только за последние 8 месяцев он выпустил 150 песен — по три за одну запись в студии. Он создал достаточно материала для нескольких посмертных альбомов и оставил много неизданной музыки. Тупак добился впечатляющего результата, следуя принципу пунктирной линии: очень быстро записывал треки, в основном за один дубль, а позже возвращался к ним, чтобы доработать и записать недостающие части».

Designing with Occam’s Razor — как классический принцип решения проблем поможет дизайнеру улучшить проект. Усложнение интерфейсов — одна из главных дизайнерских проблем, пишет Джон. Даже опытный дизайнер часто создает слишком сложное решение: увлекается деталями, которые в итоге путают пользователей. Задача дизайнера — сделать сложное простым, и для этого можно руководствоваться принципом бритвы Оккама. О нем Джон рассказывает в статье, подкрепляя теорию цитатами известных людей. «Good design is as little design as possible», — фраза дизайнера бренда Braun Дитера Рамса, которой можно описать месседж статьи.

Какие работы Джона Яблонски посмотреть

Swiss in CSS — знаменитые примеры швейцарского графического дизайна, анимированные с помощью CSS. Этот сайт — дань уважения швейцарской типографике, которая до сих пор считается эталоном дизайна. Джон Яблонски придал плакатам и обложкам более современный вид с помощью анимации:

storytelling.design — коллекция интерактивных историй. Сайт открывается фразой: «После питания, жилья и общения именно истории — то, что больше всего нужно человеку». Сторителлинг, или рассказывание историй, — основа человеческого опыта, говорит Джон. Мы делимся историями и узнаем их, чтобы развиваться или лучше понимать мир: так человечество учится на своих ошибках, берет пример с героев прошлого.

Презентации Джобса, наскальные рисунки, ветхий завет — примеры сторителлинга

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

Последние впечатляющие публикации:

Moment Zero — визуализация сейсмических данных Земли;

Nomadic Tribe — интерактивная сказка о кочевых племенах;

Nuclear Dissent — интерактивная документалка об опасности ядерного оружия.

King of soul — сайт в память о соул-музыканте Отисе Реддинге, песни которого до сих пор исполняют Jay Z и Florence and the Machine. Джон — поклонник его творчества, а также сторителлинга, поэтому он решил совместить два своих увлечения и создал что-то вроде веб-мемориала. И это все, что можно рассказать о сайте, — его нужно изучить самостоятельно. История жизни и творчества Отиса Реддинга в виде лендинга с рассказом и архивными материалами, все это под песню «I’ve be loving you too long» — работа, которая заслуживает уважения.

После просмотра сайта полезно почитать историю его создания — Джон описал все в подробностях, от ресерча до подбора шаблонов JS.

Что почитать у Дейва Геддеса

Article Layout with CSS Grid — адаптивный макет статьи с помощью CSS Grid. Дейв хотел создать удобный макет для статей в своем блоге, в котором текст будет легко читать на мобильных устройствах, а гифки и примеры будут центрированы на странице. В качестве примера он взял Medium.com и в итоге нашел способ сделать такой макет на CSS Grid.

Джон сопровождает статьи фирменными иллюстрациями

Start a Gratitude Project — как начать проект благодарности. Дейв рассказывает, чем полезно делать проекты, которые дадут профит другим людям, а не вам в первую очередь. Для него проектом благодарности стала обучающая игра по CSS Grid, которую мы упоминали в публикации «Игры, чтобы попрактиковаться в верстке». Если кратко — в проекте благодарности вы можете освоить навыки и приемы, которые пригодятся в других, уже коммерческих, проектах.

Overlapping Grid Items — как сделать журнальный макет в вебе. В статье Дейв рассказывает, как с помощью CSS Grid создать гибкую сетку и имитировать журнальный стиль на сайте. Кроме обучающего материала Дейв демонстрирует построение макета на примере журнального разворота:

Character animation — большой рассказ о создании анимации в обучающих играх по CSS Flexbox и CSS Grid. Дейв рассказывает не только о методиках и инструментах — он делится фильмом, который лег в основу вселенной его игр, показывает нарисованные от руки концепты, итерации и то, как идея превратилась в результат:

Посмотрите другие статьи Дейва Геддеса:

Use Firefox for Layout. Почему браузер от Mozilla — лучший инструмент для разработчика.

Routine Success. Как привычный распорядок дел помогает достигать целей и минимизировать неудачи.