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

Типографика

Знание типографики — один из основных навыков любого дизайнера, и не важно, создает ли он интерфейсы, делает макеты печатных газет или верстает плакаты.

Важно!

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

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

Дизайнер, который разбирается в типографике:

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

Exploring The North Face on Dribbble

Книги

• Александра Королькова. Живая типографика.
• Эрик Шпикерманн. О шрифте.
• Дизайн‑бюро Артема Горбунова. Типографика и верстка.

Mobile First или не First?

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

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

***

С чего начинается профессия веб-дизайнера

С обучения. Причем платного.

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

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

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

Набросаем план освоения профессии.

Брифинг

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

• Чем занимается компания?
• Какое целевое назначение сайта для бизнеса (для осуществления продаж, генерации лидов, информирования или укрепления бренда и прочее)?
• Кто целевая аудитория сайта (какие социально-демографические характеристики, стиль жизни, что их мотивирует и расстраивает)?
• Есть ли у заказчика понимание или видение того, какую функциональность должен обеспечивать сайт?
• Какую задачу или «боль» пользователя решает компания посредством сайта?
• Имеется ли брендбук или фирменный стиль?
• Кого компания считает своими конкурентами?
• Какие сайты с точки зрения дизайна (референсы) нравятся?

Конечно, когда заказчик даёт вам готовый и качественно прописанный брендбук, ваша задача — просто разобраться с ним (какие цвета, какие шрифты, какого рода будут картинки, фотографии и даже композиция). По сути, визуальный стиль сайта уже сделали за тебя, осталось спроектировать, грамотно всё расположить и сверстать. А вот если брендбука нет, то подбор шрифтов, цветов, да и визуального стиля в целом ложится на ваши плечи. Если, конечно, заказчик не приложил к ТЗ дизайнера. Но не стоит паниковать, разделите слона на части и действуйте пошагово.

Преимущества и недостатки профессии

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

Плюсы

Преимуществ у профессии достаточно:

1. Хорошие заработки – крутой профи может получать 100 000 рублей в месяц и более.
2. Актуальность профессии – вы всегда найдете работу в офисе или на фрилансе.
3. Карьерный рост – можно стать руководителем или владельцем веб-студии, и не одной.
4. Можно заключить договор с иностранными заказчиками, что в разы увеличит ваши доходы (правда, придется подтянуть английский).
5. Получив достаточный опыт в крупной компании, легко перейти на фриланс, рулить своим временем и при этом неплохо зарабатывать.
6. На начальное образование потребуется совсем немного денег, потом вы будете учиться на собственном опыте без всяких затрат.

Минусы

Среди недостатков выделю только три.

1. Если вы фрилансер, то заказы не постоянные. Можно набрать кучу заказов и сутками не выходить из квартиры, закрывая дедлайны, а можно неделями искать интересные проекты и ничего не зарабатывать.
2. Вашу работу могут не принять и выскажут недовольство. Избежать таких моментов поможет опыт – со временем вы научитесь предугадывать желания заказчика и вовремя устранять недочеты.
3. Рост конкуренции. Это касается любой профессии в IT-сфере.

Однако настоящему профессионалу все нипочем. Так что растите и развивайтесь!

Где изучать веб-дизайн с нуля бесплатно?

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

YouTube-каналы и уроки

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

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

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

Litus Pro. Отличный современный канал с десятками подробных туториалов и насыщенных инструкций

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

Блоги и статьи

Ежедневно на свет появляются десятки и сотни полезнейших статей на тему веб-дизайна, интерфейсов, пользовательского поведения и сайтах. Моя персональная рекомендация — установите приложение для комфортного чтения RSS-лент и добавьте в него ваши любимые блоги. Затем тратьте по 20-30 минут в день на чтение новых материалов: взрывной рост и освоение веб-дизайна с нуля обеспечено.

Не знаете, на какие блоги и каналы подписаться? Ловите подборку самых полезных:

Дизайн-кабак. Российский канал на платформе Medium, ежедневно публикующий полезные статьи (и переводы статей зарубежных авторов) на тему дизайна. Типографика на сервисе Medium потрясающая, поэтому читать там статьи — одно удовольствие.

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

Awdee. Данный интернет-портал является отличным источником вдохновения. На нём периодически публикуются кейсы других дизайнеров и интересные работы как из мира сайтов/интерфейсов, так и из сфера брендинга.

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

Соберите портфолио

Не откладывайте это надолго

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

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

Выложить своё портфолио можно на Behance.net, Portfolios.ru, Dribbble.com, Deviantart.com, . Можно использовать сразу несколько площадок, но не обязательно. Посмотрите, где принято демонстрировать работы в вашем направлении дизайна.

Когда публикуете свои работы, не забывайте смотреть портфолио других дизайнеров, фотографов и художников: чужие работы вдохновляют. Неслучайно у дизайнеров и иллюстраторов есть такое словечко — «насмотренность». Без неё вы быстро отстанете от отрасли.

Оплата труда

Зарплата на 24.05.2021

Россия 30000—120000 ₽

Москва 40000—150000 ₽

Заработная плата зависит от престижа студии и опыта работы дизайнера. Также все зависит от количества заказов на дизайн. Разброс цен на дизайн сайтов очень большой, — все определяется качеством работ и услуг. Создание дизайна для сайта — процесс творческий. Он может занять различное время. Есть определенные «наборы услуг» с фиксированной ценой, но они неточно определяют цену и качество дизайна. Одну и ту же работу можно сделать и за 50 и за 1500$. 

Ступеньки карьеры и перспективы

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

Выдающиеся web-дизайнеры:

Артемий Лебедев. Родился 13 февраля 1975 года. Сын писательницы Татьяны Толстой и филолога Андрея Лебедева. После школы поступил на факультет журналистики МГУ им. М. В. Ломоносова, который так и не окончил, отчислившись со 2-го курса. Летом 1992 года основал с партнёром студию «А-квадрат», в которой работал до конца года. В январе 1993 года основал самостоятельную студию «Артографика», в которой занимался графическим, полиграфическим, каллиграфическим и другими видами бумажного дизайна. Принимал участие в создании книг, журналов. С 1993 по 1995 по совместительству работал арт-директором компании «МакЦентр». В 1995 году основал студию WebDesign (в 1998 году переименованную в «Студию Артемия Лебедева»), которая является одной из первых и крупнейших студий веб-дизайна в Рунете. С 2001 года Студия Артемия Лебедева стала также заниматься промышленным дизайном.

Деятельность. Артемий Лебедев основал студию, на счету у которой более 1000 работ, среди которых фирменные стили, книги, журналы, знаки, логотипы, графические и физические интерфейсы, сайты, объекты промдизайна и промграфики, витрины. Лебедев не только дизайнер; большую часть времени он тратит на постановку и придумывание задач, разработку информационной архитектуры, исследования в области эргономики и удобства пользования сайтами. Дизайнерские находки его студии широко используются в Рунете.

Книги по web-дизайну

Если вы хотите стать веб-дизайнером, прочтите книгу по html (HTML — язык гипертекстовой разметки. С помощью него создаются все документы в Интернете).

Однако html — это еще не веб-дизайн. Это просто язык для создания web-странички. Но чтобы страничка смотрелась красиво и правильно — нужен вкус и чувство стиля. В этом вам поможет книга Дмитрия Кирсанова «Веб-дизайн»- одна из лучших книг по web-дизайну.

История профессии

Слово «дизайн» в русском языке появилось относительно недавно. Пришло оно из итальянского языка и в переводе имеет множество значений. “Disegno” — это замысел, план, намерение, цель, чертеж, эскиз, набросок, рисунок, узор, модель, шаблон, лежащая в основе схема, композиция. В связи с бурным развитием современных технологий, понятие дизайна приобрело новый, более широкий смысл и теперь обозначает не только какой-то отдельный предмет, а является целым направлением, применимым ко всем областям современной деятельности человека. Дизайнер должен обладать знаниями во многих предметных областях и умело применять их на практике, проецируя в творческом процессе создание образа. С уверенностью можно сказать, что дизайн — это современное искусство художественного конструирования, разработка образцов рационального построения предметной среды.

В основе web-дизайна лежат все те же основные принципы, что и в основе других разновидностей дизайна:

• принцип функционализма: «что функционально, то красиво»;
• принцип конструктивизма, который заключается не в цели составления композиции, а в цели создания ее конструкции.

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

Web-дизайн ставит перед собой различные цели:

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

11 сайтов о логотипах

LogoDesignLove — сайт о хороших логотипах

• https://logopond.com. Сотни примеров логотипов, как удачных, так и не очень, в вашем распоряжении. Плюс ресурса в том, что вариантов на нем очень много, а еще их можно по-разному отсортировать.
• https://www.logaster.com. Сервис позволяет очень быстро генерировать логотипы. Да, уникальный логотип с его помощью не сделать, но сайт очень выручает, когда у клиента еще нет логотипа, а в шапку сайта нужно что-то поставить.
• https://logo.squarespace.com/. Аналогичный сервис для создания логотипов небольшого размера. Вы вводите название компании и попадаете в редактор, в котором к логотипу можно добавить иконку, а заодно посмотреть, как все это смотрится на визитке, мониторе и футболке.
• http://logofaves.com. В подборках логотипов на этом ресурсе можно найти не только идеи, но и контакты дизайнера, а также ссылку на его Behance-профиль. Это очень удобно в случае, когда вам нужно не только посмотреть логотип, но и найти исполнителя.
• https://www.hipsterlogogenerator.com. Еще один генератор, позволяющий создать простой, но достаточно эффектный логотип за пару минут.

Генераторы логотипов помогут придумать основу или создать временный логотип

• http://logotypes101.com. Подборка бесплатных векторных логотипов. Если у вас есть время и вы готовы его потратить, то сможете найти неплохой вариант.
• https://logobaker.ru. Сайт для тех, кто разрабатывает логотипы. Здесь есть неплохая подборка, а также возможность попросить совета или получить фидбек.
• https://www.logofury.com. В этом сервисе от вас требуется только ввести название компании, выбрать категорию и добавить слоган (при желании), все остальное генератор делает за вас, мгновенно создавая десятки вариантов.
• https://www.logomoose.com. Очень солидная подборка логотипов со всего мира. Что интересно, есть действительно много хороших вариантов, которые можно использовать для вдохновения.
• http://www.thelogomix.com. И снова подборка логотипов, но на этот раз с расширенной сортировкой: можно выбрать логотипы по определенному цвету или тематике. Когда нужно что-то быстро придумать, очень выручает.

Важные качества

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

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

Необходимо знать: Adobe Photoshop, HTML/СSS

Желательно знать: Corel Draw, Illustrator, Macromedia Flash.

Если ещё не умеете, то учитесь рисовать

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

По рисованию есть много видео и курсов, а ещё обратите внимание на книги. Например, вот эти:

• Дмитрий Горелышев. «Простое рисование»;
• Марк Кистлер. «Вы сможете рисовать через 30 дней. Простая пошаговая система, проверенная практикой».

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

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

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

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

В отличие от графического или UX/UI-дизайнера, веб-дизайнер совмещает функции менеджера и дизайнера. Работа веб-дизайнера состоит из нескольких этапов, о которых мы рассказали ниже. И дополнили рассказ ссылками на наши статьи.

Найдите референсы

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

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

Подборку референсов вы можете смело показать заказчику. Так вы вместе выберете подходящий стиль, что избавит от ненужных правок в дальнейшем. Найти множество хороших примеров можно на Behance, Awwwards и Pinterest.

Процессы, сценарии и поведенческие модели

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

UX (англ. user experience) — это про опыт пользователя, который он получает, работая с сайтом или приложением.

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

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

Так как пользовательский опыт и проектирование интерфейсов нераздельны, почти всегда этим занимается один человек — UX-дизайнер. Он интервьюирует заказчика и будущих пользователей продукта, собирает и анализирует информацию о целевой аудитории, составляет CJM (англ. Customer Journey Map), карту путешествия потребителя от первого контакта с продуктом до целевого действия. Интересно?

В России не так много мест, где можно получить образование в сфере UX. Этому не учат в вузах, но у Skillbox есть курс по UX-дизайну от компании AIC.

12 сайтов для вдохновения

Pinterest поможет найти идею для дизайна

• https://www.behance.net. Дизайнеры традиционно публикуют свое портфолио Behance, поэтому сайт можно смело назвать самой большой коллекцией удачных примеров в любой сфере дизайна. Следите за новыми проектами, подпишитесь на дизайнеров и студии, на работы которых вам бы хотелось равняться.
• https://www.awwwards.com. Ресурс посвящен самым лучшим работам в веб-дизайне, на Awwwards можно найти подборки лучших сайтов за день, неделю, месяц или год. Вдохновляйтесь лучшими!
• https://dribbble.com. Платформа, на которой дизайнеры размещают свои портфолио. Чтобы добавить свои работы, нужно получить приглашение от участника Dribbble.
• https://www.designspiration.net. На сайте вы встретите сотни примеров хорошего дизайна для вдохновения.
• https://synapticstimuli.com. Галерея самых разнообразных проектов. Развивает чувство прекрасного.
• http://www.designmadeingermany.de/sites-we-like/. Можно найти авторские подборки красивых сайтов разнообразных стилей. Кстати, в подборку можно предложить и свой сайт.
• https://designshack.net/category/articles/critique-articles. Сайт для дизайнеров, на котором не хвалят, а критикуют. Новички наверняка узнают для себя много полезного.

Design Shack поможет увидеть ошибки в дизайне сайтов

• https://siiimple.com. Поклонникам минимализма и тем, кто хочет научиться создавать дизайн в этом стиле. На сайте просто огромная подборка примеров дизайна в минималистичном стиле, которая постоянно обновляется.
• https://onepagelove.com. Отличный ресурс с подборкой одностраничных сайтов. Всем, кто занимается лендингами, смотреть обязательно.
• https://mediaqueri.es. Довольно удачный проект об адаптивном дизайне. Особенно пригодится тем, у кого еще не было опыта в создании таких макетов.
• http://bookcoverarchive.com. Сайт пригодится не только тем, кто занимается оформлением обложек книг, но и тем, кто постоянно сталкивается с необходимостью подобрать хороший шрифт.

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

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

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

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

Какими навыками должен обладать хороший специалист

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

1. Как пользователь воспринимает любой сайт.
2. На какой логике построены приложения и внешний вид интернет-ресурса.
3. Как строить композицию для интерфейса и как с ней работать.
4. Как подбирать типографику и шрифты.
5. Как работать на Figma и Cinema 4D.
6. Как программировать на CSS и HTML. Они необходимы для внедрения своих идей в работу сайта.
7. Как создавать и обрабатывать изображения в графических программах.

Заключение

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

Рассмотренные в статье принципы — первый шаг на пути становления дизайнера. Если вы действительно заинтересованы в создании классных продуктов, вам предстоит открыть для себя ещё очень много нового и интересного. Начать можно с наших вебинаров, а стать настоящим профессионалом — с помощью годового курса «Веб-дизайн с нуля до PRO».