Шрифт как голос бренда

Если стиль — это душа вещи, то айдентика — это душа компании.

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

Для этого проведем эксперимент: попробуем на условном рекламном макете условной компании поочередно «выключать» элементы дизайна и наблюдать, как будет меняться узнаваемость.

Знак. Выяснится, что знак, например, не является таким уж краеугольным камнем идентичности. В грамотно продуманной системе узнаваемость держится и без него. Логотип является лишь чем-то наподобие подписи в конце письма, в котором авторство устанавливается уже по почерку. К тому же сейчас все труднее создать что-то новое в области логотипостроения.

Цвет. Он играет очень важную роль в формировании узнаваемости. Опять-таки в рамках нашего эксперимента перекрасим рекламный макет Альфа-Банка в зеленый, а «Тинькофф» — в синий, и все — это уже не «Альфа» и не «Тинькофф». Очевидно, что цвет очень важен, но проблема в том, что палитра ограничена семью цветами и их оттенками, и отстроиться от конкурентов сложно. Например, в свое время появление Тинькофф Банка стало настоящим вызовом для «Райффайзена», который буквально «потерял» свой желтый и был вынужден искать характер в других элементах.

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

Шрифт. Сразу скажем: индивидуальный шрифт держит узнаваемость не хуже остальных элементов. Более того, при грамотном подходе шрифт может идентифицировать бренд вообще без какой-либо поддержки. Тут будет уместна аналогия с голосом: мы узнаем человека, не видя его, а только лишь слыша его речь. Так и со шрифтом: если «выключить» все элементы (ну кроме разве что цвета) и оставить шрифт, бренд будет узнаваем большинством людей совершенно без проблем. Новая айдентика МТС, например, строится именно по этой формуле: шрифт плюс цвет.
Причем узнаваемость — далеко не единственный профит, который может дать фирменный шрифт. Он способен на большее, например вызывать эмоции.

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

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

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

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

Подробнее в статье

С чего начать обучение UX-дизайну и как стать профессионалом

Проанализировали опыт в UX-дизайне, разложили по полочкам, и рассказали с чего лучше начать в UX-дизайне первым делом.

UX-дизайнер – изобретатель цифровых продуктов призванных улучшить что-либо в текущей реальности.

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

Содержание статьи:

- Чем зажигает UX-дизайн и в чем его ценность
- C чего лучше начать первым делом в UX-дизайне
- Кто может стать UX-дизайнером
- Как начинали в UX-дизайне

- Как начинают в UX-дизайне с дизайнерским бэкграундом

Как начинал в UX-дизайне графический дизайнер: история дизайнера из Google
Как начинал в UX-дизайне промышленный дизайнер: история основателя Airbnb
Как начинал в UX-дизайне креативный директор: история дизайнера и основателя Tilda
Как начинали в UX-дизайне дизайнеры: история дизайнеров из Rambler
Как начинали в UX-дизайне дизайнеры спецпроектов: история дизайнеров из Look At Media

- Как начинают в UX-дизайне с инженерным бэкграундом

Как начинал в UX-дизайне фотограф и инженер: история основателя Photoshop
Как начинал в UX-дизайне специалист по электроизмерительным приборам и информатике: история основателя Amazon

- Как начинают в UX-дизайне не дизайнеры и не программисты

Как начинал в UX-дизайне филолог: история основателя ВКонтакте и Telegram
Как начинал в UX-дизайне менеджер по продажам: история основателя Salesforce
Как начинал в UX-дизайне специалист техподдержки: история специалиста из стартапа, который купил Shopify

- В изучение каких инструментов следует вкладывать время?
- Какими техническими и нетехническими навыками должен обладать UX-дизайнер на старте?
- Над какими UX-проектами можно работать самостоятельно?
- Какие UX ресурсы вы можете порекомендовать
- Вывод: Как учиться UX-дизайну

Читать: https://ux-journal.ru/s_chego_nachat_obuchenie_ux.html

Топ-5 плагинов в Figma для веб-дизайнеров

1. Grid for Tilda Publishing
Так как большую часть своего времени я работаю именно с Тильдой, этот плагин стал моим фаворитом. По клику мышкой тебе выдают 5 разных сеток под каждый тип экрана, которые ты можешь использовать в своем дизайне

2. Remove BG
Это, конечно, не панацея, но иногда спасает! Плагин удаляет фон с картинок в считанные секунды. Делает это не всегда хорошо и периодически ухудшает качество картинки, но если нужно очень быстро что то вырезать, а фотошопа под рукой нет — отличное спасение

3. Content Reel
Этот плагин больше подходит для проектировки интерфейса, чем дизайна сайта, но тем не менее оказывается полезен. Он автоматически вставляет рандомные номера телефонов, адреса, почты, имена и даже аватарки в ваш проект!

4. Image Palette
Не знаю как у вас, но мне иногда отправляют картинки со словами «мне нравятся тут цвета, хочу такие». Вместо того, что бы самостоятельно пытаться выудить цвет, можно воспользоваться плагином. Он вытянет 5 самых используемых цветов из картинки, которые подходят для использования в проектах

5. Map Maker
Этот плагин напоминает Content Reel, но этот генерирует карты. Я использую его не так часто, но иногда он здорово выручает и помогает сделать первоначальный дизайн более «живым» и показать на практике, как будет выглядеть будущий сайт

Источник

​​Ребрендинг Burger King – потрясающий мастер-класс по flat design

Burger King приступил к масштабному ребрендингу всех элементов своего визуального брендинга – работа стала образцовой. Обновление показывает нам, как в цифровую эпоху перейти к подходу «прежде всего дизайн». Как и в случае большинства ребрендингов, Burger King присоединился к адептам flat design, но сделал это в уникальном стиле.

Новые яркие элементы ориентированы на повторение форм из меню BK, создавая ретро-стиль. Новый крутой шрифт вместе с кастомизированной цветовой палитрой напоминает психоделию 1970-х, а улучшенный логотип – это вообще сочетание оригинальной итерации 1969 года и самой последней версии 1999 года.

Ребрендинг, проведенный агентством Jones Knowles Ritchie, – серьезная перестройка, не оставляющая камня на камне. Новая упаковка, дизайн меню, товары, декор, соцсети и вообще все.

Новый логотип кажется знакомым, потому что он очень похож на оригинал 1969 года. Название Burger King снова просто зажато между двумя половинками булочки с начинкой.
При этом лого не выглядит как древний артефакт, откопанный чтобы порадовать фанатов. Он выглядит свежим, прежде всего благодаря новому сочному шрифту. Он выхлядт пухлым и мягким – идеальное сочетание с булочками.

Новый ребрендинг вызывает правильные чувства – это подтверждает и руководитель международного дизайна Restaurant Brands International Рафаэль Абреу. В своем заявлении он отмечает, что «мы хотели использовать дизайн, чтобы заставить людей испытывать тягу к нашей еде; ее совершенство в приготовлении на огне и, прежде всего, ее вкус».

Шрифт под названием Flame вдохновлен формой продукта – он округлый и вкусный. По словам Абреу, такой шрифт прям хочется укусить. Мы полностью согласны.

Авторы выбрали три ярких цвета: огненно-красный, такой же пламенный оранжевый и коричневый BBQ. Палитра создана для того, чтобы пробуждать веселье и свежесть, изменяя восприятие фаст-фуда.

Источник

7 советов, которые помогут быстро улучшить типографику интерфейса

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

1. Используйте суперсемейства, когда ищете отличные сочетания шрифтов

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

2. Для достижения лучшего оптического баланса уменьшите межбуквенный интервал в заголовках

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

3. Задайте вертикальный ритм для заголовков и основного текста

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

4. Старайтесь использовать заглавные буквы только в коротких заголовках

Если вы хотите использовать в заголовках заглавные буквы, убедитесь, что они по возможности короткие, желательно длиной в одну строку. Использовать прописные буквы для длинных текстов – плохая идея.
Хороший пример – Kickers (иногда известные, как Overlines). Это короткие фразы, обычно всего несколько слов, которые можно разместить над заголовком. Для них идеально подходят прописные буквы.
Как и в предыдущем совете, добавление небольшого межбуквенного интервала в заголовки, состоящие из заглавных букв, визуально улучшит их.

5. По возможности делайте заголовки короткими и лаконичными

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

6. Выбирая универсальный шрифт, постарайтесь найти шрифт с большим количеством начертаний
У гарнитуры, которую вы выбрали, есть большой выбор вариантов веса и стилей?
Проверьте, если планируете использовать ее для нескольких проектов.
Только один вес или стиль? Нет. Держитесь от нее подальше.
Конечно, есть исключения, и для некоторых проектов потребуется более сложный шрифт «в одном стиле», но для подавляющего большинства проектов вам нужны шрифты с большим числом вариантов выбора.
Даже если вы решите использовать только два или три начертания, или стиля, подстрахуйтесь, вам может понадобиться больше вариантов на более позднем этапе процесса проектирования.

7. Выберите подходящий шрифт, чтобы придать дизайну правильный «голос»

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

Источник

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

Если хочешь стать универсалом, советуем обучаться такому навыку на Design Line Workshop. Просто присоединяйся к их душевной и прогрессивной банде и поймешь, как с ними круто.

С 27 февраля по 4 апреля каждые выходные тебя будут развивать сразу по всем направлениям: 3D, брендинг, ui/ux-дизайн, креативность, работа с клиентом, карьера и деньги.

Гвозди программы: Дмитрий Карпов, Сергей Мосякин (Орфографика), Миша Розов (Pinkman), Женя Яровой Pragmatica, Лидия Капыш  (The Clients), Елисей Соловьёв и Софья Нарбут (Embacy).

Увеличь свою ценность и качество работ, пока не поздно: https://clc.to/WXvRxw

8 убийц твоего портфолио

Арт-директор агентства Go Mobile Анастасия Асташова рассказала об ошибках, которые допускают 80% молодых дизайнеров при составлении портфолио. Что нужно убрать из портфолио прямо сейчас, чтобы не загубить коммуникацию с заказчиком и получить работу.

Ошибка №1. Очень много мокапов

Обилие шаблонов, декоративное окружение и сложные ракурсы отвлекают внимание от самой работы. Работодатель ищет креативные решения, а не умение работать со скачанными мокапами. Оригинальная подача — это круто, но не забывайте, что сам дизайн всегда важнее. Помните: сначала дизайн, а потом мокапы.

Ошибка №2. Ссылки на облако с папками

Забыли открыть доступ или прикрепили битую ссылку? Считайте, это конец. В 90% случаев заказчик перейдет к следующему кандидату. Искать файлы в тысяче папок он тоже не захочет. Чтобы избежать этого, максимально упростите навигацию на диске, а лучше используйте специальные дизайнерские платформы для размещения работ. Для этого подойдет Behance, Dribbble или любой другой фриланс-сайт. С этими площадками знаком каждый заказчик, намудрить там точно не получится. Одного полностью заполненного портфолио достаточно — не нужно присылать ссылку на Behance, социальные сети и Яндекс.Диск, где находятся одинаковые работы.

Ошибка №3. Большое количество работ

Это как плюс, так и минус. С одной стороны, помогает понять бэкграунд дизайнера, с другой — просмотр карандашных рисунков с 1 курса не очень впечатляет арт-директора. Такие работы не имеют ничего общего с вашими текущими проектами. Отберите свои лучшие кейсы, максимум 20. Отсматривать больше замылится глаз, и впечатление останется размытым.

Ошибка №4. Слишком много работ разного плана

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

Ошибка №5. Низкое разрешение

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

Ошибка №6. Слишком большие изображения

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

Ошибка №7. Ошибки и опечатки

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

Ошибка №8. Много концептуальных модных проектов

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

Вывод

Помните, что портфолио — это краткая биография дизайнера и шанс заявить о себе потенциальному заказчику. Выберите лучшие работы, которые отразят ваш профессионализм, и представьте их в удобном формате. А перед отправкой проверьте портфолио на наличие “убийц” по моему списку — так ваша история точно закончится happy end’ом!

Источник

Как создать качественную цветовую палитру для UI

Перевод полезной статьи от Buninux о создании цветовой палитры для веб-сайта или приложения. 8 советов по созданию качественных цветовых схем.

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

Содержание

1. Нужно сделать выбор. Но выбирать нужно умом.
-Определение основных цветов.
-Найти свои белые и черные цвета.
-Использование акцентных цветов.
-Использование семантических цветов, для выделения важной информации.
2. Правила 60–30–10
3. Знание своей аудитории
4. Использование фотографии, чтобы создать цветовую палитру
5. Контраст — ваш друг
6. Следите за доступностью
7. Точно подписывайте цвета.
8. Инструменты и дополнительные материалы

Читать статью: https://vc.ru/design/199498-kak-sozdat-kachestvennuyu-cvetovuyu-palitru-dlya-ui

76 ссылок, которые помогут сделать концепцию дизайна эффектнее и быстрее

Если вернуться на восемь лет назад и посмотреть оттуда — невольно накатывается слеза. Тогда набор был скудный: Shutterstock, два шрифта Google fonts и Helvetica. Можно было фотографировать или искать 3D дизайнера, но это ресурсы, которых на проекте часто не было.
Ко всему клиент мог просто не согласовать тяжелую концепцию. Так студии и уходили в минус, создавая дорогие картинки сугубо для портфолио.
К счастью, те времена позади и теперь инструментов, которые помогают экономить время и ресурсы, сильно больше.

Типографика, Иконки, Графические приемы, Мокапы, Фото, Нейросети, Анимации, Иллюстрации и другое

Читать статью: https://vc.ru/design/198170-76-ssylok-kotorye-pomogut-sdelat-koncepciyu-dizayna-effektnee-i-bystree

Советы по использованию вариантов (variants) в Figma

Если вы любите часто использовать компоненты в своих дизайнах, то вы полюбите новую функцию Figma под названием варианты (Variants). Она переводит процесс проектирования на совершенно иной уровень!

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

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

Содержание статьи 
Как создать варианты
Как сделать переключатель вместо раскрывающегося списка
Практическое использование вариантов
1. Используйте его для управления состояниями
2. Используйте его, чтобы изменить стиль
3. Различия в размерах компонентов
4. Объедините несколько свойств
Каковы ограничения вариантов?

Читать статью: https://ux.pub/sovety-po-ispolzovaniyu-variantov-variants-v-figma/