Share
Ik ga een ontwerptheorie delen die ik de afgelopen jaren heb gebruikt om te implementeren in mijn eigen workflow: pixel perfecte mockups. Voor sommigen is het misschien voor de hand liggend, maar het is een principe dat zo belangrijk is voor mijn eigen ontwerpproces nu dat ik zou zeggen dat dit het meest invloedrijke idee is dat ik in meer dan 10 jaar tijd heb gezien bij het ontwerpen van.
Het aannemen van deze theorie is niet alleen maar een stap in het ontwerpproces, het is een revolutie van het denken die het perspectief verandert en die ongetwijfeld de kwaliteit zal verbeteren van elk ontwerp waar je ooit aan werkt. Wil je een betere webdesigner worden en grotere projecten op je nemen? Lees verder.
Het was een paar jaar geleden op SXSW 2008 dat ik voor het eerst kennismaakte met het idee van "pixel-perfecte" ontwerpmodellen. Michael Lopp (auteur van verschillende geweldige designboeken en een senior engineering manager bij Apple) was in het panel voor een sessie getiteld "Great Design Hurts"; Zijn speech was hilarisch en bezaaid met evenveel godslastering als een aflevering van Bill Maher. Onder zijn ongelooflijk inzichtelijke collegepunten bevond zich een klein juweeltje dat uitlegde hoe bij Apple elke ontwerper is toegewijd aan het idee van pixel-perfecte composities. Dat wil zeggen, elke comp die het bedrijf doorgeeft is zo precies, zo ongerept, zo gedetailleerd dat de toevallige kijker niet het verschil kan zien tussen de ontwerpcomp en een volledig gecodeerde screenshot.
... Elke comp die het bedrijf rondgaat is zo precies, zo ongerept, zo gedetailleerd dat de toevallige kijker niet het verschil kan zien tussen de ontwerpcomp en een volledig gecodeerde screenshot
"Dat is alles!", Dacht ik, "het idee dat mijn ontwerpproces radicaal zal veranderen". En inderdaad deed het dat.
Kijk, om elk ontwerpproject te beginnen met de bedoeling om het tot de laatste pixelveranderingen te volgen, zowat elk aspect van het ontwerpproces. Ook als je niet elke keer echt doorgaat, alleen al het idee dat het ontwerp met die bedoeling is gestart, zal dramatische gevolgen hebben voor het eindproduct.
Na een maand of twee van dit uitproberen, waren mijn PSD's schoner, mijn bestanden sneller, mijn projecten 'slepen' niet meer in hun latere fasen en ik bracht minder tijd door aan de telefoon met klanten die probeerden het verschil uit te leggen tussen een ruw ontwerpmodel en het eindproduct. Oh, en ik werd meer ingehuurd, wat een goede maatstaf is voor elke maatregel.
Dus wat een pixel perfect maakt, comp? In wezen is het een mockup ontwerpen (in het bijzonder een webmodel, maar het kan van alles zijn) alsof je het in de eerste plaats met code vormgeeft. Als je helemaal met CSS / HTML hebt gewerkt, weet je wat ik bedoel. Het bevat:
Laat me dit idee echter nader toelichten; Wanneer de meeste ontwerpers met een project beginnen, is het ontwerp alsof het is gewoon een mockup. De kennis dat een bepaalde ontwikkelaar of een Quality Assurance-specialist later komt en alles nauwkeuriger maakt, beperkt hoeveel tijd en moeite ze steken in de individuele ontwerpen.
Wat daarna gebeurt is natuurlijk voor de meeste ontwerpers: klanten krijgen te horen dat afbeeldingen en pictogrammen "slechts tijdelijke aanduidingen" zijn. Lorem Ipsum-tekst wordt gebruikt in plaats van echte inhoud. En ja, zelfs navigatie en andere belangrijke elementen van de gebruikersinterface worden verwisseld met "filler" -inhoud tot vlak voor de lancering in de meeste gevallen.
"Perfect" betekent dat elk element van elke ontwerpcomponent is precies zoals u van plan bent om in het uiteindelijke geprogrammeerde product te zijn.
Met marges en opvulling betekent dit dat ze consistent zijn over het gehele siteontwerp. Als elk zijbalkblok in een ontwerp is bedoeld om een marge van 10 px te hebben, ontwerp het dan elke keer dat er een zijbalkblok is.
Met lettertype en kleur betekent dit consistent gebruik op de hele site. Ontwerp elk stukje lettertype alsof het een HTML-element is (dwz: alle H1's zijn altijd 18px, vetgedrukt, Georgia gebruikt een zwarte kleur). Niet afwijken - zoals een van mijn favoriete projectbeheerders me ooit heeft verteld, mogen er niet meer dan 3 of 4 lettertypen op een enkele pagina staan, tenzij je een verdomd goede reden hebt om het te doen. Als u een specifieke kleur rood gebruikt als een hoogtepleurenkleur op de site, moet u ervoor zorgen dat die rode kleur exact op elke plaats staat (tenzij u een reden hebt waarom dit anders is).
Grenzen, HR-regels en achtergronden moeten ook consistent zijn - ik heb een aantal comps gezien waarbij elke border & HR verschillende tinten van dezelfde kleur zijn - dit leidt uiteindelijk tot comps ziet er slordig en onprofessioneel uit. Voor een ongetraind oog is het gemakkelijk om te zien wanneer een ontwerp halfgebakken voelt ... zelfs als die persoon niet precies kan zeggen wat er mis is.
Gebruik ten slotte pictogrammen, afbeeldingen, titels en tekst die zo dicht mogelijk bij het echte werk liggen. Als u een website opnieuw ontwerpt, gebruikt u de inhoud die ze al hebben gepubliceerd in plaats van Lorem Ipsum. Als de klant zegt dat hij nieuwe pictogrammen of afbeeldingen heeft die hij of zij in het herontwerp zal gebruiken, vraag er dan naar en zet deze in het ontwerp.
Vergeet niet dat we streven naar het maken van ontwerpcomponenten die zo nauwkeurig zijn dat ze lijken op schermafbeeldingen van de daadwerkelijke, live, gecodeerde implementatie.
Maar voordat ik een nieuwe stap ga doen, laten we de voor de hand liggende tegenargumenten aanpakken. Kosten. Tijd. Inspanning. Frustratie ... het argument dat zich al in je hoofd vormt klinkt misschien als volgt:
"Als ik de tijd besteed die nodig is om elke ontwerpmockup die door mijn handen gaat zorgvuldig te beschrijven, zal ik 3x zoveel tijd aan design besteden ... om nog te zwijgen van het feit dat als de klant niet van het ontwerp houdt, alles komt in de prullenbak ".
Een eerlijk argument, en een die zeker zijn verdiensten heeft, maar het is niet voldoende om dit artikel te ontsporen :) Onthoud dat het doel niet is om elke ontwerpmockup echt perfect te maken (dat zou krankzinnig en duur zijn) - het doel is om je benadering van ontwerpen te veranderen. Het feit is dat de pixel-perfecte aanpak in veel gevallen niet echt praktisch is ... maar dat zou je ervan moeten weerhouden ernaar te streven.
Laten we eens kijken naar de voordelen van pixel-perfecte comps en dan zullen we terugkeren naar dit argument.
Het dwingt je om meer georganiseerd te zijn. Meer organisatie betekent minder tijd verspillen aan het worstelen met je PSD's en meer tijd verspillen aan het ontwerpen van ezels.
Niet meer uitleggen aan klanten. Als je een comp perfect hebt ontworpen, dat wil zeggen, alles is op de plaats die je van plan was, hoef je niet uit te leggen aan klanten dat wat ze in het ontwerp zien niet echt is wat er in het eindproduct zal zitten.
Nooit meer uitleggen aan ontwikkelaars. Dit komt met name van pas wanneer uw klant uw ontwerpcompensatie naar een ontwikkelteam in India stuurt, waar lange verklarende e-mails niet worden vertaald. Als het hun enige taak is om PRECIES te coderen wat ze op de computer zien, vermindert dit de kans dat ze alle ontwerpspecificaties verkeerd interpreteren. En ach, het is zelfs gemakkelijker voor de vloeiende programmeurs waarmee ik werk; Ze kunnen zich concentreren op programmeren, niet proberen uit te vissen of ik 10px-marges of 15px-marges wil.
Minder tijd doorgebracht in QA. Kwaliteitsanalyse, als u niet bekend bent, is de laatste fase van het ontwerp van nagels op het bord, waarin u teruggaat naar een ruw 'voorgesteld' ontwerp en het prepareert voor de uiteindelijke presentatie. Voor ontwikkelaars is dit ook de naam van de laatste 'pre-launch'-ronde waarin elk detail, functionele bug en verdwaalde pixeltaak worden rechtgetrokken. Natuurlijk kun je in kleine projecten nooit een QA-cyclus doorlopen; maar in grotere projecten met het budget, loop je simpelweg niet weg van een project totdat deze stap is voltooid en het opgeruimde bronbestand is overgedragen.
Happier Art Directors / Clients. Als je art director (of wat dan ook zijn / haar titel is) minder tijd kwijt is aan het nitpicken van de details van je comps en meer tijd besteedt aan het geven van waardevolle aanwijzingen, zal hun bloeddruk (en die van jou) onvermijdelijk naar beneden gaan tijdens ontwerpbesprekingen.
Professioneler uitziende eindresultaten. Ja, je composities zullen professioneler lijken. Nu u minder tijd besteedt aan het uitleggen of excuses maken voor slordige modellen, kunt u meer tijd besteden aan het verhogen van uw tarief ...
Dus als reactie op het argument tegen pixel-perfecte composities, maak ik deze laatste punten.
Je comps zouden al perfect moeten zijn. Het is het einddoel van elk ontwerpproject, en als je er uiteindelijk niet komt, kan het zijn dat je nooit van plan was om in de eerste plaats.
Het kost minder tijd dan het alternatief. Kies er een uit: besteed 6 uur aan het minutieus ontwerpen van een webmodel en ontvang snel goedkeuring van de klant OF besteed 4 uur aan een ontwerp en nog eens 4 aan het maken van domme fouten voordat je de klant eindelijk de opdracht geeft om een ontwerp te ondertekenen.
Bewerkingen en revisies gebeuren sneller op deze manier, niet langzamer. Als je je mockup hebt ontworpen met behulp van deze mentaliteit, en je PSD is georganiseerd om dit weer te geven, dan zal elke volgende reeks revisies die de klant vraagt razendsnel gebeuren.
Uitstekende mockups betekenen minder tijd in ontwikkeling. Dit bespaart u (of uw klant) geld. Dit is de basishuurder van snelle prototyping - regel het voordat het een dure ontwikkelingscyclus ingaat.
Het is de grootste kloof tussen kleine projecten en grote budgetten. Het simpele feit is dat een recruiter op zoek naar freelancers om hun projecten op te nemen, "aandacht voor detail" gebruikt als de meest indicatieve maatstaf voor de vraag of een freelance ontwerper in staat is om een groot webproject aan te pakken. Als je een portfolio vol slordige comps hebt, wordt het zo veel moeilijker om te bewijzen dat je betrouwbaar en capabel bent.
Ik heb het eerder gezegd, maar het is mijn laatste punt. Je zult niet echt pixelperfectie bereiken op elke comp en dat is prima. Er is een tijd en een plaats voor de ruwe schets-comp en jij (en je klant) zullen weten wanneer het is. Deze theorie van 'pixel perfect comps' vereist geen 100% resultaten 100% van de tijd, het dicteert alleen de basishouding die je aan elk project toevoegt. Na jaren van werken aan dit in mijn eigen projecten, kan ik zeggen dat het de pijn meer dan waard is.
!
Accentsconagua