Кредит фотографии: Кэмерон — Ник-Икорн
Веб-дизайнерам действительно нужно знать, как писать код? Нам действительно нужны «единороги» ?
Ответ, вероятно, нет .
Сегодняшний мир движется к суперспециализации (например, мобильным приложениям для чего угодно ). Большинство дизайнеров предпочитают концентрироваться на своих сильных сторонах — творческих аспектах дизайна сайта. Позвольте разработчику выяснить, как воплотить его в жизнь. Или, что еще лучше, создайте живой сайт с современными инструментами совместного проектирования , где нет необходимости привлекать разработчика!
Но вот в чем дело — как креативщик, вы хотите полностью контролировать свою работу. Вы хотите, чтобы ваша работа вышла в свет. Вы хотите раздвинуть границы.
Как писал Ван Гог
«Я продолжаю делать то, что не могу сделать, чтобы научиться делать это». — Винсент Ван Гог
Чтобы по-настоящему овладеть своим ремеслом, вы должны понимать среду. Среда Интернета, это код.
Для тех, кто стремится освоить веб-дизайн, вопрос не в том, «Нужно ли веб-дизайнеру учиться программировать?», А в том, «Сколько кода нужно учить веб-дизайнеру?».
Дизайнер не обязательно должен быть гуру HTML или CSS. Или эксперт кодер. Проектировщик должен понимать достаточно о коде, который составляет основу сети — чтобы иметь возможность соединять точки и принимать решения о правильном дизайне.
Для кого-то, кто никогда раньше не занимался программированием, это может быть немного ошеломляющим. HTML, CSS, JavaScript, PHP, Ruby, SQL … веб-разработка на самом деле использует множество разных языков программирования. Если вы дизайнер, стремящийся узнать, как ваш веб-дизайн оживает, вот что вам нужно знать и с чего начать.
Front End vs Back End Веб-разработка
Часть сайта, которую видят зрители, называется интерфейсом. Внутренняя часть содержит все сохраненные данные, изображения, сервер и другие компоненты. Веб-дизайн и разработка похожи на строительство дома — архитектор проектирует дом так же, как веб-дизайнер разрабатывает сайт; строительная бригада строит кирпич, строительный раствор, сантехнику и т. д., схожую с разработкой бэкенда, маляры, декоратор интерьера и т. д. обрабатывают видимые, последние штрихи к дому, похожие на застройку фасадов.
Разработка внешнего интерфейса выполняется на HTML, CSS и JavaScript, в то время как разработчики бэкэнда обычно используют PHP, Ruby, Python, Java, SQL или .Net для программирования. Разработчики полного стека, которые понимают и могут кодировать полный стек, то есть как внешний, так и внутренний. (Для получения дополнительной информации о разработке переднего плана против вы можете прочитать здесь и здесь ).
Дизайнеру не нужно изучать все эти языки программирования. Цель не в том, чтобы быть разработчиком с полным стеком или действительно разработчиком любого типа (если вы действительно не хотите осуществить переход!). Цель состоит в том, чтобы понять, как дизайн переводится в код . Для дизайнеров имеет смысл сосредоточиться на понимании основ программирования переднего плана, поскольку именно эта часть создает макет и визуальные элементы дизайна.
HTML (язык разметки гипертекста)
Переход от дизайна или макета к живому веб-сайту включает в себя много этапов кодирования и, как вы видели выше, много языков. Первый шаг в этом процессе, как правило, состоит в том, чтобы отобразить компоненты сайта на элементы HTML и написать основной код HTML. Каждый компонент называется элементом и определяется с помощью тегов. Текст, изображения, анимация становятся HTML-элементами. Каждый элемент структурирован в иерархию, называемую DOM-деревом, которая определяет порядок загрузки и отображения каждого элемента. Вот простой пример базового HTML.
<!DOCTYPE html>
<html>
<body>
<h1>A Dummy Heading</h1>
<p>Some text that spans the line.. </p>
</body>
</html>И вот как это выглядит:
Это довольно просто! Кроме основного текста, который мы вставляем, здесь нет стилей, макета или каких-либо других визуальных элементов. Это связано с тем, что информация о стилях входит в CSS. Но прежде чем перейти к CSS, вот несколько отличных онлайн-тренингов, которые помогут вам ознакомиться с HTML.
- Введение в HTML из Learnable
- HTML Введение в W3Schools
- Введение в HTML от KhanAcademy
CSS (каскадные таблицы стилей)
Большая часть информации о стилях хранится отдельно от HTML в виде листов CSS. Разработчики предпочитают отделять контент от стиля, чтобы можно было легко изменить одно или другое, не испортив все и не переделав весь код. Это работает очень хорошо, особенно для больших сайтов с несколькими страницами. На каждой странице больше не требуется кодировать собственный макет или определять шрифты и т. Д. Все страницы могут использовать общий набор таблиц стилей CSS, чтобы использовать общий макет, набор шрифтов и т. Д.
Или, если клиент решит, что ему нужны серьезные изменения в макете в последнюю минуту, вы можете просто изменить стили CSS без необходимости редактировать каждую страницу сайта. Обычно, когда разработчики начинают кодировать, это итеративный процесс, который перемещается между HTML и CSS до того, как у них будут готовы окончательные версии.
Давайте возьмем первый пример и добавим немного стиля. Следующие строки делают заголовок синим и центрируют его.
<!DOCTYPE html>
<html>
<body>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
<h1>A Dummy Heading</h1>
<p>Some text that spans the line. And goes on. And on. </p>
</body>
</html>
Теперь это выглядит так:
Опять же, это просто очень простой пример. Вы можете узнать некоторые практические CSS из следующих онлайн-ресурсов:
- Практичный CSS от Learnable
- CSS Введение от W3Schools
- Введение в CSS в Хан Академии
JavaScript
JavaScript — это то, что позволяет вам иметь динамические интерактивные элементы на вашей веб-странице. Большинство контактных форм, изменение каруселей изображений, автоматическое предложение / автоматическое заполнение полей и тому подобное основаны на JavaScript. Конечно, есть и другие способы добавления определенных динамических элементов, но JavaScript, безусловно, самый популярный. JavaScript также используется для изменения содержимого HTML или загрузки другого содержимого. В W3School есть несколько хороших примеров из жизни, где вы можете увидеть, как JavaScript меняет контент. Чтобы узнать больше о JavaScript и о том, как он может помочь дизайнерам, ознакомьтесь со следующими ресурсами:
- JavaScript для дизайнеров от Rachel Nabors (и дополнительно: Blend Conference 2013, поговорите здесь )
- Введение в JavaScript (с живыми примерами) от W3School
Существует обширная библиотека функций JavaScript, API и плагинов, которые легко доступны для большинства веб-задач. Это означает, что вы можете легко использовать эти готовые пакеты, и вам редко придется писать больше, чем базовый код JavaScript.
Собираем все вместе
Итак, мы познакомили вас с основными языками веб-разработки, которые используются для перевода вашего дизайна в живую веб-страницу. Как мы уже говорили ранее, процесс кодирования часто повторяется, когда разработчик переключается между этими языками в зависимости от требуемой функциональности. Но как все это получается вместе? Следующие курсы помогут вам понять, как HTML, CSS и JavaScript объединяются, чтобы воплотить ваши замыслы в жизнь:
- Создайте свой первый веб-сайт с HTML и CSS из Learnable
- Введение в HTML и CSS из Udacity
- 30 дней для изучения HTML и CSS от Tut +
- Сделайте сайт с HTML + CSS из CodeAcademy
- Введение в веб-разработку в Udemy
Обратите внимание, что это всего лишь несколько отобранных вводных курсов, с которых можно начать. Те, кто заинтересован в более глубоком погружении или расширении своих навыков в области веб-разработки, могут найти дополнительные ресурсы на Learnable , CodeAcademy , Tut + , Udemy или других онлайн-порталах.
Завершение
В то время как дизайнерам не нужно знать, как кодировать, усилия по изучению основ разработки внешнего интерфейса определенно помогут расширить их кругозор. Это приносит
- понимание, которое помогает создавать новые возможности дизайна
- возможность внедрять или экспериментировать с вашими живыми сайтами
- возможность или, возможно, словарный запас для взаимодействия с вашими разработчиками
и, прежде всего, удовлетворение и уважение, которое вы получаете от всего вышеперечисленного.
Это сложно? Возможно (но супер легкий, всесторонний курс, о котором я перечислил, должен сделать это бризом). Стоит ли оно того? Определенно.
Если вы уже прошли этот путь, поделитесь с нами — Как это помогло вам как дизайнеру? С какими самыми большими препятствиями вы столкнулись?