Share
Dacă sunteți ca mine, veți fi de acord că faza inițială de proiectare a unui proiect poate fi consumatoare de timp, plină de frustrare și rar întâlnește așteptările clientului la prima întâlnire de aprobare. Dacă ar exista o cale mai bună de a aborda lucrurile? Cu stilul de dale, cel mai nou copil din blocul de design-metodologie, există.
Unii spun că zilele de a crea machete complete pentru proiectele de webdesign în Photoshop sunt pe moarte, dacă nu chiar morți. Alții spun că design-in-browser-ul nu este tot ceea ce este rupt pentru a fi fie. Dar suntem cu toții înainte de noi înșine? Poate că nu este instrumentul pe care ar trebui să îl privim, ci întregul mod în care ne propunem să proiectăm un site nou și să gestionăm procesul de aprobare a clientului.
În acest tutorial, vom urmări cu atenție modelul Style Tiles - un nou mod de a gândi la etapele inițiale de proiectare, o abordare de proiectare inventată și concepută de inimitabilul Samantha Warren. Vom analiza ceea ce sunt, de ce ar trebui să le folosiți și să vă deplasați prin procesul de creare și implementare a unei plăci de stil pentru următorul proiect.
[Placi de stil vă permit să] ... Prezentați clienții cu opțiuni de interfață fără a face investiția în mai multe machete photoshop. - Samantha Warren
Sunteți gata să aflați mai multe? Să începem.
În forma sa cea mai simplă, o țiglă de stil este o singură colecție de elemente de elemente comune, inclusiv culori, tipografie, texturi, modele și caracteristici de design. În cazul în care un designer de interior își poate prezenta clientului o placă de dispoziție care cuprinde chipsuri de vopsea, țesături și decupaje pentru reviste, designerul web progresist poate prezenta părților interesate un set de plăci de stil.
Lucrul important pe care trebuie să-l amintiți despre plăcile de stil este că acestea nu reprezintă o reprezentare literală a modului în care va arăta site-ul; în schimb, ele ajută la definirea stării de spirit, a tonului și a "sentimentului" unui site pe baza a ceea ce ați învățat de la client în întâlnirile inițiale de kickoff.
Un alt lucru care trebuie avut în vedere este că abordarea stilului nu este un cadru, un proces definit sau chiar un instrument. În schimb, plăcile de stil sunt construite în jurul unui set de linii directoare, tehnici și abordări care vă permit să vă concentrați asupra a ceea ce este cu adevărat important în proiectare (cel puțin în etapele inițiale ale unui nou proiect). Începeți prin a descărca un șablon psd pentru a vă ajuta să începeți, dar nu ezitați să vă modelați plăcile de stil pe propriul dvs. flux de lucru și estetică creativă.
Să aruncăm o privire la câteva exemple pentru a vă arăta cum pot fi prezentate plăcile de stil. Am inversat-inginerie două site-uri pentru a vă arăta ceea ce stilul lor Placi ar putea au arătat ca în fazele inițiale de proiectare:
Acest placaj de stil se bazează pe site-ul recent revizuit Tuts + Premium.
După cum puteți vedea, esența site-ului Tuts + Premium a fost bine capturat în acest Tile de Stil. Am definit atent unele dintre elementele de design ale secțiunii principale de prezentare portocalie a site-ului, precum și a transmis simțul și aspectul posturilor de blog (adică listele de tutorial).
Este important faptul că, deoarece tabloul de stil nu este prezentat pentru o anumită dimensiune, orientare sau chiar ceva diferit de "digital", este ușor de imaginat cum ar arăta site-ul pe orice dispozitiv de pe un desktop la o tabletă pe un smartphone.
Pentru un pic de distracție, iată interpretarea mea despre ceea ce site-ul http://styletil.es ar fi arătat la etapa inițială de proiectare:
Acordați o atenție deosebită secțiunii adjective a acestui șablon de stil. Toate culorile, selecțiile de tipografie și texturile de design vorbesc într-un fel cu aceste adjective, asigurându-se că Tilele de stil sunt coerente atât din punct de vedere al designului, cât și al tonului și al mărcii.
Să aruncăm o privire la câteva dintre asemănările comune ale acestor două plăci de stil:
Dupa cum am mentionat anterior, Style Tiles nu urmeaza un format fix. De fapt, puteți include doar ceva - atâta timp cât este într-un fel fundamental pentru conceptul de design. De exemplu, puteți alege să renunțați la secțiunea "butoane" și să o înlocuiți cu un player video personalizat, cu un widget de descriere sau cu unele elemente de formă.
Sintetizați-vă, capturați direcția generală a site-ului în Tigla dvs. de stil, dar simțiți-vă liber să vă flexați mușchii creativi.
Style Tiles nu sunt doar o altă dorință - cea mai bună practică - dacă ai-ai-a-avea-timpul-abordare pentru a colecta praf în partea de jos a toolkit-ului dvs. de webdesign. Ei au un număr de avantaje minunate atât pentru dvs., cât și pentru client atunci când sunt implementate corect:
Mai mult decât atât, plăcile de stil păstrează faza inițială de proiectare și procesul de aprobare a clientului simplu.
Prezentarea clienților cu o compunere a design-ului complet, după prima întâlnire, riscă să nu mai aibă pădurea copacilor. În loc de clientul care a închis pe mici caracteristici de design ("hmmm ... cred că butoanele sociale trebuie să fie un pic mai" poppier ""), clienții pot vorbi cu încredere despre modul în care direcția generală de design reflectă obiectivele lor (" aceste culori dau un sentiment de încredere, care este perfect pentru widgetul meu Acme ").
Amintiți-vă, clienții noștri nu sunt, în general, designeri, dar de cele mai multe ori știu ce le place, chiar dacă sunt doar în termeni generali. Style Tiles sunt un instrument perfect pentru a permite laicilor să vorbească despre design în ansamblu, fără să separe pe zeci de elemente de design individuale care pot deveni rapid confuze și coplesitoare.
Pixeli-machetele perfecte necesită timp. Timp real. Ore și ore de timp.
Nu numai că trebuie să luați în considerare toate aceste costuri în factura dvs. finală, dacă creați trei compase separate, ceea ce înseamnă două treimi din timpul dvs. care se îndreaptă direct în dosarul "Resurse neutilizate" de pe hard disk - fără să mai vorbim de două a treia parte din banii clientului pentru acea parte din proiectul de lege final, de asemenea, mergând în fum.
Cu plăcile de stil, pe de altă parte, este un proces foarte rapid de a repeta diferite versiuni și la fel de rapid pentru a face schimbări în zbor. Folosirea plăcilor de stil înseamnă că puteți simplifica procesul de proiectare, păstrați impulsul în stadiile incipiente ale proiectului și răspundeți la cererile de modificare în minute în loc de ore.
Pentru a pune acest lucru în perspectivă, cele două exemple Style Tiles de mai sus mi-au luat aproximativ 20 de minute fiecare (și ar fi trebuit să dureze 15 minute dacă aș fi fost mai bine să-mi numesc straturile pe măsură ce mă duceam).
Vorbesc doar din experiență aici - fiecare designer este diferit - dar dacă creați trei machete separate de Photoshop, nu este neobișnuit să creați unul care este perfect, unul care este destul de bine și una care este destul de medie, și departe de cea mai bună lucrare. Prezentați cele trei clientului, încercând să le vindeți pe design-ul dvs. pilot și, invariabil, aceștia aleg un design care vă place cel mai puțin ... și acum sunteți blocat codând un site pe care nu sunteți mândru și, de asemenea, t în interesul clientului.
Chiar dacă creați trei compuși perfecți pe care ați fi mândri să îi codificați, este ușor să deveniți creați în minte. Stilul de plăci vă permite să experimentezeți rapid concepte de design diferite și să oferiți clienților soluții reale de design bazate pe nevoile lor definite.
Bine, deci să spunem că nu utilizați plăci de stil și că ați ales să prezentați clientului un set de compoziții complete de design.
Cu ce le prezentați? O versiune de desktop de 960 pixeli? Ce zici de o versiune iPad? Nu uitați nici o versiune pentru iPhone. Oh, dar asigurați-vă că vă adresați, de asemenea, Kindles, Blackberrys și 500+ dispozitive mobile Android care au fost produse în ultimii ani. Și atunci când întreabă "Cum va arăta asta pe Palm Pilotul meu favorit pe care l-am avut de când a fost președinte Bush?"
Stilul de dale nu implică dimensiuni și niciun dispozitiv; doar că designul va fi digital. - Samantha Warren
Web-ul este accesat în mod literal sute de moduri de astăzi, fiecare dispozitiv cu propriul set de puncte de întrerupere, ciudățenii și caracteristici.
O modalitate mai bună de abordare a fazei de proiectare inițiale a proiectului este de a scoate dispozitivul complet din ecuație. Lucrul grozav despre stilul de dale este că acestea sunt complet dispozitiv agnostic.
Desigur, va trebui să vă adresați modului în care site-ul va răspunde și / sau se va adapta ulterior la diferite dispozitive în cadrul proiectului, însă în fazele inițiale, pur și simplu amestecă apele pentru a se amesteca stabilirea unei direcții generale de proiectare cu funcționalitatea finală a site-ului.
Acum, că ați învățat ce tipuri de plăci de stil sunt și sunteți vândut cu privire la avantajele utilizării acestora ca o alternativă la compunerea completă a design-ului, sunt sigur că sunteți gata să spargeți Photoshop-ul deschis și să începeți să creați prima dvs. placă de stil.
Uite acolo, cowboy. Ai răbdare! Cu mult înainte de a începe să împingem pixeli, trebuie să identificăm nevoile și obiectivele clientului și să le transpunem în concepte care ne permit să formăm decizii de design informate.
Procesul în patru etape în crearea unui placaj de stil este după cum urmează:
Confuz? Nu fi. Să aruncăm o privire la fiecare pas în detaliu.
Fie că stați în persoană cu clientul dvs., discutați cu ei pe Skype sau că vă bazați pe e-mail, veți avea întotdeauna nevoie să vă petreceți timp și efort în timp real pentru a vă cunoaște afacerea și obiectivele site-ului. Dacă nu faceți acest lucru, vă trimite un drum întunecat, înfricoșător de presupuneri și presupuneri care vor asigura aproape întotdeauna un rezultat final nereușit și un client nefericit.
Acest proces de descoperire este mult mai mult decât să le cerem culorile lor preferate și ce alte site-uri le place pe "net". În timp ce am putea avea cu ușurință un tutorial întreg cu privire la interogarea eficientă a clienților, aici sunt câteva strategii de descoperire pentru a începe:
Toată lumea iubește vorbind despre ceea ce este important pentru ei ...
Odată ce obțineți un client vorbind despre afacerea lor, veți găsi adesea dificil să-i opriți. De fapt, în această etapă, cu cât vorbesc mai mult despre afacerea lor, cu atât va fi mai bine rezultatul final.
Iată câteva întrebări inițiale pentru a vă încălzi clientul pentru a vorbi despre afacerea lor:
Odată ce ați luat unele dintre întrebările de bază din calea și aveți o înțelegere mai bună a afacerii lor, este timpul să săpați un pic mai profund și cu adevărat să identificați nevoile clientului dvs. și să alegeți câteva concepte-cheie care vă vor ajuta să creați o direcție de proiectare în etapa următoare.
În timp ce oamenii întâmpină adesea dificultăți în transpunerea conceptelor și sentimentelor abstracte în declarații, oamenii le place să vorbească în metafore - cu condiția să întrebați întrebările corecte.
Iată câteva întrebări pe care le puteți cere să începeți:
Odată ce ați ajuns la baza proiectului clientului, este timpul să stabiliți un ton vocal de referință pentru proiectul general.
Există diferite moduri de a face acest lucru, dar o abordare eficientă este să aibă clientul să completeze un sondaj interactiv. Cu un pic de HTML, CSS și Javascript creativ, puteți crea un set de glisoare care să permită clientului să își poziționeze marca între o serie de dihotomii:
Privind la acest exemplu, mă gândesc deja la un design distractiv, colorat inspirat de retro pentru clientul nostru fictiv. Ce concepte de proiectare sare instantaneu în minte atunci când vedeți acest lucru?
Odată ce am întrebat clientul nostru, este timpul să distilată esența proiectului, a produselor și a nevoilor clientului pentru site-ul lor. Scopul acestei părți a procesului este de a defini o selecție de cuvinte care descriu care vor popula secțiunea "Adjective" din Tigla noastră de Stil.
Să aruncăm o privire la un exemplu. Iată câteva declarații pe care clientul nostru fictiv le-a spus în timpul fazei de descoperire:
Din aceste afirmații, treaba voastră este să identificați un singur adjectiv care descrie mesajul cheie al ceea ce v-au spus.
Iată patru adjective pe care le-am putea folosi pentru a rezuma afirmațiile de mai sus, ajungând la inima a ceea ce este clientul într-adevăr spunându-ne:
Acum, că am definit acest set de adjective, ne-am mutat într-un punct în care putem începe de fapt să traducem cuvintele în design. Deși este posibil să aveți o interpretare puțin diferită a adjectivelor de mai sus decât mine, este destul de probabil ca desenele noastre să împartă elemente comune - sau, cel puțin, să ne putem descrie unul de altul de ce am făcut alegerile pe care le-am făcut.
Pfiu! Toți au vorbit? O veste bună: am făcut o lucrare grozavă, acum ne distrăm. Odată ce am fi zgâriat întreaga fază de descoperire până la patru până la șase adjective dinamite, este timpul să vă creați prima placă de stil.
Faceți clic pe http://styletil.es și descărcați șablonul Photoshop (sau creați-vă propriul).
Următorii pași sunt pe deplin la dvs. Fii creativ! Presupun că aveți deja o înțelegere destul de bună a Photoshop-ului, așa că nu voi trece prin fiecare pas (șablonul Photoshop este foarte ușor de personalizat), dar ideea principală este de a crea o gamă de elemente de design (culori, texturi, butoane, tipografie etc.) care vorbește cu adjectivele la care ați ajuns în pasul anterior.
Doriți să vă grăbiți mai adânc în modul de creare a unei scheme de culori și să alegeți potriviri tipografice pentru stilul tău (și mult mai mult)? Iată câteva articole Webdesigntuts + pe care le puteți revizui:
Odată ce ați creat prima dvs. Placă de Stil, este timpul să curățați ardezia și să repetați. Nu există nici un set în piatră numărul de versiuni pe care ar trebui să le creați, dar trei până la patru plăci de stil pentru fiecare proiect este probabil un echilibru bun între explorarea unor concepte suficiente de design independente și nu copleșirea clienților dvs. cu prea multe opțiuni.
Amintiți-vă, adjectivele dvs. pot fi aceleași pentru fiecare placă de stil, dar ele pot fi și ele diferite - mai ales dacă ați întâmpinat dificultăți în a defecționa nevoile clientului dvs. sau v-au prezentat câteva alternative diferite de explorat ca parte a etapa de interogare.
De exemplu, din întrebările noastre privind descoperirea de la pasul doi, s-ar putea să fi venit trei seturi distincte de adjective care sunt toate similare, dar suficient de diferite pentru a lua diferite abordări în ceea ce privește designul pentru clientul nostru fictiv:
După cum puteți vedea, aceste trei seturi de adjective ar putea conduce la o direcție de proiectare foarte diferită. Acesta este locul în care stilul dalelor intră într-adevăr în propriile lor. Cu câteva schimbări rapide de culoare și tipografie, puteți crea cu ușurință trei iterații complet diferite într-un timp foarte scurt.
Asigurați-vă că clientul dvs. știe la ce să se aștepte
Acum că ați creat setul de plăci de stil, este timpul să le prezentați clientului dvs. Ca și în cazul fiecărei etape a acestui proces, există o serie de strategii de implementat pentru a vă asigura că obțineți cele mai bune rezultate și că clientul dvs. este încrezător să continue pașii următori ai proiectului.
Clientul dvs. nu ar trebui să vă aștepte să prezentați o compunere completă de design numai pentru a vă scoate plăcile de stil. La încheierea fazei de interogare, arătați exemplele clienților dvs. pentru alte plăci de stil pe care le-ați creat și explicați valoarea acestora pentru a stabili direcția de proiectare a site-ului.
Asigurați-vă că clientul dvs. știe ce le veți afișa înainte de întâlnirea de prezentare!
Pregătirea prezentării pe PhotoDune Lăsați clientul să vorbească liber despre conceptele dvs. de design, dar asigurați-vă că nu le lăsați prea puțini de pe cârlig. Încurajați clienții să se extindă asupra declarațiilor lor. Cu puțină interogare eficientă, putem transforma declarațiile goale în declarații excepționale:
Amintiți-vă că în timp ce proiectați site-uri web toată ziua, în fiecare zi, este foarte probabil că acest lucru este ceva pe care clientul dvs. nu ar fi avut o mulțime de experiență anterioară cu. Fiți răbdători, ajutați-vă clientul să-și clarifice declarațiile, să-i îndrume spre a face declarații valoroase, dar să nu facă niciodată presupuneri pe baza răspunsurilor generale ale clientului dvs.,.
Straturile de stil sunt o alternativă mai bună la compunerea de proiectare completă în stadiile incipiente ale proiectului (adică în timpul procesului de aprobare a clientului), dar în funcție de modul în care vă place să lucrați, poate fi următorul pas pentru proiect, dacă acesta este parte a fluxului de lucru stabilit.
Acum că ați definit direcția designului și clientul a semnat pe una dintre versiunile dvs. de stil de țiglă, puteți fi sigur că comp dvs. va fi mult mai aproape de a-ți îndeplini așteptările clientului decât dacă ați sărit direct în deschiderea Photoshop-ului după întâlnirea inițială. Nu numai că mockup-ul va fi mult mai aproape de trecerea colecționarului, de asemenea, nu este nevoie să creați mai multe iterații ale designului - că munca a fost deja făcută cu plăcile noastre de stil.
În funcție de modul în care vă place să abordați activitatea clientului dvs., toate acestea sunt exemple viabile de lucru pentru restul proiectului:
Vă mulțumim pentru că ați rămas cu mine și ați citit totul despre ce, de ce și de ce din Style Tiles - Sper că v-a plăcut să învățați despre ele la fel de mult cum mi-a plăcut să scriu despre introducerea lor!
Style Tiles sunt un mod revoluționar de abordare a procesului de proiectare și vă ajută pe dvs. și pe clientul dvs. să formeze o direcție clară pentru site-ul web chiar și din cel mai implicat și mai complicat proiect.
Care sunt gandurile tale? Veți folosi plăcile de stil în următorul proiect? Ne-ar plăcea să vă auzim gândurile în comentarii!
Accentsconagua