Поради для дизайнерів, які не кодять

Мет Сандерс починав як дизайнер і кілька років тому зайнявся front-end розробкою. Він пропонує декілька порад для дизайнерів, які не кодять.

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

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

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

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

Поради для дизайнерів

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

Відмінності між веб і вашою дизайнерською програмою

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

Багато дизайнерів також люблять використовувати фільтри Photoshop для досягнення ефектів фону. Вони можуть дійсно допомогти візуально, але намагайтеся думати ширше і переконайтеся, що вони можуть бути відокремлені у вигляді окремих файлів для використання в якості фону, і що ви не створюєте щось складне, що не можна буде вбудувати без особливих зусиль. Фільтри Photoshop (наприклад, multiply, linear burn т.д.) не поширюються на Інтернет.

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

Читайте також: Чи повинен веб-дизайнер вміти верстати?

Адаптивний дизайн – це більше, ніж просто «компьютер і мобільний»

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

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

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

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

Як каже Бред Фрост, коли мова йде про атомарний дизайн, «ми не створюємо сторінки, ми створюємо систему компонентів».

Пояснення інтерактивності

Це досить складна річ, тому що Photoshop і Illustrator, в кінцевому рахунку – статичні. На відміну від розробки дизайну «у браузері», де ви маєте доступ до рідного відгуку, CSS-анімації і реальних елементів сторінки (таких як кнопки і прапорці), у Photoshop вам потрібен ретельний макет того, як щось може виглядати в початковому стані, при наведенні на нього, при натисканні, при вимкненні і так далі.

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

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

Читайте також: Підготовка макету для верстальника.

Але це тільки наполовину вирішує проблему. Що робити, якщо ми хочемо переходу між станами – як нам його показати? Наприклад, прапорець може стати іншого кольору, коли ви наводите на нього курсор – але це подвійний «оберт» чи затухання? Або він робить щось зовсім інше? Як у наведеному вище прикладі з’являються підказки? Вони висковзають знизу, чи зверху? Чи просто з’являються?

Починайте з контенту!

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

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

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

Співпрацуйте з розробником

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

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

Першоджерело — «Tips for Designers Who Don’t Code».