Design Lessons
14K subscribers
10.7K photos
765 videos
1 file
3.53K links
Грызём гранит науки «Дизайн».

Сайт: https://dsgners.ru

Реклама/связь: @design_manager_bot

Мы в реестре: https://vk.cc/cG5hFq
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Но в некоторых случаях также важно изменить состояние самой кнопки. В таких случаях визуальный фидбек также будет сообщать результаты взаимодействия, делая его как видимым, так и понятным. Вот несколько таких случаев: Нажатие на кнопку «Нравится».
This media is not supported in your browser
VIEW IN TELEGRAM
Включение / выключение чего-либо. Изменение цвета кнопки дает пользователям сигнал о текущем состоянии объекта.
Почему мы несправедливо судим других дизайнеров

Мы, люди, привыкли очень быстро реагировать и приспосабливаться к тому, что происходит перед нами. Скорее всего, это как-то относится к всем этим древним принципам вроде “бей или беги”. Ну, вы поняли – принцип “беги от волков, но сражайся за последний пончик”.

Но в современном мире такие быстрые суждения не несут ничего хорошего. Более того, они могут принести вред. Представьте: вы увидели человека, который немного отличается от вас. Да он же может быть самым приятным в мире, но вы уже сделали о нём выводы по своему первому впечатлению.

В кругах дизайнеров всё работает таким же образом. Невероятно легко посмотреть на чужую работу и назвать её дерьмовой. Но справедливо ли мы судим?
Читать статью

#Design
#критика
Иллюзия рациональности

Люди делают рациональный выбор, основываясь на своем восприятии.

Пример: учтите, что клиенты, как правило, выбирают маленькую упаковку (следовательно, она дешевле), а вы хотите продвигать большую упаковку. Для этого вы должны добавить еще один вариант, который немного меньше, чем большой.

Теперь клиенты, как правило, склонятся к выбору средняя упаковки (делать выбор безопаснее). Но они замечают, что большая упаковка всего на несколько долларов дороже, чем средняя. Таким образом, они решили купить большую упаковку.

#психология
#UXLesson
This media is not supported in your browser
VIEW IN TELEGRAM
Это микро-взаимодействие использует моушн, чтобы добавить визуальный интерес к менее захватывающему действию (загрузка файла), а затем отслеживать прогресс. Когда вы нажимаете кнопку загрузки, курсор вращается по кругу, отображая состояние загрузки. Когда загрузка завершена, тот же круг превращается в новую кнопку, позволяющую вам открыть этот файл.

#UXLessons
#MotionDesign
Сбербанк показали новый логотип, градиент и часы с зелёной галочкой

Компания
уже зарегистрировала заявку с изображением в Роспатенте, пишет агентство. В апреле 2019 года «Сбербанк» зарегистрировал товарный знак «Сбер».

Слово «банк» также уберут из названий большинства сервисов, пишет «РИА Новости». Например, лизинговая компания станет «Сберлизинг».

Вторая часть названия в каждом логотипе будет другого цвета: в «СберЗдоровье» вторая часть будет тёмно-розовой, в «Сберлизинге» и «Сберстраховании» — зелёного цвета, а в «Сберрешениях» — светло-синего.

В начале сентября «Сбербанк» анонсировал конференцию «о самой большой трансформации “Сбербанка” за всю историю», где также покажет новые сервисы и продукты для клиентов. Она пройдёт 24 сентября. Перед конференцией «Сбербанк» снял логотип с названием со здания главного офиса на улице Вавилова в Москве.

#news
#LogoDesign
Как создавать лучшие макеты с помощью сетки 8pt
Сетки – это важнейший элемент UI дизайна.

Хорошо. Хорошо. Не сбрасываем со счетов цвет и не забываем о типографике. Но сделайте сетку правильно, и вы на полпути к созданию более привлекательных и функциональных интерфейсов.

Последовательные и масштабируемые интервалы помогают избавиться от догадок при проектировании и разработке. Требуется принимать меньше дизайн-решений. И это позволяет значительно ускорить работу над проектами.

Сетка 8pt, вероятно, является одной из наиболее часто используемых систем сетки, и не без причины.

Время чтения: 2 минуты

Читать статью

#8pt #сетки
This media is not supported in your browser
VIEW IN TELEGRAM
Небольшие и приятные формы

В десктопных версиях основным действием является набор текста. В мобайл всё работает по-другому – здесь важен свайп и нажатие.

Никто не хочет набирать текст и заполнять формы в мобильных приложениях. Если вы вынуждены их вставить для получения информации, сделайте их небольшими и приятными глазу. И да, можно пробовать разные варианты.

#MobileUX
Неоморфизм и его проблемы

Неоморфизм
— это свежий (относительно skeuo/flat/material) тренд в дизайне, который по сути представляет из себя реинкарнацию похороненного скевоморфизма. Так как у этого стиля нет чётко задокументированных гайдлайнов, как например у material, его различные применения вызывают немало споров среди дизайнеров. В этой статье мы разберём его суть и обсудим резко набравшие актуальность из-за Big Sur проблемы.

Читать статью

#UI #неоморфизм
7 шагов конкурентного анализа сайтов

Проведение конкурентного анализа — важная часть любой бизнес-стратегии. Не зная своих конкурентов, невозможно понять, кто из них наибольшая угроза, как победить их и где сосредоточить свои усилия. Те компании, которые проводят конкурентный анализ и используют его для разработки стратегии продвижения, опережают по крайней мере половину своих конкурентов.

Большинство компаний не имеют определенной стратегии. Понимание же сильных и слабых сторон конкурентов необходимо для получения конкурентного преимущества. Если вы не проводите анализ или не обновляете его достаточно часто, вы рискуете.

Зачем анализировать сайты конкурентов
Сегодня быть конкурентоспособным онлайн важнее, чем когда-либо. Большинство потребителей используют интернет для поиска информации о продуктах, услугах или компаниях до принятия решения о покупке. Поэтому крайне важно отстроиться от ваших прямых конкурентов.
Читать статью

#анализ #маркетинг
​​5 советов по улучшению дизайна кнопок

1. Кнопка должна выглядеть как кнопка
Это довольно просто. Мы привыкли, что реальные кнопки представляют собой прямоугольники (а иногда круги). Использование формы, которая не является ни прямоугольником, ни кругом – верный способ запутать ваших пользователей.

Вот почему скевоморфизм все еще присутствует в цифровых интерфейсах, даже когда они почти полностью плоские. Кнопки в пользовательском интерфейсе по-прежнему должны выглядеть и ощущаться, как кнопки на пульте от телевизора.

Не получится использовать «органическую» форму пятна в качестве кнопки. Треугольники и шестиугольники также будут путать пользователя. Некоторые пользователи могут никогда не узнать, что делают эти кнопки.

2. Размер
Вам когда-нибудь приходилось перезагружать девайс, когда сначала нужно найти иглу, чтобы нажать на сверхмалую кнопку «Reset»? Эта концепция дизайна создана специально, чтобы вы не сбросили настройки устройства случайно.

А теперь представьте, если бы все кнопки были такими маленькими. Это сделало бы их очень раздражающими и невероятно сложными в использовании.

В эпоху сенсорных экранов мы обычно измеряем их типичным размером кончика пальца по отношению к плотности экрана. При масштабе 1x квадрат размером от 44 до 48 точек становится комфортным для нажатия. Некоторые приложения, такие как Tinder, экспериментировали с увеличением кнопок призыва к действию до 50 точек (высота) и отметили довольно хорошие результаты. Конечно, вы не можете увеличить кнопку слишком сильно, но стоит попробовать размер в 50–60 точек.

При проектировании для настольных ПК мы можем сделать их немного меньше, поскольку курсор мыши более точен, но не делайте их слишком маленькими. По-прежнему должно быть легко навести курсор, поэтому хороший минимальный размер составляет 32 точки.

Если вы не хотите использовать прямоугольник или круг в качестве основной формы кнопки, единственная альтернатива – это подчеркнутая текстовая ссылка. Если вы не уверены в цвете, лучше всего подойдет темно-синий.

3. Выравнивание – это все!
Самая большая визуальная проблема всех интерфейсов – плохое выравнивание меток кнопок. Хотя большинству дизайнеров и разработчиков удается центрировать их по горизонтали, редко, когда они центрируются по вертикали. В большинстве случаев метка либо чуть-чуть завышена, либо слишком низко расположена.

Метки, написанные только заглавными буквами, очевидно, легче центрировать, но лучше всего придерживаться выравнивания по базовой линии (или просто выровнять по первой заглавной букве и игнорировать нисходящие y, j и g)

Также важны размер кнопки и размер шрифта. Если у вас есть кнопка размером 32 точки и текст размером 17 точек, невозможно разместить его идеально по центру. Отрегулируйте их размер, чтобы они соответствовали друг другу.

4. Работайте над тенями
Падающие тени помогают объекту выделиться на фоне и помогают идентифицировать его как объект, на который можно нажать.

Это потому, что, если что-то выделяется над фоном, мы, естественно, понимаем, что это может быть сдвинуто вниз до уровня фона.

Чтобы кнопки выглядели более дружелюбно, добавьте к цвету тени оттенок цвета фона. В приведенном выше примере тень представляет собой смесь синего. Следует избегать жестких, темных и контрастных теней. Хотя они действительно привлекают внимание к кнопке, они выглядят раздражающе и неприятно, и отвлекают внимание от всего остального.

5. Читабельные метки
Мы уже установили, что метки на кнопках нужно располагать по центру, но также должно быть достаточно места для их прочтения. Избегайте кнопок, на которых почти нет места вокруг текста. Хорошее правило – выше и ниже метки должна помещаться заглавная буква W из шрифта метки, а по бокам должны помещаться по две W.

Конечно, кнопка может быть шире, это лишь минимальный размер, который хорошо смотрится и помогает повысить удобочитаемость метки.
Предоставляйте информацию с меньшей нагрузкой на глаза

Используя график взгляда можно понять, что многословное диалоговое окно и выровненный по левому краю значок требует больше времени для сканирования и фиксации глаз. В то время как краткий текст и выровненный по центру значок требуют меньше усилий. Благодаря этому сокращается количество фиксации глаз и саккады становятся более короткими.

Выровненный по центру значок также позволяет пользователям сканировать экран в одном визуальном направлении (сверху вниз). Им не нужно перемещать глаза по экрану, нужно просто сосредоточиться на центре экрана. С выровненным значком по левому краю пользователи должны сканировать экран в двух визуальных направлениях (слева направо и справа налево). Глаза должны выполнять больше действий, что замедляет работу пользователя.

#UX #UI #Деструктивность
Принцип сходства в визуальном дизайне

Из статьи вы узнаете о визуальных правилах для каждого типа элементов, которые помогут пользователям понять и применять ваш дизайн с лёгкостью.
Читать статью

#Design #UI
Социальное доказательство

Людям
нравится то, что нравится другим. В наши дни социальное доказательство очень распространенный прием. Предоставление пользователю доказательства того, что «обществу это нравится, а значит и вам может понравится», называется социальным доказательством. Рейтинги, обзоры и отзывы – лучшие примеры социального доказательства.

Пользователи покупают продукт, который имеет хороший рейтинг или положительные отзывы группы людей. Такой продукт вызывает больше доверия.

Поскольку в наше время рейтинги, обзоры и отзывы повсюду, просто использовать этот метод будет недостаточно. Пользователи могут подумать, что это фейк, если у вас мало оценок / отзывов. Для эффективного результата, получите огромное количество оценок, мотивируя пользователей их ставить.

#Psychology
Чему Pixar может научить UX-дизайнеров, и при чем тут сторителлинг?

Сторителлинг
сам по себе является одной из задач UX. Роль UX-дизайнера заключается не только в разработке продукта, но и помощи команде, визуализации мечты, объединении заинтересованных сторон. Истории помогут вам сделать это.

В 2011 году бывшая сотрудница Pixar Эмма Коутс (сейчас она работает в Google Assistant) написала в Твиттере трэд, который потом превратился в «22 правила сторителлинга от Pixar». Мы же выделили самые важные из них. Эти 8 правил могут помочь связать нужды пользователей и ваши решения.
Читать статью

#Pixar #UX
20 примеров крутых геометрических паттернов, и как их использовать в дизайне

У
каждой формы свое значение. Самые популярные можно выделить в следующие категории:

-Прямоугольники/квадраты: баланс и традиции;
-Круги: бесконечность, защита и женственность;
-Треугольники: стабильность, энергия и агрессия;
-Ромб: яркость и современность;
-Шестиугольник: единство и баланс.

Объединение этих форм различными способами может создать совершенно новые значения. Например, предмет из прямоугольников и треугольников может подчеркнуть призыв вернуться к традиции.

Но, возможно, вы хотите начать с чего-то попроще. Если это так, геометрические паттерны – то, что вам нужно. Ниже мы рассмотрим 20 примеров, которые помогут вам в создании собственных идей, и советы о том, как их применять.
Читать статью

#патерны
Компоненты Figma с фиксированным соотношением сторон

До
появления Figma Auto Layout наши дни были мрачными и полными ужасов. Чтобы отобразить разные состояния одного и того же элемента, нам приходилось создавать массу компонентов. С Auto Layout 2.0 все изменилось. Стало намного проще изменять кнопки, списки и карточки. Но, едва поставив последнее обновление, мы уже жаждем новых функций…

1.Асимметричные внутренние отступы.
2.Отрицательные внутренние отступы.
3.Фиксированное соотношение сторон.
Читать далее

#AutoLayout
5 шагов для улучшения ваших навыков UI дизайнера

Простые и полезные способы улучшить свои дизайны

Есть несколько простых вещей, которые вы можете сделать, чтобы повысить свои профессиональные навыки, и вам не нужно тратить деньги на дорогие онлайн-курсы или учебники.
Читать статью

#UI