Поскольку в основе дизайна лежат принципы, которые работают не зря.

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

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

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

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

1. Выкройки

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

Например, кнопка с правой стороны отправляет форму или «не нажимая» модальное окно закрывает его без нажатия крестика (что сложно включить в графический дизайн!) В любом случае вы можете узнать больше о шаблонах на, например, контрольный список UX или просто просматривая документацию по материальному дизайну.

2. Типографика

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

Сколько раз вы покидали блог из-за слишком большой ширины абзаца или из-за того, что использованный вами шрифт просто «поранил» ваши глаза? Кроме того, типографика играет огромную роль в удержании внимания пользователя и фокусировании его на определенных элементах, что, в свою очередь, влияет на уровень конверсии, что в интересах маркетологов (и, по сути, в интересах всех). из нас, включая клиентов).

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

3. Взаимодействие

Дизайн интерфейса часто не включает стили взаимодействия, например, анимацию или обратную связь (например, проверку формы). Иногда бывает так, что они включены, но в конечном итоге не реализованы из-за нехватки времени.

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

Стоит следить за вопросами с точки зрения пользователя: знаю ли я, что происходит / произошло? * и * какие эмоции вызвало у меня это действие? Здесь мы хотим избежать путаницы и разочарования. Также стоит подчеркнуть, что проектирование взаимодействий - не задача программиста, и стоит обратиться к дизайнерам, которые обычно имеют более широкое видение интерфейса.

4. Контрастность

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

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

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

5. Последовательность

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

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

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

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

Вывод

Упомянутые мною направления, конечно же, не исчерпывают эту тему. Однако я думаю, что был передан достаточно широкий контекст. Я хочу, чтобы вы поняли, что:

  • Качество сочетания дизайна и программирования критически важно для результата.
  • Дизайн руководствуется принципами, которые работают не зря.
  • Работайте с дизайнером при реализации графического дизайна.
  • Помните, что детали здесь играют роль - как и в программировании.

Я надеюсь, что этот пост научил вас чему-то новому и / или показал уникальную перспективу, которая поможет вам в вашей работе.

Больше контента на plainenglish.io