Максим Семенов
8 февраля 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Артём, давно слежу за работами бюро, читаю советы.

Когда увидел новую главную, первая мысль была, что что-то сломалось и стили не подгрузились. Вторая — что вас взломали.

Не покидает ощущение, что новый дизайн нарушает многие из ваших принципов, о которых вы рассказываете в советах (Альфа Ромео почему-то называется Бюросериф, а курсы будут проводится на Гавайях).

(Процесс. Часть первая)


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

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

Проекты без матрицы:

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

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

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

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

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

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

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

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

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

P. P. S. Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Дмитрий Снегирёв
8 февраля 2017

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

Артём Брюханов
8 февраля 2017

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

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




Недавно всплыло

Столкнулся с проблемой, когда долго общаешься с клиентом, и потом выясняется, что его не устраивает порядок цен. Часть 1 2 Расскажите об управляемости. Домашнее задание 4 Это я неправ, что долго думал, или магазин, что допустил такую ситуацию? 3 4