Красивый сайт
Что такое красивый сайт и что, собственно, делает сайт таковым. Начнем с того, что понятие «красиво» у всех разное. Для одних людей красивый сайт — это одно, для других — совершенно другое. Кому-то нравятся спокойные и гармоничные сайты в пастельных оттенках, а кто-то наоборот в восторге от яркой и сочной цветовой гаммы. На первый взгляд, это дело вкуса и всё индивидуально. Но так ли на самом деле? — и да, и нет. Предпочтения в цвете и оформлении, действительно, могут быть разными. Но всё же у красивых сайтов есть нечто общее, что создает тот самый эффект «вау».
Чтобы не создавалось впечатление «бесплатной газеты с объявлениями», сайт должен быть стильным, лаконичным, логичным. Этого эффекта можно достичь с помощью:
— лаконичного меню,
— четко выстроенной главной страницы,
— использования красивых фотографий,
— соблюдения единого стиля (цветовое наполнение, шрифты, единое оформление на всех страницах),
— адаптации сайта для разных устройств.
Цветовое наполнение сайта
Самое первое и самое важное, что нужно сделать для создания красивого сайта — это выбрать цветовое наполнение. Обычно это 2-3 цвета, в которых и будет выполнен весь сайт. Так называемая палитра сайта. Для этого необходимо выбрать один оттенок для текстового и графического оформления, второй — в качестве цветового акцента. Цветовой акцент — это цвет, который будет в очень дозированном количестве присутствовать на сайте. Его лучше выбирать с учетом психологии в маркетинге и в соответствие занимаемого сегмента. Можно пойти еще дальше, и подобрать акцентный цвет из личной цветовой палитры. Тогда сайт будет полностью олицетворять создателя бизнеса. Такой вариант прекрасно подходит для варианта личного бренда. Личную цветовую палитру вы всегда можете заказать на нашем сайте, ссылочка на подробное описание услуги расположена в конце страницы. Дополнительно для сайта можно подобрать еще один цвет. Это может быть более светлый / темный по тону одного из уже выбранных цветов или, наоборот, контрастный. Рассмотрим несколько примеров, как цветовая палитра может быть применена для сайта.
Один из приемов для работы в дорогом сегменте. Чтобы показать элитность, каталог изделий лучше всего сделать максимально простым, с минимумом цветовых акцентов. Например, так:
— фотографии товара на белом фоне и все в едином стиле,
— фон на сайте также белый, буквы и кнопки темного цвета из палитры сайта,
— никаких кричащих цветов (оранжевый, салатовый, желтый, яркий розовый) лучше не использовать,
— один спокойный цвет может быть использован для выделения кнопки звонка или важной отметки в карточке товара. Но он должен быть везде одинаковый и его не должно быть много.
Еще вариант, можно выбрать для акцентного цвета на сайте — цвет изготавливаемых изделий. Этим цветом оформить логотип и совсем немного акцентов. Всё остальное оформление сделать черным или темно-серым цветом, фон сайта, карточек товара, фон кнопок, меню — белым. Другими словами, ползунки в фильтрах, кнопки «Каталог», «отправить», «заказать звонок», стрелочка вверх, изображения телефонной трубки в разделе «с нами связаться» и так далее — это всё вполне можно оформить в черном или темно-сером цвете. Очень многие бренды пользуются именно этим приемом для представления своей компании. То есть цветовой акцент (в том числе может быть и яркий) является фирменным и присутствует в готовой продукции. В таком случае использование его на сайте и в логотипе вполне логично. Здесь же стоит отметить, что когда на сайте цветовых акцентов совсем немного, это смотрится гармонично и дорого. В случае, когда цветовой акцент выбран корректно, но его слишком много, это удешевляет сайт и продукцию в психологическом плане.
Но это вовсе не обязательно, его (акцентного цвета) вообще может и не быть. Достаточно выбрать один темный оттенок для графического и текстового оформления. В некоторых случаях можно еще добавить более светлый оттенок, но в этой же цветовой схеме. И это может быть отличным вариантом.
Во всех случаях, очень важно при применении цвета из палитры пользоваться его точным номером (не выставлять цвет «на глазок»). Фотографии для наполнения сайта также лучше подбирать в используемой цветовой гамме или на прозрачном фоне. Более подробно о цвете в маркетинге можно узнать статье «Психология цвета в маркетинге», ссылочка на неё размещена в конце страницы.
Один из приемов для работы в дорогом сегменте. Чтобы показать элитность, каталог изделий лучше всего сделать максимально простым, с минимумом цветовых акцентов. Например, так:
— фотографии товара на белом фоне и все в едином стиле,
— фон на сайте также белый, буквы и кнопки темного цвета из палитры сайта,
— никаких кричащих цветов (оранжевый, салатовый, желтый, яркий розовый) лучше не использовать,
— один спокойный цвет может быть использован для выделения кнопки звонка или важной отметки в карточке товара. Но он должен быть везде одинаковый и его не должно быть много.
Еще вариант, можно выбрать для акцентного цвета на сайте — цвет изготавливаемых изделий. Этим цветом оформить логотип и совсем немного акцентов. Всё остальное оформление сделать черным или темно-серым цветом, фон сайта, карточек товара, фон кнопок, меню — белым. Другими словами, ползунки в фильтрах, кнопки «Каталог», «отправить», «заказать звонок», стрелочка вверх, изображения телефонной трубки в разделе «с нами связаться» и так далее — это всё вполне можно оформить в черном или темно-сером цвете. Очень многие бренды пользуются именно этим приемом для представления своей компании. То есть цветовой акцент (в том числе может быть и яркий) является фирменным и присутствует в готовой продукции. В таком случае использование его на сайте и в логотипе вполне логично. Здесь же стоит отметить, что когда на сайте цветовых акцентов совсем немного, это смотрится гармонично и дорого. В случае, когда цветовой акцент выбран корректно, но его слишком много, это удешевляет сайт и продукцию в психологическом плане.
Но это вовсе не обязательно, его (акцентного цвета) вообще может и не быть. Достаточно выбрать один темный оттенок для графического и текстового оформления. В некоторых случаях можно еще добавить более светлый оттенок, но в этой же цветовой схеме. И это может быть отличным вариантом.
Во всех случаях, очень важно при применении цвета из палитры пользоваться его точным номером (не выставлять цвет «на глазок»). Фотографии для наполнения сайта также лучше подбирать в используемой цветовой гамме или на прозрачном фоне. Более подробно о цвете в маркетинге можно узнать статье «Психология цвета в маркетинге», ссылочка на неё размещена в конце страницы.
Меню сайта
Меню должно быть простым и понятным. Пользователя, при попадании на сайт впервые, интересует в первую очередь продукция / услуга или полезный контент. И только после детального изучения интересующего товара / услуги / контента и сайта в целом, потенциальный покупатель будет выяснять, где находится компания (контакты), как осуществляется доставка и оплата, и как можно оформить заказ. Всё остальное посетителю сайта может даже не понадобится. Поэтому не стоит вмещать всю возможную информацию о компании и предложениях в меню. Возможно, вам встречались сайты с несколькими уровнями меню, огромным количеством пунктов мелким шрифтом. Это некрасиво. Если структура сайта большая, каталог вмещает в себя большое количество товаров, лучше использовать подпункты меню или возможность настройки фильтров непосредственно на странице каталога. Ниже несколько примеров списков пунктов меню сайта (в зависимости от тематики), которые позволяют сделать меню простым, понятным, удобным и красивым.
— услуги,
— тренер,
— контакты,
— личный кабинет.
— тренер,
— контакты,
— личный кабинет.
— каталог,
— рецепты,
— о нас,
— контакты,
— доставка.
— рецепты,
— о нас,
— контакты,
— доставка.
— каталог,
— как заказать,
— номер телефона,
— кнопки мессенджеров,
— контакты,
— оплата и доставка.
— как заказать,
— номер телефона,
— кнопки мессенджеров,
— контакты,
— оплата и доставка.
— услуги,
— фото,
— блог,
— о салоне,
— контакты,
— кнопка онлайн-записи.
— фото,
— блог,
— о салоне,
— контакты,
— кнопка онлайн-записи.
Главная страница
Главная страница сайта — как визитная карточка, должна быть идеальной, стильной, без лишней информации. Не нужно её перегружать и размещать на главной странице всё, что только есть на сайте. Например, «техническую информацию» лучше разметить на отдельных страницах, допустимо какую-то часть информации в подвале.
Что имеется ввиду под «технической информацией»:
— доставка и оплата,
— политика конфиденциальности,
— политика о персональных данных,
— программа лояльности,
— режим работы,
— контакты,
— сертификаты.
Ссылки на эти страницы могут быть частично установлены в меню (только самое главное), остальные стоит разместить в подвале.
Чтобы главная страница смотрелась стильно, для неё важно:
— продумать дизайн страницы,
— составить макет с учетом целевой аудитории,
— подобрать / отснять очень красивые и качественные фотографии,
— сверстать страницу.
Фотографиям на главной странице, да и в целом на сайте, стоит уделить особое внимание. Лучше всего, если они будут сняты профессиональным фотографом, а также соответствовать стилю и цветовой палитре сайта. Для размещения фотографий в одном блоке и в аналогичных лучше всего использовать единый размер. То есть, если на главной странице стоит блок с товарами по акции, то фотографии товаров должны быть одинакового размера и в едином стиле. Например, так:
Что имеется ввиду под «технической информацией»:
— доставка и оплата,
— политика конфиденциальности,
— политика о персональных данных,
— программа лояльности,
— режим работы,
— контакты,
— сертификаты.
Ссылки на эти страницы могут быть частично установлены в меню (только самое главное), остальные стоит разместить в подвале.
Чтобы главная страница смотрелась стильно, для неё важно:
— продумать дизайн страницы,
— составить макет с учетом целевой аудитории,
— подобрать / отснять очень красивые и качественные фотографии,
— сверстать страницу.
Фотографиям на главной странице, да и в целом на сайте, стоит уделить особое внимание. Лучше всего, если они будут сняты профессиональным фотографом, а также соответствовать стилю и цветовой палитре сайта. Для размещения фотографий в одном блоке и в аналогичных лучше всего использовать единый размер. То есть, если на главной странице стоит блок с товарами по акции, то фотографии товаров должны быть одинакового размера и в едином стиле. Например, так:
Дизайн главной страницы и сайта в целом необходимо продумать таким образом, чтобы логотип компании гармонично смотрелся.
При верстке страницы необходимо проверить корректное отображение (в том числе на разных устройствах):
— всех элементов (чтобы один не накладывался на другой, не перекрывал собой информацию),
— отступов от края страниц (они должны быть везде одинаковыми, если только иное не предусмотрено дизайнерским решением),
— контента при переходе по кнопкам, в том числе меню.
А также убедиться в том, что:
— толщина графических элементов везде одинаковая,
— используемые шрифты гармонично смотрятся с логотипом компании (если таковой имеется). Особенно это важно, если логотип полностью или частично текстовый.
При верстке страницы необходимо проверить корректное отображение (в том числе на разных устройствах):
— всех элементов (чтобы один не накладывался на другой, не перекрывал собой информацию),
— отступов от края страниц (они должны быть везде одинаковыми, если только иное не предусмотрено дизайнерским решением),
— контента при переходе по кнопкам, в том числе меню.
А также убедиться в том, что:
— толщина графических элементов везде одинаковая,
— используемые шрифты гармонично смотрятся с логотипом компании (если таковой имеется). Особенно это важно, если логотип полностью или частично текстовый.
Если Вам понравилась наша статья и Вы хотите поддержать проект Womlifeclub — это можно сделать с помощью формы, расположенной ниже (сумму можно выбрать на свое усмотрение).
С этой статьей обычно читают: