Я не дизайнер, и у меня нет того острого чутья, которое помогает сделать пользовательский опыт первоклассным или даже действительно хорошим. Да, за эти годы я усвоил некоторые дизайнерские инстинкты, но они далеко не настолько совершенны, чтобы обеспечить пользовательский опыт производственного уровня. Это быстро становится проблемой при работе со стартапами, которым нужен приятный пользовательский интерфейс, но у которых нет ресурсов для найма столь необходимого дизайнера на полный или даже неполный рабочий день, проведения исследований или создания библиотеки компонентов с простыми элементами пользовательского интерфейса, такими как кнопка. И поверьте мне, я, как и многие другие, был там. Так что же нам делать? Сразу скажу, что я инженер, дизайн не совсем мое! Это один вариант, другой, и я считаю, что лучше познакомиться с общедоступными системами дизайна. Надеюсь, к концу этого я заинтересую вас достаточно, чтобы изучить хотя бы одну систему дизайна (моя любимая — Материальный дизайн).

Да, есть общедоступные системы дизайна, которые вы можете использовать, и они поставляются с компонентами, изображениями (причудливое слово для значков), цветами (ну, вам придется выбрать свой), типографикой (значения по умолчанию тоже хороши, но бесплатные онлайн-шрифты — это реальность). ), компоненты (также настраиваемые) и описание того, когда и как их использовать. Ничего себе, так много бесплатно. Это потрясающе. Если вы мне не верите, прочтите, пожалуйста, о материальном дизайне Google и техническом дизайне Microsoft. Вы не ограничены только этими двумя. Многие компании сделали свои системы дизайна общедоступными, такие компании, как Atlassian, Shopify, Airbnb и т. д. Я рекомендую вам Google Material design. Он доступен для всех основных фреймворков пользовательского интерфейса, Angular , React и Vue, а также имеет потрясающую поддержку сообщества.

Итак, скажем, вы решили работать, скажем, с системой дизайна материалов Google, ура!. Но значит ли это, что у вас есть все? Ну, почти то, что у вас есть, это фреймворк, вам все равно придется приложить некоторые усилия, чтобы настроить его для вашего варианта использования. Давайте посмотрим, что это за опции и некоторые инструменты вокруг них.

Цвета

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

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

Итак, как только вы определили основной и акцентный (причудливое название для вторичного цвета) цвета, просто передайте их в палитру дизайн-системы и вуаля! Все настроено. Подождите секунду, поддон? Вы имеете в виду, что есть больше цветов? Ну да, есть. У вас уже будут не только цвета, такие как успех, ошибка, предупреждение и т. д., но и оттенки основного и дополнительного цветов.

Типография

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

Теперь вам может быть интересно, а как насчет шрифтов? Ну, определенно есть шрифты по умолчанию, но вы можете изучить больше. Google предлагает так много шрифтов [https://fonts.google.com/] и да, современные интернет-приложения могут использовать онлайн-шрифты.

Изображения (иконки)

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

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

Надеюсь, я по крайней мере пробудил ваш интерес к системам проектирования, и вы будете использовать их в своих интересах в своих существующих и будущих проектах. В моей следующей статье я подробно расскажу об использовании Material-UI (библиотека дизайна материалов для React) с React. Мы увидим, как материальный пользовательский интерфейс поможет нам использовать общие принципы дизайна с минимальными усилиями, поэтому, пожалуйста, следите за обновлениями (и сделайте меня популярным :D).

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