Я разрабатываю фронтенд. Я часто слышу такой вопрос: «Нужно ли мне изучать дизайн, чтобы стать фронтенд-разработчикомЭ» Прежде чем я отвечу на этот вопрос, я хотел бы, чтобы читатели, которые также задают этот вопрос, поняли, что во многих компаниях есть свои UX/UI-дизайнеры.
Рисуют интерфейсы, делают макеты, а свою работу выполняют исключительно программисты.
Задача программистов — вдохнуть жизнь в макет страницы и сделать ее интерактивной.
Но что делать, если в вашей компании нет дизайнера? А что, если в свободное время вы самостоятельно поработаете над какими-то собственными проектами? И то, что в компании есть дизайнер, не означает, что он всегда к вашим услугам.
Дизайнеры обычно очень заняты — как текущей работой, так и изменениями в уже сделанном.
В результате можно сказать, что программист не может постоянно «зацепляться» за дизайнером, например, в тех случаях, когда речь идет о незначительных изменениях дизайна веб-страницы.
А если вы что-то знаете в области дизайна, это будет полезно и вам, и вашей команде.
И учтите, я не говорю, что вы, программист, должны быть еще и дизайнером.
Я не говорю, что вы должны стремиться заменить штатного дизайнера.
Я хочу сказать, что некоторые дизайнерские навыки, если вы ими овладеете, вам совсем не повредят. И определенно полезно развивать творческий взгляд на вещи и чувство прекрасного.
Здесь я расскажу о 7 основных принципах дизайна, соблюдение которых позволит вам создавать привлекательные интерфейсы и приложения.
1. Свободное пространство
Первый принцип дизайна, о котором мы поговорим, касается пространства.Это пустое пространство между элементами интерфейса.
И хотя речь по сути идет о пустоте, эта пустота позволяет наделить интерфейс определенной структурой.
Давайте посмотрим на пример.
Вы можете видеть, что текст в контейнере справа читаем и выглядит лучше, чем текст в левом контейнере.
Используя всего три свойства CSS (отступы, поля и высоту строки), вы можете значительно улучшить внешний вид вашего текста.
2. Выравнивание
Выравнивание – это обеспечение правильного взаимного расположения элементов интерфейса.Визуальное выравнивание — один из фундаментальных принципов дизайна.
Людям более приятно видеть объекты, которые визуально совпадают друг с другом.
Давайте посмотрим на следующий пример интерфейса.
Здесь вы можете увидеть четыре элемента: логотип, заголовок, текст и кнопку.
И все они выглядят неровными, немного неуместными.
И опять же, используя всего три свойства CSS (margin, Transform и text-align), мы можем сделать наш интерфейс приличным.
Теперь страница выглядит гораздо привлекательнее, поскольку все ее элементы хорошо выровнены.
3. Контраст
Контраст — это визуальное отличие одних элементов от других.При проектировании интерфейсов нужно думать о том, сможет ли пользователь четко видеть и различать все необходимые детали интерфейса, отображаемые на экране.
Взгляните на следующее изображение.
Здесь есть серый подзаголовок.
Текст на кнопке также серый.
Эти элементы плохо контрастируют с фоном.
Текст, особенно на кнопке, читать сложно.
Теперь я увеличил контраст, используя более темный цвет для субтитров и фона кнопок и белый для текста кнопки.
Видно, что тексты в новом интерфейсе читаются гораздо лучше, чем в старом.
Неумение правильно читать текст из-за проблем с контрастом может вылиться в серьёзную проблему и оттолкнуть от проекта даже тех пользователей, которые в целом заинтересованы в этом проекте.
4. Масштаб
Масштаб — это размер элементов страницы, и его необходимо тщательно выбирать.Более того, если грамотно подобрать размеры различных элементов, это может существенно улучшить дизайн интерфейса.
Давайте посмотрим на следующий пример интерфейса.
Мы постараемся улучшить этот интерфейс, поработав над размерами элементов.
Что сразу бросается в глаза, так это то, что карточки, учитывая макет страницы, слишком малы.
Кроме того, особой разницы между заголовком и подзаголовком нет. И цветовые коды HEX также можно увеличить.
В переработанной версии этого интерфейса, представленной ниже, карточки лучше заполняются данными и более рационально распределяются по странице.
Здесь увеличен размер заголовка.
В результате новый интерфейс выглядит привлекательнее старого.
5. Типографика
Типографика — это больше, чем просто выбор шрифта.Это искусство оформления текста, которое предполагает выбор шрифта, его типа, межстрочного интервала и других параметров.
Правильное оформление текстов требует и других знаний, в частности, как правильно подобрать шрифты для разных нужд. Давайте посмотрим на следующий пример интерфейса.
Ясно одно: здесь есть серьезные проблемы с типографикой.
Во-первых, здесь используются три шрифта, но это не обязательно.
Во-вторых, тексты построены таким образом, что непонятно, что следует смотреть в первую очередь, что важно, а что нет. Поэтому здесь нужно не только работать с выбором шрифтов.
Также следует обратить внимание на размер символов.
Вот вторая версия того же интерфейса.
Здесь мы используем только одно семейство шрифтов, увеличили размер шрифта заголовков и уменьшили размер шрифта текстов с именами пользователей (в нашем случае это одно имя «Джон Доу»), которые не особо важны.
Теперь наш интерфейс выглядит намного лучше, чем раньше.
6. Цвет
Цвет — это то, что формирует пользовательский опыт при работе с интерфейсом.Если вы заходите на какой-либо веб-сайт или открываете какое-либо приложение, прежде чем у вас появится возможность что-либо увидеть или прочитать, первое, что вы увидите, — это цвет. В результате выбор цвета в дизайне пользовательского интерфейса очень важен.
Разные цвета имеют разные значения, связанные с ними.
Например, зеленый может ассоциироваться с ростом и здоровьем, красный – с утратой или теплом, черный – с элегантностью и роскошью.
Подобные рассуждения можно продолжать и продолжать.
Прежде чем создавать интерфейс, нам необходимо знать об особенностях целевой аудитории приложения, для которого этот интерфейс создается.
Вам нужно знать, какие эмоции проект должен вызывать у тех, кто будет с ним работать.
Продолжая разговор о цветах, следует избегать использования слишком большого количества цветов в дизайне, так как это вредит качеству интерфейса.
Кроме того, лучше не использовать цвета, которые плохо смотрятся вместе или плохо сочетаются друг с другом.
7. Визуальная иерархия элементов
Каждый элемент интерфейса имеет определенный уровень значимости для пользователя.Некоторые элементы более важны, чем другие.
Визуальная иерархия — это способ показать важность элемента.
Это делается с использованием принципов проектирования, которые мы обсуждали выше.
Если посмотреть на показанный ниже интерфейс, то окажется, что не очень понятно, на что смотреть в первую очередь.
В частности, кнопка, призывающая пользователя к какому-то действию, практически неотличима.
Исправить эти недостатки можно, увеличив размер заголовка и сделав кнопку более заметной.
Сделав это, мы улучшим визуальную иерархию элементов интерфейса, как показано ниже.
То, что мы имеем сейчас, выглядит лучше, чем то, что было раньше.
Полученные результаты
Это не значит, что какой-то принцип проектирования важнее других.Все они одинаково важны, все способствуют созданию хорошего интерфейса.
Если в дизайне интерфейса не учтен один из вышеперечисленных принципов, то, глядя на такой интерфейс, легко заметить, что с его дизайном что-то не так.
Помните об этих принципах, когда в следующий раз решите создать собственный пользовательский интерфейс.
Каких принципов вы придерживаетесь при создании пользовательских интерфейсов? 
Теги: #ruvds_translation #Разработка сайтов #дизайн #CSS #JavaScript #webdev
-
Кодекс Чести Боевых Роботов
19 Oct, 24 -
Выпущена Майская Ctp-Версия Компилятора F#.
19 Oct, 24 -
Сферические Практики В Годо
19 Oct, 24 -
На Базе Монго, В Красивом, Модном Докере
19 Oct, 24
