Веб-дизайн: с чего начать новичку, если нет представления о профессии?

Функциональные элементы веб дизайна

Первым и самым главным функциональным элементом является навигация.

Навигация

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

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

Анимация

Анимация служит для того, чтобы взаимодействие пользователя с интерфейсом было более интересным

Помимо этого, анимация помогает акцентировать внимание пользователей на определенной части дизайна или информации

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

Помимо веб дизайна существует еще такое направление как графический дизайн. Давайте разберемся в чем между ними разница

Это все что касается элементов веб дизайна. Помимо веб дизайна существует еще такое направление как графический дизайн. Давайте разберемся в чем между ними разница.

Определитесь с типом сайта

Лендинг

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

Яркий пример Landing Page — вся основная информация на одной странице

Корпоративный сайт

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

Сайты банков — классический пример корпоративных сайтов

Сайты банков — классический пример корпоративных сайтов

Эти сайты знакомы каждому: AliExpress, OZON, «М.Видео» и десятки других аналогичных. Главный вызов дизайнеру здесь — в объёмах информации и товаров, а также в проектировании страницы заказа.

Перспективы и карьерный рост

Специалисты, которые занимают должность веб-дизайнера, могут развивать свою профессиональную карьеру несколькими разными способами. В первую очередь они могут продвигаться по карьерной лестнице как наемные работники, занимать руководящие должности. Кроме того, существует вариант открытия собственного бизнеса – в этом случае вы сами становитесь работодателями. Также вы можете заниматься консультационной работой.

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

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

Заработки веб дизайнера

Зарплата зависит от того, какой способ заработка выбрали. Например, на фрилансе это  могут быть заказы от 100 руб до 30 000 руб. за один заказ. На эту цифру влияет опыт работы, а также площадка, где Вы ищите заказчика. Цены у всех разные.

Если решите устроиться на постоянную работу, то там тоже ценник может колебаться в районе 35 000 до 300 000 руб. Это зависит от работодателя, его требований, опыта работы дизайнера. Новичок сначала будет зарабатывать в районе 35 000 – 40 000 руб.

Например, на сайте hh.ru Вы можете увидеть предложения о поиске сотрудников в этом ценовом диапазоне:

А можно открыть свою дизайн-студию, тут возможны бОльшие прибыли.

Уровни веб-дизайнера

Как и в любой работе, в профессии есть определённые уровни. Всего их три — новичок, средний и профессионал.

1. Junior – дизайнер, который недавно начал работу, только осваивает область. Но даже на уровне «новичок» уже должны быть определённые знания (работа с компьютером и программами, знать базу в дизайне). В начале карьеры рекомендуется работать помощником у профессионального веб-дизайнера, у которого уже имеется опыт. При хорошей и качественной работе, портфолио значительно пополнится и работа будет обеспечена.
2. Средний уровень — после уровня помощника, можно уходить в «свободное плавание». Уровень «Middle» достигается при большом портфолио с качественными работами. Среднему уровню не дают профессиональные работы, но сотрудничество с салонами или агенствами возможно. Главное — зарекомендовать себя как хорошего исполнителем, пунктуального человека.
3. Senior – последний этап в карьере, при котором можно стать высокооплачиваемым дизайнером. Senior увеличивает шансы иметь высокооплачиваемую работу с популярным компаниями или стать руководителем команды (при масштабной работе).

Сетка

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

The Design Genome Project by InVision

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

На эти колонки стоит ориентироваться и выравнивать информацию. Но сетка — это не абсолютное правило, иногда от нее можно и нужно отходить.

Как стать веб дизайнером?

1. Изучить рисование.

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

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

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

2. Изучить теорию веб дизайна.

Когда дело доходит до изучения новой профессии, важно сначала хорошо изучить её основы. Хорошо разработанные веб-сайты следуют строгим правилам UX-дизайна

Эти сайты визуально привлекательны и удобны для посетителей. Хороший дизайн, заставит посетителей оставаться на сайте и возвращаться на него снова.

Плохой дизайн, заставит их отправиться куда-то еще.

Самый первый шаг, чтобы стать веб дизайнером, это книга Стива Круга – Не заставляйте меня думать. Эта книга, настоящая библия для веб дизайнера. И хотя он выпустилась уже давно, но информация с этой книги не устарела, и думаю, ещё совсем не скоро устареет (ну разве что, законы физики изменятся)).

3. Изучить макетирование и проектирование.

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

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

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

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

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

4. Изучить UX дизайн.

Хороший UX дизайн (англ. user experience — опыт пользователя) заставит посетителей оставаться на вашем сайте. Плохой заставит их пойти к кому-то другому. Понимание принципов UX дизайна заставит ваш сайт вести себя так, как этого хотят и ожидают пользователи.

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

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

Хотя UX дизайнер, это обычно отдельная профессия, но тут нужно учитывать два аспекта:

1) В небольшой компании, может просто не быть второго специалиста. И тогда, и веб дизайн и UX дизайн, ложится на плечи одного сотрудника.

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

5. Научится пользоваться инструментами для веб дизайна.

Веб дизайнеру приходится работать со многими инструментами. В первую очередь, это конечно  Adobe Photoshop и Adobe Illustrator.

Кроме этих программ, нужно уметь пользоваться различными онлайн конструкторами сайтов, знать системы управления сайтами (в первую очередь WordPress).

Уметь пользоваться специфичным софтом для создания макетов страниц (Mockingbird, Gliffy, Creately, Sketch и тому подобные.)

Хорошо знать HTML и CSS. Хотя вёрстка сайта, это не работа веб дизайнера, но HTML и CSS знать обязательно, поскольку веб дизайнеру приходится тесно сотрудничать с верстальщиками сайта.

Как заработать на веб-дизайне

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

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

Развитие своего проекта

Собственный проект (например, сайт или блог) предполагает стартовые инвестиции. Например, агентство ONY на первоначальном этапе потратило 5 000 долларов.

Практически в любом случае понадобится команда хороших специалистов: программистов, маркетологов, контент-менеджеров.

Если сайт будет достаточно посещаемым, он может приносить практически неограниченных доход за счет рекламы, партнёрских программ или продажи через него товаров.

Оказание частных услуг

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

Артур Андрейко рассказывает, сколько получает веб-дизайнер:

Трудоустройство по специальности

На форумах по вебу многие, позиционирующие себя как опытные разработчики, советуют новичкам устроиться на оффлайн-работу в студию. Скорее всего, возьмут помощником или стажером – младшим веб-дизайнером. Средняя зарплата от 35 000 рублей, следует из вакансий, размещенных на hh.ru. В Москве платят больше. Возможна удаленная работа, то есть создание проектов вне офиса.

Как происходит работа

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

4.1. Встреча с заказчиком

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

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

Для начала вы обсуждаете проект. Узнаете, что от вас хотят. Обычно клиент не знает и не понимает, что ему нужно. Он в этом совершенно не виноват, задавать наводящие вопросы – ваша работа.

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

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

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

Со временем в вашей голове при первой фразе заказчика начнут формироваться те или иные картинки с вариантами предоставления информации. Поначалу, скорее всего, вы будете тратить чуть больше времени на исправление непонятных недочетов, а также игру: «Угадай чего хочет заказчик и что ему не нравится». Вам не удастся оговаривать все и сразу, не переживайте. Опыт придет со временем, а вместе с ним и понимание.

4.2. Разработка прототипа сайта

Дизайнеры создают облик сайта. Материалы, как правило, предоставляются заказчиком, а потом обрабатываются в фотошопе

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

Как правило, создается несколько вариантов дизайна, сколько — уточняйте сразу.

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

По сути, это и называется веб-дизайном: создание и разработка композиции.

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

На этом работа дизайнера заканчивается, далее приступают верстальщики.

«И за это платят?» — спросите вы. Да! И очень неплохие деньги.

В крупных компаниях работают именно так. Если вы занимаетесь частно, то можете нарисовать эскиз даже в Paint, а затем приступать к дальнейшей работе – верстке.

4.3. Верстка

Превращение рисунка в готовый сайт. Это не так сложно, как может показаться на первый взгляд, многое зависит от программы, помогающий в создании сайта (CMS или движок). Однако, вам придется этому научиться и изучить не один самоучитель по веб-дизайну. Но будьте уверены, это окупится!

Два вредных мифа о дизайне

Миф первый: нельзя стать дизайнером без образования

Миф коварный, потому что дьявол здесь кроется в формулировке: для многих до сих пор «образование» — это образование в вузе, и никакое другое. Если не получил «корочку» вуза, где написано, что ты дизайнер, — значит, самозванец.

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

Вот например, история о том, как бывшая сотрудница Microsoft самостоятельно выучилась на дизайнера и сменила профессию. Теперь она ведёт свой блог (на английском), где делится полезной информацией с другими новичками.

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

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

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

Миф второй: чтобы стать дизайнером, нужен врождённый талант

Талант и задатки действительно многое упрощают, но эти качества можно развивать. Кроме того, даже в дизайне нельзя успешно работать на одном таланте, без труда и упорства. Об этом, кстати, рассказывают в интервью многие известные дизайнеры. Нужно много знаний, навыков и умений. Даже если какой-то проект делается «одной левой», обычно за этим стоят годы развития в профессии и опыт.

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

Верстка

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

Важно!

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

Чтобы сверстать страницу хорошо, можно пользоваться такими приемами:

Группировать однородные элементы — ставить их ближе друг к другу, чтобы пользователю было легче воспринимать информацию.

Создавать контраст с помощью шрифтов, цветов, размеров. Так сайт не выглядит однообразным и монотонным

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

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

Atelier: beauty store on Dribbble

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

Ресурсы

• Якорные объекты: баланс в композиции.
• Ководство: Теория близости.
• Если нет времени изучать верстку и типографику.
• Правило близости.

Книги

• Дизайн‑бюро Артема Горбунова. Типографика и верстка.
• Тим Харровер. Настольная книга газетного дизайнера.
• Йозеф Мюллер-Брокманн. Модульные системы в графическом дизайне.

ТОП-5 бесплатных онлайн-курсов по веб-дизайну от GeekBrains для новичков

① «Как сделать инфографику в PowerPoint из скучного отчета

Программа: вы создадите отчет-инфографику в PowerPoint, а кураторы подскажут, как переделать перегруженные отчетные слайды в PowerPoint. Изучите анализ и структурирование информации. Создадите акценты и напишите правильный текст.

Плюсы
Бесплатный онлайн-интенсив
Сделаете из сложного отчета красивую инфографику в PowerPoint
Ускорите работу в PowerPoint на 200% с помощью горячих клавиш
Видеозаписи всех онлайн-занятий останутся с вами
Выдаётся сертификат об окончании обучения

Минусы
Не обнаружено

Преподаватель: Ким Воронин [] — Ex-Руководитель группы визуальных коммуникаций в Билайне и ВТБ.

Средние оценки тех, кто прошёл курс
Программа 4.9/5

Преподаватель (Ким Воронин) 4.9/5

Итого 4.9 Максимальная оценка 5 баллов

② «Основы веб-дизайна

Программа: в данном бесплатном интенсиве по веб-дизайну, вас ожидает 1 урок. Главная цель этого курса, научиться созданию Landing page и понять основные направления в дизайнерском мире.

Плюсы
Бесплатный курс
Советы и рекомендации для дальнейшего развития
Выдача сертификата
Популярный курс (более 25 000 учеников закончили данный курс)

Минусы
Не обнаружены

Преподаватели интенсива: Алевтина Шаталова | Алиса Погарская | Наталья Курандина .

Средние оценки тех, кто прошёл курс
Программа 4.8/5

Преподаватель (Алевтина Шаталова) 4.8/5

Преподаватель (Алиса Погарская) 4.8/5

Преподаватель (Наталья Курандина) 4.6/5

Итого 4.8 Максимальная оценка 5 баллов

③ «Профессия 2D-художник: создание своего первого концепт-арта

Программа: в бесплатном онлайн-курсе всего 1 урок. Подойдёт как выпускникам технических вузов, так и художественных училищ. Вы создадите свой первый концепт-арт.

Плюсы
Бесплатный онлайн-курс
Выдача сертификата
Повысите свою квалификацию (если уже есть опыт)
Короткий, сжатый видеокурс без «воды»

Минусы
Не имеется

Преподаватель: Алексей Грибов — декан, художник.

Средние оценки тех, кто прошёл курс
Программа 4.7/5

Преподаватель (Алексей Грибов) 4.7/5

Итого 4.7 Максимальная оценка 5 баллов

④ «От теории к первому эскизу: дизайн жилых и общественных интерьеров

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

Плюсы
Бесплатный интенсив
Создадите эскиз интерьера для портфолио
Получите мастер-класс от ведущего специалиста
Практика от Mail.ru Group

Минусы
Нет выдачи сертификата

Преподаватель: Ирина Сафонова — архитектор и исследователь. Выпускница МАрхИ и Архитектурной Ассоциации в Лондоне (AA).

Средние оценки тех, кто прошёл курс
Программа 4.9/5

Преподаватель (Ирина Сафонова) 4.9/5

Итого 4.9 Максимальная оценка 5 баллов

⑤ «Интенсив по 3D-моделированию

Программа: в данном курсе вас ожидает 4 урока в видеоформате. В вводной части вы узнаете, что такое промышленный (предметный) дизайн и какое место в нём занимает 3D-моделирование с использованием 3ds Max. Данные занятия помогут вам освоить базовые навыки моделирования и начать работу с объемной композицией 3D-модели по технологическим правилам в программе 3ds Max.

Плюсы
Бесплатный интенсив
Опытный преподаватель
Насыщенная практика

Минусы
Отсутствие сертификата по окончанию онлайн курса

Преподаватель: Семён Нахаев — промышленный дизайнер. С 2016 года ведущий дизайнер-инженер компании «TryFit Technologies» в Технопарке Сколково.

Средние оценки тех, кто прошёл курс
Программа 4.8/5

Преподаватель (Семён Нахаев) 4.7/5

Итого 4.8 Максимальная оценка 5 баллов

Онлайн-школа веб-дизайна

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

Общедоступность: не важно, где живет ученик. Равенство: нет критериев по предыдущему обучению, возрасту

Комфорт: нет привязки к месту и времени. Индивидуальный темп обучения: уроки подстраиваются под ученика, а не наоборот.

К минусам можно отнести:

1. Необходимость в высоком уровне самодисциплины.
2. Возможные проблемы с интернетом, которые помешают восприятию информации.
3. Больше теории, чем практики.
4. Диплом, выдаваемый по окончанию курсов, при официальном трудоустройстве котируется меньше, чем документ вуза.

Преподаватель онлайн-школы WebSkillers рассказал, как научиться веб-дизайну:

Дизайн сайта определяет его цель

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

Ниже рассмотрим наиболее распространённые типы сайтов.

Сайт-визитка (landing page)

Одностраничник, который обычно имеет одно целевое действие — подать заявку/заказать звонок. Самый простой в техническом исполнении, содержит всякие описания, преимущества, партнёров и пр. Здесь есть где разгуляться дизайнеру — одностраничник должен быть красивым, запоминающимся и с wow-эффектом, чтобы посетитель оставил-таки заявку.

Конференция Design is Frontend

2 июня в 18:00, Онлайн, Беcплатно

tproger.ru

События и курсы на tproger.ru

Пример лендинга программы лояльности «Совести»:

https://sovest.ru/loyalty_info

Корпоративный сайт

Создаётся компаниями, чтобы рассказать клиентам о себе — кто мы такие, чем занимаемся, наша миссия, контакты, структура, портфолио и прочее. Может быть нужен

• для информирования, чтобы клиент в случае необходимости мог прочитать про компанию;
• для продаж (портфолио, контакты, заявка на обратный звонок);
• как вариант, для лояльности (ведение блога).

Уже более сложный, чем визитка. И нужно, как минимум, продумать удобную навигацию по всем разделам. Скорее всего, для дизайна корпоративного сайта вам дадут гайдлайны или некий брендбук, так что экспериментировать с цветами и шрифтами не придётся.

Пример — сайт карты рассрочки «Совесть» включает в себя основную информацию о продукте, блог, а также сервисную часть с личным кабинетом, графиком платежей и пополнением карты.

https://sovest.ru/

Сайт-витрина

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

https://www.marykay.ru

Это витрина с корзиной и возможностью онлайн-оплаты товаров. Имеет более сервисный характер, чем предыдущие (не только информирование). Здесь UX и юзабилити играют более важную роль, поскольку пользователь остаётся наедине с сайтом и решает с помощью него свою задачу, тогда как на витрине и одностраничнике покупку могут докрутить специалисты колл-центра.

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

https://aliexpress.ru

Портал

Сайт, который объединяет разные информационные и сервисные функции — почту, новости, блог, вакансии, форумы и др. Пример — Яндекс, Хабр, даже Вконтакте тоже можно назвать порталом.

Как думаете, насколько сложно такое сделать? Даже если это будет не настолько крупный портал, для его создания нужно не только сделать продуманные с точки зрения UI и UX макеты, но и иметь немалые технические мощности, ведь предполагается, что посещаемость у порталов высокая.

Пример — сайт Мэра Москвы, там и новости, и статьи, и услуги.

https://www.mos.ru

Важность навыков веб-программирования

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

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

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

Что должен изучать начинающий веб-дизайнер

Основой для начинающих является изучение UX и UI дизайна.

В крупных компаниях графикой, версткой, макетированием, UX и UI дисциплинами могут заниматься разные специалисты и даже разные отделы, которые работают совместно и ежедневно контактируют. Крутой веб-дизайнер, а особенно фрилансер, должен обладать всеми этими навыками. Ему нужно не только интуитивно чувствовать запросы потребителей, но и оттачивать мастерство создания интерфейса.

Рассмотрим подробнее, что такое UX и UI.

UX-дизайн

UX – User Experience (Опыт Пользователя) – помогает понять, как именно пользователь воспринимает дизайн и интерфейс проекта. Сайт, разработанный на основе UX-дизайна, должен быть удобным, понятным и приносить клиенту удовольствие от использования.

Для веб-дизайнера UX служит основой создания сайта. Недостаточно будет создать только графический материал. Необходим целый макет, или “каркас” интерфейса, для полного восприятия проекта пользователем.

Например, случается, что нарочито небрежный интерфейс онлайн-магазина собирает намного больше посетителей, чем торговая площадка с “вылизанным” дизайном. Это значит, что web-специалист хорошо проработал основу UX и понял, что хотят видеть клиенты и зачем им это нужно.

Это видео поможет вам узнать больше про UX-дизайн:

UI-дизайн

UI – User Interface Design (Пользовательский Интерфейс) определяет физические характеристики и визуальное исполнение сайта

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

Наполняет сайт картинками, аудио- и видеоматериалами. При этом он отвечает не только за вкусовое исполнение, но и за юзабилити (удобство использования).

Окончив курсы по UX / UI дизайну, вы сами сможете проектировать интерфейсы, где привлекательность для пользователя не менее важна, чем внешний вид ресурса.

Соберите информацию по теме

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

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

Вот несколько полезных книг:

• Дональд Норман. «Дизайн привычных вещей»
• Майкл Бейрут. «Теперь вы это видите и другие эссе о дизайне»
• Робин Уильямс. «Дизайн для недизайнеров»
• «Слово дизайнеру». Сборник
• Марк Монтейро. «Дизайн — это работа»

А вот несколько сайтов (но не ограничивайтесь только ими):

• Design & Illustration — много уроков и полезных материалов по дизайну.
• Дизайн Мания» — сайт о веб-дизайне. Много полезных статей, а также подборки иконок, логотипов, шрифтов и так далее.
• A List Apart — коллективный блог. Статьи по веб-дизайну, написанные разными авторами.
• noupe.com — ещё один сайт для вебдизайнеров.
• Logo Design Love — кладезь вдохновения для графического дизайнера. Там собрано огромное количество логотипов. У каждого логотипа есть небольшое описание, из которого можно узнать, как возникла эта идея.
• I Love Typography — сайт о типографике. Полезен всем, кто работает со шрифтами.
• UX journal — сайт о продуктовом дизайне (UX/UI), брендинге и аналитике. Много материалов по дизайну интерфейсов.
• Elle Decoration — сайт журнала по дизайну интерьера.

Как стать гейм дизайнером с нуля

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

• ВУЗы.
• Специализированные онлайн-курсы.
• Самообразование.

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

Высшие учебные заведения

Эффективный способ получить знания – пройти обучение в ВУЗе России. Однако следует учитывать, что от поступления до выпуска пройдет несколько лет. За это время будут даны базовые знания, которые необходимы гейм дизайнеру для успешного развития идеи в компьютерную игру.

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

Специализированные онлайн-курсы

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

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

Важно всегда держать руку на пульсе и развиваться в выбранной профессии

Специализированные онлайн-курсы – это отличная возможность получить профессию гейм дизайнера с нуля и за короткое время. Большинство курсов гарантируют трудоустройство после получения диплома.

Программа обучения рассчитана на 17 месяцев. Есть возможность воспользоваться рассрочкой. По завершению гарантировано трудоустройство. Подходит для новичков и начинающих гейм дизайнеров.

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

Во время обучения формируется портфолио из шести работ по разным направлениям.

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

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

За 8 месяцев студенты осваивают профессию геймдизайнера с нуля, начиная от разработки идеи и заканчивая балансировкой и маркетингом. По итогу обучения у каждого студента будет разработан прототип собственной игры. Кроме этого, будет подготовлен пакет необходимой документации для запуска игры.

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

КУРС	ОСОБЕННОСТИ	РАССРОЧКА
Geekbrains 5/5	6 проектов в портфолио; Трудоустройство после обучения; Онлайн-вебинары, 2 раза в неделю.	Возможна от 6 431 ₽/месяц
Skillbox 4.5/5	Обучение на практике; Доступ к курсу навсегда; Помощь в трудоустройстве.	Возможна от 5 236 ₽/месяц
Нетология 5/5	Уровень: с нуля; Помощь в трудоустройстве; Удостоверение о повышении квалификации.	Возможна от 3 996 ₽/месяц