Содержание
- Преимущества проектирования с помощью кода
- Данные в первую очередь
- Мобильное добра бесплатно
- В поисках общего языка
- Учись быстрее
- Быстрая итерация
- Более быстрое время для запуска
- Почему именно HTML5?
- Магический атрибут данных
- CSS3 - это новый Photoshop
- Sass + Compass: волшебно вкусно
- jQuery: да, вы можете
- Каркасы
- Последние мысли
Эта статья впервые появилась в 235-м номере журнала .net - самого продаваемого журнала для веб-дизайнеров и разработчиков.
Я никогда не был большим поклонником того, чтобы делать больше, чем нужно. Я склонен оценивать методы и инструменты, исходя из их способности сделать меня или мою команду более эффективными. Как быстро они приводят нас к работающему продукту? Насколько они эффективны в общении? Они не мешают нам?
С годами я скорректировал свой процесс проектирования и инструменты. Думаю, я буду продолжать это делать. Такова природа дизайна для технологий и Интернета. Эта отрасль постоянно развивается; наши процессы и инструменты также должны развиваться.
HTML5 и CSS3 упрощают перенос большей части процесса проектирования вверх по течению - от Photoshop и больше к живому, дышащему дизайну. Такие инструменты, как Foundation, Bootstrap и jQuery, делают большую часть процесса проектирования более доступной для программирования.
Преимущества проектирования с помощью кода
Во-первых, я не призываю исключать Photoshop или любой другой редактор визуального дизайна из вашего рабочего процесса. Вместо этого я сосредоточусь на преимуществах переноса этого дизайна в код раньше, чем позже.
Данные в первую очередь
Что мне всегда нравилось в дизайне с помощью HTML, так это то, что он побуждает думать с точки зрения данных. Напротив, используя программы для рисования, такие как Illustrator, OmniGraffle или Balsamiq, вы начинаете с поля и заполняете его данными.
В HTML вы создаете DOM (объектную модель документа), что-то вроде создания оглавления. Это возвращение к истинному информационному дизайну с осмысленной иерархией. HTML5 делает еще один шаг вперед, добавляя новые семантические элементы: статья, раздел, верхний колонтитул, сторонний колонтитул, нижний колонтитул и так далее. Этот подход, ориентированный на данные, прекрасно сочетается с адаптивным дизайном, ориентированным на мобильные устройства.
Мобильное добра бесплатно
Если вы читаете это, вы, вероятно, разрабатываете для мобильных устройств. И, скорее всего, вам придется разработать одну или две формы. С HTML5 вам повезло. До HTML5 ваши типы ввода были в значительной степени либо текстовым полем, либо полем пароля. HTML5 представил ряд дополнительных типов ввода, в том числе:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Что действительно удивительно в этих дополнительных уникальных типах ввода, так это то, что мобильные браузеры на iOS и Android распознают их и автоматически заменяют контекстно-зависимую клавиатуру - без каких-либо специальных подключаемых модулей jQuery или хакерских атак. Да, и если ваш браузер не знает, что такое input type = "email"> есть, то по умолчанию используется только текстовый ввод.
В поисках общего языка
«Это здорово, как наши дизайнеры и разработчики могут работать на одном языке», - Джон Драго, разработчик приложений в Inflection.
Посмотрим, звучит ли это знакомо. Я нахожусь в конференц-зале с полдюжиной разработчиков серверных приложений, которые могут кружить вокруг меня код на Ruby, Python, Java или .NET. Я единственный дизайнер. Некоторые из моих предложений изначально отвергаются как слишком сложные для реализации. Я подхожу к доске и начинаю писать на доске немного HTML и CSS, чтобы понять, как можно реализовать дизайн. Внезапно тон разговора меняется, и один из разработчиков неохотно говорит: «Ну, да, если мы сделаем это таким образом, это может сработать».
Перевод большей части моего процесса проектирования в код улучшил общение с разработчиками. Знание того, как создавать дизайн в коде, дает дополнительный уровень уважения. Необязательно быть экспертом, чтобы заслужить это уважение. В то время как мои навыки HTML и CSS очень хороши, мои навыки JavaScript в лучшем случае посредственны. И я не стесняюсь признаться в этом. Тем не менее, при работе с веб-интерфейсом или разработчиками на стороне сервера тот факт, что мы можем говорить на общем языке или идти навстречу, является огромным преимуществом.
Учись быстрее
Хотя каркасы и визуальные композиции могут помочь в планировании, эти статические артефакты являются теоретическими. Сколько раз вы пытались объяснить кому-то свое взаимодействие, только чтобы они отвечали: «Думаю, мне нужно это увидеть». Чем раньше вы дойдете до прототипа, с чем люди смогут взаимодействовать, тем быстрее вы сможете испытать дизайн и увидеть, работают ли идеи.
Быстрая итерация
Когда в последний раз окончательный дизайн, отправленный в производство, точно соответствовал вашему фотошопу? Почти никогда. В дизайне цифровых продуктов изменения происходят постоянно. Кроме того, такие изменения, как увеличение размера заголовков с 22 до 24 пунктов на паре десятков экранов, в Photoshop могут занять несколько часов. Смарт-объекты дают вам определенный уровень объектно-ориентированного дизайна в Photoshop. К сожалению, большинство визуальных дизайнеров, которых я знаю, недостаточно используют смарт-объекты. С CSS, поскольку он поощряет более систематический подход к дизайну, типографские изменения занимают минуты, а не часы.
А как насчет изменения линейных градиентов на всех ваших кнопках? Или размер каймы? Как насчет того, чтобы сменить квадратные углы на закругленные 2 пикселя? В Photoshop это может занять несколько часов, и вам все равно придется его кодировать. Возможность проектирования в коде помогает избежать повторного обращения в Photoshop для повторения визуального дизайна. Когда вы переносите эти изменения в код с помощью CSS3 и Sass (о которых я расскажу позже в этой статье), они могут происходить в режиме реального времени и занимать всего несколько минут.
Более быстрое время для запуска
С годами, когда я перевел большую часть рабочего процесса проектирования в код, я ощутил реальное улучшение - примерно на 20–30 процентов времени вывода продукта на рынок. Чем больше я этим занимаюсь, тем меньше времени трачу на дублирование усилий. Я трачу меньше циклов на работу в Photoshop или Fireworks, а затем повторяю работу в коде.
В какой-то момент дизайн должен взаимодействовать с каким-либо типом серверной части, будь то CMS, приложение Rails или что-то еще. Поскольку большая часть моей дизайнерской работы находится в коде, интеграция происходит раньше, чем позже. Пару лет назад один из моих клиентов, PointRoll, перешел от прототипа к производству за пять дней.
Почему именно HTML5?
HTML5 проще, чем предыдущие версии HTML. Возьмем, к примеру, объявление типа документа. В предыдущих версиях HTML DOCTYPE выглядело примерно так:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
И было шесть разных версий. К счастью, HTML5 DOCTYPE выглядит так:
! DOCTYPE HTML>
Шутки в сторону. Это оно. Потрясающе просто.
При создании стандартной HTML-страницы существует ряд общих элементов, таких как заголовок, область основного содержимого, боковая панель и нижний колонтитул. Я уверен, что вы видели что-то подобное раньше:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Ничего особенного в этом нет. Но как только этот шаблон заполнен содержимым, он превращается в суп div. Напротив, с новыми семантическими элементами HTML5 вы получаете что-то гораздо более простое и легкое для сканирования, например:
header> nav> / nav> / header> article> aside> / aside> / article> footer> / footer>
Посмотри на это. Кое-что имеет смысл.
Магический атрибут данных
В HTML5 есть еще один замечательный крючок, который дает вам возможность создавать собственное семантическое значение: данные-. Раньше, если вы хотели назначить что-то значимое элементу DOM, вы были ограничены идентификаторами, классами и ролями.
К сожалению, идентификаторы должны быть уникальными. Классы универсальны (ура!), Но их использование может быстро превратиться в беспорядок. Роли - это недоиспользуемый актив, который имеет большое значение для ARIA. Недавно я использовал данные для платформы аналитики отслеживания событий, которую мы разрабатываем в Inflection.Мы большие поклонники тестирования наших проектов. При работе с приложениями или страницами, которые обладают высокой интерактивностью, мы хотели бы получить более детальное представление о взаимодействии с клиентами на странице.
Введите данные-. С его помощью вы можете назначать, передавать и подключаться к «определению своей собственной» смысловой модели. Так, например, вы можете сделать так:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Мы можем прикрепить слушателя с JavaScript к странице, и каждый раз, когда клиент наводит курсор или нажимает эту кнопку, мы можем отслеживать эту активность. Вместо того, чтобы отслеживать только тех, кто зарегистрировался через OAuth в Twitter, мы видим, что они зависали над Facebook, затем Twitter, затем LinkedIn и, наконец, решили выбрать Twitter для своей модели OAuth.
Представьте себе распространение этого на такой сайт, как Pinterest, или новый дизайн Myspace, где клиенты перетаскивают плитки, чтобы изменить их порядок в зависимости от интереса. Или, возможно, скрыть плитки, которые им не интересны. данные- Атрибут позволяет вам прикреплять или назначать дополнительный уровень семантического значения вещам, которые вы можете определить. Для сайтов и приложений, которые в значительной степени полагаются на Ajax, он открывает безграничные возможности.
CSS3 - это новый Photoshop
CSS3 привнес совершенно новый уровень дизайна внешнего вида, который раньше требовал фоновых изображений, фрагментов и печально известной техники «раздвижных дверей». К счастью, это все в прошлом.
Давайте посмотрим, как создать причудливую кнопку с линейным градиентом, закругленными углами, тенью текста, которая придаст ей приятный эффект нажатия букв, и свечением при наведении курсора. Изучение этих методов будет иметь большое значение. Каждый из них может использоваться независимо или в различных комбинациях, чтобы снять практически любую из актуальных визуальных тенденций, актуальных сегодня в сети.
Во-первых, давайте внесем несколько изменений в значение по умолчанию кнопка> а также input type = "submit"> элементы. Предполагая, что вы используете один из стандартных сбросов CSS, мы просто добавим небольшой размер и передышку.
/ * Кнопки кнопки, у которых есть кнопки. ======================================= * * / button, input [type = "submit"] {height: 2.7em; заполнение: .4em .7em; высота строки: 1,9; }
Совет: Кнопки и входы, которые передаются, может быть сложно изменить. Я обнаружил, что, установив для параметра line-height значение 1,6 или больше, вы можете избежать необходимости в дополнительном div или span внутри кнопка> тег.
Теперь мы "исправили" проблему с кнопкой и можем создать .btn класс, чтобы дать нам красивую чистую кнопку с закругленными углами, линейным градиентом, контуром и видом высокой печати.
.btn {дисплей: встроенный блок; граница: 1px solid # d4d4cc; -moz-border-radius: 4 пикселя; -webkit-border-radius: 4 пикселя; радиус границы: 4 пикселя; заполнение: .4em .7em; фон: # edeff2; фон: -webkit-gradient (линейный, 0% 0%, 0% 100%, от (#fefe), остановка цвета (0,55, # edeff2), до (# e4e6e9)); фон: -moz-linear-gradient (по центру вверху, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; тень коробки: rgba (160,172,187, .7) 0 0 .2em 0; цвет: # 6c7786; размер шрифта: 1.1em; тень текста: #fefefe 1px 0 1px; высота строки: 1,375em; курсор: указатель; }
А затем красивый эффект наведения с легким свечением с помощью тень коробки метод:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; фон: # e6e9eb; фон: -webkit-gradient (linear, 0% 0%, 0% 100%, from (# f7f7f7), color-stop (0.55, # f6f6f7), to (# e6e9eb)); фон: -moz-lineargradient (по центру вверху, # f7f7f7, # f6f6f7 55%, # e6e9eb); цвет: # 45484b; тень текста: RGB (255,255,255) 1px 1px 0; цвет границы: # c9c9c0; }
Я не большой поклонник написания кода линейного градиента. Это долго и запутанно. Как видите, я включил только версию для -моз, -webkit, и стандартная модель. Если вы хотите включить версии -o и -ms, вам потребуется удвоить код.
Есть еще два варианта. Один из них - генератор CSS3; в сети есть несколько, в том числе ColorZilla. Но если вы хотите немного улучшить свою игру, подумайте о том, чтобы погрузиться в Sass: в сочетании с Compass это находка.
Sass + Compass: волшебно вкусно
Вы можете перестать надеяться на редакцию единорога CSS4. Он здесь и называется Sass + Compass. Sass расшифровывается как Syntactically Awesome Stylesheets: вы наследуете все традиционные преимущества CSS3 с добавленными радостями переменных, миксинов, расширителей и других полезных свойств.
Недавно я провел рефакторинг CSS-файла на 5000 строк, в котором было более 30 вариантов одного и того же оттенка синего. В Sass я заменил все варианты этим кодом:
цвет: синий;
Определив $ синий в моем _variables.scss файла, я могу создать цвет по умолчанию, на который может ссылаться каждый файл CSS или SCSS. Любой, кто пишет CSS, может использовать $ синий и не нужно беспокоиться об использовании пипетки, поиске шестнадцатеричного кода или цвета RGB, RGBA или HSL.
Помните тот код линейного градиента? Вместо того, чтобы писать несколько строк кода, как насчет этого:
@include background (linear-gradient (# b1cfdc, # 7a9cac));
Пусть Sass и Compass сделают тяжелую работу и сгенерируют для вас правильный синтаксис: готово. Допустим, вам нужен более темный или более светлый вариант цвета. Вы можете перемещать пипетку в Photoshop или просто использовать команды осветления / затемнения в Sass:
@include background (linear-gradient (darken ($ litegray, 2%), darken ($ off-white, 5%)));
Это создаст линейный градиент с затемнением на 2%. $ lite-серый и на 5% потемнели белый с оттенком. Вуаля! Вам даже не нужны коды HEX или RGB.
jQuery: да, вы можете
Я хотел бы в кое-чем признаться. JavaScript раньше меня пугал. Затем я нашел jQuery. Я не претендую на звание гуру JavaScript, но я вполне уверен, что смогу осуществить практически любой переход или функцию, которая мне понадобится, с помощью jQuery.
Возьмем, к примеру, возможность отображать дополнительный номер телефона на экране, щелкнув ссылку «Добавить новый номер». Используя jQuery, вы просто пишете это:
// - Прогрессивное раскрытие - // $ (’. New-number’). Click (function () {$ (’. Alt-number’). FadeIn (’fast’);});
Ищете что-то более продвинутое? Наверное, для этого есть плагин. Базовое поведение простое, а сложное - доступно с помощью jQuery.
Каркасы
Двумя наиболее надежными на сегодняшний день фреймворками являются Foundation и Bootstrap. Теперь, прежде чем вы откажетесь от фреймворков CSS, позвольте мне кое-что спросить. Вы используете jQuery? Рубин на рельсах? Джанго? Все рамки.
Так же, как jQuery и RoR, Foundation и Bootstrap были рождены из осознания того, что есть изрядное количество вещей, которые мы делаем снова и снова (например, сбросы, типографика, сетки, формы, кнопки, навигация и списки). Foundation и Bootstrap предлагают поддержку адаптивного дизайна за счет использования вспомогательных классов. Оба хорошо задокументированы и прошли дорожные испытания, поэтому вы можете использовать их с уверенностью.
Одно ключевое различие между ними: Bootstrap основан на системе LESS для предварительной обработки CSS, тогда как Foundation основан на Sass. Я предпочитаю Sass LESS из-за его дополнительных возможностей, но и Sass, и LESS разбивают традиционный CSS на части.
Последняя мысль о фреймворках. Для тех, кто не хочет унаследовать чрезмерное раздувание чужого фреймворка, подумайте о том, чтобы выбрать существующий и разбить его до костей, или выбрать вишенку из нескольких, чтобы создать свою собственную. В любом случае, действительно нет причин каждый раз начинать с нуля.
Последние мысли
Хотите больше контроля над тем, как в итоге получится ваш дизайн? Переместите больше процессов вверх по потоку в код. HTML5 наконец-то привносит смысл в DOM. Скатертью до бессмыслицы DOCTYPEс и дивит. CSS3 - это новый Photoshop: линейные градиенты, радиус границы и тени блока FTW! А с такими инструментами, как Bootstrap, Foundation, Sass и jQuery, перенос дизайна в код еще никогда не был таким простым.
Откройте для себя 55 удивительных примеров HTML5 на Creative Bloq.
