Зміст
Коли я починав свою кар’єру, я був веб-дизайнером. Я працював у веб-дизайні чотири роки, починаючи з сайтів малого бізнесу і згодом переходячи до більших клієнтів. Я з’ясував, що мене зацікавив не графічний дизайн, ані робота на великі торгові марки. Мене більше цікавив візерунок пагінації, спосіб взаємодії людей із формами та такі речі, як сприйняття продуктивності, ніж візуальний дизайн веб-сторінки.
Коли я дивився науково-фантастичні фільми, я дивився на інтерфейси. І коли я грав у відеоігри, я спостерігав, як було розкладено меню. Якщо будь-яка з цих рис вам здається знайомою, ви також можете бути в душі дизайнером інтерфейсу.
Я кинув роботу в агентстві та відкрив власну компанію. На своїй сторінці в LinkedIn я спробував підсумувати свою нову мету у кар’єрі: зробити найкраще програмне забезпечення можливим. Минуло чотири роки з того часу, як я почав працювати фрілансером, і моя подорож не зупинилася. У наші дні я допомагаю керувати невеликою компанією з дизайну інтерфейсу Мононуклеоз. Нещодавно ми вітали нашого четвертого члена команди.
У цій статті я хочу описати, що таке бути дизайнером інтерфейсу користувача, зокрема, що саме передбачає робота, де знайти найкращі навчальні ресурси та як покращитися у своїй справі.
Що робить дизайнер UI?
Я вважаю, що загалом ви можете розділити роботу розробника інтерфейсу користувача на чотири категорії. Ви спілкуєтеся з клієнтом, досліджуєте, розробляєте та розробляєте прототип, а також спілкуєтесь із розробниками. Давайте розглянемо кожну з цих фаз детальніше.
Клієнтське спілкування
Спілкування з клієнтом полягає у розумінні проблеми клієнта. Мета полягає в тому, щоб впоратися з бізнесом вашого клієнта, тому початок проекту, як правило, становить багато розмов. Чудово не знати надто багато про домен вашого клієнта, коли ви починаєте - ви можете по-новому поглянути на їх бізнес, поки ви передбачаєте можливі дизайнерські рішення.
Щоб бути хорошим дизайнером інтерфейсу, ви повинні мати можливість врешті-решт думати разом із бізнесом вашого клієнта. Наприклад, ваш клієнт може бути в авіації. Працюючи на них, врешті-решт ви зробите досить обізнаним у цій галузі. Отже, порадою для власного щастя тут є розумний вибір галузей, в яких ви працюєте, щоб ви в кінцевому підсумку не стали експертом у тому, що вас не турбує чи не цікавить.
Під час проекту спілкування не припиняється. Як дизайнер, ви будете постійно представляти свої роботи. У нашій компанії ми віддалена команда, тому у нас не так багато особистих зустрічей. Натомість ми активно використовуємо спільний доступ до екрану за допомогою відеоконференцій. Інструменти спілкування, такі як Skype та Slack, використовуються щодня.
Корисно поєднувати синхронні та асинхронні методи спілкування. Дзвінок чудовий, якщо вам швидко потрібно багато інформації, але ви повинні бути поруч одночасно. Ми вважаємо Slack своїм «віртуальним охолоджувачем води» і використовуємо Basecamp для управління складними дизайнерськими проектами. Коли ми розробляємо прототипи за допомогою HTML і CSS, ми використовуємо GitHub Issues для безпосереднього обговорення коду.
Дослідження
Окрім спілкування з клієнтом, ви будете проводити багато досліджень. Це може включати польові дослідження, семінари з клієнтом, аналіз конкуренції або визначення стратегії - по суті, майже будь-що, що допоможе вам зрозуміти суть проблеми.
Дослідження - це те, що інформує про ваш вибір дизайну. Це стаття, яку ви колись прочитали, або та нова річ, яку Apple щойно випустила. Коли настає час пояснити, чому ви зробили певний вибір дизайну, ваші дослідження підтримують вас.
Дослідження можуть бути дуже широкими. Я часто тестую нові пристрої для дослідницьких цілей або підписуюсь на новий веб-додаток для вивчення його інтерфейсу користувача.
Дизайн та прототипування
Як дизайнер, ви, швидше за все, витратите більшу частину часу на розробку та створення прототипів. Проект дизайну інтерфейсу може рухатися вперед будь-якою кількістю шляхів, від ескізів, до детального дизайну до кодування.
Метод, який ви використовуєте, багато в чому залежить від типу проекту. Що ви проектуєте? Це веб-сайт, або ви б скоріше назвали його додатком? Чи використовує вона рідну технологію? Це редизайн чи ви починаєте з нуля?
У нашій компанії немає фіксованого процесу, але більшість проектів дотримуються тих самих грубих порядків: вони починаються з ескізів та каркасів, переходять до детального візуального дизайну та дизайну взаємодії, а закінчуються прототипом.
Як дизайнери, ми витрачаємо багато часу на роздуми про наші інструменти. Хоча чудові інструменти важливі, вони не є найголовнішими. Вміння грамотно користуватися Adobe Creative Suite та такими програмами, як Sketch, еквівалентно вмінню використовувати олівець для малювання або пензлик для малювання. Вам ще потрібно зробити розпис.
З огляду на це, здоровий інтерес до інструментів - це добре. Я люблю пробувати нові інструменти, які можуть допомогти мені бути більш продуктивним. Мій улюблений інструмент редагування векторів - Illustrator, але більшість моїх робіт з візуального дизайну виконуються в Sketch в наші дні. Інші члени команди перейшли на новіші інструменти, такі як Affinity Designer.
Інструменти - це дуже особистий вибір. Поки ми можемо легко співпрацювати, кожен вільний вибирати свій. Щоб спростити спілкування з клієнтами про наш дизайн, ми робимо прототипи за допомогою InVision. Однак для вдосконалення прототипування ми використовуємо HTML і CSS. Все, що вам потрібно, залежить від роботи, яку ви хочете з ним виконати.
Спілкування розробника
Часто забутою частиною роботи дизайнера інтерфейсу є спілкування розробника. У наші дні ви не можете уникнути, просто надіславши свої проекти розробникам і сподіваючись, що вони будуть правильно реалізовані. Найкращі дизайнери знають, що проблема полягає не у створенні дизайну, а в передачі його - не лише зацікавленим сторонам, які мають дати свою згоду, але й розробникам, які повинні його реалізувати.
Повідомлення дизайну буває різним: детальні технічні характеристики, надання активів, спільний перегляд дизайну. Те, що має сенс надавати в кожному випадку, багато в чому залежить від того, чи є проект власним або веб-додатком.
Традиційний підхід полягає у передачі активів поряд із дизайном екранів. Екранні конструкції можна використовувати, щоб побачити, як буде виглядати дизайн в цілому, тоді як об’єкти - це готові до використання PNG та SVG піктограм, тому розробникам не доводиться мати справу з графічним редактором.
У нашій компанії ми є прихильниками більш ніж цього. Ми використовуємо керівництво по стилю компонентів, щоб допомогти зберегти узгодженість у нашому дизайні. Коли ми маємо справу з веб-проектом, ми пропонуємо детальні набори HTML та CSS, документовані поштучно, готові до впровадження. Я вважаю, що наявність дизайнерського очей на кожному етапі розробки програмного забезпечення - це єдиний спосіб досягти своєї мети - створити програмне забезпечення світового класу.
Інтернет проти власних програм
Коли ви розробляєте власний додаток для платформи (наприклад, iOS або Android), ви, як правило, дотримуєтесь певних вказівок. Коли ви розробляєте веб-сторінки, не так вже й багато вказівок. Зазвичай трапляється так, що ваш клієнт має набір графічних вказівок для свого бренду, які визначають, як повинні виглядати речі.
Однак ці рекомендації, як правило, пристосовані до маркетингових веб-сайтів, і те, що там є, не завжди призводить до прийняття належних рішень щодо користувацького інтерфейсу. Шрифти, як правило, вибирають з маркетингових міркувань, а не з розбірливості. Кольори можуть бути жирними та вражаючими, що працює в рекламній кампанії, але не в програмі, яку ви використовуєте щодня. Ці інструкції повинні бути інтерпретовані.
Інтернет-інструкцій щодо Інтернету небагато. Можна стверджувати, що Інтернет - це плавильний казан різних стилів. Якщо ви робите щось, що більше схоже на додаток, ніж на веб-сайт, вам слід знати про широко використовувані фреймворки, такі як Bootstrap та ZURB Foundation. Фреймворк починає визначати, як все повинно виглядати, тому що ви не хочете винаходити колесо заново. І це, мабуть, добре.
У нашій компанії ми любимо використовувати Bootstrap. Він забезпечує розумні розміри за замовчуванням для загальних елементів інтерфейсу, таких як кнопки, таблиці даних та модалі.
У веб-дизайні вас більше обмежують технічні можливості Інтернету. Раніше було так, що на веб-сайті буде важко здійснити прості візуальні розквіти, такі як закруглені кути. Ці дні давно минули - тепер ви можете малювати користувальницькі інтерфейси з великою кількістю тіней, переходів, анімації та навіть 3D.
Як дизайнеру, набагато реалістичніше взяти під контроль процес і дизайн у браузері. Я не бачив, щоб багато дизайнерів інтерфейсу користувались програмуванням інтерфейсу власного додатка, але дизайнер, який робить HTML і CSS веб-програми, є звичайним явищем. Якщо ви зможете кодувати власні дизайни, ви матимете перевагу над своїми некодуючими колегами, і для мене це єдиний спосіб по-справжньому зрозуміти, як працює Інтернет.
Веб-обмеження
Незабаром ви зрозумієте, що не всі цікаві трюки, які ви вивчаєте, підтримуються у кожному браузері, і це реальність дизайну для Інтернету. Добре дотримуватися відомих принципів, таких як поступове вдосконалення, коли ви завантажуєте розширений вміст, коли це можливо, але також думаєте про те, як вміст погіршується.
Останнім часом популярним стає «різання гірчиці». За заступництвом веб-команди BBC, це передбачає розмежування «хороших» і «поганих» браузерів та надання обмеженого досвіду для «поганих» браузерів. Однак насправді це працює лише для тематичних сайтів.
Що стосується досвіду, подібного до додатків, багато людей обмежують підтримку лише кількома провідними браузерами, щоб полегшити розробку. На жаль, це повертає нас до ситуації 1996 року, коли для перегляду вмісту потрібен певний браузер.
Поліпшення набору навичок
Отже, як вам бути в курсі швидко розвивається веб-індустрії та вдосконалювати свій набір навичок? Давайте розглянемо декілька різних методів підвищення кваліфікації ...
Знання платформи
Основною частиною арсеналу дизайнера є знання платформи. Ви повинні знати про різні операційні системи та про те, як люди ними користуються. Як дизайнери, ми, як правило, використовуємо Mac, але тоді легко забути, що більшість людей там використовують ящики Windows, щоб зробити свою роботу.
Я відчуваю, що ти можеш по-справжньому щось зрозуміти, якщо ти сам це використовуєш. Я вважаю за краще використовувати свій Mac для дизайну, але витрачаю багато часу, наздоганяючи розвиток різних інших платформ. У мене на Mac встановлено кілька копій Windows як віртуальних машин. Я був зайнятий тестуванням нових збірок Windows 10 за допомогою програми Microsoft Insider, щоб перевірити різні зміни в інтерфейсі користувача.
Я також регулярно купую нове обладнання, щоб перевірити, як воно працює. Я купив Apple Watch лише для тестування платформи. Потім я продав його, бо відчував, що це не так сильно додає мого життя.
Крім цього, Інтернет можна розглядати як власну операційну систему. Він постійно розвивається, щотижня до кожного постачальника браузерів додаються нові функції. Надзвичайно варто знати про технічні аспекти браузерів, особливо щодо CSS та графічних можливостей. Вам потрібно знати, що таке SVG та WebGL, і як можна використовувати API веб-анімації.
Кожна платформа еволюціонує з часом, і як розробник інтерфейсу користувача, ваше завдання залишатися в курсі подій. Зрештою, все, що ви проектуєте, живе не ізольовано, а є частиною більшої екосистеми програмного забезпечення.
Поверніться до основ
Те, з чим ми боремося сьогодні, не настільки відрізняється від того, з чим боролися 20 років тому. У книгах є маса хороших порад. Спробуйте оборонний дизайн для Інтернету Джейсона Фріда та Метью Ліндермана та «Не змушуй мене думати» Стіва Круга для початку.
Якщо ви не знаєте таких понять, як модальність та поступливість, вам потрібно прочитати. Ви повинні мати можливість пояснити, що таке закон Фіттса. Гештальт-закон близькості? Це хліб та масло дизайну інтерфейсу.
Надихайтеся іграми та фільмами
Як дизайнер інтерфейсу, я черпаю з інших джерел натхнення, щоб зробити свою роботу. Багато натхнення я знаходжу в іграх. Деякі ігри дуже складні, і дизайнерам інтерфейсу довелося вирішувати ті ж складні проблеми інтерфейсу, що і дизайнер інтерфейсу, який працює над бізнес-проектами.
Ігри також можуть означати тенденції. Мінімалізм, який міститься в меню ралі Коліна Макрея, нагадує мені напрямок iOS7. Певним чином, анімаційний дизайн інтерфейсу користувача, який зараз є модним, з’являвся в іграх багато років тому. Перехід від скеуоморфізму до простого, функціонального інтерфейсу та „плоского дизайну” був очевидний і в іграх. Порівняйте 2006 Oblivion із Skyrim 2011 року. Обидві ігри є RPG в одній серії, але різниця вражає.
Футуристичні інтерфейси у таких фільмах, як "Залізна людина", також надихнули мене. Вони не є прикладами для використання, але вони змушують мене більше думати про обчислення в цілому. Ми хочемо майбутнього екранів, чи ми хочемо, щоб екрани зникли? Це, мабуть, гарне питання, щоб поставити його в пабі, наповненому дизайнерами.
Ви ростете як дизайнер завдяки наполегливій праці, наполегливості, спілкуванню з однолітками та жахливому читанню. Близько року тому я прочитав у "Нью-Йорк Таймс" статтю про людей, яким вже виповнилося 80, які продовжують вдосконалювати своє ремесло. Я відчуваю, що тільки починаю. Що з вами?
