Share
Jeg skal dele en designteori som jeg har jobbet med å implementere i min egen arbeidsflyt de siste par årene: pixel perfekt mockups. For noen kan det være åpenbart, men det er en viktig sak for min egen designprosess nå som jeg vil si at det har vært den mest innflytelsesrike ideen jeg har blitt presentert med i over 10 år med å designe.
Å adoptere denne teorien er ikke bare et skritt i designprosessen, det er et perspektiv som forandrer revolusjonen i sinnet som utvilsomt vil forbedre kvaliteten på alle designene du noensinne jobber med fra nå av. Vil du være en bedre webdesigner og ta på større prosjekter? Les videre.
Det var for noen år siden på SXSW 2008 at jeg først ble introdusert til ideen om "pixel perfect" designmockups. Michael Lopp (forfatter av flere flotte designbøker og senior engineering manager på Apple) var på panelet for en sesjon med tittelen "Great Design Hurts"; Hans tale var hilarisk og så full av så mye vederstyggelighet som en Bill Maher-episode. Blant hans utrolig innsiktige foredragspunkter var en liten perle som forklarte hvordan i Apple, hver designer er viet til ideen om pixel-perfekt comps. Det er at hver kompis som passerer rundt selskapet er så presis, så uberørt, så detaljert at den uformelle seeren ikke kan fortelle forskjellen mellom designcomp og et fullt kodet skjermbilde.
... Hver eneste kompis som passerer rundt selskapet er så presis, så uberørt, så detaljert at den uformelle seeren ikke kan fortelle forskjellen mellom designcomp og et fullt kodet skjermbilde
"Det er det!", Tenkte jeg, "ideen som vil revolusjonere designprosessen min". Og det gjorde det faktisk.
Se, for å begynne hvert designprosjekt med den hensikt å følge det gjennom til siste piksel, endres omtrent alle aspekter av designprosessen. Selv om du ikke faktisk følger gjennom hver gang, selve forestillingen om å ha startet designet med den hensikten vil ha dramatiske effekter på sluttproduktet.
Etter en måned eller to av å prøve dette ut, var min PSD renere, flyttet filene mine raskere, prosjektene mine ble ikke "dra" i sine senere stadier lenger, og jeg brukte mindre tid på telefonen med klienter som forsøkte å forklare forskjellen mellom en grov design mockup og ferdig produkt. Åh, og jeg ble ansatt mer, noe som er en god måling å følge med noe mål.
Så hva gjør en piksel perfekt komp? I hovedsak er det å designe en mockup (spesielt en webmockup, men det kan være noe) som om du stylet det med kode i utgangspunktet. Hvis du har jobbet i det hele tatt med CSS / HTML, vet du hva jeg mener. Det inkluderer:
La meg utdype denne ideen skjønt; Når de fleste designere begynner et prosjekt, utformes de som om det er bare en mockup. Kunnskapen om at noen utvikler eller kvalitetssikringsspesialist kommer inn senere og finjusterer alt, begrenser hvor mye tid og krefter de legger inn i de enkelte designene.
Det som skjer neste er naturlig for de fleste designere: Klienter blir fortalt at bilder og ikoner er "bare plassholdere". Lorem Ipsum tekst blir brukt i stedet for ekte innhold. Heck, selv navigasjon og andre viktige brukergrensesnittelementer blir byttet med "filler" -innhold til rett før lanseringen i de fleste tilfeller.
"Perfekt" betyr at hvert element i hver designkompis er akkurat som du har tenkt at de skal være i det endelige programmerte produktet.
Med marginer og polstring betyr dette at de er konsistente i hele nettstedet. Hvis hver sidebar blokk i et design er ment å ha en 10px margin, så utform det på den måten hver gang det er en sidebjelke blokk.
Med skrifttype og farge betyr det konsistent bruk over hele nettstedet. Design hvert stykke skrift som om det var knyttet til et HTML-element (dvs. alle H1 er alltid 18px, fet, Georgia med svart farge). Ikke avvik - Som en av mine favoritt prosjektleder har en gang fortalt meg at det egentlig ikke burde være mer enn 3 eller 4 skrifttypestiler på en enkelt side, med mindre du har en forbannet god grunn til å gjøre det. Hvis du bruker en bestemt rødfarge som en høydefarge på nettstedet, må du kontrollere at det er den eksakte fargen på rødt i hvert enkelt sted (med mindre du har en grunn til at den skal være annerledes).
Grenser, HR-regler og bakgrunner bør også være konsekvente - Jeg har sett noen comps hvor hver grense og HR er forskjellige nyanser av samme farge - dette fører til at comps ser slurvet og uprofesjonell ut. Til et uopplært øye, er det lett å se når et design føles halvbaket ... selv om den personen ikke kan sette fingeren på akkurat hva som er galt.
Til slutt bruker du ikoner, bilder, titler og tekst som er like nær den virkelige ting som mulig. Hvis du redesigner et nettsted, bruk innholdet som de allerede har publisert i stedet for Lorem Ipsum. Hvis klienten sier at de har nye ikoner eller bilder som de skal bruke i redesignet, spør etter dem og ta med dem i designet.
Husk at vi streber etter å lage designkomponenter som er så presise at de ser ut som skjermbilder av den faktiske, levende, kodede implementeringen.
Før jeg går et skritt skjønt, la oss ta opp de åpenbare motargumentene. Koste. Tid. Anstrengelse. Frustrasjon ... argumentet som allerede dannes i ditt sinn, kan høres ut som dette:
"Hvis jeg tilbringer tiden det tar å nøye detaljere hver designmockup som går gjennom hendene mine, vil jeg bruke 3x så mye tid på design ... for ikke å nevne at hvis klienten ikke liker designen, alt går i søplaen ".
Et rettferdig argument, og en som sikkert har det, men det er ikke nok til å spore denne artikkelen :) Husk, målet er ikke å gjøre hver designmockup faktisk perfekt (det ville være gal og dyrt) - Målet er å endre tilnærming til design. Faktum er at piksel-perfekt tilnærming ikke er praktisk i mange tilfeller ... men det bør stoppe deg fra å streve for det.
La oss undersøke fordelene med pixel perfekt comps og så kommer vi tilbake til dette argumentet.
Det tvinger deg til å være mer organisert. Mer organisasjon betyr mindre tid brukt bryting med PSD-er og mer tid brukt sparking ass på design.
Ikke mer forklare til klienter. Hvis du har designet en komplett perfekt, det vil si alt er på stedet du ment det, du trenger ikke å forklare for kundene at det de ser i designcomp, er egentlig ikke hva som kommer til sluttproduktet.
Ikke noe å forklare til utviklere. Dette gjelder spesielt når klienten sender designkompetanse til et utviklingslag i India, hvor lange forklarende e-postmeldinger bare ikke oversetter. Hvis deres eneste jobb er å kode nøyaktig hva de ser på kompiset, reduserer det sjansene for at de vil misforstå noen designspesifikasjoner. Og heck, det er enda enklere for de flytende programmererne som jeg jobber med; De får fokus på programmering, og prøver ikke å finne ut om jeg vil ha 10px-marginer eller 15px-marginer.
Mindre tid brukt i QA. Kvalitetsanalyse, hvis du ikke er kjent, er neglene-på-tavlenes siste runder med design der du går tilbake til et grovt "foreslått" design og prep det for endelig presentasjon. For utviklere er dette også navnet på den endelige "pre-launch" -runden hvor hver eneste detalj, funksjonell feil og omstrekkelig piksel blir rettet ut. Jo, i små prosjekter kan du aldri gå gjennom en QA-syklus; men i større prosjekter som har budsjettet, går du rett og slett ikke bort fra et prosjekt til dette trinnet er fullført og den opprydde kildefilen overleveres.
Lykkeligere kunstdirektører / kunder. Hvis din kunstdirektør (eller hva hans / hennes tittel er) er i stand til å bruke mindre tid på å nitpicking detaljene på dine comps og mer tid med å gi verdifulle retninger, vil blodtrykket (og din) uunngåelig gå ned under designrevurderingsmøter.
Mer profesjonelle finale resultater. Ja, dine comps vil se mer profesjonelle. Nå som du bruker mindre tid på å forklare eller gjøre unnskyldninger for slurvete mockups, kan du bruke mer tid på å øke hastigheten din ...
Så, som et svar på argumentet mot pixel perfekt comps, vil jeg gjøre disse siste poengene.
Dine comps bør allerede være perfekte. Det er sluttmålet for ethvert designprosjekt, og hvis du ikke kommer dit til slutt, kan det bare være fordi du aldri mente å i utgangspunktet.
Det tar mindre tid enn alternativet. Velg en: Tilbring 6 timer omhyggelig å designe en webmockup og få klient godkjenning raskt ELLER tilbringe 4 timer på et design og en annen 4 fikserende dumme feil før du endelig får klienten til å skrive av på et design.
Rediger og revisjoner skjer raskere på denne måten, ikke tregere. Hvis du har utformet mockup din ved hjelp av denne mentaliteten, og din PSD er organisert for å gjenspeile dette, vil hvert etterfølgende sett med revisjoner at klientens forespørsler skjer i lynhastighet.
Utmerkede mockups betyr mindre tid i utviklingen. Dette sparer deg (eller din klient) penger. Dette er den grunnleggende leietakeren til hurtig prototyping - få det rett før det går inn i en kostbar utviklingssyklus.
Det er det største gapet mellom små prosjekter og store budsjettgigger. Det enkle faktum er at en rekrutterer som ser etter frilansere å ta på seg sine prosjekter bruker "oppmerksomhet på detaljer" som det enkleste indikative målet om en frilansdesigner kan takle et stort webprosjekt. Hvis du har en portefølje full av slurvete komposisjoner, vil det bare være så mye vanskeligere å bevise at du er pålitelig og i stand til.
Jeg sa det før, men det er mitt siste poeng. Du vil faktisk ikke oppnå piksel perfeksjon på hver kompis, og det er greit. Det er en tid og et sted for grovskisse-kompisen, og du (og klienten din) vil vite når den er. Denne teorien om 'pixel perfect comps' krever ikke 100% resultat 100% av tiden, det dikterer bare den grunnleggende holdningen som du tar med til hvert prosjekt. Etter mange års arbeid på dette i mine egne prosjekter, kan jeg si at det er vel verdt smerten.
!
Accentsconagua