Isang bagong proseso ng tumutugong disenyo

Nilalaman

• Isang tumutugong pamamaraan
• Paano ko muna mapanatili ang nilalaman?
• Bakit?
• 01. Tukuyin ang iyong mga layunin sa negosyo at gumagamit
• 02. Sanggunian ang mga ito sa bawat pagkakataong makuha mo
• 03. Huwag matakot na itulak
• 04. Itulak din ang iyong sariling koponan
• 05. Tukuyin ang lahat ng iyong nilalaman na kailangan sa harap
• Paano ko mai-abstract ang nilalaman mula sa pagtatanghal?
• Kailangan naming ihinto ang pag-iisip ng nilalaman sa mga tuntunin ng layout
• Pilitin ang iyong mga kliyente na planuhin ang kanilang nilalaman na malaya sa disenyo
• I-finalize ang iyong nilalaman bago ang disenyo
• Gumamit ng totoong nilalaman - sa bawat oras
• Kaya paano gumagana ang mga wireframes para sa mga tumutugong proyekto sa disenyo?
• Pag-sketch
• Balangkas ng in-browser
• Mga Annotasyon
• Gumamit ng totoong nilalaman sa mga wireframes
• Paano ko muna idisenyo ang maliit na mga screen?
• Mga disenyo ng abstract mula sa mga aparato sa simula
• Gumamit ng Mga Tile ng Estilo
• Lumikha ng pagkakaisa ng interface
• Tingnan ang lahat sa browser
• Mag-strike sa isang balanse sa mga static na programa
• Konklusyon

Tayo ay linawin: ang disenyo ang solusyon lamang kung nakatuon ito sa mas malalim na mga isyu, kung bakit nasa likod ng lahat. Ang isang solidong proseso ay dapat palaging gabay ng aming trabaho, ngunit kailangan nating yakapin ang isang bagay na mas may kakayahang umangkop. Ang aming daluyan ay sa wakas ay napatunayan ang kanyang sarili na likido, kaya hindi ba dapat ang aming proseso? Mag-isip tungkol sa disenyo ng system: kailangan mong makita ang parehong buong larawan at ang maliliit na detalye. Imposible? Malayo dito!

Inilalagay ito ni Frank Chimero nang maganda sa kanyang librong The Shape of Design: "Mayroong isang bahagi kung saan ang artista ay humihiwalay mula sa kuda upang makakuha ng isang bagong pananaw sa trabaho. Ang pagpipinta ay pantay na bahagi malapit at malayo: kapag malapit, ang artista ay nagsusumikap upang makilala ang kanyang marka; kung malayo, sinusuri niya ang gawain upang masuri ang mga katangian nito. Umatras siya upang ipaalam sa kanya ang gawa. "

Kailangan nating hayaan ang aming trabaho, aming medium, na makipag-usap sa amin. Sa pagtaas ng tumutugong disenyo, sa wakas ay nakayakap kami sa aming daluyan tulad ng nilalayon na maging: likido. Ito ay isang napakatalino oras upang umatras at suriin ang trabaho, pag-aralan, at yakapin ang isang bagong paraan ng paggawa ng mga bagay, isang bagong proseso. Nawala ang mga araw ng mga static mock-up at web designer na hindi nauunawaan ang code. Panahon na para sa isang tumutugong proseso.

Isang tumutugong pamamaraan

Ibibigay namin ang malaking lihim para sa isang solidong proseso sa simula pa lang ng artikulong ito. Baliw kasi tayo ng ganon. Handa na? Ang isang tumutugon na proseso ay isang responsableng proseso. Malabo? Siguro. Kalokohan? Hindi. Tulad ng paggalaw ng mga pamantayan sa web bago ito, ang tumutugong disenyo ay itulak ang web sa pasulong na mga pamamaraan na madaling gawin sa hinaharap.

Tulad ng anumang proseso ng disenyo, nararapat na ituon ang pansin sa 'bakit' sa likod ng lahat. Kaya bakit mayroon ang mga website? Upang makapaghatid ng nilalaman. Maaaring nakabatay sa gawain, panlipunan, impormasyon… hindi mahalaga. Ang lahat ay darating dito: magsimula sa kung bakit, mahusay na nakabalangkas na nilalaman, at mga pakikipag-usap na mahalaga.

Narito ang mga katanungang madalas nating maririnig tungkol sa aming tumutugon na proseso ng disenyo.

Paano ko muna mapanatili ang nilalaman?

Tayong lahat ay may pag-asa sa pag-asa sa simula ng isang proyekto. "Nilalaman muna!" sinasabi natin "Mga layunin ng gumagamit! Tandaan kung ano ang mahalaga! " Totoo iyon. Ngunit ano ang ibig sabihin nito? Paano mo ipapatupad ang isang proseso ng unang nilalaman?

Kahit na alam mo (o sa tingin mo alam mo), madaling kalimutan habang umuusad ang isang proyekto. Ang mga pangmatagalang proyekto ay may kaugaliang mag-drag on at on (at sa… at sa…). Huminto kami sa pag-iisip tungkol sa kung bakit, at magsimulang mag-focus sa kung paano. Niloko natin ang ating sarili sa pag-iisip na ang aming mga proyekto ay maaaring hatiin sa magkakahiwalay na mga 'pagtuklas' at 'pag-unlad' na mga yugto na maaaring umiiral nang nakapag-iisa.

Ang totoo, kailangan nating patuloy na tanungin kung bakit, sa lahat ng oras. Hindi mahalaga kung gaano mo iniisip na alam mo, gaano man karami ang iyong nagawa na - sa tuwing magpapasya ka, sa tuwing magdidisenyo ka ng isang pindutan o sumulat ng isang headline, kailangan mong tanungin…

Bakit?

Bakit ko ito ginagawa? Para kanino ito Anong layunin sa negosyo ang tutulong sa aking kliyente na makamit? Ano ang kailangan nitong matulungan ang aking mga gumagamit na tugunan? Huwag lamang panatilihin ang nilalaman muna. Itago muna ang bakit.

Ginagawa nitong madali itong tunog. Ngunit upang gawin ito nang maayos, kakailanganin mong itulak. Itulak ang iyong mga kliyente at ang iyong koponan upang tukuyin muna ang kanilang whys. Walang Lorem Ipsum, hindi ‘makakarating din tayo mamaya’. Gawin mo ang iyong Takdang aralin! Ang lahat ng iyong kung paano kailangang magsimula sa isang solidong bakit. Sa Yellow Pencil, nangangahulugan ito ng malalaking pagbabago sa paraan ng pagtataas, pagtantya, pagbadyet, at pagpaplano ng mga proyekto sa amin. Kinakailangan naming itulak ang badyet at oras upang magsagawa ng matatag na pagsasaliksik, diskarte, at pagpaplano. Baka ikaw din. Ngunit sa sandaling makita ng iyong mga kliyente at ng iyong mga koponan ang napakalaking mga benepisyo ng pagtukoy sa mga pangangailangan sa nilalaman sa harap, hindi na sila babalik sa likuran.

At tungkulin natin na turuan sila. (Basahin ang mahusay na Disenyo ng aklat ni Mike Monteiro ay isang Trabaho kung nais mong matuto nang higit pa tungkol sa pakikitungo sa mga kliyente.) Ang mga kliyente ay maaaring magkaroon ng isang mahirap oras na maunawaan ang halaga ng paggawa ng lahat ng pagsasaliksik at gumana sa harap. At bakit nila dapat? Hindi sila nakakuha ng anumang 'tapos' sa dulo - at madalas na nakakakuha lamang sila ng isang invoice at isang malaking ol 'na dokumento ng Word.

Hindi nila iyon kasalanan - kasalanan natin iyon. Responsibilidad nating gawin ang isang mas mahusay na trabaho na maipakita ang halagang iyon. Bawat hakbang, kailangan nating ibalik ang lahat sa pinakamahalaga kung bakit.

Ito ay lalong mahalaga para sa tumutugong disenyo. Ang isang tumutugong website ay hindi nangangailangan ng mas maraming pagsisikap sa pag-unlad, ngunit nangangahulugan ito ng mas maraming pagpaplano. Gayunpaman, nagpaplano ito na dapat ay ginagawa namin lahat. Saksihan ang kasalukuyang cycle ng proyekto ng muling pagdisenyo-bawat-tatlong-ish-taon. Nais mo bang patuloy na gawin iyon? Sigurado kaming hindi.

Kaya narito ang tatlong mga hakbang upang mapanatili muna ang nilalaman sa iyong proseso ng proyekto.

01. Tukuyin ang iyong mga layunin sa negosyo at gumagamit

Magtaguyod ng isang prioridad na listahan ng mga layunin sa negosyo at gumagamit para sa iyong proyekto. Ano ang pinaka-nais malaman ng mga gumagamit mo? Magsaliksik ka. Gumawa ng matalinong mga hinuha, hindi ligaw na hulaan. Sumang-ayon ang lahat ng iyong mga stakeholder.

02. Sanggunian ang mga ito sa bawat pagkakataong makuha mo

Sa tuwing magpapasya ka, sa tuwing may nagmumungkahi ng isang bagong tampok o elemento ng disenyo, o pahina ng nilalaman, hayaan silang mapa ang kahilingan sa isang layunin sa negosyo at gumagamit. Anong tunay na pangangailangan ang matutugunan ng tampok na ito? Ano ang totoong dahilan? (Pahiwatig: 'Dahil gusto ko' o 'Gusto ko talaga ang bughaw' o 'lahat ng nasa Facebook' ay hindi binibilang.)

03. Huwag matakot na itulak

Maaari itong maging isang matigas. Ang mga ugnayan ng kliyente ay maaaring maging maselan, at maaaring maging kaakit-akit na talikuran ang labanan upang manalo sa giyera. Ngunit tandaan, lahat tayo ay kasama nito! Hindi ito negosyo kumpara sa gumagamit; kami vs sila.

Ang pagtugon sa mga pangangailangan ng gumagamit ay ang pinakamahusay na paraan upang matugunan ang mga pangangailangan sa negosyo. Dahil kung wala ang aming mga gumagamit, wala kaming negosyo! Ang mga kliyente (mabubuting kliyente) ay hindi ka kinukuha upang sabihin na 'oo' sa lahat. Kaya't kung humihiling ang iyong kliyente ng isang bagay na hindi makakamit sa kanilang mga layunin o pangangailangan ng kanilang mga gumagamit, huwag matakot na hamunin sila. Hindi ito tungkol sa kaakuhan. Ito ay tungkol sa paglikha ng pinakamahusay na posibleng solusyon.

04. Itulak din ang iyong sariling koponan

Maaari rin itong maging isang hamon kapag nagtatrabaho sa loob ng isang malikhaing koponan. Ang paghihiwalay ng mga tungkulin - disenyo ng visual, karanasan ng gumagamit, arkitektura ng impormasyon, diskarte sa nilalaman, paggawa ng nilalaman - ay maaaring humantong sa maling komunikasyon. Nagiging abala tayo, nasobrahan kami ng mga email. Mahirap manatili sa isang proyekto mula simula hanggang katapusan, lalo na kapag tapos na ang iyong ‘trabaho.

Ang ugnayan ng iyong koponan ay hindi bababa sa kahalagahan ng relasyon ng iyong kliyente. Kailangan nating ipaalala sa ating sarili kung bakit, tulad ng ginagawa natin sa aming mga kliyente. Ang pakikipagtulungan ay susi. Hindi mo maaaring simpleng ‘maipasa’ ang isang plano sa nilalaman, o mga wireframe, o disenyo. Hangga't maaari, kailangan nating magtrabaho nang magkakasabay. Madaling 'tapusin' ang isang maihahatid at magpatuloy sa iba pa. Mas mahirap manatili sa isang proyekto kapag naging mahirap.

Ang isang diskarte sa talon sa gawaing malikhaing ay hindi gagana. Maliksi, nagtutulungan na gawain sa pagitan ng mga miyembro ng koponan ay gumagawa para sa mas mahusay na mga resulta.

05. Tukuyin ang lahat ng iyong nilalaman na kailangan sa harap

Narito ang bagay: ang mga tumutugong website ay mas matagal upang magplano. Hindi na lang kami nagpaplano para sa isang solong konteksto. Nagpaplano kami para sa lahat ng mga konteksto na alam namin tungkol sa ngayon, at ang ilan na wala pa.

Ngunit tumatagal ng mas kaunting oras upang magplano para sa lahat ng mga pagkakumplikadong iyon sa harap kaysa sa ito upang bumalik at i-retrofit ang mga tampok at pag-andar na hindi mo account. Kaya gugulin ang oras / pagsisikap / badyet. Pilitin ang iyong mga kliyente at ang iyong koponan na tukuyin (at mangako sa!) Lahat ng kanilang nilalaman bago ka mag-disenyo. Gumamit ng mga talahanayan ng pahina. Gumamit ng nakabalangkas na nilalaman. Patunayan sa hinaharap ang iyong nilalaman ngayon! O umiyak mamaya.

Paano ko mai-abstract ang nilalaman mula sa pagtatanghal?

Naririnig mo ito ng maraming sa paligid ng internet-o-sphere. Ngunit teka, ano? At maghintay - bakit?

Dahil ang pagtatanghal ay maaaring (at magbabago). Ang paraan ng aming pagdisenyo ng mga website 15 taon na ang nakalilipas ay halos hindi makilala mula sa kung paano natin ito ipinakikita sa ngayon. Ngunit alam mo kung ano ang hindi nagbago? Mga salita Ginagamit pa rin namin sila. Pangunahing umiiral ang internet para sa nilalaman na (batay sa teksto). Ginagamit pa rin namin ito upang malutas ang mga problema sa impormasyon; upang magawa ang mga gawain. Ngunit kung ang iyong nilalaman ay nakasalalay sa isang paraan ng pagtatanghal (Flash na mga pahina ng intro, sinuman?) Mayroong isang tunay na posibilidad na hindi ito magagamit sa loob ng ilang taon. At sumuso iyon.

Kailangan naming ihinto ang pag-iisip ng nilalaman sa mga tuntunin ng layout

Kami (bilang isang industriya) ay sinanay ang aming mga kliyente na mag-isip ng nilalaman sa mga tuntunin ng layout. "Ilagay ito sa sidebar," sabi namin. "Dapat pumunta iyon sa footer." Tigilan mo na! Itigil mo yan. Tigilan mo na Hindi ito tungkol sa lokasyon. Ito ay tungkol sa priyoridad. Ano ang pinakamahalagang nilalaman para sa iyong mga gumagamit? Sapagkat hulaan kung ano: nagbabago ang layout sa mga konteksto. Mayroong (marahil) ay hindi magiging isang sidebar sa iyong disenyo ng maliit na screen.

Ang higanteng super-menu na gusto ng iyong kliyente? Hindi makakalipad sa isang iPhone.

Pilitin ang iyong mga kliyente na planuhin ang kanilang nilalaman na malaya sa disenyo

Okay, hindi mo sila pipilitin. Hikayatin mo sila. Matindi ang paghimok. Ang mga talahanayan ng pahina ay mahusay para dito. Kung hindi mo pa nababasa ito, magpatuloy kaagad sa Diskarte sa Nilalaman nina Kristina Halvorson at Melissa Rach para sa Web para sa karagdagang impormasyon tungkol sa kung paano ito likhain. Ayusin ang mga ito sa pagkakasunud-sunod ng priyoridad. Huwag sanggunian ang lokasyon o layout. Matutulungan nito ang iyong mga kliyente na isipin ang tungkol sa kanilang nilalaman sa isang mas produktibong paraan, at papalipatin din ang proseso ng paglikha ng nilalaman, bago pa matapos ang mga wireframes o disenyo.

I-finalize ang iyong nilalaman bago ang disenyo

Okay, hindi ito laging posible. Ngunit mas maraming kawalang-katiyakan na maaari mong alisin bago ka magsimula sa pagdidisenyo, mas kaunti ang kailangan mong balikan at baguhin ang mga bagay sa paglaon.

Gumamit ng totoong nilalaman - sa bawat oras

Kung maaari, gumamit ng nilalaman ng case ng gilid - ipakita sa iyong mga kliyente ang pinaka-kumplikadong mga pahina, imahe at menu. Iiwasan nito ang mga sorpresa sa paglaon sa proseso, kapag nakita nila ang kanilang pinakagulo na nilalaman sa natapos na produkto.

Ang mga functional, in-browser wireframes ay gumagawa ng isang mundo ng pagkakaiba. Payagan ang iyong mga kliyente na obserbahan ang kanilang nilalaman na gumagalaw at nagbabago sa isang saklaw ng mga laki ng screen. Ituro ito habang ipinakita mo ang iyong mga wireframes (gumagawa ka ng mga personal na presentasyon, tama ba?) Ipakita sa kanila kung paano ang priyoridad ng kanilang impormasyon ay mananatiling pareho sa mga laki ng screen, habang nagbabago ang layout.

Kaya paano gumagana ang mga wireframes para sa mga tumutugong proyekto sa disenyo?

Matibay ang aming paniniwala na ang disenyo ng pakikipag-ugnayan para sa RWD ay dapat na mabilis na makapunta sa browser. Halos imposibleng lumikha ng isang static na dokumento na maglalarawan sa lahat. Oo naman, makakagawa kami ng isang dokumento na nagpapakita ng tatlo, apat o limang mga break point, ngunit maliit lamang iyon sa kwento. Kumusta naman ang lahat ng mga sandali sa pagitan ng mga breakpoint? Nangyayari iyon sa browser.

Pag-sketch

Gayunpaman, mabuting makapag-sketch nang mabilis nang sama-sama sa iyong mga ideya. Hindi ito kailangang mangyari sa anumang partikular na daluyan, ngunit mayroon lamang isang bagay tungkol sa lapis sa papel. Ang buong punto dito ay upang mailabas nang mabilis at paulit-ulit ang mga ideya. Gustung-gusto namin ang sketchboard hangga't maaari, at mayroong kahit isang app para doon: UI Sketcher.

Balangkas ng in-browser

Narito ang totoong tiket para sa amin. Gusto naming muling gamitin ang mga pattern at system kapag ipinapakita ang RWD sa browser. Siyempre, makakalikha kami ng aming sariling system mula sa simula sa bawat oras, ngunit hindi iyon makakatulong sa amin o sa aming mga kliyente.

Nais din naming gumamit ng mabilis na tumutugon na mga balangkas ng prototyping tulad ng Bootstrap ng Twitter o Zurb's Foundation. Personal kaming nakahilig sa Foundation dahil umaangkop ito sa aming daloy ng trabaho. Magaling kung ang alinman ay kukuha ng isang maliit na-screen, mababang bandwidth-first na diskarte, ngunit ganoon lamang kami gumulong.

Mga Annotasyon

Ang mga anotasyon para sa RWD wireframes ay mahalaga ngunit, nakita namin, ay madalas na napapansin. Bigkasin ito nang malakas: dokumentasyon, dokumentasyon, dokumentasyon! Nakita namin ang ilang halimbawa nito mula sa mga kaibigan at iniisip na ang hurado ay nasa ‘pinakamahusay’ na paraan upang maayos na i-annotate ang mga in-browser na tumutugon na mga wireframes. Tulad ng nabanggit sa itaas, regular naming ginagamit ang Foundation sa pamamagitan ng Zurb at nais na gamitin ang Ibunyag na add-on upang maipakita ang aming mga anotasyon. Ang mga anotasyong ito ay lilitaw lamang para sa mas malaking mga screen at perpektong maaaring i-on at i-off.

Gumamit ng totoong nilalaman sa mga wireframes

Nagkaroon ng maraming debate sa paligid ng Lorem Ipsum sa mga wireframe at disenyo ng mga mock-up, ngunit kung wala kang totoong nilalaman sa iyong mga wireframe, mali ang ginagawa mo. Ipinaalam ng nilalaman ang mga pasya sa pakikipag-ugnayan at sasabihin sa iyo kung kailan masisira ang isang disenyo. Paano magagawa iyon ni Lorem Ipsum?

Paano ko muna idisenyo ang maliit na mga screen?

Sa loob ng maraming taon ay nagdisenyo kami na may isinasaalang-alang na isang resolusyon. Ito ay isang default na setting. Pag-sketch man sa mga notebook, wireframing sa OmniGraffle, pagtatrabaho sa Photoshop o pagdidisenyo sa browser, alam namin kung ano ang magiging laki ng canvas. Wala na ang mga araw na iyon. Napakalaki namin ng mga naniniwala sa pagdidisenyo para sa maliit na screen muna at progresibong pagpapahusay. Kaya paano binabago ng isang taga-disenyo ang kanyang daloy ng trabaho mula sa isang nakapirming laki ng canvas sa isang likido?

Mga disenyo ng abstract mula sa mga aparato sa simula

Maliban kung nagdidisenyo kami para sa isang tukoy na aparato, mahalaga na huminto kami sa pag-iisip tungkol sa mga aparato at magsimulang mag-isip tungkol sa mga karanasan. Ang lahat ng mga sumusunod na diskarte ay makakatulong sa mga tagadisenyo na likhain ang kanilang mga karanasan habang nananatiling apnostiko ng aparato (hanggang sa isang punto).

Gumamit ng Mga Tile ng Estilo

Gumamit ng Mga Tile ng Estilo upang maitaguyod ang direksyon at mabilis na umikot. Pinapayagan ng Mga Tile ng Estilo ang isang taga-disenyo upang maitakda ang direksyon ng isang sistema ng disenyo nang hindi nakakakuha ng masyadong tiyak. Inilarawan sila ng kanilang tagalikha, na si Samantha Warren, sa ganitong paraan:

"Ang Mga Style Tile ay para sa kung ang isang moodboard ay masyadong malabo at ang isang comp ay masyadong literal. Ang Mga Tile ng Estilo ay nagtaguyod ng isang direktang koneksyon sa mga aktwal na elemento ng interface nang hindi tinutukoy ang layout. "

Lumikha ng pagkakaisa ng interface

Mag-isip ng isang canvas na may lahat ng mga visual at interactive na elemento na pinagsama. Hindi upang makita ang isang partikular na layout ng UI, ngunit upang makita kung paano gumagana ang lahat ng mga elemento. Ito ay isang interface na canvas ng pagkakaisa. Nagbibigay-daan ang isang interface ng canvas na pagkakaisa sa isang taga-disenyo upang mapanatili ang mga ideya na magkasama, ngunit hindi nakatuon sa anumang laki ng isang screen. Dagdag pa, ito ay isang mahusay na paraan upang mahusay na makipag-usap at idokumento ang mga nakadisenyo na elemento kaysa sa paggawa ng isang buong gabay sa estilo.

Kung interesado kang magbasa pa, ang dalawang mahusay na mga artikulo tungkol sa paksa ng pagkakaisa ng interface ay matatagpuan dito at dito.

Tingnan ang lahat sa browser

Ang lahat ay kailangang pagsama-samahin sa browser. Dito talaga nabubuhay ang disenyo ng UI. Ang pagtingin sa kung paano nakikipag-ugnay ang totoong nilalaman sa mga visual na elemento ay mahalaga. Walang paraan upang gawin ito nang maayos sa isang static na kapaligiran. Kailangan mong makita kung paano ito tutugon sa katutubong medium.

Mag-strike sa isang balanse sa mga static na programa

Mayroong daloy sa pagitan ng browser at mga static na programa tulad ng Photoshop. Dapat mayroong isang balanse na nagbibigay-daan sa sistema ng disenyo na malikha sa isang likido at natural na paraan. Oo naman, mangyayari ito sa Photoshop, ngunit ang isang tagadisenyo na nagdidisenyo ng tumutugon ay kailangang malaman kung paano mag-isip ng malikhaing sa browser din.

Konklusyon

Minsan pa, na may pakiramdam: magsimula sa kung bakit, may mahusay na istrukturang nilalaman at mga pakikipag-ugnayan na mahalaga. Tumuon muna sa maliit na screen at mababang bandwidth, at unti-unting pagbutihin ang iyong mga tumutugong konsepto. Darating na sa edad ang aming medium. Mayroon kaming pagkakataon na gawin ang mga bagay nang tama at baguhin ang mundo, isang proyekto sa web nang paisa-isa.

Tuklasin ang pinakamahusay na 20 mga tool sa wireframing para sa mga tagadisenyo

Pinagsama ni Steve Fisher ang pagsasaliksik, pagsusuri, disenyo at diskarte sa Yellow Pencil sa Canada, at nagsasalita ng mga paksa tulad ng RWD, UX at open source. Si Alaine Mackenzie ay isang taga-diskarte sa nilalaman sa Yellow Pencil.