Меня зовут Антон Шеин. Иногда я выступаю с докладами про дизайн, прототипирование и систематизацию интерфейсов.

После каждого доклада, раз за разом мне задают два основных вопроса:

1. Должен ли дизайнер уметь работать с веб-технологиями?
2. С чего дизайнеру начать, если хочется с ними разобраться?

Постараюсь ответить на них в этой статье.

Должен ли дизайнер уметь работать с веб-технологиями?

Если отвечать коротко: нет, не должен.

Дело в том, что никто никому ничего не должен. Как минимум до тех пор, пока вы не подписали документов с банком или ещё с кем-нибудь.

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

Владение технологиями позволит вам:

1. Автоматизировать рутину. Те вещи, которые вы выполняете из раза в раз, может сделать за вас компьютер. Например, соблюдать гайдлайны в дизайне, делать по образцу одного элементы сотни похожих, проверять их на разных сочетаниях данных, менять сразу все элементы при изменении одного и т. п.
2. Прорабатывать дизайн сложных систем и масштабных продуктов.
3. Легче общаться с разработкой и быстрее внедрять свои работы в продукт. Макет, нарисованный в графическом редакторе, позволяет многие неудобные моменты замести под ковёр. С ними всё равно придётся столкнуться на этапе разработки, когда менять решение будет уже поздно. Если дизайнер проработает все тонкости заранее, то продукт на выходе получится более качественным и по пути возникнет меньше споров.
4. Проверять свои решения в жизни, не дожидаясь разработки. Да, есть куча приложений и сервисов, которые позволяют на основе картинок собрать кликабельный прототип. Но ни один из этих сервисов не позволит вам воспользоваться вашим продуктом и проверить его в жизни до того, как он будет реализован разработкой.
5. Самостоятельно делать первые версии своих личных проектов, а не жалеть о том, что нет знакомого разработчика. Рабочий прототип, пусть и очень простой, всегда является плюсом при продаже идеи.

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

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

На что делать упор, каждый решает сам.

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

С чего начать изучение веб-технологий?

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

Так и здесь. Начать нужно с двух очень важных навыков:

1. Десятипальцевая слепая печать.
2. Базовое умение читать на английском.

Десятипальцевая слепая печать

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

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

Несколько советов:

1. В качестве тренажёра лучше использовать thetypingcat.com или klava.org. Остальные тренажёры — издевательство над психикой и от них больше вреда, чем пользы.
2. Начав тренироваться печатать вслепую, не поддавайтесь соблазну переключиться обратно на привычный метод. Даже если очень хочется — скорость обучения от этого будет стремиться к нулю, так устроен мозг.

Навык полезен не только для кода. Начав печатать вслепую вы будете экономить кучу времени на переписке.

Базовое умение читать на английском

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

При этом не нужно идти на курсы или открывать толстый учебник. Ваш мозг — нейросеть. И если вы просто заставите себя читать ответы и статьи на иностранном языке, ваш мозг сам приспособится. С каждой статьёй вам будет всё легче понимать прочитанное. Хорошим помощником в изучении будет плагин для браузера, который переводит слова при выделении.

Ещё один способ научиться читать на английском — заставить себя смотреть сериалы без дубляжа. Для этого есть, например, замечательный сервис Ororo.tv.

Лучше начать с простых сериалов, так как «Шерлока» или «Теорию Большого Взрыва» смотреть будет тяжело. Сам я сильно продвинулся в английском пока смотрел «Lost» во время тренировок. Там очень простой английский, а сюжет незамысловат настолько, что и без перевода понятно что происходит.

Онлайн-курсы

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

Я бы рекомендовал такой порядок занятий:

1. HTML и CSS
2. Основы JS
3. Работа с терминалом

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

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

P.S.: Все комментарии внимательно прочитаю в конце дня и отвечу апдейтом поста.