1. Ескіз ≠ Малювання
2. Працюйте з шарами
3. розімніть м'язи
4. Пограйте своїми можливостями
5. замальовує взаємодії
6. Копіюємо і вставляємо в реальному світі
7. Дизайн - це деталі
8. Розкажіть всю історію цілком
9. Викидайте зошит для малювання
10. Чого ви чекаєте?
11. Інструменти

Переклад статті підготовлений Ольгою Сидорової, Nimax .

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

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

WORKSPACE допоможе вибрати оптимального виконавця. База проекту налічує більше 10 500 агентств . Сервіс БЕЗКОШТОВНИЙ для замовників.

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

[Примітка редактора: книга, необхідна кожному професійному веб-дизайнеру і розробнику: The Printed Smashing Books Bundle. У ній міститься безліч практичних рішень для вашої щоденної роботи.]

Ескіз ≠ Малювання

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

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

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

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

ОК, давайте почнемо.

Працюйте з шарами

Часто, коли я закінчую ескіз, результат виглядає скоріше як колаж, ніж як ескіз. Результативність малювання ескізів зростає, якщо працювати з декількома шарами.

Короткий відеоролик показує, як можна використовувати шари

техніка

Почніть зі світло-сірого маркера (від 20 до 30% сірого) і поступово додайте шари з деталями за допомогою більш темних маркерів і ручок.

Навіщо це робити?

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

У міру того як сторінки наповнюються ідеями, поверніться до початку роботи з більш темним маркером (60% сірого) або ручкою, і додайте шар з додатковими деталями в місцях, де це необхідно. Це також відмінний спосіб виділити конкретний начерк серед всіх інших.

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

Увага!

Якщо ви почнете малювати кульковою ручкою, а потім повернетеся до малювання маркером, чорнило, швидше за все, размажутся через спирт, який міститься в маркері.

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

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

Якраз займаєтеся вибором підрядника для розробки сайту? Радимо в першу чергу звернути увагу на учасників рейтингу креативності веб-студій . Цей незалежний рейтинг володіє прозорою методологією та враховує перемоги студій в 2 найвідоміших російських конкурсах сайтів і 4 світових.

розімніть м'язи

техніка

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

Чому?

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

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

Пограйте своїми можливостями

техніка

Повертайте сторінку перед тим, як намалювати лінію, щоб в різних напрямках у вас виходило однаково рівно.

Навіщо?

Рідко хто може малювати однаково рівні лінії в різних напрямках. Повертаючи сторінку, ви зможете малювати лінію в діапазоні і напрямках, які найкраще у вас виходять. Не намагайтеся намалювати вертикальну лінію, якщо це здається вам складним; поверніть папір на 90 градусів і намалюйте замість цього горизонтальну лінію. Це супер-просто, але на диво дієво.

Увага

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

замальовує взаємодії

техніка

Почніть з основного ескізу, а потім використовуйте липкі папірці, щоб додати підказки, спливаючі вікна, модальні вікна та інші інтерактивні елементи.

Навіщо?

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

• Визначте численні взаємодії на одному ескізі, а потім прибирайте по одному листочку в стратегічному порядку перед тим, як копіювати або сканувати малюнок.
• Використовуйте різні кольори для того, щоб відобразити різні типи взаємодій
• Липка записка недостатньо велика, щоб відобразити ваше модальне вікно? Додайте поруч ще одну
• Якщо липка записка занадто велика для вашої підказки, використовуйте лінійку, щоб швидко привести її у відповідність з потрібними розмірами

Досліджуйте всі різноманіття взаємодій і ідей в одному ескізі за допомогою клейких записок

При ксерокопіюванні різних версій ескізу, кожного з різною липкою наклейкою, ви отримаєте в результаті безліч різних ескізів.

Копіюємо і вставляємо в реальному світі

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

техніка

Використовуйте ксерокс для того щоб створити шаблони з ескізів або щоб відтворити будь-яку область ескізу.

Навіщо?

Ксерокс - це «олдскульна» версія Control + C, Control + V. Він робить виробництво моделей і підкладок більш ефективним. Він також підтримує вашу впевненість у собі, оскільки якщо ви щось зіпсували (а ви рано чи пізно що-небудь зіпсуєте), ви зможете легко це виправити.

• Якусь частину вашого інтерфейсу потрібно послідовно перемальовувати в численних ескізах? Зробіть кілька копій і потім робіть начерки прямо на роздруківках.
• Зіпсували якусь частину ескізу? Ніяких проблем. Накрийте цей фрагмент ескізу чистим листком паперу або виправте замазкою, отксерокопіруйте і продовжуйте малювати ескіз на цій роздруківці.
• Чи працюєте над мобільним проектом? Або хочете зробити серію ескізів однакового розміру? Створіть макет і наксерокопіруйте собі кілька стопок підкладок. Ще простіше роздрукувати як підкладку контури девайса або браузера, хорошу добірку таких речей можна знайти тут: « Free Printable Sketching, Wireframing and Note-Taking PDF Templates ».
• Хочете змінити макет бічній панелі в останніх п'яти начерках? Зробіть ескіз нового сайд-бару, зробіть кілька його копій і потім приклейте нову бічну панель на стару. Так, це дійсно просто.
• Щоб використовувати ескіз як підкладку для іншого, схожого шару, зробіть ксерокопію на 20% темніше, ніж сам ескіз, відрегулювати налаштування ксерокса.

Ще одна перевага ксерокса в тому, що маркер НЕ буде розмазувати роздруківку, на відміну від кулькової ручки. Так що, коли б у вас не з'явилася область ескізу, яку потрібно виділити або розфарбувати, зробіть спочатку кілька ксерокопій вашого начерку.

Увага!

Папером можна порізатися

Малюнок на ксерокопії найоригінальнішого ескізу - необхідно переглянути бічну панель

Фінальний ескіз. Зверніть увагу, бічна панель і її елемент темніше, ніж ксерокопія. Це зроблено спеціально, оскільки дає можливість розглядати ідеї в контексті решти дизайну.

Дизайн - це деталі

Використовуйте лінійку; особливо лінійку з палеткой. Такі лінійки зазвичай прозорі і на них нанесена сітка, яка дає можливість побачити, як лінія, яку ви креслите, співвідноситься з іншим ескізом.

техніка

Використовуйте лінійку і світло-сірий маркер, щоб намалювати підкладку для детального ескізу.

Навіщо?

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

Швидке створення рівномірних ліній за допомогою лінійки з палеткой і 30-процентного сірого маркера.

техніка

Після використання світло-сірого маркера для створення підкладки ескізу, візьміть кулькову ручку або чорний маркер, щоб довести його до кінця.

Навіщо?

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

Щоб акцентувати деякі області ескізу, використовуйте лінійку і 70-процентний сірий маркер.

техніка

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

Навіщо?

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

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

Розриваємо липку записку за допомогою лінійки

Розкажіть всю історію цілком

техніка

Намалюйте додаток в контексті, в якому воно буде використовуватися, або «вставте» його в девайс, на якому воно буде застосовуватися.

Навіщо?

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

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

Увага!

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

Ескіз ідеї для мобільного застосування в контексті того, де воно буде використовуватися

Викидайте зошит для малювання

техніка

Малюйте на папері формату 8.5 × 11 дюймів (NB! Не збігається з А4: http://en.wikipedia.org/wiki/Letter_(paper_size) ).

Навіщо?

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

Одна з багатьох стін, обвішаних скетчами, в нашому офісі

Чого ви чекаєте?

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

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

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

Зробіть це! Чи не загрузнемо в технологіях. Влаштуйте безлад. І розважайтеся!

Інструменти

Нижче дані посилання не деякі інструменти, які описані в цьому пості:

nbsp; nbsp; всім іншим, що має бути рівномірно розподілено. Це щось на зразок аналогового варіанту