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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

Поделиться
Отправить

Комментарии

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

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

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

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


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

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

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

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

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




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

Об издании мыслей в виде книги 2 1 Мне трудно отказывать людям, и я не хочу ни с кем портить отношения 13 Типовые решения в вёрстке. Как сверстать простую шапку страницы с меню 4