Как бы выглядели российские логотипы на Западе
Команда питерского дизайн-агентства «То самое агентство» пофантазировала на тему как бы выглядели российские бренды на западном рынке. Ребята прошлись не только по знакомым с детства товарам, таким как «Сода», «Алёнка» или «Сгущёнка», но и по современным брендам, например «ВкусВилл» и «Спортмастер».
Во многих случаях ребрендинг получился очень даже свежим. При этом интересно не только графическое решение, но и аргументация в переосмыслении названий продуктов. Подробней можно почитать на VC:
Первая подборка
Вторая подборка
А по вашему, какой российский продукт точно зашёл бы на Западе?
Команда питерского дизайн-агентства «То самое агентство» пофантазировала на тему как бы выглядели российские бренды на западном рынке. Ребята прошлись не только по знакомым с детства товарам, таким как «Сода», «Алёнка» или «Сгущёнка», но и по современным брендам, например «ВкусВилл» и «Спортмастер».
Во многих случаях ребрендинг получился очень даже свежим. При этом интересно не только графическое решение, но и аргументация в переосмыслении названий продуктов. Подробней можно почитать на VC:
Первая подборка
Вторая подборка
А по вашему, какой российский продукт точно зашёл бы на Западе?
🔥28👍6❤3
Как создать идеальный дизайн страницы результатов поиска
Как создать идеальную форму поиска мы уже разобрались. На этот раз собрал для вас наилучшие советы как правильно задизайнить страницу вывода результатов поиска.
— Исправляйте ошибки и опечатки
— Учитывайте транслитерацию. Таким образом неважно каким алфавитом пользователь ввел запрос.
— Учитывайте синонимы и морфологию. Например если пользователь ввел: "мобилки"
Совет: Не скрывайте функцию сортировки в функции фильтрации - это разные задачи. Четко выделяйте включенные фильтры. Пользователи должны знать, какие фильтры активны.
- Список
Отображение результатов поиска списком лучше всего подходит для сравнения результатов по параметрам. Если вы проектируете интернет-магазин, то в списке результатов должны быть: описательное название продукта, небольшое изображение и цена.
Лучше всего подойдет для: отображения технических товаров, авиабилетов, комплектующих.
- Галерея
Представление в виде галереи - хороший вариант для приложений с продуктами, где дополнительная информация не так важна, а пользователи больше полагаются на визуальные образы при принятии решений.
Лучше всего подойдет для: одежды, продуктов питания, косметики
Полезные ресурсы:
>> Примеры страниц результатов поиска на странице Baymard Institute
>> Скриншоты паттернов поиска на мобильных приложениях
На этом все! Дайте знать если было полезно. Кстати, как вам оформление статей с иллюстрациями?
Как создать идеальную форму поиска мы уже разобрались. На этот раз собрал для вас наилучшие советы как правильно задизайнить страницу вывода результатов поиска.
1. Сохраняйте текст запроса в строке поиска
Таким образом пользователю будет проще внести правки, если он захочет уточнить свой запрос.2. Предоставляйте точные и актуальные результаты
Пользователи часто судят о ценности веб-ресурса, основываясь на качестве результатов выдачи. Сортируйте товары по признакам релевантности, популярности, наличия и прочим метрикам.3. Используйте "умную" обработку поиска
Наихудший вариант для пользователя, это не получить никакого результата на свой запрос. В этом случае большинство пользователей просто покинут ваш сайт.— Исправляйте ошибки и опечатки
— Учитывайте транслитерацию. Таким образом неважно каким алфавитом пользователь ввел запрос.
— Учитывайте синонимы и морфологию. Например если пользователь ввел: "мобилки"
4. Всегда отображайте число найденных результатов в заглавии списка
Так пользователь сможет лучше понять, сколько времени понадобится на их просмотр и по возможности использовать фильтры чтобы уточнить запрос.5. Больше пространства для скролинга
Не стоит нагромождать пространство над выдачей результатов другими элементами или слишком большой шапкой. Пользователь должен сразу видеть результаты и заинтересован прокрутить страницу дальше.6. Предоставляйте фильтры и сортировку
Лучше не разделять продукты по типам в выдаче поиска, а отобразить все результаты на одной странице. Помогите пользователю сузить результаты поиска с помощью фильтров и сортировки по параметрам. Совет: Не скрывайте функцию сортировки в функции фильтрации - это разные задачи. Четко выделяйте включенные фильтры. Пользователи должны знать, какие фильтры активны.
7. Предоставляйте разные виды отображения результатов
- Список
Отображение результатов поиска списком лучше всего подходит для сравнения результатов по параметрам. Если вы проектируете интернет-магазин, то в списке результатов должны быть: описательное название продукта, небольшое изображение и цена.
Лучше всего подойдет для: отображения технических товаров, авиабилетов, комплектующих.
- Галерея
Представление в виде галереи - хороший вариант для приложений с продуктами, где дополнительная информация не так важна, а пользователи больше полагаются на визуальные образы при принятии решений.
Лучше всего подойдет для: одежды, продуктов питания, косметики
8. Предоставляйте пустую страницу результатов поиска
Полезные ресурсы:
>> Примеры страниц результатов поиска на странице Baymard Institute
>> Скриншоты паттернов поиска на мобильных приложениях
На этом все! Дайте знать если было полезно. Кстати, как вам оформление статей с иллюстрациями?
🔥18❤🔥4
Методы исследования в UX — Карточная сортировка
Карточная сортировка — это техника исследования, в которой пользователи привлекаются к проектировке информационной архитектуры будущего продукта. Основная цель, получить первое представление, как пользователи представляют себе иерархическую структуру продукта.
Когда применять
На ранних стадиях проектирования, в особенности если вы проектируете инновативный продукт, которого еще нет на рынке. Также карточная сортировка подойдет для создания каталогов, меню, навигации приложений и сайтов. Кроме того, этот метод можно использовать для выявления ошибок в уже сформированной информационной структуре.
Как применять
Пользователи получают наборы карточек с категориями данных, встречающихся на сайте или в приложении.
Задача респондентов - отсортировать карточки исходя из своих представлений о структуре объектов и связей между ними. При этом они также должны придумать названия для смысловых групп. В результате исследования выявляются закономерности, на основе которых будут создаваться структура продука и названия категорий.
Заключение
Метод особенно полезен если нет ясности, как должны быть структурированы навигация и разделы вашего приложения. Также метод полезен для проверки уже имеющихся наработок.
Для проведения исследования не понадобятся сложные инструменты т.к. сортировку карточек можно провести с заранее распечатанными бумажками или стикерами на маркерной доске.
На этом все. Если было полезно, дайте знать в реакциях!
Карточная сортировка — это техника исследования, в которой пользователи привлекаются к проектировке информационной архитектуры будущего продукта. Основная цель, получить первое представление, как пользователи представляют себе иерархическую структуру продукта.
Когда применять
На ранних стадиях проектирования, в особенности если вы проектируете инновативный продукт, которого еще нет на рынке. Также карточная сортировка подойдет для создания каталогов, меню, навигации приложений и сайтов. Кроме того, этот метод можно использовать для выявления ошибок в уже сформированной информационной структуре.
Как применять
Пользователи получают наборы карточек с категориями данных, встречающихся на сайте или в приложении.
Задача респондентов - отсортировать карточки исходя из своих представлений о структуре объектов и связей между ними. При этом они также должны придумать названия для смысловых групп. В результате исследования выявляются закономерности, на основе которых будут создаваться структура продука и названия категорий.
Заключение
Метод особенно полезен если нет ясности, как должны быть структурированы навигация и разделы вашего приложения. Также метод полезен для проверки уже имеющихся наработок.
Для проведения исследования не понадобятся сложные инструменты т.к. сортировку карточек можно провести с заранее распечатанными бумажками или стикерами на маркерной доске.
На этом все. Если было полезно, дайте знать в реакциях!
👍16⚡2❤1
Эффект края, дизайн страниц результатов поиска, карточная сортировка...
Недельный дайджест:
— Что делает веб-дизайнер в 2022 году – 10 основных задач и примеры проектов
— Психология в дизайне — Эффект края
— Ставки в фрилансе #3 — Часовой тариф или фиксированная цена?
— Как бы выглядели российские логотипы на Западе
— Как создать идеальный дизайн страницы результатов поиска
— Методы исследования в UX — Карточная сортировка
Если посты были полезными, дайте знать в реакциях.
Недельный дайджест:
— Что делает веб-дизайнер в 2022 году – 10 основных задач и примеры проектов
— Психология в дизайне — Эффект края
— Ставки в фрилансе #3 — Часовой тариф или фиксированная цена?
— Как бы выглядели российские логотипы на Западе
— Как создать идеальный дизайн страницы результатов поиска
— Методы исследования в UX — Карточная сортировка
Если посты были полезными, дайте знать в реакциях.
👍14
Голосуем за темы постов на неделю. Выйдут 4 из 5:
Final Results
13%
Психология в дизайне — Закон сходства
36%
Основы UX дизайна — Аффордансы
9%
5 плагинов Figma для работы с векторной графикой
27%
Инструменты — Как стоить карту пути пользователя
14%
Как продать свои услуги дороже
👍1
Как делать лендинги в 2022
Почему текст сильно переоценен, кто и как должен создавать контент и зачем нужны иллюстрации… Как делать лендинги круче и почему конверсия — не главное. Познавательная статья не только для копирайтеров и маркетологов, но и для дизайнеров.
Для ленивых вложена презентация со слайдами.
https://vc.ru/marketing/529149-kak-delat-lendingi-v-2022-moy-doklad-pro-povyshenie-otdachi-ilyahovskim-metodom-rabotu-s-avtorami-i-prototipirovanie
Почему текст сильно переоценен, кто и как должен создавать контент и зачем нужны иллюстрации… Как делать лендинги круче и почему конверсия — не главное. Познавательная статья не только для копирайтеров и маркетологов, но и для дизайнеров.
Для ленивых вложена презентация со слайдами.
https://vc.ru/marketing/529149-kak-delat-lendingi-v-2022-moy-doklad-pro-povyshenie-otdachi-ilyahovskim-metodom-rabotu-s-avtorami-i-prototipirovanie
vc.ru
«Как делать лендинги в 2022» — мой доклад про повышение отдачи ильяховским методом, работу с авторами и прототипирование — Маркетинг…
Почему вредно думать только о тексте, как ставить задачу на текст и чья это работа, как делать лендинги круче, почему конверсия — не главное (и что главное). Копирайтерам, дизайнерам, предпринимателям. ⭕ Покажите сайт или прототип в комментах — объясню, как…
🔥14👍3👌1
Психология в дизайне — Закон Сходства
Один из базовых гештальт-принципов известный также как закон подобия. Он гласит, что:
Человеческий глаз имеет тенденцию воспринимать похожие элементы в дизайне как целостное изображение, форму или группу, даже если эти элементы разделены.
Таким образом внешне схожим элементам всегда будет приписываться одинаковое назначение. По этому принципу их можно проще организовать и сгруппировать.
Как применять
В дизайне закон можно применить к ссылкам, кнопкам и прочим навигационным элементам, которые должны визуально отличаться от прочих текстовых элементов. С другой стороны если вы хотите привлечь внимание пользователя к какому-то элементу интерфейса, можете сделать его максимально непохожим на остальные.
Совет:
При использовании закона сходства имейте в виду, что цвет является самым эффективным способом группировки, в то время как форма и размер самыми слабыми. Это наглядно видно на иллюстрации внизу.
Один из базовых гештальт-принципов известный также как закон подобия. Он гласит, что:
Человеческий глаз имеет тенденцию воспринимать похожие элементы в дизайне как целостное изображение, форму или группу, даже если эти элементы разделены.
Таким образом внешне схожим элементам всегда будет приписываться одинаковое назначение. По этому принципу их можно проще организовать и сгруппировать.
Как применять
В дизайне закон можно применить к ссылкам, кнопкам и прочим навигационным элементам, которые должны визуально отличаться от прочих текстовых элементов. С другой стороны если вы хотите привлечь внимание пользователя к какому-то элементу интерфейса, можете сделать его максимально непохожим на остальные.
Совет:
При использовании закона сходства имейте в виду, что цвет является самым эффективным способом группировки, в то время как форма и размер самыми слабыми. Это наглядно видно на иллюстрации внизу.
👍15
Основы UX дизайна — Аффордансы
Первым концепцию аффордансов в дизайне описал американский психолог, специалист в области пользовательской инженерии, Дональд Норман.
В его понимании аффорданс – это то, что пользователь может делать с объектом, исходя из его возможностей. При этом аффорданс не просто качество или характерная черта объекта, а именно возможность пользователя взаимодействовать с этим объектом. В повседневной жизни, наиболее наглядный пример, это дверная ручка: своей формой и расположением она указывает, что дверь нужно потянуть на себя.
Этот принцип применим и к цифровым продуктам. Например, первые элементы интерфейсов проектировались наиболее похожими на физический мир: цифровые кнопки первых смартфонов выглядели как физические клавиши используя скевоморфизм, а иконки были похожи на знакомые действия: корзина - удаление, дискета - сохранить, символ папки для группировки файлов итд.
И не смотря на то, что многие аффордансы со временем потеряли привязку к физическому миру, во многих случаях они стали общепринятой нормой, без которых интерфейс будет менее понятным и удобным.
В 1991 году дизайнер Уильям Гейвер, выделил три типа аффордансов:
Воспринимаемые — характеристики самого объекта указывают на то, какие возможности действия доступны и желательны — например, переключатель. Эти очевидные свойства побуждают пользователей использовать объект по назначению.
Скрытые — В пользовательских интерфейсах без очевидных возможностей пользователи часто должны полагаться на опыт и/или метод проб и ошибок, чтобы определить возможные действия - например, когда нужно навести курсор и кликнуть чтобы открыть выпадающие меню.
Ложные — характеристики объекта предполагают, что пользователи могут применить несуществующую опцию — например, подчеркнутый текст, который не является ссылкой.
Какой вывод можно сделать? Понимание, как правильно применять аффордансы — одна из основных задач дизайнеров при создании пользовательского взаимодействия. Несмотря на приходящие и уходящие тренды, важно понимать как работают те или иные неизменные паттерны вокруг которых строится взаимодействие с пользователем. Осознание того, что многие решения в цифровом продукте берут свое начало в физическом мире поможет вам не только найти понятные и интуитивные решения, но и создавать новые оригинальные решения черпая инспирацию из повседневной жизни.
Было полезно? Дайте знать в реакциях!
Первым концепцию аффордансов в дизайне описал американский психолог, специалист в области пользовательской инженерии, Дональд Норман.
В его понимании аффорданс – это то, что пользователь может делать с объектом, исходя из его возможностей. При этом аффорданс не просто качество или характерная черта объекта, а именно возможность пользователя взаимодействовать с этим объектом. В повседневной жизни, наиболее наглядный пример, это дверная ручка: своей формой и расположением она указывает, что дверь нужно потянуть на себя.
Этот принцип применим и к цифровым продуктам. Например, первые элементы интерфейсов проектировались наиболее похожими на физический мир: цифровые кнопки первых смартфонов выглядели как физические клавиши используя скевоморфизм, а иконки были похожи на знакомые действия: корзина - удаление, дискета - сохранить, символ папки для группировки файлов итд.
И не смотря на то, что многие аффордансы со временем потеряли привязку к физическому миру, во многих случаях они стали общепринятой нормой, без которых интерфейс будет менее понятным и удобным.
В 1991 году дизайнер Уильям Гейвер, выделил три типа аффордансов:
Воспринимаемые — характеристики самого объекта указывают на то, какие возможности действия доступны и желательны — например, переключатель. Эти очевидные свойства побуждают пользователей использовать объект по назначению.
Скрытые — В пользовательских интерфейсах без очевидных возможностей пользователи часто должны полагаться на опыт и/или метод проб и ошибок, чтобы определить возможные действия - например, когда нужно навести курсор и кликнуть чтобы открыть выпадающие меню.
Ложные — характеристики объекта предполагают, что пользователи могут применить несуществующую опцию — например, подчеркнутый текст, который не является ссылкой.
Какой вывод можно сделать? Понимание, как правильно применять аффордансы — одна из основных задач дизайнеров при создании пользовательского взаимодействия. Несмотря на приходящие и уходящие тренды, важно понимать как работают те или иные неизменные паттерны вокруг которых строится взаимодействие с пользователем. Осознание того, что многие решения в цифровом продукте берут свое начало в физическом мире поможет вам не только найти понятные и интуитивные решения, но и создавать новые оригинальные решения черпая инспирацию из повседневной жизни.
Было полезно? Дайте знать в реакциях!
👍34❤6
6 видеоуроков с фишками и лайфхаки работы в Figma
Неплохая подборка видео-туториалов с лайфхаками для Figma. 6 компактных уроков длительностью от 3 - 11 мин. Максимум пользы без всякой воды.
Темы:
— Лучшие плагины
— Прокрутка вниз. Слайдер
— 5 правил подготовки макета к верстке
— Новые возможности Figma
— Плагины
— Быстрый экспорт из Figma в Tilda
Ссылка: https://vk.com/wall-62268523_41194
Неплохая подборка видео-туториалов с лайфхаками для Figma. 6 компактных уроков длительностью от 3 - 11 мин. Максимум пользы без всякой воды.
Темы:
— Лучшие плагины
— Прокрутка вниз. Слайдер
— 5 правил подготовки макета к верстке
— Новые возможности Figma
— Плагины
— Быстрый экспорт из Figma в Tilda
Ссылка: https://vk.com/wall-62268523_41194
👍10