Макеты сетки на сайтах портфолио WordPress: советы по дизайну и примеры

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

Но что делает сильную сетку для портфолио? И что вы должны учитывать при запуске собственного сайта-портфолио?

В этом посте я поделюсь некоторыми советами и рекомендациями по лучшим макетам сетки для портфолио WordPress.

Конструкции с плотной сеткой

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

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

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

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

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

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

Но есть хорошая альтернатива — Bramble, у которой немного больше места между частями.

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

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

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

Кладочные сетки

Немногие знают о каменных сетках, но они существуют уже давно.

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

Тема Weston WordPress имеет эту функцию на своей минималистичной странице портфолио фотографий. Это, естественно, предназначено для фотографов, которые хотят размещать свои работы в Интернете, а сетка каменной кладки является подходящим вариантом для фотографии с переменной высотой.

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

Если вам нравятся полноэкранные макеты, взгляните на тему Notio. Он использует каменную сетку с узкими миниатюрами и пользовательскими анимационными эффектами.

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

Макеты сетки следуют нескольким тенденциям, и вы можете следовать тому, что вам больше нравится.

Hover Details: да или нет?

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

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

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

Когда ваш курсор наводит курсор на любой элемент портфолио, вы найдете два важных кусочка информации:

• Название/название элемента портфолио
• Категория предмета

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

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

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

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

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

Привлеките внимание убедительными фотографиями

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

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

Минималистская тема Mellow WordPress использует множество фотографий в разных стилях. Это не «настоящие» фотографии проекта, поскольку они в основном являются заполнителями. Но они предлагают наглядный пример продажи посетителя с первой загрузки страницы.

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

Посмотрите, что вы можете использовать для своего сайта и какая работа может привлечь внимание. Что лучше всего демонстрирует ваш набор навыков? Какая часть каждого проекта наиболее визуально привлекательна или помогает продать вашу работу другим?

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

В макете сетки у вас есть ограниченное количество места для каждого проекта. Сделайте это пространство важным!

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

Двигаться вперед

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

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