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



Я всегда уделял приоритетное внимание тому, как сайт будет выглядеть. Согласны вы или нет, но первое впечатление всегда складывается по внешнему виду. Люди доверяют больше тому, что им нравится.

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

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

И речь не о таланте

Когда я был младше, много играл в Minecraft. Я видел все эти здания, нарисованные людьми. Но когда я пытался сделать что-то подобное, это выглядело как коробка. Уродливо и не стильно.

Я нашел видео на YouTube и повторил действия рассказчика.Через некоторое время я разработал свой собственный стиль и мог самостоятельно строить. Я даже выиграл конкурс.

Дизайн — это навык, который можно развивать.

Выбирайте правильные инструменты для работы

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

Самые популярные инструменты для веб-дизайна:

Sketch инструмент для MacOS. Подписка стоит 99 $/год. Некоторые считают его таким же сложным, как React.

Adobe XD бесплатный, кросс-платформенный инструмент, который выполняет роль Vue. Прост в использовании.

Adobe Photoshop швейцарский нож для любой задачи дизайна. Его можно сравнить с jQuery. Цена 9,99 $/мес.

Нет никакой разницы, используете ли вы Sublime или VS Code для написания кода. Или же вы используете React или Vue для интерфейса. Это вопрос личных предпочтений. Каждый из инструментов имеет свои плюсы и минусы.

Я использую Adobe XD. В первую очередь, потому что это кросс-платформенная программа, поэтому я не заложник экосистемы Apple. Для новичков удобно то, что с мая 2018 года Adobe XD можно свободно использовать только с несколькими ограничениями.

Изменение мышления

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

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

Изучение инструментов

При программировании вы используете HTML-элементы, такие как div, span и input, и позволяете браузеру визуализировать их. Благодаря инструментам проектирования вы можете пропустить посредника и напрямую использовать визуальные элементы, такие как фигуры и текст.

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

Инструмент Rectangle

Rectangle (прямоугольники) — самая универсальная форма. Вы будете использовать их все время. Подумайте об этом как о div.



Инструмент label

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

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



Инструмент paragraph

Второе состояние представляет собой текстовый контейнер с определенным размером, который ведет себя как <p> с определенной шириной или <p> внутри столбца сетки. Преимущество этого состояния в том, что вы можете контролировать размер текстового поля. Используйте это состояние для абзацев и заголовков в несколько строк.

Инструмент Select

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



Инструмент Line

Иногда линия удобна, чтобы разные части дизайна были отделены друг от друга. Вот почему инструмент Line здесь. Вы могли бы использовать инструмент Rectangle вместо этого, но это не так удобно.



Дизайнерские советы и техники

Layout

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

Когда я делал проект для Sidemail, я распределял элементы внутри документа равномерно. Так он выглядел лучше.



Цвета

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

Еще один полезный инструмент — Paletton. С его помощью без труда подберете идеальную цветовую комбинацию.

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



Типография

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

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



Дизайн домашней страницы или landing page

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

Если вы в поисках вдохновения, обязательно загляните на land-book.com. Это каталог замечательных страниц, которые понравятся целевой аудитории. Еще одна замечательная страница с вдохновением — interface.pro. Здесь вы можете ранжировать по категориям, например, по цене, 404 или “о нас”.



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

Выводы:

• Уникальный шрифт выглядит и запоминается лучше обычного;
• Графика очень важна, используйте хотя бы несколько изображений;
• Используйте несколько оттенков цветов;
• Говорите о преимуществах, а не функционале;
• Оглянитесь вокруг, если потеряли вдохновение.
• Помните, дизайн может быть вашим конкурентным преимуществом — используйте его и сделайте что-нибудь потрясающее.

Перевод статьи A developer’s guide to web design for non-designers