Как делать дизайн: Как сделать дизайн сайта / Skillbox Media

Дизайн с нуля, как сделать дизайн сайта с нуля: пошаговая инструкция

На чтение 12 мин Опубликовано 9 сентября, 2022 ТэгиВеб-дизайн / Графический дизайн

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

Содержание

1. Поставьте цель, проанализируйте ЦА и разработайте пользовательский сценарий
2. Выберите тип сайта
3. Проведите анализ конкурентов
4. Соберите референсы
5. Подготовьте визуальную концепцию
6. Подберите цвета
7. Подберите типографику сайта
8. Подготовьте прототип 
9. Подготовьте иллюстрации и составьте ТЗ для верстальщика
10. Создайте веб-сайт
11. Проверьте сайт с разных устройств, запустите трафик, проведите A/B-тестирование
12. Красивый и функциональный дизайн сайта: советы

Поставьте цель, проанализируйте ЦА и разработайте пользовательский сценарий

Для начала разберитесь, зачем вы делаете сайт. Вот главные вопросы:

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

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

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

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

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

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

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

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

• короткое ТЗ;
• прототип с основным функционалом;
• план работы с четкими этапами, обязанностями и дедлайнами.

Выберите тип сайта

Лендинг

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

Первый экран лендинга тату-студии

Интернет-магазин

Цель такого ресурса — предоставить информацию о множестве товаров. Дизайнеру, программисту и копирайтеру нужно будет поработать над удобным каталогом и спроектировать простую и понятную страницу заказа. Нужно продумать витрину с корзиной, возможность оплаты, также важно поработать над UX-дизайном и юзабилити.

Дизайн сайта интернет-магазина Lamoda

Сайт-витрина

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

Дизайн сайта-витрины Audi. Источник

Корпоративный сайт

Компаниям нужен корпоративный сайт, чтобы рассказать о себе клиентам и ответить на вопросы:

• кто мы;
• чем занимаемся;
• какова наша миссия;
• какие задачи мы решаем;
• как с нами связаться.

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

Дизайн корпоративного сайта брендингового агентства Funky

Портал

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

Портал Госуслуг

Проведите анализ конкурентов

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

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

На что обращать внимание в первую очередь при анализе чужих веб-ресурсов перед тем, как делать дизайн сайта:

• какой пользовательский сценарий реализован, как построена структура сайта;
• сам дизайн — цветовые решения, композиция, иллюстрации, анимация.

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

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

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

Соберите референсы

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

Вдохновение для создания дизайна собственного сайта можно искать на Behance 

Подготовьте визуальную концепцию

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

Мудборд можно собирать в Pinterest

Подберите цвета

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

Вот несколько правил сочетания цветов:

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

Подберите типографику сайта

• Выберите шрифтовую пару. Лучше, когда на веб-сайте использовано не больше двух шрифтов. Три, пять — это уже перебор. Идеально, когда шрифты — из одной гарнитуры. Еще гармонично смотрятся сочетания шрифтов с засечками и без.
• Сформируйте гайдлайны. Здесь нужно отталкиваться от контента. Будет ли это просто текст, или вы хотите сделать врезки, подписи и прочие элементы. Заголовки должны быть контрастными, это помогает читателю быстрее ориентироваться в контенте. Основной текст должен быть легко читаемым, не крупным, но и не слишком мелким.
• Придерживайтесь составленного плана. Новый стиль текста не нужно добавлять просто так. Только в том случае, если в этом есть серьезная необходимость или какой-то контент невозможно оформить теми стилями, что уже выбрали.

Подготовьте прототип 

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

Прототип сайта Game Boy. Источник

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

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

Подготовьте иллюстрации и составьте ТЗ для верстальщика

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

• как элементы сайта должны вести себя при масштабировании;
• какие есть сценарии анимаций;
• особые пожелания, уточнения, дополнения.

Создайте веб-сайт

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

• Tilda — один из самых популярных конструкторов сайтов; поможет, если нужно создать достаточно функциональный и удобный для пользователей сайт без привлечения программиста и верстальщика.
• Readymag — недорогой и удобный онлайн-инструмент, с которым можно создавать простые сайты, лендинги прямо в браузере, то есть вы сразу же увидите, как будет выглядеть сайт в итоге.

Проверьте сайт с разных устройств, запустите трафик, проведите A/B-тестирование

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

Красивый и функциональный дизайн сайта: советы

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

• Учитывайте ожидания потенциальных клиентов. Если это сайт строительной компании, то люди ждут аккуратности и пунктуальности. От юристов ждут строгости и умения решить любой вопрос. 
• Применяйте модульную сетку в дизайне. Рисуют сетку горизонтальную и вертикальную, и по ее линиям компонуют элементы. Это самый простой ответ на вопрос, как сделать красивый дизайн сайта. 
• Учитывайте правило близости. Оно означает, что рядом стоящие элементы человек воспринимает как связанные. Рядом нужно располагать объекты, которые объединены между собой по смыслу: заголовок и основной текст, например. 
• Помните про воздух. Между элементами должно быть пространство. Исключением могут быть концептуальные сайты, где объекты намеренно расположены рядом. Но обычно желание уместить все и сразу — как попытка надеть все украшения на все пальцы. Это не просто безвкусно, но еще и сложно воспринимать. Пользователь просто закроет такой сайт и не сможет решить свои задачи.
• Будьте сдержанными. Не стоит перебарщивать в попытке сделать красивый визуал. Обилие шрифтов, оттенков, геометрических форм может усложнить пользовательский сценарий. Перед тем как добавить тот или иной элемент, спрашивайте себя: точно ли он решает какую-то задачу или просто захотелось заполнить пустоту? Сайт должен быть в первую очередь функциональным, в этом и заключается вся красота.
• Создавайте адаптивный дизайн. Сейчас сайты просматривают в первую очередь с телефонов, и адаптировать ресурсы нужно с учетом этого. В то же время важно, чтобы и с экранов компьютеров, ноутбуков, планшетов все элементы хорошо читались, кнопки нажимались, важные блоки не уезжали за края экрана.
• Выбирайте подходящие под концепцию изображения. Хорошо использовать реальные фотографии заказчика — это внушает больше доверия со стороны пользователей. В то же время можно воспользоваться фотостоками, так как сделать хороший дизайн для сайта можно и без снимков от заказчика. Важно, чтобы картинки были хорошего качества, подходили по смыслу и помогали пользователям совершать целевые действия на ресурсе.
• Делайте акцент на действии. На каждой веб-странице пользователь должен что-то сделать: оставить заявку, заполнить анкету, купить, посмотреть работу, прочитать статью. В идеале весь контент страницы должен логичным образом подводить к этому действию. Так как правильно — создавать дизайн сайта, который будет работать на цель, а не просто выполнять декоративную функцию.

как сделать дизайн сайта значительно лучше

19 подсказок по оформлению веб-страницы для недизайнеров

Чтобы сделать отличный проект, необязательно быть профессиональным дизайнером, главное — стратегия. Стив Шогер, дизайнер и автор проекта Refactoring UI, в своём Твиттере объясняет на примерах, как быстро исправить ошибки в визуальной части и привести в порядок неудачный сайт. Вот несколько способов улучшить дизайн минимальными усилиями.

Стив Шогер

@steveschoger

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

Посмотреть пост

Стив Шогер

@steveschoger

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

Посмотреть пост

В поле поиска замените обводку на фоновый цвет

Вместо линеек между строками — увеличенные отступы

Уберите верхнюю границу нижней части формы и используйте цветной фон

Вместо границ добавьте лёгкую тень по краям формы

Стив Шогер

@steveschoger

Когда используете иконки с большим весом, чем текст, сделайте их немного светлее в неактивном состоянии.

Посмотреть пост

Иконки и текст одинакового цвета

Иконки немного светлее текста

Стив Шогер

@steveschoger

Стрелки, галочки и другие универсальные иконки вместо буллетов — это отличный способ сделать маркированный список визуально интереснее.

Посмотреть пост

Стив Шогер

@steveschoger

Добавьте цветную полосу в шапку — эта небольшая деталь оживит ваш дизайн. Такой трюк также сработает с формами и другими модульными элементами.

Посмотреть пост

Стив Шогер

@steveschoger

Размещение элементов на странице в несколько слоёв — хороший способ создать глубину и побудить пользователей прокрутить страницу дальше.

Посмотреть пост

Стив Шогер

@steveschoger

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

Посмотреть пост

Стив Шогер

@steveschoger

Размер шрифта — не лучший способ выделить или приглушить текст. Вместо этого попробуйте использовать цвет и насыщенность шрифта.

Посмотреть пост

Имя выделено полужирным начертанием, а не размером.
Размер шрифта — 20 px, насыщенность — Bold

Ник, локация и заголовки чисел светлее, но не меньше.
Размер шрифта — 14 px, прозрачность—50 %

Числа жирнее, но не больше
Размер шрифта — 20 px, насыщенность — Medium

Стив Шогер

@steveschoger

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

Посмотреть пост

Стив Шогер

@steveschoger

Межстрочные отступы одного размера на протяжении всего текста — не самая заметная, но распространённая ошибка. Интервал 1.5 может хорошо работать в основном тексте, но когда текст становится больше, делайте межстрочное расстояние плотнее.

Посмотреть пост

Размер шрифта — 36 px
Межстрочное расстояние — 1.5

Размер шрифта — 24 px
Межстрочное расстояние — 1. 5

Размер шрифта — 16 px
Межстрочное расстояние — 1.5

Размер шрифта — 36 px
Межстрочное расстояние — 1.125

Размер шрифта — 24 px
Межстрочное расстояние — 1.25

Размер шрифта — 16 px
Межстрочное расстояние — 1.5

Стив Шогер

@steveschoger

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

Посмотреть пост

Сделайте шапку таблицы менее броской

Выровняйте текст в колонках по левому краю

Сделайте линии светлее

Уберите вертикальные границы

Выровняйте цены вправо

Показывайте варианты действий при наведении и замените кнопки на текстовые ссылки

Добавьте цветной фон, появляющийся при наведении на строку

Увеличьте отступы в строках

Стив Шогер

@steveschoger

Добавляйте к модальным элементам лёгкие тени. Смещение по вертикали поможет сделать их более естественными.

Посмотреть пост

Стив Шогер

@steveschoger

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

Посмотреть пост

Используйте качественные шрифты из сервисов вроде Typekit

Добавьте отступы между пунктами списка

Чтобы выделить заголовок, набирайте основной текст более светлым цветом

Выделите ключевые слова насыщенностью и цветом

Увеличьте межстрочный отступ для удобства чтения

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

Стив Шогер

@steveschoger

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

Посмотреть пост

Дополнительное пространство позволит выделить новые возможности и разместить пояснительный текст

Иконки облегчат поиск нужного варианта при беглом просмотре

Стив Шогер

@steveschoger

Серый — не значит скучный. Добавьте в серый текст или фон немного оттенка голубого, коричневого для создания нужного ощущения.

Посмотреть пост

Холодный

Нейтральный

Теплый

Стив Шогер

@steveschoger

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

Посмотреть пост

Размер шрифта — 30 px
Насыщенность шрифта — 400

Размер шрифта — 20 px
Насыщенность шрифта — 400

Размер шрифта — 60 px
Насыщенность шрифта — 400

Размер шрифта — 60 px
Насыщенность шрифта — 300

Размер шрифта — 20 px
Насыщенность шрифта — 500

Размер шрифта — 30 px
Насыщенность шрифта — 400

Стив Шогер

@steveschoger

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

Посмотреть пост

Рамка 4 px

Стив Шогер

@steveschoger

Несколько идей по оформлению тарифных карточек, которые придают им особый блеск.

Посмотреть пост

1. Частично накладывайте карточки, чтобы добавить глубины и направить внимание

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

4. Сделайте ключевые слова заметнее, выделив их тёмным полужирным текстом

5. Увеличивайте межбуквенный отступ в тексте, набранном прописными, чтобы легче читалось

3. Ставьте универсальные цветные иконки вместо буллетов чтобы выделить возможности

6. Добавьте в серый текст и фон немного голубого оттенка, чтобы он воспринимался холодным

Стив Шогер

@steveschoger

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

Посмотреть пост

Думайте о пользе, когда показываете данные

Выделяйте самое важное

Сочетайте заголовки и значения так, чтобы фразы звучали человечнее

Источник: Design Tips / Steve Schoger
Перевод: Лера Мерзлякова
Дизайн и вертстка: Юлия Засс

Если материал вам понравился, поставьте лайк — это помогает другим узнать о нем и других статьях Tilda Education и поддерживает наш проект. Спасибо!

Читайте также:

Частые ошибки дизайна сайта

7 простых советов, как придумывать новые идеи

Опыт работы с брендингом и запуском стартапов в агентстве Red Antler

Как использовать правила языка в работе с интерфейсом

Как сделать интернет-магазин самостоятельно с нуля

Простые идеи развития творческих способностей

5 ошибок в онлайн-портфолио, которые стоят вам денег

Почему любому сайту нужна страница 404

Основы сторителлинга для UX

В чем заключается работа дизайнера — правильный дизайн от Дэниэла Бурка

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

Зачем компании нужен HR лендинг

Что такое UX дизайн?

25 онлайн-курсов по веб и UX дизайну и программированию — подборка

Как не облажаться с дизайном

Как создать сайт. Пошаговое руководство

Показать больше

Как создать логотип [Пошаговое руководство]

• Блог Hubspot
• HubSpot.com

Загрузка

О нет! Мы не смогли найти ничего подобного.

Попробуйте еще раз поискать, и мы постараемся.

Рэйчел Бегг

Обновлено: 08 июня 2022 г.

Опубликовано: 07 ноября 2019 г.

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

Но что такого в логотипе, что заставляет вас узнавать его? Что такого в дизайне, что может вызвать воспоминания или даже определенные эмоции?

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

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

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

Итак, с чего вы вообще начинаете разработку логотипа? Прямо здесь.

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

Как создать логотип бесплатно

1. Начните со своей истории
2. Придумайте слова, которые описывают ваш бренд
3. Эскизные идеи, основанные на этих словах
4. Протестируйте свои лучшие эскизы с помощью образа покупателя
5. Уточните выбранный эскиз
6. Разработайте макет вашего логотипа на бесплатной платформе дизайна
7. Выберите универсальные варианты цвета
8. Выберите шрифт
9. Обеспечение масштабируемости

Как создать логотип для бизнеса, компании или личного логотипа

Изображение предоставлено Coca-Cola

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

1. Начните со своей истории

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

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

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

2.

Придумайте слова, описывающие вашу торговую марку

Теперь, когда у вас есть история, пришло время перейти от сценария логотипа к обстановке. Откройте Thesaurus.com и введите термин, который лучше всего описывает ваш продукт, в строку поиска.

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

Изображение с Thesaurus.com

Найдите от 5 до 10 слов, которые описывают не только то, что вы делаете, но и почему из предыдущего шага. Каждое из этих слов может стать частью головоломки и помочь вам уточнить концепцию.

3. Набросайте идеи, основанные на этих словах

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

При наброске концепции логотипа помните о следующих советах:

• Сохраняйте форму простой. Если вы можете набросать наиболее символические компоненты за
  семь секунд или меньше , вы в хорошей форме. Вы должны абсолютно избегать любых популярных графических изображений или общих символов, таких как земной шар, звезда или подобные значки, которые люди слишком легко узнают из других мест. Они легко забываются с первого взгляда. Чем более творчески вы проявите себя на этом этапе, тем лучше будет ваш окончательный логотип. Ваш логотип — это то, что ваши потребители запомнят больше всего. Будьте честны в этом произведении.
• Цвета могут быть либо вашим лучшим другом, либо вашим злейшим врагом. Вы должны включить цвет в свой логотип, но будьте избирательны в том, какие цвета вы используете. Помните о текущих цветовых тенденциях, которые уже используются сегодня и на вашем целевом рынке. Как правило, не выбирают более трех цветов . Выберите цвет или группу цветов, которые помогут вам выделиться среди конкурентов. Но, пожалуйста, из любви к маркетингу, не используйте всю радугу!

4. Протестируйте лучшие наброски с образом покупателя

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

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

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

5. Уточните выбранный эскиз

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

Чтобы приступить к доработке логотипа, вернитесь к терминам, которые вы определили при первом использовании Thesaurus.com на шаге 2. Теперь посмотрите на выбранный эскиз и спросите себя: какие термины еще не отражены в этом эскизе? Используйте их для дальнейшего развития вашего эскиза и добавьте черты, которые вам больше всего понравились в проектах, которые вы не выбрали для уточнения.

6. Разработайте макет вашего логотипа на бесплатной платформе для дизайна

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

• Средство создания логотипов Appy Pie
• Логотип Хрустящий
• Лука
• DesignMantic
• Графические пружины

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

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

7. Выберите универсальные варианты цвета

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

Давайте вернемся к нашему примеру с Coca-Cola из шага 1. Как вы можете видеть ниже, логотип компании может работать на банках любого цвета, которые она продает.

Изображение Jay Moye

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

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

8. Выберите шрифт

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

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

Держитесь подальше от универсальных шрифтов, которые входят в стандартную комплектацию каждого текстового процессора. Некоторыми примерами общих шрифтов являются Times New Roman, Lucida Handwriting и Comic Sans. Эти шрифты будут работать только против вас и вашей компании, делая вас менее запоминающимся.

9. Обеспечьте масштабируемость

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

Каждая часть логотипа должна быть разборчивой, независимо от его размера.

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

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

Соавторы: Рэйчел Бегг, Джули Хруска и Бритт Шварц

Не забудьте поделиться этим постом!

Связанные статьи

• Теория цвета 101: полное руководство по цветовым кругам и цветовым схемам

  25 ноября 2022 г.

• Таргетированная реклама: простое руководство по привлечению клиентов

  27 мая 2022 г.

• Хотите научиться графическому дизайну? 9 советов и рекомендаций для начинающих

  23 авг. 2021 г.

• Все, что вам нужно знать о принципах и типах дизайна

  09 марта 2021 г.

• «Этика», о которой вы не знали, в дизайне

  11 декабря 2020 г.

• 27 ярких примеров минималистского дизайна, которые дадут толчок вашему творческому процессу

  11 сент. 2020 г.

• Руководство для начинающих по цветовым кодам HTML

  01 марта 2020 г.

• Как создать логотип [Пошаговое руководство]

  07 нояб. 2019 г.

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

  08 окт. 2019 г.

• 17 лучших шрифтов для каллиграфии, которые вы можете скачать бесплатно

  09 апр. 2019 г.

Как создать веб-сайт: 7 основных принципов создания визуально привлекательных веб-сайтов

Как создать красивый веб-сайт

1. Сохраняйте сбалансированный дизайн.
2. Разделите свой дизайн на части с помощью сеток.
3. Выберите максимум два или три базовых цвета для своего дизайна.
4. Постарайтесь, чтобы графика хорошо сочеталась.
5. Улучшите типографику вашего сайта.
6. Сделайте элементы выделяющимися, добавив вокруг них пустое пространство.
7. Соединить все элементы.

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

Знаете ли вы
Вы не можете иметь потрясающий веб-дизайн без элегантных форм. Создавайте красиво оформленные веб-формы уже сегодня.

«К счастью» для нас, дизайнеров, не все, кажется, понимают что делает или ломает веб-дизайн . Конечно, веб-дизайн — это в значительной степени творческий процесс, и поэтому его можно назвать скорее искусством, чем наукой. Но поскольку он по своей сути является средством представления, к нему применяются некоторые правила (или, по крайней мере, принципы). Следуя некоторым простым советам, каждый сможет создать визуально приятный дизайн и стать на шаг ближе к славе. Ладно, это не , что просто, и талант и опыт имеют значение, но любой может превратить свою домашнюю страницу во что-то более красивое за считанные минуты.

Так что же делает что-то красивым? Это не Флэш. Нельзя сказать, что у Flash нет достоинств, но сам по себе Flash не делает дизайн хорошим; есть несколько неприятных Flash-сайтов. Кроме того, не обязательно быть великим иллюстратором, чтобы создавать привлекательные дизайны. Вместо этого посмотрите на веб-дизайн как на симбиоз различных элементов. Ни один элемент не имеет большого значения; скорее, сумма элементов делает дизайн хорошим.

1. Сбалансируйте дизайн.

Баланс — это гарантия того, что ваш дизайн не будет наклоняться в ту или иную сторону. Это как баланс веса в достижении симметрии или асимметрии.

Посмотрите на собаку в заголовке веб-сайта Khoi Vinh’s Subtraction ниже. Я взял этот пример из «Принципов красивого веб-дизайна» Джейсона Бирда. Джейсон указывает, как крест справа компенсирует добавленный визуальный вес , который собака создает слева. Это маленькая, но немаловажная деталь. Убедитесь сами, спрятав крест рукой.

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

Ниже приведен еще один пример симметричного баланса , на этот раз от The First Twenty. Хотя графика заголовка асимметрично сбалансирована (вы можете заметить, как это делается?), остальная часть дизайна внизу имеет симметричные столбцы. Асимметричный баланс может быть труднее реализовать, но он делает дизайн более игривым.

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

2. Разделите дизайн на части с помощью сеток.

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

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

Сетка особенно хорошо подходит для минималистского дизайна. 5 Thirty One от Derek Punsalan показывает, почему:

Хотя дизайн сам по себе визуально не впечатляет, четкая строгая структура элементов делает его приятным для глаз. Левая колонка примерно в два раза больше правой боковой панели, что имеет смысл, и о ней следует подумать при создании собственного дизайна.

3. Выберите максимум два или три базовых цвета для своего дизайна.

Что, если вы изменили базовый красный цвет на веб-сайте The First Twenty (выше) на лимонно-зеленый? Будет ли это хорошо выглядеть? Скорее всего нет. Потому что это не принадлежит тому же цветовая палитра (и, конечно же, зеленый лайм — не самый простой цвет для работы). Такие веб-сайты, как ColourLovers, существуют не просто так. Вы не можете просто выбирать цвета в стиле Рэмбо, сверкая пушками. Одни цвета хорошо сочетаются друг с другом, другие нет. Существует множество теорий о цветах и ​​их сочетаниях, включая соглашения о монохромных и контрастных схемах, но многое сводится к здравому смыслу и к чувству .

Узнайте сами, что работает вместе. Впитайте как можно больше дизайнов веб-сайтов, например, представленных на любом из многочисленных веб-сайтов с демонстрацией CSS (например, Best Web Gallery), чтобы почувствовать, как цвета взаимодействуют друг с другом. Выберите максимум два или три базовых цвета для своего дизайна, а затем используйте оттенки (более светлые, смешанные с белым) и оттенки (более темные, смешанные с черным) этих базовых цветов, чтобы расширить палитру там, где это необходимо.

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

Веб-сайт Бенса Кучана имеет собственный стиль цветовой схемы. В основном это монохроматические (оттенки и оттенки одного цвета) и ахроматические (черный и белый) цвета (красный), чтобы выделиться:

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

Говоря о цвете, WebDesigner Wall от Nick La — это чистое блаженство:

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

4. Постарайтесь, чтобы графика хорошо сочеталась друг с другом.

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

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

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

Komodo Media Роги Кинга намного насыщеннее графикой, прекрасно выполненной как с технической, так и с тематической точки зрения.

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

5. Улучшите типографику вашего сайта.

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

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

Наборы шрифтов

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

Стеки шрифтов — это просто базовый CSS. Они позволяют определить порядок отображения шрифтов. Если быть точным, мы говорим здесь о гарнитурах, а не о шрифтах. Для хорошего обзора этого, пожалуйста, обратитесь к шрифту Джона Тана != Шрифт.

body { семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек; }

Свойство выше придаст основной копии шрифт «Helvetica Neue». Это, однако, требует, чтобы на компьютере пользователя был установлен этот конкретный шрифт. В настоящее время компьютеры Mac поставляются с предустановленной Helvetica (Neue), но на большинстве компьютеров с Windows ее нет.

Прелесть стеков шрифтов в том, что вы можете определить «запасные варианты». означает, что всякий раз, когда определенный шрифт отсутствует, браузер просто ищет следующий в очереди. Конечно, это означает, что дизайн не будет выглядеть одинаково для всех, и поэтому мы снова теряем контроль. Но для тех, кто не хочет прибегать к другому решению (например, к замене изображения), это лучшее, что предлагает чистый CSS на данный момент (до того дня, когда мы сможем комфортно использовать @font-face).

Wilson Miner использует стек шрифтов, о котором мы говорили выше. Helvetica Neue является усовершенствованием Helvetica. И хотя Arial установлен почти на каждом компьютере (по крайней мере, на компьютерах с Windows и Mac) и поэтому является популярным выбором для Интернета, большинство дизайнеров предпочитают Helvetica Arial. Таким образом, вы получаете лучшее из обоих миров: Helvetica для тех, у кого она есть, и Arial на случай, если Helvetica недоступна.

Джон Тан использует другой интересный набор шрифтов для своих заголовков:

body { семейство шрифтов: baskerville, 'palatino linotype', 'times new roman', serif; }

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

Мера и интерлиньяж

Мера — это длина линий, а интерлиньяж — это высота (или интервал по вертикали) строк. В CSS мерой можно управлять, определяя ширину содержащего блока (например, элемента абзаца). Оба влияют на читаемость . Если строки слишком короткие или слишком длинные, пользователям будет неудобно читать контент; часто можно увидеть эту проблему с плавными макетами. Между 40 и 80 символами в строке кажется идеальным.

Интерлиньяж можно увеличить (или уменьшить, если вы действительно этого хотите), определив свойство CSS line-height . Как правило, высота строки 1,5 хорошо подходит для абзацев. Это означает, что при размере текста 12 пунктов высота строки становится равной 18 пунктам (12 × 1,5), что дает тексту передышка .

Висячие кавычки и маркеры

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

Тим ван Дамм использует висящие пули для своего последнего редизайна Макса Вольтара:

Мы добавили красную линию, чтобы подчеркнуть, как весь текст выровнен по горизонтали. Просто установив padding-left CSS свойство маркированного списка 0 , вы можете добиться того же результата.

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

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

Неприменимые правила печати

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

Вертикальный ритм, правильное выравнивание текста (с переносами и без рек) и макеты с несколькими столбцами — это лишь некоторые из особенностей печати, которые (почти) невозможны в Интернете. Таким образом, у нас есть много чего ожидать от CSS 3. Однако CSS 3, вероятно, не будет универсальным и окончательным решением, и, вероятно, пройдет еще несколько лет, прежде чем мы сможем в полной мере воспользоваться его преимуществами. Мы просто должны пока принять эти различия: не смотрите на Интернет как на онлайн-версию печатного издания; скорее используйте внутренний потенциал Интернета в полной мере.

Несколько слов о замене изображения

Как насчет замены изображения (техника замены шрифтов изображениями)? Мы говорили о стеках шрифтов, но разве они не уступают замене изображений? Ну, это зависит от того, что вы считаете более важным: возможность отображать именно тот шрифт, который вам нужен, или наличие динамического, доступного и оптимизированного для SEO контента? Некоторые методы замены изображения стали довольно продвинутыми, но они все еще не такие гибкие, как обычный текст. Замена изображений хорошо подходит для заголовков и выдержек, но вряд ли это решение для основного текста.

6. Выделите элементы, добавив вокруг них пустое пространство.

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

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

Полагаю, пришло время для бесстыдной пробки. На скриншоте выше показан мой собственный веб-сайт Shift (px). Дизайн в значительной степени зависит от типографики и пустого пространства. Белое пространство, вероятно, занимает около 50% страницы. Пустое пространство — один из самых простых (потому что вы на самом деле ничего не добавляете, не так ли?) и наиболее эффективных способов создать визуально приятный и читабельный дизайн.

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

Еще один хороший пример большого количества пустого пространства:

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

7. Соедините все элементы.

«Соединение» здесь немного выдуманный термин, но он кажется лучшим для того, что мы имеем в виду. Соединение здесь относится к веб-дизайну, который сочетает в себе единство и согласованность . Эти два атрибута демонстрируют профессионализм дизайнера (и, следовательно, его дизайнера). Это очень широкие атрибуты. Дизайн должен быть последовательным в использовании цветов, наборе шрифтов, значках и т. д. Все эти аспекты учитываются; дизайн может выглядеть великолепно и при этом страдать от несоответствий.

Когда дизайн непоследовательный, его целостность может быть потеряна для пользователя. Единство немного отличается от согласованности. Единство относится к тому, как различные элементы дизайна взаимодействуют и сочетаются друг с другом. Например, совпадают ли цвета и графика? Входит ли все в единое сообщение? 90 114 Согласованность, с другой стороны, находится 90 038 между 90 039 страницами дизайна.

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

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

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

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

Дополнительные ресурсы

• Основы HTML для начинающих: как создать веб-сайт с помощью HTML
• Пять простых шагов к проектированию грид-систем: руководство для начинающих по грид-системам.
• Золотое сечение в веб-дизайне
• 8 простых способов улучшить типографику в ваших проектах
• Шрифты и Интернет: О состоянии шрифтов в Интернете и замене изображений.
• 4 принципа хорошего дизайна веб-сайтов: четыре других принципа, больше с практической точки зрения.

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

Заключение

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

Вот почему веб-дизайн так сложен.

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт