Покращуємо свої професійні навички

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

Тому що вивчення дизайнів — це не просто перегляд.

Це повноцінна робота

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

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

Це регулярна робота

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

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

Це цілеспрямована робота

Сидіти годинами на Dribbble або Behance, розглядаючи дизайни до болю в очах – безглузда трата часу. У вас повинна бути мета. Зрозуміло, що цілі новачків і досвідчених дизайнерів відрізняються. Запитайте себе: “Що у мене не виходить так, як хотілося б? Над чим мені варто попрацювати?” Можна написати свої цілі на стікерах або на дошці, щоб пам’ятати про них і не відволікатися на те, що до цих цілей не відноситься.

Розробіть план дій — на найближчий час і на більш віддалений термін. Наприклад, комусь зручно 5 днів на тиждень працювати з дизайнами по 30 хвилин і 1 раз в тиждень — 2 години. Хтось може виділити більше або менше часу. Головне — вирішити, що саме ви будете в цей час робити і навіщо, і тоді навіть 15 хвилин в день принесуть користь.

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

Це аналітична робота

Дизайнерське бачення формується під час мислення, а не запам’ятовування прийомів або технік. Головна мета — навчитися аналізувати візуал і функціональний потенціал дизайну. Що для цього потрібно?

Виберіть 3-5 дизайнів, які вам особливо сподобалися. Чому ви їх помітили? Що вас зачепило? Візьміть один для більш ретельного розбору. Ваше завдання — зрозуміти, чому робота зроблена так чи інакше. Чи виконує вона своє призначення? У чому її основні переваги? Якими візуальними прийомами та інструментами користувався дизайнер, щоб досягти цілей? Чому ця робота в топі?

Аналіз проводиться за такими параметрами:

• Адекватність теми завдання і її втілення. Як ви вважаєте, чи відповідає візуал заявленій тематиці? В якому стилі виконана робота? Чому?

• Візуальна архітектура. Чи добре структурований дизайн? Чим обумовлено саме таке композиційне рішення? Чи зрозуміла вам з першого погляду логіка розміщення контенту?

• Досягнення цілей користувачем. Станьте на хвилинку на місце користувача. Відразу ви зрозуміли, що вам пропонують? Хотілося б вам придбати це (прийняти пропозицію)? Чи легко це зробити?

• Колірна палітра. Чому вибрана така, а не інша палітра кольорів? Чи викликає вона потрібні емоції?

• Навігація. Чи виглядає зручною і логічною навігація? Чи зрозуміло відразу де що знаходиться?

• Функціональність. Які функції використовуються в розглянутому прикладі? Як вирішуються завдання користувачів?

• Контент. Чи виглядає контент зрозумілим? Чи простежується ієрархія елементів? Як групуються і відокремлюються один від одного смислові блоки? Чи є відчуття чистоти і простору або, навпаки, завантаженості?

• Акценти. На чому зроблені акценти? За допомогою чого це досягнуто? (Колір, форма, масштаб, анімація та ін.)

• Графіка. Які графічні елементи використовуються в даній роботі? (Лінії, форми, текстури, кольорові плями і ін.) Чим, на вашу думку, обумовлений цей вибір?

• Іконки. Як виконані іконки? Чи зрозуміло їх значення з першого погляду? Чи відповідають вони загальному стилю?

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

• Шрифти. Які використовуються шрифти і яка їхня ієрархія? Чи зручно читати текст, особливо дрібний?

• СТА. Як вирішений дизайн блоку СТА? Чому саме так? Чи хочеться вам натиснути на кнопку?

• Унікальність. Чи є в даній роботі щось особливе, що відрізняє її від інших? (Раз ви її помітили і взяли для аналізу, напевно, щось є!) Визначте, в чому полягає ця приваблива особливість.

Аналізуючи, дивіться на дизайн очима користувача, а не тільки дизайнера.

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

Це копіювання дизайну

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

Це копіювання стилю

Це тренування складніше, ніж копіювання дизайну, але і користі від неї набагато більше. Потрібно зробити дизайн в стилі однієї з трендових робіт, але для іншої задачі. Стилів у веб-дизайні багато, часто використовуються їх різні комбінації. Не обов’язково визначати, який перед вами стиль, головне — зрозуміти принципи візуалізації, які цей стиль використовує. Тому для початку проводиться загальний аналіз. Вивчаємо:

• структуру макета
• кольорову гаму
• кількість і рівень графіки

Потім робимо більш детальний аналіз, використовуючи основні візуальні критерії з пункту 4. Розуміння принципів допоможе вам легко створити свій дизайн-макет в заданій стилістиці. За допомогою таких тренувань ви навчитеся швидко “схоплювати суть” і витрачати на копіювання стилю мінімум часу.

Це колекціонування

Створюйте папки для зберігання корисних матеріалів. Наприклад, можна розсортувати папки за типами блоків сайтів: “Головні екрани”, “Галереї”, “Контакти”, “Картки товарів”, “Блоки з іконками” та ін. Можна збирати дизайни за темами, використовуючи Pinterest, користуватися букмарк-менеджерами на зразок Toby, щоб організовувати закладки в колекції.

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

Це розширення свідомості

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

Корисні ресурси для регулярних переглядів, матеріали для занять, пошуку ідей і натхнення:

• awwwards.com
• are.na
• csswinner.com
• htmlinspiration.com
• cssdesignawards.com
• muz.li
• thefwa.com
• siteinspire.com
• hoodzpahdesign.com
• invisiblecreature.com
• abduzeedo.com
• designspiration.com
• superdesigners.c
• snazzymaps.com
• typewolf.com/adobe-fonts
• heycusp.com/case_study/
• wordmark.it
• incredibletypes.com
• typographicposters.com
• lubalincenter.cooper.edu
• eyeondesign.aiga.org
• bookcoverarchive.com
• klim.co.nz
• tdc.org
• logogeek.uk/logo-history
• pexels.com
• telegraf.design
• magculture.com
• stackmagazines.com
• meireundmeire.com
• behance.net/gallery
• sagmeisterwalsh.com
• www.neue.no
• stockholmdesignlab.se
• bureauborsche.com
• stereo-buro.com
• bpando.org
• experimentaljetset.nl
• wallpaper.com/design
• thegentlewoman.co.uk
• offscreenmag.com
• www.slanted.de
• the-brandidentity.com