Зміст
- Переваги проектування за допомогою коду
- Дані спочатку
- Мобільний добробут безкоштовно
- Пошук спільної мови
- Вчіться швидше
- Швидка ітерація
- Швидший час запуску
- Чому HTML5?
- Магічний атрибут даних
- CSS3 - це новий Photoshop
- Сасс + Компас: чарівно смачний
- 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 та хакерів. О, і якщо ваш браузер не знає, що таке тип введення = "електронна пошта"> є, тоді він просто за замовчуванням вводить текст.
Пошук спільної мови
"Це чудово, як наші дизайнери та розробники можуть працювати однією мовою", - Джон Драго, розробник додатків у Inflection.
Подивіться, чи це звучить знайомо. Я перебуваю в конференц-залі з півдюжиною розробників додатків на стороні сервера, які можуть кодувати кола навколо мене в Ruby, Python, Java або .NET. Я єдиний дизайнер. Деякі мої пропозиції спочатку відхиляються як надто складні для реалізації. Я підходжу до дошки і починаю писати на дошці HTML та CSS, як можна реалізувати дизайн. Раптом тон розмови змінюється, і один із розробників неохоче каже: "Ну, так - якщо ми зробимо це так, це може спрацювати".
Перенесення більшої частини мого дизайнерського процесу в код покращило розмови з розробниками. Існує додатковий рівень поваги, зароблений знанням того, як розробляти свої дизайни в коді. Вам не потрібно бути експертом, щоб заслужити таку повагу. Хоча мої навички HTML та CSS тверді, мої навички JavaScript в кращому випадку посередні. І я не соромлюсь визнати це. Тим не менше, працюючи з розробниками інтерфейсу або на стороні сервера, той факт, що ми можемо говорити загальною мовою або зустрічатися на півдорозі, є величезною перевагою.
Вчіться швидше
Хоча каркаси та візуальні композити можуть допомогти у плануванні, ці статичні артефакти є теоретичними. Скільки разів ви намагалися пояснити комусь взаємодію, лише щоб вона відповіла: "Думаю, мені доведеться це побачити". Чим швидше ви дійдете до прототипу, з чим люди можуть взаємодіяти, тим швидше ви зможете випробувати дизайн і перевірити, чи працюють ідеї.
Швидка ітерація
Коли востаннє остаточний дизайн, який надійшов до виробництва, точно відповідав вашому комп’ютеру Photoshop? Майже ніколи. З цифровим дизайном продукту зміни відбуваються постійно. Крім того, такі зміни, як збільшення розміру ваших заголовків з 22 до 24 пунктів на декількох десятках екранів, можуть зайняти години у Photoshop. Розумні об’єкти дають вам певний рівень об’єктно-орієнтованого дизайну в Photoshop. На жаль, більшість візуальних дизайнерів, яких я знаю, недостатньо використовують Smart Objects. У CSS, оскільки він заохочує до більш системного підходу до дизайну, друкарські зміни займають хвилини замість годин.
А як щодо зміни лінійних градієнтів на всіх ваших кнопках? Або розмір межі? Як щодо переходу з квадратних кутів на 2px закруглені? У Photoshop це може зайняти години, і вам все одно доведеться його кодувати. Можливість дизайну в коді допомагає уникнути зворотного шляху до повернення до Photoshop для повторення візуального дизайну. Коли ви переміщуєте ці зміни до коду за допомогою CSS3 та Sass (про що я розповім далі в цій статті), вони можуть відбуватися в режимі реального часу і тривати лише кілька хвилин.
Швидший час запуску
Протягом багатьох років, коли я переводив більшу частину мого робочого циклу дизайну вгору в код, я відчув справжнє вдосконалення - приблизно на 20-30 відсотків скорочення часу виходу на ринок. Чим більше я це роблю, тим менше часу витрачаю на дублювання зусиль. Я витрачаю менше циклів, заходячи в Photoshop або феєрверки, а потім повторюючи роботу в коді.
У якийсь момент дизайн повинен взаємодіяти з деяким типом бекенда, будь то CMS, додаток Rails чи щось інше. Оскільки більша частина моїх дизайнерських робіт складається з коду, інтеграція відбувається раніше, ніж пізніше. Пару років тому один із моїх клієнтів, PointRoll, за п’ять днів перейшов від прототипу до виробництва.
Чому HTML5?
HTML5 простіше, ніж попередні версії HTML. Візьмемо для прикладу декларацію типу документа. У попередніх версіях HTML файл ДОКТИП виглядав приблизно так:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
І було шість різних версій. На щастя HTML5 ДОКТИП виглядає так:
! 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> у бік> / у бік> / 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, де клієнти перетягують плитки, щоб перевпорядкувати їх на основі інтересів. Або, можливо, приховування плиток, які їх не цікавлять дані- attribute дозволяє вам приєднати або призначити додатковий рівень семантичного значення речам, які ви можете визначити. Для сайтів та додатків, які значною мірою покладаються на Ajax, це відкриває безмежні можливості.
CSS3 - це новий Photoshop
CSS3 запропонував абсолютно новий рівень дизайну зовнішнього вигляду, який раніше вимагав фонових зображень, фрагментів та сумнозвісної техніки «розсувних дверей». На щастя, це все залишилось у минулому.
Давайте подивимось, як створити вигадливу кнопку з лінійним градієнтом, закругленими кутами, тінню тексту, яка надає приємний ефект натискання літер, і сяйвом при наведенні. Вивчення цих прийомів пройде довгий шлях. Кожен з них можна використовувати як самостійно, так і в різних комбінаціях, щоб витягнути майже будь-яку поточну візуальну гарячість, що перетворюється в Інтернет сьогодні.
Спочатку зробимо кілька коригувань за замовчуванням кнопка> і input type = "submit"> елементів. Припускаючи, що ви використовуєте один із стандартних скидів CSS, ми просто додамо невеликий розмір та дихальну кімнату.
/ * Кнопки кнопок, у яких є кнопки. =========================================== * * / кнопка, введення [type = "submit"] {висота: 2.7em; прокладка: .4em .7em; висота лінії: 1,9; }
Protip: Кнопки та входи, які представляють подання, можуть бути складними для рестайлінгу. Я виявив, налаштувавши висоту рядка на 1,6 або більше, ви можете уникнути необхідності додаткового div або проміжку всередині кнопка> тег.
Тепер ми "виправили" проблему з кнопками, ми можемо створити .btn класу, щоб ми отримали гарну чисту кнопку із закругленими кутами, лінійним градієнтом, контуром та виглядом високого друку.
.btn {display: inline-block; межа: 1px суцільний # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; радіус межі: 4 пікселі; прокладка: .4em .7em; фон: # edeff2; фон: -webkit-градієнт (лінійний, 0% 0%, 0% 100%, від (#fefefe), кольоровий стоп (0,55, # edeff2), до (# e4e6e9)); фон: -moz-лінійний градієнт (вгорі по центру, #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; box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; колір: # 6c7786; розмір шрифту: 1.1em; text-shadow: #fefefe 1px 0 1px; висота лінії: 1.375em; курсор: покажчик; }
А потім приємний ефект наведення при витонченому світінні за допомогою коробка-тінь метод:
.btn: наведення курсора, .btn: фокус {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; фон: # e6e9eb; фон: -webkit-градієнт (лінійний, 0% 0%, 0% 100%, від (# f7f7f7), кольоровий стоп (0,55, # f6f6f7), до (# e6e9eb)); фон: -moz-lineargradient (вгорі по центру, # f7f7f7, # f6f6f7 55%, # e6e9eb); колір: # 45484b; text-shadow: rgb (255,255,255) 1px 1px 0; колір межі: # c9c9c0; }
Зараз я не прихильник написання коду лінійного градієнта. Це довго і заплутано. Як бачите, я включив лише версію для -моз, -вебкіт, та стандартна модель. Якщо ви хочете включити версії -o та -ms, вам потрібно буде подвоїти код.
Є ще два варіанти. Один - генератор CSS3; в Інтернеті є кілька доступних, зокрема ColorZilla. Але якщо ви хочете трохи активізувати свою гру, подумайте про те, щоб зануритися в Sass: у поєднанні з Compass це знахідка.
Сасс + Компас: чарівно смачний
Ви можете перестати сподіватися на видання єдинорога CSS4. Він тут і називається Sass + Compass. Sass розшифровується як Syntaxically Awesome Stylesheets: ви успадковуєте всі традиційні переваги CSS3 з доданими радощами змінних, мікшинів, розширювачів та інших приємностей.
Нещодавно я переробив 5000-рядковий CSS-файл, який мав більше 30 варіантів того самого відтінку синього. За допомогою Sass я замінив кожну варіацію таким кодом:
колір: $ синій;
За допомогою визначення $ синій в моєму _variables.scss файл, я можу створити колір за замовчуванням, на який може посилатися кожен файл CSS або SCSS. Кожен, хто пише CSS, може використовувати $ синій і не потрібно турбуватися про використання піпетки, пошук шістнадцяткового коду або кольору RGB, RGBA або HSL.
Пам'ятаєте, що лінійний градієнтний код? Замість того, щоб писати кілька рядків коду, як щодо цього:
@include background (лінійний градієнт (# b1cfdc, # 7a9cac));
Дозвольте Сассу і Компасу зробити важку роботу та сформувати для вас правильний синтаксис: готово. Скажімо, ви хочете отримати темніший або світліший варіант кольору. Ви можете переміщати піпетку у Photoshop або просто використовувати команди освітлення / затемнення в Sass:
@include background (лінійний градієнт (затемнення ($ litegray, 2%), затемнення ($ майже біле, 5%)));
Це створить лінійний градієнт із затемненням на 2% $ лайт-сірий і на 5% потемніло брудно-білий. Voil! Вам навіть не потрібні коди 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 МЕНШ завдяки своїм додатковим можливостям, але як Sass, так і LESS стискають традиційний CSS на шматки.
Остання думка про рамки. Тим, хто не хоче успадковувати зайвого роздуття чужої основи, подумайте про те, щоб вибрати вже існуючий і роздягнути його до оголених кісток, або зібрати вишню з кількох, щоб скотити власну. У будь-якому випадку, насправді немає причин починати щоразу з нуля.
Заключні думки
Хочете отримати більший контроль над тим, як нарешті вийде ваш дизайн? Перемістіть більше процесів до коду. HTML5 нарешті вносить певний сенс у DOM. Гарне позбавлення від безглуздого ДОКТИПs і дивитит. CSS3 - це новий Photoshop: лінійні градієнти, радіус межі та тіні рамки FTW! А завдяки таким інструментам, як Bootstrap, Foundation, Sass та jQuery, перенесення дизайну вгору до коду ніколи не було простішим.
Відкрийте для себе 55 дивовижних прикладів HTML5 у Creative Bloq.
