Чек-лист по дизайну сайта
Основные принципы оформления сайта фотографа
Хорошо оформленный сайт помогает клиенту оценить ваши работы, разобраться в услугах и связаться с вами. Важно продумать каждую деталь: от структуры портфолио и навигации до читаемости текста и отображения фотографий на телефоне.
Автор статьи: Мария Муратова
Руководитель команды по созданию сайтов и UX/UI-дизайнер. Специализируется на веб-дизайне и проектировании интерфейсов платформы.
В этом чек-листе мы собрали основные принципы оформления сайта фотографа и наглядные примеры, которые помогут проверить ваш сайт и понять, что можно улучшить.
Удобство пользования
01
По первому экрану сразу понятно, чей это сайт, какие услуги вы предлагаете и в каком городе работаете.
Неудачно
Нет заголовка и логотипа, по фотографии не очевидно, в каком жанре вы снимаете.
Удачно
Есть информативный логотип и заголовок, по фотографии сразу понятно, в каком жанре вы работаете.
02
Клиенту сразу понятно как с вами связаться — есть заметное целевое действие (кнопка или ссылка), которое визуально отличается от других действий.
Неудачно
Слишком много акцентных кнопок — целевое действие (запись на съёмку) теряется на их фоне.
Удачно
Второстепенные действия (смотреть работы) оформлены через ссылки, целевое действие имеет больший визуальный вес за счет акцентного блока с изображением во весь экран и заметной кнопки.
03
Все кнопки работают правильно — все нажимается и ведет туда, куда нужно.
04
Все контакты и соцсети добавлены в раздел «Визитка»
Неудачно
Визитка не заполнена — доступ к контактам есть не на всех страницах, что увеличивает путь пользователя к целевому действию.
Удачно
Визитка заполнена — контакты отображаются на всех страницах, связаться с фотографом можно в любой момент взаимодействия с сайтом.
05
Меню не перегружено (5-7 пунктов), умещается в одну строку и все пункты имеют понятные названия.
Неудачно
В таком меню тяжело найти нужную информацию: пункты расположены хаотично, названия длинные и по ним не всегда понятно, что будет размещено на странице.
Удачно
Меню хорошо структурировано: названия очевидные, пункты объединены в выпадающие списки.
Фото и портфолио
01
На сайт загружены фото в хорошем качестве (от 1920px по длинной стороне).
Неудачно
Загружено сжатое фото — в полноэкранных блоках оно становится «мыльным», сайт выглядит непрофессионально.
Удачно
Загружено фото в оригинальном размере — оно автоматически оптимизируется под любой экран и выглядит четко на любом устройстве.
02
Не обрезаются и не перекрываются текстом важные части фото.
Неудачно
Загружено сжатое фото — в полноэкранных блоках оно становится «мыльным», сайт выглядит непрофессионально.
Удачно
Загружено фото в оригинальном размере — оно автоматически оптимизируется под любой экран и выглядит четко на любом устройстве.
03
Все важные элементы фотографии на месте, композиция не нарушена.
04
Для оформления используются фото в одном стиле (по цвету/ свету/ теплоте/ контрасту), в портфолио можно показать больше разнообразия.
Неудачно
Фото в разном стиле и цветовой гамме — блок выглядит хаотично, взгляду не за что зацепиться.
Удачно
Все фото в одном стиле и цветовой гамме — блок выглядит аккуратно и сбалансированно.
05
Если фотографий много, портфолио разделено по типам съёмок. В каждой категории 10–25 лучших кадров
Неудачно
Все фото загружены в один альбом — из-за смешения разных жанров и стилей страница не выглядит цельной, а из-за большого количества фотографий страницу не досматривают до конца.
Удачно
Портфолио разделено по жанрам, на обложки загружены фото в одной цветовой гамме — по сайту удобно ориентироваться, блок выглядит аккуратно и стильно.
Тексты
Основное правило — все тексты легко читаются. Для этого нужно проверить следующие пункты
01
Блоки не перегружены текстом. Объемные тексты разделены на смысловые блоки, оптимально 1 блок = 1 абзац
Неудачно
Большие объемы текста тяжело воспринимаются
Удачно
Текст разделен на абзацы, важные части выделены в отдельные блоки
02
Заголовки и подзаголовки используются для удобной ориентации по сайту, и соответствуют содержанию блока
Неудачно
Сплошной текст, прописанный подзаголовком тяжело читается
Удачно
Подзаголовки помогают быстро понять, о чем текст
03
Размер текста не слишком мелкий и не слишком крупный. Заголовок должен помещаться в 2-3 строки максимум.
Здесь все зависит от выбранного вами шрифта, но оптимальный размер 15–17 px для основного текста, 22–28 px для подзаголовков, 34–44 px для заголовков.
Неудачно
Слева заголовок слишком большой, к тому же длинный текст, набранный капсом тяжело читать.
Справа заголовок слишком маленький — низкий контраст между заголовком и основным текстом затрудняют ориентацию по сайту.
Удачно
Оптимальный размер заголовка и хороший контраст — текст читается легко
04
Если текст размещён на фото — фон должен быть однородным, без мелких деталей. Если фото светлое — используется затемнение.
Неудачно
Тяжело рассмотреть фотографию и прочитать текст.
Удачно
Фотография и текст легко считываются и не мешают друг другу.
05
На сайте нет опечаток, лишних пробелов и случайных фраз-заглушек.
Целостность
01
Тексты оформлены в едином стиле. Сравните два одинаковых по содержанию блока:
Неудачно
Отличается регистр, выравнивание и визуальный ритм, из-за чего блок выглядит неаккуратно и сложнее воспринимается.
Удачно
Используется единый стиль заголовков и подзаголовков — текст читается быстрее, а блок выглядит цельным и профессиональным.
02
Используются одинаковые отступы между блоками
Неудачно
Нет единой логики отступов — страница выглядит несбалансированно, много лишнего пустого пространства, которое перетягивает на себя внимание.
Удачно
Отступы выстроены по одной логике — блоки читаются последовательно, страница выглядит аккуратной и целостной.
Мобильная версия
01
Все тексты легко читаются и не перекрывают важные части фото
Неудачно
Крупный размер заголовка и детализированный фон мешают восприятию и текста, и фотографии
Удачно
Оптимальный размер заголовка и однородный фон — информация воспринимается легко
02
Загружены обе версии логотипа (для светлого фона и для темного). Даже если вы отключили поддержку темной темы, для некоторых вариантов обложки может потребоваться вторая версия логотипа
Неудачно
Забыли загрузить логотип для темного фона, поэтому вместо него отображается заглушка.
Удачно
Загружены обе версии логотипа — сайт одинаково профессионально выглядит на всех устройствах.
03
Выбран подходящий формат обложки, не обрезаются важные детали фото
Пример
В обложку загружено горизонтальное фото и выбран вертикальный формат обложки. В целом это допустимо, если фото удачно обрезается и под такой формат. Вы можете предварительно кадрировать фото
Главный герой обрезан
Фото обрезано правильно, главный герой не обрезан
Формат обложки соответствует формату фото
ЕСЛИ КЛИЕНТУ НЕ НРАВЯТСЯ ФОТОГРАФИИ
Оптимизация сайта фотографа для продвижения
Как выбрать шрифты для сайта
Прямой эфир с Артуром Погосяном
Право на плохой кадр
Кантен де Брие
Структура сайта фотографа
РАБОТА С ФОТОСТУДИЯМИ
Первая платная съёмка
Как клиент выбирает фотографа
Прямой эфир с Игорем Цаплиным
Новые способы оформления сайта
Прямой эфир с Сергеем Беликовым
ЮРИДИЧЕСКАЯ ПРОВЕРКА САЙТА
