Как оформить сайт-портфолио. 10 примеров из галереи #madeontilda

Какие разделы должны быть в портфолио и как его оформить, чтобы заинтересовать клиента — смотрим на 10 примерах из подборки сайтов, сделанных на «Тильде». В статье вы найдёте личные сайты дизайнеров, фотографов и редакторов, а также сайты с услугами креативных студий и агентств.

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

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

Направления работы агентства описаны на отдельной странице. Список выглядит как вертикальное меню с карточками. При клике на услугу можно узнать подробности и посмотреть примеры работ. Также есть закреплённая ссылка «Заказать услугу», которая открывает форму для заполнения заявки, показывает карту с расположением агентства и контакты.

Сайт креативной студии с портфолио и услугами. Шрифт Spektra Condensed привлекает внимание к основным блокам. Заголовки на странице выделены анимированными яркими линиями, что привлекает внимание и добавляет дизайну динамики.

Раздел «Наши работы» оформлен лаконично — в виде изображений и подписей к ним. На каждый проект можно нажать и на отдельной странице прочитать дополнительную информацию: всё от графических скетчей до шоурила.

Перед подвалом сайта добавлена бегущая строка, в которой студия информирует о своём преимуществе — готовность к новым проектам 24/7/365.

Сайт выполнен в бело-серых цветах, а за динамику и акценты отвечает салатовый. Заголовок на обложке сайта выделяется большим кеглем. Также салатовым цветом выделена основная ценность компании — «сайты с умом». Дружелюбность сайту придают небольшие векторные иллюстрации.

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

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

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

Основная информация не теряется за счёт однотонных текстовых блоков. Заголовки написаны шрифтом Druk Wide, их дополняет текст, набранный Helvetica Neue. Услуги оформлены в виде тегов, чтобы сориентировать пользователя в направлениях работы агентства.

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

Дизайн выполнен в фирменном стиле ISKRA: основной цвет — светло-бежевый, синий и оранжевый используются как дополнительные. Изображения на сайте лаконичны и линейны, с использованием одного цвета. Они не перегружают общее восприятие контента.

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

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

При клике на проекты автора в разделе «портфолио» открывается отдельная страница с подробностями работы и изображениями. Чтобы в любой момент перейти к нужному разделу, сверху закреплена строка меню. Некоторые блоки дополнены слайдерами.

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

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

Справа на главной странице закреплена фотография автора, кнопка меню для быстрой навигации и форма для заполнения заявки на проект. Для кнопок настроена ховер-анимация: при наведении курсора срабатывает инверсия цвета.

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

Личное портфолио дизайнера в монохромной цветовой гамме. Сверху расположены разделы с основной информацией и контактами автора.

Яркие проекты выделяются на тёмном фоне: создание логотипов, фирменных стилей и сайтов. Постепенно дизайнер подводит пользователей к информации о своих услугах. В этом разделе настроена ховер-анимация: при наведении на текст с названием услуги появляются примеры работ.

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

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

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

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

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

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

А вы давно обновляли своё портфолио? 🧡