Съдържание
- Предимства при проектирането с код
- Данни първо
- Мобилна доброта безплатно
- Намиране на общ език
- Научете по-бързо
- Бърза итерация
- По-бързо време за стартиране
- Защо 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 са посредствени в най-добрия случай. И не се притеснявам да призная това. И все пак, когато работим с разработчици на интерфейс или от страна на сървъра, фактът, че можем да говорим на общ език или да се срещнем наполовина, е огромно предимство.
Научете по-бързо
Въпреки че телените рамки и визуалните композити могат да помогнат при планирането, тези статични артефакти са теоретични. Колко пъти сте опитвали да обясните взаимодействие с някого, само за да отговори: „Предполагам, че ще трябва да го видя.“ Колкото по-скоро стигнете до прототип, нещо, с което хората могат да взаимодействат, толкова по-скоро можете да изпитате дизайна и да видите дали идеите работят.
Бърза итерация
Кога последният път, когато окончателният дизайн, изпратен за производство, съвпада точно с вашия Photoshop comp? Почти никога. С дигиталния дизайн на продукта промяната се случва постоянно. Освен това, промени като увеличаване на размера на вашите заглавия от 22pt до 24pt през няколко дузини екрани могат да отнемат часове във Photoshop. Smart Objects ви дават някакво ниво на обектно-ориентиран дизайн в Photoshop. За съжаление повечето визуални дизайнери, които познавам, не използват достатъчно интелигентни обекти. С CSS, тъй като насърчава по-систематичен подход към дизайна, типографските промени отнемат минути вместо часове.
Ами промяната на линейните градиенти на всичките ви бутони? Или размерът на граница? Какво ще кажете за преминаване от квадратни ъгли към 2px заоблени? Във Photoshop това може да отнеме часове и пак трябва да го кодирате. Възможността да се проектира в код помага да се избегне връщането обратно към Photoshop за повторение на визуалния дизайн. Когато преместите тези промени нагоре по веригата в код, използвайки CSS3 и Sass (които ще разгледам по-нататък в тази статия), те могат да се случат в реално време и да отнемат само няколко минути.
По-бързо време за стартиране
С течение на годините, когато прехвърлих по-голямата част от работния си процес в дизайна нагоре в код, преживях истинско подобрение - около 20 до 30 процента намаляване на времето за пускане на пазара. Колкото повече правя това, толкова по-малко време отделям за дублиране на усилия. Прекарвам по-малко цикли в Photoshop или Fireworks и след това повтарям работата в код.
В даден момент дизайнът трябва да взаимодейства с някакъв тип бекенд, независимо дали това е 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 елемент, сте били ограничени до идентификатори, класове и роли.
За съжаление идентификационните номера трябва да са уникални. Класовете са универсални (yippee!), Но използването им може бързо да се превърне в бъркотия. Ролите са недостатъчно използван актив, който предоставя значително значение за ARIA. Напоследък използвам данни - за платформа за анализ на проследяване на събития, която разработваме в Inflection.Ние сме големи фенове на тестването на нашите дизайни. Когато работим по приложения или страници, които имат голяма степен на интерактивност, бихме искали да имаме по-подробна представа за ангажираността на клиентите в рамките на страницата.
Влез в данни-. С него можете да присвоите, да предадете и да се закачите в модел на смисъла „дефинирайте свой собствен“. Така например можете да направите това:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> type 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 или span в бутон> етикет.
Сега сме „отстранили“ проблема с бутона, можем да създадем .btn клас, за да ни даде хубав изчистен бутон със заоблени ъгли, линеен градиент, контур и този вид на висок печат.
.btn {дисплей: вграден блок; граница: 1px плътно # d4d4cc; -moz-граница-радиус: 4px; -webkit-border-radius: 4px; граница-радиус: 4px; подложка: .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 това е божи дар.
Sass + Compass: вълшебно вкусно
Можете да спрете да се надявате на издание за еднорог CSS4. Той е тук и се нарича Sass + Compass. Sass означава Syntactically Awesome Stylesheets: вие наследявате всички традиционни предимства на CSS3 с добавените радости от променливи, миксини, удължители и други екстри.
Наскоро реконструирах CSS файл с 5000 реда, който имаше повече от 30 вариации на същия нюанс на синьото. С Sass замених всяка вариация с този код:
цвят: $ син;
Чрез дефиниране $ синьо в моето _variables.scss файл, мога да създам цвят по подразбиране, който всеки CSS или SCSS файл може да препраща. Всеки, който пише CSS, може да използва $ синьо и не трябва да се притеснявате за използване на капкомер, намиране на шестнадесетичен код или цвят RGB, RGBA или HSL.
Не забравяйте този линеен градиент код? Вместо да пишете няколко реда код, какво ще кажете за това:
@include background (линеен градиент (# b1cfdc, # 7a9cac));
Оставете Сас и Компас да вдигнат тежко и да генерират правилния синтаксис за вас: готово. Да предположим, че искате по-тъмна или по-светла версия на цвят. Можете да преместите капкомера в Photoshop или просто да използвате командите за осветяване / затъмняване в Sass:
@include background (линеен градиент (затъмняване ($ litegray, 2%), затъмняване ($ почти бяло, 5%)));
Това ще създаде линеен градиент с 2% затъмнение $ олекотено-сиво и 5% потъмня почти бял. Воал! Дори не се нуждаете от HEX или RGB кодове.
jQuery: о, да, можете
Трябва да направя признание. JavaScript, използван за да ме сплаши. След това намерих jQuery. Няма да твърдя, че съм гуру на JavaScript, но съм доста уверен, че мога да извърша почти всякакъв вид преход или функция, която ми е необходима, за да използвам jQuery.
Вземете например възможността да показвате вторичен въведен телефонен номер на екрана, като щракнете върху връзка Добавяне на нов номер. Използвайки jQuery, просто пишете това:
// - Прогресивно разкриване - // $ (’. New-number’). Щракване (функция () {$ (’. Alt-number’). FadeIn (’fast’);});
Търсите нещо по-напреднало? Вероятно има приставка за него. Основното поведение е лесно, а сложното е достъпно с jQuery.
Рамки
Две от най-здравите рамки днес са Foundation и Bootstrap. Сега, преди да отхвърлите CSS рамките, позволете ми да ви попитам нещо. Използвате ли jQuery? Ruby on Rails? Джанго? Всички рамки.
Подобно на jQuery и RoR, Foundation и Bootstrap са родени от осъзнаването, че има доста неща, които правим отново и отново (като нулиране, типография, решетки, формуляри, бутони, навигация и списъци). Foundation и Bootstrap предлагат поддръжка за отзивчиви дизайни чрез използване на помощни класове. И двете са добре документирани и са тествани по пътищата, така че можете да ги използвате с увереност.
Една ключова разлика между двете: Bootstrap се основава на системата LESS за предварителна обработка на CSS, докато Foundation се основава на Sass. Предпочитам Sass пред LESS поради допълнителните му възможности, но както Sass, така и LESS смачкват традиционния CSS на парчета.
Последна мисъл за рамки. За тези, които не искат да наследят допълнителното надуване на нечия друга рамка, помислете дали да не изберете съществуваща и да я съблечете до оголените кости, или да вземете череша от няколко, за да превъртите сами. Така или иначе, наистина няма причина всеки път да започваме от нулата.
Финални мисли
Искате по-голям контрол върху това как най-накрая се оказва вашият дизайн? Преместете повече процеси нагоре по веригата към код. HTML5 най-накрая носи някакъв смисъл в DOM. Добро освобождаване от безсмислени ДОКТИПи дивитит. CSS3 е новият Photoshop: линейни градиенти, граничен радиус и сенки за полета FTW! И с инструменти като Bootstrap, Foundation, Sass и jQuery, преместването на дизайна нагоре към кода никога не е било по-лесно.
Открийте 55 невероятни примера за HTML5 в Creative Bloq.
