Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Workflow

Зарисовки: как простая ручка и бумага могут преобразить ваши веб-дизайны 

by
Read Time:15 minsLanguages:
This post is part of a series called Let’s Talk About Creativity.
Don’t Squelch Your Creativity With the Constraints of Possibility
Readers' Poll: How do You Combat Designer's Block?

Russian (Pусский) translation by Olya Misuraghina (you can also view the original English article)

Мы проводим большое количество времени перед монитором, и наверняка у нас не один компьютер, не говоря об айфонах, графических планшетах и другой ультрасовременной чертовщине, которая заполонила наши столы. Мы — часть поколения, которому нужна мышка, чтобы пролистать альбом с семейными фотографиями (прощайте, дорогие семейные альбомы с желтеющими страницами), а Facebook — чтобы отправить другу пожелания с Днём рождения. 20 примеров великолепных сайтов с эскизами! 

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

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

Зарисовки как часть процесса планирования 

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

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

Зарисовки дают дизайнерам что-то уникальное… они помогают нам разделить большие объёмы информации на посильные части, вокруг которых мы можем создавать дизайн.

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

Хотите несколько советов о том, как поступить, не потеряв при этом голову? Возьмите ручку и бумагу… 

  1. Обозначьте ключевые слова, которые должны определять компанию: они должны быть у вас перед глазами на протяжении всего проекта, чтобы вы не забывали о том, что именно нужно представить в графическом виде. Избегайте мудрёных фраз и концепций, будьте естественнее: чем непосредственнее вы будете, тем больше информации, быстрее и легче ваш мозг сможет обработать.
  2. Всегда записывайте информацию, необходимую в процессе дизайна, схематически, например, в виде списка. Вам нужно пометить на бумаге лишь ту информацию и концепции, которые понадобятся вам, как только вы откроете графическую программу.
  3. Распределите информацию по этапам, чтобы каждая фраза была как можно проще. Если вам всё ещё нужно создать макет домашней страницы, не делайте заметки по поводу того, что нужно включить на страницу с контактами, не отвлекайтесь и не путайте себя. Помечайте информацию на разных страницах записной книжки, чтобы вы могли сосредоточиться на единственном шаге за раз.

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

Наброски как часть творческого процесса 

Мы сказали, что наброски – это творческий процесс, но что это означает на практике?

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

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

Один из моих блокнотов для зарисовок… мы вернёмся к этому позже. 

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

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

Учитывая всё это, особенно если вы работаете над огромным проектом, богатым на технические детали, первая фаза может оборвать ваш творческий поток, не говоря об изнурительном страхе «провала», которому подвержены многие дизайнеры: стремясь закончить работу быстро и качественно, мы часто остаёмся парализованными перед монитором и не можем привести в порядок мысли и направить их в нужное русло.

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

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

Делайте ошибки… специально 

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

Создавайте зарисовки, а не каркас

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

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

Смиритесь с беспорядком 

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

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

Зарисовки как часть дизайнерского процесса 

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

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

Давайте посмотрим, как некоторые сайты эффектно и необычно используют этот стиль и как он повлиял на эстетическую и практическую сторону их макетов. 

Kunal Chhajer 

http://www.kunalchhajer.com/

Сайт веб-дизайнера Кунала Чхаера точно отражает концепцию стиля набросков. Графика лёгкая и приятная, её необычно украшают рисунки, которые делают этот макет уникальным. Об этом стиле также напоминает рукописный шрифт в меню навигации. Все эти детали добавляют дизайну творческий штрих, что дизайнер и хочет продемонстрировать на своём личном сайте. 

Creative With a K 

http://www.creativewithak.com/ 

На сайте Creative with a K обширно используются наброски и каракули, чтобы ясно показать «творческую натуру» этого сайта. В этом случае даже нетипичные свойства макета делают этот сайт особенным и необычным, даже если с ним нелегко справиться. 

Lega-Lega 

http://www.lega-lega.com/ 

Сайт Lega-Lega — это онлайн-магазин принтованных маек, который определённо нацелен на молодую аудиторию. Элементы набросков добавляют этому сайту творческий и причудливый штрих. 

Beavory 

http://beavory.com/ 

Beavory — это сайт/блог Карен Мэк, иллюстратора из Израиля. Её сайт намеренно основан на стиле, ясно и необычно напоминающем о её творческой натуре. Каждая деталь, от структуры макета, основанном на неровных линиях, которые будто были нарисованы фломастером, до иконок социальных сетей, — абсолютно всё напоминает об эффектном стиль набросков. 

Bowtie 

http://bowtieperiod.com/ 

«Bowtie» — это цифровая студия, решившая представить себя в сети по-настоящему творческим образом. Анимации на сайте вместе с милыми, необычными рисунками делают макет привлекательным и очень экстравагантным. Эти люди считают себя творческими и, чтобы доказать это, используют элементы набросков. 

MakoMako 

http://www.makomako.cz/home/ 

Макет группы «MakoMako» полностью создан в стиле набросков, структура страницы основана на листе бумаги с неровными линиями, а на главной странице, как часть дизайна, помимо обычных графических деталей в виде набросков и рукописных шрифтов, мы находим карандаш. Любопытный и очень необычный вид для группы. 

Stan The Snowman 

http://stanthesnowman.com/

В летнее время большая часть шарма сайта Stan the snowman исчезает, но его графика, несомненно, эффектна. Стилизованные изображения и каллиграфические шрифты придают стилю макета спонтанные, игривые и неформальные черты. Это напоминает о том, как мы подписываем поздравительные открытки. 

Greenaway Pro 

http://www.greenawaypro.co.uk/

Сайт фестиваля «Greenaway Pro 2011» особым и привлекательным образом сочетает в себе стиль набросков и гранжа, придавая макету по-настоящему необычный отпечаток. Выбор конкретного графического стиля выражает неформальный, спонтанный и эксцентричный вид сайта. Идеально для фестиваля музыки и сёрфинга, правда? 

Julian Laval 

http://www.julianlaval.com/

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

Little Creatures 

https://www.littlecreatures.com.au/

Сайт Little Creatures создан полностью в стиле набросков и, благодаря необычным эскизам, немного недоделанным, выглядит настолько привлекательно.

Le Carnet Ordinaire 

http://carnetordinaire.com/

Carnet Ordinaire — это сайт-дневник с заметками о путешествиях, аннотациями и личными размышлениями. Учитывая эксцентричную и уединённую природу этого сайта, стиль набросков подходит ему больше всего: макет основан на изображении открытого блокнота и украшен эскизами и стилизованными рисунками. Необычно выглядит даже фон с неясными карикатурами и карандашом, случайно оставленным возле блокнота.

Wing Cheng 

http://www.wingcheng.com/

Портфолио Винг Ченг — это идеальный пример того, что стиль набросков освежает макет. Структура страниц основана на приоткрытом блокноте, из которого выпадают страницы. Эффект выглядит более драматично благодаря теням, которые обрамляют дизайн, и каллиграфическим шрифтам макета, от заголовков проектов до их описаний. Но настоящая особенность этого сайта в том, как творчески представлены проекты, нарисованные карандашом.

Kuztown University 

http://www.kutztown.edu/acad/commdes/faculty/

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

Dan Whittaker 

http://www.dannwhittakercreative.com/

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

Chernobyl Heart 

http://www.chernobylheart.org.uk/ 

В случае сайта Chernobyl Heart стиль набросков используется, чтобы графически подчеркнуть идею детства: речь идёт о детях, и нам это понятно из-за небольших стилизованных набросков, которые выражают детскую манеру рисования. Эффектный и приятный. 

Demain j’arrete 

http://demainjarrete.stpo.fr 

Стиль набросков идеально подходит для представления интернет-комиксов и иллюстраций, и макет визуально и творчески демонстрирует природу сайта. Весь сайт Demain J’arrete создан в графическом стиле рисунка углём, начиная от градиентов фона и заканчивая неровными линиями макета и меню навигации.

Nature Shop 

http://www.natureshop.co.nz/ 

Небрежно добавленные пара элементов набросков могут придать особый творческий штрих минималистичному сайту. Результат выглядит очень приятно, например, посмотрите сайт «Nature Shop». 

Ready to Market 

http://www.readytomarket.net/ 

Макет сайта Ready to Market — пример того, как смешение современного стиля со стилизованными элементами комиксов могут породить новый впечатляющий результат. 

Cou Cou Shop 

http://www.coucoushop.ch/ 

Сайт «Cou Cou Shop» очень милый и приятный глазу. Один из особенных элементов макета — это, без сомнения, нижний колонтитул, демонстрирующий стилизованный пейзаж Швейцарии. Даже эскиз сумки под разными углами выглядит необычно. 

Upside Down-Town 

http://upsidedowntown.me/ 

Красочный, необычный и причудливый сайт учебного центра «Upside-Down Town» очень оригинально использует стиль набросков. Каждый элемент макета, особенно заголовок, говорит о том, насколько эффектно выглядят рисунки, наброски и цвета, графически и весело освещающие детский мир. 

Заключение 

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

Я заканчиваю, делясь с вами двумя своими набросками: эскиз моего текущего портфолио и первые идеи этой статьи, которые я записала во время по-настоящему скучной поездки в поезде. 

Теперь ваша очередь, я хочу увидеть ваши зарисовки! 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.