КАК СТАТЬ ВЕБ–
ДИЗАЙНЕРОМ

КАК СТАТЬ ВЕБ-ДИЗАЙНЕРОМ

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

Для этого есть три отдельных профессии: front-end разработчик, копирайтер, ретушер/фотограф. Дизайнер может уметь делать все эти вещи, но вовсе не обязан их выполнять по умолчанию. Основная задача дизайнера — делать дизайн: определять, как будет выглядеть сайт, какое настроение он будет транслировать, какие акценты будут в макете и какой опыт получит человек.
Совет
Если вы встречаете вакансии, где дизайнер должен уметь верстать сайты, делать 3D-сцены, монтировать видео и по субботам мыть пол в студии — бегите оттуда без оглядки. Это неадекватно.
Взгляните на схему ниже: на ней перечислены этапы создания сайта. Вначале делается макет, потом это переносится на код, чтобы браузер сумел открыть и отобразить сайт. Потом, если нужно, сайт дополнительно наполняют контентом и в конце как-то продвигают его в интернете.

Каждый из этих шагов равносильно важен. Дизайн может быть классным, но верстальщик не постарался на своём этапе. Дизайн и вёрстка могут быть идеальными, но если заказчик не будет продвигать свой сайт — о нём никто не узнает и сайт будет бесполезным.
Этапы создания сайта: смотреть на Miro
Из этого следует простой вывод: вы, как дизайнер (или будущий дизайнер) не несёте ответственность за сайт целиком. Его успех или неуспех — это результат всех этапов схемы. Но этап дизайна — целиком и полностью ваш.
2. Какие программы нужно знать?
Раньше у руля был Photoshop. Он сложный и умеет всё: от ретуши до экспорта видео. Чтобы начать дизайнить нужно было разобраться в таком комбайне. Это пугало новичков.

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

Чтобы начать одной Фигмы достаточно (на самом деле её достаточно и для профессиональной работы).
3. В чем конкретно нужно разобраться?
В веб-дизайне (как и в графическом) всего несколько ключевых элементов из которых всё создается: текст, графика/фото и пространство. Всё.

Текст создаёт настроение. Одни шрифты выглядят дорого и эстетично (Playfair Display), другие — весело и несерьезно (Balsamiq Sans).

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

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

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

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

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

В этом вам поможет беспроигрышная тройка фотостоков: pixabay, pexels и unsplash.
Что касается пространства, то здесь у новичков есть одна самая частая ошибка. Её совершает примерно каждый второй (или первый). Вот она: желание заполнить всё пустое пространство чем-нибудь, лишь бы не оставить пустой фон.

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

Ответ очевиден, а отличаются они всего-лишь пространством: в первом варианте его нет вообще, всё занято, а во втором оно появилось, стало легче и понятнее.
Слева не хватает воздуха, справа — всё хорошо
4. Порфтолио
Чтобы получать заказы на фрилансе или устроиться работать в студию нужно сделать портфолио. Без него не получится.

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

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

Самое главное — относиться к выдуманным кейсам как к настоящим: выкладываться по полной и не халтурить. В этой статье мы разобрали 4 способа как можно сделать портфолио без заказов и с плохой фантазией, прочитайте, будет полезно.
А можно проще?
Можно — приходите к нам на бесплатный марафон по веб-дизайну. Это специальный практикум для новичков: сделаем работу в портфолио с нуля и разберёмся на реальном примере в веб-дизайне и фрилансе. У вас будет возможность задать свои вопросы на онлайн трансляциях.

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