Садржај
- Предности дизајнирања са кодом
- Прво подаци
- Доброта за мобилне уређаје бесплатно
- Проналажење заједничког језика
- Учи брже
- Брза итерација
- Брже време за лансирање
- Зашто ХТМЛ5?
- Магични атрибут података
- ЦСС3 - то је нови Пхотосхоп
- Сасс + Цомпасс: магично укусно
- јКуери: ох, да можеш
- Оквири
- Последње мисли
Овај чланак се први пут појавио у броју 235 часописа .нет - најпродаванијег светског часописа за веб дизајнере и програмере.
Никада нисам био велики љубитељ обављања било ког посла више него што је потребно. Склон сам да процењујем методе и алате на основу њихове способности да учиним мене или мој тим ефикаснијим. Колико брзо нас доводе до радног производа? Колико су ефикасни у комуникацији? Да ли нам се држе подаље?
Током година прилагодио сам свој дизајн и алате. Претпостављам да ћу то и даље чинити. То је природа дизајнирања за технологију и веб. Ова индустрија се непрестано развија; наш процес и алати такође треба да се развијају.
ХТМЛ5 и ЦСС3 олакшавају прелазак већег дела процеса дизајна узводно - даље од Пхотосхопа и више ка живом дизајну који дише. Алати као што су Фоундатион, Боотстрап и јКуери чине прелазак више процеса дизајнирања на код приступачнијим.
Предности дизајнирања са кодом
Прво, не залажем се за испуштање Пхотосхопа или било ког другог уређивача визуелног дизајна из вашег процеса рада. Уместо тога, фокусираћу се на предности преношења тог дизајна у код пре него касније.
Прво подаци
Оно што ми се увек свиђа код дизајнирања са ХТМЛ-ом је то што подстиче размишљање из перспективе која претходи подацима. Насупрот томе, користећи програме за цртање као што су Иллустратор, ОмниГраффле или Балсамик, почињете са оквиром и попуњавате га подацима.
У ХТМЛ-у конструишете ДОМ (објектни модел документа), некако као да правите садржај. То је повратак у прави информативни дизајн са смисленим хијерархијама. ХТМЛ5 иде корак даље додавањем нових семантичких елемената: чланак, одељак, заглавље, страну, подножје итд. Овај приступ преносу података лепо се комбинира са дизајном који реагује на мобилне уређаје.
Доброта за мобилне уређаје бесплатно
Ако ово читате, вероватно дизајнирате за мобилне уређаје. А шансе су да ћете морати да дизајнирате образац или два. Са ХТМЛ5 имате среће. Пре ХТМЛ5, ваши типови уноса су углавном били поље за текст или лозинку. ХТМЛ5 је представио бројне додатне типове уноса, укључујући:
инпут типе = "емаил"> инпут типе = "тел"> инпут типе = "урл"> инпут типе = "дате"> инпут типе = "дате-тиме">
Оно што је заиста сјајно у вези са овим додатним, јединственим типовима уноса је да их мобилни прегледачи на иОС-у и Андроид-у препознају и аутоматски замењују контекстуално свесну тастатуру - без посебних додатака или хакова за јКуери. Ох, и ако ваш прегледач не зна шта је инпут типе = "емаил"> је, онда само подразумевано уноси текст.
Проналажење заједничког језика
„Сјајно је како наши дизајнери и програмери могу радити на истом језику“ - Јохн Драго, програмер апликација у Инфлецтиону.
Погледајте да ли ово звучи познато. Налазим се у конференцијској сали са пола туцета развојних програма на страни сервера који могу да кодирају кругове око мене у Руби, Питхон, Јава или .НЕТ. Ја сам једини дизајнер. Неколико мојих сугестија се у почетку одбацује као превише компликовано за спровођење. Прилазим табли и почињем да пишем ХТМЛ и ЦСС на табли како би дизајн могао да се примени. Одједном се тон разговора промени и један од програмера невољно каже: „Па, да - ако то учинимо на тај начин, могло би да успе.“
Премештање више мог процеса дизајнирања у код побољшало је разговоре са програмерима. Постоји додатни слој поштовања стечен знањем како да дизајнирате своје дизајне у коду. Не морате бити стручњак да бисте стекли то поштовање. Иако су моје ХТМЛ и ЦСС вештине солидне, моје ЈаваСцрипт вештине су у најбољем случају осредње. И не стидим се да то признам. Ипак, када радимо са интерфејсом или програмерима на страни сервера, чињеница да можемо да разговарамо на заједничком језику или да се упознамо на пола пута је велика предност.
Учи брже
Иако жичани оквири и визуелни композити могу помоћи у планирању, ови статични артефакти су теоретски. Колико пута сте покушали некоме објаснити интеракцију, само да би он одговорио: „Претпостављам да ћу то морати да видим.“ Што пре дођете до прототипа, нешто са чим људи могу ступити у интеракцију, то ћете прије моћи искусити дизајн и видети да ли идеје функционишу.
Брза итерација
Када је последњи пут коначни дизајн који је испоручен у производњу тачно одговарао вашем Пхотосхоп цомп-у? Скоро никада. Са дигиталним дизајном производа, промене се дешавају стално. Штавише, промене попут повећања величине заглавља са 22 на 24 тачке на неколико десетина екрана могу потрајати сатима у Пхотосхопу. Паметни објекти пружају вам одређени ниво објектно оријентисаног дизајна у Пхотосхопу. Нажалост, већина визуелних дизајнера које познајем не користе паметне објекте у довољној мери. Са ЦСС-ом, јер подстиче систематичнији приступ дизајну, за типографске промене трају минуте уместо сати.
Шта је са променом линеарних градијената на свим дугмадима? Или величина обруба? Шта кажете на прелазак са квадратних углова на заобљене 2пк? У Пхотосхопу то може потрајати сатима и још увек морате да га кодирате. Способност дизајнирања у коду помаже у избегавању повратног повратка у Пхотосхоп за итерацију визуелног дизајна. Када те промене преместите узводно у код, користећи ЦСС3 и Сасс (о чему ћу говорити касније у овом чланку), оне се могу догодити у реалном времену и потрајати само неколико минута.
Брже време за лансирање
Током година, док сам већи део свог процеса дизајнирања пребацио узводно у код, доживео сам стварно побољшање - отприлике 20 до 30 процената смањења времена за излазак на тржиште. Што више ово радим, мање времена трошим на дуплицирање напора. Проводим мање циклуса улазећи у Пхотосхоп или Фиреворкс, а затим понављам рад у коду.
У неком тренутку дизајн мора да се повеже са неком врстом позадине, било да је то ЦМС, апликација Раилс или нешто друго. Како је већина мог дизајнерског рада у коду, интеграција се дешава пре него касније. Пре пар година, један од мојих клијената, ПоинтРолл, прешао је од прототипа до производње за пет дана.
Зашто ХТМЛ5?
ХТМЛ5 је лакши од претходних верзија ХТМЛ-а. Узмимо за пример изјаву о типу документа. У претходним верзијама ХТМЛ-а, ДОКТИП изгледало отприлике овако:
! ДОЦТИПЕ хтмл ПУБЛИЦ "- // В3Ц // ДТД КСХТМЛ 1.1 // ЕН" "хттп://ввв.в3.орг/ТР/кхтмл11/ДТД/ кхтмл11.дтд">
А било је шест различитих верзија. Срећом ХТМЛ5 ДОКТИП изгледа овако:
! ДОЦТИПЕ ХТМЛ>
Озбиљно. То је то. Шокантно једноставно.
Приликом креирања стандардне ХТМЛ странице постоји низ уобичајених елемената, као што су заглавље, подручје главног садржаја, бочна трака и подножје. Сигуран сам да сте већ видели нешто слично:
див ид = "хеадер> див ид =" нав "> / див> / див> див ид =" маин "> див ид =" сидебар "> / див> / див> див ид =" фоотер "> / див>
Ништа необично тамо. Али једном испуњен садржајем, овај образац се претвара у див супу. Насупрот томе, са новим семантичким елементима ХТМЛ5 добијате нешто много једноставније и лакше за скенирање, попут овог:
заглавље> нав> / нав> / заглавље> чланак> у страну> / у страну> / артицле> подножје> / подножје>
Погледај то. Нешто што има смисла.
Магични атрибут података
ХТМЛ5 долази са још једном сјајном удицом која вам даје могућност да створите сопствено семантичко значење: подаци-. Раније, ако сте ДОМ елементу желели да доделите нешто значајно, били сте ограничени на ИД-ове, класе и улоге.
Нажалост, личне карте морају бити јединствене. Часови су универзални (јиппее!), Али њихово коришћење може брзо да се претвори у неред. Улоге су недовољно искоришћено средство које пружа значајно значење за АРИА. Недавно користим податке - за платформу за аналитику праћења догађаја коју развијамо у Инфлецтиону.Велики смо љубитељи тестирања наших дизајна. Када радимо на апликацијама или страницама које имају велику интерактивност, желели бисмо да имамо детаљнији увид у ангажовање купаца на страници.
Унесите подаци-. Помоћу ње можете доделити, проследити и спојити се на модел „дефинишите свој сопствени“ смисао. Тако, на пример, можете то да урадите:
инпут типе = "буттон" дата-ид = "фацебоок" датарегион = "маин" дата-евент = "регистер"> инпут типе = "буттон" дата-ид = "твиттер" датарегион = "маин" дата-евент = "регистер "> инпут типе =" буттон "дата-ид =" линкедин "датарегион =" маин "дата-евент =" регистер ">
На страницу можемо да прикачимо слушалац са ЈаваСцрипт-ом и сваки пут када корисник пређе мишем или кликне на ово дугме, можемо пратити ту активност. Уместо да само можемо да пратимо да се неко регистровао путем ОАутх-а на Твиттер-у, можемо видети да је лебдео изнад Фацебоок-а, затим Твиттер-а, па ЛинкедИн-а, а затим коначно одлучио да одабере Твиттер за свој ОАутх модел.
Замислите да ово проширите на веб локацију попут Пинтерест-а или нови Миспаце дизајн где купци превлаче и испуштају плочице како би их преуредили на основу интереса. Или можда скривање плочица које их не занимају подаци- атрибут вам омогућава да причврстите или доделите додатни слој семантичког значења стварима које можете дефинисати. Веб локацијама и апликацијама које се у великој мери ослањају на Ајак отвара неограничене могућности.
ЦСС3 - то је нови Пхотосхоп
ЦСС3 је донео сасвим нови ниво дизајнирања изгледа и изгледа који је некада захтевао позадинске слике, кришке и злогласну технику „клизних врата“. Срећом, то је све прошлост.
Погледајмо како се прави фенси дугме са линеарним градијентом, заобљеним угловима, сенком текста која му даје леп ефекат штампе слова и сјајем при лебдењу. Учење ових техника ићи ће далеко. Свака од њих се може користити независно или у разним комбинацијама да би се извела скоро свака тренутна визуелна врућина која је данас у тренду Веба.
Прво направимо неколико прилагођавања подразумеваних вредности буттон> и инпут типе = "субмит"> елементи. Под претпоставком да користите једно од стандардних ресетовања ЦСС-а, додаћемо само мало простора за димензионисање и дисање.
/ * Дугмад дугмета чија су дугмета. ======================================= * * / дугме, унос [типе = "субмит"] {висина: 2.7ем; подлога: .4ем .7ем; висина линије: 1.9; }
Про врх: Дугмад и улази који су пријаве могу бити незгодно прилагодити. Открио сам да подешавањем висине линије на 1,6 или већу, можете избећи хацк да вам треба додатни див или распон унутар буттон> ознака.
Сада смо „поправили“ проблем са дугметима, можемо да креирамо .бтн класе да нам пружи лепо чисто дугме са заобљеним угловима, линеарним градијентом, обрисом и изгледом високог штампе.
.бтн {приказ: инлине-блоцк; граница: 1пк солид # д4д4цц; -моз-радијус-границе: 4пк; -вебкит-радијус-границе: 4пк; радијус границе: 4пк; подлога: .4ем .7ем; бацкгроунд: # едефф2; позадина: -вебкит-градијент (линеарно, 0% 0%, 0% 100%, од (#фефефе), заустављање боје (0,55, # едефф2), до (# е4е6е9)); позадина: -моз-линеарни градијент (средњи врх, #фефефе, # едефф2 55%, # е4е6е9); -моз-бок-схадов: ргба (160,172,187, .7) 0 0 .2ем 0; -вебкит-бок-схадов: ргба (160,172,187, .7) 0 0 .2ем 0; бок-схадов: ргба (160,172,187, .7) 0 0 .2ем 0; боја: # 6ц7786; величина фонта: 1,1ем; тект-схадов: #фефефе 1пк 0 1пк; висина линије: 1.375ем; курсор: показивач; }
А онда леп ефекат лебдења са суптилним сјајем помоћу кутија-сенка метода:
.бтн: ховер, .бтн: фоцус {-моз-бок-схадов: # 129цеб 0пк 0пк 2пк; -вебкит-бок-схадов: # 129цеб 0 0 2пк; бок-схадов: # 129цеб 0 0 2пк; позадина: # е6е9еб; позадина: -вебкит-градијент (линеарно, 0% 0%, 0% 100%, од (# ф7ф7ф7), заустављање боје (0,55, # ф6ф6ф7), до (# е6е9еб)); позадина: -моз-линеарни градијент (средњи врх, # ф7ф7ф7, # ф6ф6ф7 55%, # е6е9еб); боја: # 45484б; тект-схадов: ргб (255,255,255) 1пк 1пк 0; боја обруба: # ц9ц9ц0; }
Сада нисам велики љубитељ писања кода линеарног градијента. Дуго је и збуњујуће. Као што видите, уврстио сам само верзију за -моз, -вебкит, и стандардни модел. Ако желите да укључите верзије -о и -мс, мораћете да удвостручите код.
Постоје две друге опције. Један је ЦСС3 генератор; постоји неколико доступних на Интернету, укључујући ЦолорЗилла. Али ако желите мало да појачате игру, размислите о роњењу на Сасс: у комбинацији са Цомпасс-ом то је божји дар.
Сасс + Цомпасс: магично укусно
Можете да престанете да се надате ЦСС4 издању за једнороге. Овде је и зове се Сасс + Цомпасс. Сасс је скраћеница од Синтацтицалли Авесоме Стилес Схеетс: наслеђујете све традиционалне благодати ЦСС3-а са доданим радостима променљивих, комбинацијама, екстендерима и другим додацима.
Недавно сам рефакторирао ЦСС датотеку од 5.000 редова која је имала више од 30 варијација на истој нијанси плаве боје. Са Сасс-ом сам сваку варијацију заменио овим кодом:
боја: $ плава;
Дефинисањем $ блуе у мом _вариаблес.сцсс датотеку, могу да створим подразумевану боју на коју може да се позива свака ЦСС или СЦСС датотека. Свако ко пише ЦСС може да користи $ блуе и не морате да бринете да ли ћете користити капаљку за очи, пронаћи хек код или РГБ, РГБА или ХСЛ боју.
Запамтите онај линеарни градијент код? Уместо да напишете неколико редова кода, шта кажете на ово:
@укључи позадину (линеарни градијент (# б1цфдц, # 7а9цац));
Пустите Сасс и Цомпасс да дижу тешко и генеришу тачну синтаксу за вас: готово. Рецимо да желите тамнију или светлију верзију боје. Можете да померате капицу за око у Пхотосхопу или да једноставно користите команде осветли / затамни у Сасс-у:
@укључи позадину (линеарни градијент (затамни ($ литеграи, 2%), затамни ($ бели, 5%)));
То ће створити линеарни градијент са затамњених 2% $ лите-греи а 5% затамњено прљаво бела. Воил! Не требају вам чак ни ХЕКС или РГБ кодови.
јКуери: ох, да можеш
Морам да признам. ЈаваСцрипт се користио за застрашивање. Тада сам пронашао јКуери. Нећу да тврдим да сам ЈаваСцрипт гуру, али прилично сам уверен да могу да изведем скоро сваку врсту транзиције или функције која ми треба да бих користио јКуери.
Узмимо, на пример, могућност приказивања секундарног уноса телефонског броја на екрану кликом на везу Додај нови број. Користећи јКуери, једноставно напишете ово:
// - Прогресивно откривање - // $ (’. Нев-нумбер’). Цлицк (фунцтион () {$ (’. Алт-нумбер’). ФадеИн (’фаст’);});
Тражите нешто напредније? Вероватно постоји додатак за то. Основна понашања су лака, а сложена су приступачна уз јКуери.
Оквири
Два најснажнија оквира данас су Фоундатион и Боотстрап. Пре него што одбаците ЦСС оквире, дозволите ми да вас нешто питам. Да ли користите јКуери? Руби на шинама? Дјанго? Сви оквири.
Баш као и јКуери и РоР, Фоундатион и Боотстрап рођени су из препознавања да постоји поприличан број ствари које радимо изнова и изнова (као што су ресетовања, типографија, решетке, обрасци, дугмад, нав и листе). Фоундатион и Боотстрап нуде подршку за прилагодљиве дизајне употребом помоћних класа. Обоје су добро документовани и тестирани су на путевима, тако да их можете са сигурношћу користити.
Једна кључна разлика између њих две: Боотстрап се заснива на ЛЕСС систему за ЦСС предобраду, док је Фоундатион заснован на Сасс-у. Више волим Сасс од МАЊЕ због његових додатних могућности, али и Сасс и ЛЕСС скупљају традиционални ЦСС на комаде.
Последња мисао о оквирима. За оне који не желе да наследе вишак надувавања туђег оквира, размислите о томе да одаберете постојећи и скинете га до голих костију, или да некога берете од неколико да бисте их сами ваљали. У сваком случају, заиста нема разлога да сваки пут кренете испочетка.
Последње мисли
Желите већу контролу над тим како ће ваш дизајн коначно испасти? Преместите више процеса узводно у код. ХТМЛ5 коначно доноси неки смисао ДОМ-у. Добар спас од бесмисла ДОКТИПс и дивитис. ЦСС3 је нови Пхотосхоп: линеарни градијенти, радијус обруба и сенке оквира ФТВ! А са алатима као што су Боотстрап, Фоундатион, Сасс и јКуери, премештање дизајна узводно на код никада није било лакше.
Откријте 55 невероватних примера ХТМЛ5 преко Цреативе Блок-а.
