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

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

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

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

Поведение внешнего интерфейса

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

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

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

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

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

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

Если вы сможете понять это разделение, это вдохнет сознательное усилие в проектную работу. Это также заставит дизайнеров UX motion подумать, сколько работы уходит на анимацию интерфейса..

Отзывчивые Методы

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

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

Чтобы увидеть, как точки останова работают на реальных сайтах, посетите сайт Media Queries..

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

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

Думайте Модульный С Проектами

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

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

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

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

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

Понимание Retina изображений и SVG

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

Я очень рекомендую этот пост журнала Smashing Magazine, если вы хотите узнать больше о рабочих процессах дизайна сетчатки. Retinize Это бесплатная коллекция действий Photoshop, которая может автоматически создавать версии сетчатки ваших активов.

Большинство дизайнеров уже знают, чтобы поддержать @ 2x изображения, но более новые устройства iPhone 6+ имеют @ 3x разрешения. Однако некоторые проекты не заботятся о размере изображения в 3 раза, поэтому поговорите с руководителем своего проекта, прежде чем завершать работу над активами..

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

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

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

Понять доступность

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

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

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

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

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

В заключение

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

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

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

• Как эффективно общаться с разработчиками (Smashingmagazine.com)
• Помогите дизайнерам и разработчикам научиться понимать друг друга (Uie.com)
• Обучение кодированию дает вам преимущества как UX Designer (Jessicaivins.net)