Дизайн VS Code - Почему они должны идти рука об руку?

Должны ли дизайнеры сосредотачиваться только на художественном оформлении веб-сайта? Предполагается, что разработчики только умеют кодировать? В чем важность Front-end разработки в Drupal? Давайте найдем ответы на все ваши вопросы в этой статье.

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

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

Но прежде всего давайте рассмотрим основы на примере.

Дизайн против кодирования: сходство с различием

Писателю нужно представить и завершить свои мысли, прежде чем писать их. Никто не берет дневник, не заходит в блог или социальную сеть и не начинает писать сразу. Поэтому вся процедура называется сочинением. И да, написание электронного письма в Gmail также называется «составить». Итак, почему мы говорим о писателях, композициях и всем остальном. Давайте перейдем к делу. В этом случае воображение - это ваш замысел, а записывание мыслей - это развитие. Надеюсь, теперь у вас получилось лучше; Давайте перейдем к другой стороне этой темы.

Следует ли дизайнерам изучать код, а разработчикам - UI / UX?

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

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

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

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

1. Больше контроля над внешним видом продукта: в основном это означает, что, когда разработчик знает, как работает анализ проекта и какой процесс проектирования задействован, он может адаптировать эти дизайнерские идеи и иметь больший контроль над конечным продуктом. и, как следствие, более быстрая доставка продукта.
2. Поймите пользователей и примените это к дизайну: когда разработчик понимает продукт с точки зрения пользователя, это дает ему / ему огромные возможности для создания того, что пользователям действительно нужно, а также желать этого. Например, он поймет, как пользователи отреагируют на разную типографику, разные стили кнопок, цветовые схемы и т. Д.
3. Адаптация дизайна. Не менее важно, чтобы дизайнеры знали код. Когда он / она знает, как будет структурирован спроектированный продукт в процессе разработки, он / она может в идеале улучшить дизайн и сделать его более эффективным, тем самым сократив время и усилия, затрачиваемые разработчиками.

Изучение последствий наличия только основного опыта с примерами

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

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

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

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

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

Когда начать?

Начать работу - всегда хорошая идея. Для дизайнеров основы, которые нужно изучить, - это HTML, CSS и немного JS / jQuery. Существует множество платформ для онлайн-обучения и веб-сайтов с живыми инструментами IDE, где вы можете практиковаться и учиться.

HTML: На первом месте базовая структура любого дизайна, и это код любого продукта.
JS / jQuery: с помощью этих
Песочница: Живой инструмент для игры с вашим кодом
CSS / SCSS : стилизация структуры - творческий процесс, и вы можете добиться этого с помощью CSS / SCSS.
W3Schools: простая платформа для онлайн-обучения, с которой можно начать
Codrops (Tympanus): обширная библиотека с дизайном и умом разработчика на одной платформе.

Для разработчиков: вы можете начать, следуя лучшим практикам в отношении UI / UX:
Behance: полный набор дизайнов для профессионального портфолио и вдохновения
Dribbble: идеи для публикации и вдохновения
Музли: блоги, вдохновение, идеи
Средний: блоги о любой области (почти), передовых методах и учебных пособиях.
Awwwards: веб-сайты, номинированные на лучший дизайн и победители, которые вдохновляют
XD / Figma / Sketch: инструменты для создания макетов, каркасов для UI / UX

Дизайнерам

Разработчикам

Front-end разработка в Drupal

Drupal 8 как CMS - это очень удобный для UI / UX-дизайнеров фреймворк для управления контентом, потому что он может многое предложить прямо из коробки, наиболее важным из которых является разнообразие доступных тем и адаптивный дизайн. Конечно, есть еще много функций, о которых я могу подумать прямо сейчас, но давайте оставим это на другой день.

В то время как дизайнеры UX применяют свои творческие навыки и сосредотачиваются на визуальном представлении веб-сайта Drupal, разработчики Front-end Drupal устраняют разрыв между UX-дизайнерами и back-end разработчиками Drupal. Именно они реализуют визуальные компоненты, предоставленные дизайнером, на веб-сайте Drupal. Хотя и дизайнер UX, и разработчик Front-end Drupal думают с точки зрения взаимодействия с пользователем и решения проблем, связанных с UX, они используют разные подходы к их решению. Последний, однако, всегда находит решение через код.
Внешние разработчики Drupal несут ответственность за создание красивых веб-сайтов Drupal, работая над темами Drupal и настраивая их. Они должны уметь устранять проблемы с внешним интерфейсом, для решения которых им необходимо обладать знаниями PHP, CSS, jQuery, CSS, HTML и, что наиболее важно, дизайна веб-сайтов, ориентированного на мобильные устройства.

С растущей популярностью веб-сайтов Drupal без заголовков и независимой архитектуры, разработчики Front-end Drupal, которые имеют представление о фреймворках для фронтенд-разработки, таких как Angular, ReactJS, Vue.js, всегда имеют конкурентное преимущество.
В общем, чтобы преуспеть в разработке Front-end Drupal, нужно выйти из своей зоны комфорта и узнать, как лучше всего они могут создавать и внедрять современные цифровые технологии, оснащенные новейшими технологиями.