Руководство веб-дизайнера по программированию

Posted on by riasevastopol

Вправду ли веб-дизайнерам необходимо знать, как кодировать? Необходимы ли нам “unicorns“?

Возможно, нет.

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

Либо, значительно лучше, создать живой сайт с современными инструментами совместного проектирования, где нет необходимости кликать разработчика!

Но вот незадача – как творческий человек, вы желаете иметь полный контроль над вашей работой. Вы желаете, дабы ваша работа жила. Вы желаете раздвинуть границы.

Как писал Ван Гог: “Я делаюто, чего еще не могу, дабы обучиться этому”.

Дабы по-настоящему освоить собственный ремесло, вы должны разбираться в материале. Материал сети – это код.

Для тех, кто пытается освоить веб-дизайн, появляется не какое количество вопрос “Вправду ли веб-дизайнеру необходимо знать, как кодировать?”, а “какое количество кода необходимо изучить веб-дизайнеру?”.

Дизайнер не должны быть HTML либо CSS гуру. Либо специалистом кодирования. Дизайнер обязан осознавать достаточно о коде, что лег в базу сети – дабы быть в состоянии соединить точки и принимать обоснованные ответы по дизайну.Руководство веб-дизайнера по программированию

Для тех, кто ни при каких обстоятельствах не занимался программированием раньше, это возможно мало сложным. HTML, CSS, JavaScript, PHP, Ruby, SQLвеб-разработки в действительности применяют кучу различных языков программирования. Если вы дизайнер, стремящийся изучить вопрос воплощения веб-дизайна в судьбу, вот то, что вам необходимо знать и с чего начать.

Разработка Front End против Back End

Часть веб-страницы, которую видят визитёры, именуется front end. Back end складывается из всех сохраненных данных, изображений, других компонентов и сервера. Веб-разработка и дизайн мало похожи на строительства дома – архитектор проектирует дом так же, как веб-дизайнер разрабатывает сайт; строительная бригада поднимает кирпичи, раствор, сантехнику и т.д., это сродни разработке back end, живописцы, интерьеристы и т.д. обрабатывают видимые штрихи, подобно разработке front end.

Разработка Frontend происходит в HTML, CSS и JavaScript, тогда как back end разработчики в большинстве случаев применяют PHP, Ruby, Python, Java, SQL либо .NET для программирования. Разработчики full stack знают и смогут кодировать full stack, как frontend, так и backend. (Для получения более подробной информации о разработках frontend и backend, вы имеете возможность прочесть тут и тут).

Дизайнеру не требуется изучать все эти языки программирования. Цель состоит не в том, дабы не стать разработчиком full stack, либо вторым типом разработчика (если вы сами не желаете им стать!). Цель пребывает в том, чтобы выяснить, как дизайн ведет к коду.

Для дизайнеров имеет суть сосредоточиться на понимании баз front end программирования, поскольку это часть, которая формирует визуальные элементы и структуру дизайна.

HTML (язык HyperText Markup)

Переход от конструкции либо макета к сайту включает в себя множество этапов кодирования, и, как вы видели выше, множество языков. Первым шагом в этом ходе есть, в большинстве случаев, разработать замысел компонентов сайта в элементах HTML и написать основной HTML код. Любой компонент именуется элементом, и отмечается при помощи тегов. Текст, изображения, анимации – все делается элементом HTML.

Любой элемент строится в иерархии, которая именуется DOM дерево и определяет порядок, в котором любой элемент загружается и отображается. Вот несложный пример главного HTML.

A Dummy Heading

Some text that spans the line..

И вот как он выглядит:

Это достаточно легко! Кроме главного текста, которого мы вставляем, тут нет стиля, макета либо любого другого визуального элемента. Это вследствие того что дизайн информация поступает в CSS. Но перед тем как мы перейдем к CSS, вот кое-какие онлайн тренинги, каковые смогут оказать помощь вам познакомиться с HTML

  • Introduction to HTML от Learnable
  • HTML Introduction от W3Schools
  • Intro to HTML от KhanAcademy

CSS (каскадные таблицы стилей)

Большая часть дизайн информации хранится раздельно от HTML, как CSS таблицы. Разработчики предпочитают отделить содержание от стиля, дабы было легче поменять то либо второе, не смешав все, либо дабы не повторять целый код. Это трудится отлично, в особенности для громадных веб-сайтов с множеством страниц.

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

Либо, в случае если клиент решает в последнюю 60 секунд, что им необходимы важные трансформации в макет, вы имеете возможность стили CSS без необходимости редактировать каждую страницу сайта. В большинстве случаев, в то время, когда разработчики начинают кодирование, это итеративный процесс, между HTML и CSS, перед тем как готовьсяокончательные варианты.

Заберём первый прием и добавим стиль. Следующие строчки сделают заголовок синим и отцентрируют его.

h1 { color: blue; text-align: center; } A Dummy Heading

Some text that spans the line. And goes on. And on.

Он на данный момент выглядит так:

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

  • Practical CSS от Learnable
  • CSS Introduction от W3Schools
  • Intro to CSS от KhanAcademy

JavaScript

JavaScript – это то, что разрешает вам иметь динамические, интерактивные элементы на веб-странице. Большая часть контактных форм, меняющих карусели изображения, авто-предложение слов/автоматическое заполнение полей основаны на JavaScript. Само собой разумеется, имеется и другие методы, добавления определенных динамических элементов, но JavaScript есть самым популярным.

JavaScript кроме этого употребляется для трансформации содержимого HTML либо загрузки разного контента. У W3School имеется кое-какие хорошие живые примеры, где вы имеете возможность заметить, как JavaScript изменяет содержание. Дабы определить больше о JavaScript и как она может оказать помощь дизайнерам, посмотрите на следующие ресурсы:

  • JavaScript for Designers от Rachel Nabors (и дополнительно: Blend Conference 2013 Talk here)
  • JavaScript Intro (с примерами) от W3School

Существует широкая библиотека функций JavaScript, API и плагины, доступные для большинства веб-задач. Вы имеете возможность легко применять эти заблаговременно собранные пакеты, и вам редко нужно будет писать что-то больше, чем главный код JavaScript самостоятельно.

Выводы

Так, мы познакомили вас с главными языками frontend разработки – те, каковые употребляются для перевода вашего проекта в веб-страницу. Как мы уже говорили ранее, процесс кодирования довольно часто итерационный и разработчик находится между этими языками, в зависимости от требуемой функциональности. Но как же все эсошлось? Следующие направления смогут оказать помощь вам осознать, как HTML, CSS и JavaScript сошлись чтобы воплотить проекты в судьбу:

  • Build Your First Website с HTML и CSS от Learnable
  • Intro to HTML and CSS от Udacity
  • 30 Days to Learn HTMLCSS от Tut+
  • Make a Website with HTML+CSS от CodeAcademy
  • Introduction to Web development от Udemy

Обратите внимание, что это только кое-какие отобранные вводные направления. Те, кто заинтересован в более подробном изучении, либо расширении собственных навыков, включая разработку направляться end, смогут поискать дополнительные ресурсы на Learnable, CodeAcademy, Tut+, Udemy или других интернет-порталах.

Подведение итогов

Не смотря на то, что дизайнерам не требуется знать, как кодировать, принятие упрочнений познания баз разработки front end, непременно, окажет помощь увеличить собственный кругозор. Это даст

  • познание того, что оказывает помощь создавать новые возможности для дизайна
  • свойство осуществлять либо экспериментировать со собственными сайтами
  • возможность либо, пожалуй, словарный запас для сотрудничества с разработчиками

и, в первую очередь, уважение и удовлетворение, которое вы получите

Это сложно? Вероятно (но супер простой, безграничный курс, вышеприведенный облегчит познание). Стоит ли оно того?

Определенно.

Если вы уже применяли данный способ, поделитесь с нами – Как это помогло вам как дизайнеру? Каковы были самые громадные препятствия, с которыми вы столкнулись?

Высоких вам конверсий!

Случайные статьи:

Какой компьютер подойдёт для программирования? — Вопросы и ответы #15


Подборка похожих статей:

riasevastopol

More Posts