Вконтакте
Instagram
YouTube
Behance
Medium
Telegram
Контакты
Как простому
человеку стать
веб-дизайнером?
Полезное чтение
Этот текст призван стать твоим личным заклинанием против разрыва между знаниями и навыками, которые получишь после курса Интенсив. Читай, погружайся и настраивайся на волну веб-дизайна.
Стартуем
Смотри, чтобы дизайнеру создать макет, как тот, что ниже, нужно разбираться в композиции, цветовой гамме, шрифтах. Но самое важное — кто вообще такой веб-дизайнер?
Веб-дизайнер — это такой чувак, который создает интернет-страницу бренда на основе диалога с клиентом и пользователями. Ключевое: страница должна говорить, о чем этот продукт, что на ней найдет пользователь, и сделать этот процесс комфортным для обеих сторон.
Так делать не стоит
А вот так — в самый раз.
Миссия: разговорить клиента
Ты же не любишь стирать пальцы об клавиатуру на работе без дела? Вот и веб-дизайнер не создает сайты ради сайтов.

Чтобы создать сайт про настольные игры, нужен лишь настрой, чашечка кофе и общительный клиент, который знает, для кого он предназначен. Веб-дизайнер отправляется на интервью с клиентом, чтобы закрыть вопросы о ЦА, проекте и еще ряде пунктов. Прочитать подробнее про интервью и бриф можно здесь.

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


Когда диктофон (с разрешения клиента) заполнился откровениями, веб-дизайнер спешит внести все в текстовый прототип, чтобы не проронить ни капли смысла.


Текстовый прототип только звучит грозно. По сути, это скелет сайта, страховка, что веб-дизайнер ничего не забыл. Без него сайт не построить, обязательно что-нибудь упустишь.
    Текстовый прототип выпускника Интенсива, Аюра Цырендоржиева.
    Как не промахнуться с палитрой
    Вот тут начинается классическая чехарда под названием «а я бы хотел, чтобы на главном экране был цвет как у меня...». Тут дизайнеру нужно собрать всю силу воли и терпение, чтобы объяснить — почему только эта цветовая палитра может быть использована.


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

    — образы: собирает референсы (примеры) фотографий, иллюстраций

    — цвет: эмоции, описание, примеры

    — типографика: шрифты, описание, примеры

    — композиция

    — геометрия и формы

    — исследование, куда входит: проект, задача, что важно донести до пользователя, эмоции, ассоциации

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

    Прорисуй меня полностью
    С этого момента дизайнер включается в работу ручками: собирает элементы интерфейса или UI-кит.


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

    UI-кит (набор элементов интерфейса) — это кнопки, «хлебные крошки», вертикальные и горизонтальные меню, плееры, формы, шрифты, цвета.

    Зачем это нужно: так дизайнер направляет пользователя сайта в нужное место. Если ты ищешь кнопку, чтобы посмотреть на каталог настольных игр, то явно не будешь искать ее в контактах. При наведении, должно быть видно, что кнопка активна (меняет цвет).

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

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


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

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


    Только «главное — настольные игры — для чего — куда ткнуть».
    Зачем это нужно: дизайнер упрощает жизнь пользователю на сайте. Время — это ограниченный ресурс, и никто не хочет тратить его на талмуды на сайте. Работает только одна стратегия: пришел, увидел, победил! А вот кто победил — зависит от качества.
    Comic Sans мне в глаз

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

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

    Шрифт это графический рисунок начертания букв.

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

    Это когда клиент относится к работе с пониманием и уважением. Но истина в том, что так случается редко. На выходе же получаем: правки, звонки ночами и нервные замечания, что он-то (клиент) знает наверняка!

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

    Знания — такая вещь, что если не начать их применять, то через час ты будешь помнить только 55% информации. Через месяц — только 5%.


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


    На выходе получаются:


    Интернет-магазин
    Интернет-магазин, работа выполнена Аюром. Ссылка на всю работу здесь
    Промостраница
    Промостраница, работа выполнена Аюром. Ссылка на всю работу здесь
    Мобильное приложение на iOS
    Работа выполнена Аюром
    Мобильное приложение на Android
    Работа выполнена Аюром
    Итог курса: веб-дизайнер получает готовое портфолио и механику работы с проектом.

    Но и этого недостаточно!
    Говори со мной на одном языке

    Так бы сказал верстальщик в ответ на высланное задание. Макет сайта — это пока только хорошо проработанная картинка. Но нажать на кнопку и ввести данные в поле заказа не получится.


    В этот момент в игру вступает верстка, где нужны знания:

    — HTML
    — CSS
    — Формы на сайтах, ID, классы


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

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

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

    1 — интервью с заказчиком

    2 — узнай потребности целевой аудитории

    3 — собери информацию и пропиши текстовый прототип

    4 — проработай эмоции с помощью визуальных решений

    5 — расставь все по модулям

    6 — подготовь дизайн-макет

    7 — общаешься с верстальщиками.

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

    _______________________________________


    Всего Интенсив длится 15, 5 недель. Ближайший поток — 8 октября.

    Хочешь узнать больше, переходи по ссылке https://clck.ru/GcCdy

    C заботой о тебе,
    WDI