Основы дизайна для начинающих: что нужно для красивого фирменного стиля и классного сайта

Какие есть виды дизайнеров и какие задачи они выполняют

Под словом «дизайнер» скрываются десятки специализаций, которые направлены на решение разных задач. Одни «наводят красоту» в квартире, другие — на придомовом участке или в саду, третьи — на сайте. Значит, и навыки у них разные. Перечисляем основные виды дизайнеров:

Графический дизайнер

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

Веб-дизайнер

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

UI/UX-дизайнер

Проектирует интерфейсы для сайтов и приложений либо отвечает за взаимодействие с ними. То есть User Interface (UI) — это про визуальную часть (шрифт, кнопки, цвета, отступы), создание дизайн-систем и библиотек. User Experience (UX) — это про анализ, исследования привычек и пользовательский опыт Подробнее о том, чем эти дизайнеры отличаются и как работают вместе, мы рассказали в отдельной статье.

3D-дизайнер

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

Дизайнер интерьеров

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

Моушн-дизайнер

Создает анимации и визуальные эффекты для соцсетей, игр, фильмов, презентаций, цифровых продуктов, видео и рекламы. Монтирует, двигает, синхронизирует.

Гейм-дизайнер

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

Промышленный дизайнер

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

Дизайнер одежды

Разрабатывает эскизы и лекала, подбирает ткани, создает итоговый дизайн вещей и стилевые концепции. Часто его задача сделать не просто красиво, но и носибельно, если речь не о высокой моде.

Ландшафтный дизайнер

Разрабатывает концепцию уличного пространства, учитывая расположенные в нем объекты: растения, здания, водоемы, дорожки. Зеленые зоны, архитектурные элементы, мощение и освещение — все это входит в его зону ответственности. Он и создает визуализации, и подбирает материалы/технологии.

О чем помнить при работе с текстом

Основы типографики

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

Вот основные термины, с которыми сталкивается любой дизайнер. Их стоит знать, даже если вы не работаете с текстом:

• Кегль — размер шрифта в пунктах (pt). Исторически слово «кегль» происходит от немецкого «kegel», а тот, в свою очередь, от древневерхненемецкого «chegil», что означало «палка». Сейчас под кеглем понимают не только высоту букв, но и общее ощущение масштаба текста в макете.
• Интерлиньяж — расстояние между строками текста. Чтобы он хорошо читался, обычно используют автоматические настройки. Если уменьшать вручную, то разумный ориентир — 120–130% от кегля. Главное — не сплющивать строки, иначе текст начнет «залипать».
• Кернинг — расстояние между двумя буквами. Регулируется индивидуально и часто — вручную. От правильного кернинга зависит, насколько сбалансировано выглядит слово: нет ли лишних провалов между буквами или, наоборот, слипшихся элементов.
• Трекинг — общее расстояние между всеми символами в слове. Отличается от кернинга тем, что применяется ко всему слову сразу. Например, увеличенный трекинг может хорошо работать в заголовках: делает слово воздушнее, крупнее, убедительнее.

Какими бывают шрифты

Гротески
Шрифты без засечек (sans-serif) отличаются лаконичностью и отсутствием декоративных элементов. Они воспринимаются современными и универсальными, поэтому часто используются для интерфейсов сайтов, мобильных приложений и логотипов технологичных брендов. Примеры таких шрифтов — Helvetica, Roboto, Montserrat.

Антиквы
Антиквы (serif) — это классические шрифты с засечками, то есть небольшими выступами на концах букв. Благодаря им и контрастной толщине линий шрифты воспринимаются элегантно и солидно. Антиквы используются в длинных текстах и издательском дизайне для удобства чтения. К известным шрифтам этого типа относят Times New Roman, Georgia и Garamond.

Брусковые шрифты
Брусковые шрифты (slab serif) — разновидность шрифтов с засечками, но с более массивными и прямоугольными выступами. Они выглядят уверенно и выразительно. Их часто применяют в заголовках, рекламных плакатах и в брендинге для придания образу силы и надежности. Примеры таких шрифтов: Roboto Slab, Rockwell и Museo Slab.

Акцидентные
Декоративные шрифты предназначены для привлечения внимания и передачи настроения. Часто они очень стилизованы, необычны и не подходят для длинного текста. Их уместнее использовать в заголовках, логотипах или на постерах, когда нужно ярко выделить сообщение. Примеры — Lobster, Impact и Comic Sans.

Каллиграфические
Рукописные шрифты (script) имитируют письмо человека. Они изящны, плавны и эмоциональны. Такие шрифты ассоциируются с индивидуальностью и теплом, поэтому подходят для приглашений, логотипов личных брендов и романтических тематик. Хорошие примеры — Pacifico, Great Vibes и Dancing Script.

Где найти шрифт

Если не хотите заморачиваться с лицензией, команда LZ.Media советует использовать Google Fonts. Это бесплатный онлайн-каталог от Google, который позволяет подбирать разнообразные шрифты для веб-дизайна и других цифровых проектов. Сервис содержит сотни качественных и проверенных шрифтов в разных стилях: от строгих гротесков до выразительных декоративных и

Как использовать Google Fonts:

• Зайдите на сайт и выберите подходящий шрифт, используя фильтры по категориям (serif, sans-serif, decorative), языкам и начертаниям (жирность, наклон).
• После выбора шрифта нажмите «Select this style» и получите код для вставки в HTML или CSS вашего сайта.
• Шрифты также можно скачать на свой компьютер для использования в графических редакторах (Figma, Photoshop, Illustrator) и создания дизайн-макетов.

ВАЖНО: Если вы просто скачали шрифт из интернета, необходимо удостовериться в возможности использовать его бесплатно. Для этого нужно узнать его тип лицензии. Вам подходит вариант «Бесплатно для личного и/или коммерческого использования».

Как выбирать шрифты

Это тема большая, поэтому коснемся лишь основных рекомендаций:

• Определите настроение, которое хотите передать текстом. Для серьезных материалов выбирайте нейтральные шрифты. Для дружелюбной или творческой подачи можно попробовать декоративные или каллиграфические.
• Не смешивайте много шрифтов: для заголовков выберите один выразительный шрифт, а для основного текста — более нейтральный и простой.
• Проверьте, поддерживает ли выбранный вами шрифт кириллицу, если у вас текст на русском языке. На Google Fonts это делается через фильтр «Cyrillic».
• Проверяйте выбранный шрифт на реальном тексте, а не только на абстрактных примерах. Вставьте небольшой абзац и посмотрите, насколько он легко читается и и комфортно ли воспринимается на экране компьютера или смартфона.

Главное правило при первой работе со шрифтами: чем проще — тем лучше. Если вы много сомневаетесь, выбирайте простой и читаемый шрифт. Например, мы советуем Open Sans — современный и универсальный гротеск. Его преимущества:

• Много начертаний (от light до extra bold);
• Хорошо сочетается с другими шрифтами;
• Поддерживает кириллицу и латиницу;
• Работает в заголовках, параграфах, интерфейсах;
• Имеет открытую лицензию.

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

О чем помнить при работе с цветом

Как сочетать оттенки

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

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

Вот базовые схемы, которые используются чаще всего:

• Триада — три цвета на равном расстоянии друг от друга на круге. Допустим, синий, красный и желтый. Такая палитра сбалансирована и контрастна одновременно. Хорошо работает в логотипах и фирменном стиле: два оттенка — для акцентов, третий — для динамики. Например, цвета логотипа LZ Media попадают в одну триаду.
• Аналогичные цвета находятся рядом на цветовом круге. Например, зеленый, светло-зеленый и желто-зеленый. Это мягкое, спокойное сочетание без сильных контрастов. Подходит для фонов, презентаций, оформления, где важна визуальная целостность.
• Комплементарные цвета расположены друг напротив друга (например, синий и оранжевый). Это сильный контраст, который хорошо работает для акцентов. Но с ним нужно быть осторожным: легко сделать макет «кричащим».
• Монохром — один цвет в разных оттенках и насыщенности. Выглядит чисто, минималистично, современно. Хорошее решение для сайтов и брендов, которые хотят подчеркнуть сдержанность и стиль.

Чтобы не запутаться в подборе и не тратить часы на угадывание, можно использовать генератор цветовых схем — например, mycolor.space. Он предлагает палитры по заданному цвету и показывает, как они сочетаются между собой.

Что такое цветовые модели

Чтобы классифицировать цвета и удобно передавать информацию о них, были придуманы цветовые модели. Это системы описания цвета с помощью числовых значений. Они используются, чтобы определить, как цвета будут выглядеть на разных поверхностях и устройствах. Поговорим коротко о самых популярных цветовых моделях.

RGB

Цветовая модель, используемая для передачи информации о цвете на экранах. Значение цвета в ней определяется смешением красного (R – red), зеленого 
(G – green) и синего (B – blue). Смешивая эти цвета
в максимальных значениях, можно получить белый. Для обозначения конкретного цвета в системе RGB используют значения каждого цвета (R, G, B) от 0 до 255 (например, R 54, G 48, B 137)
либо HEX-код цвета в шестнадцатеричной системе (например, #363089).

HSB или HSV

Цветовая модель, которая также используется только на экранах. В отличии от RGB здесь значения цвета определяются тоном (Hue), насыщенностью (Saturation) и яркостью (Brightness). Модель удобна для подбора цветов в графических редакторах.

Pantone

Pantone Matching System – название международной системы подбора цветов. Грубо говоря, это уже готовые, смешанные цвета. В любой полиграфии мира они будут выглядеть примерно одинаково.

CMYK

Это схема формирования цвета, прежде всего,в полиграфии, для печати. В нее включены 4 цвета: голубой (Cyan), пурпурный (Magenta), желтый (Yellow) и черный (Key). Для обозначения цвета в модели CMYK используются коды, в которых отражены процентные соотношения каждого цвета,от 0 до 100%. Например, C96 M92 Y3 K0 (обычно указывают в формате: 96 92 3 0).

RAL

Стандарт для подбора цветов лаков, порошковых покрытий и пластмасс. Модель используется во многих областях промышленности, дизайне интерьера и архитектуре. Цвета RAL не пересекаются с цветами Pantone, RGB, CMYK.

Графика в дизайне: растровые и векторные изображения

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

Растровая графика

Растр — это изображение, собранное из пикселей. К этому виду относятся фотографии, скриншоты, отсканированные изображения. Форматы растровых изображений: JPEG, PNG, GIF, PSD, TIFF.

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

Векторная графика

Вектор — это изображение, построенное из линий и кривых. Он не теряет качество при увеличении, потому что у него просто нет пикселей в привычном смысле. К форматам такой графики относятся SVG, EPS, AI, CDR, PDF (в некоторых случаях).

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

Полезные ресурсы в помощь

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

• Pexels — атмосферные фото, можно использовать бесплатно;
• Unsplash — много фонов и портретов, отличное качество;
• Freepik — много шаблонов, графики и векторов, но нужна проверка лицензии;
• Flaticon — крупнейшая библиотека иконок в векторе;
• Mr.Mockup и Pixeden — каталоги мокапов на фоне или в интерьере.

ВАЖНО: Мокап — трехмерная модель объекта, с помощью которой можно наглядно продемонстрировать дизайн. Мокап помогает прикинуть, как в реальности будет смотреться макет, а также продемонстрировать проект клиенту. Еще мокапы можно использовать для оформления постов, баннеров и так далее.

Как вы уже поняли, цвет, шрифт, иконки, логотипы, отступы — все складывается в целостный визуальный язык. И даже если вы не дизайнер, базовые принципы помогут отличить «просто картинку» от работающего макета, сформулировать задачу подрядчику и быстрее прийти к нужному результату. А если вам нужно с нуля разработать фирменный стиль или сайт либо не устраивает то, что есть у вас сейчас, — обращайтесь к команде LZ.Media. Мы умеем создавать визуал, который решает задачи бизнеса.