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

Михаил, как делать эскизы вёрстки? Элементов обычно много, в два клика вариант не сделаешь, но хочется как можно раньше узнать, в каком направлении двигаться.


Антон!

Лучший способ быстро набросать эскиз, который я знаю, — это метод прогрессивного джипега:

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

А иногда для выбора направления достаточно набросать эскиз на бумаге:

В бюро любая картинка, которая нарисована на скорую руку ради демонстрации идеи, так и называется — «джипег». Существуют и производные типа «джипежные иконки» и «текст джипегом».

В бюро прогрессивный джипег используется повсеместно: в самом начале работы для поиска композиции, при обсуждении макетов и внесении правок с ведущим дизайнером, во время показа арт-директору и глобальной переделки после него, для согласования замечаний с клиентом. Ещё хитрость: чтобы не скатиться в подробное рисование и не терять время, рекомендую работать над джипегом в одном слое (в Фотошопе).

В качестве иллюстрации классической работы с арт-директором — фрагмент работы над редакционными стандартами издательства «Актион-МЦФЭР»:

Эскиз дизайнера
Джипег от арт-директора с увеличенными рукописными надписями
Чистовой вариант

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

Метод воспет в мемах

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

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

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

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

Поделиться

Комментарии

Дима Кудинов
13 апреля 2016

Лучший способ создать эскиз чего угодно — нарисовать.

Юрий Балака
13 апреля 2016

В чём отличие метода «прогрессивного джипега» от метода «от общего к частному»?

Роберт Гуревич
14 апреля 2016

Как такой подход применим к разработке сайтов и приложений? Экранов много, они могут меняться, параллельно начинать код и дизайн — будут нестыковки. Как это работает у вас?


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

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

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

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

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




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

Я бы покрасил стены новой рабочей студии белой краской. А коллега хочет клеить обои 3 Как написать заказчику, что я установлю модуль на его сайт после окончательной оплаты, и при этом не обидеть его? 2 Столкнулся с проблемой, когда долго общаешься с клиентом, и потом выясняется, что его не устраивает порядок цен. Часть 1 2

Как же мне сделать систему, удобную и понятную для конечного пользователя?

2