Я занимаюсь разработкой фронтенда. Мне часто приходится слышать такой вопрос: «Надо ли мне изучить дизайн для того, чтобы стать фронтенд-разработчиком?».

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

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



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

Здесь я собираюсь рассказать о 7 основных принципах дизайна, следование которым позволит вам создавать привлекательные интерфейсы и приложения.

1. Свободное пространство


Первый принцип дизайна, о котором мы поговорим, касается свободного пространства.

Это — пустое пространство между элементами интерфейса. И хотя мы, в сущности, говорим о пустоте, эта пустота позволяет наделить интерфейс определённой структурой.

Рассмотрим пример.


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

Используя лишь три CSS-свойства (padding, margin и line-height) можно значительно улучшить внешний вид текста.

2. Выравнивание


Выравнивание — это обеспечение правильного взаимного расположения элементов интерфейса.

Визуальное выравнивание — это один из фундаментальных принципов дизайна. Людям приятнее видеть объекты, которые визуально выровнены относительно друг друга.

Давайте взглянем на следующий пример интерфейса.


Тут можно видеть четыре элемента: логотип, заголовок, текст и кнопку. И все они выглядят невыровненными, находящимися немного не там, где надо.

И, опять же, воспользовавшись всего тремя CSS-свойствами (margin, transform и text-align) мы можем привести наш интерфейс в приличный вид.


Теперь страница смотрится гораздо привлекательнее, так как все её элементы хорошо выровнены.

3. Контраст


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

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


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


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

4. Масштаб


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

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


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

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


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


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

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

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


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

Вот второй вариант того же интерфейса.


Тут мы пользуемся лишь одним семейством шрифтов, мы увеличили размер шрифта заголовков и уменьшили размер шрифта текстов с именами пользователей (в нашем случае — это одно имя «John Doe»), которые не особенно важны. Теперь наш интерфейс выглядит куда лучше, чем прежде.

6. Цвет


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

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

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


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

7. Визуальная иерархия элементов


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

Если посмотреть на интерфейс, показанный ниже, то окажется, что не очень понятно, на что тут надо смотреть в первую очередь. В частности, кнопка, призывающая пользователю к некоему действию, почти неразличима.


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


То, что получилось теперь, выглядит лучше, чем то, что было раньше.

Итоги


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

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

Какими принципами вы руководствуетесь, создавая пользовательские интерфейсы?

Комментарии (13)


  1. asakasinsky
    21.10.2021 17:47
    +4

    Советую книгу «Дизайн для недизайнеров» У. Робин. Всё это там отлично показано и объяснено.


  1. SubarYan
    21.10.2021 18:59

    Шикарная статья. Я как-то собеседовал дизайнера, и специально подготовил вопросы такого плана, про формы, масштаб, палитру и т.д. Вопросы конечно были с англоязычных ресурсов. И что вы думаете?!

    Ни на один из поставленных вопросов дизайнер мне не ответил. Но портфолио и результат анализа дизайна с других сайтов был неплохой. Видимо в рунете в сообществе дизайнеров в России есть какая-то другая грамота.


    1. LeshaRB
      21.10.2021 23:21

      Дизайн такая вещь... Сегодня одни стандарты, завтра другие...


      1. nochkin
        21.10.2021 23:38
        +1

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


  1. r0ck3r
    21.10.2021 20:55
    +3

    В последнем примере результата улучшения, надпись "Don't worry, we won't share your email", как мне кажется, не соответствует третьему правилу "Контраст", хотя выглядит, безусловно, лучше чем то что было до


    1. third112
      21.10.2021 21:05
      +1

      Поддерживаю. ИМХО больше подойдет белый, а м.б. черный.


  1. third112
    21.10.2021 21:01
    +2

    В секции "6 Цвет" на желтом фоне надпись не видна.


  1. alexshy
    22.10.2021 00:36
    +11

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

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

    Вы читателей здесь совсем не уважаете? В конце концов, есть же качественные ресурсы из этой области. Тот же Creative Bloq, например, Smashing Magazine, A List Apart... да масса достойных ресурсов! Переведите что-нибудь из них, люди спасибо скажут, у кого с английским плохо.

    И ладно у нас своих идей нет; нам не то что мир, себя удивить нечем. Но зачем из многострадального Рувеба такой cesspool делать?


    1. JohurN
      22.10.2021 18:04

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


  1. dolovar
    22.10.2021 14:09
    +1

    Фронтенд-разработчику: 7 основных принципов дизайна
    Слово «Фронтенд» в заголовке статьи объясняется только тем, что при отсутствии дизайнера можно переложить его функции на фронтэндера.
    Далее описаны не принципы, а инструменты дизайна. Причем явно не все — почему-то есть контраст, но нет яркости, есть пространство, но нет рамок, есть типографика, но нет иллюстраций…
    Странная статья, кто-то очень незаинтересованный писал.


  1. batyrmastyr
    22.10.2021 16:09

    @alexshy

    Неужели охота тратить время на перевод этого бесконечного индусского трэша?

    Минут 10 на беглое причёсывание гуглоперевода и ещё столько же на оформление в редакторе хабра. Время не своё, а наёмного писаки за доширак.

    Вы читателей здесь совсем не уважаете?

    Вы хотите услышать от них правду? )


  1. WASD1
    22.10.2021 18:17

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

    Т.е. получается - "если бы у меня был бесконечный экран -- уууххх я бы интерфейс сделал".


  1. mystafa
    26.10.2021 11:05

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