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

() translation by (you can also view the original English article)

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

Проте, в середині цієї цифрової епохи кращими союзниками веб-дизайнера є звичайні інструменти, які можна купити на дріб'язок, що загубилася між диванними подушками. Я говорю про те, щоб зробити ручку, олівець і папір частиною творчого процесу, який інші «цифрові» дизайнери використовували роками: я пропоную робити замальовки.

У цій статті ми розглянемо аргументи, які напевно виникали у вас в глибині душі: ми побачимо на прикладі, як начерки допомагають упорядкувати ідеї, створити ефектний дизайн макета і - чому б і ні - додати свіжий і незвичайний штрих нашому дизайну.

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

Уявіть такий сценарій: Щойно закінчився виснажливий брифінг з клієнтом, і тепер настав момент заново упорядкувати наші ідеї. Нам відомі переваги і потреби клієнта. На основі цього ми зможемо створити макет дизайну. Проблема в кількості інформації, яку нам потрібно врахувати! Ми визначили, що на домашній сторінці треба розмістити слайдер і помітний заклик до дії, щоб з нами зв'язалися, що на сайті буде сім сторінок, а також що на домашню сторінку треба буде включити останні новини, і так далі.

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

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

Якщо ж вам пощастило і ви вмієте перетворювати концепції та ідеї в дизайн, напевно ви забудете щось важливе, і в результаті вам доведеться взятися за макет знову, вдруге. І вам, мабуть, відомо, що існують макети, які навіть через невеликі дрібниць повністю змінюються і втрачають свою комунікативну та естетичну цінність ... це дійсно дуже сумно.

Хочете кілька порад про те, як вчинити, не втративши при цьому голову? Візьміть ручку і папір...

Позначте ключові слова, які повинні визначати компанію: вони повинні бути у вас перед очима протягом усього проекту, щоб ви не забували про те, що саме потрібно представити в графічному вигляді. Уникайте модерних фраз і концепцій, будьте природніше: чим безпосередніше ви будете, тим більше інформації, швидше і легше ваш мозок зможе обробити.
Завжди записуйте інформацію, необхідну в процесі дизайну, схематично, наприклад, у вигляді списку. Вам потрібно позначити на папері лише ту інформацію і концепції, які знадобляться вам, як тільки ви відкриєте графічну програму.
Розподіліть інформацію по етапах, щоб кожна фраза була якомога простіше. Якщо вам все ще потрібно створити макет домашньої сторінки, не робіть нотатки з приводу того, що потрібно включити на сторінку з контактами, не відволікайтеся і не плутайте себе. Позначте інформацію на різних сторінках записника, щоб ви могли зосередитися на єдиному кроці за раз.

Ця перша фаза начерків стосується переробки інформації в схематичному і простому вигляді. Можливо, вам здається, що вся ця строгість і дисципліна не мають нічого спільного з творчістю і уявою, і вам хочеться змінити це? Добре, давайте перейдемо до наступного етапу.

Начерки як частина творчого процесу

Ми сказали, що начерки - це творчий процес, але що це означає на практиці?

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

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

Один з моїх блокнотів для замальовок... ми повернемося до цього пізніше.

У мене бували важкі часи з деякими клієнтами: натхнення не хотіло приходити, а мої графічні заявки змушували мене соромитися самої себе. Я годинами переглядала сайти галерей, ще більше заганяючи себе в депресію, тому що мені здавалося, що кожен умів створювати красиві макети, і тільки-но я одна не могла скласти разом два прямокутника так, щоб вийшло красиво. У моєму випадку, олівець зменшив цей тиск.

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

З огляду на все це, особливо якщо ви працюєте над величезним проектом, багатим на технічні деталі, перша фаза може обірвати ваш творчий потік, не кажучи про виснажливу страху «провалу», до якого схильні багато дизайнерів: прагнучи закінчити роботу швидко і якісно, ми часто залишаємося паралізованими перед монітором і не можемо привести в порядок думки і направити їх в потрібне русло.

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

Окресліть макет, зробіть пару заміток, зітріть все, почніть заново: під час цього процесу ваш мозок працює швидко і несамовито, тому записуйте все, поки фаза Інтуїція не потьмяніє! Ви виявите, що, давши повну свободу своїм ідеям, ви приємно розслабитеся, і, крім того, це корисно.

Робіть помилки... спеціально

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

Створюйте замальовки, а не каркас

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

Це не замальовки, це зовсім інше. Коли ви натискаєте мишкою на якісь кнопки, щоб з'явилося кілька прямокутників, це не дозволяє вам змалювати свої ідеї і звільнити свій творчий потік, повірте. Говорячи це, я не сумніваюся в корисності хорошого каркаса, я просто хочу підкреслити різницю між цими двома підходами.

Змиріться з безладом

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

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

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

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

Тому, що багато в процесі творчості використовують начерки, їх можна часто побачити на сайтах фрілансерів або агентств з комунікацій або дизайну, бажаючих наочно передати цю концепцію. У будь-якому випадку, навіть поєднання елементів начерків з більш традиційним графічним стилем додасть свіжий вигляд в іншому звичайним дизайнам.

Давайте подивимося, як деякі сайти ефектно і незвично використовують цей стиль і як він вплинув на естетичну і практичну сторону їх макетів.

Kunal Chhajer

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

Creative With a K

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

Lega-Lega

Сайт Lega-Lega - це онлайн-магазин прінтована майок, який виразно націлений на молоду аудиторію. Елементи начерків додають цьому сайту творчий і жвавий штрих.

Beavory

Beavory - це сайт/блог Карен Мек, ілюстратора з Ізраїлю. Її сайт навмисно заснований на стилі, ясно і незвично нагадує про її творчу натуру. Кожна деталь, від структури макета, заснованому на нерівних лініях, які ніби були намальовані фломастером, до іконок соціальних мереж, - абсолютно все нагадує про ефектному стиль начерків.

Bowtie

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

MakoMako

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

Stan The Snowman

У літню пору велика частина шарму сайту Stan the snowman зникає, але його графіка, безсумнівно, ефектна. Стилізовані зображення і каліграфічні шрифти надають стилю макета спонтанні, грайливі і неформальні риси. Це нагадує про те, як ми підписуємо вітальні листівки.

Greenaway Pro

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

Julian Laval

Джуліан - це ще один фрілансер і веб-дизайнер, який бажає підкреслити свої художні навички і по-справжньому творчо використав для цього комунікативну силу ескізу. Звичайно, не тільки це робить його сайт особливим, але і цікава і навмисне незвичайна природа його малюнків. Як і у випадку з іншими сайтами в цьому стилі, кольору обмежені відтінками сірого, щоб ілюстрації здавалися більш реалістичними.

Little Creatures

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

Le Carnet Ordinaire

Carnet Ordinaire - це сайт-щоденник з нотатками про подорожі, анотаціями та особистими роздумами. З огляду на ексцентричну і відокремлене природу цього сайту, стиль начерків підходить йому найбільше: макет заснований на зображенні відкритого блокнота і прикрашений ескізами і стилізованими малюнками. Незвично виглядає навіть фон з неясними карикатурами і олівцем, випадково залишеним біля блокнота.

Wing Cheng

Портфоліо Вінг Ченг - це ідеальний приклад того, що стиль начерків освіжає макет. Структура сторінок заснована на відкритому блокноті, з якого випадають сторінки. Ефект виглядає більш драматично завдяки тіням, які обрамляють дизайн, і каліграфічним шрифтів макета, від заголовків проектів до їх описів. Але справжня особливість цього сайту в тому, як творчо представлені проекти, намальовані олівцем.

Kuztown University

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

Dan Whittaker

Ден Уіттекера демонструє на своєму сайті звичайний для багатьох веб-дизайнерів графічний стиль. Недбалий і безпосередній вид, заснований на макеті сторінки з книги і послідовному використанні елементів начерків. Загалом, макет дуже ефектний і приємний для ока.

Chernobyl Heart

У разі сайту Chernobyl Heart стиль начерків використовується, щоб графічно підкреслити ідею дитинства: мова йде про дітей, і нам це зрозуміло через невеликі стилізованих начерків, які висловлюють дитячу манеру малювання. Ефектний і приємний.

Demain j'arrete

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

Nature Shop

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

Ready to Market

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

Cou Cou Shop

Сайт «Cou Cou Shop» дуже милий і приємний для ока. Один з особливих елементів макета - це, без сумніву, нижній колонтитул, що демонструє стилізований пейзаж Швейцарії. Навіть ескіз сумки під різними кутами виглядає незвично.

Upside Down-Town

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

Висновок

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

Я закінчую, ділячись з вами двома своїми начерками: ескіз мого поточного портфоліо і перші ідеї цієї статті, які я записала під час по-справжньому нудною поїздки в поїзді.

Тепер ваша черга, я хочу побачити ваші замальовки!