7 базовых принципов в веб-дизайне на примере классического шашлыка

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

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

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

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

Для начала проведём базовый анализ текущего сайта (если планируется его редизайн) и поищем в интернете потенциальных конкурентов.

Изучим сайты конкурентов по следующим категориям:
- Структура;
- Шрифты;
- Цвета;
- Настроение.

Фиксируем выводы для удобства. Я, например, использую для этого Google Таблицы или Google Документы.

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

Также изучим и зафиксируем некоторые моменты:
- Какое взять мясо и сколько?
- Какие гарниры пойдут к мясу?
- Где лучше и выгоднее купить ингредиенты?
- Есть ли где-то в гараже мангал, шампура и уголь с розжигом или будем покупать?

Отвечаем на все вопросы и идем дальше.

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

К сожалению, заказчик не всегда может предоставить нам хорошие материалы и тут на помощь могут прийти данные ресурсы:
- Unsplash — библиотека качественных фотографий;
- Spline — сервис для 3D-моделирования;
- Freepik — библиотека с большим количеством элементов;
- Photoshop — графический редактор.

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

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

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

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

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

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

Адаптивный дизайн — это правильное размещение контента на различных устройствах. Он позволяет пользователям адаптировать сайт под форматы компьютера, планшета, чайника или телефона.

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

История с нашим шашлыком далеко не ушла.

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

Все предельно просто.

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

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

Тут почти без изменений.

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

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

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

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

Не стоит использовать ЛГБТ флаг в качестве цветовых референсов, если того не требует брендбук компании.

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

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

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

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

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

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

Жду ваших отзывов и мнений о подобном формате в комментариях.