Лучшее украшение для сайта

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

Деление блоков на две части

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

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

Новогодние украшения для сайта — скрипты, HTML и картинки

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

1. Добавьте на страницу два изображения.
2. Поставьте между ними отступ и измените его ширину так, как вам нужно.
3. Дополните одну из фотографий текстом.

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

На сайте магазина женской одежды ME+EM все еще проще: они совместили картинку и текст. Пространство вокруг текста добавляет воздуха — смотрится очень эффектно

Комбинирование шрифтов

Обычно мы советуем ограничиться одним шрифтом и всего двумя видами насыщенности (например, normal и bold). Дело в том, что много стилей оформления на одной странице может выглядеть неаккуратно. Но если вы готовы на эксперименты, попробуйте в заголовке комбинировать сразу несколько вариантов оформления текста.

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

Елена Базу на своем сайте использует шрифт с засечками EB Garamond. Самые главные слова она выделила курсивом, чтобы они сразу привлекали внимание

Дизайн-студия Owlsome Studio использует шрифт Canela Web. Здесь совсем нет декоративных элементов, но крупный текст и современный шрифт в сочетании с разными начертаниями дают одновременно ощущение надежности и уникальности

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

Как Делать КРУТЫЕ ПРЕЗЕНТАЦИИ — Где брать идеи? + Полезные сервисы, Шаблоны и Макеты

Шрифты с засечками: Times New Roman , Carmorant Regular , Playfair Display , Georgia , Cyntho Pro . Сверху и снизу каждой буквы у них есть «лапки» — это и есть засечки. Такие шрифты считаются классическими и чаще используются в заголовках.

Шрифты без засечек: Arial , Helvetica , Montserat , Roboto . Они кажутся минималистичными и более современными.

Источник: blog.vigbo.com

Как создать лучший дизайн сайта: 7 обязательных элементов

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

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

Иерархия в веб-дизайне – правила расположения элементов на сайте. При создании иерархии всегда учитывается визуальное восприятие пользователя.

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

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

Иерархия для создания лучшего веб-дизайна: 7 обязательных элементов

1. Размер имеет значение

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

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

Посмотрите, как это сделано на сайте Самсунга:

И на сайте Футворк:

Сайт Елены Крыгиной пользуется тем же приемом:

Все популярные веб-дизайны 2020 строятся по этому принципу.

2. Цвет для лучшего веб-дизайна

Цвет играет важную роль в восприятии информации человеком. Главное здесь – соблюдать баланс. Не перегружать видимую область контента несколькими цветами.

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

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

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

Например, аутлет Asos:

Или сайт компании Adidas:

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

3. Типографика

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

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

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

Посмотрите на сайт Medium:

Больше статей на схожую тематику:

• 6 принципов создания идеального логотипа для сайта
• Сколько стоит лендинг в 2023 году и из чего складывается его цена
• Использование нейросетей в графическом дизайне и в дизайне сайтов

4. Группировка

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

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

Сайты с выраженной группировкой, как правило, имеют много текстовой и графической информации. К таким примерам можно отнести и обычные лендинги.

Например, мне поонравился лендинг от Skillbox:

Или сайт ветеринарного центра:

5. Свободное пространство

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

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

Этот принцип иерархии в тренде у Apple:

6. Паттерны Z

Управляют вниманием пользователя. Информация считывается по определенной схеме, повторяющей написание букв «Z» и «F».

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

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

Посмотрите, сайт певца Монатика сделан по Z-паттерну:

А сайт Кремля по F:

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

А еще есть математическая формула классного дизайна.

Нравится статья? Тогда смотрите наши курсы!

• Мини-курс «Создаем сайт, который будет продавать 24/7»
• Курс «Сайт на Тильде с нуля»
• Мини-курс «Дизайн и юзабилити»

7. Золотое сечение

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

Давайте посмотрим на примере сайта Maybelline:

Или вот знакомый всем Youtube:

Посмотрите, какой классный кот, он точно вам понравится, потому что четко вписывается в модель Золотого сечения:

Общие рекомендации, как создать идеальный дизайн

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

1. Вся информация, которая будет размещена на сайте, должна быть подготовлена заранее. Прототип, текст, изображения – все это нужно иметь до начала работ.
2. Весь контент должен обладать последовательной структурой. Разграничьте всю информацию на несколько уровней – от самого главного до наименее значимого.
3. Старайтесь не перегружать сайт декоративными элементами. Если какая-то деталь добавлена для того, чтобы приукрасить сайт, лучше уберите её.

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

• Продающая страница для компании по продаже коммерческого транспорта
• Интернет-магазин с Индивидуальным дизайном
• Редизайн сайта

Заключение

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

Если вам удалось создать такой ресурс – поздравляем! Вы владелец идеального сайта =).

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

По логотипу встречают, по услугам провожают!

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

17

1

1

Спасибо за реакцию, она бесценна! Обязательно подпишитесь на наш Telegram-канал, публикуем много интересных и актуальных материалов. Не пользуетесь Telegram, тогда познакомьтесь с Катей и подпишитесь на нашу рассылку. ×

Источник: 1ps.ru

Как маркетологи украшают интернет-магазины. 13 способов и много примеров

Чувствуете запах глинтвейна, предновогодних дедлайнов и сумасшедшей гонки за подарками? Маркетологи тоже чувствуют! Они уже нарисовали баннеры к новогодним акциям, на пару с дизайнерами расчехлили Фигмы с шаблонами елочек и под подборку рождественских песен на YouTube украсили сайты интернет-магазинов и маркетплейсов.

782 просмотров

А я, как Гринч, собрал актуальные примеры этого года. Погнали смотреть.

Новогодняя версия логотипа

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

Новогодняя шапка и футер

Некоторые идут дальше и оформляют шапку сайта и футер в новогоднем формате, а иногда и весь сайт (примеры оформления будут, но чуть дальше). Лучший пример, который мне попадался — футер на сайте икеи. Просто выжимка новогоднего уюта.

Раздел “Новый год” и “Подарки” в меню или каталоге

Данный раздел меню чаще всего ведет на:

• подборки новогодних товаров и подарков
• отдельные страницы и лендинги на тему НГ

Дополнительный акцент на раздел можно сделать при помощи микро анимации, как на Яндекс.Маркете, или просто добавить emoji, как на сайте библиотеки ароматов.

Новогодние баннеры

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

Промокоды, как и баннеры, — неотъемлемая часть украшений ИМ. Как любимая оливьешка на праздничном столе. Новогодние промокоды — одно из самых бюджетных украшений к Новому году). Просто меняем HWE2347 на ZIMA2023.

Ай-Стопперы

Новогодние ай-стопперы, почему-то, больше всего радуют. Клевый пример в этом году — ай-стоппер с микроанимацией на сайте https://goldapple.ru/. Ребята отказались от классики — снежинок, елочек и шариков. Вместо него добавили персонажа.

Тематические подборки товаров

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

Кроме просто подборки “Подарки на Новый год” есть большое количество вариаций. Вот только несколько вариантов:

образы на Новый год

• продукты на стол в формате “не трожь, это на Новый год!”
• продукты для того, чтобы испечь новогодний пирог
• подарки по стоимости / типу (для нее, для ребенка и т. д.)
• готовые комплекты в подарок
• украшаем елку / квартиру
• для новогодней вечеринки

Короче, есть где разгуляться и над чем подумать.

Специальные новогодние товары

Стоит выделить данную категорию товаров отдельно, так как пик актуальности и спроса на такие товары именно в канун нового года.

Например, intimissimi предлагают комплекты белья в “Новогоднем красном”, у библиотеки ароматов есть специальные зимние ароматы, а на www.vsemayki.ru есть плед с принтом оливье.

Адвент-календарь

Адвент-календари — магическая штука. Целая коробка новогоднего настроения. Имею в виду конечно реальные календари. Помню, в лихие 90-е был такой от киндер или милки. Чистый кайф.

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

На сайте тоже можно применить такую механику. Вот ссылки на примеры этого года:

• https://okey-calendar.ru/
• https://www.mvideo.ru/promo/v-ozhidanii-novogo-goda-advent-kalendar/

Так же такую механику можно использовать и в email-рассылках.

Квизы и другая геймификация

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

• квизы в формате “Подберите подарок”
• квизы-опросы
• новогодние предсказания
• найди предметы на фото / картинке
• отправить открытку или случайное пожелание онлайн

Магнит сделал даже целую игру в своем мобильном приложении https://magnit.ru/povezet/

Минус — почти все варианты реализации будут трудозатратны. Исключение — собрать квиз на платформах типа марквиз и виджеты формата “рулетка”.

Новогодний контент и оформление сайта

Многие ИМ не ограничиваются новогодним оформлением баннеров и шапки и украшают весь сайт:

• добавляют фото и видео
• меняют оформление блоков
• добавляют подложки со снежинками и т. д.

Анимацию с падающими снежинками и светящимися гирляндами еще никто не отменял!))

Новогоднюю мишуру можно добавлять практически везде:

• фото товара
• видеоматериалы
• отдельные элементы сайта
• блоки
• шапка и футер и т. д.

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

Также есть вариант сделать и отдельные лендинги на Новый год. Вот несколько примеров:

• https://sbermegamarket.ru/landing/new-years-offers/
• https://www.svyaznoy.ru/prm/new-year
• https://vkusvill.ru/ng23/

Новогодний контент в блогах

Кроме визуального оформления на сайтах также новогодняя тематика преобладает и в блогах. Например, в блоге mvideo есть статья на тему ”Чем заменить майонез”).

Есть как просто статьи по теме Нового года, так и статьи с нативно интегрированными товарами в формате “Топ 10 подарков родителям на Новый год” или “Украшаем дом к Новому году”.

Новогодние акции и подарки

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

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

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

Источник: vc.ru