Эй, дизайнер, давайте поработаем кодом!

Некоторое время назад этот замечательный пост в блоге от моего уважаемого (во всяком случае, в некоторых кругах, ха-ха) друга Андре Герасимчука обошел команду дизайнеров Atlassian, и это заставило меня задуматься. Знание того, как кодировать, действительно делает дизайнера сильным, и я согласен с тем, что дизайнеры должны быть, по крайней мере, знакомы с этим.

Я не хочу возобновлять дискуссию о том, должны ли дизайнеры писать код. Скорее, предположим, что если вы читаете это, вы думаете, что им следует хотя бы попробовать. Звучит неплохо?

Я люблю работать с кодом. Иногда гораздо эффективнее перемещать пиксели в Photoshop или Sketch, и это ближе к конечному продукту. На самом деле, я думаю, что в идеале мне следовало бы перейти от аналоговых процессов, таких как наброски и белая доска, прямо к коду и пропустить эти средние инструменты. С этой целью я все больше и больше заставлял себя выработать привычку кодировать. Я работаю над развитием практики и подумал, что мне нужно немного времени, чтобы поговорить о вещах, которые мне подходят. Если вы ищете несколько вариантов, чтобы начать путешествие в мир кода, возможно, это поможет. И, пожалуйста, поделитесь своим собственным опытом, я бы тоже хотел поучиться у вас!

Если вам просто нужны ссылки, переходите вниз. Хорошие там вещи.

HTML / CSS

Люди часто спорят, можно ли считать HTML и CSS «кодом», но я думаю, что это немного глупо. Независимо от того, как вы их определяете, изучение HTML / CSS - отличное введение для любого дизайнера, не имеющего опыта программирования. Основы легко усвоить, и существует довольно четкий путь к углубленному изучению, которое подготовит вас к концепциям, с которыми вы можете столкнуться при использовании JavaScript или любого из языков на основе фреймворка.

Я полагаю, что многие, читающие это, имеют довольно твердое понимание HTML / CSS. Прошло много лет с тех пор, как я научился тому или иному из них, поэтому я буду краток. Вот несколько вариантов для начала:

Если ни один из них не кажется вашей чашкой чая, поиск в Google предоставит массу отличных вариантов.

Основы и основы программирования с помощью Python и Django

Хорошее место для начала программирования - это один из двух больших фреймворков; Ruby on Rails или Django (для Python). Существует довольно много руководств, и поиск в Google или поездка на любой из бесчисленных сайтов типа академии кодирования были бы хорошим местом для начала. Я делал несколько из них за эти годы, и все они хороши.

Я знаю, что многие дизайнеры начинают с Ruby on Rails, но я обнаружил, что Python и Django более просты и удобны в дизайне. Основная причина в том, что в RoR происходит немного «магии», и это здорово, если вы знаете, что делаете. Но если вы учитесь, это может сбить вас с толку.

Кроме того, по сравнению с Ruby Python читается хорошо и очень естественно, и он многословен, что (как я обнаружил) значительно упрощает понимание. Еще одна причина начать с Django и Python? Собственный Bitbucket Atlassian построен на этом стеке!

В любом случае (Django или Ruby on Rails) вы найдете множество руководств, которые помогут вам начать работу. Если вы не уверены, что я предлагаю Python / Django, вы также можете обратиться к разработчикам, которых вы знаете или с которыми работаете.

Если вы действительно хотите пойти по пути Python, у меня есть пара замечательных ресурсов, которые помогут вам в этом.

Хотите узнать основы? Попробуй на собственном горьком опыте.

Отличное место для начала - это Выучить Python на сложном пути Зеда Шоу - если вы пройдете первую треть или около того, вы получите твердое представление о базовых основах программирования. Мне он очень понравился, и я очень рекомендую его, если вы просто ищете место для начала обучения. Он хорошо написан, интересен, сфокусирован на практике (что является ключевым моментом) и его можно читать онлайн.

Хотите учиться на практике? Поприветствуйте Hello Web App.

Если вы ищете что-то более практическое, попробуйте Hello Web App by Tracy Osborn. Я только что прошел через это и нашел, что это отличное освежение, которое дало отличный контекст концепциям, которые я изучил с помощью Learn Python The Hard Way и других подобных книг. В Hello Web App вы узнаете, как создать простое веб-приложение с помощью Django. Мне понравился тот факт, что, хотя приложение, которое вы создаете, не так уж и сложно, вы узнаете много основ, которые можно расширить на все, что захотите.

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

Сотрудничество с разработчиками - Git и интерфейс командной строки

Если вы перейдете к любому из ресурсов на этой странице, вы увидите ссылки на Git, командную строку или терминал. Поначалу и то и другое может показаться пугающим, но как только вы усвоите несколько основ, они станут намного менее пугающими, и с ними будет довольно легко работать. Если вы не знакомы с Git, проще всего представить его как систему контроля версий, которая позволяет вам совместно работать над кодом (и другими файлами) безопасным способом, с резервным копированием и отслеживанием всех изменений. Наш собственный Bitbucket - это инструмент Git, и большинство команд Atlassian используют Git для управления кодом своих проектов. Вы можете узнать больше о Git из очень хорошо подготовленных руководств по Git от Atlassian.

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

И, если вы когда-нибудь застряли при использовании git, я нашел этот сайт очень полезным :)

Я настоятельно рекомендую научиться использовать CLI (интерфейс командной строки), потому что он упрощает понимание Git и других связанных понятий. Чтобы начать работу с командной строкой, попробуйте это руководство дизайнера в командной строке OSX. Или, если вам нужно более подробное руководство, попробуйте проработать это исчерпывающее руководство от Зеда Шоу.

Наконец, если вы хотите по-настоящему углубиться в Git и сотрудничество, попробуйте Git for Teams by Emma Jane Hogbin Westby.

Прототипирование с помощью Framer и генераторов статических сайтов

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

Генераторы статических сайтов для быстрой поддержки прототипов

Начнем с генераторов статических сайтов, потому что они относительно просты и их легко освоить, имея лишь немного знаний в области программирования. Если у вас есть HTML / CSS, вы, вероятно, сможете довольно быстро освоить большинство из них. Я баловался несколькими; Я использовал Jekyll, чтобы быстро разработать несколько прототипов пошаговых типов, и создал красивую простую CMS, используя Git и DocPad, генератор статических сайтов на базе node.js.

У обоих есть отличная документация, но Jekyll пользуется более широкой поддержкой.

  • Руководство для начинающих по DocPad - это пошаговое руководство по созданию базового блога с помощью DocPad. Он не слишком углубляется в основы, но за ним довольно легко следить, и я нашел его отличным источником для начала.
  • Для Джекилла есть много ресурсов, но я не использовал многие из них. Я нашел руководство по быстрому запуску полезным, и мне довольно легко удалось кое-что найти, используя их документацию.

Framer для сложных взаимодействий и анимации

Я все еще новичок в Framer, но нахожу его интересным и мощным. Он не такой доступный, как некоторые другие варианты, о которых я говорил, но он хорошо задокументирован и существует множество ресурсов. Так почему бы вам взглянуть на Framer? Это поможет вам научиться программировать и может оказаться чрезвычайно полезным в повседневной жизни. Он разработан для создания прототипов, что делает его очень удобным инструментом для любого дизайнера.

Несколько советов и хитростей

  • Не бойтесь командной строки. Многие учебники, с которыми вы столкнетесь, будут ссылаться на командную строку, и хотя это правда, что это не самый удобный интерфейс, он не так уж плох, как может показаться на первый взгляд. Вдобавок я обнаружил, что целенаправленный характер командной строки действительно помогает изучать сложные концепции.
  • Практика. Упражняться. Практика. Это вдвойне подходит для таких вещей, как изучение команд Git и использование командной строки. Я обнаружил, что превращение обучения в повседневную рутину, когда я проверяю, фиксирую и отправляю свой код в Bitbucket, действительно помогло мне изучить и запомнить некоторые концепции, которые значительно упрощают изучение кода.
  • Не копируйте и не вставляйте примеры, которые вы увидите во время обучения. Напечатайте их. Вы получите ту же рекомендацию, если погрузитесь в курс «Learn Python The Hard Way». Для этого совета есть несколько причин. Во-первых, набор примеров дает вам время понять концепции и посмотреть, как они соотносятся с синтаксисом. Во-вторых, вы будете делать ошибки - и это хорошо. Один из лучших способов осмыслить то, что вы изучаете, - это что-то сломать, а затем придумать, как это исправить. Временами это может расстраивать, особенно когда ошибка возникает из-за того, что я не следую примерам или забегаю вперед (что-то, что я делал ОЧЕНЬ МНОГО), но оно того стоит. Выполнять работу.
  • Говоря об исправлении неисправных вещей, Google и Stack Overflow - отличные ресурсы. Stack Overflow очень, очень часто предлагает решение проблем, с которыми вы столкнетесь, и будет хорошо отображаться в любом поиске Google, который вы запускаете, когда что-то пойдет не так.
  • Делайте много заметок. Вы будете выполнять множество действий снова и снова. Некоторые из них очень важно понимать концептуально, а другие - это просто мелочи, которые вам нужно запомнить (например, команды терминала для запуска сервера). Возьмите страницу из книги «Как сделать дело» и запишите эти вещи, чтобы вы могли сосредоточиться на обучении.
  • Рассмотрите возможность создания пары с разработчиком. Это не только отличный способ учиться, это также хороший способ вызвать сочувствие к вашим коллегам и, в очень практическом смысле, является одним из наиболее эффективных способов убедиться, что ваши проекты хорошо реализованы.

Обзор ссылок для тех, кто бросает вызов прозе

(По полупрерективному пути обучения.)

HTML и CSS

Командная строка и Git

Программирование для начинающих

Фреймворки и прототипирование

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

Вам понравился этот пост? Хотите еще того же? Обратите внимание на Создание Atlassian.