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

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

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

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

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

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

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

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

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

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

Сидіти годинами на 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
Source — prodesign

Види прототипів

Mockups, високодеталізованні UX прототипи, як вони виглядають.

Путівник кольором

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

Як побудувати карту досвіду взаємодії

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

Плагіни Figma, які заслуговують вашої уваги

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

10 кращих інструментів дизайну UI у 2022 році

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