Рекомендация для оптимальной работы в Figma. Организуйте компоненты
Нет ничего хуже, чем открыть чей-то файл дизайна и понять, что нет возможности внести изменения в основные компоненты, не щелкнув правой кнопкой мыши и не выбрав пункт «go to the main component», потому что они не организованы.
Отсутствие организации обязательно приведет к негативным последствиям в какой-то момент, поэтому я всегда рекомендую перемещать каждый основной компонент на собственную страницу или в собственный раздел файла дизайна. Это упрощает обновление компонентов и обнаружение несоответствий. Еще лучше, когда дизайнеры организуют компоненты с помощью заголовков страниц для кнопок, цветовых стилей, полей ввода и т.д.
Чем лучше будет выглядеть файл дизайна, тем лучше будут выглядеть сами дизайны.
Автор
#Figma
Нет ничего хуже, чем открыть чей-то файл дизайна и понять, что нет возможности внести изменения в основные компоненты, не щелкнув правой кнопкой мыши и не выбрав пункт «go to the main component», потому что они не организованы.
Отсутствие организации обязательно приведет к негативным последствиям в какой-то момент, поэтому я всегда рекомендую перемещать каждый основной компонент на собственную страницу или в собственный раздел файла дизайна. Это упрощает обновление компонентов и обнаружение несоответствий. Еще лучше, когда дизайнеры организуют компоненты с помощью заголовков страниц для кнопок, цветовых стилей, полей ввода и т.д.
Чем лучше будет выглядеть файл дизайна, тем лучше будут выглядеть сами дизайны.
Автор
#Figma
Тренд дизайна 2021 года : приложение в приложении. Появление «матрёшек»
Уже не обязательно создавать сложные приложения, тратя силы разработчиков и деньги. В моде мини-приложения, которые могут интегрироваться в крупные платформы.
Например, в сервисах ВКонтакте можно уже и заказать еду, и вызвать такси, и даже найти работу. Тут тоже можно увидеть тенденцию к укрупнению и объединению: популярные приложения становятся некими экосистемами, в которых можно получить релевантные услуги. Пример — китайский мессенджер WeChat. В него интегрирована платежная система, платформа для заказа товаров и другие сервисы. С его помощью даже осуществляется социальный мониторинг, отслеживаются контакты с потенциальными носителями Covid-19.
Людям удобно совершать действия на одной платформе, не держа в телефоне и в голове десятки отдельных приложений.
#Design
Уже не обязательно создавать сложные приложения, тратя силы разработчиков и деньги. В моде мини-приложения, которые могут интегрироваться в крупные платформы.
Например, в сервисах ВКонтакте можно уже и заказать еду, и вызвать такси, и даже найти работу. Тут тоже можно увидеть тенденцию к укрупнению и объединению: популярные приложения становятся некими экосистемами, в которых можно получить релевантные услуги. Пример — китайский мессенджер WeChat. В него интегрирована платежная система, платформа для заказа товаров и другие сервисы. С его помощью даже осуществляется социальный мониторинг, отслеживаются контакты с потенциальными носителями Covid-19.
Людям удобно совершать действия на одной платформе, не держа в телефоне и в голове десятки отдельных приложений.
#Design
Главная ошибка при выборе цвета для бизнеса
Как-то давным-давно моя коллега пыталась помочь мне с цветовой гаммой для айдентики, и предложила мне использовать синий, потому что синий, по её мнению, цвет среднего ценового сегмента.
Трудно с этим смириться (наверное), но в дизайне не всё так однозначно. Например, нет чёткой цифры того, какой делать интерлиньяж для текста, т.к. многие шрифты отличаются друг от друга. Значение 130% для одного может показаться идеальным, для другого — большим, а для третьего маленьким.
То же касается и цвета, нельзя чётко сказать, что синий цвет — это про свежесть, а белый — про элегантность. Если бы это работало, то мы всегда бы знали, что если мы заходим в условно красно-белый магазин, то там 100 пудов будут дешёвые товары. Читать далее
Автор Граф дизайна
Как-то давным-давно моя коллега пыталась помочь мне с цветовой гаммой для айдентики, и предложила мне использовать синий, потому что синий, по её мнению, цвет среднего ценового сегмента.
Трудно с этим смириться (наверное), но в дизайне не всё так однозначно. Например, нет чёткой цифры того, какой делать интерлиньяж для текста, т.к. многие шрифты отличаются друг от друга. Значение 130% для одного может показаться идеальным, для другого — большим, а для третьего маленьким.
То же касается и цвета, нельзя чётко сказать, что синий цвет — это про свежесть, а белый — про элегантность. Если бы это работало, то мы всегда бы знали, что если мы заходим в условно красно-белый магазин, то там 100 пудов будут дешёвые товары. Читать далее
Автор Граф дизайна
Medium
Главная ошибка при выборе цвета для бизнеса
Как-то давным-давно моя коллега пыталась помочь мне с цветовой гаммой для айдентики, и предложила мне использовать синий, потому что синий…
🔥1
Тепловые карты: зачем нужны в мобильных приложениях и примеры использования
Если говорить совсем просто — тепловая карта отображает касания пользователей на каждом экране приложения. Красный цвет — касаний много, синий — мало. Аналитика свайпов, долгих нажатий, попыток приблизить, многочисленных нажатий (в порыве закрыть блок с рекламой) и вообще, любое прикосновение к экрану — в комплекте.
Но зачем это нужно при таком многообразии количественных инструментов аналитики?
Читать статью
#Design
Если говорить совсем просто — тепловая карта отображает касания пользователей на каждом экране приложения. Красный цвет — касаний много, синий — мало. Аналитика свайпов, долгих нажатий, попыток приблизить, многочисленных нажатий (в порыве закрыть блок с рекламой) и вообще, любое прикосновение к экрану — в комплекте.
Но зачем это нужно при таком многообразии количественных инструментов аналитики?
Читать статью
#Design
DeviantArt - на данном ресурсе собраны интересные работы, в большинстве своем в области графического дизайна.
Deviantart
DeviantArt - The Largest Online Art Gallery and Community
DeviantArt is where art and community thrive. Explore over 350 million pieces of art while connecting to fellow artists and art enthusiasts.
Что такое работа над дизайн-проектом. Почему дизайн — не про красоту?
Дизайн логотипа и фирменного стиля — это не только красивая картинка, но кроме нее — инструмент маркетинга, который фильтрует вашу целевую аудиторию так же, как таргетированная реклама.
Работа над любым дизайн-проектом, независимо от его объема, начинается с аналитики маркетинговой стратегии, так как необходимо понять, что будет транслировать бренд, в какой ценовой категории находиться, какое уникальное коммерческое предложение нести, кто будущие потребители, сколько им лет, сколько зарабатывают, в каком случае нуждаются в «продукте», о чем переживают, что им важно при приобретении, кто конкуренты и в чем их отличия.
Автор
Дизайн логотипа и фирменного стиля — это не только красивая картинка, но кроме нее — инструмент маркетинга, который фильтрует вашу целевую аудиторию так же, как таргетированная реклама.
Работа над любым дизайн-проектом, независимо от его объема, начинается с аналитики маркетинговой стратегии, так как необходимо понять, что будет транслировать бренд, в какой ценовой категории находиться, какое уникальное коммерческое предложение нести, кто будущие потребители, сколько им лет, сколько зарабатывают, в каком случае нуждаются в «продукте», о чем переживают, что им важно при приобретении, кто конкуренты и в чем их отличия.
Автор
О чем следует помнить при проектировании баннеров
1. Размещение баннера
Баннеры прерывают работу пользователя, но их уровень прерывания должен соответствовать уровню важности. Вы должны разместить их там, где они будут заметны, не мешая пользователю. Кроме того, у пользователей должна быть возможность их отклонить.
2. Они должны выделяться
Вы можете экспериментировать с градиентами, цветами, полужирным шрифтом, визуальными эффектами: добавляйте изображения с помощью значков или соответствующих иллюстраций, чтобы они были интересными. Идея состоит в том, чтобы отделить паттерн от среды, в которой он размещен.
3. Проектируйте для масштабируемости
Представьте, сколькими способами он будет использоваться разработчиком. Используйте элементы, которые работают с разными пропорциями и размерами. Учитывайте все возможные крайние случаи.
Визуализация того, что будет дальше после нажатия на баннер, даже важнее, чем сам баннер.
4. Баннерная слепота
Если разместить баннеры один под другим или заполнить пространство слишком большим количеством баннеров, ни один из них не окажет желаемого воздействия. Дизайнер должен очень осторожно использовать эти элементы.
5. Злоупотребление
Если на целевой странице постоянно отображается один и тот же баннер, подумайте, нужно ли вам постоянно отображать эту информацию на странице. Попробуйте мыслить нестандартно. В прямом смысле!
Сохранение актуальности: информация, представленная не заинтересованным пользователям, часто воспринимается как шумная и ненужная – используйте данные персонализации для предоставления соответствующих баннеров.
#Banner #Design #UX
1. Размещение баннера
Баннеры прерывают работу пользователя, но их уровень прерывания должен соответствовать уровню важности. Вы должны разместить их там, где они будут заметны, не мешая пользователю. Кроме того, у пользователей должна быть возможность их отклонить.
2. Они должны выделяться
Вы можете экспериментировать с градиентами, цветами, полужирным шрифтом, визуальными эффектами: добавляйте изображения с помощью значков или соответствующих иллюстраций, чтобы они были интересными. Идея состоит в том, чтобы отделить паттерн от среды, в которой он размещен.
3. Проектируйте для масштабируемости
Представьте, сколькими способами он будет использоваться разработчиком. Используйте элементы, которые работают с разными пропорциями и размерами. Учитывайте все возможные крайние случаи.
Визуализация того, что будет дальше после нажатия на баннер, даже важнее, чем сам баннер.
4. Баннерная слепота
Если разместить баннеры один под другим или заполнить пространство слишком большим количеством баннеров, ни один из них не окажет желаемого воздействия. Дизайнер должен очень осторожно использовать эти элементы.
5. Злоупотребление
Если на целевой странице постоянно отображается один и тот же баннер, подумайте, нужно ли вам постоянно отображать эту информацию на странице. Попробуйте мыслить нестандартно. В прямом смысле!
Сохранение актуальности: информация, представленная не заинтересованным пользователям, часто воспринимается как шумная и ненужная – используйте данные персонализации для предоставления соответствующих баннеров.
#Banner #Design #UX
👍1
discover COLOR - идеальное сочетание цветов в палитрах. Полезный и очень вдохновляющий ресурс!
Дизайнер-перфекционист: когда слишком хорошо — это плохо
Всё ещё считаете, что перфекционизм — признак идеального дизайнера? У нас для вас плохие новости. Вышедшее из-под контроля стремление к совершенству очень здорово мешает в работе и может со временем привести к выгоранию.
Читать статью
#Design
Всё ещё считаете, что перфекционизм — признак идеального дизайнера? У нас для вас плохие новости. Вышедшее из-под контроля стремление к совершенству очень здорово мешает в работе и может со временем привести к выгоранию.
Читать статью
#Design
Упростите выбор. О чем закон?
«Время, требуемое для выполнения выбора, возрастает с количеством и сложностью самих вариантов выбора.» — Закон Уильяма Хика и Рей Хаймана
Психологи Уильям Хик и Рей Хайман вывели формулу, которая описывает логарифмическую зависимость между временем реакции и количеством опций, из которых нужно сделать выбор. Закон говорит о том, что количество информации, поступающее в мозг, определяет время, которое человек тратит на принятие решения. Получается, чем больше вариантов вы предлагаете пользователям, тем дольше они будут принимать решение. И тем выше шанс, что они разочаруются и уйдут.
Как применить закон в UX?
Закон Хика широко используется в проектировании интерфейсов, например при создании выпадающих меню, форм регистрации, контактных форм, меню навигации, списках и многого другого.
Упрощайте выбор для пользователя, разбивания сложные задачи на маленькие шаги. Выделяйте рекомендуемые параметры, чтобы не перегружать пользователей.
Простые правила
– не выкладывайте перед пользователем все опции сразу;
– группируйте меню по категориям;
– массивные формы разделите на шаги, и на каждом шаге спрашивайте только то, что требуется;
– разбивайте сложные процессы и задачи на несколько этапов;
– предлагайте меньше вариантов.
Автор
#Design
«Время, требуемое для выполнения выбора, возрастает с количеством и сложностью самих вариантов выбора.» — Закон Уильяма Хика и Рей Хаймана
Психологи Уильям Хик и Рей Хайман вывели формулу, которая описывает логарифмическую зависимость между временем реакции и количеством опций, из которых нужно сделать выбор. Закон говорит о том, что количество информации, поступающее в мозг, определяет время, которое человек тратит на принятие решения. Получается, чем больше вариантов вы предлагаете пользователям, тем дольше они будут принимать решение. И тем выше шанс, что они разочаруются и уйдут.
Как применить закон в UX?
Закон Хика широко используется в проектировании интерфейсов, например при создании выпадающих меню, форм регистрации, контактных форм, меню навигации, списках и многого другого.
Упрощайте выбор для пользователя, разбивания сложные задачи на маленькие шаги. Выделяйте рекомендуемые параметры, чтобы не перегружать пользователей.
Простые правила
– не выкладывайте перед пользователем все опции сразу;
– группируйте меню по категориям;
– массивные формы разделите на шаги, и на каждом шаге спрашивайте только то, что требуется;
– разбивайте сложные процессы и задачи на несколько этапов;
– предлагайте меньше вариантов.
Автор
#Design
Избегайте рандомности
Подобная рекомендация верна и для многих других типов диаграмм.
Не используйте стандартную сортировку по алфавиту.
Поместите самые большие значения вверху (для горизонтальных столбчатых диаграмм) или слева (для вертикальных столбчатых диаграмм), чтобы наиболее важные значения занимали наиболее заметное пространство, уменьшая движения глаз и время, необходимое для чтения диаграммы.
Автор
#Design #UX #UI
Подобная рекомендация верна и для многих других типов диаграмм.
Не используйте стандартную сортировку по алфавиту.
Поместите самые большие значения вверху (для горизонтальных столбчатых диаграмм) или слева (для вертикальных столбчатых диаграмм), чтобы наиболее важные значения занимали наиболее заметное пространство, уменьшая движения глаз и время, необходимое для чтения диаграммы.
Автор
#Design #UX #UI
Adobe Color - компания Adobe создала интересный сервис, который позволяет создавать цветовые схемы. Можно смотреть рейтинг лучших палитр либо составлять собственную палитру цветов из загруженного изображения.
А также посмотреть работы других дизайнеров, либо даже поиграть в игру.
А также посмотреть работы других дизайнеров, либо даже поиграть в игру.
Пять важных принципов проведения интервью с пользователем
Интервью — самый эффективный метод исследования. Он позволяет глубоко погрузиться в потребности пользователя, хорошо понять отрасль и отыскать реальные проблемы, которые существуют у целевого рынка. В интервью нет ничего сложного. Если придерживаться нескольких принципов, вы получите всю необходимую информацию.
Читать подробнее
#Design #UX
Интервью — самый эффективный метод исследования. Он позволяет глубоко погрузиться в потребности пользователя, хорошо понять отрасль и отыскать реальные проблемы, которые существуют у целевого рынка. В интервью нет ничего сложного. Если придерживаться нескольких принципов, вы получите всю необходимую информацию.
Читать подробнее
#Design #UX
Балансируйте пробелы для текста с выравниванием по ширине
Выровненный по ширине текст отлично подходит для печати, но не для Интернета. Потому что между словами может остаться много неравномерных пробелов. Чтобы избежать этого, расставьте переносы.
Свойство hyphens управляет расстановкой переносов текста в элементах уровня блока. Обратите внимание, что класс <hyphens> зависит от языка. Это помогает находить возможные разрывы в зависимости от языка, определенного в атрибуте font родительского элемента. Поддерживаются не все языки, и поддержка зависит от конкретного браузера.
Примечание. Если расстановка переносов невозможна, используйте выравнивание текста по левому краю.
Выровненный по ширине текст отлично подходит для печати, но не для Интернета. Потому что между словами может остаться много неравномерных пробелов. Чтобы избежать этого, расставьте переносы.
Свойство hyphens управляет расстановкой переносов текста в элементах уровня блока. Обратите внимание, что класс <hyphens> зависит от языка. Это помогает находить возможные разрывы в зависимости от языка, определенного в атрибуте font родительского элемента. Поддерживаются не все языки, и поддержка зависит от конкретного браузера.
Примечание. Если расстановка переносов невозможна, используйте выравнивание текста по левому краю.
Что такое 4k разрешение?
Вы, должно быть, в последнее время часто слышали термин 4K, эта тема сейчас в тренде. Чтобы понять, что это такое, давайте сначала разберем, что же означает “HD”. Помните, что это супер-упрощенный вариант объяснения. Просто поясним на примере самых распространенных разрешений. Есть разные категории HD.
- Термин HD применим к любому разрешению, начиная с 1280x720px или 720p на 720 горизонтальных линий. Некоторые могут назвать такое разрешение SD, по стандартному определению.
- Термин full HD применяется к экранам 1920x1080px. Большая часть телевизоров использует это разрешение, как и все большее количество продвинутых high-end телефонов (Galaxy SIV, HTC one, Sony Xperia Z, Nexus5).
- Разрешение 4K начинается от 3840×2160 пикселей. Его также называют Quad HD, UHD от Ultra HD. Грубо говоря, вы можете вместить 4 по 1080p в 4K-дисплей по количеству пикселей.
- Вторым разрешением 4K является 4096×2160. Оно немного больше, используется для проекторов и профессиональных камер.
Автор
Вы, должно быть, в последнее время часто слышали термин 4K, эта тема сейчас в тренде. Чтобы понять, что это такое, давайте сначала разберем, что же означает “HD”. Помните, что это супер-упрощенный вариант объяснения. Просто поясним на примере самых распространенных разрешений. Есть разные категории HD.
- Термин HD применим к любому разрешению, начиная с 1280x720px или 720p на 720 горизонтальных линий. Некоторые могут назвать такое разрешение SD, по стандартному определению.
- Термин full HD применяется к экранам 1920x1080px. Большая часть телевизоров использует это разрешение, как и все большее количество продвинутых high-end телефонов (Galaxy SIV, HTC one, Sony Xperia Z, Nexus5).
- Разрешение 4K начинается от 3840×2160 пикселей. Его также называют Quad HD, UHD от Ultra HD. Грубо говоря, вы можете вместить 4 по 1080p в 4K-дисплей по количеству пикселей.
- Вторым разрешением 4K является 4096×2160. Оно немного больше, используется для проекторов и профессиональных камер.
Автор