Основы 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
Инструменты - Как строить карту пути пользователя
Карта пользовательского пути (User Journey Map) популярный инструмент для улучшения пользовательского опыта. Для начала разберемеся с терминологией.
Карта пути пользователя описывает все точки взаимодействия с продуктом на временной шкале. Если целью пользовательского пути является покупка товара/услуги, то в маркетинге используется термин карта пути клиента (Customer Journey Map). По сути, оба термина взаимозаменяемы т.к имеют отношение к визуализации человека, использующего ваш продукт или услугу.
Для чего нужны карты пользовательского пути
В первую очередь этот инструмент помогает разобраться когда и как пользователь должен взаимодействовать с продуктом. Это поможет всем участникам команды достигнуть единого понимания видения продукта. Кроме того, карта пути поможет принять правильные решения в процессе дальнейшего развития продукта.
Как строить карту пути пользователя
1. Составьте сценарий описывающий ситуацию почему и как пользователь будет взаимодействовать с вашим продуктом. Для определения пользователя можно воспользоваться методом персон. При этом сценарий составляется для каждого действующего лица в отдельности, т.к их взаимодействие с продуктом может сильно отличаться.
Разбейте все действия пользователей на последовательные этапы указав каналы взаимодействия (например сообщение с предложением, сайт, телефонный разговор с продавцом итд) и нанесите их на временную шкалу.
2. Далее для каждой стадии пути мы описываем все ключевые действия совершаемые пользователем, его мысли и эмоции. В идеальном случае эту информацию можно почерпнуть из предварительных интервью и пользовательских исследований. Тут важно описать мотивацию пользователя при взаимодействии с продуктом, его ожидания и мысли. Также стоит описать и эмоциональный настрой — где пользователь доволен, а где разочарован.
3. Заключительным шагом является определение потенциалов для улучшения пользовательского пути. Выявив болевые точки, все позитивные и негативные моменты в user journey можно сделать выводы где и как улучшить пользовательский опыт и какие барьеры нужно устранить, как измерять успех реализованных решений и какая команда будет за них отвечать.
Пример
Обратите внимание на карту пути клиента на примере спортивного интернет-магазина на иллюстрации внизу.
Он включает в себя исходную историю покупателя с описанием проблемы и ожиданиями. Наше действующее лицо - Олег, который хочет купить кроссовки для бега. Его путь от мысли обновить кроссы до получения и примерки товара разбит на 5 этапов. В зависимости от вашего продукта этих этапов может быть и больше. Помимо конкретных действий также озвучены и мысли потенциального покупателя, проблемы с которыми он сталкивается во время выбора товара. На временной шкале эмоциональный настрой нашего протагониста схематично обозначен линейной диаграммой.
Вывод
Карта пути пользователя, это полезный инструмент для продуктовых команд. Если правильно выстроить карту, то она поможет привести команду к общему видению продукта, а также улучшить взаимодействие с пользователем.
Полезные материалы
— Пример схемы построения customer journey map
— Создавать карты можно в Miro или FigJam
Книга по теме
Путь клиента — Создаем ценность продуктов и услуг через карты путей, блупринты и другие инструменты визуализации
Автор: Джим Калбах
Если было полезно, дайте знать в реакциях!
#почитать
Карта пользовательского пути (User Journey Map) популярный инструмент для улучшения пользовательского опыта. Для начала разберемеся с терминологией.
Карта пути пользователя описывает все точки взаимодействия с продуктом на временной шкале. Если целью пользовательского пути является покупка товара/услуги, то в маркетинге используется термин карта пути клиента (Customer Journey Map). По сути, оба термина взаимозаменяемы т.к имеют отношение к визуализации человека, использующего ваш продукт или услугу.
Для чего нужны карты пользовательского пути
В первую очередь этот инструмент помогает разобраться когда и как пользователь должен взаимодействовать с продуктом. Это поможет всем участникам команды достигнуть единого понимания видения продукта. Кроме того, карта пути поможет принять правильные решения в процессе дальнейшего развития продукта.
Как строить карту пути пользователя
1. Составьте сценарий описывающий ситуацию почему и как пользователь будет взаимодействовать с вашим продуктом. Для определения пользователя можно воспользоваться методом персон. При этом сценарий составляется для каждого действующего лица в отдельности, т.к их взаимодействие с продуктом может сильно отличаться.
Разбейте все действия пользователей на последовательные этапы указав каналы взаимодействия (например сообщение с предложением, сайт, телефонный разговор с продавцом итд) и нанесите их на временную шкалу.
2. Далее для каждой стадии пути мы описываем все ключевые действия совершаемые пользователем, его мысли и эмоции. В идеальном случае эту информацию можно почерпнуть из предварительных интервью и пользовательских исследований. Тут важно описать мотивацию пользователя при взаимодействии с продуктом, его ожидания и мысли. Также стоит описать и эмоциональный настрой — где пользователь доволен, а где разочарован.
3. Заключительным шагом является определение потенциалов для улучшения пользовательского пути. Выявив болевые точки, все позитивные и негативные моменты в user journey можно сделать выводы где и как улучшить пользовательский опыт и какие барьеры нужно устранить, как измерять успех реализованных решений и какая команда будет за них отвечать.
Пример
Обратите внимание на карту пути клиента на примере спортивного интернет-магазина на иллюстрации внизу.
Он включает в себя исходную историю покупателя с описанием проблемы и ожиданиями. Наше действующее лицо - Олег, который хочет купить кроссовки для бега. Его путь от мысли обновить кроссы до получения и примерки товара разбит на 5 этапов. В зависимости от вашего продукта этих этапов может быть и больше. Помимо конкретных действий также озвучены и мысли потенциального покупателя, проблемы с которыми он сталкивается во время выбора товара. На временной шкале эмоциональный настрой нашего протагониста схематично обозначен линейной диаграммой.
Вывод
Карта пути пользователя, это полезный инструмент для продуктовых команд. Если правильно выстроить карту, то она поможет привести команду к общему видению продукта, а также улучшить взаимодействие с пользователем.
Полезные материалы
— Пример схемы построения customer journey map
— Создавать карты можно в Miro или FigJam
Книга по теме
Путь клиента — Создаем ценность продуктов и услуг через карты путей, блупринты и другие инструменты визуализации
Автор: Джим Калбах
Если было полезно, дайте знать в реакциях!
#почитать
👍35❤6
JMTemplate.pdf
936.2 KB
Вдобавок к посту перевел для вас шаблон для создания пользовательских карт путей от Nielsen Norman Group
❤11👍8
Как продать свои услуги дороже #1
Успешный дизайнер, это не тот кто делает "круче" всех, а тот, кто продает свои услуги лучше своих коллег.
Мы уже разобрались как правильно рассчитывать рыночную стоимость своей работы. Сегодня рассмотрим несколько приемов, как продать свои услуги и не продешевить. Погнали...
1. Презентация цены клиенту
Как вы обычно отправляете предложение вашим клиентам? Наверняка шлете им имейл с коммерческим предложением и ждете скрестив пальцы, что прокатит? Так делает большинство фрилансеров, но горькая правда заключается в том, что если вы хотите заполучить нового клиента, эта стратегия не очень эффективна. Особенно если клиент выбирает из нескольких исполнителей.
Лучше обсудите ваше предложение и сообщите о цене при личной встрече. Это можно сделать также через видеочат/телефонный звонок, если речь идет об удаленном заказе. Такой подход поможет лучше расположить клиента к тому, чтобы он остановил свой выбор именно на вас.
2. Описание услуг
Не стоит расписывать все цены за отдельные услуги. В стремлении наиболее подробно расписать все тарифы за услуги в вашем предложении вы скорей достигните противоположного эффекта. Увидев очень много разных значений клиент начнет задумываться, а не стоит ли отказаться от той или иной позиции чтобы снизить общие затраты... В конечном итоге это снизит и ваш конечный заработок.
Рассмотрим на конкретном примере:
Создание информационной архитектуры страницы: $100
Разработка вайрфреймов страницы: $200
Разработка первичного макета страницы: $300
Общая сумма: $600
Увидев ценник, клиент может начать торговаться по поводу определенных позиций, сравнивать их с конкурентами или может попросить полностью исключить отдельные услуги. Мотивировав это например тем, что информационная архитектура не нужна т.к. он и так все вам предоставит.
Вместо того, чтобы разбивать проект на услуги, разбейте его по этапам, разъяснив, что туда входит:
1. Первичная концепция страницы: $600
Создание информационной архитектуры, разработка вайрфреймов и первичного макета страницы
2. Разработка макетов страницы: $500
Создание макетов страниц на основе утвержденного дизайна, подготовка макета для верстки
3. Верстка макета: $500
Вёрстка на Tilda по утвержденным макетам
Общая сумма: $1600
Таким образом мы получим взаимосвязанные этапы, которые невозможно исключить из проекта.
3. Тайминг
Не стоит начинать разговор с клиентом сразу с цены за ваши услуги, а потом переходить на тему конкретного решения. Если вы сначала называете цену, то он будет подсознательно принимать решение на основании экономической выгоды, а не качества услуги.
Лучше сначала расскажите какую работу вы будете выполнять и как она повлияет на достижение коммерческих целей клиента. Покажите примеры успешно реализованных проектов и только потом называйте свою цену.
На этом все! В следующей части напишу про психологические приемы в формировании цены. Если было полезно, дайте знать в реакциях.
Успешный дизайнер, это не тот кто делает "круче" всех, а тот, кто продает свои услуги лучше своих коллег.
Мы уже разобрались как правильно рассчитывать рыночную стоимость своей работы. Сегодня рассмотрим несколько приемов, как продать свои услуги и не продешевить. Погнали...
1. Презентация цены клиенту
Как вы обычно отправляете предложение вашим клиентам? Наверняка шлете им имейл с коммерческим предложением и ждете скрестив пальцы, что прокатит? Так делает большинство фрилансеров, но горькая правда заключается в том, что если вы хотите заполучить нового клиента, эта стратегия не очень эффективна. Особенно если клиент выбирает из нескольких исполнителей.
Лучше обсудите ваше предложение и сообщите о цене при личной встрече. Это можно сделать также через видеочат/телефонный звонок, если речь идет об удаленном заказе. Такой подход поможет лучше расположить клиента к тому, чтобы он остановил свой выбор именно на вас.
2. Описание услуг
Не стоит расписывать все цены за отдельные услуги. В стремлении наиболее подробно расписать все тарифы за услуги в вашем предложении вы скорей достигните противоположного эффекта. Увидев очень много разных значений клиент начнет задумываться, а не стоит ли отказаться от той или иной позиции чтобы снизить общие затраты... В конечном итоге это снизит и ваш конечный заработок.
Рассмотрим на конкретном примере:
Создание информационной архитектуры страницы: $100
Разработка вайрфреймов страницы: $200
Разработка первичного макета страницы: $300
Общая сумма: $600
Увидев ценник, клиент может начать торговаться по поводу определенных позиций, сравнивать их с конкурентами или может попросить полностью исключить отдельные услуги. Мотивировав это например тем, что информационная архитектура не нужна т.к. он и так все вам предоставит.
Вместо того, чтобы разбивать проект на услуги, разбейте его по этапам, разъяснив, что туда входит:
1. Первичная концепция страницы: $600
Создание информационной архитектуры, разработка вайрфреймов и первичного макета страницы
2. Разработка макетов страницы: $500
Создание макетов страниц на основе утвержденного дизайна, подготовка макета для верстки
3. Верстка макета: $500
Вёрстка на Tilda по утвержденным макетам
Общая сумма: $1600
Таким образом мы получим взаимосвязанные этапы, которые невозможно исключить из проекта.
3. Тайминг
Не стоит начинать разговор с клиентом сразу с цены за ваши услуги, а потом переходить на тему конкретного решения. Если вы сначала называете цену, то он будет подсознательно принимать решение на основании экономической выгоды, а не качества услуги.
Лучше сначала расскажите какую работу вы будете выполнять и как она повлияет на достижение коммерческих целей клиента. Покажите примеры успешно реализованных проектов и только потом называйте свою цену.
На этом все! В следующей части напишу про психологические приемы в формировании цены. Если было полезно, дайте знать в реакциях.
❤🔥31👍14❤3
Аффордансы, карты пользовательского пути, как продать свои услуги дороже...
По традиции недельный дайджест.
— Как делать лендинги в 2022
— Психология в дизайне — Закон Сходства
— Основы UX дизайна — Аффордансы
— 6 видеоуроков с фишками и лайфхаки работы в Figma
— Инструменты - Как строить карту пути пользователя
— Как продать свои услуги дороже #1
Если неделя была для вас полезной, дайте знать в реакциях.
По традиции недельный дайджест.
— Как делать лендинги в 2022
— Психология в дизайне — Закон Сходства
— Основы UX дизайна — Аффордансы
— 6 видеоуроков с фишками и лайфхаки работы в Figma
— Инструменты - Как строить карту пути пользователя
— Как продать свои услуги дороже #1
Если неделя была для вас полезной, дайте знать в реакциях.
🔥14👍1
Голосуем за темы постов на неделю. Выйдут 4 из 5:
Final Results
17%
Нужна ли дизайнеру насмотренность?
18%
Эффективность - Первый закон Паркинсона
19%
Как продать свои услуги дороже #2
21%
Модель AIDA в дизайне
25%
5 полезных ресурсов для дизайнеров
ТОП-11 принципов использования сеток в графическом и веб-дизайне
Как часто вы пользуетесь сетками в макетах? Если ваш ответ иногда или никогда, то очень рекомендую прочесть статью. Ведь сетка задает правильный ритм дизайну, а это то, что выгодно отличает крутой дизайн от посредственного. Автор делится практическими советами с наглядными примерами и разбирает основные правила, такие как: что такое модульная сетка? Сколько колонок выбрать? Зачем нужен вертикальный ритм? И многие другие...
https://ux-journal.ru/top-11-printsipov-ispolzovaniya-setok-v-graph-i-web-dizajne.html#principle-8
Как часто вы пользуетесь сетками в макетах? Если ваш ответ иногда или никогда, то очень рекомендую прочесть статью. Ведь сетка задает правильный ритм дизайну, а это то, что выгодно отличает крутой дизайн от посредственного. Автор делится практическими советами с наглядными примерами и разбирает основные правила, такие как: что такое модульная сетка? Сколько колонок выбрать? Зачем нужен вертикальный ритм? И многие другие...
https://ux-journal.ru/top-11-printsipov-ispolzovaniya-setok-v-graph-i-web-dizajne.html#principle-8
Продуктовый дизайн (UX/UI), брендинг и аналитика
11 принципов модульных сеток в графическом и веб-дизайне
Разобрала 11 правил применения сеток. Результаты исследования собрала в практические советы по созданию продуманного дизайна. Заходите изучать!
🔥10👏1
Эффективность - Первый закон Паркинсона
Британский историк и сатирик Сирил Норткот Паркинсон (не путать с врачем однофамильцем Джеймсом Паркинсоном) прославился не только своими полушутливыми наблюдениями в отношении бюрократии и государственных учреждений, но и меткими рассуждениями о проблемах бизнеса и менеджмента.
В 1955 году в журнале The Economist был опубликовал Первый закон Паркинсона, который звучит так:
Объем работы всегда будет расти для того, чтобы заполнить время, отведенное на ее выполнение.
Иными словами, мы будем работать над задачей ровно столько, сколько на нее было выделено времени.
Какое отношение это имеет к эффективности? Самое прямое: осознавая, что у нас есть определенное количество времени, чтобы что-то сделать, мы склонны откладывать работу на самую последнюю минуту. Наверно и у вас такое бывало — клиент просит внести всего лишь несколько небольших правок до конца недели. Вместо того чтобы сделать работу за пару часов, мы размазываем весь процесс на дни до самого дедлайна находя себе массу альтернативных занятий. Это и есть закон Паркинсона в действии. Особенно это можно наблюдать в корпоративной работе, где простые действия превращаются в сложные процессы отнимающие много времени.
Как с этим бороться?
Сократите разрыв между постановкой задачи и ее выполнением. При необходимости вы способны выполнять работу гораздо быстрее чем вам кажется! Не откладывайте порученные вам дела, а заранее планируйте их выполнение строго следуя графику. Также стоит сокращать объем работы, везде где это возможно и не повлияет на качество результата.
Если было полезно, реакции к вашим услугам. До скорой!
Британский историк и сатирик Сирил Норткот Паркинсон (не путать с врачем однофамильцем Джеймсом Паркинсоном) прославился не только своими полушутливыми наблюдениями в отношении бюрократии и государственных учреждений, но и меткими рассуждениями о проблемах бизнеса и менеджмента.
В 1955 году в журнале The Economist был опубликовал Первый закон Паркинсона, который звучит так:
Объем работы всегда будет расти для того, чтобы заполнить время, отведенное на ее выполнение.
Иными словами, мы будем работать над задачей ровно столько, сколько на нее было выделено времени.
Какое отношение это имеет к эффективности? Самое прямое: осознавая, что у нас есть определенное количество времени, чтобы что-то сделать, мы склонны откладывать работу на самую последнюю минуту. Наверно и у вас такое бывало — клиент просит внести всего лишь несколько небольших правок до конца недели. Вместо того чтобы сделать работу за пару часов, мы размазываем весь процесс на дни до самого дедлайна находя себе массу альтернативных занятий. Это и есть закон Паркинсона в действии. Особенно это можно наблюдать в корпоративной работе, где простые действия превращаются в сложные процессы отнимающие много времени.
Как с этим бороться?
Сократите разрыв между постановкой задачи и ее выполнением. При необходимости вы способны выполнять работу гораздо быстрее чем вам кажется! Не откладывайте порученные вам дела, а заранее планируйте их выполнение строго следуя графику. Также стоит сокращать объем работы, везде где это возможно и не повлияет на качество результата.
Если было полезно, реакции к вашим услугам. До скорой!
👍23❤3😁1🥴1
5 полезных ресурсов для дизайнеров
Подборка всякой годноты когда нужно найти бесплатный качественный контент для макета или сайта.
Собрал для вас менее известные ресурсы как альтернативу популярным freepik, flaticon, pixabay...
imockups.com - Мокапы и не только
На сайте агрегировано более 5 000 качественных мокапов девайсов, печатной продукции, а также шаблонов, текстур и шрифтов.
glazestock.com - качественные иллюстрации
Большой выбор иллюстраций разнообразных стилей. В бесплатной версии можно скачать только в PNG формате и с указанием авторства.
iconoir.com - стильные иконки
Ресурс с бесплатными иконками. В библиотеке более 1200 качественных иконок в едином минималистичном стиле.
Особенно радует, что можно скопировать SVG код с сайта прямо в Фигму.
rawpixel.com - библиотека изображений
Хорошая библиотека фотографий и PNG картинок с прозрачным фоном. Можно скачать максимум 5 изображений в день.
coverr.co - видеобложки для веб-сайтов
Ролики довольно аутентичные, все видео бесплатные в том числе и для коммерческого пользования.
На этом все! А какие полезные ресурсы знаете вы? Поделитесь в комментах!
Подборка всякой годноты когда нужно найти бесплатный качественный контент для макета или сайта.
Собрал для вас менее известные ресурсы как альтернативу популярным freepik, flaticon, pixabay...
imockups.com - Мокапы и не только
На сайте агрегировано более 5 000 качественных мокапов девайсов, печатной продукции, а также шаблонов, текстур и шрифтов.
glazestock.com - качественные иллюстрации
Большой выбор иллюстраций разнообразных стилей. В бесплатной версии можно скачать только в PNG формате и с указанием авторства.
iconoir.com - стильные иконки
Ресурс с бесплатными иконками. В библиотеке более 1200 качественных иконок в едином минималистичном стиле.
Особенно радует, что можно скопировать SVG код с сайта прямо в Фигму.
rawpixel.com - библиотека изображений
Хорошая библиотека фотографий и PNG картинок с прозрачным фоном. Можно скачать максимум 5 изображений в день.
coverr.co - видеобложки для веб-сайтов
Ролики довольно аутентичные, все видео бесплатные в том числе и для коммерческого пользования.
На этом все! А какие полезные ресурсы знаете вы? Поделитесь в комментах!
❤14🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
Подборка дизайнерских шоурилов
Наткнулся на ресурс SHOWREELZ с крутой коллекцией демонстрационных видеороликов от дизайнерских компаний. Видеоролики можно посмотреть по категориям: графический дизайн, UI/UХ, Анимация, брендинг, 3D... Также можно предложить и собственный ролик для публикации. Даже если анимация не совсем ваша тема, все равно советую заглянуть — многие работы реально вдохновляют...
Наткнулся на ресурс SHOWREELZ с крутой коллекцией демонстрационных видеороликов от дизайнерских компаний. Видеоролики можно посмотреть по категориям: графический дизайн, UI/UХ, Анимация, брендинг, 3D... Также можно предложить и собственный ролик для публикации. Даже если анимация не совсем ваша тема, все равно советую заглянуть — многие работы реально вдохновляют...
🔥5👍4
Как продать свои услуги дороже #2
Продолжаем разбор приемов по успешной продаже своих услуг. Ссылка на предыдущий пост.
4. Покажите скидки
Вы должны помнить, что ни при каких условиях цена ваших услуг не должна быть ниже вашего минимального тарифа. Если всетаки цену необходимо снизить, например ради дальнейшего перспективного сотрудничества или из-за интересного проекта, то всегда указывайте вашу скидку в коммерческом предложении. Большинство совершают ошибку, сразу указывая заниженную цену. В таком случае клиент будет ожидать, что и дальнейшие работы будут осуществляться по заниженной цене. Указав конкретную сумму скидки вы не рискуете застрять в круговороте бесконечных скидок в дальнейшем.
5. Психология оформления цены
Есть несколько психологических приемов которыми вы можете руководствоваться при оформлении вашего предложения:
— Не используйте пробелы в четырехзначных цифрах. Например: 1500 руб вместо 1 500 руб. Смысл в том, что числа с разделенными разрядами подсознательно воспринимаются как большие. Пробел напротив стоит использовать в шестизначных значениях. Например: 150 000 руб вместо 150000 руб. Тут глазу проще считывать значение.
— Не используйте разные размеры шрифта, например увеличивая размер кегля итоговой суммы. Чем больше шрифт, тем большей кажется цена. Поэтому лучше использовать одинаковый размер и толщину шрифта для каждой позиции в коммерческом предложении.
— Округляйте цены до ближайших целых чисел. Чем больше цена, тем больше округление.
6. Придерживайтесь выбранной стратегии ценообразования
Старайтесь изначально правильно оценить свою работу просчитав все возможные сценарии. Если вы договорились о фиксированной цене, не стоит говорить клиенту сколько часов вы потратили на работу и потом просить почасовую оплату. Отслеживайте время только ради того, чтобы обеспечить себе прибыль, а не ради подсчета почасовой оплаты.
В заключение
Одно из наиболее важных правил в бизнесе — всегда говорите о деньгах уверенно. Даже если вам может показаться, что вы просите слишком большую цену — клиент не должен почувствовать, что вы сомневаетесь в цене. Иначе доверие к вам испарится довольно быстро. Помните, что клиент в первую очередь должен понять то, какую прибыль он получит в конечном итоге инвестируя в ваши услуги.
На этом все! Если было полезно, дайте знать в реакциях.
Продолжаем разбор приемов по успешной продаже своих услуг. Ссылка на предыдущий пост.
4. Покажите скидки
Вы должны помнить, что ни при каких условиях цена ваших услуг не должна быть ниже вашего минимального тарифа. Если всетаки цену необходимо снизить, например ради дальнейшего перспективного сотрудничества или из-за интересного проекта, то всегда указывайте вашу скидку в коммерческом предложении. Большинство совершают ошибку, сразу указывая заниженную цену. В таком случае клиент будет ожидать, что и дальнейшие работы будут осуществляться по заниженной цене. Указав конкретную сумму скидки вы не рискуете застрять в круговороте бесконечных скидок в дальнейшем.
5. Психология оформления цены
Есть несколько психологических приемов которыми вы можете руководствоваться при оформлении вашего предложения:
— Не используйте пробелы в четырехзначных цифрах. Например: 1500 руб вместо 1 500 руб. Смысл в том, что числа с разделенными разрядами подсознательно воспринимаются как большие. Пробел напротив стоит использовать в шестизначных значениях. Например: 150 000 руб вместо 150000 руб. Тут глазу проще считывать значение.
— Не используйте разные размеры шрифта, например увеличивая размер кегля итоговой суммы. Чем больше шрифт, тем большей кажется цена. Поэтому лучше использовать одинаковый размер и толщину шрифта для каждой позиции в коммерческом предложении.
— Округляйте цены до ближайших целых чисел. Чем больше цена, тем больше округление.
6. Придерживайтесь выбранной стратегии ценообразования
Старайтесь изначально правильно оценить свою работу просчитав все возможные сценарии. Если вы договорились о фиксированной цене, не стоит говорить клиенту сколько часов вы потратили на работу и потом просить почасовую оплату. Отслеживайте время только ради того, чтобы обеспечить себе прибыль, а не ради подсчета почасовой оплаты.
В заключение
Одно из наиболее важных правил в бизнесе — всегда говорите о деньгах уверенно. Даже если вам может показаться, что вы просите слишком большую цену — клиент не должен почувствовать, что вы сомневаетесь в цене. Иначе доверие к вам испарится довольно быстро. Помните, что клиент в первую очередь должен понять то, какую прибыль он получит в конечном итоге инвестируя в ваши услуги.
На этом все! Если было полезно, дайте знать в реакциях.
❤22👍3
Модель AIDA в дизайне
Если вы соприкасались с маркетингом, то наверняка уже слышали о классической модели потребительского поведения АИДА (акроним от англ. AIDA — Attention, Interest, Desire, Action — внимание, интерес, желание, действие). Суть состоит в том, чтобы в первую очередь привлечь внимание потенциального потребителя, затем вызвать его интерес, который перейдет в желание обладать товаром и, наконец, побудить к действию — покупке. Так это работает в рекламе и маркетинге. Разберем насколько эту модель можно применить в проектировке макета веб-страницы.
1. Привлеките внимание
Следуя этому правилу первый экран который увидит посетитель должен захватить его внимание. В зависимости от вашей аудитории это может быть интересное визуальное решение, захватывающий видеоклип или привлекающий внимание заголовок. Основной посыл - заинтересовать посетителя, чтобы он захотел узнать больше о вашем продукте. Чтобы попасть в яблочко важно основательно изучить вашу ЦА.
— Первый экран должен зацепить посетителя, вызвать яркие эмоции.
2. Разбудите интерес
Вы привлекли внимание, следующий шаг вызвать заинтересованность. Передайте полезность и уникальность вашего предложения для клиента. Сфокусируйтесь на его потребностях. Тут важно все — и сам контент и его грамотная подача (дизайн). Если вы, например, проектируете свою страницу-портфолио, это та часть, где вы рассказываете о себе, пробуждая тем самым интерес потенциальных заказчиков. Хороший прием для подачи контента — воспользоваться сторителлингом.
— расскажите о ценностях вашего сервиса/продукта
— поясните в чем ваш сервис/продукт уникален для ЦА
3. Пробудите желание
На этом этапе вы должны усилить позитивное впечатление вызвав доверие, например, продемонстрировав конкретные кейсы как вы можете решить проблемы клиента.
Если вы дизайнер — покажите ваши работы и как вы решаете поставленные задачи. Другой прием, социальное доказательство — один из самых сильных и распространенных способов пробудить желание. Если у вас продукт или сервис —продемонстрируйте отзывы выших клиентов или покупателей.
— заставьте клиента захотеть работать с вами / владеть товаром предоставив доказательства вашей компетентности
— Вызывайте доверие
4. Совершение дейсвия
Финальная цель — преобразовать пользователя в покупателя или подписчика. Как правило это типичные СТА-кнопки призыва к действию: «В корзину», «Зарегистрироваться», «Скачать» итд. Усилить призыв к действию можно, например, предлогая специальную акцию или добавив эффект срочности, который поможет клиенту решиться на действие.
— используйте четкий призыв к действию
— подтолкните клиента к принятию решения
Насколько можно понять в модели AIDA нет ничего особо нового или прорывного. Сайты как когда-то печатная реклама делаются по тем же принципам основанным на поведенчиской психологии потребителя. И что самое интересное - метод работает по сей день и он довольно универсален. Следуя его сценарию можно не только настроить воронку продаж или повысить конверсию, но и улучшить удобство продукта разбив взаимодействие с пользователем на понятные этапы.
Было полезно? Дайте знать в реакциях!
Если вы соприкасались с маркетингом, то наверняка уже слышали о классической модели потребительского поведения АИДА (акроним от англ. AIDA — Attention, Interest, Desire, Action — внимание, интерес, желание, действие). Суть состоит в том, чтобы в первую очередь привлечь внимание потенциального потребителя, затем вызвать его интерес, который перейдет в желание обладать товаром и, наконец, побудить к действию — покупке. Так это работает в рекламе и маркетинге. Разберем насколько эту модель можно применить в проектировке макета веб-страницы.
1. Привлеките внимание
Следуя этому правилу первый экран который увидит посетитель должен захватить его внимание. В зависимости от вашей аудитории это может быть интересное визуальное решение, захватывающий видеоклип или привлекающий внимание заголовок. Основной посыл - заинтересовать посетителя, чтобы он захотел узнать больше о вашем продукте. Чтобы попасть в яблочко важно основательно изучить вашу ЦА.
— Первый экран должен зацепить посетителя, вызвать яркие эмоции.
2. Разбудите интерес
Вы привлекли внимание, следующий шаг вызвать заинтересованность. Передайте полезность и уникальность вашего предложения для клиента. Сфокусируйтесь на его потребностях. Тут важно все — и сам контент и его грамотная подача (дизайн). Если вы, например, проектируете свою страницу-портфолио, это та часть, где вы рассказываете о себе, пробуждая тем самым интерес потенциальных заказчиков. Хороший прием для подачи контента — воспользоваться сторителлингом.
— расскажите о ценностях вашего сервиса/продукта
— поясните в чем ваш сервис/продукт уникален для ЦА
3. Пробудите желание
На этом этапе вы должны усилить позитивное впечатление вызвав доверие, например, продемонстрировав конкретные кейсы как вы можете решить проблемы клиента.
Если вы дизайнер — покажите ваши работы и как вы решаете поставленные задачи. Другой прием, социальное доказательство — один из самых сильных и распространенных способов пробудить желание. Если у вас продукт или сервис —продемонстрируйте отзывы выших клиентов или покупателей.
— заставьте клиента захотеть работать с вами / владеть товаром предоставив доказательства вашей компетентности
— Вызывайте доверие
4. Совершение дейсвия
Финальная цель — преобразовать пользователя в покупателя или подписчика. Как правило это типичные СТА-кнопки призыва к действию: «В корзину», «Зарегистрироваться», «Скачать» итд. Усилить призыв к действию можно, например, предлогая специальную акцию или добавив эффект срочности, который поможет клиенту решиться на действие.
— используйте четкий призыв к действию
— подтолкните клиента к принятию решения
Насколько можно понять в модели AIDA нет ничего особо нового или прорывного. Сайты как когда-то печатная реклама делаются по тем же принципам основанным на поведенчиской психологии потребителя. И что самое интересное - метод работает по сей день и он довольно универсален. Следуя его сценарию можно не только настроить воронку продаж или повысить конверсию, но и улучшить удобство продукта разбив взаимодействие с пользователем на понятные этапы.
Было полезно? Дайте знать в реакциях!
👍24❤3🔥2
Закон Паркинсона, дизайнерские шоурилы, модель AIDA в дизайне...
По традиции недельный дайджест.
— ТОП-11 принципов использования сеток в графическом и веб-дизайне
— Эффективность - Первый закон Паркинсона
— 5 полезных ресурсов для дизайнеров
— Подборка дизайнерских шоурилов
— Как продать свои услуги дороже #2
— Модель AIDA в дизайне
Если неделя была для вас полезной, поделитесь в реакциях. Для вас пустяки, а меня это даже очень мотивирует!
По традиции недельный дайджест.
— ТОП-11 принципов использования сеток в графическом и веб-дизайне
— Эффективность - Первый закон Паркинсона
— 5 полезных ресурсов для дизайнеров
— Подборка дизайнерских шоурилов
— Как продать свои услуги дороже #2
— Модель AIDA в дизайне
Если неделя была для вас полезной, поделитесь в реакциях. Для вас пустяки, а меня это даже очень мотивирует!
🔥14👍1
Голосуем за темы постов на неделю. Выйдут 4 из 5:
Final Results
26%
Психология в дизайне — эффект «эстетика в юзабилити»
18%
Зачем нужны гайдлайны
26%
Сторителлинг в UX
6%
Нужна ли дизайнеру насмотренность?
24%
Правила создания карточки товара в интернет-магазине
👍1
28 Figma-плагинов для экспорта, импорта и конвертации данных
Подборка полезных плагинов экспорта макетов Figma в сервисы для прототипирования и создания готовых сайтов. Кроме того имеются плагины с помощью которых можно конвертировать отдельные элементы дизайна (шрифты, изображения, иконки) в необходимые форматы и код. Также есть плагины для импорта разных форматов в Фигму, как например Sketch, XD, EPS, AI или даже сайтов.
>> Ссылка
Подборка полезных плагинов экспорта макетов Figma в сервисы для прототипирования и создания готовых сайтов. Кроме того имеются плагины с помощью которых можно конвертировать отдельные элементы дизайна (шрифты, изображения, иконки) в необходимые форматы и код. Также есть плагины для импорта разных форматов в Фигму, как например Sketch, XD, EPS, AI или даже сайтов.
>> Ссылка
👍1
Психология в дизайне — эффект «эстетика в юзабилити»
Суть эффекта заключается в тенденции пользователей воспринимать визуально привлекательные продукты как более пригодные для использования. Иными словами – люди склонны верить, что вещи, которые выглядят привлекательней, будут работать лучше – даже если на самом деле они не являются более эффективными или действенными.
Первыми эффект подметили работники Hitachi Design Center в 1995 году в ходе юзабилити-исследования дизайна банкоматов. Несмотря на то, что пользователи сталкивались, с проблемами при взаимодействии с интерфейсами и с трудом справлялись с поставленными задачами они все равно положительно оценивали их функциональность.
Какой вывод можно сделать?
Хороший пользовательский опыт, это не только функциональный интерфейс, но и проработанный эстетичный дизайн соответствующий ожиданиям вашей целевой аудитории. Таким образом пользователи будут более терпимыми к незначительным проблемам с удобством использования вашего продукта. Кроме того, во время пользовательских тестирований стоит больше обращать внимание на то, как пользователи решают задачи, а не то, что они говорят по поводу вашего продукта.
На этом все! Если было полезно, дайте знать в реакциях.
Суть эффекта заключается в тенденции пользователей воспринимать визуально привлекательные продукты как более пригодные для использования. Иными словами – люди склонны верить, что вещи, которые выглядят привлекательней, будут работать лучше – даже если на самом деле они не являются более эффективными или действенными.
Первыми эффект подметили работники Hitachi Design Center в 1995 году в ходе юзабилити-исследования дизайна банкоматов. Несмотря на то, что пользователи сталкивались, с проблемами при взаимодействии с интерфейсами и с трудом справлялись с поставленными задачами они все равно положительно оценивали их функциональность.
Какой вывод можно сделать?
Хороший пользовательский опыт, это не только функциональный интерфейс, но и проработанный эстетичный дизайн соответствующий ожиданиям вашей целевой аудитории. Таким образом пользователи будут более терпимыми к незначительным проблемам с удобством использования вашего продукта. Кроме того, во время пользовательских тестирований стоит больше обращать внимание на то, как пользователи решают задачи, а не то, что они говорят по поводу вашего продукта.
На этом все! Если было полезно, дайте знать в реакциях.
👍22
Зачем нужны гайдлайны
Для начала разберемся, что это такое? Гайдлайны ― в первую очередь, это набор правил и рекомендаций по использованию элементов дизайна. Для брендов в таком документе собрано описание отдельно взятых составляющих бренда: логотип, типографика, цвета бренда и прочие компоненты. Если речь касается платформенных гайдлайнов, для разработки цифровых продуктов, то тут основная цель – описать принципы взаимодействия и дизайн элементов интерфейса системы. Наиболее известные, из них – Apple Human Interface Guidelines для iOS и Google Material Design System для Android. Как правило, гайдлайны являются в данном случае документацией UI-кита или дизайн-системы.
Чем гайдлайны полезны при разработке продукта?
В первую очередь, это сокращение времени и стоимости разработки приложения или сервиса за счет применения готовых компонентов. Дизайнерам и разработчикам проще сотрудничать опираясь на единый документ стандартизирующий все элементы интерфейса. С другой стороны, придерживаясь единых принципов взаимодействия, поможет вам проектировать более удобные и интуитивные интерфейсы независимо от состава команды.
Почему дизайнерам стоит изучать платформенные гайдлайны?
Выделю наиболее важные пункты:
― Это поможет вам понять особенности платформы, разобраться в UX-паттернах. В особенности это полезно при разработке мобильных приложений.
― Если вы разрабатываете собственный дизайн кит, можно выстраивать компоненты на основе имеющихся платформенных гайдлайнов взяв UI элементы как шаблон.
― Очень полезно если вы хотите изучить передовые практики в проектировки интерфейсов. Например, как использовать контекстное меню, как отображать навигацию, понять как работает поле поиска итд... В особенности, как пособие для начинающих дизайнеров.
Полезные материалы
material.io - гайдлайны Material Design от Google
fonts.google.com/icons - библиотека с более чем 2500 Google Material иконок
Apple Human Interface Guidelines - гайдлайны от Apple
Дизайн-системы
Polaris - Дизайн система от Shopify
Carbon - дизайн система от IBM
Fluent - дизайн система от Microsoft
Audi Design System - дизайн система от Audi
Думаю позже более подробно описать основные нюансы и отличия дизайн-систем от Apple и Google. Дайте знать в реакциях, если тема вам интересна!
Для начала разберемся, что это такое? Гайдлайны ― в первую очередь, это набор правил и рекомендаций по использованию элементов дизайна. Для брендов в таком документе собрано описание отдельно взятых составляющих бренда: логотип, типографика, цвета бренда и прочие компоненты. Если речь касается платформенных гайдлайнов, для разработки цифровых продуктов, то тут основная цель – описать принципы взаимодействия и дизайн элементов интерфейса системы. Наиболее известные, из них – Apple Human Interface Guidelines для iOS и Google Material Design System для Android. Как правило, гайдлайны являются в данном случае документацией UI-кита или дизайн-системы.
Чем гайдлайны полезны при разработке продукта?
В первую очередь, это сокращение времени и стоимости разработки приложения или сервиса за счет применения готовых компонентов. Дизайнерам и разработчикам проще сотрудничать опираясь на единый документ стандартизирующий все элементы интерфейса. С другой стороны, придерживаясь единых принципов взаимодействия, поможет вам проектировать более удобные и интуитивные интерфейсы независимо от состава команды.
Почему дизайнерам стоит изучать платформенные гайдлайны?
Выделю наиболее важные пункты:
― Это поможет вам понять особенности платформы, разобраться в UX-паттернах. В особенности это полезно при разработке мобильных приложений.
― Если вы разрабатываете собственный дизайн кит, можно выстраивать компоненты на основе имеющихся платформенных гайдлайнов взяв UI элементы как шаблон.
― Очень полезно если вы хотите изучить передовые практики в проектировки интерфейсов. Например, как использовать контекстное меню, как отображать навигацию, понять как работает поле поиска итд... В особенности, как пособие для начинающих дизайнеров.
Полезные материалы
material.io - гайдлайны Material Design от Google
fonts.google.com/icons - библиотека с более чем 2500 Google Material иконок
Apple Human Interface Guidelines - гайдлайны от Apple
Дизайн-системы
Polaris - Дизайн система от Shopify
Carbon - дизайн система от IBM
Fluent - дизайн система от Microsoft
Audi Design System - дизайн система от Audi
Думаю позже более подробно описать основные нюансы и отличия дизайн-систем от Apple и Google. Дайте знать в реакциях, если тема вам интересна!
👍27🔥9❤1
Могут ли интерфейсы быть предметом искусства? В проекте «Интерфейсы 2.0» графический дизайнер Митя Безыдейный показывает нам машины для управления природой, человеком и его чувствами. Ироничные, а иногда меланхоличные гаджеты заставляют нас задуматься об окружающей действительности или просто помечтать. Как вам работы?
🔥13❤3😁3🤩1