Nilalaman
- Pagdidisenyo para sa hindi alam
- Isang praktikal na diskarte sa disenyo
- Naging layout ng agnostiko
- Unti-unting naka-coding
- Sumisid sa mark-up
Tila lahat ng tao ay nagsasalita tungkol sa tumutugong disenyo ng web sa mga panahong ito, at may mabuting dahilan; habang ang bilang ng mga aparatong pinagana sa web ay patuloy na lumalaki - bawat isa ay may magkakaibang kakayahan at tampok - hindi na makatuwiran na magtayo ng mga nakapirming lapad na mga website.
Ang totoo, hindi talaga. Gayunpaman hanggang ngayon ito ay itinuturing na pinakamahusay na kasanayan upang magdisenyo ng mga karanasan na gumawa ng isang bilang ng mga pagpapalagay, nasa paligid ng resolusyon ng screen, bandwidth o paraan ng pag-input. Kung nagdisenyo ka man ng isang 960px-wide website, upang makita lamang ito sa maliit na screen ng netbook ng isang kaibigan (at oo, nagsusulat ako mula sa masakit na karanasan dito), mauunawaan mo kung bakit hindi ito isang partikular na matalino na diskarte. Ngayon, kasama ang mga smartphone at tablet na itinapon sa mix, malinaw na ang aming tradisyonal na pamamaraan ay hindi na akma para sa layunin.
Sa kabutihang palad, ang pagdating ng mga query sa media ng CSS at isang lumalaking pagkilala na ang web ay isang daluyan sa sarili nitong karapatan, nangangahulugang nagsisimula kaming yakapin ang totoong likas ng platform, tinatanggap na ang pagiging unibersal nito ay isang lakas, hindi isang kahinaan.
Sa susunod na limang araw, gagabayan kita sa pamamagitan ng isang diskarteng kinikilala ang katotohanang ito: tumutugon disenyo ng web. Binuo ni Ethan Marcotte, pinagsasama nito ang mga likido na layout, kakayahang umangkop na mga imahe at mga query sa media upang matulungan kaming bumuo ng mga site na may kaaya-ayang umangkop sa anumang kapaligiran na nakasalamuha nila.
Ipapakita ko ang pamamaraang ito sa pamamagitan ng pagpapakita sa iyo kung paano bumuo ng isang simpleng gallery ng media. Sa aking mga halimbawa, lilikha ako ng isang maliit na website upang idokumento ang isang kamakailang paglalakbay sa kalsada na kinuha ko sa buong Estados Unidos, ngunit huwag mag-atubiling ipasadya ang code at disenyo upang umangkop sa iyong sariling mga pangangailangan.
Pagdidisenyo para sa hindi alam
Karamihan sa tutorial na ito ay magtutuon sa paligid ng aspeto ng pag-unlad ng tumutugong disenyo. Ngunit bago tayo maghukay sa anumang code, maglaan muna tayo ng sandali upang isipin kung paano tayo maaaring magdisenyo ng isang website na maaaring maiisip na magkaroon ng walang katapusang mga layout.
Ngayon, masuwerte ako na maaari akong magdisenyo ng mga interface at paunlarin ang frontend code na gumagawa ng totoo sa kanila. Hindi ito isang natatanging kasanayan syempre - kung nagtatrabaho ka para sa iyong sarili malamang na pareho ka. Ngunit tiyak na kapaki-pakinabang upang maunawaan kung paano maaaring umangkop at sumasalamin ang nilalaman kapag gumagawa ng mga likidong disenyo.
Nagtatrabaho din ako bilang bahagi ng isang mas malaking koponan kung saan mas dalubhasa ang aking tungkulin. Sa ganitong kapaligiran, ang visual designer ay maaaring maging nakatuon lamang sa pagsasalin ng mga wireframes sa kaakit-akit, nakakaengganyo (naka-sign-off, perpektong pixel) na mga comps. At hindi karaniwan para sa mga developer na magkahiwalay na matatagpuan, isinalin ang mga layout na ito sa payat at mahusay na markup at CSS.
Gayunpaman, ang nasabing mga linear at hiwalay na daloy ng trabaho ay mabilis na nasisira sa sandaling simulan namin ang pagsusuri kung paano ang mga disenyo ay babagay sa magkakaibang mga kapaligiran. Tulad ng anumang bagong kasangkapan o teknolohiya, dapat din nating isaalang-alang ang mas maraming pakikipagtulungan at maliksi na paraan ng pagtatrabaho. Marami sa mga pinakahirap na problema na nakasalamuha kapag ang pagdidisenyo ng tumutugong mga website ay maaaring malutas sa pamamagitan lamang ng pag-uusap, eksperimento at pag-ulit.
Isang praktikal na diskarte sa disenyo
Hindi ito sinasabi na walang saklaw para sa mga taga-disenyo na mag-isip tungkol sa kung paano maaaring gumana ang isang disenyo sa labas ng mga limitasyon ng anumang partikular na aparato.
Sa Clearleft, pinasimulan namin ang visual na disenyo mula sa pananaw ng desktop. Nagsisimula kami sa pamamagitan ng pagtukoy ng isang higit sa lahat na wika ng disenyo at visual na aesthetic, madalas na ibinabatay ang mga paunang paggalugad sa paligid ng isang pangunahing piraso ng nilalaman. Halimbawa, kung nagdidisenyo kami ng isang site ng pagkain, magsisimula kami sa isang pahina ng resipe; para sa isang site ng balita, isang pahina ng kwento.
Hindi lamang ito isang mahalagang pahina sa site, ngunit marahil ay nagsasama ito ng sapat na nakabalangkas na nilalaman para sa amin upang makabuo ng isang typographic palette. Isasaisip din namin ang tungkol sa kung paano maaaring umangkop ang layout - kahit na nasa likod lamang ng aming mga isip sa yugtong ito.
Ang isang kapaki-pakinabang na paraan upang subukan ang stress sa isang disenyo ay ang kumuha ng naturang pahina at iakma ito para sa isang mas makitid (~ 320px ang lapad) na screen. Malamang matutuklasan mo na ang ilang mga aspeto ng disenyo ay kailangang pag-isipang muli upang gumana sila sa lapad na ito. Narito ang ilang mga halimbawa:
- Tipograpiya: Ang mga malalaking heading ay maaaring gumana nang maayos sa mas malawak na mga layout, ngunit sa mas maliit na mga screen maaari silang tumagal ng maraming patayong puwang at samakatuwid ay nangangailangan ng karagdagang pag-scroll. Habang nagbabago ang haba ng linya, dapat mong isaalang-alang din ang taas ng linya at iba pang mga typographic na paggamot.
- Mga Link: Paano gagana ang iyong disenyo sa mga touchscreen device? Habang wala kaming isang madaling paraan upang makita ang mga ito (ibig sabihin dapat naming isaalang-alang ang lahat sa mga aspeto ng aming disenyo), ang pagdidisenyo para sa isang mas makitid na screen ay maaaring magbigay sa amin ng isang pagkakataon na mag-isip tungkol sa mga target na lugar para sa mga link at iba pang mga interactive na elemento . Inirerekumenda ng mga alituntunin ng iOS na ang mga ito ay hindi bababa sa 44 na mga pixel / puntos na parisukat, na isang mabuting pigura na hangarin.
- Pag-navigate: Marahil ito ang magiging pinaka-mahirap na sangkap ng anumang tumutugong disenyo, lalo na kung ang iyong site ay may maraming mga seksyon at isang malalim na hierarchy. Sumulat si Brad Frost ng isang buod ng ilang magkakaibang mga diskarte sa nabigasyon na kasalukuyang isinasaalang-alang.
- Labis na nilalaman: Ang ilang nilalaman ba ay hindi kinakailangan? Kailangan bang ipakita ang ibang nilalaman sa ilang mga sitwasyon? Hindi ko itinataguyod ang pagtatago ng nilalaman batay sa kung anong aparato ang gumagamit na gumagamit ng isang gumagamit, ngunit ang mga diskarteng tulad ng kondisyon na paglo-load (na titingnan natin mamaya sa linggong ito) ay makakatulong sa amin na maghatid ng mas maliit na mga pahina na naglo-load lamang ng pantulong na nilalaman kapag kinakailangan.
Ang pagdidisenyo ng dalawang magkakaibang mga layout ay nagpapatibay sa ideya na ang isang disenyo ay babagay, habang ang pamamalantsa ng maaga sa mga potensyal na gotchas. Habang ito ay parang isang pagdodoble ng trabaho, tandaan na hindi namin dinidisenyo ang bawat pahina sa perpektong pixel. Sa halip, nakatuon kami sa pagbuo ng isang nasusukat na wika ng disenyo - isa na magbabago sa pagsisimula naming ipatupad ito sa code, at isa na batay sa mga indibidwal na module at sangkap.
Naging layout ng agnostiko
Hindi nakakagulat, para sa isang industriya na ayon sa kasaysayan ay ginagamot ang web tulad ng pag-print, ang mga layout na may takdang-lapad ay tumagos sa marami sa mga naihatid na namin. Habang sinisimulan namin ang pagdidisenyo para sa isang naaangkop na daluyan, ang mga bagong diskarte ay isinasaalang-alang na nagbibigay-daan sa amin upang malutas ang mga problema at makipag-usap ng mga ideya habang kinikilala ang likidong likido ng daluyan. Narito ang ilan sa aking mga paborito:
- Mga diagram ng paglalarawan ng pahina: Habang ang mga wireframes ay madalas na nagpapahiwatig ng layout (at sa gayon ay ipinapalagay ang isang tiyak na uri ng aparato), ang mga diagram ng paglalarawan ng pahina ay aalisin ang palagay na ito at sa halip ay ilarawan ang mga indibidwal na bahagi, na nakaayos sa dokumento sa mga tuntunin ng priyoridad.
- Mga tile ng istilo: Kapag nakikipag-usap sa mga ideya sa disenyo sa mga kliyente, maaari naming makita ang aming sarili na nagpapakita ng 'mga kuwadro na gawa ng mga website'. Kung hindi kami nag-iingat, tamang hilingin ng mga kliyente na makita ang mga konsepto na nagpapakita kung paano ang hitsura ng isang disenyo sa iba pang mga aparato. Maaari kaming pilitin sa isang hindi napapanatili na sitwasyon ng paggawa ng maraming mga pahina para sa maraming mga aparato. Naisip ni Samantha Warren ang problemang ito at magkaroon ng mga style tile. Ang mga ito ay nakaupo sa isang lugar sa pagitan ng isang mood board (ngunit hindi gaanong malabo) at ganap na natanto ang mga comp (ngunit hindi gaanong tumpak), at tumutulong sa amin na makipag-usap sa typography, mga istilo ng pindutan at paggamot sa masthead. Hinihimok din nila ang isang mas may sapat na antas ng talakayan sa aming mga kliyente.
- Paganahin ang laro ng disenyo: Ang ehersisyo na ito ay maaaring gumana nang maayos sa panahon ng mga pinagtutuunan na workshop ng disenyo. Sa pagsasanay na ito, nagsusulat ang bawat isa sa Post-it ng mga tala ng mga elemento na maaaring lumitaw sa isang tiyak na pahina. Ang mga ito ay pagkatapos ay naka-stuck sa pader sa pagkakasunud-sunod ng kahalagahan, na parang lumilitaw na linearised sa isang mobile phone. Ang nagresultang talakayan ay maaaring makabuo ng ilang mga nakakagulat na konklusyon. Halimbawa, maaari mong mapagtanto na ang pag-navigate ay hindi ang pinakamahalagang sangkap sa pahina. Maaari itong sundin sa disenyo, kung saan ang isang link ng laktaw sa tuktok ng pahina ay nag-link sa pag-navigate sa footer.
May puwang pa rin para sa mga tool na ginagamit na namin syempre, ngunit kapag nagdidisenyo ng isang website sa malawak na term, kailangan nating tandaan na ang layout ay hindi na isang kilalang kilala.
Unti-unting naka-coding
Sa kabutihang palad, hindi namin kailangang mag-alala tungkol sa disenyo ng visual sa halimbawang pinagtatrabahuhan namin dahil ang pagsusumikap ay nagawa para sa amin! Sa halip, maaari kaming mag-concentrate sa pag-coding ng aming disenyo sa isang ganap na tumutugong website.
Isa pa bago kami magsimula. Mahalagang alalahanin ang isang prinsipyo ng founding ng medium na pinagtatrabahuhan namin: pangkalahatan. Nangangahulugan iyon na hindi lamang ang pagbuo para sa mga aparatong pinagana ng web ngayon, ngunit tinitiyak ang pagiging tugma sa kahapon at bukas din. Inilarawan ni John Allsopp kung bakit mahalaga ang prinsipyong ito sa kanyang post na The Next 6 Billion:
"Ang susunod na anim na bilyong ito ay mga bata sa kanayunan ng India, Africa, China kung saan ang pag-access sa kapangyarihan, at mga network, ay maaaring paulit-ulit. Ito ay isang tao sa Sumatra sa isang dekada na Wintel box. Ito ang mga tao na nagsasalita ng daan-daang iba't ibang mga wika, na may dose-dosenang magkakaibang mga sistema ng pagsulat. Ito ang mga taong una sa kanilang pamilya na makakabasa at sumulat. Ito ang 20 porsyento ng mga tao sa buong mundo na hindi marunong bumasa o sumulat. Pa.’
Maaari naming subaybayan ang aming pag-unawa sa web sa pamamagitan ng pagtingin sa iba't ibang mga fashion (para sa kakulangan ng isang mas mahusay na salita) na kinuha sa gitna ng aming propesyon: mga pamantayan sa web, kakayahang ma-access, hindi mapanghimasok na JavaScript ... lahat ay magkakaiba-iba sa parehong tema: progresibong pagpapahusay. Ang parehong ay totoo ng tumutugon disenyo ng web. Upang maitayo ang a tunay na tumutugon sa website ay upang bumuo ng isang site na hindi lamang pabalik na katugma, ngunit hinaharap din friendly.
Sumisid sa mark-up
Okay, sapat na ng paunang salita, oras na upang magbukas ng isang text editor.Ang aming taga-disenyo ay nagbigay sa amin ng isang disenyo na oriented sa desktop, at naging mabait upang magbigay ng mga halimbawa kung paano ito maaaring lumitaw sa isang mas makitid ding viewport.
Maaaring maging kaakit-akit na i-code nang hiwalay ang mga ito, ngunit magmumungkahi ako ng ibang diskarte. Sa pamamagitan ng paglalagay ng magkakahiwalay na mga bahagi - o mga pattern - na bumubuo sa disenyo sa isang solong pahina, makakagawa kami ng isang pattern ng portfolio. Pinapayagan kaming bumuo ng mga sangkap sa labas ng mga limitasyon ng anumang layout ng pahina, at bibigyan kami ng isang bagay na magre-refer sa paglaon para sa anumang pagsubok sa regression. Tingnan natin ang paunang markup sa ilang iba't ibang mga aparato:
Tingnan ang aming marka-up na portfolio na pattern
Sa gayon, mapapahamak ako - mayroon na kaming isang tumutugong website! Ang aming nilalaman ay umaangkop sa mga limitasyon ng bawat aparato, maging isang magarbong bagong iPad o isang itinapon na tampok na telepono. Gumagana pa ito sa isang browser na teksto lamang tulad ng Lynx.
Salamat sa pinagbabatayan na mga prinsipyo ng pagiging unibersal, ang web ay tumutugon bilang default. Mahusay iyan, ngunit nangangahulugan din ito na ang anumang gagawin namin sa code mula ngayon ay maaaring ikompromiso ang katutubong kakayahang umangkop.
Bukas: Tatapak kaming maingat at magsisimulang ilapat ang unang aspeto ng tumutugong disenyo: typography at fluid grids.
