Чек-лист по дизайну сайта
Удобство использования
Главная страница
Информативный заголовок
Ваш уникальный логотип
Доступна информация о жанре, в котором вы снимаете
Доступна информация о городе, в котором вы работаете
Примеры:
В заголовке содержится информация о жанре съемки, о городе и об авторе.
Есть уникальный логотип с именем автора.
По фотографии сразу понятно, в каком жанре снимает фотограф.
Нет заголовка и логотипа.
По фото не понятно, в каком жанре работает фотограф.
Подробнее о том, как создать и загрузить свой логотип, мы рассказываем на странице «Логотип»
Действия на странице
Визуально заметное целевое действие (кнопка или ссылка)
Все кнопки работают правильно
Примеры:
Целевое действие выделяется за счет акцентного блока с изображением и заметной кнопки
Второстепенные действия оформлены через ссылки
Слишком много акцентных кнопок
Целевое действие (запись на съемку) теряется
Ознакомиться подробнее с возможностями кнопок на сайте можно в статье «Настройки кнопки»
Обратная связь и соцсети
Добавлены контакты и соцсети в разделе «Визитка»
Примеры:
Ссылки на соцсети добавлены - контакты отображаются на всех страницах сайта
Клиент может связаться с фотографом удобным для себя способом в любой момент взаимодействия с сайтом
Ссылки на соцсети не добавлены - доступ к контактам есть не на всех страницах сайта
Увеличен путь к целевому действию (связаться с фотографом)
Меню
Умещается в одну строку (5-7 пунктов)
Все пункты имеют понятное название
Примеры:
Меню хорошо структурировано
Очевидные и понятные названия
Пункты объединены в выпадающие списки
Пункты меню расположены хаотично
Длинные и сложные названия
Оформить меню в виде выпадающего списка вы можете по инструкции «Выпадающее меню»
Фото и портфолио
Требования к фото
Фотографии загружены в хорошем качестве
Примеры:
Фото в оригинальном размере автоматически оптимизируется под экран и выглядит четко на любом устройстве
Сжатое фото в полноэкранных блоках становится нечетким, сайт выглядит непрофессионально
Подробнее о требованиях к фото на сайте мы рассказываем в статье «Требования к файлам на сайте»
Выбран правильный кроп фото
Примеры:
Выбран прямоугольный кроп, все важные элементы фотографии сохранены, композиция не нарушена
Выбран квадратный кроп, силуэт обрезается по суставам, из-за чего фото выглядит неестественно
Для оформления выбраны фото в едином стиле
В портфолио вы сможете показать больше разнообразия
Примеры:
Одна цветовая гамма
Единый стиль снимков
Блок выглядит аккуратно и сбалансированно
Разная цветовая гамма
Разный стиль фотографий
Блок выглядит хаотично
Оформление портфолио
Портфолио разделено по типам съемок
В каждой категории 10-25 лучших кадров
Примеры:
Портфолио разделено по жанрам
В качестве обложек для категорий выбраны фотографии в одной цветовой гамме
Удобно ориентироваться по сайту
Блок выглядит аккуратно и стильно
Все фото загружены в один альбом
Смешены разные жанры и стили съемок
Слишком много фотографий на одной странице
Страницы не выглядит цельной, ее недосматривают до конца
Чтобы разделить портфолио на категории, воспользуйтесь нашей инструкцией «Галерея с альбомами»
Тексты
На сайте нет опечаток, лишних пробелов и случайных фраз
Блоки не перегружены текстом
Важно разделить объемные тексты на смысловые блоки. Оптимально использовать правило «1 блок = 1 абзац»
Примеры:
Текст разделен на абзацы
Важные части текста выделены в отдельные блоки
Большие объемы текста тяжело воспринимаются
Заголовки и подзаголовки используются правильно
Заголовки и подзаголовки нужно использовать для удобной ориентации по сайту. Важно, чтобы они соответствовали содержанию блока.
Примеры:
Подзаголовки помогают быстро понять, о чем идет речь в тексте
Сплошной текст, прописанный подзаголовком
Выбран оптимальный размер шрифта
Заголовок должен помещаться в 2-3 строки текста.
Все зависит от выбранного вами шрифта, однако мы рекомендуем:
Для основного текста размер 15-17 px;
Для подзаголовоков – 22-28 px;
Для заголоков – 34-44 px.
Примеры:
Выбран оптимальный размер заголовка
Используется хороший контраст между заголовком и основным текстом
Текст читается легко
Слева:
Выбран слишком большой размер заголовка
Слишком длинный текст в заголовке
Текст написан капсом
Справа:
Выбран слишком маленький размер заголовка
Используется низкий контраст между заголовком и основным текстом
Настроить размеры шрифта на сайте можно во вкладке «Шрифты сайта» в разделе «Дизайн» вашей панели управления
Если текст размещен на фото: используется однородный фон без мелких деталей
Если фото светлое - используйте затемнение в настройках блока
Примеры:
Фотография и текст легко считываются и не мешают друг другу
Тяжело рассмотреть фотографию и прочитать текст
Целостность
Стиль текстов
Все тексты оформлены в едином стиле
Примеры:
Используется единый стиль заголовков и подзаголовков
Блок выглядит цельным и профессиональным
Текст читается быстрее
Отличаются: регистр, выравнивание и визуальный ритм
Блок выглядит неаккуратно и сложнее воспринимается
Отступы
Между блоками используются одинаковые отступы
Примеры:
Отступы выстроены по одной логике
Блоки читаются последовательно
Страница выглядит аккуратной и целостной
Нет единой логики отступов
Много лишнего пустого пространства
Страница выглядит несбалансированно
Фотографии
Все фотографии либо с прямыми углами, либо со скруглением
Примеры:
Все фотографии имеют скругление или все фотографии прямые
Сайт выглядит цельно, видно внимание к деталям
Часть фото с прямыми углами, часть со скругленными
Нарушена целостность сайта, он выглядит менее профессиональным
Мобильная версия
Оформление текста
Все тексты легко читаются и не перекрывают важные части фото
Примеры:
Оптимальный размер заголовка
Однородный фон
Информация воспринимается легко
Детализированный фон мешают восприятию текста
Крупный размер заголовка мешают восприятию фотографии
Логотип
Загружены обе версии логотипа
Даже если вы отключили поддержку темной темы, для некоторых вариантов обложки может потребоваться вторая версия логотипа.
Примеры:
Загружены обе версии логотипа
Нет логотипа для темного фона, используется стандартный логотип
Формат обложки
Выбран подходящий формат обложки
Примеры:
Загружено предварительно кадрированное фото
Выбран горизонтальный формат обложки, фото отображается целиком
Загружено горизонтальное фото для вертикального формата обложки
Фото неудачно обрезается под вертикальный формат
Последнее обновление
Это было полезно?