Даем рекомендации по обеспечению визуальной идентичности на разных устройствах, чтобы сайт выглядел узнаваемым и цельным.
Что лучше всего помогает развивать бренд? Узнаваемость. И на веб-сайтах самых разных продуктов и брендов она так же важна, как на билбордах и вывесках. Так что сегодня говорим про то, как поддерживать единообразие стиля на сайте с разных устройств.
Для начала: вы знаете, что такое стайл гайд?
1. Создайте стайл гайд
Это рабочий документ, который вы пишете, чтобы соблюдать единый дизайн сайта. В нём обычно заранее прописывается вся информация обо всей визуальной составляющей сайта:
- цветовой палитре
- типографике
- анимациях
- шрифтах
- компонентах
- даже о сетке макета
Стайл гайд поможет дизайнерам и разработчикам придерживаться единообразия во всём, от цвета окон и UI/UX-элементов до размера и тигля шрифтов. На самом деле, всё, что мы опишем ниже, можно прописать в этом документе и использовать его, как методичку для разработки сайтов и приложений на разные платформы под одним брендом.
2. Внедряйте узнаваемые элементы
И речь идёт не только о фирменной шапке сайта с логотипом, но и о шрифте, и общей цветовой гамме. Взглянем, к примеру, на официальный сайт CHANEL, который легко узнать, даже если духами вы не пользуетесь.
Всё потому, что в качестве центрального шрифта здесь использован тот же Couture, разработанный специально для бренда. Он не только существенно повышает узнаваемость марки, но ещё и придаёт единообразие сайту на разных устройствах.
Интересный факт: Couture был разработан специально для бренда художником Чейзом Бебб, за его основу был взят оригинальный почерк Коко Шанель.
3. Поддерживайте единую структуру подачи контента
Работать с информацией на сайте гораздо проще, если она хорошо структурирована и понятна. А если UI-интерфейс, визуальный ряд и навигация организованы похожим образом, то человек с самого первого посещения будет знать, куда скроллить и нажимать; стоит ли говорить о том, как сильно это повысит удобство пользования?
Сайты и приложения, например, OZON прекрасно знают, зачем вы к ним приходите, и рекомендуют вам товары для покупок с самой загрузки страницы.
Вы уже где-то на внутреннем уровне знаете, что нужно скроллить вниз, чтобы посмотреть следующие товары: всё потому, что у вас есть насмотренность, и OZON с ней работает, чтобы вам было комфортнее.
4. Не забывайте тестировать!
Мы писали об этом ранее, и ещё не раз напишем: самый верный способ лучше скоординировать между собой сайт и мобильное приложение/мобильную версию – проводить регулярные тесты с разных устройств: с разным разрешением, системой, функциями.
Так вы не только сможете отловить баги и устранить “артефакты”, но и убедитесь, что на всех устройствах ваш сайт выглядит одинаково и привлекательно.
А вам случалось сталкиваться с компаниями, сайты у которых на разных устройствах сильно отличались друг от друга?
теги: узнаваемость, дизайн сайтов, разработка, шрифты, цвета