Как вырастить единорога: пошаговый план изучения дизайна и разработки

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

AAEAAQAAAAAAAAQCAAAAJGMyMjllZmVmLThiZDEtNDAwZC1hOTgzLTc3MmEyY2FiMjQ2OQ

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

Бросьте себе вызов, выйдите из зоны комфорта и научитесь воплощать идеи в жизнь!

Я бы порекомендовал разобраться в 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  —  других подобных материалов я и не включал, потому что это лучший ресурс.

Процессы:

Хотел бы кратко выделить три важных процесса, которые мне очень помогли.

  1. Копируйте дизайны, которые вам понравились на Dribbble или Behance. Воссоздавайте ассеты. Установите расширение WhatFont, чтобы узнать какие шрифты используются на сайтах. Используйте это, чтобы распознать шрифт по картинке.
  2. Создавайте небольшие проекты и еще раз создавайте. Практика – лучший способ научиться. Это может быть всего пара строчек кода, но самое главное — привычка.
  3. Участвуйте в соревнованиях. Мне нравятся Codewars.

Другие ресурсы:

  1. Codrops  —  прекрасные туториалы, ресурсы, особенно CSS, ссылки.
  2. Luke W  —  просто потрясающий блог и лента wonderful blog and новостная лента.
  3. Design+Code  —  еженедельные рассылки от Менга То, которого я упоминал ранее.
  4. Sidebar  —  здесь вы найдете очень много вдохновения.
  5. Designer News  —  рассылки с материалами для дизайнеров.
  6. InVision Blog —  если бы я мог подписаться всего на один блог, то это был бы этот.
  7. Dribbble и Behance

Если бы я сегодня начал всё сначала, то я бы сделал это так.

Порядок обучения:

  1. Подготовительная работа

    Don’t Make Me Think
    HTML/CSS Book

  2. HTML/CSS

    Dash
    Codecademy
    Level Up Tuts  —  HTML и CSS туториалы.
    Team Treehouse  —  здесь начните изучать дизайн.

  3. Введение в UX

    Elements of user experience
    Information Architecture
    Lynda  —  UX курсы для изучения инструментов.

  4. Введение в JavaScript

    Eloquent JavaScript
    Codecademy  —  JS туториалы, jQuery пока пропустите
    Team Treehouse  —  начните веб-разработку.
    Level Up Tuts  —  JS туториалы.

  5. Инструменты графического дизайна (Sketch & PS)

    Level Up Tuts  —  Sketch туториалы.
    Design+Code  —  прорабатываем Sketch.
    Sketchcasts  — реально помогает, если у вас есть уже знания.
    Udemy  —  Курс Роба Персиваля.
    The Bitfountain Design Immersive  —  если есть возможность, если нет – Bitfountain.
    Lynda  —  Особенно туториалы Deke.
    Bezier Tool Game

  6. Инструменты разработки  —  готовимся к продвинутому JS и фронтэнд концептам, изучая инструменты разработки.

    Level Up Tuts
    Sublime Text — особенно Wes Bos.
    Team Treehouse 
    Learn git
    Progit
    Codeschool  —  тут я переключился с Treehouse на Codeschool. Запишитесь на git/github курсы в Codeschool.
    Codecademy  —  изучите командную строку.
    Learn the hard way

  7. Продвинутый JavaScript

    JavaScript Patterns
    TDD By Example
    Codeschool  —  проработайте JavaScript туториалы для любых фронт-энд фрейворков, которые хотите узнать. Также я посмотрел туториалы CSS/Sass.
    Front-End Masters или Watch Me Code

  8. Инструменты прототипирования

    Я бы скачал Marvel на телефон и использовал InVision для веб. Затем немного Framer (просмотрите туториалы Bitfountain, Front-End Masters, и Udemy).

  9. Направление

    Решите, хотите вы сосредоточиться больше на UX (тогда General Assembly) или фронт-энде (тогда Hack Reactor).

Комментарии

НАПИШИТЕ НАМ

Напишите нам по любому вопросу, мы постараемся ответить как можно быстрее

Sending
или

Введите данные:

или    

Forgot your details?

или

Create Account

X

Спасибо!

Теперь редакторы в курсе.