Hej designere, kører du din udvikler kolleger skøre?
Chancerne er at du har nogle vaner, der ikke oversætter særligt godt at kode, og det gør livet hårdt for udvikleren, der arbejder med dig på projekter. Vil du være en bedre kollega (og ven)?
Lær at kommunikere bedre og designe, så udviklere vil elske dig. Det vil fremskynde projekter og gøre arbejdet lettere. Og det handler heller ikke om at bringe slik til møder. Du kan få udviklere til at elske dig ved at lave små ændringer på den måde, du arbejder på.
Det største problem mellem designere og udviklere er, at de ofte arbejder i bobler. Individer eller hold begynder ikke at tale om et projekt, før det første udkast til designet er færdigt. Så er der en overdragelse fra designeren til bygherren.
Suk.
Det er bare ikke vejen til at arbejde. Designere og udviklere bør være involveret sammen fra begyndelsen for at tale om, hvordan et projekt vil komme sammen. Mens designeren kan fokusere på farve og skrifttyper og billedsprog, kan bygherren give indsigt i brugbarhed, funktion og ydeevne.
Designere og udviklere bør have en god ide om, hvad den anden side ligner. Designere bør forstå nok kode og anvendelighed til at tale med udviklere og forstå udfordringer; udviklere skal have lidt viden om designteori, så de kan komme med forslag, når design ideer ikke er rigtige for internettet.
En af de største ting, en designer kan gøre, er at prep og pakke filer på samme måde hver gang.
Hvor mange gange har du åbnet et Photoshop-dokument med hundredvis af navngivne lag? Giv ikke denne type fil til en udvikler. Hvert lag og stil - uanset hvilken software du bruger - skal navngives hensigtsmæssigt.
Hvor mange gange har du åbnet et Photoshop-dokument med hundredvis af navngivne lag?
Stil, farveprøver og typografi skal være konsistente i hele designet. (En knap skal ikke se anderledes ud end side til side.)
Navngiv filer og stilarter på samme måde for hvert projekt. Gruppen som elementer på en lignende måde og brug et ensartet mappesystem. På den måde behøver udvikleren ikke at genvinde, hvordan man finder dele og elementer med hvert nyt projekt.
En af de største udfordringer for designprojekter, der omfatter print og digitale stykker, er typografihåndtering. Brug ikke skrifttyper til udskrivningsprojekter til web- eller app-design og antage, at de vil fungere. (Ofte gør de det ikke.)
For digitale projekter skal du vælge Google Fonts for typografi. Det betyder at du måske skal finde et lignende skrifttype til internettet, så det passer til det, du bruger til udskrivning. (Det er ok.)
Lad ikke udvikleren gøre det for dig. Vælg de sammenlignelige Google Fonts og brug dem fra starten. Du kan endda bemærke print versus digitale skrifttyper i din stil guide.
Årsagen bag dette er enkel: Indlejring af skrifttyper kan blive lidt vanskelig. Plus, Google Fonts er gratis og sikrer, at du ikke pådrager yderligere projektomkostninger. (Mens du er i det, overveje at gøre det samme med ikoner og bruge en pakke som Font Awesome, som gør det muligt for udvikleren at style ikoner ved hjælp af CSS, ikke importere en flok billedfiler!)
Mens vi er på emnet for billedaktiver, er eksport og emballage filer ordentligt super vigtige. Mens en udvikler kan åbne og eksportere alle billedfiler for at imødekomme deres behov, kan du spørge, hvad de har brug for og gøre det undervejs.
Dette sikrer, at du får de afgrøder, du ønsker på billeder, mens du komprimerer filer for at hjælpe din hjemmeside med at indlæse hurtigt.
Prøv ikke at gøre dette alene. Spørg udvikleren, hvordan filer skal gemmes, navngives og komprimeres for bedst mulig brug.
Der er kun så mange enhedsstørrelser og billedforhold, der tænker på, når man designer websites og mobile apps. Som designer skal du kende lærredens størrelse, margener, polstring osv. For at skabe en mockup, der rent faktisk kan bruges.
Tal med udvikleren inden du begynder at tegne for at sikre, at du ved, hvordan designmiljøet ser ud, før du starter. Der er ikke noget værre end et design, der ser fantastisk ud i Photoshop eller Sketch og falder fladt i produktion.
Du skal kende disse ting på forhånd:
Det er blevet nævnt et par gange allerede, men kommunikation mellem designeren og udvikleren er virkelig nøglen til at gøre alt dette arbejde. Kommunikation kan skabe eller bryde projekter, påvirke deadlines og påvirke slutprojektets design og funktionalitet.
Kommunikation kan gøre eller bryde projekter
Tag din udvikler til frokost. Lær dem at kende. Spørg masser af spørgsmål undervejs. Hvis du ikke er sikker på, om noget vil fungere eller ej, så spørg bare. Udviklere er ikke skræmmende mennesker, og det er meget lettere at besvare et spørgsmål tidligt i processen end at genoverveje og hele konceptet.
Mens du taler med udvikleren og stiller spørgsmål, dykker du dybere. Lær nogle grundlæggende udviklingstendenser, hvis du ikke allerede har disse færdigheder i dit designarsenal.
Designere, der arbejder med digitale projekter, bør vers sig i:
Du kan aldrig skrive kode, men læringsudviklingsprincipper vil gøre dig til en bedre designer, fordi du vil forstå værdien af værktøjer og arbejdsgange.
Designprocessen omfatter også udvikling. Designere, du skal indse, at udvikleren er lige så vigtig for designprocessen som du er.
Med det for øje opretter du en "levende" stilguide, der ikke kun indeholder farve og skrifttyper, men også komponenter. Alle skal kunne få adgang til og opdatere dokumentet, da projektet kommer til live.
En god stil guide hjælper alle, der arbejder med et projekt, opretholder sammenhæng med visuelle elementer, giver kontekst til designvalg, tjener som et samarbejdspunt for projektet og hjælper med at standardisere kode. Den levende stil guide giver alle mulighed for at dele ideer og give vejledning gennem et projekt. Det er ikke bare et dokument, som nogen skaber lige før et design går live.
Indsæt følgende oplysninger i stilguiden for at få mest muligt ud af det:
Respekter rutenettet. I et responsivt website design er nettet mere end blot en retningslinje for placering af elementer på skærmen, det kan også diktere, hvor elementer går i forskellige skærmstørrelser, og hvordan kolonner stabler og shuffle.
Gitteret kan hjælpe dig med at designe og vedligeholde flow. (Udfordringen er, at du ikke vilkårligt kan bryde designregler.)
Tænk på det som sådan: Dit design har fire indholdsblokke opstillet på tværs af skærmen på en række (med lige gribebredder) på en skærm på fuld skærm. Så på en tablet skifter disse blokke til at danne to kolonner, med to rækker. På en mobil enhed skiftes de til en enkelt kolonne med fire rækker.
At forstå hvordan nettet påvirker størrelsen af objekter, og hvordan objekter vil skifte på forskellige enheder, er vigtigt, fordi det kan diktere, hvordan du designer for det indhold, du har. Tænk på det samme scenario igen. Hvad hvis du havde fem indholdsblokke? Det ville kræve et redesign for at sikre, at du opretter en sammenhængende visuel oversigt.
Den rigtige nøgle til at sikre projekter kommer sammen med lethed er at være fleksibel. Designteknikker og standarder for internettet ændres hele tiden. Mens nogle projekter tillader dig at være en stickler til detaljer og unmoving, reagerende design virker ikke rigtig sådan.
Den gyldne regel når det kommer til at arbejde med udviklere er ... ikke være en rykke.
Designere, der er lette at arbejde med, vil tjene mere respekt og have bedre relationer til udviklere. Dette vil føre til bedre og mere vellykkede projekter. Det skal selvfølgelig sige, men for ofte er der meget rystende adfærd derude. Må ikke falde i den fælde.
Vær fleksibel, åben og snakk om ting med din udvikler. De vil elske dig for det.