Дизайн Игнат Смирнов
805

Какие языки программирования могут понадобиться дизайнеру?

Всем привет! Меня зовут Игнат и пару месяцев назад я уже публиковал эту статью у себя на Медиуме. Не сказал бы, что получилось хайпануть, но я получил несколько разносторонних и интересных отзывов. Сегодня хочу поделиться ею и обсудить с вами здесь.

В закладки

Вёрстка: HTML и CSS

Начнем с простого. Откровенно говоря, это еще не программирование. HTML — язык разметки гипертекста (Hypertext Markup Language). Он определяет структуру страниц и то, из каких элементов она состоит. Эти элементы определяются тегами: заголовки, текст, ссылки, списки и др. Важная задача тегов — определение семантики веб-документов. Например, заголовок первого уровня (h1) должен быть только один, а правильное оформление структурных элементов (header, footer, article и др.) облегчит чтение кода и его считывание поисковыми (и не только) роботами.

Язык CSS нужен для стилизации HTML-вёрстки. Название расшифровывается как Cascading Style Sheets или, если по русски, каскадные таблицы стилей. Каскадные они потому, что язык использует наследование от родителя к потомку, спускаясь вниз по элементам. При помощи CSS мы можем позиционировать элементы, менять их размер, задавать правила типографики, создавать анимации и многое другое.

Умение верстать поможет вам создавать реалистичный и реализуемый дизайн, наладить коммуникацию с разработчиками, а также претворять свою работу в жизнь. Более того, в Европе и США это умение — уже стандарт рынка и поможет вам соответствовать его требованиям.

Если вы еще не умеете верстать, вот несколько источников, которые помогут научиться:

Также советую обратить внимание на эту статью, которая научит вас верстать современно и гибко.

JavaScript

Этот язык изначально создавался для того, чтобы исполняться в браузере и сделать веб-странички “живыми”. Он умеет создавать и удалять HTML-теги, посылать запросы на сервер, получать данные без перезагрузки страницы, реагировать на действия пользователя и многое другое. На сегодняшний день, на нём можно писать не только фронтенд, но и бэкенд, создавать мобильные и десктопные приложения, а также автоматизировать работу с некоторыми программами (например, c фотошопом).

Умея верстать и зная основы JavaScript-а, дизайнер может полностью взять на себя разработку несложных продуктов: лендингов, сайтов-визиток и пр. Более продвинутые смогут создавать свои плагины для Sketch, импортировать в него реальные данные (как мы автоматизировали создание рассылок) или генерировать дизайн-системы из кода.

Если вы решили изучить JavaScript, обратите внимание на следующие ресурсы:

SQL

Если о необходимости знания вёрстки и JavaScript-а многие слышали еще до моей статьи, то об SQL они могут услышать впервые. Если вы занимаетесь UX-исследованиями, то без работы с данными вам не обойтись, а язык SQL как раз поможет в этом. SQL расшифровывается как Structured Query Language — структурированный язык запросов. Он был создан специально для создания, управления и модификации данных в базах данных.

Отрывок из Гарвардского курса CS50, где объясняется что такое БД

Язык работает в формате “запрос-ответ”: вы пишите свой запрос в базу, а она присылает результат его обработки.

При помощи SQL мы можем агрегировать, группировать и сортировать данные.

Если перед вами встал вопрос изучения SQL, советую пройти классный курс на Stepik-е. Если же нет времени на объёмный курс, можно начать знакомство с этой статьи.

R

R — язык программирования, который был создан около 20 лет назад исключительно для академических исследований в области анализа данных. Так как язык тесно связан со статистикой и прикладным анализом данных, он может стать полезным инструментом для UX-аналитика. Язык позволяет применять основные методы статистического анализа: t-тест, корреляцию, дисперсионный и регрессионный анализ и др. При помощи инструментов этого языка можно также визуализировать полученные данные. Для работы с R необходимы хотя бы базовые знания математической статистики.

Ресурсы для изучения:

Python

Python — высокоуровневый язык программирования, ориентированный на читаемость кода и повышение производительности разработчиков. Язык придерживается своей определённой философии, называемой «The Zen of Python», который гласит (если в двух словах), что любая программа на языке (как и сам язык) должна быть простой и не двусмысленной. Из-за своей простоты, Python является первым изучаемым языком программирования у многих студентов по всему миру. Оказывается, он может быть полезным и для дизайнера. Например, Python активно используется архитекторами и промышленными дизайнерами для алгоритмического моделирования в Rhino при помощи плагина Grasshopper.

Вот такие (и не только) сложные штуки легко генерируются в Rhino благодаря Grasshopper и Python

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

Заключение

Как видно из статьи, работа дизайнера давно не ограничивается проектированием UX и UI, но и требует некоторых навыков разработчика. В США и Европе эти навыки давно стали стандартом рынка, а в некоторых направлениях деятельности они позволяют оптимизировать рутину и выйти за стандартные рамки профессии. Почему-то многие люди боятся изучения программирования, но на самом деле в этом нет ничего сложного. Главное — определить контекст применения и грамотно подобрать учебные материалы.

Пишите свои комментарии, если есть что добавить и исправить, а также подписывайтесь на мой Telegram-канал. Периодически я пишу о чем-то интересном о дизайне и управлении продуктом. Спасибо!

#дизайн #разработка

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Игнат Смирнов", "author_type": "self", "tags": ["\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 5, "likes": 3, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 35850, "is_wide": false }
{ "id": 35850, "author_id": 59944, "diff_limit": 1000, "urls": {"diff":"\/comments\/35850\/get","add":"\/comments\/35850\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/35850"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

5 комментариев 5 комм.

Популярные

По порядку

1

Хотелось бы какой-то живой пример для sql и R. Хотя бы такой, как для Python приведён (это я про красивую картинку). Хотя если честно, и из этой красивой картинки не понятно, как там применено программирование.

Ответить
1

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

Ответить
0

насколько глубоко нужны языки

Не особо глубоко. Всё-таки дизайн нуждается в ЯП ровно настолько, чтобы решить какую-то отдельную задачу, а не создать полнофункциональную систему. Например, если задуматься над "красивой картинкой" в разделе про Питон - я, навскидку, могу придумать такой кейс: вручную создавать такую графику долго и муторно, проще и быстрее написать алгоритм.

Еще знание ЯП шибко пригождается в прототипировании. Самый тупой и простой кейс - гибко настраивать поведение интерфейса в Axure, тамошний condition builder является надстройкой над Ява-скриптом - обойтись без знаний можно, но сложно.

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

Ответить
1

Можно зеркальную статью написать, Что нужно фронту чтобы избавится от дизайнера)

Ответить
1

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

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

Когда я сажусь задизайнить какой-то интерфейс, например, 80% времени у меня уходит на возню с инструментами, у каждого из которых своя логика и воркфлоу, и я напоминаю себе человека-оркестра, который словно паук жмёт педальки на десятке инструментов, чтобы породить прекрасный звук. Убери один инструмент - и звука _вообще_ не получится.

Суть проблемы в том, что на сам дизайн остается мало времени и сил. Может, поэтому в интерфейсах сейчас ситуация в основном плохая. А визуальная составляющая постоянно "заезженная".

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления