Оффтоп Anastasia Kurilenko
2 098

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

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

В закладки

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

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

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

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

Дело не в таланте

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

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

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

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

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

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

  • Sketch, программа исключительно для MacOS, как и React, в любом списке вакансий — тут как тут. Платная, $99/год.
  • Adobe XD, бесплатный кроссплатформенный инструмент, функционально подобный Vue. Сообщество у него поменьше, но его легко освоить.
  • Adobe Photoshop, всем известный швейцарский нож для решения любых задач. По влиятельности сравним с… вы угадали, jQuery. Платный, $9.99/мес.

Практически нет разницы, в какой среде вы пишете приложения — 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», «О нас». Я просто просматриваю эту коллекцию, пока не найду достаточно сайтов, которые мне нравятся и соответствуют желаемому стилю.

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

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

Выводы:

  • Сложно переоценить уникальную гарнитуру
  • Графика очень важна, постарайтесь использовать хотя бы несколько иллюстраций или картинок
  • Акцентируйте визуальную составляющую, работая с несколькими оттенками. Текста и основных цветов недостаточно
  • Не пользуйтесь слишком широкими контейнерами — около 1100 px вполне хватит
  • Научитесь пользоваться негативным пространством
  • Рассказывайте о достоинствах, а не о свойствах
  • Если пробуксовываете — отправляйтесь за вдохновением

Дизайн веб-приложения (или дашборда)

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

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

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

Контейнер фиксированной ширины

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

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

Подвижный контейнер

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

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

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

Выводы:

  • Не усложняйте
  • Используйте удобочитаемую гарнитуру
  • При отображении больших объемов данных выстраивайте визуальную иерархию
  • Ищите неудачные дизайнерские решения конкурентов и учитесь на их ошибках

Заключение

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

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Anastasia Kurilenko", "author_type": "self", "tags": [], "comments": 23, "likes": 33, "favorites": 122, "is_advertisement": false, "subsite_label": "flood", "id": 25489, "is_wide": false, "is_ugc": true, "date": "Thu, 23 Aug 2018 12:53:08 +0300" }
{ "id": 25489, "author_id": 67119, "diff_limit": 1000, "urls": {"diff":"\/comments\/25489\/get","add":"\/comments\/25489\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/25489"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64955 }

23 комментария 23 комм.

Популярные

По порядку

Написать комментарий...
12

Кажется тут у кого то статься с хабра убежала)

Ответить
0

Лол, да.

Ответить

0

А для новичков здесь есть полезная информация?

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

Ответить
1

где её стоит искать по вебдизайну?

Следить за сообществом (дизайнерами и студиями), для начала. Обязательно интересоваться и вникать в смежные области: типографика, код, редактура, граф. дизайн, маркетинг. Начать делать выдуманные проекты, браться за простые коммерческие за символическую плату. Нарабатывать опыт и «набивать шишки».

Первое, что пришло в голову:
http://tilda.education/courses/web-design/
https://bureau.ru/projects/book-ui/

Ответить
1

окей, отправил другу. Спасибо за подсказку

Ответить

1

Да и где её стоит искать по вебдизайну?

Вот это https://www.w3schools.com изучить, а дальше уже искать по текущей задаче. А эта статья скорее бесполезная.

Ответить
0

Так HTML и СЫЫ это языки для создания сайтов, а не дизайн на визуальном уровне. Дизайн создал, и отправил верстальщику. Тут можно долго спорить о необходимости знания языка для вебдизайнера. Но по факту он нужен только для тех кто работает соло и на фрилансе.

Ответить
3

Кажется, статья лагает, гифки жирные что ли

Ответить
2

"Дизайн это навык, а значит ему можно научиться".
Безусловно.
Только не за месяц.
Надоели все эти иллюзии простоты. Научись рисовать за неделю, танцевать за месяц, фотографировать за два дня, дизайнить за несколько уроков.

Может хватит выдавать пару базисных принципов за достаточную основу?

P.S ваша чудесная статья о вебдизайне тормозит как Морровинд на максималках в год выхода. Не лучшая самореклама.

Ответить
1

Figma осталась за бортом🙈

Ответить
0

Думал на хабр зашел.

Ответить
1

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

Ответить
0

Добавлю от себя - 100% контейнеры или больше 1100 px не проблема если контент по размеру адекватно сделан.

Ответить
0

Объясните пожалуйста человеку несведущему в этих ваших яваскриптах, чем конкретно "сайт" отличается от "веб-приложения"?

Ответить

0

То есть почтовый сервис gmail это веб приложение а google+ это сайт где мы эту самую почту читаем, так?

Ответить
0

Понтами)

Ответить
0

посадочной страницы

Вы там чё, промтом переводите?

Ответить
0

шок-контент...

Ответить
0

Почему нет пометки реклама?

Ответить
0

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

Хотите стать дизайнером из недизайнера – нужно учиться. Например, очень хороша Школа Бюро. Так и загуглите :)

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Гейб Ньюэлл наконец-то анонсировал то,
чего все так долго ждали
Подписаться на push-уведомления