Share
Voi împărtăși o teorie a designului pe care am lucrat la implementarea în propriul flux de lucru pentru ultimii ani: pixeli perfect mockups. Pentru unii ar putea fi evident, dar un principiu atât de crucial pentru propria mea proiectare de acum acum că aș spune că a fost ideea cea mai influentă cu care am fost prezentat în peste 10 ani de proiectare.
Pentru a adopta această teorie nu este doar un alt pas în procesul de proiectare, este o revoluție în perspectivă a minții care va îmbunătăți, fără îndoială, calitatea fiecărui design de la care lucrați de acum înainte. Vrei sa fii un designer mai bun si sa iei proiecte mai mari? Citește mai departe.
Acum câțiva ani la SXSW 2008 am fost prima dată introdusă în ideea unor machete de design "pixel perfect". Michael Lopp (autorul mai multor cărți de design excelente și un senior manager de inginerie la Apple) a fost pe panel pentru o sesiune intitulată "Great Design Hurts"; Discursul său era hilar și plin de profanări ca un episod al lui Bill Maher. Printre punctele sale incredibil de vizibile lectură a fost o piatră prețioasă care a explicat cum la Apple, fiecare designer este dedicat ideii de pixels perfect comps. Asta este, fiecare comp a trecut în jurul companiei este atât de precisă, atât de curată, atât de detaliată că privitorul casual nu poate spune diferența dintre comp design și o captură de ecran complet codată.
... Fiecare comp a trecut în jurul companiei este atât de precisă, atât de curată, atât de detaliată că privitorul casual nu poate spune diferența dintre comp design și o captură de ecran complet codată
"Asta e!", M-am gândit, "ideea care va revoluționa procesul meu de design". Și într-adevăr a făcut-o.
A se vedea, pentru a începe fiecare proiect de proiectare cu intenția de a urmări până la ultimul pixel modificări doar despre fiecare aspect al procesului de proiectare. Chiar dacă nu veți urmări de fiecare dată, însăși noțiunea de a începe proiectarea cu această intenție va avea efecte dramatice asupra produsului final.
După o lună sau două încercări, PSD-ul meu a fost mai curat, fișierele mele s-au mișcat mai repede, proiectele mele nu mai "pluteau" în etapele ulterioare și petreceam mai puțin timp la telefon cu clienții încercând să explice diferența între o machetă de proiectare brută și produsul finit. Oh, și am fost angajat mai mult, ceea ce este o metrică bună de urmat de orice măsură.
Deci, ceea ce face un pixel perfect comp? În esență, e proiectat un mockup (mai ales un mockup web, dar poate fi orice), ca și cum l-ai face cu codul în primul rând. Dacă ați lucrat cu CSS / HTML, veți ști ce vreau să spun. Include:
Dați-mi voie să explic această idee; Când majoritatea designerilor încep un proiect, ei sunt proiectați ca și cum ar fi doar un mockup. Cunoașterea faptului că un anumit dezvoltator sau specialist de asigurare a calității va veni mai târziu și va ajusta totul limitează cât timp și efort le pune în proiectul individual.
Ceea ce se întâmplă în continuare este natural pentru majoritatea designerilor: clienților li se spune că imaginile și icoanele sunt "doar substituenți". Textul Lorem Ipsum este folosit în locul conținutului real. Heck, chiar navigarea și alte elemente majore ale interfeței cu utilizatorul se schimbă cu conținut de "umplutură" până înaintea lansării în majoritatea cazurilor.
"Perfect" înseamnă că fiecare element al fiecărui comp design este exact așa cum intenționați să fie în produsul finit programat.
Cu margini & padding, aceasta înseamnă că acestea sunt consecvente în întregul design al site-ului. Dacă fiecare bloc de bara laterală într-un design este destinat să aibă o marjă de 10px, atunci proiectați-l în acest fel în fiecare și când există un bloc lateral.
Cu font și culoare, înseamnă utilizarea consistentă a site-ului. Proiectați fiecare piesă de font ca și cum ar fi fost legat de un element HTML (de exemplu: toate H1 sunt întotdeauna 18 pixeli, bold, Georgia folosind culoarea neagră). Nu vă abateți - după cum mi-a spus unul dintre managerii mei de proiect preferați, nu ar trebui să existe mai mult de 3 sau 4 stiluri de fonturi pe o singură pagină, dacă nu aveți un motiv întemeiat să o faceți. Dacă utilizați o anumită culoare roșie pentru a evidenția culoarea pe site, asigurați-vă că este exact acea culoare roșie în fiecare loc (cu excepția cazului în care aveți un motiv pentru a fi diferit).
Frontierele, regulile de resurse umane și mediile ar trebui să fie, de asemenea, consecvente - am văzut unele compsuri în care fiecare frontieră și HR sunt nuanțe diferite de aceeași culoare - acest lucru duce în cele din urmă la comps arata neglijent și neprofesional. Pentru un ochi neinstruit, este ușor să vezi când un design se simte pe jumătate coaptă ... chiar dacă acea persoană nu poate să-și pună degetul exact la ce se întâmplă.
În cele din urmă, utilizați icoane, imagini, titluri și texte care sunt cât se poate de apropiate de cel real. Dacă reproiectați un site web, utilizați conținutul pe care l-au publicat deja în loc de Lorem Ipsum. Dacă clientul spune că are noi pictograme sau imagini pe care le vor folosi în reproiectare, cereți-le și includeți-le în design.
Amintiți-vă, ne străduim să creați compuze de design care sunt atât de precise încât să arate capturi de ecran ale implementării actuale, live, codificate.
Înainte să fac un alt pas, să abordăm contra-argumentele evidente. Cost. Timp. Efort. Frustrare ... argumentul deja format în mintea ta poate suna așa:
"Dacă îmi petrec timpul pentru a detalia cu meticulozitate fiecare machetă de design care trece prin mâinile mele, voi cheltui 3x cât mai mult timp pe design ... să nu mai vorbim de faptul că dacă clientul nu-i place designul, totul merge în gunoi ".
Un argument corect și unul care merită cu siguranță, dar nu este suficient să deraieze acest articol :) Amintiți-vă că scopul nu este de a face ca fiecare machetă de design să fie perfectă (ceea ce ar fi nebun și scump) - Scopul este să vă schimbați abordarea în design. Faptul este că abordarea perfectă a pixelilor nu este practică în multe cazuri ... dar asta ar trebui să vă împiedice să vă străduiți.
Să examinăm avantajele compușilor perfect pixel și apoi vom reveni la acest argument.
Te obligă să fii mai organizat. Mai multă organizare înseamnă mai puțin timp petrecut în lupte cu PSD-ul dvs. și mai mult timp petrecut în lovitură la design.
Nu mai explică clienților. Dacă ați proiectat o compunere perfectă, adică totul este în locul în care ați intenționat-o, nu trebuie să explicați clienților că ceea ce văd în comp design nu este ceea ce va fi în produsul final.
Nu mai explică dezvoltatorilor. Acest lucru vine în special la îndemână atunci când clientul dvs. trimite design comps off la o echipă de dezvoltare din India în cazul în care e-mailuri lungi explicative pur și simplu nu se traduc. În cazul în care singura lor sarcină este de a codifica exact ceea ce văd pe comp, reduce șansele ca ei să interpreteze greșit orice specificații de design. Și, este chiar mai ușor pentru programatorii fluenți cu care lucrez; Ei ajung să se concentreze pe programare, nu încercând să dau seama dacă vreau marje de 10px sau marje de 15px.
Mai puțin timp petrecut în QA. Analiza calității, dacă nu sunteți familiarizată, reprezintă etapele finale ale design-ului cu unghii pe tablă, unde vă veți întoarce într-un design dur și veți pregăti o prezentare finală. Pentru dezvoltatori, aceasta este și numele rundei finale de "pre-lansare", în care fiecare detaliu, bug-ul funcțional și pixelul rătăcit sunt îndreptate. Desigur, în proiectele mici nu s-ar putea trece niciodată printr-un ciclu de asigurare a calității; dar în proiecte mai mari care au bugetul, pur și simplu nu plecați de la un proiect până când acest pas nu este complet și fișierul sursă curățat este predat.
Happier Art Directors / Clients. În cazul în care directorul de artă (sau orice este titlul său) este capabil să petreacă mai puțin timp pentru a obține detalii cu privire la comps și mai mult timp oferind indicații valoroase, tensiunea arterială (și a ta) va scădea inevitabil în timpul întâlnirilor de revizuire a proiectului.
Rezultate finale mai profesioniste. Da, comps-urile tale vor arăta mai profesioniste. Acum, când cheltuiești mai puțin timp explicând sau făcând scuze pentru machete neglijente, poți petrece mai mult timp ridicându-ți rata ...
Deci, ca răspuns la argumentul împotriva compușilor perfect pixeli, voi face aceste puncte finale.
Comptele tale ar trebui să fie deja perfecte. Este scopul final al oricărui proiect de design și, dacă nu ajungeți acolo în cele din urmă, s-ar putea să fie pentru că nu ați vrut niciodată să faceți în primul rând.
Este nevoie de mai puțin timp decât alternativa. Alegeți una: petreceți 6 ore proiectând meticulos un mockup web și obțineți rapid aprobarea clienților SAU petrece 4 ore pe un design și alte 4 greșeli greșite de fixare înainte de a ajunge în sfârșit pe client să semneze pe un design.
Modificările și revizuirile se întâmplă mai rapid în acest fel, nu mai lent. Dacă ați proiectat macheta dvs. utilizând această mentalitate și PSD dvs. este organizat pentru a reflecta acest lucru, fiecare set ulterior de revizii pe care solicitările clientului se vor întâmpla la viteza fulgerului.
Mockups excelente înseamnă mai puțin timp în dezvoltare. Aceasta vă salvează (sau clientul) banii. Acesta este chiriașul de bază al prototipuri rapide - obțineți-l chiar înainte de a intra într-un ciclu de dezvoltare costisitor.
Este cel mai mare decalaj între proiectele mici și concertele mari ale bugetului. Simplul fapt este că un recrutor care caută pe freelanceri să-și asume proiectele folosește "atenția la detalii" ca fiind cea mai indicată măsură dacă un designer independent este capabil să facă față unui proiect web important. Dacă aveți un portofoliu plin de computere nedorite, va fi cu atât mai greu să dovediți că sunteți de încredere și capabil.
Am spus-o înainte, dar este punctul meu final. De fapt, nu veți reuși să atingeți perfecțiunea pixelilor pe fiecare comp și asta este bine. Există un timp și un loc pentru comportamentul brut-schiță și tu (și clientul tău) o să știi când este. Această teorie a compușilor pixel perfect nu necesită 100% rezultate 100% din timp, ci doar dictează atitudinea de bază pe care o aduceți fiecărui proiect. După câțiva ani de lucru în acest sens în proiectele mele, pot spune că merită bine durerea.
!
Accentsconagua