Где учиться ребятам, которые хотят стать веб-дизайнерами
Знакомая одного моего товарища попросила его подсказать несколько институтов, где есть хорошее направление веб-дизайна. Он обратился ко мне. К сожалению, моей осведомленности в украинском гособразовании для веб-дизайнеров недостаточно, чтобы ответить на вопрос. Но поскольку человек хочет учится, то я решил составить список рекомендаций и ссылок «с чего можно начать» (в том числе прикрепил ссылки на курсы).
В данной статье я буду руководствоваться понятием, что веб-дизайнер — это человек, который проектирует и рисует в Фотошопе (или другом графическом редакторе) внешний вид сайта.
Предисловие: как проиходит процесс создания сайта
Перед тем как приступать учиться на веб-дизайнера, стоит понимать процесс разработки сайта. Ниже я в общих чертах опишу, как происходит разработка сайта.
Каждый сайт создается с какой-то целью. Обычно эту цель определяет один предприимчивый человек, который хочет сделать/улучшить показатели/расширить бизнес. Он ищет другого предприимчивого человека, который может разработать или организовать разработку сайта.
В процессе разработки каждого сайта всегда присутствует некий человек (назовем его условно «бог»), который знает (и узнает это от первого предприимчивого человека), что сайт должен сделать, какие страницы и какой функционал на нем должен быть и как должны располагаться элементы на странице. Лично я считаю, что этим человеком должен быть веб-дизайнер, но в этой роли может быть программист или менеджер проекта.
Теперь схема работы над сайтом:
- «Бог» собирает всю необходимую информацию, делает наметки что должно быть на сайте и как должно быть расположено.
- Веб-дизайнер в Фотошопе рисует все страницы и графические элементы так, как сказал «бог»
- Дальше за прорисованные дизайнером страницы берется верстальщик — человек, который превращает нарисованную картинку в набор элементов средствами HTML и CSS (в этом виде мы видим сайты в браузере). Но эти страницы лишь набор готовых элементов и правильно расположенных блоков.
- С этой версткой будет работать программист, который будет программировать сайт и предоставит его в том виде, в котором его видят пользователи.
Сразу же добавлю название книги, которая очень сильно поможет прижиться в роли «бога»: Расс Унгер, Кэролайн Чендлер. «UX-дизайн. Проектирование опыта взаимодействия».
Что нужно знать
Перед тем, как учить, нужно знать, что учить. Ссылка первая:
http://creativshik.com/otzyvy-o-kurse-intensiv-po-graficheskomu-dizajnu/ — это относительно неплохой курс; но он состоит из устных лекций.
Справа на этом же сайте есть блок подписки на бесплатный курс — его нужно обязательно прочитать. Он приходит в текстовом виде несколькими письмами на почту. Борис Поташник, автор сайта, создал в бесплатном курсе достаточно неплохой учебный план, который, при использовании поисковика, поможет узнать, что нужно знать.
Если структурировать списком, что нужно знать, то это:
- Типографика. Нужно научиться эстетично подбирать шрифты и компоновать текст. Этот пункт — палка с двумя концами: шрифты должны быть подобраны так, чтобы было приятно читать текст, и так, чтобы не было «перенасыщенности» шрифтов. Для первых макетов можно использовать только Arial (тогда второй проблемы просто не будет).
Тема очень обширная. Для теоретического фундамента я могу порекомендовать учебник Джеймса Феличи «Типографика: шрифт, верстка, дизайн». - Цвета. На сайте очень важен правильный подбор цветов. Если а начале работы со шрифтами можно взять Arial, то в этом пункте немного посложнее.
Нужно подобрать набор таким образом, чтобы текст был контрастный с фоном, цвета гармонировали друг с другом (в этом поможет https://kuler.adobe.com/) и были логически связаны с темой (например, для сайта сети аптек логично было бы использовать зеленый цвет как основной, а для сайта «Киевстара» — голубой [в соответствии с цветом логотипа]). По поводу теории можно обратиться к блогам, ссылки на которые я прикрепил ниже. - Расположение блоков на сайтах. Тут просто нужно исследовать несколько десятков сайтов. Нужно обратить внимание на навигацию (где расположены меню, где расположены ссылки для перехода между страницами), верхнюю часть (шапку), нижнюю часть (футер), элементы интерфейса (поля для ввода данных, кнопки, выпадающие списки и т. д.).
Среди сайтов, которые стоит изучить: социальная сеть, Интернет-магазин, лендинг, блог; конкретнее можно изучить сервисы Яндекса (в том числе и почту), YouTube. - Удобство использования сайта. Стоит обратить внимание на: процессы регистрации, фильтрование, оформления заказа (покупки), чаты, насколько доступно описана информация о сервисе, страницы настройки, что происходит после действий пользователя, каким образом осуществляется переход между страницами сайта и т. д.
Блоги
Ссылки на 2 блога, которые стоит прочитать «от начала и до конца» (статьи затрагивают важные практические и теоретические аспекты веб-дизайна).
http://creativshik.com/blog/ — «Креативщик» (блог Боба Поташника), его можно полностью перечитать за исключением видео и аудиозаписей (они практически бесполезны, поскольку неоправданно длинные; но если есть лишнее время и есть уверенность в том, что через 4 часа прослушиваний не начнет болеть голова, — пожалуйста)
http://popel-studio.com/blog/ — блог Popel Interactive Agency, но прежде профильтруйте по пункту «дизайн» и «юзабилити».
Исключение для обоих сайтов: можно не тратить время на отчеты событий и статьи-мнения о чем-то (их немного, но все же).
Курсы
На мой взгляд, курсы имеют 2 плюса — там есть люди (учат профессионалы, учишься вместе с потенциальными профессионалами) и все структурировано.
http://popel-studio.com/ — Popel Interactive Agency обещали летом еще одну стажировку провести
http://popel-studio.com/stazhirovka-2014.html — как было в прошлом году
https://vk.com/popelinteractiveagency — группа
https://vk.com/apopel — Анатолий, идейный покровитель Студии
https://vk.com/id3591492 — Таня, шеф-редактор Студии
http://masterschool-design.blogspot.com/ - школа визуальных коммуникаций. В школе реально крутые ребята преподают.http://masterschool-design.blogspot.com/2013/12/blog-post_30.html - базовый курс, 6 000 грн, 3 мес
http://uawebchallenge.com/ — конкурс по веб-разработке (веб-дизайн включительно), очень полезно, чтобы увидеть себя на фоне коллег. Кроме того, сообщество конкурса проводит много полезных ивентов для веб-разработчиков (в том числе дизайнеров. Хотя стоит отметить, что ивенты будут полезны для ребят уже с практическими навыками.
Программы, которые могут понадобиться
Adobe Photophop — именно эту программу выбирают веб-дизайнеры из-за того, что она удобна как самим дизайнерам для прорисовки элементов, так и верстальщикам для превращения картинки в код (http://photoshop-master.org/disc15/ — это неплохой платный курс; если с деньгами все очень плохо, то там есть программа, которую можно пройти с помощью Гугла)
Adobe Illustrator — программа для создания векторных картинок (обучение: http://vk.com/videos-36045680?q=Курс+по+векторному+рисованию+в+Illustrator§ion=search)
Axure — программа для проектирования расположения блоков на сайте
Начинаем!
Вся суть обучения веб-дизайнеру сводится к одному — вы когда-нибудь станете рисовать сайты (а я желаю быть тем самым «богом», который еще и проектирует их). В этой статье описан тот минимум, который считаю нужным для начала профессиональной работы. Но я обязательно должен указать, что теория без практики бесполезна.
Мое личное мнение (убедился на своем опыте), что лучше изучить азы Фотошопа (или изучать методом профессора Тыка) и попробовать нарисовать хоть что-то (можно нарисовать страничку некого абстрактного блога или просто для практики сделать копию другого сайта — «вдохновляться» можете на https://www.pinterest.com/explore/веб-дизайн-896755026367/).
Желаю удачи!
Disclaimer: данная статья не ставит перед собой цель рекламировать один из указанных курсов или ресурсов с коммерческой целью
