Дизайн сайта-портфолио

Портфолио, которое рассказывает больше, чем просто о проектах

Портфолио Майи Роуэн строится на осознанном компромиссе: визуальный акцент сделан на названиях проектов там, где большинство портфолио отдали бы это место скриншотам. Вводная фраза «I make ideas visible» ведёт к сетке типографических карточек проектов, а не к стене макетов на устройствах. Поэтому страница зависит от описаний, которые должны объяснять суть работы.

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

Почему карточки проектов читаются как постеры

Десктопная сетка проектов намеренно неравномерна: колонки используют соотношение 1.2:0.8, поэтому левая карточка занимает примерно 60% доступной ширины. Высота каждой карточки — не менее 420px. Это оставляет место для плотно обёрнутого заголовка вверху и отдельного поясняющего предложения внизу.

01

Ширина заголовка в 8ch меняет ритм

В исходнике заголовки проектов ограничены значением 8ch, а межстрочный интервал равен 0.92. «Field Notes for Better Cities» превращается в высокий блок, а не в одну строку. Узкая мера придаёт заголовку постерный ритм; это не случайный перенос, вызванный маленьким скриншотом.

02

Описание несёт конкретный смысл

Первая карточка называет партиципаторную карту и объясняет, как небольшие наблюдения становятся гражданскими сигналами. Это существенно информативнее, чем «инновационный опыт картографирования». Описание расположено на 24px выше нижнего края, давая читателю стабильное место для поиска пояснений на карточках разных цветов.

От избранных работ к повторяемой практике

Раздел Practice меняет акценты по сравнению с сеткой проектов. Большая цитата занимает меньшую колонку; три пронумерованных пояснения — более широкую. У каждого пояснения есть собственная верхняя линейка и фиксированная колонка с номером. Эффект — переход от просмотра отдельных идей к чтению последовательности действий.

1. Find the Signal называет входные данные

   Первая строка прямо перечисляет людей, ограничения, язык и поведение. Сравните это с Field Notes, тема которого — наблюдения о городах: описание проекта называет материал, а строка практики объясняет, что дизайнер искал бы в этом материале. Страница предполагает эту взаимосвязь, но не документирует завершённое исследование.

2. Build to Learn называет причину создания прототипа

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

3. Leave a System называет передачу результата

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

Справочник по портфолио для проектов хакатона

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

Где заканчивается концепция портфолио

В исходнике сетка проектов и раздел Practice переключаются на одну колонку ниже 760px, но при этом навигационные ссылки скрываются. Это конкретное ограничение, которое нужно устранить в реальном портфолио: сохраните компактное меню разделов, чтобы посетители не прокручивали все проекты в поисках раздела «Контакты».

Вымышленные проекты не являются задокументированными работами для клиентов. Заметки — это заголовки, а не наполненная система публикаций, а контактный адрес указывает на [email protected]. Замените эти заполнители и проверьте адреса назначения перед публикацией реального портфолио.