Страница телеграм канала Chulakov Design

chulakov_design logo

Chulakov Design

3747 подписчиков

Канал команды дизайна Студии Олега Чулакова. Заметки про аналитику, проектирование и дизайн систем. Без воды, копипаста и ссылок на трендовые новости. Мы входим в Топ-2 дизайн-студий и Топ-8 digital production по версии Tagline. design@chulakov.ru


Входит в категории: Технологии
Chulakov Design
26.06.2018 11:06
Студия открывает набор на второй поток курса по дизайну интерфейсов! Ведущие дизайнеры поделятся с вами своим опытом и на практике научат создавать интерфейсы на уровне компаний-лидеров индустрии. По итогам курса каждый студент выполнит дипломный проект, который можно будет использовать в своем портфолио. Самые успешные студенты получат возможность стать частью команды Студии. Все, что вам нужно знать о курсе: — старт: 15 июля; — продолжительность: 72 часа (2 месяца, 3 занятия в неделю с 19:00); — место проведения: г. Ростов-на-Дону. Ознакомиться с программой курса и подать заявку вы сможете на сайте: https://school.chulakov.ru
Читать

Chulakov Design
20.04.2018 15:04
Полускетч Для ускорения этапов согласования в дизайне часто используется скетчевая графика. Многие дизайнеры совершают распространенную ошибку: используют реальную, но плохо обработанную графику. Даже если несколько раз предупредить, что графика не финальная, глаз все равно будет цепляться за огрехи в обработке, и впечатление будет испорчено. Даже если вы не умеете рисовать, набросок от руки будет смотреться лучше, чем плохо вырезанный коллаж. То же самое касается и разукрашенного в фирменные цвета прототипа, который сопоставляется с дизайном. В презентации дизайна четко должна быть видна разница между итоговыми и скетчевыми участками. Без полусостояний.
Читать

Chulakov Design
18.04.2018 15:04
Любовь и ненависть Почему один продукт мы категорично воспринимаем в штыки, а другой готовы защищать от собственного правительства? Суть продукта — это множество факторов: PR, маркетинг, удобство, скорость работы и пр. Дизайнер всегда должен комплексно смотреть на эти вещи. Никакой PR не сделает неудобный продукт, который не решает задач пользователя, любимым. Также даже хороший продукт может убить излишняя монетизация. Дизайнер должен анализировать. Например, если стоимость продукта выше, чем у конкурентов, вы должны приложить в два раза больше усилий, чтобы объяснить пользователю преимущества, который он получит. Если он уступает в функционале — подчеркивать отличительные решения или давить на простоту использования. Дизайнер, который комплексно смотрит на задачу, намного больше ценится на рынке труда, чем тот, кто слепо следует брифу. Но свое виденье стоит всегда делать дополнительным, либо обсуждать еще до начала работ, чтобы не казалось, что вы игнорируете пожелания заказчика.
Читать

Chulakov Design
11.04.2018 14:04
Управление взглядом В ювелирных офлайн-магазинах витрины часто оформляют по принципу якорных товаров. Продукция разбивается на группы, в центр группы кладется самое яркое украшение — «солист», который цепляет глаз — а уже после него покупатель осматривает товары, которые находятся неподалеку. В дизайне стоит также в ключевых местах создавать якорные точки, которые вызывают интерес при беглом просмотре. Яркие фотографии, иллюстрации, иконки, даже врезки текста, выполненные более крупным шрифтом, привлекают внимание пользователя, и тогда он начнет всматриваться и в окружение. Особенно это важно для оформления длинных страниц. Опять же, стоит вспомнить принцип контраста: три ярких элемента, стоящие рядом, привлекают меньше внимания, чем один в окружении менее значимых.
Читать

Chulakov Design
09.04.2018 11:04
10 000 вариантов Часто дизайнер расстраивается, когда его макет не принимается. Ведь он усердно искал идеи и нашёл, на его взгляд, ту самую и единственную, и уже не может уйти от текущего варианта в сторону. Проблема кроется в том, что дизайнер думает, что идей больше не существует вообще, а в процессе работы он не пробовал отойти в сторону и набросать другие варианты — делал всё мысленно, предполагая, что такое не пройдёт. Дизайн — это решение проблемы определённым способом. Но проблему всегда можно решить 10 000 способами. Держите это в уме, и всегда будьте готовы перерисовать всё заново. Если вам не нравится текущий результат, сделайте в виде набросков другие варианты, попробуйте самую безумную идею, переверните всё вверх ногами и посмотрите, что получится. На такую попытку уйдёт всего несколько минут, и это позволит вам проверить направление или в случае успеха иметь в запасе ещё один вариант для клиента. Часто встречается и другая ошибка начинающих дизайнеров — не дожать идею до конца, решив, что от неё нет толку. В таком случае можно показать варианты старшим коллегам и спросить их мнение. В процессе работы над концепцией пробуйте разные подходы и не останавливайтесь на первом придуманном варианте. Это позволит протестировать идеи, увеличит скорость вашей работы и поднимет вас на новый уровень.
Читать

Chulakov Design
06.04.2018 11:04
Я, интерфейс Все сервисы стремятся сделать свой интерфейс более человечным, но при этом все больше задач хотят отдать под контроль «машине». Все голосовые помощники имеют свои имена, у них есть эмоции: они могут шутить и обижаться. Это позволяет пользователю ощущать связь с бездушным сложнейшим алгоритмом. Даже само имя притягивает взгляд пользователя и заставляет относиться к сообщению более лояльно. Например, у письма в почте с заголовком «Кристина подготовила для вас дайджест новостей за неделю» больше шансов на прочтение, чем у безликого сообщения от сервиса, даже если мы понимаем, что нет никакой Кристины. Старайтесь, чтобы пользователь как можно меньше чувствовал общение с машиной. Но нужно всегда видеть грань, ведь никто не любит, когда его обманывают. Очередной помощник-менеджер на сайте, который начинает диалог с банальной фразы, вызовет лишь раздражение у продвинутого пользователя.
Читать

Chulakov Design
04.04.2018 12:04
CJM После того, как вы тем или иным образом сформировали персонажей, разумным решением будет составить customer journey map, он же — пользовательский сценарий. При составлении CJM моделируется не точное соприкосновение с интерфейсом, а наилучший, стремящийся к идеальному, пользовательский и жизненный опыт. Сценарий должен быть реалистичным, отражать действительные этапы использования продукта и удовлетворять потребности конкретных персонажей. Результатом для вас будет несколько абзацев текста, величина которых зависит от глубины и сложности будущего проекта. Составить пользовательский сценарий несложно. Вы должны сразу определиться с двумя вещами: какая перед пользователем стоит проблема, и каким будет результат ее решения. Зная это, вы поэтапно начинаете описывать наиболее логичную и простую историю пользовательского пути. Например: У Максима заболел живот. Это его беспокоит, и он включает приложение. В нем есть доктор Мария, к которому Максим уже ходил. Он заходит в приложение и видит, что врач сейчас доступен для связи. Он отправляет сообщение с жалобой. Доктор Мария видит на экране телефона входящее уведомление из своего приложения. Она отвечает, что выпишет ему препараты для снятия симптомов и назначит приём. Мария вспоминает, что Максим когда-то приходил на приём, но подробностей она не помнит. Она заходит в профиль Максима и видит, что полгода назад он приходил к ней с подобной жалобой, и она поставила ему диагноз гастрит, сделала пометку о жалобах и выписала такие-то лекарства. Она смотрит, делает выводы из этого и назначает Максиму лекарства для снятия симптомов. Мария выбирает заготовленный заранее и проверенный курс из своей виртуальной аптечки, но приложение предупреждает, что у Максима есть аллергия на один из препаратов. Она заменяет его на подходящий аналог, корректирует некоторые параметры курса и делает назначение. Максиму приходит уведомление. Он соглашается с курсом. В расписании приёма лекарств теперь есть напоминания, благодаря которым он не будет забывать пить таблетки. Если Максим захочет, он сможет их отключить. Исходя из ранее поставленного диагноза, Мария решает что нужно проверить Максима с помощью специального оборудования, смотрит свой список назначенных приемов и выбирает время для Максима. Максиму приходит уведомление, он заносит его в свои предстоящие события. Завтра он получит уведомление о приеме ровно за 2 часа. Сценарий переписывается и дорабатывается до тех пор, пока он не устроит вас и клиента. Сценариев может быть несколько, это зависит от количества персонажей. В процессе составления похожего сценария у вас в голове начнут проясняться образы и варианты возможных решений. На этапе проектирования CJM будет вашей шпаргалкой и гарантом того, что вы не пропустите какой-либо шаг. Мы рекомендуем составлять подобные сценарии для любого сервиса, в котором больше одной страницы :)
Читать

Chulakov Design
02.04.2018 18:04
Отличные новости для читателей нашего канала! Если вы занимаетесь дизайном интерфейсов и мечтаете попасть в команду Студии, у вас есть шанс. Покажите нам все ваше мастерство, выполнив тестовое задание. Принимаем работы до 7 апреля. Все подробности по ссылке: https://chulakov.ru/career/designer-6
Читать

Chulakov Design
02.04.2018 11:04
10 правил хорошего юзабилити Иерархия Пользователь понимает и может быстро отделить важную информацию от второстепенной, понимает зависимость элементов и информации друг от друга. Понятность Пользователю необходимо объяснять все неочевидные аспекты интерфейса — делать подписи, давать подсказки или обучать, если это необходимо. Делать это нужно максимально кратко и понятно. Целевое действие Главное действие выделено на каждом шаге использования вашего продукта. Так пользователю будет понятно, куда двигаться дальше. Нельзя оставлять человека перед пустым экраном без явного дальнейшего действия. Навигация Пользователь всегда понимает, как найти нужную информацию, где он сейчас находится, как вернуться обратно, и что делать дальше. Контраст В хорошем интерфейсе контраст элементов между собой четко заметен. Так пользователи понимают, с чем можно взаимодействовать, и легко считывают информацию. Читабельность Шрифт и текст легко читаются согласно контексту использования. На пробежке человек видит крупные цифры своей активности, а когда читает длинный текст, то не напрягает глаза. Легкость восприятия На экране нет мусора, он избавлен от всего ненужного — нет лишних кнопок и лишнего текста, а функции и элементы не дублируют друг друга. Анимация Анимация подсказывает пользователю, что произошло, и что с этим делать. Фокус на важном Важная и второстепенная информация разделена, пользователь быстро понимает, куда следует смотреть, а что можно и пропустить. Копирайт Все надписи и кнопки доносят правильный смысл до клиента, необходимо тестировать копирайт на пользователях и убедиться, что пункт меню или кнопка одинаково трактуются всеми пользователями.
Читать

Chulakov Design
30.03.2018 13:03
Манипуляции Средний попкорн придумали для того, чтобы продавать большой. Многие люди покупают в кинотеатрах огромные ведра подслащенной кукурузы с мыслью о выгодной покупке: всего 20 рублей разницы со средним стаканом, а попкорна в два раза больше! Уберите из меню среднюю порцию, и продажи больших резко сократятся из-за сильного контраста цен. У этого явления есть термин — «синдром упущенной выгоды». И он также работает в дизайне интерфейсов. Как часто, выбирая гостиницу на предстоящий отпуск, вы натыкаетесь на красное сообщение «Осталось всего 2 номера!»? Параллельно с этим где-то в углу вы видите ненавязчивую, но заметную плашку «Прямо сейчас этот номер смотрят 6 человек» или «Похожий номер был забронирован минуту назад». Вам начинает казаться, что этот прекрасный номер с личным бассейном и кондиционером вот-вот выскользнет у вас из рук. Спустя минуту вы уже вбиваете номер своей карты в блок оплаты, пытаясь «перегнать» мифических конкурентов. Главное — не заходить после этого на сайт, иначе есть возможность расстроиться, увидев этот же номер, но дешевле. То же самое справедливо для ограниченных предложений товаров на складе. Лучше купить сейчас — неизвестно, когда снова появится. Особенно, если рядом с ценой есть зачеркнутая цифра. Ограниченное время акции подкрепляет все вышеперечисленное. Подобные скидки генерируются добавлением несколько строк кода, но действуют практически безотказно. Эти серые приемы не решают задач пользователей, не помогают в принятии решений, а иногда — откровенно мешают. Их цель — повысить конверсию, манипулируя доверием посетителя. Дизайнер интерфейсов должен знать, изучать и уметь выявлять подобные приемы. Использование подобных серых схем часто повышает средний чек, но никогда — доверие. Дайте клиенту продукт лучше, понятнее, удобнее, и в долгосрочной перспективе он даст бренду гораздо больше лояльности и приведет новых посетителей.
Читать

Chulakov Design
26.03.2018 11:03
Контраст. Часть 2 Мы уже разбирали основные принципы использования контраста, сегодня разберём некоторые области его применения. Контраст жизненно необходим дизайну. Как правило, если дизайн плохо выглядит, в нем не хватает контраста. Интерфейс без контраста — это монотонный, скучный, серый рассказ без пауз и эмоций. Цвет и размер Это лучшие инструменты для регулирования контраста. Цвет можно использовать по-разному. Например, текст, кнопка и фон, на котором они расположены, должны отличаться по цвету. Размером всегда можно отделить главное от второстепенного в любом масштабе. Типографика Необходимо следить за тем, чтобы заголовки отличались друг от друга так, чтобы пользователь мог считать иерархию и понять вложенность. Здесь можно использовать размер, стиль или даже менять сам шрифт. Например дата у новости должна заметно отличаться от её заголовка, чтобы они не спорили друг с другом. Области, зоны Контраст между различными блоками и секциями страницы помогает не только разнообразить дизайн, но и помочь разграничить информацию. Так можно выделить главные преимущества, поместив их на цветную плашку на белом фоне. Или привлечь внимание каким-либо ярким цветом каких-либо элементов. Отступы Элементы должны были отделены друг от друга. Главное правило — правило близости: элементы расположенные рядом имеют связь друг с другом. Такие связи должны быть сразу видны, и различие в отступах помогает этого добиться. Сущности Различные сущности дизайна также должны отличаться. Подробнее можно прочитать здесь. Но также можно делать отличие одного элемента среди множества одинаковых. Например, если вы делаете плитку из фотографий, можно выделить размером одну из них. Важно следить за контрастностью всех различных элементов между собой. Взгляд человека цепляется именно за различие. Контраст позволяет управлять вниманием пользователя и сделать структуру макета легче и понятнее.
Читать

Chulakov Design
23.03.2018 11:03
Это уже было Чтобы развиваться профессионально, дизайнер должен каждый раз задавать себе вопрос: «в чем новизна моего проекта?». Вам не нужно изводить себя поиском абсолютно инновационных решений. Вполне достаточно просто использовать приемы, которыми именно вы раньше не пользовались. После, синтезируя уже пройденный материал, вы сможете создавать принципиально новые концепции и найти свой стиль. Новые «фишки» можно искать в разных сферах. Визуальное: новое сочетание цветов, стиля фотографий, 3D. Взаимодействие: попробуйте завязать интерактив на прокрутку страницы, взаимодействие с курсором, наведения, можно попытаться выйти на диалог с пользователем. UX: идеи в навигации, подсказках, формах ввода — все, что сможет по достоинству оценить пользователь. Контент: постараться еще глубже проникнуться темой, отойти от шаблонных фраз и текстов. Такой подход сделает ваше портфолио интересным и разнообразным. Это позволит привлечь внимание ваших потенциальных клиентов и убедит их выбрать вас исполнителем.
Читать

Chulakov Design
21.03.2018 11:03
Модальные окна Плохо реализованные модальные окна стоят препятствием на пользовательском пути и в 90% случаев вызывают негативные эмоции. В особенности это касается рекламных баннеров — одной из самых распространенных причин отказов посетителей от использования сайта. Если по каким-либо причинам вы все же решили затемнить экран и привлечь внимание пользователя таким радикальным образом, обязательно учтите: Название Позвольте пользователю сразу понять, что за окно возникло перед ним, и почему оно появилось. В идеале заголовок модального окна и кнопка, которая его вызвала, должны совпадать. Содержание Копирайт модальных окон должен соответствовать tone of voice бренда, для которого вы проектируете сайт или приложение. Если конкретных требований по текстам у заказчика нет, создайте впечатление общения приложения с пользователем. Составляйте закрытые вопросы, на которые можно ответить «Да» или «Нет», и тогда у посетителя никогда не возникнет мысли «Что от меня хотят?» и «Что нажимать?» Расположение Цель модального окна — сохранение контекста той страницы, на которой пользователь находился. Поэтому «всплывашка» не должна быть слишком большой или слишком маленькой. Она должна быть легкой во взаимодействии и хорошо заметной (но без фанатизма). Если в какой-то момент вы понимаете, что без скролла не обойтись, подумайте об отдельной странице. Пути отхода Самое важное — дайте пользователю возможность беспрепятственно закрыть окно. Это может быть кнопка отмены, перекрестие «закрыть», клик (тап) за пределами окна. Также можно добавить возможность закрытия по клавише «Escape». Модальные окна не так страшны, если они понятны и сообщают нужную информацию. Используйте их главные преимущества — заметность и сохранение контекста — во благо пользователю. Так они будут доносить критичные и требующие внимания сообщения.
Читать

Chulakov Design
19.03.2018 11:03
UI KIT vs DESIGN SYSTEM Почему дизайн-системы стали так популярны? Потому что это едва ли не единственная возможность сделать качественный дизайн крупного сервиса и поддерживать его. UI Kit в том виде, в котором его привыкли видеть, морально устарел и всё меньше используется дизайнерами в качестве инструмента. Но часто про дизайн-систему говорят как про «сложный UI kit». Рассмотрим основополагающие отличия и преимущества. В отличие от UI Kit-а, дизайн-система содержит в себе не только набор основных элементов, вроде кнопок, чекбоксов и типографики, но и более сложные полноценные кросс-компоненты, например, карточка товара, футер, хедер, и др. Все повторяющиеся компоненты необходимо включить в дизайн-систему и сделать в виде символа, если вы используете скетч. Но главное отличие дизайн-системы от UI Kit-а не в сложных компонентах и даже не в реализации их в коде, а в принципах и правилах, на которых она построена. Дизайн-система должна быть описана и построена таким образом, чтобы минимизировать расхождения в различных частях проекта. В тоже время она не должна сковывать руки дизайнеру, а быть гибкой и масштабируемой. Также не стоит забывать, что в дизайн-системе должны быть описаны отступы, подготовлены пустые лэйауты с сеткой для всех разрешений (десктоп, планшет и мобайл), чтобы другой дизайнер мог легко начать работу над новой страницей. Начинайте работу над дизайн-системой после утверждения концепции и включайте в неё всё необходимое по мере продвижения проекта. Это позволит упорядочить работу над сложным сервисом и упростит жизнь дизайнеру и разработчику.
Читать

Chulakov Design
16.03.2018 11:03
Еще быстрее Для успешного развития всегда необходимо повышать производительность. В этом вопросе важна правильная организация рабочего процесса. Ниже несколько советов, которые помогут ускорить ваш рабочий процесс и сделают его более приятным. 1. Используйте хоткеи. Работу с каждой программой нужно начинать с изучения быстрых клавиш. Безусловно, многие по умолчанию ими пользуются, но это нужно доводить до абсолюта, чтобы свести к минимуму обращение к панелям. Лайфхак: клавиша CapsLock довольно большая, находится в удобном месте на клавиатуре, но не используется. Ее можно переназначить, например, на Ctrl и использовать для равнения слоев сочетанием Ctrl(CapsLock) + W / A / S / D, которое очень легко запомнить) 2. Уделяйте внимание системной организации материалов. Разделяйте входящие материалы от клиента и те, которые создаете вы сами. Внутри этих двух папок тоже можно разграничить файлы по типам: графика / тексты / прототипы / дизайн. 3. Создавайте версии. Чтобы не раздувать размер файла, периодически очищайте от мусора, но имейте возможность вернуться к любой из версий. 4. Используйте плагины, если работаете в Sketch. Они значительно расширяют функционал, а также позволяют назначить хоткеи на недоступные ранее команды. Например Efficiency позволит назначить блокировку на пропорции слоя. 5. Используйте дизайн-системы и символы. Символы позволяют быстро исправлять ошибки в многочисленных макетах, а правильно построенная дизайн-система помогает принимать решения. 6. Создайте библиотеку иконок. Самые часто используемые иконки храните в отдельном файле или специальном софте (например, Iconjar). Туда могут войти иконки соц.сетей, стандартные material / ios иконки (профиль, звонки, почта, фильтр и т.д.), навигационные стрелки, загрузить и скачать и т.д. В результате вам не придется каждый раз тратить время на поиск нужных пиктограмм. 7. Отключите уведомления. На время работы старайтесь избавиться от информационного шума и бесцельных разговоров. Если вы срочно понадобитесь кому-то из знакомых, они вам позвонят. В противном случае вы можете даже не заметить, что уже третий час не занимаетесь задачей, а переписываетесь в дизайнерском чатике и листаете dribbble. 8. Тестируйте идеи быстро, не углубляясь в детали. 9. Старайтесь меньше переключаться с проекта на проект.
Читать