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

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

Антон Кривякин
13 апр 2016
👁 8146   🗩3
Вёрстка

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

Антон Кривякин
13 апр 2016
👁 8146   🗩3
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
 29
29
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Антон!

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

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

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

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

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

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

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

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

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

Метод воспет в мемах
Рисунок гипса Афродиты. А. В. Блищ. Из пособия «Образцы рисунков» для абитуриентов МАРХИ, 2003
Метод воспет в мемах

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

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

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

Комментарии

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

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

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

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

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