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

chulakov_design logo

Chulakov Design

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

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


Входит в категории: Технологии
Chulakov Design
26.06.2020 11:06
Домашняя страница. Ч. 1 Если пришел заказчик и говорит: «Нужна главная страница», — а вы только начинаете заниматься дизайном и не знаете, что на ней разместить и как правильно ее нарисовать, то специально для вас мы запускаем серию заметок с рекомендациями по проектированию главной страницы. Эти рекомендации подходят для всех отраслей — без разницы, ecommerce это или сайт фармакологической компании. Серия будет разделена по основным функциям главной страницы. Первая функция: сообщить пользователю, что это за сайт и зачем он существует. 1. Покажите название компании или логотип. Так человек поймет, попал ли туда, куда хотел. Этот элемент должен слегка выделяться, и если аудитория читает слева направо, тогда размещайте элемент в левом верхнем углу. 2. Добавьте надпись, которая расскажет, что делает компания. Сделайте фразу емкой и конкретной. К примеру, фраза «Постоянное стремление вперед» абсолютно ничего не дает пользователю, в отличие от «Мы производим высококлассные автомобили». Можно и не объяснять, что это за компания, если в логотипе уже присутствует объяснение или компания всемирно известна. 3. Добавьте фразу, в которой описывается ценность компании и чем она отличается от конкурентов: это сразу даст пользователю понимание, что компания предлагает. 4. Определите задачи, которые пользователи хотят решить на сайте, и разместите вверху страницы, располагая по приоритетности. Например, на сайте «РЖД Экспресс» выделили первый экран под калькулятор, так как он решает базовую задачу пользователя — узнать стоимость доставки и сделать заказ.
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
19.06.2020 11:06
Методы тестирования дизайна Дизайн — очень субъективная штука, поэтому каждый раз согласование с клиентом скатывается в обсуждение мелких правок, увеличение логотипа, игру со шрифтами. Этот список может быть очень долгим. Но можно сильно сократить процесс путем тестирования ваших дизайн-концепций. 1. Метод семантического дифференциального тестирования. Звучит сложно, но на самом деле все элементарно. Сперва проговариваете и согласовываете, как именно должен быть описан ваш дизайн. Описывается он прилагательными, например: строгий, дружелюбный, веселый и т.д. Затем даете респондентам макет и спрашиваете: «Насколько соответствует слово „дружелюбный” этому сайту/приложению?» Ну а дальше уже смотрите, попадает ваш дизайн в эти слова: если да, то неоспоримые доказательства того, что дизайн выполнен хорошо, у вас есть. 2. Метод сравнения вариантов. Спросите респондентов: «Какой из предложенных вариантов дизайна больше всего соответствует слову “дружелюбный”?» 3. Метод сравнения конкурентов. Этот метод схож со вторым, только вы сравниваете ваш дизайн с дизайном основных конкурентов. Это поможет понять, лучше ли справляется ваш дизайн со своей задачей, чем у конкурентов, или нет. Важно: не спрашивайте у респондентов, что именно повлияло на их решение, или не включайте это в отчет клиенту, потому что начнется комбинирование решений из разных версий и все по-новой.
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
13.06.2020 11:06
Новичкам Коротко расскажем основные моменты о профессии дизайнера интерфейсов. 1. Не нужно обладать навыками рисования. Это будет полезно, но и без этого можно быть отличным специалистом. 2. Мы не художники, мы не рисуем картину красками или пикселями — мы инженеры, создающие виртуальные продукты, которыми пользуются миллионы людей ежедневно, да и вообще наш продукт деятельности не наш, а разработчиков, а мы просто показываем, как должно быть. 3. Дизайнером быть непросто, так как вы являетесь тем звеном, которое объединяет хотелки заказчика и возможности разработки, но очень интересно, так как с вашей помощью люди могут следить за распространением опасного вируса или управлять пилотируемым космическим кораблем. 4. UI, UX, CX. А вот тут, как говорится, следите за руками. CX — это высший уровень опыта клиента. В него входит не только взаимодействие с интерфейсом, но и то, насколько удобно вернуть товар или насколько дружелюбно с вами общается поддержка. UX — это опыт пользователя, связанный конкретно с интерфейсом: могу ли я найти нужную мне информацию, или насколько понятно мне объяснили, как взаимодействовать с интерфейсом при первом запуске. UI — это вся визуальная часть: насколько красивая тенюшка, приятные ли иллюстрации, но в то же время она отвечает и за то, куда посмотрит пользователь вначале, а куда потом, заметна кнопка или нет. UI — это часть UX, а UX — часть CX. 5. Как начать: — смотрите много интерфейсов и оценивайте, что в них хорошего, а что — плохого; — перерисовывайте чужие интерфейсы; — начинайте всегда рисовать интерфейс на бумаге просто квадратиками, полосками — как угодно, лишь бы вам было понятно; — никто не сможет научить вас дизайну, пока вы сами не начнете его постоянно практиковать.
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
05.06.2020 11:06
Возврат товара Перед решением покупать товар или нет пользователи очень часто изучают информацию о его возврате. Сегодня расскажем, как и где надо размещать этот раздел. — Обеспечьте несколько путей к этой странице: через футер, страницу товара, поиск по сайту и страницу помощи. — Обязательно разместите ссылку на эту страницу в футере, так как пользователи сперва ищут ее именно там. — Не называйте раздел в стиле «Не подошел товар?»: тогда пользователям придется вчитываться в меню и искать этот пункт, а не сканировать в поисках уже знакомого «Возврат товара». — Также есть опасность запутать пользователя в таких понятиях, как «Политика возврата» и «Возврат товара»: в первом случае вы просто предоставляете информацию о том, как работает возврат, во втором — даете уже конкретную возможность оформить возврат товара. Чтобы решить подобную путаницу, создайте перекрестные связи на обе страницы или объедините эти страницы.
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
29.05.2020 11:05
Перетаскивание (drag and ) модулей Одна из наиболее полезных целей перетаскивания — позволить пользователю напрямую размещать объекты там, где он хочет. Перетаскивание модулей на странице это типичный шаблон. Хорошим примером для изучения является перетаскивание блоков в Notion. Что продумать, когда применяете такую механику Нормальное состояние. Модули отображаются без каких-либо явных подсказок к возможности перетаскивания. Это не отвлекает пользователя и не нагружает интерфейс. Приглашение к взаимодействию. При наведении на определенный блок справа появляется иконка из 6 точек, которая уже укоренилась и считается базовой для отображения функции перетаскивания. К тому же сама система меняет курсор, подсказывая пользователю, что элемент возможно перемещать. Перетаскивание. Тут важно отобразить 3 состояния: как показать прошлое место блока, как показать блок во время перемещения и как показать, куда блок упадет, когда вы его отпустите. Также не забывайте продумать поведение соседних модулей, которые будут перемещаться относительно того, куда вы бросите свой модуль.
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
25.05.2020 19:05
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
22.05.2020 11:05
Правильный инпут для даты рождения Проблема 1 Дни рождения в зависимости от страны имеют различные форматы, которые состоят из трех отдельных данных. Где-то «дд / мм / гггг», а где-то «мм / дд / гггг». Проблема 2 Хотя некоторые пользователи могут легко понять, что «мм» означает месяц, а «дд» — день, остальные часто путаются или игнорируют формат. Как делать не надо — Не стоит делать выбор даты с помощью выпадающего списка для каждого из трех данных, так как это очень сильно замедляет заполнение поля. — Также не стоит делать это с помощью календаря: редко когда приходится заполнять поле с текущим годом, а значит, придется несколько раз пролистать год, затем найти свой месяц, потом отсканировать около 30 мелких цифр в поиске нужного дня, что тоже сильно замедляет заполнение формы. Как правильно — три отдельных поля с полными лейблами «День», «Месяц», «Год» над каждым; — заполняются с клавиатуры; — поля должны быть под размер заполняемого формата, то есть для дня и месяца одинаковые, для двух символов, а для года поле немного больше — для четырех символов. Так пользователь сразу поймет необходимый к заполнению формат, а также с помощью клавиатуры намного быстрее впишет данные.
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
15.05.2020 11:05
Размеры кнопок для мобильных устройств На мобильных устройствах важен размер кнопок и расстояние между ними, чтобы обеспечить максимальную точность нажатия. Без конкретных цифр сложно определить, оптимальный у вас размер кнопки или нет. Но благодаря исследованию появился стандарт размеров и расстояний, который обеспечивает наилучшую точность у всех групп пользователей, даже у пожилых людей. Наибольшая точность была найдена у кнопок в пределах 42-72 пикселей. Наиболее предпочтительный размер кнопки составлял 60 пикселей, что представляет собой примерно середину диапазона. Кнопка в 72 пикселя обеспечивала высочайшую точность и была предпочтительна для пожилых пользователей. Расстояния между кнопками Исследование пришло к выводу, что диапазон от 12 до 48 пикселей является оптимальным интервалом между кнопками. Этот широкий диапазон полезен, потому что вы можете применить его к разным размерам кнопок. Например, если вы используете кнопку в 72 пикселя, то нужно брать минимальное расстояние между кнопками, так как размер сам по себе обеспечивает максимальное нажатие, а с кнопкой в 42 пикселя нужно использовать расстояние в 48 пикселей, чтобы отделить кнопки и избежать случайных нажатий на соседние. Данные правила работают как с кнопкой, в которой только иконка, так и с текстовой кнопкой. С текстовой размер применяется на ее высоту, так как именно параметр высоты отвечает за точность нажатия.
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
08.05.2020 11:05
Будущие обновления в Figma Сегодня мы решили рассказать новости для любителей Figma, а именно — чего стоит ожидать от инструмента в ближайшем будущем. Вчера прошла небольшая презентация с менеджером по продукту Юхки Ямашита, который поделился, на каких задачах сейчас сконцентрирована команда. Задача № 1. Добавление возможности встраивания приватных файлов в различные инструменты (Notion, Jira, Trello и т.д.). Раньше можно было встраивать только открытые файлы. Задача № 2. Упрощение процесса замены компонентов. Все, кто работал с большими дизайн-системами, знают об огромных черных списках компонентов, в которых невозможно найти нужный тебе. Задача № 3. Упрощенное проектирование. Если вы когда-нибудь пытались проектировать продукт с более чем 20 экранами, вам будут знакомы огромные клубки проводов, соединяющих макеты. Задача № 4. Добавление нового почасового плана оплаты. Довольно удобный формат. Например, если вы хотите подключить к проекту дизайнера буквально на 2-3 часа и заплатить только за это время. Задача № 5. Возможность искать дизайнеров и подписываться на их аккаунты. Figma продолжает развивать комьюнити и постепенно создает аналог Behance и Dribbble.
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
01.05.2020 11:05
Рекомендации по правильному созданию формы сбора контактов Пять советов, которые сильно проапгрейдят ваши формы и увеличат их конверсию. 1. Правильный макет формы. Чтобы форма быстрее заполнялась, размещайте лейблы над полем заполнения и избегайте создания форм в несколько колонок. 2. Не больше трех полей. Ограничьте форму тремя полями, и это ограничение увеличит конверсию как минимум на 25%. 3. Не используйте капчу. Заполнять капчу всех раздражает, поэтому если вы ее уберете, то ваша форма получит еще 3,2% конверсии. Мы, конечно, понимаем, что капча обеспечивает защиту от спама, поэтому нужно расставить приоритеты, что важнее — безопасность или конверсия. 4. Не пишите на кнопке «Отправить». Вместо этого пишите то, что получит человек, отправив вам свои данные. Например, «Получить чек-лист». 5. Не просите номер телефона. Никто не хочет, чтобы ему названивали по 10 раз в день, поэтому забудьте о номере телефона. Лучше просите у людей их email, а если очень хочется оставить номер, то просто сделайте его вместе с почтой, но пометьте как дополнительное или необязательное для заполнения поле.
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
24.04.2020 20:04
Друзья, пришло время показать себя! Мы всегда рады талантливым людям и хотим дать вам дополнительную возможность показать себя. — пришлите нам ссылку на вашу лучшую работу по адресу: best@chulakov.ru; — расскажите в письме о вашем опыте, например: дизайн, арт-дирекшен или управление творческим коллективом; — укажите ваш город. Авторы лучших работ получат: — публикацию в нашем Instagram-аккаунте; — возможность заключить контракт со Студией; — обратную связь от крутых специалистов Студии. Мы уже проверяем почту
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


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

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
17.04.2020 11:04
Ошибки новичков и дизайн мышления За время существования Chulakov School мы отметили несколько типичных ошибок у новичков, которые сильно влияют на восприятие интерфейсов. Неправильные скругления карточек. Если вы используете блок со скруглениями внутри блока со скруглениями, нужно у внутреннего блока скругления делать меньше примерно в 2 раза относительно внешнего. Отсутствие понимания работы теней. Тени в дизайне заимствуются из окружающего мира. Есть падающая тень, а есть собственная. Цвет в тенях относительный и окрашивается в тон фона. Отсутствие понимания процесса дизайна. Есть такая штука, как дизайн-мышление. По сути, это и есть процесс дизайна: 1. Эмпатия. Тут важно максимально понять пользователя. 2. Объединение. Все, что узнали и наисследовали, объединяем и определяем проблемы пользователей. 3. Генерация идей. Придумываем, как решить эти проблемы. 4. Прототипирование. Рисуем черновые варианты и дизайн. 5. Тестирование. Тестируем то, что нарисовали в целевой группе. 6. Реализация. Разработчики уже верстают и готовят сервис к релизу. 7. Повторяем все снова. Этот процесс бесконечен — так мы постепенно, с каждым разом улучшаем сервис.
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
16.04.2020 16:04
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Chulakov Design
14.04.2020 17:04
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме