Школа
Вёрстка

Как создавался новый сайт бюро. Часть первая

Максим Семенов
8 фев 2017
👁 4644   🗩2
Вёрстка

Как создавался новый сайт бюро. Часть первая

Максим Семенов
8 фев 2017
👁 4644   🗩2
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
 3
3
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Артём рассказывает о причинах и принципах, которыми мы руководствовались при перезапуске сайта. Я расскажу, как мы придумывали новый дизайн.

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

Ностальгируем, ностальгируем… Кончили ностальгировать, крутим дальше

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

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

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

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

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

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

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

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика в вебеБюро
Полезно
 3
3
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

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

Расскажите про технические тонкости построения такой сетки. Очень интересно, как данная сетка выглядит в админке.

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

Рекомендуем другие советы