Руководство разработчика по веб-дизайну для недизайнеров

Перевод. Автор статьи: Патрик Крупар.

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

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

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

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

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

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

Дизайн — это навык и, как и любой другой навык, его можно освоить.

Программист может открыть Блокнот и написать приложение столь же качественное, как если бы оно было создано в полнофункциональной IDE… однако, такая работа может серьезно отравить вам жизнь и, вероятно, продлится заметно дольше, чем в IDE. В мире веб-дизайна в роли Блокнота выступает программа MS Paint — и, точно как почти никто не программирует в Блокноте, почти никто не занимается дизайном в Paint… надеюсь.

Практически нет разницы, в какой среде вы пишете приложения — Sublime или VS code. При помощи какой библиотеки разрабатываете фронтенд — React или Vue. Все это дело вкуса. То же самое касается дизайнерских инструментов, у каждого из них есть свои достоинства и недостатки.

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

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

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

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

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

Прямоугольник — самая универсальная фигура. Мы ими постоянно пользуемся. Считайте, что прямоугольник — это div. Он удобен для работы со всевозможным материалом, от полей ввода до контейнеров.

Этот инструмент, как понятно из названия, позволяет создавать текст. Однако, не так все просто, поскольку этот инструмент допускает два состояния: одно для написания текста в строку, другое — для написания абзаца за абзацем. К счастью, можно без малейшего труда научиться правильно ими пользоваться.

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

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

Второе состояние — это текстовый контейнер определенного размера, функционально подобный <p> с заданной шириной или <p> внутри столбца сетки. Это состояние удобно тем, что можно контролировать размер текстового поля. Чтобы создать абзац, щелкаем интересующий нас инструмент Текст и удерживаем, чтобы выделить нужную область. Правило: это состояние используется при создании многострочных заголовков и текстов, состоящих из нескольких абзацев.

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

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

В веб-разработке шаблон обычно понимается как совокупность заголовка, меню, контента и подвала. Да, отчасти все так и есть, но шаблон — более широкое понятие. Это, в сущности, способ компоновки элементов на странице.

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

Чтобы вам было проще подобрать идеальную гамму для следующего проекта, обязательно учитывайте цветопсихологию (colorpsychology.org). Удобный инструмент для подбора идеальных цветовых комбинаций, исходя из основного цвета, называется Paletton.

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

Гарнитура кардинально влияет на брендинг вашего проекта, поэтому подбирайте ее грамотно. Как правило, премиум-гарнитуры выглядят симпатичнее, чем типичные Google Fonts, но, если вы только начинаете — не стоит покупать шрифт. Даже среди Google Fonts попадаются настоящие жемчужины.

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

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

Определившись, что хочу сказать, я отправляюсь на поиски вдохновения. Отличный ресурс для этого — land-book.com, обширная подборка замечательных посадочных страниц, за которые посетители могут голосовать. Другая замечательная страница с дизайнерскими идеями — interfaces.pro, где можно фильтровать контент по категориям, например: «Цены», «404», «О нас». Я просто просматриваю эту коллекцию, пока не найду достаточно сайтов, которые мне нравятся и соответствуют желаемому стилю.

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

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

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

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

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

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

Примеры: Twitter, Buffer, DigitalOcean, Netlify, GitHub

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

Примеры: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

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

Помните, что дизайн может обеспечить вам конкурентное преимущество — так что освойте его и создавайте потрясающие произведения.

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

#long