Эстетика типографики
Цель типографики — улучшение разборчивости, читабельности и привлекательности текста. Перевод статьи, где рассмотрены элементы типографики, классификация шрифтов и лучшие практики их применения на примере крупных брендов.
Читать статью
#TypographyLesson
Цель типографики — улучшение разборчивости, читабельности и привлекательности текста. Перевод статьи, где рассмотрены элементы типографики, классификация шрифтов и лучшие практики их применения на примере крупных брендов.
Читать статью
#TypographyLesson
Teletype
Эстетика типографики
Шрифт — это графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов...
Microsoft показала ненастоящее меню «Пуск» и новый дизайн иконок
Дизайн Fluent приходит на смену Modern
Дизайнерская команда компании Microsoft опубликовала на видеосервисе YouTube новый ролик, демонстрирующий значки с переработанным дизайном для операционной системы Windows 10.
Значки выполнены в дизайне Fluent, который приходит на смену прежнему Modern. Однако самое интересное в этом ролике то, что в нём показано «не настоящее» меню «Пуск», а только официальный концепт, созданный командой дизайнеров Microsoft.
Внимательные пользователи заметили, что концепт выглядит заметно лучше, чем настоящее меню «Пуск», что вызвало изрядный ажиотаж в сети.
Речь идёт о новом меню «Пуск», которое появилось в тестовых сборках Windows. Как ожидается, простые пользователи получат доступ к обновлённому «Пуск» с выходом осеннего обновления Windows 10.
#Microsoft
#DesignNews
Дизайн Fluent приходит на смену Modern
Дизайнерская команда компании Microsoft опубликовала на видеосервисе YouTube новый ролик, демонстрирующий значки с переработанным дизайном для операционной системы Windows 10.
Значки выполнены в дизайне Fluent, который приходит на смену прежнему Modern. Однако самое интересное в этом ролике то, что в нём показано «не настоящее» меню «Пуск», а только официальный концепт, созданный командой дизайнеров Microsoft.
Внимательные пользователи заметили, что концепт выглядит заметно лучше, чем настоящее меню «Пуск», что вызвало изрядный ажиотаж в сети.
Речь идёт о новом меню «Пуск», которое появилось в тестовых сборках Windows. Как ожидается, простые пользователи получат доступ к обновлённому «Пуск» с выходом осеннего обновления Windows 10.
#Microsoft
#DesignNews
С плагином Arrow Auto не нужно рисовать стрелки между интерфейсами для потоковых диаграмм пользовательского интерфейса. Просто одним щелчком мыши, чистая и гладкая стрелка будет нарисована между двумя выбранными элементами, с изменяемыми направлениями.
Отрегулируйте цвет всех стрелок одновременно. Блокируйте / разблокируйте, скройте / покажите все стрелки вместе, чтобы они не мешали вашей работе.
Всегда двигать элементы вокруг? Не волнуйтесь! Просто нажмите «Обновить», и все стрелки будут автоматически отслеживать положение элементов и переподключаться. Легко!
#FigmaPlugins
Отрегулируйте цвет всех стрелок одновременно. Блокируйте / разблокируйте, скройте / покажите все стрелки вместе, чтобы они не мешали вашей работе.
Всегда двигать элементы вокруг? Не волнуйтесь! Просто нажмите «Обновить», и все стрелки будут автоматически отслеживать положение элементов и переподключаться. Легко!
#FigmaPlugins
Может ли нейросеть отобрать у человечества создание дизайна?
Вы наверняка встречали это громогласное саморазоблачение студии Артемия Лебедева. Якобы логотипы для реальных клиентов в тарифе «Экспресс-дизайн» создавала нейросеть.
Кое-где и правда получилось недурно. Но помимо очевидных рассуждений о реальности существования Николая Иронова, меня вот уже месяц мучает другой важный вопрос.
Читать статью
#ArtificialIntelligence
#Design
Вы наверняка встречали это громогласное саморазоблачение студии Артемия Лебедева. Якобы логотипы для реальных клиентов в тарифе «Экспресс-дизайн» создавала нейросеть.
Кое-где и правда получилось недурно. Но помимо очевидных рассуждений о реальности существования Николая Иронова, меня вот уже месяц мучает другой важный вопрос.
Читать статью
#ArtificialIntelligence
#Design
Дизайнеру приложений: как создать и передать в разработку тёмную тему
В конце 2019 года зарелизили iOS 13 и Android 10 с поддержкой автопереключения на тёмную тему. Мы решили добавить её в приложение «Ростелеком Ключ» под iOS и Android, над которым работали в тот момент. В процессе не обошлось без сложностей. Рассказываем о нашем опыте, чтобы вы в аналогичной ситуации сэкономили время и нервы.
Читать статью
#DesignLesson
#DarkTheme
В конце 2019 года зарелизили iOS 13 и Android 10 с поддержкой автопереключения на тёмную тему. Мы решили добавить её в приложение «Ростелеком Ключ» под iOS и Android, над которым работали в тот момент. В процессе не обошлось без сложностей. Рассказываем о нашем опыте, чтобы вы в аналогичной ситуации сэкономили время и нервы.
Читать статью
#DesignLesson
#DarkTheme
Teletype
Дизайнеру приложений: как создать и передать в разработку тёмную тему
Может показаться, что это всё на волне хайпа. Но не только :)
Moscow Digital Academy приглашает на онлайн-интенсив по веб-дизайну бесплатно.. Количество мест ограничено! Первые 100 записавшиеся получат бесплатно закрытый мини-курс по веб-дизайну для новичков.
Узнать подробности и записаться: https://clc.am/design_webinar
Что вы получите:
1. Узнаете все о профессии веб-дизайнера
2. Разберетесь UX и UI
2. Сделаете прототип веб-сайта
3. Нарисуете блок сайта в Figma
4. Получите домашнее задание, которое проверят наши арт-директора и дадут подробное ревью!
Все участники вебинара получат полезные материалы и ссылки, после его окончания.
Чтобы записаться на бесплатный интенсив, переходите на сайт Moscow Digital Academy.
Узнать подробности и записаться: https://clc.am/design_webinar
Что вы получите:
1. Узнаете все о профессии веб-дизайнера
2. Разберетесь UX и UI
2. Сделаете прототип веб-сайта
3. Нарисуете блок сайта в Figma
4. Получите домашнее задание, которое проверят наши арт-директора и дадут подробное ревью!
Все участники вебинара получат полезные материалы и ссылки, после его окончания.
Чтобы записаться на бесплатный интенсив, переходите на сайт Moscow Digital Academy.
Дизайнерское исследование или четкие принципы? Когда можно нарушать правила в дизайне
У начинающего дизайнера может возникнуть соблазн пропустить консультационный процесс с клиентом. Но подход, построенный на «основных принципах», совсем не освобождает вас от этого этапа. Принципы дизайна существуют по определенной причине, а знание того, когда и как их можно нарушать, отличает великих дизайнеров от посредственных.
Как бы вы к этому не относились, но сотворчество с клиентом – утопический идеал совместного видения, который имеет свои недостатки. Наверняка вы очень много раз слышали слова «стратегия бренда», прежде чем столкнулись с этим на деле. Никогда еще не было так заманчиво отдать предпочтение исследованиям и консультациям как в эпоху WordPress, Drupal и, осмелюсь сказать, Wix. Вместо создания структуры принципов с нуля, почему бы не состряпать что-то из уже существующих шаблонов за долю секунды?
На самом деле, бывают ситуации, когда простой подход будет как никогда кстати. Хитрость в том, чтобы знать, когда именно.
Читать подробнее
#DesignLessons
У начинающего дизайнера может возникнуть соблазн пропустить консультационный процесс с клиентом. Но подход, построенный на «основных принципах», совсем не освобождает вас от этого этапа. Принципы дизайна существуют по определенной причине, а знание того, когда и как их можно нарушать, отличает великих дизайнеров от посредственных.
Как бы вы к этому не относились, но сотворчество с клиентом – утопический идеал совместного видения, который имеет свои недостатки. Наверняка вы очень много раз слышали слова «стратегия бренда», прежде чем столкнулись с этим на деле. Никогда еще не было так заманчиво отдать предпочтение исследованиям и консультациям как в эпоху WordPress, Drupal и, осмелюсь сказать, Wix. Вместо создания структуры принципов с нуля, почему бы не состряпать что-то из уже существующих шаблонов за долю секунды?
На самом деле, бывают ситуации, когда простой подход будет как никогда кстати. Хитрость в том, чтобы знать, когда именно.
Читать подробнее
#DesignLessons
Плагин Batch Create Component превращает выбранные слои в отдельные компоненты, а не в один большой компонент.
#Figmaplugins
#Figmaplugins
Почему кнопки отмены должны быть бесцветными
Что именно делает кнопка «Отмена»? Она возвращает пользователя к предыдущему экрану. Для юзеров Cancel – средство защиты от нежелательных изменений в системе. Чтобы пользователи чувствовали себя в безопасности, кнопка «Отмена» должна означать отступление к надежности, а не призыв к действию.
Вот почему кнопки «Отмена» должны быть бесцветными.
Нейтральный цвет для нейтральной кнопки
Цвет на кнопках сигнализирует о призыве к действию. Cancel – не призыв к действию, поскольку после ее нажатия в системе не происходит никаких изменений. Именно поэтому вы не должны выделять её цветом. В обратном случае вы создаете у пользователей ложное впечатление.
Юзеры на подсознании должны чувствовать, что «Отмена» – это их тихая бухта в море системных изменений.
Нейтральный цвет обозначает нейтральную, не призывающую ни к каким действиям кнопку. Когда пользователи замечают, что кнопка «Отмена» не имеет цвета, они быстрее распознают ее как запасной вариант. Это важно для людей, которые по ошибке активируют экран подтверждения и хотят вернуть всё, как было.
Когда у каждой кнопки на экране есть цвет, они «соревнуются» за внимание пользователя. Это заставляет юзеров обдумывать каждое действие дольше. Кнопка отмены нейтрального цвета позволяет им быстрее принимать решение. Те же, кто хочет совершить действие, не будут отвлекаться на кнопку «Отмена».
У «Отмены» много имен
Не все кнопки отмены называются именно «Отмена» (Cancel), но принцип их действия идентичен. Возврат к предыдущему экрану может называться «Не сейчас», «Нет, спасибо», «Возможно, позже» или «Пропустить» в зависимости от контекста.
Если ваша кнопка – как бы она ни называлась – подразумевает отмену от любого действия, вы должны рассматривать ее как кнопку «Отмена». Она выполняет ту же функцию.
Чем больше кнопок на экране, тем важнее сделать понятный уход от выбора. Посмотрите на пример выше. На скрине слева вам приходится прочитать все опции, чтобы понять. Справа вам даже читать не нужно.
Достаточно тёмный серый
При использовании серого на кнопке важно сделать этот цвет достаточно тёмным. В противном случае кнопка может выглядеть как отключенная. Контраст можно легко проверить с помощью инструментов наподобие Contrast Checker.
Сделайте свою кнопку нейтральной
В большинстве случаев, когда пользователи активируют экран подтверждения, они готовы к действиям. Но если это вышло случайно, или юзер просто передумал, кнопка «Отмена» должна стать для него спасением.
Цветная кнопка «Отмена» посылает неверный сигнал. Она запутывает юзеров, вынуждая считать её ещё одним призывом к действию. Сделайте свою кнопку нейтральной, чтобы у пользователя было больше контроля и свободы при использовании вашего приложения.
#UXLesson
Что именно делает кнопка «Отмена»? Она возвращает пользователя к предыдущему экрану. Для юзеров Cancel – средство защиты от нежелательных изменений в системе. Чтобы пользователи чувствовали себя в безопасности, кнопка «Отмена» должна означать отступление к надежности, а не призыв к действию.
Вот почему кнопки «Отмена» должны быть бесцветными.
Нейтральный цвет для нейтральной кнопки
Цвет на кнопках сигнализирует о призыве к действию. Cancel – не призыв к действию, поскольку после ее нажатия в системе не происходит никаких изменений. Именно поэтому вы не должны выделять её цветом. В обратном случае вы создаете у пользователей ложное впечатление.
Юзеры на подсознании должны чувствовать, что «Отмена» – это их тихая бухта в море системных изменений.
Нейтральный цвет обозначает нейтральную, не призывающую ни к каким действиям кнопку. Когда пользователи замечают, что кнопка «Отмена» не имеет цвета, они быстрее распознают ее как запасной вариант. Это важно для людей, которые по ошибке активируют экран подтверждения и хотят вернуть всё, как было.
Когда у каждой кнопки на экране есть цвет, они «соревнуются» за внимание пользователя. Это заставляет юзеров обдумывать каждое действие дольше. Кнопка отмены нейтрального цвета позволяет им быстрее принимать решение. Те же, кто хочет совершить действие, не будут отвлекаться на кнопку «Отмена».
У «Отмены» много имен
Не все кнопки отмены называются именно «Отмена» (Cancel), но принцип их действия идентичен. Возврат к предыдущему экрану может называться «Не сейчас», «Нет, спасибо», «Возможно, позже» или «Пропустить» в зависимости от контекста.
Если ваша кнопка – как бы она ни называлась – подразумевает отмену от любого действия, вы должны рассматривать ее как кнопку «Отмена». Она выполняет ту же функцию.
Чем больше кнопок на экране, тем важнее сделать понятный уход от выбора. Посмотрите на пример выше. На скрине слева вам приходится прочитать все опции, чтобы понять. Справа вам даже читать не нужно.
Достаточно тёмный серый
При использовании серого на кнопке важно сделать этот цвет достаточно тёмным. В противном случае кнопка может выглядеть как отключенная. Контраст можно легко проверить с помощью инструментов наподобие Contrast Checker.
Сделайте свою кнопку нейтральной
В большинстве случаев, когда пользователи активируют экран подтверждения, они готовы к действиям. Но если это вышло случайно, или юзер просто передумал, кнопка «Отмена» должна стать для него спасением.
Цветная кнопка «Отмена» посылает неверный сигнал. Она запутывает юзеров, вынуждая считать её ещё одним призывом к действию. Сделайте свою кнопку нейтральной, чтобы у пользователя было больше контроля и свободы при использовании вашего приложения.
#UXLesson
This media is not supported in your browser
VIEW IN TELEGRAM
Один из способов сообщить пользователю о состоянии системы в UI, показать его местоположение
Видимость состояния системы — одна из десяти эвристик Якоба Нильсена для проектирования в мире UI. Сообщая о текущем состоянии системы, вы предоставляете пользователям ощущение контроля над системой, и, в свою очередь, это чувство помогает вам завоевать их доверие.
Местоположение
Информирование пользователей о том, где они находятся в приложении, важно для создания хорошего навигационного опыта. И приложения, и веб-сайты должны выделять выбранный в данный момент параметр навигации, чтобы помочь пользователям понять их текущее местоположение.
#UIlesson
#UXlesson
Видимость состояния системы — одна из десяти эвристик Якоба Нильсена для проектирования в мире UI. Сообщая о текущем состоянии системы, вы предоставляете пользователям ощущение контроля над системой, и, в свою очередь, это чувство помогает вам завоевать их доверие.
Местоположение
Информирование пользователей о том, где они находятся в приложении, важно для создания хорошего навигационного опыта. И приложения, и веб-сайты должны выделять выбранный в данный момент параметр навигации, чтобы помочь пользователям понять их текущее местоположение.
#UIlesson
#UXlesson
10 советов, которые помогут вам справиться с разработкой айдентики
1. Сразу разработайте стратегию
Перед началом работы над айдентикой составьте список критериев и закономерностей, которые будут определять будущий фирменный стиль, и согласуйте его с заказчиком, чтобы избежать будущих недопониманий.
2. Работайте с брифом
Бриф нам дан не просто так. Не стоит целиком и полностью полагаться на свою интуицию и способность телепатически узнать, как клиент видит будущий логотип (хотя он сам еще не знает, каким он хочет его видеть). Изучите данный вам бриф с должным вниманием, чтобы создать хорошую айдентику.
3. Проведите собственное исследование
Поймите бренд – его историю, функцию и индивидуальность. Извлеките каждый нюанс и постарайтесь создать такую айдентику, которая бы отображала бренд как можно точнее и оригинальнее. Поищите вдохновения, посмотрев фирменные стили конкурентов.
4. Спросите заказчика, чего он ждет
Нет, конечно такой вопрос в лоб заставит заказчика растеряться, поэтому попросите его сделать свое собственное исследование, в ходе которого он должен будет составить основополагающие критерии. От них вам будет проще отталкиваться, а также вы поймете, что от вас хотят получить.
5. Не сосредотачивайтесь на логотипе
Логотип – это булавка, которая держит всю айдентику вместе и делает ее узнаваемой. Поэтому так или иначе весь фирменный стиль нужно выстраивать вокруг него. Но не стоит полностью сосредотачиваться на лого, умейте видеть всю картину целиком. Старайтесь создать целостную айдентику, не забывая следить за тем, как ведут себя более мелкие ее элементы.
6. Изучите конкурентов
Посмотрите, что уже было сделано до вас и постарайтесь сделать что–то другое. Учитывайте все: цвета, размеры, формы. Вспомните компанию Shell, логотип ракушки и подумайте, как вообще все это может быть связано с заправками? Тем не менее, это культовый логотип, который сложно забыть. Пример конкурентов может дать вам понять меру. Когда важно не переборщить и какое поведение не оценят пользователи? История и предыдущий опыт – лучший помощник.
7. Не игнорируйте клиента
Неважно, насколько вы опытны, клиент все равно знает свой продукт лучше, чем кто–либо. Прислушивайтесь к пожеланиям заказчика и не пытайтесь “уходить в полет”, придумывая что–то, что в конечном итоге ему не понравится, и вы оба останетесь недовольны.
8. Учитесь самообладанию
Все мы знаем о заказчиках из кошмаров, которые сами не могут понять, чего они хотят, и в итоге мучают бедного дизайнера своими поправками. Старайтесь сделать ограниченное количество деталей, цветовых гамм и шрифтов. Как мы говорили, большое количество вариантов заставляет клиента теряться. Поэтому упростите задачу себе и ему, ограничив выбор и предоставив наилучшие варианты. Также помните, что простая айдентика способна сохранять актуальность, проходя сквозь время.
9. Выделите особенности бренда
В каждом бренде есть какая–то изюминка. Иногда ее сложно заметить, но она точно есть. Постарайтесь отыскать ее и выразить в айдентике. Натуральные ингредиенты, бабушкин рецепт или секретные приправы, которые скрывают ото всех. Если вы работаете с Всемирным фондом дикой природы, то у вас есть готовая история. Защита животных, вымирающие виды и «зеленая» атмосфера – да, не у каждой компании такой мощный посыл, но он точно есть. Иначе зачем ей айдентика, если она ничем не выделяется?
10. Не забывайте о целевой аудитории
Помните, что вы создаете фирменный стиль, то есть лицо компании. И если это “лицо” будет неприемлемым для целевой аудитории фирмы, то вы рискуете испортить имидж своему клиенту. Пусть даже вам и вашему заказчику нравится придуманный вами вариант, всегда думайте о том, как среагирует на него публика.
#Identity
#Brend
1. Сразу разработайте стратегию
Перед началом работы над айдентикой составьте список критериев и закономерностей, которые будут определять будущий фирменный стиль, и согласуйте его с заказчиком, чтобы избежать будущих недопониманий.
2. Работайте с брифом
Бриф нам дан не просто так. Не стоит целиком и полностью полагаться на свою интуицию и способность телепатически узнать, как клиент видит будущий логотип (хотя он сам еще не знает, каким он хочет его видеть). Изучите данный вам бриф с должным вниманием, чтобы создать хорошую айдентику.
3. Проведите собственное исследование
Поймите бренд – его историю, функцию и индивидуальность. Извлеките каждый нюанс и постарайтесь создать такую айдентику, которая бы отображала бренд как можно точнее и оригинальнее. Поищите вдохновения, посмотрев фирменные стили конкурентов.
4. Спросите заказчика, чего он ждет
Нет, конечно такой вопрос в лоб заставит заказчика растеряться, поэтому попросите его сделать свое собственное исследование, в ходе которого он должен будет составить основополагающие критерии. От них вам будет проще отталкиваться, а также вы поймете, что от вас хотят получить.
5. Не сосредотачивайтесь на логотипе
Логотип – это булавка, которая держит всю айдентику вместе и делает ее узнаваемой. Поэтому так или иначе весь фирменный стиль нужно выстраивать вокруг него. Но не стоит полностью сосредотачиваться на лого, умейте видеть всю картину целиком. Старайтесь создать целостную айдентику, не забывая следить за тем, как ведут себя более мелкие ее элементы.
6. Изучите конкурентов
Посмотрите, что уже было сделано до вас и постарайтесь сделать что–то другое. Учитывайте все: цвета, размеры, формы. Вспомните компанию Shell, логотип ракушки и подумайте, как вообще все это может быть связано с заправками? Тем не менее, это культовый логотип, который сложно забыть. Пример конкурентов может дать вам понять меру. Когда важно не переборщить и какое поведение не оценят пользователи? История и предыдущий опыт – лучший помощник.
7. Не игнорируйте клиента
Неважно, насколько вы опытны, клиент все равно знает свой продукт лучше, чем кто–либо. Прислушивайтесь к пожеланиям заказчика и не пытайтесь “уходить в полет”, придумывая что–то, что в конечном итоге ему не понравится, и вы оба останетесь недовольны.
8. Учитесь самообладанию
Все мы знаем о заказчиках из кошмаров, которые сами не могут понять, чего они хотят, и в итоге мучают бедного дизайнера своими поправками. Старайтесь сделать ограниченное количество деталей, цветовых гамм и шрифтов. Как мы говорили, большое количество вариантов заставляет клиента теряться. Поэтому упростите задачу себе и ему, ограничив выбор и предоставив наилучшие варианты. Также помните, что простая айдентика способна сохранять актуальность, проходя сквозь время.
9. Выделите особенности бренда
В каждом бренде есть какая–то изюминка. Иногда ее сложно заметить, но она точно есть. Постарайтесь отыскать ее и выразить в айдентике. Натуральные ингредиенты, бабушкин рецепт или секретные приправы, которые скрывают ото всех. Если вы работаете с Всемирным фондом дикой природы, то у вас есть готовая история. Защита животных, вымирающие виды и «зеленая» атмосфера – да, не у каждой компании такой мощный посыл, но он точно есть. Иначе зачем ей айдентика, если она ничем не выделяется?
10. Не забывайте о целевой аудитории
Помните, что вы создаете фирменный стиль, то есть лицо компании. И если это “лицо” будет неприемлемым для целевой аудитории фирмы, то вы рискуете испортить имидж своему клиенту. Пусть даже вам и вашему заказчику нравится придуманный вами вариант, всегда думайте о том, как среагирует на него публика.
#Identity
#Brend
This media is not supported in your browser
VIEW IN TELEGRAM
Рыбалка для регистрации
Эта анимация добавляет некоторую причудливость на страницу учетной записи. Рыбак словно дремает на странице регистрации, ждёт своего часа. А вот если вы уже зарегистрированы – он рад вас приветствовать на сайте. Сохранение фирменного стиля и живой интерактив с пользователем.
Автор: Mari Kostrova
#DesignInspiration
Эта анимация добавляет некоторую причудливость на страницу учетной записи. Рыбак словно дремает на странице регистрации, ждёт своего часа. А вот если вы уже зарегистрированы – он рад вас приветствовать на сайте. Сохранение фирменного стиля и живой интерактив с пользователем.
Автор: Mari Kostrova
#DesignInspiration