Концепции веб-разработки, которые должны понимать все веб-дизайнеры

Многое можно сказать о разделить найдено между дизайнерами и разработчиками. Конечно, есть много гибридов дизайнеров / разработчиков, которые могут понять обе стороны медали, но их мало и далеко друг от друга.

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

Следующие темы – мое личное мнение о жизненно важных идеях веб-разработки, которые должны понимать все дизайнеры. Как дизайнер / разработчик, я знаю, насколько запутанным может быть изучение обеих областей. Но учиться всегда стоит усилий, потому что ясное понимание улучшает общение и делает дизайнера гораздо более ценным для творческой команды.

Читайте также: 10 разработчиков привычек программирования должны принять

Поведение внешнего интерфейса
Считается, что веб-дизайнеры обладают навыками внешнего интерфейса вместе со своими дизайнерскими талантами. Это горячо обсуждаемая темаВ основном потому, что нет правильного ответа.

Дизайнеры должны делать то, что им удобно. Если это означает только выполнение визуального дизайна, пусть будет так. Однако краткое понимание технологий веб-интерфейса может сделать того же дизайнера более интуитивным при создании ресурсов для разработчиков.

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

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

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

CSS сделан для стилизации сайта. Он в основном статичен, кроме CSS-анимации, и CSS создает большинство визуальных элементов на странице. Большинство динамических функций создаются с помощью JavaScript.

Если вы сможете понять это разделение, это вдохнет сознательное усилие в проектную работу. Это также заставит дизайнеров UX motion подумать, сколько работы уходит на анимация интерфейса,
Отзывчивые Методы
Каждый веб-дизайнер должен хотя бы знать термин адаптивный дизайн. Это позволяет веб-сайтам адаптироваться к разным размерам экрана, каждому из которых принадлежит свой макет. Размеры устройства при применении нового макета определяются точками останова, добавляемыми в (один из) CSS-файлов.

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

Чтобы увидеть, как точки останова работают на реальных сайтах, проверьте Медиа-запросы Веб-сайт.
Ваша работа как дизайнера заключается в рассмотрении того, как каждая точка останова может влиять на макет. Вам может быть поручено создать несколько композиций, каждый из которых соответствует разным размерам экрана.

Как только вы поймете, что точка останова CSS определяет условия, когда меняется макет, вам будет гораздо проще доставить эти ресурсы в команду разработчиков.
Думайте Модульный С Проектами
Разработчики всегда хотят максимально использовать код, так как этот подход делает разработку менее многословной и сокращает размеры файлов – фактически это важный метод оптимизации кода.

Рекомендуемое чтение: 10 причин, почему вам нужна оптимизация кода

Модульная конструкция описывает метод создания веб-сайтов из «модулей», которые можно повторно использовать с течением времени. Подумайте кнопки, формы ввода, стили заголовков или цитаты с причудливыми стилями.

Если вы разрабатываете элементы модульно, разработчикам становится проще кодировать макет с помощью повторно используемых классов CSS. Всегда полезно подумать о том, где можно разумно использовать одни и те же цвета, текстуры и элементы страницы, однако вы должны быть осторожны, чтобы не повредить общей эстетике.

Еще лучше, если вы аннотируете, какие элементы вы скопировали в разные макеты, чтобы разработчики могли разметить эти части сайта с помощью повторяющегося кода, что делает разработку быстрее и проще.

Модульная конструкция относится к атомный дизайнОба подхода скорее ориентированы на разработчиков. Однако визуализация может помочь вам понять, как работает код, поэтому, если вы изо всех сил пытаетесь визуализировать модульный дизайн, посмотрите эта почта чтобы увидеть несколько примеров.
Понимание изображений Retina и SVG
Обычно работа дизайнера состоит в том, чтобы готовить изображения, делать любые необходимые фотографии и создавать значки с нуля. Это означает, что дизайнеры несут полную ответственность за предоставление визуальных ресурсов, которые разработчики в конечном итоге кодируют в макет. Вот почему важно понимать размеры сетчатки и передавать поддерживаемые сетчаткой ресурсы разработчикам вместе с последними макетами.

Я очень рекомендую это Smashing Magazine сообщение если вы хотите узнать больше о рабочих процессах дизайна сетчатки. Retinize It это бесплатная коллекция действий Photoshop, которая может автоматически создавать сетчатые версии ваших активов.
Большинство дизайнеров уже знают о поддержке изображений @ 2x, но более новые устройства iPhone 6+ имеют разрешение @ 3x. Однако некоторые проекты не беспокоятся о размере изображения в 3 раза, поэтому поговорите с руководителем своего проекта, прежде чем завершать какие-либо операции.

И последнее, что нужно учитывать, – это продвижение SVG в сети. Все современные браузеры поддержка SVG который является векторным форматом изображения. Это означает, что значки SVG будут автоматически масштабироваться без потери качества, поэтому вам не понадобятся сетчатые ресурсы для SVG-графики.
Однако не все творческие коллективы готовы использовать SVG для веб-дизайна. Они наверняка поддерживаются браузерами, но в некоторых случаях их также сложно реализовать. Вот почему общение жизненно важно для успешных отношений дизайнер / разработчик.

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

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

Рекомендуемое чтение: Руководство дизайнера по основам веб-дизайна доступности

Недавно я подробно описал пост прогрессивного улучшения, так как это мой предпочтительный метод разработки. Прогрессивное улучшение начинается с самых базовых функций, а затем переходит к более «расширенным» функциям.

Изящная деградация Это противоположный подход, при котором все основные функции сначала разрабатываются, затем разработчик решает, как обращаться с этими функциями, если пользователь не поддерживает JavaScript или CSS.

Маловероятно, что дизайнера попросят сделать макеты для любой из этих ситуаций. Но важно, чтобы дизайнеры понимали эти термины и что они означают, потому что они влияют на процесс разработки. Это особенно актуально для проектов, где доступность является большой проблемой.
В заключение
Некоторые темы я пропустил, потому что считаю их необязательными. Контроль версий, обработка ошибок и анимация JavaScript – это несколько более сложных тем, в которые дизайнеры могут захотеть углубиться.

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

Если вы ищете больше похожего контента, посмотрите эти сообщения: