С чего начать обучение веб дизайну
Освоить веб-дизайн с нуля: что читать и где учиться?
Рассказываем, кто такой веб-дизайнер, чем занимается и где этому учиться. Бонусом — немного истории.
Что такое веб-дизайн
В начале нулевых веб-дизайн и веб-разработка зачастую шли нераздельно. Но технически веб-дизайн — это подкатегория веб-разработки, которая в первую очередь относится к видимой части сайтов, онлайн-сервисов и приложений.
Веб-дизайн — проектирование и визуализация продуктов, их макетов и прототипов.
Сегодня веб-дизайн не связан с кодом и включает в себя несколько аспектов:
А профессиональный веб-дизайнер вдобавок знает и понимает основные принципы сайтостроения, разбирается в вёрстке и маркетинге. Научиться веб-дизайну с нуля можно за год на курсе «Веб-дизайн с нуля до PRO» онлайн-университета Skillbox.
Пишет про дизайн в Skillbox. Редактор и арт-директор собственного дизайн-бюро. Ведет рассылку о текстах, типографике и дизайне.
Чем занимается
веб-дизайнер
Веб-дизайнер всегда в курсе новейших технологий, знает, куда двигается индустрия, обладает хорошим эстетическим вкусом и постоянно его развивает.
Во-первых, веб-дизайнер — это проектировщик, инженер. Он продумывает логику сайта, проектирует рабочий прототип, тестирует его, чтобы тот получился функциональным, и лишь после этого «оживляет» графику.
Во-вторых, дизайнер применяет на практике принципы юзабилити, чтит стандарты, использует анимацию, подбирает шрифты. Он также продумывает, как пользователь будет взаимодействовать с сайтом, объясняет расположение элементов на странице и отстаивает визуальные решения перед клиентом.
В отличие от графического или UX/UI-дизайнера, веб-дизайнер совмещает функции менеджера и дизайнера. Работа веб-дизайнера состоит из нескольких этапов, о которых мы рассказали ниже. И дополнили рассказ ссылками на наши статьи.
Где учиться
на веб-дизайнера
По запросу «веб-дизайнер» на сайте hh.ru открыто около 800 вакансий, из которых бóльшая часть — в сфере IT и диджитал. Спрос есть и продолжает расти.
Веб-дизайнер — довольно молодая профессия, получить образование по этой специальности в российских вузах проблематично.
На нашем курсе вы научитесь решать задачи реального бизнеса, создавать сильные дизайн-решения для продуктов и брендов, работать с типографикой, верстать контент по сетке, а также соберёте и оформите убедительное портфолио на Behance или вашем сайте. Обучение состоит из двух блоков — «Веб-дизайн с нуля» и «Веб-дизайн PRO», длится оно 12 месяцев.
Вы окунётесь в мир веб-дизайна, освоите популярные графические редакторы, научитесь создавать макеты сайтов и мобильных приложений — и в итоге получите прибыльную и востребованную профессию, даже если раньше никогда этим не занимались. Чтобы стать настоящим веб-дизайнером, нужно освоить несколько основополагающих навыков. Мы подробно расскажем обо всём, а вы под руководством личного наставника научитесь создавать крутые сайты.
История веб-дизайна
История веб-дизайна начиналась в 1990 году, когда британский учёный Тим Бернерс-Ли разработал язык HTML (англ. HyperText Markup Language) — язык гипертекстовой разметки. С его помощью 6 августа 1991 года команда Бернерса-Ли сделала первый в мире сайт — http://info.cern.ch.
Первые сайты представляли собой страницы с текстовыми ссылками, которые вели на другие сайты. Речи о дизайне и вёрстке тогда не шло — у первой версии HTML не было возможностей мультимедиа, которые доступны нам сегодня.
Быстрый прогресс веб-технологий привёл к тому, что в 1993 году сайты стали поддерживать до 16 цветов, появилась возможность добавлять картинки и располагать контент по сетке. Тогда создатели сайтов задумались над тем, как сделать веб-страницы более привлекательными и удобными для пользователей.
В 1994 году появился Консорциум Всемирной паутины, известный как W3C. Эта организация и сегодня разрабатывает и утверждает технологические стандарты интернета.
До 1996 года Консорциум выступал в роли консультативного органа, где крупнейшие мировые компании вырабатывали цельный подход к развитию HTML. Благодаря единым стандартам и набору тегов веб-сайты работают в разных браузерах и на разных устройствах. Сегодня мы называем это кросс-платформенностью.
Настоящий веб-дизайн, близкий к тому, который мы знаем сегодня, появился в период с 1994 по 1998 год. Тогда интернет-технологии совершили бешеный рывок вперёд.
Первая версия браузера Opera.
Появились Internet Explorer 1, JavaScript и PHP.
CSS и запуск технологии Flash, которую стали использовать для векторной графики, игр и мультимедиа.
Релиз Internet Explorer 3 и HTML 4.0 — в мире уже 100 млн пользователей.
Именно технологический прорыв привёл к появлению веб-дизайна.
Как стать веб дизайнером с нуля самостоятельно и бесплатно — 5 шагов
Веб дизайн — это весьма востребованное направление в цифровой индустрии. Хорошим специалистам готовы платить неплохие зарплаты, а на рынке фриланса веб дизайн входит в ТОП популярных услуг. И как вы понимаете хороший веб дизайнер — это далеко НЕ бедный человек. В этой статье я расскажу, как стать веб дизайнером с нуля самостоятельно, исходя из сегодняшних реалий, и занять свое место «под солнцем».
Эта статья будет вам полезна, потому что она позволит структурно подойти к решению данного вопроса. После прочтения у вас будет четкий алгоритм действий, по которому вы сможете двигаться вперед.
Как сказал великий философ Конфуций: «Путь в тысячу миль начинается с первого шага»… И я вас поздравляю, первый шаг вы уже сделали, открыв данную статью. Сейчас вам нужно ее прочитать, вникнуть в суть того, о чем я буду рассказывать и начать применять мои рекомендации в жизни. Только в этом случае вы получите результат и приблизитесь к своей цели.
Базовая подготовка
Если вы совсем новичок и не имеете представления кто такой веб дизайнер, чем он занимается и какие у него обязанности, то первым делом я рекомендую вам углубиться именно в суть профессии. Для этого можете прочитать мою подробную стать на эту тему:
Далее если вы не имеете представления что такое сайты, как они функционируют, что из себя представляют и в чем их отличия, то я рекомендую вам почитать про сайты, поскольку веб дизайнер работает именно с сайтами.
Чтобы немного упростить вам эту задачу можете прочитать еще одну мою статью, в которой я рассказываю про один из типов сайтов — это лендинги. Переходите, читайте, думаю вам будет это полезно.
Как стать веб дизайнером с нуля самостоятельно — 5 шагов
После того, как вы разобрались кто такой веб дизайнер и что такое сайты, самое время переходить непосредственно к стратегии вашего старта в новую для вас профессию. Здесь сделаю небольшое уточнения.
Самое важное — это как можно БЫСТРЕЕ начать, потому что чем дольше вы будете откладывать, тем вероятнее всего вы перегорите этой затеей и забросите начатое дело. Поэтому все следующие рекомендации будут базироваться на том, чтобы как можно быстрее начать действовать.
Шаг 1 — Изучите основную теорию веб дизайна
Я рекомендую начинать обучение именно с теории, а не с изучения программ, как многие советуют это делать. Объясню свою позицию. Освоить графический редактор можно за 2-3 дня, максимум за неделю. Но какой в этом смысл, если вы еще не знаете, что и как там нужно делать. Это все равно что начинать играть в настольную игру, без знания правил. То есть получится ерунда.
К тому же, если вы начнете именно с теории, то уже на первых этапах вы сможете для себя понять, нравится ли вам то, что вы изучаете или нет.
Ваша задача изучить лишь 20% всей ОСНОВНОЙ теории дизайна, которая в итоге даст вам 80% результата.
Это правило Паретта и суть его в том, чтобы сконцентрироваться на самом главном и в перспективе получить максимальный результат.
Что входит в основу теории дизайна, которую вам нужно в первую очередь изучить:
1. Композиция. Это в большей степени о том, как работать с модульной сеткой и направляющими, чтобы композиция вашего дизайн выглядела хорошо.
2. Компоновка. Это о том, как взаимодействовать с элементами дизайна и компоновать их таким образом, чтобы это было удобно и понятно для пользователей.
3. Типографика. Умение работать с текстами — это важный навык, который должен присутствовать у каждого веб дизайнера, потому что на любом сайте есть текстовый контент.
4. Принципы иерархии и контраста. Это одни из самых важных элементов дизайна, потому что с их помощью можно отделять главное от второстепенного и тем самым упрощать восприятие дизайна для пользователей.
5. Цвет. Сочетание цветов и умение грамотно их применять также является важным навыком веб дизайнера.
Я оставлю ссылку на свою статью, в которой рассказываю об основах веб дизайна. Туда как раз входит часть из того, о чем я писал выше. Настоятельно рекомендую вам прочитать, потому что это весьма полезная информация для новичков.
Шаг 2 — Изучите программу Figma для веб дизайна
На этом этапе вам нет смысла изучать все графические редакторы, которыми пользуются дизайнеры. Вам будет достаточно изучить всего одну программу — Figma. Это та программа, которая покроит большинство ваших потребностей в разработке дизайна. Она бесплатная и достаточно проста в освоение.
Не пытайтесь начать свое обучение с изучение фотошопа. Это достаточно сложный графический редактор и вам на первых этапах она уж точно ни к чему. Сконцентрируйтесь на фигме.
Шаг 3 — Начните практиковаться в веб дизайне
Любые знания бесполезны без практики, поэтому важно как можно быстрее начинать практиковаться и набивать руку. Поскольку вы новичок, то у вас вероятнее всего нет никаких заказов, на которых вы могли бы тренироваться.
Поэтому у вас есть 2 способа, как исправить эту ситуацию:
1. Придумывать себе задания. Станьте сами себе заказчиком и придумайте себе задания на разработку дизайна. Например, разработать дизайн для лендинга по аренде строительной техники.
2. Делать редизайн уже существующих сайтов. В рунете огромное количество сайтов с отвратительным дизайном и этим можно пользоваться. Заходите в Яндекс, ищите сайты компаний или небольших организаций и начинаете их перерисовывать и делать свою, улучшенную версию дизайна.
Оба этих способа идеально подходят для начинающих дизайнеров и именно с помощью них я в свое время практиковался сам.
В процессе практики развивайте в себе НАСМОТРЕННОСТЬ.
Ваша задача — создать СВОЙ вариант дизайна, основываясь на ЧУЖОМ ОПЫТЕ, а НЕ придумывать дизайн с нуля.
Для этого смотрите и анализируйте работы других дизайнеров. В этом вам поможет сервис behance — это площадка, на которой собрано огромное количество дизайнерских работ, на любой вкус и цвет.
Почему важна насмотренность? Потому что если вы будете пытаться выдумывать что-то свое, то скорее всего вы сделаете нечто далекое от реальности, поскольку у вас еще очень мало практического опыта.
Дело в том, что у пользователей в интернете есть определенные паттерны поведения и их нужно учитывать. И лучший способ это сделать — смотреть на работы более опытных дизайнеров, анализировать и применять их дизайн решения в своих работах.
Здесь хочу заметить, что насмотренность это НЕ копипаст. То есть да, вы должны смотреть на чужие работы, но вы НЕ должны слепо их копировать. Перерабатывайте чужие решения, адаптируя их под свои задачи, и тогда у вас будет получаться уникальный дизайн, который будет работать на реальных проектах.
Шаг 4 — Составьте портфолио веб дизайнера
Портфолио для дизайнера — это архиважная вещь, поскольку без него вас не существует как дизайнера. Если у вас нет портфолио, то для новичков это приговор, потому что в этом случае вам никто не предложит работу.
Отбирайте самые удавшиеся на ваш взгляд работы и формируйте из них портфолио.
Пусть оно у вас будет «так себе», но это лучше, чем ничего.
Как должны выглядеть работы в портфолио? Здесь опять же я рекомендую вам зайти на behance и посмотреть, как другие дизайнеры оформляют свои работы.
Если вкратце, то каждая ваша работа должна представлять из себя кейс. То есть вам нужно описать весь процесс работы над дизайном: о чем проект, какие были задачи, какие были проблемы, как вы их решили, показать различные артефакты вроде прототипов, показать готовый дизайн и так далее. То есть не просто выложить макет одной страницы сайта (это будет плохо работать), а продемонстрировать процесс вашей работы.
Заводить портфолио я рекомендую тоже на behance. Это и удобно, и бесплатно.
Шаг 5 — Найти первую работу по веб дизайну
Когда у вас уже есть теоретическая база, немного «набита рука» и собрано портфолио, то самое время начинать искать свою первую работу. На старте я рекомендую вам попытаться устроиться в компанию или веб студию, а не идти во фриланс.
В компании вы гораздо быстрее сможете вырасти как специалист, особенно если над вами будет хороший арт-директор, который будет давать вам правильный вектор развития. К тому же в компании вы будете работать с другими дизайнерами и перенимать их опыт.
Потом вы всегда сможете уйти на фриланс, если вам близка философия фриланса, либо же совмещать основную работу с подработками.
Как получить первую работу? Нужно понимать, что никаких секретов здесь нет и прежде всего у вас должно быть огромное желание и упорство. Идете на hh.ru и начинаете отправлять отклики на все дизайнерские вакансии. В отклике пишите сопроводительное письмо с ссылкой на ваше портфолио и небольшой текст о себе. Это хоть немного, но выделит вас среди других кандидатов.
Запаситесь терпением и будьте готовы к огромному количеству отказов. Это морально сложно, и я это прекрасно понимаю, потому что сам через это прошел. Но здесь главное не опускать руки, продолжать искать и верить в свои силы. Параллельно с поиском работы продолжайте практиковаться и улучшать свои навыки.
Это нелегкий путь, но дорогу осилит идущий. В какой-то степени это хорошо, что есть такой фильтр на новичков, потому что в итоге в профессию попадают действительно замотивированные специалисты, которые горят дизайном. Но, с другой стороны, это морально сложно.
Заключение
В этой статье я рассказал вам о том, как стать веб дизайнером с нуля самостоятельно и получить свою первую работу. Спасибо за внимание и успехов вам!
Не забудьте подписаться на мой YouTube и Telegram. Там еще больше полезного материала про дизайн интерфейсов.
Первые шаги в веб-дизайне
В этой статье Максим и Катя расскажут о всем пути новичка в веб-дизайне. Именно они изучают резюме и проводят собеседования с начинающими дизайнерами в Digital Lab.
Шаг 1: Выбираем путь профессионального развития
Максим Зайцев, Head of Digital
Сегодня новички чаще всего выбирают такие варианты профессионального роста:
Онлайн-школы, университеты и курсы
Подходят для обучения дизайну с нуля. Здесь вам расскажут о сетках, композиции, научат работать с графикой и анимацией, готовить макет к верстке, расскажут, что такое UX, как и где искать работу, помогут составить портфолио и т. д.
Работа джуниор-специалистом в студии
Не все готовы брать сотрудников совсем без опыта с целью их обучения. Важно так презентовать себя, чтобы зацепить работодателя и показать ему свой потенциал. Многие ребята пишут в резюме, что готовы работать хоть бесплатно, лишь бы обрасти скилами.
Саморазвитие
Саморазвитие и самообучение никто не отменял, но при трудоустройстве их сложно будет подтвердить. Хороший вариант – набить руку дома и создать классное портфолио. Минус самообучения – отсутствие наставника, который направит, укажет на ошибки и даст ценные советы.
Фриланс
Сразу выйти на фриланс могут только очень уверенные в себе люди. Для получения хороших заказов на биржах тоже нужно портфолио. Без него вам придется начать с маленьких задач с минимальной оплатой или вообще без нее.
Самый лучший вариант – сразу идти работать, а в идеале – комбинировать все четыре способа. Так вы повысите насмотренность, получите базовые навыки, попадете в комьюнити коллег, научитесь общаться с клиентами, работать в команде и т. д.
Катя Журавлева, арт-директор
Если у вас профильное образование, и вы в поиске первой работы, то сценарий развития более менее понятен – у вас уже есть студенческие наработки и базовое понимание рынка. Многие будут готовы взять вас стажером.
Если вы переходите в новую профессию, то, скорее всего, уже успели понять зачем и почему. Узнали чем занимается веб-дизайнер, примерно понимаете, каких знаний и опыта вам не хватает.
В обоих случаях для начала составьте виш-лист компаний и расставьте приоритеты. Изучите вакансии и нужные скилы, чтобы определить, что вы уже умеете, а чему предстоит научиться.
Определитесь с тем, что вам важно, а чем можно пожертвовать. Кто-то выбирает известную компанию, а кто-то ориентируется на список своих обязанностей и вес проектов, кому-то важны стабильная ЗП, соцпакет, разные бонусы, а кому-то – формат работы (удаленный или офисный).
Задайте вектор движения и помните, что деньги не должны быть главным критерием, ведь возможность развития для новичка гораздо важнее.
Тут можно посмотреть вакансии:
Шаг 2: Прокачиваем hard и soft скилы
Катя Журавлева, арт-директор
Портрета идеального сотрудника не существует, но мы ждем от новичков базовых вещей:
Не нужно бояться показаться глупым, задавать вопросы и говорить о своих проблемах. Мы понимаем, что не знать все – нормально.
Шаг 3: Создаем хорошее портфолио
Катя Журавлева, арт-директор
Заявите о себе на популярных площадках: Behance, Dribbble, Templatemonster, HeadHunter. Лучше не лениться и создать аккаунты на всех доступных площадках. Шансы, что вас заметят, значительно вырастут.
Если прикладываете портфолио к резюме, уделите особое внимание формату: соберите работы в один документ, не давайте ссылку на архив или «ЯндексДиск» с кучей папок.
В идеале – соберите свой сайт на тильде и разместите везде ссылку на него. Еще несколько советов:
Максим Зайцев, Head of Digital
Учтите основные моменты:
Создайте разноплановое портфолио
Не нужно указывать три сайта застройщиков или приложений доставки еды, лучше добавить работы из разных областей и направлений.
Постарайтесь выделиться
На онлайн-курсах всех учат одному и тому же (например, созданию сайта цветочного магазина, который мы видим из резюме в резюме). Чтобы получить работу, нужно выделиться среди потока желающих.
За 16 дней (с автоподнятием!) вакансию руководителя проектов просмотрели 469 человек, 100 – откликнулись. За 2 дня вакансия дизайнера интерфейсов набрала 594 просмотра и 137 откликов.
Большинство из 137 откликов – люди с одинаковыми работами и шаблонными резюме, которые в итоге сливаются в одного человека. Да, все заполнено нормально, но это поток. Поэтому тупо действовать по скрипту – не ок.
Проработайте детали
Мы понимаем, что у джуна вряд ли были реальные проекты, но можем оценить подход к портфолио.
Например, вы решили создать сайт вымышленного автосервиса. Можно проработать все аспекты и детали: придумать историю клиента и название сайта, цели и задачи, которые перед вами стояли, рассказать, как (и почему именно так) вы их решили, добавить отзывы с реальных сайтов автосервисов.
А можно создать сайт с названием «Сайт автосервиса» без описания, а на отзывах к нему разместить то же фото, что и в вашем резюме.
Гораздо интереснее, когда человек заморочился и проделал огненную (пусть даже ненастоящую) работу.
Сделайте упор на качество
Не создавайте многостраничный маркетплейс с миллиардом элементов. Так выше шанс допустить кучу ошибок. Мы понимаем уровень джуна и выберем из огромного потока именно того, кто сделал небольшой сайт чище и правильнее. Но и слишком простой лэндинг делать не надо: найдите золотую середину.
Учтите сферу
Адекватно оцените, в чем вы хорошо разбираетесь, что вам ближе. Не делайте сайт для «Фортнайта», если не имеете представления об игровой сфере. Делайте то, что понимаете.
Покажите больше
Постарайтесь показать не только конечный продукт: не стоит прикладывать по 5–7 главных страниц сайтов. Мы хотим увидеть весь процесс работы, сетку, шрифты.
Оформите презентацию, рассказав о поставленной задаче и выбранном решении. Не нужно писать «Войну и мир», тезисов будет достаточно. Так вы покажете комплексный подход к работе.
Шаг 4: Размещаем портфолио
Максим Зайцев, Head of Digital
Подготовьте список компаний, которые вы рассматриваете. Найдите их сотрудников, занимающихся наймом дизайнеров, и разошлите им портфолио.
Учтите, что работа в студии сложнее работы на стороне клиента, но там вы научитесь выполнять более разноплановые задачи и взаимодействовать со множеством коллег.
Если хотите попробовать себя на фрилансе, обратите внимание на популярные площадки, где тусуется комьюнити. Туда точно заглядывают и ваши потенциальные работодатели.
Шаг 5: Составляем резюме и пишем сопроводительное письмо
Максим Зайцев, Head of Digital
1. Не используйте шаблонные фразы (готов обучаться, целеустремленный и т. п.).
2. Указывайте только релевантный или смежный опыт (графический дизайн, иллюстрация), не перечисляйте все предыдущие места работы.
Такая информация будет лишней для того, кто ищет веб-дизайнера:
Хороший пример резюме практически без профильного, но со смежным опытом:
4. Перечисляйте ваши скилы, подходящие именно для этой должности.
5. Прикладывайте подтверждение пройденных обучений.
6. Пишите резюме и сопроводительное письмо на русском, а желаемую зарплату указывайте в рублях.
7. Ставьте ссылку на портфолио в самое начало резюме. Проверьте, что она работает и все отображается корректно.
8. Указывайте профильные хобби: стрит-арт, художественное вязание, посещение выставок и т. д. Это даст понимание, что вы живете креативом и творчеством и в свободное время.
Плохой пример – много слов, но нет ссылки на портфолио:
Еще один плохой пример – сразу отказ:
Неплохой пример – все четко и по делу, смущают только ошибки в тексте:
Катя Журавлева, арт-директор
Пример «живого» и ёмкого сопроводительного письма:
Хорошие примеры портфолио:
Шаг 6: Готовимся к собеседованию
Максим Зайцев, Head of Digital
На собеседовании джуниор-дизайнеров мы в первую очередь будем смотреть на человеческие качества.
Покритикуем работы из портфолио, чтобы увидеть, как вы воспринимаете критику. Из-за отсутствия опыта джунов первое время направляют, дают советы, указывают на ошибки. Важно понять, как человек на это реагирует.
Спросим, почему сделано именно так и как еще можно было решить эту задачу. Мы не ждем конкретный ответ, но хотим узнать, как человек рассуждает.
Советуем выдохнуть: вы пришли просто пообщаться, поэтому будьте собой.
Катя Журавлева, арт-директор
Подготовьте небольшую речь о себе и своих работах (на 10 минут). Заранее продумайте ответы на частые вопросы. Расскажите, почему решили пойти сюда, что ожидаете от работы и как представляете обычный рабочий день. Подготовьте вопросы со своей стороны.
Напомню базовые вещи:
Шаг 7: Начинаем работать
Максим Зайцев, Head of Digital
Работа начнется под менторством старшего дизайнера. Вам придется делать все подряд: презентации, оформления, что-то для внутренних нужд компании, адаптивы. Эта работа, с которой трудно не справиться, а в случае неудачи не случится ничего страшного.
Постепенно задачи будут становиться сложнее. Не стоит забывать и о самообучении: развивайте насмотренность, читайте – свежие идеи нужны всегда.
Катя Журавлева, арт-директор
В первые дни мы знакомим новичков с командой и проектами, рассказываем о процессах, даем возможность привыкнуть и освоиться.
Затем начинаем погружать в работу и давать небольшие задачи, курируя все этапы их выполнения. Мы не бросаем джунов и не заставляем их разбираться во всем самостоятельно. Продолжаем развитиеКатя Журавлева, арт-директорНесколько советов тем, кто хочет продолжать свое профессиональное развитие: