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

Делимся только своим опытом из практики студии ONE PAGE.

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

А в конце статьи, в качестве бонуса, тебя ждёт ссылка на все материалы, о которых мы здесь рассказываем.

С чего начать уже сегодня

Анализ предмета

Если ты совсем нулевой и хочешь освоить профессию, то начинать ты можешь прямо здесь и сейчас. Есть одно полезное упражнение, мы назвали его “Анализ предмета”. Смотри, всё, что нас окружает, придумано дизайнерами: стол, микрофон, окно, диван, кружка, баннер в метро…Ты смотришь на предмет и представляешь, как он создавался. Возьми любой предмет рядом с тобой и начни анализировать. Почему это именно так сделано, почему не по-другому, а, может, это как-то улучшить можно. Важно проговаривать всё вслух: какого цвета, какой формы, размера, большой, круглый, тяжёлый, из какого материала сделан. Дальше функции: для чего он нужен, удобно ли им пользоваться и т.п. 

В общем, бери кружку со стола и вперёд!

Какие программы изучать?

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

Но в изучении программ всё-таки есть своя логика и последовательность:

1. Фигма - абсолютно бесплатная и самая беспроблемная программа. У неё маленькие технические требования, в отличие от фотошопа, имеется онлайн и десктопная версия. Новичкам мы рекомендуем начинать именно с неё. Во-первых, в Фигме простой функционал и, во-вторых, она заточена именно на создание сайтов и приложений. К тому же, в интернете множество бесплатных обучающих видео по инструментарию и работе в Фигме.
2. Фотошоп. На начальном этапе он не нужен, но по сравнению с Фигмой обладает более широким функционалом. Поэтому веб-дизайнер, который умеет работать в Фотошопе, конечно, ценится. Фотошоп больше ориентирован на работу с растровой графикой и изображениями. Для того, чтобы ты научился создавать какие-то эффекты, обрабатывать фотографии, людей, портреты. Не стоит сразу бросаться его изучать, это довольно сложная программа. На первом этапе тебе нужно хорошо освоить и потренировать более простые навыки, не требующие знание фотошопа. Начни с Фигмы, и после этого тебе будет намного легче разобраться в любой другой программе. 
3. Иллюстратор. Ещё одна программа, которую желательно освоить. Но это уж точно не первостепенно. После Фигмы можешь изучать параллельно с Фотошопом. Эта программа необходима дизайнеру для работы с векторной графикой. Чтобы, например, ты смог открыть логотипы или баннеры в формате eps, умел с ними работать и правильно экспортировать.

Инструментарии всех программ схожи между собой. Поэтому, если ты ОТ и ДО освоишь одну, то следующая у тебя не займёт много времени.

Резюме:

Начинай прямо сейчас с упражнения “Анализ предмета”. Ты можешь делать его в любое время и в любом месте: на улице, в метро, в машине, в кафе, на работе. Из программ начинай осваивать Фигму. Если у тебя возникают вопросы, просто гугли. Поверь, все ответы ты без труда найдёшь в открытом доступе, и не нужно ждать ниоткуда помощи. Остальные программы пока не трогай и читай дальше, что ещё нужно изучать в самом начале.

Что конкретно изучать

Модульная сетка

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

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

3 темы - 3 кита веб-дизайна:

1. Правила композиции

2. Правила типографики

3. Теория и психология цвета

Остановимся на каждой подробнее.

1. Композиция. Это правила расположения и компоновки объектов на макете, исходя из соображений эстетики и логики. В этом разделе ты научишься управлять глубиной объектов. Например, как убрать предмет на задний фон и, наоборот, как сделать объект крупнее и переместить его на передний фон. Как сделать тени у объектов, чтобы дизайн казался объёмным. Научишься работать с якорными точками, то есть расставлять акценты, чтобы зацепить взгляд человека и управлять его вниманием. Что он должен увидеть сначала, что потом и т.д. Это довольно большая тема, советуем в неё углубиться и отнестись со всей серьёзностью.

2. Типографика. Это работа со шрифтами: размеры, правильные отступы, чтобы всё смотрелось ровно и органично. На наш взгляд, это наиболее важная тема из трёх. Потому что ошибки в типографике всегда очень заметны. Можно немножко подзабить на композицию и цвета, но если всё криво и косо со шрифтами, это катастрофа.

Существует множество правил типографики, но очень важно освоить и соблюдать всего 2. И тогда у тебя всё будет хорошо:

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

У всех новичков проблема с типографикой, мы очень часто сталкиваемся с этим. Вот приходит дизайнер на собеседование. Он всё изучал, у него там всё пестрит и дизайн просто вау. Но какое-то всё кривое, косое… Это типографика. А если дизайнер "на отлично" освоит типографику, выучит все правила, сможет их правильно применять и работать с ними, то у него даже чёрно-белый сайт будет смотреться намного приятнее, чем цветной и яркий.

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

Итак, резюмируем, что же тебе следует изучать 

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

Практические упражнения

1. Мудборд

Начинаем работу с мудборда. В переводе с английского это “доска настроения”. Придумай тему, а лучше представь, что заказчик заказал тебе сайт, например, по услуге “Строительство загородных домов”. Сначала ты находишь ассоциации, которые вызывает эта тема, и записываешь их. Например, это может быть лето, трава, деревья, дети во дворе, шашлыки, озеро…Также отмечаешь эмоции: радость, отдых, кайф, релакс, тепло. Предметы: природные материалы, дерево, камень, бетон, кирпич, окна, забор. Цвета: это либо зеленый, либо голубой, то есть цвета травы, неба, возможно, жёлтый, цвет солнца. В общем, всё это вспоминаешь и детально прописываешь. Это делается для того, чтобы сформировать поисковые запросы, с которыми ты пойдешь на стоки и будешь искать контент по своей теме.

На стоках ты уже ищешь изображения и делаешь подборки по цветам и стилистике. Мы не будем здесь останавливаться на этом. Подробнее про мудборд можешь посмотреть в этом видео.

2. Повторяй чужое

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

Новичкам не нужно ничего придумывать, ты ещё успеешь это сделать. А пока тренируй навык, повторяя чужие работы. Находишь какой-то классный сайт, лучше какой-то известной компании, чтобы он точно был классным) И разрабатываешь такой же сайт с нуля. То есть видишь фон, ищешь точно такой же фон, фоновые изображения, либо что-то похожее; видишь там градиентом что-то затемнено, делаешь так же. Самое главное в этом упражнении — не включить яждизайнера и не начать делать что-то по-другому. Фишка этого упражнения — сделать один в один, это прям важно. Так ты просто быстрее разберешься в инструментах Фигмы. Например, тебе нужно будет сделать кнопку такую же, как на сайте. Ты её нигде не найдёшь и начнёшь делать сам. 

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

3. Продолжай чужой макет

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

4. Редизайн сайта

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

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

Пошагово: находишь нормальный сайт, берешь оттуда весь текст, все объекты и пытаешься по-новому все это дело расположить и реализовать. Может быть, цвета другие подобрать, картинки, иконки, текст где-то поправить. Ну и в конце не забудь проверить себя, ответив на 2 вопроса:

• Получилось действительно лучше? Почему?
• Дизайн действительно отличается или просто две кнопки переехали?

Резюме:

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

Развитие насмотренности

Что такое насмотренность и зачем её развивать? Сначала ответим на этот вопрос, а потом дадим тебе супер эффективное упражнение, которое придумали сами и даём всем нашим ученикам.

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

Когда-то мы придумали суперэффективное упражнение по развитию насмотренности и так его и назвали “Дневник нормы-не нормы”. Открой Excel и создай 2 колонки: норма и не норма. Добавь туда критерии, по которым будешь оценивать. Например, композиция, иерархия, шрифты, отступы, цвета, изображения, общее впечатление, ну и т.д. Выбери 5 сайтов, которые ты считаешь хорошими, и 5 плохих. Ориентируйся просто на свои впечатления, на глаз. Ну и описывай эти сайты по каждому критерию. В результате ты получаешь аргументированное подтверждение, почему этот сайт плохой или хороший. Таким образом ты учишься не полагаться на ощущения и интуицию, а видеть ошибки или, наоборот, безупречное соблюдение правил.

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

Давай подведём итог и ещё раз пропишем план твоего самостоятельного обучения:

1. Начни здесь и сейчас. Бери любой предмет рядом с тобой и начинай его анализировать.
2. Установи Фигму, зарегистрируйся в ней, найди бесплатные уроки и начинай осваивать функционал программы. Не забудь про модульную сетку - эта тема, как правило, разбирается в уроках по Фигме.
3. В перерывах между инструментами Фигмы изучай теорию: правила композиции, типографику, теорию и психологию цвета.
4. Когда немного наберёшься знаний и почувствуешь уверенность, приступай к практике. Собирай мудборды, копируй чужие макеты, продолжай чужие дизайны и затем приступай к редизайну других сайтов и созданию своих.

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

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

---

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