Концепції веб-розробки Всі веб-дизайнери повинні розуміти

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

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

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

Поведінка Frontend Code

Веб-дизайнерам часто здається, що вони володіють навичками інтерфейсу разом зі своїми талантами дизайну. Це гаряче обговорювана тема, головним чином тому, що є немає правильної відповіді.

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

Я вважаю, що кожен дизайнер повинен хоча б зрозуміти три основні мови розвитку frontend (HTML, CSS і JS) разом з тим, як вони використовуються. Наприклад, більшість випадаючих меню залежать від JavaScript, але існують також альтернативи лише для CSS.

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

Це можливо без навчання писати єдиний рядок коду.

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

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

Адаптивні методи

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

Точки зупинки задаються a певної ширини пікселів (та / або іноді висота), або мінімальна або максимальна, при якій макет адаптується до розміру екрана. Таким чином, адаптивний макет буде виглядати інакше на моніторі 1080px, ніж на смартфоні на 320px.

Щоб дізнатися, як робочі точки працюють на реальних сайтах, ознайомтеся з веб-сайтом Media Queries.

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

Після того, як ви зрозумієте, що точка розриву CSS визначає умови, коли змінюється розташування, вам буде набагато легше доставити ці активи до команди розробників.

Подумайте про модульні конструкції

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

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

Якщо ви елементи дизайну модульно, розробникам стає легше кодувати макет багаторазові класи CSS. Це завжди гарна ідея подумати про те, де ви можете розумно повторне використання ті ж кольори, текстури та елементи сторінки, однак потрібно бути розумним не шкодити загальній естетиці.

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

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

Зрозумійте зображення сітківки та SVG

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

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

Більшість дизайнерів вже знають підтримку @ 2x зображення, але нові пристрої iPhone 6+ є @ 3x роздільна здатність. Проте деякі проекти не турбують розміри зображень у форматі @ 3x, тому поговоріть з вашим керівником проекту перед тим, як завершити створення будь-яких активів.

Останнє, що потрібно розглянути, це просування SVG в Інтернеті. Всі сучасні браузери підтримують SVG, який є векторний формат зображення. Це означає, що іконки SVG будуть автоматично масштабувати без втрати якості, таким чином, для графіки SVG не потрібні засоби для сітківки.

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

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

Зрозумійте доступність

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

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

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

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

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

У закритті

Є деякі теми, які я пропустив, оскільки вважаю їх необов'язковими. Керування версіями, обробка помилок і анімація JavaScript є кілька більш складних тем, на які можуть захотіти дизайнери.

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

Якщо ви шукаєте більше відповідного вмісту, подивіться на ці повідомлення:

• Як ефективно спілкуватися з розробниками (smashingmagazine.com)
• Допоможіть дизайнерам і розробникам навчитися розуміти один одного (uie.com)
• Навчання коду дає вам переваги як UX Designer (jessicaivins.net)