Школа дизайнаКак дизайнерам побороть страх кода
Антон Шеин о том, зачем изучать веб-технологии
Look At Me продолжает рассказывать о Школе дизайна
«Яндекса» — преподавателях, занятиях и знаниях для будущих дизайнеров продукта. В этом материале Антон Шеин, преподаватель Школы, объясняет, зачем дизайнеру уметь работать с кодом.
Антон Шеин
руководитель службы дизайна продуктов поиска «Яндекса» — вместе с другими дизайнерами систематизирует существующие элементы поисковой выдачи и создаёт новые
Дизайнеры продумывают и создают интерфейсы, воплощая в них решения пользовательских сценариев. Для работы над ними есть много полезных инструментов: например, Sketch, Macaw, Edge Reflow или Hype. Но основным инструментом многих дизайнеров остаётся редактор фотографий. Нельзя сказать, что это самый удобный инструмент, но лет 10 назад выбора особого не было. А сейчас им продолжают пользоваться по инерции.
Обучаясь работе с кодом, вы с каждым новым знанием расширяете свои возможности
На освоение нового инструмента нужно потратить силы и время. Но, освоив его, начинаешь справляться с задачами, и в результате потраченное время окупается.
Я расскажу о мощном инструменте для работы над интерфейсами, который недооценён многими дизайнерами из-за высокого порога входа. Речь пойдёт о веб-технологиях: HTML, CSS и JS.
Преимущества работы с кодом
↑ Чтобы проработать список товаров в графическом редакторе, придётся каждую карточку создавать отдельно, раз за разом перетаскивая картинки и копируя тексты
Главное преимущество дизайна при помощи вёрстки — возможность работать напрямую с данными. Наибольшую выгоду это даёт в работе над повторяющимися элементами.
Работая с вёрсткой, вы можете в полуавтоматическом режиме взять подходящие данные с любого сайта и оформить их по своему желанию. Есть даже готовые визуальные редакторы для получения данных, такие как kimonolabs.com и import.io.
Также легко вы сможете поменять оформление одновременно всех карточек. Например, сделать их не вертикальными, а горизонтальными или переместить цену к рейтингу. Такой подход позволяет за час легко перебрать 5–6 совершенно разных оформлений, проверяя, как в них смотрится каждая карточка.
Кроме того, созданные однажды элементы можно легко использовать на других страницах или в других проектах. При этом в каждом проекте элементы можно дорабатывать, а не делать с нуля.
Умея верстать и программировать, вы можете создать прототип, которым можно пользоваться как настоящим продуктом
Используя веб-технологии, вы можете работать с реальными данными, а не с лоремипсумом. Это позволяет ещё на этапе дизайна отлавливать недостатки ваших макетов. При работе в графическом редакторе все недочёты выясняются только на этапе вёрстки, когда уже поздно что-то сильно переделывать.
Умея верстать и программировать, вы можете создать прототип, которым можно пользоваться как настоящим продуктом — не просто демонстрировать его поведение, а получать от него реальную пользу. Например, для Школы дизайна я создал прототип приложения для заучивания имён и за три поездки в метро и одну субботнюю очередь в «Ашане» выучил всех слушателей моей секции по именам.
Ну и на сдачу: вам будет легче общаться с разработчиками, так как вы сможете говорить с ними на одном языке. А иногда и поправлять их, когда они попытаются вас убедить, что что-то сделать невозможно.
Насколько это сложно
Люди, которые изучали вёрстку 5–7 лет назад, могут ещё помнить статьи «10 способов сверстать скруглённые углы». Да, раньше вёрстка была непростым делом, так как для повторения элементарных вещей из графического редактора нужно было обладать опытом и терпением.
Появление CSS3 и HTML5 изменили это. Теперь есть свойства для градиентов, скруглённых углов, множественных теней, разных режимов наложения, блёра и много чего ещё. Если вы пробовали верстать лет 5 назад, почитайте список современных свойств, чтобы увидеть много новых возможностей.
Если же вы совсем не знакомы с вёрсткой, то можно начать с графических программ для вёрстки, например Webflow. Повозившись с ними, вы со временем поймёте, как устроены веб-технологии, и сможете развиваться уже без помощи костылей.
Пользу от владения веб-технологиями вы получите уже с первых шагов, и чем дальше — тем больше. У этого инструмента, в отличие от других, нет потолка. Вам всегда есть куда развиваться, и какая бы задача ни возникла, вы сможете узнать достаточно, чтобы решить её.
Я выделил четыре последовательные ступени в уровне владения технологиями:
Прозревший
Время освоения: несколько выходных дней
Инструменты: веб-инспектор, Webflow или альтернатива
Вы понимаете, как устроена веб-страница, как ведут себя элементы на ней и почему. Можете легче общаться с разработчиками, давать более чёткие инструкции и экспериментировать со страницей самостоятельно через встроенный в браузер отладчик.
Верстальщик
Время: 1 час в будни и 3–4 часа в выходные на протяжении 1–2 месяцев
Инструменты: редактор кода, Stack Overflow, css-tricks.com
Вы можете самостоятельно собрать несложную страницу. Работа с текстом, заголовками, врезками, таблицами, списками и сетками в графических редакторах вам теперь кажется пустой тратой времени.
Вы экономите силы и время при работе с повторяющимися элементами. Предложение поменять отступы, цвет и кегль заголовков, размеры и расположение картинок у 30 карточек товаров вас больше не пугает. Обновив стили элемента на одном макете, вы больше не будете вручную менять его во всех остальных.
Ваши интерфейсы тянутся и адаптируются под любые размеры экранов, реагируют на изменение ориентации телефона.
Кодер
Время: 2–4 месяца попыток, поиска решений и совместной работы с опытным разработчиком
Инструменты: редактор кода, Stack Overflow, jQuery, шаблонизатор (например AngularJS)
Ваши интерфейсы стали живыми. Вам больше не нужно объяснять, как интерфейс реагирует на действия пользователя, так как вы можете просто показать, как это происходит. Вы осваиваете шаблонизаторы, и рутины становится ещё меньше.
Разработчик
Время: от полугода экспериментов с личными и рабочими проектами, поиска ответов
и чтения документации
Инструменты: редактор кода, npm, Node.js, PhoneGap, Xcode и тому подобное
Вы можете собирать прототипы, которые используют реальные данные. Таким прототипом можно уже пользоваться как настоящим продуктом и пробовать его на своей шкуре. Теперь вы можете создать свой мини-продукт и в одиночку запустить его на рынок.
Как учиться
Первое, что нужно понять, — нет универсального способа обучения, все люди учатся по-разному. Кто-то читает книжки по 500 страниц и счастлив, а кому-то нужно разбирать конкретные примеры с объяснением на пальцах. Несмотря на это, есть несколько основных способов со своими преимуществами и недостатками.
Изучать сначала теорию, потом практику
При таком подходе вы сможете писать более качественный код и в результате быстрее развиваться. Но для новичка такой подход будет тяжёлым — непонятно, как применить новые знания.
Если вам близок такой подход, то рекомендую прочитать бесплатную книгу eloquentjavascript.net. Если читать её с сайта, то в ней же есть примеры и задачи для самостоятельной работы.
Практика
В противоположность первому подходу можно изучать всё сразу на практике. Использовать готовые плагины, искать ответы на Stack Overflow и вставлять готовые куски кода, даже не разбираясь, как всё работает.
Плюс такого подхода — быстрый старт. Минус — не понимая, что делаете, вы не будете учиться и копить опыт. Вместо инженерного искусства вы будете изучать прикладное мастерство и на каком-то этапе забуксуете.
Направленная практика
По-моему, самый правильный подход — направленная практика, сочетание предыдущих двух. Сначала вы быстро находите практическое решение своей задачи, а потом обязательно разбираете её по косточкам, понимая, как всё устроено. После чего переделываете и модифицируете стандартное решение под свои нужды.
Последовательность действий приблизительно такая: ищете ответ на свой вопрос в поиске „how to …“, открываете Stack Overflow, пробуете код. После чего ищете в нём непонятные конструкции и разбираетесь в том, как они работают.
При таком подходе вам помогут книги (тот же eloquentjavascript.net) и документация (css-tricks.com, developer.mozilla.org и т. п.).
Будет очень полезно найти себе опытного наставника, который сможет отвечать на ваши вопросы и периодически вас направлять. С ним обучение пойдёт гораздо быстрее.
Курсы
Я не считаю курсы эффективным способом обучения. Они рассчитаны на среднюю температуру по больнице и всегда или слишком простые, или слишком сложные для конкретного человека.
В Школе дизайна «Яндекса» я рассказывал о веб-технологиях 31 человеку, при этом старался сделать программу интересной для всех. В результате мне пришлось разделить группу на две части и рассказывать в два потока. И всё равно, если бы я работал с каждым человеком отдельно, то смог бы научить его гораздо большему.
Поэтому лучше искать наставника, чем идти на курсы.
Онлайн-курсы
Помимо очных, сейчас есть много онлайн-курсов, например: Code School, Codeacademy, Treehouse.
Раньше они казались мне очень эффективным способом обучения. Но после общения со слушателями Школы, я понял, что сами по себе эти курсы не очень полезны. Люди их слушают, делают примеры и сразу после прослушивания курса всё забывают и не могут применить эти знания на практике.
Курсы незаменимы для старта, с них очень легко начать. Но рассматривать их нужно лишь как дополнение к самостоятельной работе, поиску решений, экспериментам и чтению документации.
Пробуйте
Обучаясь работе с кодом, вы с каждым новым знанием расширяете свои возможности. Технологии не устаревают, а постепенно развиваются. Если вы следите за ними, вы развиваетесь вместе с ними. И, если вы упираетесь в потолок, вам не нужно искать новый инструмент, вы просто дополняете свои знания и можете двигаться дальше.
Если же вы делаете ставку на изучение конкретных инструментов, а они перестают развиваться или вам не хватает его возможностей, то все полученные навыки работы вы выкинули на ветер.
Веб-технологии стали легче, появилось много удобных редакторов для работы с ними, в интернете полно ответов, руководств и документации. Появились онлайн-курсы, которые могут помочь быстро сделать первый шаг. Поэтому нет никакого оправдания, чтобы не попробовать и не потратить на это пару выходных.
изображения via Erretres, Shutterstock
Комментарии
Подписаться