Что такое обложка сайта
Как сделать обложку сайта: практические советы арт-директора
Основное правило при создании обложек: главное — это текст, фотография стоит на втором месте.
Сообщение важнее всего, а фоновое изображение задает правильную атмосферу. Поэтому стоит подобрать фотографию, которая не затрудняет чтение и соответствует тематике сайта.
При этом фотография не обязательно должна прямо иллюстрировать ваше предложение. Фотография — это фон, поэтому она может просто поддерживать коммуникацию. Например, обложка Tilda Education — девушка делает исследование, но это не значит, что сайт посвящен только исследованиям. В данном случае обложка — это настроение. Она вдохновляет и погружает в контекст.
Бесплатные изображения для сайта можно найти на профессиональных фотостоках, распространяющих картинки по лицензии Creative Commons Zero (CC0). Это значит, что изображение освобождено от ограничений авторского права, то есть его можно как угодно использовать и изменять, в том числе в коммерческих целях.
Примеры ресурсов с качественными изображениями: Unsplash, Pexels, Stocksnap, Rawpixel.
В идеале фотография для обложки должна быть пустой по центру: без сюжета и мелких деталей.
Текст на первом экране практически всегда располагается по центру. Если важный объект или сюжет спрятать под заголовком, его никто не увидит, а читать текст станет сложнее.
Фотография в обложке — это фон, который задает определенную атмосферу. Он может помочь усилить ваше сообщение, а может остаться незамеченным.
В целом, главное, чтобы посетитель легко прочитал текст. Например, у вас сайт конференции. На обложке написано название конференции, дата, время и место проведения. Если текст сливается с фоном и плохо читается, человек может просто не обратить внимания, проскроллить и не найти важную информацию.
Когда текст читается хорошо, то удачная фотография сделает его сильнее. Например, на обложку вы ставите фото с прошлой конференции. Люди видят, как проходят ваши события — у вас был большой зал и много людей, или наоборот камерная обстановка. Фотография заменяет пару-тройку абзацев текста. Но сначала все-таки люди должны узнать про место и время.
Моя цель — подобрать такое изображение, чтобы пользователь точно понял тему страницы. Это значит, что фотография должна отражать тему либо конкретно (интерьер со стульями для мебельной мастерской), либо косвенно (красивое морское побережье для лендинга турагентства). Чтобы подобрать изображение с косвенной темой, нужно понять, что в итоге получит клиент, или поставить фотографию с атрибутами, характерными именно для этой темы.
Вот несколько примеров шаблонов, которые сделали дизайнеры Тильды. Каждый из шаблонов — пример разного подхода к подбору обложки:
Баннер для группы в Facebook – как создать идеальную обложку
Facebook обслуживает более 80 миллионов малых предприятий по всему миру, использующих брендовые страницы. И даже если мы не должны судить о книге по её обложке. вы не хуже меня знаете, что такое бывает редко. Вот почему так важно ваше правильно оформить брендовую страницу на Facebook.
Но, что такое обложка страницы на Facebook? Каковы размеры баннеры для группы Facebook и как создать изображение, которое будет отлично смотреться на настольных компьютерах и мобильных устройствах?
Эта статья научит вас всему, что вам нужно знать, и даст вам шаблон обложки группы в Facebook.
Что такое обложка страницы Facebook?
Когда кто-то посещает вашу страницу на Facebook, ваше изображение обложки – это первое, что они видят, и оно занимает почти весь экран.
Плохое изображение обложки Facebook может заставить посетителей нажать «Назад», прежде чем они сделают следующий вдох, и больше никогда не вернутся на вашу страницу.
Однако, хорошо оптимизированная фотография на обложке Facebook побудит зрителей подписаться на вас, изучить вашу страницу, взаимодействовать с вашим брендом, посетить ваш веб-сайт и совершить покупку в вашем магазине.
Какой размер фото для обложки Facebook?
Фотографии на обложке Facebook (или «баннер Facebook») отображаются с разрешением 820 пикселей в ширину на 312 пикселей в высоту на настольных компьютерах и 640 пикселей в ширину на 360 пикселей в высоту на мобильных устройствах. Размер изображения обложки Facebook должен быть не менее 400 пикселей в ширину и 150 пикселей в высоту.
Для достижения наилучших результатов Facebook также рекомендует использовать файл PNG.
Теперь, если вы относитесь к тому типу людей, которые любят быть сверхтехнологичными, фотография на обложке Facebook будет загружаться быстрее всего как файл sRGB JPG шириной – 851 пиксель, высотой – 315 пикселей и при весе менее 100 килобайт.
Большая проблема с фотографиями на обложке Facebook
Возможно, вы заметили проблему с изображениями обложек Facebook: мы используем только одну фотографию обложки Facebook, но она отображается по-разному на настольных компьютерах и мобильных устройствах.
Как Facebook помогает нам решить эту проблему? Никак, Facebook просто учитывает соотношение сторон разных устройств.
Помните, что Facebook просматривается в альбомной ориентации на рабочем столе и в портретной ориентации на мобильных устройствах. Проблема не в размерах пикселей, а в форме.
На мобильных устройствах верхняя и нижняя часть изображения увеличивается примерно на 75 пикселей с каждой стороны. Это означает, что Facebook не сжимает и не растягивает вашу обложку до нужного размера, поэтому ваше изображение всегда будет выглядеть наилучшим образом. Это также относится к обложкам Facebook, о которых мы поговорим чуть позже.
Лучший размер фото на обложке Facebook
Решение этой проблемы с изображением обложки Facebook – сделать фотографию намного выше рекомендованных 820 x 312 пикселей.
В частности, ваше изображение должно быть 820 пикселей в ширину и 462 пикселя в высоту.
Это даёт вам 75 дополнительных пикселей вверху и внизу изображения, которые будут обрезаны при отображении на рабочем столе.
Лучший размер видео для обложки Facebook?
Видео-обложки Facebook отображаются так же, как и фотографии. По этой причине рекомендуемый размер видео-обложки Facebook также составляет 820 на 462 пикселя. Ваше видео должно быть от 20 до 90 секунд.
Видео-обложки на Facebook предоставляют фантастическую возможность для продвижения вашего бренда или специального маркетингового сообщения и часто могут быть более интересными, чем фотографии.
Но, это ещё не все хорошие новости.
Видео-обложки Facebook менее эффективны на мобильных устройствах, поскольку они не воспроизводятся автоматически. Вместо этого они загружаются в виде эскиза.
Более того, звук в обложках Facebook также не воспроизводится автоматически – зрители должны нажать на видео, чтобы услышать звук. По этой причине лучше убедиться, что ваше видео по-прежнему интересно и увлекательно без звука.
Тем не менее, если учесть, что 85 процентов пользователей Facebook смотрят видео с выключенной громкостью, хорошей практикой будет сделать ваши видео интересными без звука при их публикации на Facebook.
Наконец, не волнуйтесь, если у вас уже есть отличное видео, но его размеры не совсем подходящие. Перед редактированием видео просто попробуйте загрузить видео и использовать функцию Facebook «Переместить».
Как создать фото для обложки Facebook
Теперь, когда вы понимаете размеры, вот шесть главных советов о том, как создать обложку для Facebook.
Используйте Shopify Hatchful для создания пакета бренда
Если вы ещё не создали логотип или визуальный брендинг для своего бизнеса, попробуйте Shopify Hatchful.
Этот бесплатный инструмент позволяет вам быстро и легко создать отличный брендовый пакет – он включает изображения, отформатированные для каждого из ваших основных каналов в социальных сетях.
Hatchful даже предлагает два варианта обложки для Facebook.
Используйте бесплатный инструмент для редактирования изображений
Если у вас уже есть логотип или визуальный брендинг, воспользуйтесь бесплатными инструментами для редактирования изображений и графического дизайна. Мы перечислим некоторые из них ниже в этой статье.
Большинство инструментов графического дизайна оснащены шаблонами обложки для Facebook. Обычно они отформатированы для рабочего стола (820 на 312 пикселей). Потому лучше создать новый дизайн, используя размеры, подходящие для настольных компьютеров и мобильных устройств (820 на 462 пикселя).
Затем загрузите шаблон фотографии обложки Facebook в свой дизайн, чтобы вы могли видеть, какие части вашего изображения будут обрезаны на настольных устройствах.
Используйте бесплатные стоковые фотографии и видео
Что делать, если у вас нет ярких изображений или видеозаписей для использования на вашей странице в Facebook? Нет проблем!
Страницы и профили Facebook по-разному отображают обложки
Создавая обложку для Facebook, стоит помнить о различиях между страницами Facebook и профилями Facebook.
На страницах изображения обложек Facebook отображаются полностью. Однако, в профилях Facebook поверх вашей обложки отображаются различные элементы. К ним относятся изображение профиля, имя и такие кнопки, как «Подписаться» и «Сообщение».
Обязательно примите во внимание эти дополнительные элементы при создании обложки для Facebook.
Придерживайтесь рекомендаций Facebook
Большинство рекомендаций Facebook основаны на здравом смысле. Однако, их стоит прочитать, чтобы избежать глупой ошибки, которая может привести к тому, что Facebook удалит вашу страницу с сайта.
Эти рекомендации включают:
Для получения дополнительной информации ознакомьтесь с правилами для страниц Facebook.
Как изменить фото на обложке Facebook
После того, как вы создали обложку или видео для Facebook, загрузить их на Facebook проще простого.
Просто зайдите на свою страницу в Facebook, щелкните значок камеры, а затем нажмите «Загрузить фото».
Рекомендации по фото на обложке Facebook
Теперь, когда вы знаете практические аспекты, вот четыре лучших метода создания привлекательного изображения обложки Facebook.
Используйте изображение с сильным фокусом
Лучше избегать абстрактных изображений, которые не служат четкой цели. Помните, ваша фотография на обложке Facebook – это возможность привлечь внимание посетителей. Так что используйте изображение, которое привлекает внимание людей и вызывает любопытство.
Ваш образ также должен соответствовать внешнему виду вашего бренда.
Сделайте акцент справа от изображения
Изображение профиля и боковая панель находятся в левой части страницы, поэтому обложки, как правило, выглядят лучше, когда фокус находится в правой части изображения.
Также есть тактическое преимущество в привлечении внимания зрителя к правой части страницы: именно здесь находится призыв к действию страницы Facebook.
Не включайте мелкий текст или визуальные элементы
Вы должны убедиться, что любой текст или визуальные данные, которые вы включаете, достаточно большие, чтобы их можно было легко просматривать на небольшом экране смартфона.
Это важно учитывать, когда подавляющее большинство пользователей Facebook заходят на сайт со смартфонов.
Регулярно обновляйте фото на обложке Facebook
Фотографии на обложке Facebook предоставляют фантастическую возможность пообщаться с вашей целевой аудиторией, поэтому пользуйтесь возможностью регулярно обновлять своё сообщение.
Каждый бренд и бизнес уникальны, поэтому не существует универсального решения, которое подойдёт всем, когда дело доходит до хорошей фотографии на обложке Facebook. Но есть несколько вещей, которые следует учитывать, чтобы улучшить вашу игру на Facebook.
Оптимизировать для мобильных устройств
Когда мы смотрим на наши профили в Facebook и меняем изображения обложек, мы, чаще всего, находимся на рабочем столе, но, подавляющее большинство людей, просматривающих Facebook, делают это через мобильные устройства.
Это означает, что вам нужно убедиться, что ваша обложка передаёт одно и то же сообщение на компьютере и мобильном устройстве.
Брендинг
Согласованный брендинг с вашим профилем Facebook очень важен, поскольку ваши клиенты хотят сразу знать, что ваш профиль правильный, а не учетная запись для фанатов / спама.
Создание обложки Facebook, соответствующей руководящим принципам вашего бренда, укрепит доверие клиентов. Это включает в себя использование цветов, связанных с вашим бизнесом, обеспечение единообразия вашего языка и повторение сообщений, которые вы используете на своём веб-сайте в своих изображениях.
Правило CTA
Вы нашли отличные изображения. Они могут быть привлекательными, мотивационными и вирусными. Но, ничто не может сравниться с фотографией на обложке с призывом к действию. Ваше фото на обложке можно использовать для рекламы вашей распродажи или нового продукта, который вы запустили.
Независимо от того, что является новым для вашего бизнеса, вы должны подтолкнуть своих клиентов к тому, чтобы они узнавали больше о вас.
Тестовые видео и изображения
Тестирование видео и изображений может помочь вам понять, чего хотят ваши клиенты. Возможно, изображения отлично подходят для взаимодействия на Facebook, но видео помогают мотивировать ваших клиентов посетить ваш сайт. Вы никогда не узнаете, что мотивирует ваших клиентов, пока не протестируете свои сценарии.
Сделайте это увлекательным
Все изображения должны быть созданы для привлечения внимания, и изображения на обложках Facebook не должны быть исключением. Создание изображений, которыми люди хотят поделиться с друзьями и семьей, будет означать бесплатное распространение и продвижение бренда людьми, которым нравитесь вы и ваш бизнес.
Социальное доказательство гораздо важнее в сегодняшней среде электронной коммерции, чем реклама и маркетинг!
Инструмент для создания обложек для Facebook
Существует множество инструментов, которые могут помочь вам создавать обложки для Facebook, поэтому вам не нужно общаться с дизайнером каждый раз, когда вам нужно новое изображение.
Ниже приведены пять самых популярных инструментов создания на Facebook, так что вы можете начать создавать прямо сейчас.
Canva
Canva – это инструмент для создания изображений для любой платформы, но особенно для обложек Facebook. Их шаблоны обложки также просты в использовании. Вы просто выбираете макет, изображения, шрифты и цвета, которые подходят вашему бренду, и готово!
Adobe Spark
С Adobe Sparks вы можете бесплатно создавать потрясающие обложки для Facebook. Этот инструмент помогает создавать яркие баннеры, которые усиливают ваш бренд и привлекают аудиторию за считанные секунды. К тому же они выглядят супер профессионально.
Bannersnack
В Bannersnack есть множество шаблонов, с которых можно начать, просто перетащив изображение и текст, вы получите отличные результаты за считанные минуты. В этом бесплатном инструменте также есть миллионы стоковых фотографий и анимаций.
Fotor
Создавайте привлекательные обложки Facebook с помощью Fotor, которые выразят эмоции вашего бренда всего за несколько кликов. За четыре простых шага вы можете получить идеальный актив для своей стратегии в Facebook, который повысит вовлеченность ваших подписчиков.
Crello
Crello позволяет создавать обложки для Facebook или видео, которые понравятся вашим подписчикам. Их шаблоны предлагают пользователям вдохновение и творческий подход, поэтому они могут создавать ресурсы, которые обычно выходят за рамки их возможностей. С Crello вы можете конкурировать с более крупными брендами на вашем рынке.
Резюме – обложка страницы на Facebook
Обложки Facebook – это фантастическая возможность продвигать ваш бренд или донести конкретное маркетинговое сообщение до вашей целевой аудитории.
При создании обложки Facebook помните о следующих передовых методах:
Наконец, после того, как вы создали и загрузили свою обложку в Facebook, обязательно проверьте, как она отображается на разных устройствах, и внесите необходимые изменения. Таким образом, вы можете быть уверены, что она будет отлично выглядеть для всех!
Что должно быть в макете сайта: шпаргалка для дизайнера
Порой дизайнер предоставляет заказчику макет, в котором чего-то не хватает. Верстальщики, бэкендеры и любые другие технические специалисты, конечно, могут сделать недостающий элемент на своё усмотрение, но их не будет волновать внешний вид. Вместо тщательно подобранных оттенков, они добавят свои цвета, сделают стандартные шрифты, и все усилия дизайнера пойдут насмарку.
Макет также могут отправить обратно на доработку. Поэтому дизайнеру лучше иметь под рукой список необходимых элементов и заглядывать в него до того, как макет передадут в вёрстку. Это позволит сделать всё сразу, не возвращаться к проекту несколько раз и не переживать, что при сборке страницы что-то пойдёт не так. Хотя что-то, скорее всего, всё-таки пойдёт.
Осторожно, в статье много иллюстраций.
Прежде чем говорить о конкретных элементах, стоит упомянуть основные моменты, о которых дизайнеру лучше не забывать.
Их нужно прикреплять к макету, иначе разработчик скачает какие-нибудь не те и испортит дизайн.
Удивительно, но векторная картинка должна быть в векторе и на макете. Если в макет вставить изображение другого формата, там оно будет выглядеть нормально, но при тестировании станет мыльным. Чтобы такого не происходило, надо всегда использовать вектор: скажем, прикреплять SVG-иконки.
Лучше всего не удалять сетку с макета, так как по ней удобно ориентироваться. Когда есть сетка, проще разбивать макет на части, делать колонки нужной ширины. Тогда в адаптивной вёрстке меньше багов, и сайт в целом выглядит аккуратнее.
Есть вещи, которые должны быть в макете любого сайта. Но почему-то некоторые из них дизайнеры часто забывают. Если их вообще не сделать, то сайт будет выглядеть как минимум странно. А если отдать их на усмотрение верстальщика — опять же — высока вероятность, что эти элементы будут выбиваться из общей картины.
Она нужна для замены той страницы, которой по каким-то причинам нет: товар убрали из продажи, ссылка оказалось битой, в адрес вкралась опечатка, пользователь забыл залогиниться и прошёл по прямой ссылке из закладок и т.д.
404 — это код самой популярной ошибки. Кроме неё существует и множество других состояний, но для упрощения работы 404 стала универсальной страницей для обработки ошибок.
Если не забыть про 404, можно пофантазировать и сделать креативной даже эту, самую типовую, страницу. Например, можно добавить интерактивности.
Если поисковик или фильтр не выдал никаких вариантов, то открывается страница с текстом из разряда «Записей за выбранный период нет». И о ней тоже надо подумать заранее.
Однако некоторые сайты даже в случае неудачного поиска специально показывают альтернативные варианты: пустой выдачи быть не может.
Для поисковых запросов дизайнеры часто рисуют только иконку, а сам выпадающий поиск или его результаты забывают. Но если их не сделать, окончательный вариант имеет, по крайней мере, странный вид. Вот так выглядит страница, если выпадающий поиск отрисован:
А так выглядит та же страница, если выпадающего списка нет:
Речь идёт о картинке, которая появляется в соцсетях или мессенджерах вместо текстовой строки, когда пользователь отправляет кому-либо ссылку. Кстати, разные соцсети отображают этот блок по-разному. Чтобы задать картинку и подпись к ней, нужна разметка Open Graph.
Это может быть целая страница в блоге или какая-либо отдельная статья. Неопытные дизайнеры часто рисуют одну страницу с текстом по примеру заказчика, но упускают то, что в текстах других страниц может быть другой контент. Поэтому нужно продумать все возможные элементы:
Они помогают пользователю сориентироваться на сайте, добавляют наглядности. Такие элементы есть не в каждом проекте, но если они всё-таки предполагаются, надо отрисовать и их. Вот список элементов, которые дизайнеры могут забыть.
Если вместо обычной карты хочется сделать что-то нестандартное, можно воспользоваться сервисом Snazzy maps. Только нужно уточнить у клиента, будет ли он покупать лицензионный ключ к картам. Если да, передавать разработчикам стили надо в виде JSON-файла.
Это тоже нерегулярный элемент, но для заботы о посетителях сайта его лучше предусмотреть. Это позволит пользователю не забыть, на какой именно странице он находится.
Они особенно полезны на больших сайтах или на сайтах со сложной структурой разделов. Например, когда с какой-либо страницы хочется перейти сразу к определённой категории.
Сюда относятся страницы входа, страницы с настройками и введёнными данными, страницы с предпочтениями (любимые товары и т.д.).
Для блока новостей при вёрстке достаточно и двух-трёх блоков, но на реальном сайте таких блоков могут быть тысячи. Поэтому не стоит забывать про отрисовку пагинации и кнопки «Показать ещё».
Её обычно рисуют для длинных лендингов и каталогов с товарами, чтобы пользователю было удобно вернуться наверх страницы.
Если они есть, нужно внимательно проверить все возможные детали для каждого.
Чекбоксы, радиокнопки — надо учесть особенности всех типов фильтров.
Кнопка «Сбросить/очистить всё» или сбросить отдельные пункты.
Раскрытый список с пунктами.
Ползунок для фильтра с ценой (от… до…).
Блок с количеством товаров:
Обработка ошибок или подсказки к полям:
При регистрации, заполнении формы на сайте по закону нужно место для галочки или подписи пользователя о согласии обработки данных и ссылка на политику конфиденциальности. Это самый обязательный из всех необязательных элементов.
Это маленькая картинка рядом с названием страницы на вкладке. Чтобы она корректно отображалась во всех браузерах и на всех устройствах, нужно подготовить картинку в разных размерах и форматах. А ещё можно для разных страниц одного сайта нарисовать свой фавикон.
Если фотография человека или товара не загружена, должно быть какое-то изображение — заглушка.
То, что происходит после отправки формы:
Второе окно можно увидеть очень редко. Например, если при отправке что-то случилось с сервером и он не смог обработать заявку пользователя.
Если делать календарь, то стоит задизайнить несколько состояний::
Если что-то из этого не сделать, пользователь просто не сможет сориентироваться в календаре.
Это готовый набор графических элементов. Если они понадобятся верстальщику снова, их не придётся искать по всему проекту, а можно будет сразу обратиться к Ul kit. Так будет проще разобраться и другому верстальщику, если по прошествии времени клиент захочет собрать новые страницы на основе существующих. Сделать UI kit — хороший тон для дизайнера. В UI Kit могут входить кнопки, хлебные крошки, формы, ссылки, отступы, фон, декоративные псевдоэлементы (например, полосочки),
Дизайн сайта подразумевает много мелких деталей, и все их трудно учесть. Даже если кажется, что макет готов, позже может оказаться, что какую-нибудь мелочь всё же упустили: забыли отрисовать кнопку, добавили картинку не в том формате и т.д. Поэтому на протяжении всей работы дизайнеру лучше держать перед глазами список, по которому можно проверить, всё ли сделано. Так дизайнер ничего не забудет и подготовит макет полностью сразу. А верстальщику не придётся добавлять недостающие элементы самому и ломать дизайн.
Чтобы лучше понимать верстальщиков и сразу делать всё, как нужно, пройдите курсы по вёрстке Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса «HTML и CSS. Профессиональная вёрстка сайтов». А с промокодом SKUCHNO цена на любой профессиональный курс станет ещё приятнее.
Любой из вариантов поможет говорить на одном языке с разработчиками и не тратить время на переделку каждого блока в макете. А там и до фронтенда недалеко.