Ник Фредман, прошедший нелегкий путь от продакт-менеджмента к разработке и дизайну, поделился своим опытом и огромным количеством ссылок на важнейшие и самые полезные ресурсы для тех, кто тоже хочет пойти по его стопам.
Три года назад я решил стать дизайнером, который ещё и пишет код. Я всегда хотел научиться кодить. Немножко баловался этим, но ничего не знал о веб-программировании. Также я хотел научиться и дизайну. До этого я занимался продакт-менеджментом, работал с невероятно талантливыми дизайнерами и разработчиками. Мне надоело то, что я не мог воплотить в жизнь свои собственные идеи. Множество других людей, которые бы хотели творить, просто потерялись: слишком много туториалов для стольких платформ учат таким разным фреймворкам.
Бросьте себе вызов, выйдите из зоны комфорта и научитесь воплощать идеи в жизнь!
Я бы порекомендовал разобраться в HTML, CSS, Sass и JavaScript. Если вы хотите делать приложения, тогда Swift и Java, в зависимости от предпочитаемой вами платформы. Обучение дизайну это мутный процесс. Я советую сосредоточиться на принципах UX дизайна.
Важно помнить, что вам нужно изучить инструменты и процессы. Инструменты постоянно меняются, так что те, которые я вам предлагаю, хорошо подойдут для начала. С процессами сложнее, но их можно будет применить к любому инструменту.
Как учиться – уже другой вопрос. Мне пригодились несколько книг, онлайн туториалы, онлайн курсы и очные занятия.
Чему нужно научиться:
Позитивному настрою, не бояться ошибок и учиться.
Разработке: HTML, CSS, JavaScript (jQuery, Underscore), Sass, bootstrap, github, sublime text, command line, Angular, React.
Дизайну: Sketch, PhotoShop, inVision, Marvel, Framer.
Процессам: хостинг, модульное программирование, объектно-ориентированное программирование, отладка в chrome dev tool, стратегическое проектирование, интервьюирование, отчеты, сортировка карточек, информационная архитектура, UX, UI, тестирование удобства использования, прототипирование, макетирование, проектирование взаимодействия, анимация, теория цвета, типография и многое другое.
Предоставляю полный список книг, курсов, туториалов, которые оказались для меня самыми полезными. Ниже я опишу конкретный порядок, в котором я бы порекомендовал их использовать.
Книги:
Don’t Make Me Think (Не заставляйте меня думать) — классическая книга о том, как сделать все пригодным для использования, и прекрасный вариант для начинания изучения UX.
HTML/CSS Book — простая, прекрасная и эффективная.
Eloquent JavaScript — лучшая книга для изучения с азов, ещё и бесплатная.
Elements of Typographic style — не могу не подчеркнуть, насколько важно изучить типографию.
Elements of user experience — тоже классика, и хотя в книге есть и устаревшее, вы многое из нее узнаете.
Information Architecture — одна из книг, которая пригодится как разработчикам, так и дизайнерам.
JavaScript Patterns — самая продвинутая книга в этом списке, объяснит те или иные решения разработчиков.
JavaScript the Good Parts — углубит ваши знания.
TDD By Example — вам нужно понять Test Driven Development через практику и диалог с другими разработчиками.
Progit — научит использовать Git.
UX Pin — Здесь очень много бесплатных книг, я бы очень рекомендовал для UX.
Курсы:
Bloc UX — смешанные чувства насчет этого курса. Я не трепетал от контента, но проекты отлично подходят для первых шагов, и очень полезен фидбек наставника. Я прошел эту программу до очного обучения. Да и цена для онлайн курсов дороговата.
RefactorU — JavaScript, очно, 10 недель. Я стал уверенным в своих html, css и JS навыках и к концу программы я понял, сколько же ещё всего нужно узнать.
General Assembly — UX, очно, 10 недель. Мне очень понравилось, программа фокусируется на реальных проектах, полезно и весело.
Design + Code — очно, одни выходные. День Sketch и день XCode с реальным проектом.
Туториалы:
The Bitfountain Design Immersive, iOS8 Sketch — этот курс помог мне лучше любого другого по Sketch. Интенсивный, длинный, но очень эффективный.
The new Bitfountain site, iOS разработка & дизайн — отличный подход к обучению. Узнал много по Swift и Sketch.
Codecademy — проведите выходные с Codecademy, когда начинаете изучать HTML/CSS, и потом еще одни для JavaScript.
Dash — похоже на Codecademy, но больше цельных проектов, чем индивидуальных уроков.
Learn git — визуальный способ изучить Git, крайне помог.
Codeschool — хорошее место для совершенствования JavaScript навыков и посмотрите интерактивные туториалы по фронт-энд концептам. Также понравились Sass курсы.
Sketchcasts — крайне полезные уроки дизайнеров в «прямом эфире».
tuts+ — часто использую этот ресурс, когда нужно доработать какой-то навык. Хорошая подборка туториалов по разработке и дизайну.
Lynda — Всё ещё лучшее место для изучения новых инструментов. Здесь я разобрался с Photoshop. Также есть и хорошие UX курсы.
Udemy — рекомендую брать курсы, когда они с хорошей скидкой. Мне понравился курс Роба Персиваля по Sketch. Но, прежде чем покупать что-либо, хорошо подумайте.
Team Treehouse — один из любимых ресурсов благодаря регулярному контенту, хорошим преподавателям и полезному коммьюнити. Также можно загрузить видеоподкаст в дорогу.
Level Up Tuts — лучший бесплатный ресурс. Sublime Text, Command Line, CSS/Sass, Angular, React и особенно уделите внимание туториалам по Sketch.
Learn the hard way — особенно пригодится для изучающих Ruby или Python после JavaScript.
Watch Me Code — наблюдать за работой профессионалов – отличный способ узнать все нюансы искусства, когда вы уже что-то смыслите в этом.
Front-End Masters — один из лучших ресурсов для изучения продвинутого JavaScript, фреймворков и методологий.
Wes Bos — чертовски хорошие материалы. Книга Уеса по Sublime Text – лучшее, что я читал.
Kopywriting Kourse — других подобных материалов я и не включал, потому что это лучший ресурс.
Процессы:
Хотел бы кратко выделить три важных процесса, которые мне очень помогли.
- Копируйте дизайны, которые вам понравились на Dribbble или Behance. Воссоздавайте ассеты. Установите расширение WhatFont, чтобы узнать какие шрифты используются на сайтах. Используйте это, чтобы распознать шрифт по картинке.
- Создавайте небольшие проекты и еще раз создавайте. Практика – лучший способ научиться. Это может быть всего пара строчек кода, но самое главное — привычка.
- Участвуйте в соревнованиях. Мне нравятся Codewars.
Другие ресурсы:
- Codrops — прекрасные туториалы, ресурсы, особенно CSS, ссылки.
- Luke W — просто потрясающий блог и лента wonderful blog and новостная лента.
- Design+Code — еженедельные рассылки от Менга То, которого я упоминал ранее.
- Sidebar — здесь вы найдете очень много вдохновения.
- Designer News — рассылки с материалами для дизайнеров.
- InVision Blog — если бы я мог подписаться всего на один блог, то это был бы этот.
- Dribbble и Behance
Если бы я сегодня начал всё сначала, то я бы сделал это так.
Порядок обучения:
-
Подготовительная работа
-
HTML/CSS
Dash
Codecademy
Level Up Tuts — HTML и CSS туториалы.
Team Treehouse — здесь начните изучать дизайн. -
Введение в UX
Elements of user experience
Information Architecture
Lynda — UX курсы для изучения инструментов. -
Введение в JavaScript
Eloquent JavaScript
Codecademy — JS туториалы, jQuery пока пропустите
Team Treehouse — начните веб-разработку.
Level Up Tuts — JS туториалы. -
Инструменты графического дизайна (Sketch & PS)
Level Up Tuts — Sketch туториалы.
Design+Code — прорабатываем Sketch.
Sketchcasts — реально помогает, если у вас есть уже знания.
Udemy — Курс Роба Персиваля.
The Bitfountain Design Immersive — если есть возможность, если нет — Bitfountain.
Lynda — Особенно туториалы Deke.
Bezier Tool Game -
Инструменты разработки — готовимся к продвинутому JS и фронтэнд концептам, изучая инструменты разработки.
Level Up Tuts
Sublime Text — особенно Wes Bos.
Team Treehouse
Learn git
Progit
Codeschool — тут я переключился с Treehouse на Codeschool. Запишитесь на git/github курсы в Codeschool.
Codecademy — изучите командную строку.
Learn the hard way -
Продвинутый JavaScript
JavaScript Patterns
TDD By Example
Codeschool — проработайте JavaScript туториалы для любых фронт-энд фрейворков, которые хотите узнать. Также я посмотрел туториалы CSS/Sass.
Front-End Masters или Watch Me Code -
Инструменты прототипирования
Я бы скачал Marvel на телефон и использовал InVision для веб. Затем немного Framer (просмотрите туториалы Bitfountain, Front-End Masters, и Udemy).
-
Направление
Решите, хотите вы сосредоточиться больше на UX (тогда General Assembly) или фронт-энде (тогда Hack Reactor).