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

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


Антон!

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии

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

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

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

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

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

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


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

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

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

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

4




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

9 Какие приложения вы используете для съёмки и обработки фотографий на телефоне? 1 8 Как начинающему автору отстаивать свою позицию? И нужно ли это делать? 2