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

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

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

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

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

В порядке ещё одного эксперимента мы попробовали сделать портфолио чёрным:

Чёрное портфолио не выжило, но натолкнуло на мысль цветового кодирования рубрик. Впоследствии выбору цвета каждой рубрики были посвящены десятки макетов.

В следующих советах я расскажу о сетке базовых линий, вёрстке перебивок, устройстве главной страницы и реализации раскладки работ в рубриках.