Як прокачати UI навички

Вступ

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

Отже, я намагатимуся коротко описати, як це було в мене і як я досі працюю над покращенням своїх UI навичок. На початку своєї кар’єри, від своїх менторів я отримав найкориснішу пораду – копіюй усе, що тобі подобається. Сподобався шот на дрібблі? Копіюй. Сподобався проект на біхансі? Копіюй його повністю, до останнього пікселя. Сподобалася шрифтова пара? Сміливо бери і повторюй! Але на початку, у мене був величезний ступор, я не міг просто брати і тупо змальовувати, так як мені хотілося додати власну родзинку, але часто, ця родзинка було, м’яко кажучи, «гнилою». До речі, цю проблему я вирішив прочитанням книги: «Кради як художник» Остін Клеон.

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

1.Наглядність
2.Копіювання
3.Своя ідея

Наглядність

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

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

  1. Типографіка – спробуй зрозуміти, чому саме такий шрифт обрав автор проекту. Подивися на інтерлініяж, спробуй відчути чи приємно тобі читати текст з таким інтерлініяжем або все ж таки можна щось покращити? Можливо, шрифти замаленькі або завеликі. Нехай всередині тебе буде діалог з самим собою.
  2. Відстань між блоками – подивися на те, як автор розмістив проміжки на блоках. Чи однакові вони в кожному блоці? Чи виникає думка, що відстані різні?
  3. Цвітові рішення – чи відповідає один колір іншому? Чи можна змінити кольорову гамму, щоб проект виглядав трохи краще?
  4. Розміщення контенту – чи проставлені акценти в композиції? Зверни увагу на те, що привертає твою увагу при перегляді інтерфейсу. Куди ти подивився в першу чергу, чому? А правильно зробив автор, коли розставив акценти саме таким чином?

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

Копіювання

Заголовок цього блоку говорить сам за себе. Постав собі конкретну мету – зробити 100 копій за місяць. Повторюй тільки найкращі роботи. Поділи 100 копій на 3 напрямки, 33 на веб, 33 на мобайл, 33 на малювання іконок. Не думай, просто копіюй. Запевняю тебе, коли ти зробиш 100 копій, тобі буде значно легше. Ти просто будеш доставати потрібний референс з власної голови і вставляти його в макет. АЛЕ є одне АЛЕ! Ці роботи не можна додавати собі в портфоліо, як би тобі не хотілося вивести на дрібл чи біханс цю роботу, цього робити не можна в жодному випадку! Якщо вже прямо не можеш, про свою ідею і як її розвинути я напишу нижче. На додаток, для початку раджу обрати одну тематику (E-commerce, Food або Medical), і (Web, App або Icons) це дасть кумулятивний ефект для твого майбутнього проекту.

Власна ідея

Це найцікавіша частина. Отже, після того, як ти вже скопіював принаймні 10-20 робіт, ти можеш спробувати зробити свою роботу. Надихнися красивими роботами, подивися цікаві референси на https://codepen.io і сміливо створюй свій унікальний дизайн.

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

Не бійся спробувати додати щось таке, чого нема, але перед цим подумай, потрібен тут цей елемент чи він взагалі не вписується в загальну картину, а ти намагаєшся його туди вставити. Для початку я, звичайно, не радив би створювати свої паттерни, бо це не найкращий спосіб урізноманітнити інтерфейс ( про це в моїй статті https://www.webtune.com.ua/blog/ux-ui-patterny-i-yih-velychezne-znachennya-v-interfejsah/), але в майбутніх проектах можеш сміливо спробувати впровадити щось своє.

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

Підбірка сайтів

Тобі потрібно переглядати масу дизайнів. Щодня мінімум по 20 сайтів з цього списку:

  • https://www.behance.net/
  • https://www.pinterest.com/
  • https://www.awwwards.com/
  • https://www.cssdesignawards.com/
  • https://aic.ru/3/
  • https://cpeople.ru/portfolio/
  • https://cetis.ru/projects
  • https://castle.co/portfolio
  • http://www.justbenice.ru/works
  • https://nimax.ru/web/
  • https://brander.ua/portfolio
  • http://www.webdesign-inspiration.com/
  • https://www.siteinspire.com/
  • https://onepagelove.com/
  • http://www.designmadeingermany.de/sites-we-like/
  • https://topdesigninspiration.com/
  • https://cssnectar.com/
  • https://www.uplabs.com/
  • http://freebbble.com/
  • https://ui8.net/

З повагою, автор: Павло Жидких UX/UI Дизайнер