Веб-технологии для дизайнеров — зачем и как

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

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

    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.: Все комментарии внимательно прочитаю в конце дня и отвечу апдейтом поста.
    Поделиться публикацией
    Комментарии 14
      0
      Верно излагаете, но слепая печать не нужна. Вы не копибредингом заниматься собрались, а писать код.
      Только что сдал задачу, решал которую я не один час. В ней, если без комментариев, семь строк. И это правильное решение задачи — много думать мало писать.
        0
        Медленно печатающие люди более склонны к двум смертным грехам программирования:
        • Однобуквенные имена и прочие неудобоваримые сокращения
        • Копипаст
          0
          Боже, ну никто не отменял ide, что вы в самом деле
            0
            IDE пока еще не скайнеты и не читают мысли, поэтому не всё умеют дополнять.
            Пользователь Idea.
              0
              Ну все равно автокомплит сильно облегчает задачу :)
                0
                Это да, но если ты набираешь двумя пальцами, как пожилая дама с технофобией, это медленно и мучительно. Это как читать по слогам.
        0
        Ты пишешь что владение веб-технологиями помогает дизайнеру решать задачи. А не считаешь ли ты что это создает какие то рамки/границы в работе дизайнера? Если раньше ты мог фантазировать, при этом рождались какие то новые интерфейсы. Зная веб-технологии, будет сложно отойти в сторону и придумать что то новое.
        ПС: я твой фанат. Очень понравилось твое выступление на Я.Субботнике 26. И как ты замотивировал всех в конце на изучение кода ).
          0
          А не считаешь ли ты что это создает какие то рамки/границы в работе дизайнера?


          Что думаете насчет этого? https://www.artlebedev.ru/kovodstvo/sections/175/
            0
            Согласен с основной мыслью, но… Если взять человека, ничего не понимающего в коде и компьютерах, и дизайнера, владеющего всевозможными веб технологиями, и поставить одну задачу — нарисуйте сайт. Думаю что оба смогут это сделать. Первый нарисует что то понятное ему, и нельзя сказать что это будет плохо. То что он не знает кода и других веб технологий расширяет его возможности, можно проявить фантазию и включить воображение.
            Конечно тема больше философская. Ведь зная технологии ты знаешь и где можно отступить/нарушить правила.
              0
              То что он не знает кода и других веб технологий расширяет его возможности


              В целом да, но не сужает ли это его возможность сделать именно то, что от него требуется?
          0
          Достаточно редко вижу разработчиков, способных быстро печатать вообще, а уж слепой печатью 10 пальцами вообще ни разу не видел :) так что этот пункт совсем не обязательный
            0
            Для слепой десятипальцевой печати не обязательны тренажеры. Нужно только достаточно много печатать по-английски и первое время заставлять себя нажимать на клавиши нужными пальцами.
              0
              Привет Антон! Большое спасибо за статью.
              К сожалению не нашел второй статьи. Надеюсь что она выйдет.
                0
                Я вообще думал, что без базового англ и хорошим дизайнером не стать…
                или… о боже… ФШ с русским интерфейсом? Свят-свят

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое