Итак, у вас есть много отличных снимков. Но что с ними делать? Создания сайта на базе фотографий — не просто пачка изображений, упакованных в CSS и HTML. Такой ресурс должен быть продуманным для того, чтобы представить контент в наилучшем виде. В этом материале мы рассмотрим десять приемов и способов создания сайтов на базе фотографий, начиная портфолио и блогами, заканчивая бизнес-ресурсами.

Огромные изображения

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

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

Слайдеры

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

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

Коллаж или сетка

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

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

Минимализм

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

Выбирайте простые кнопки, элементы и цвета, чтобы дать больше пространства на экране фотографии. (По этой причине так много сайтов-портфолио выполнены в минималистичном стиле и строятся на черно-белой цветовой схеме)

Минимум эффектов

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

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

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

Фото-тема

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

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

Микс форм и размеров

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

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

Размещение текста

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

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

Главные правила в этом случае таковы: не размещайте элементы дизайна поверх лиц на фото; также держите элементы дизайна подальше от места действия на фото; убедитесь что кликабельные элементы различимы на фоне изображения.

Контраст

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

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

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

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

Дизайн для изображений

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

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

Заключение

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

Автор статьи Carrie Cousins

Перевод — Дежурка

Смотрите также:

• Минимализм — лучшая стратегия для вашего сайта?
• Белые заголовки в веб-дизайне
• 10 способов использования пастельных тонов в веб-дизайне