Hej designers, kör du dina utvecklare kamrater galen?
Chansen är att du har några vanor som inte översätter särskilt bra att koda, och det gör livet svårt för utvecklaren som arbetar med dig på projekt. Vill du vara en bättre medarbetare (och vän)?
Lär dig hur du bättre kommunicerar och utformar så att utvecklare kommer att älska dig. Det kommer att påskynda projekt och göra arbetslivet enklare. Och det handlar inte heller om att föra godis till möten heller. Du kan få utvecklare att älska dig genom att göra små förändringar i hur du jobbar.
Det största problemet mellan designers och utvecklare är att de ofta arbetar i bubblor. Individerna eller lagen börjar inte prata om ett projekt förrän det första utkastet till designen är klar. Sedan är det en handoff från designern till utvecklaren.
Suck.
Det är bara inte sättet att arbeta. Designers och utvecklare borde vara inblandade från början att prata om hur ett projekt kommer att samlas. Medan formgivaren kan fokusera på färg och typsnitt och bildspråk, kan utvecklaren ge insikt om användbarhet, funktion och prestanda.
Designers och utvecklare borde ha en bra bild av vad den andra sidan ser ut. Designers bör förstå tillräckligt med kod och användbarhet för att prata med utvecklare och förstå utmaningar; utvecklare borde ha lite kunskap om designteori så att de kan lägga förslag när designidéer inte är rätt för webben.
En av de största sakerna en designer kan göra är att förbereda och paketera filer på samma sätt varje gång.
Hur många gånger har du öppnat ett Photoshop-dokument med hundratals namngivna lager? Ge inte den här typen av filer till en utvecklare. Varje lager och stil - oavsett vilken programvara du använder - ska namnges på lämpligt sätt.
Hur många gånger har du öppnat ett Photoshop-dokument med hundratals namngivna lager?
Stilar, färgstämplar och typografi ska vara konsekventa i hela konstruktionen. (En knapp ska inte se annorlunda från sida till sida.)
Namnfiler och stilar på samma sätt för varje projekt. Gruppa som element på ett liknande sätt och använd ett konsekvent mappsystem. På så sätt behöver utvecklaren inte återuppliva hur man hittar delar och element med varje nytt projekt.
En av de största utmaningarna för designprojekt som inkluderar tryck och digitala bitar är typografihantering. Använd inte skrivbordsfonter för utskriftsprojekt för webb- eller appdesigner och antar att de kommer att fungera. (Ofta gör de inte det.)
För digitala projekt väljer du Google Fonts för typografi. Det betyder att du kanske måste hitta en liknande typsnitt för webben för att matcha det du använder för utskrift. (Det är ok.)
Gör inte utvecklaren för att göra det här. Välj de jämförbara Google-teckensnitten och använd dem från början. Du kan till och med notera utskrift mot digitala teckensnitt i din stilguide.
Anledningen till detta är enkelt: Inbäddning av teckensnitt kan bli lite knepigt. Plus, Google-teckensnitt är fria och kommer att se till att du inte påtar sig ytterligare projektkostnader. (Medan du är på det, överväga att göra samma sak med ikoner och använda ett paket som Font Awesome, vilket gör att utvecklaren kan stila ikoner med CSS, inte importera en massa bildfiler!)
Medan vi befinner oss på ämnet av bildtillgångar är export och förpackningsfiler på rätt sätt super viktiga. Medan en utvecklare kan öppna och exportera alla bildfiler för att möta deras behov, kan du fråga vad de behöver och göra det under vägen.
Detta garanterar att du får de grödor du vill ha på bilderna, samtidigt som du komprimerar filer så att din webbplats laddas snabbt.
Försök inte göra det själv på egen hand. Fråga utvecklaren hur filer ska sparas, namnges och komprimeras för bästa möjliga användning.
Det finns bara så många enhetsstorlekar och bildförhållanden att tänka på när du utformar webbplatser och mobilappar. Som designer måste du veta dukstorleken, marginalerna, vadderingen etc. för att skapa en mockup som faktiskt kan användas.
Tala med utvecklaren innan du börjar rita för att du vet hur designmiljön ser ut innan du börjar. Det finns inget värre än en design som ser fantastiskt ut i Photoshop eller Sketch och faller platt i produktion.
Du måste känna till dessa saker i förväg:
Det har nämnts några gånger redan, men kommunikation mellan designer och utvecklare är verkligen nyckeln till att göra allt detta arbete. Kommunikation kan göra eller bryta projekt, dra in tidsgränser och påverka projekts design och funktionalitet.
Kommunikation kan göra eller bryta projekt
Ta din utvecklare till lunch. Lära känna dem Fråga många frågor på vägen. Om du inte är säker på om något kommer att fungera eller inte, fråga bara. Utvecklare är inte läskiga människor och det är mycket lättare att svara en fråga tidigt i processen än att behöva ompröva och hela konceptet.
Medan du pratar med utvecklaren och ställer frågor, dyka djupare. Lär dig några grundläggande grunder om du inte redan har dessa färdigheter i ditt designarsenal.
Designers som arbetar med digitala projekt bör själva versera i:
Du kan aldrig skriva kod, men lärande utvecklingsprinciper gör dig till en bättre designer eftersom du kommer att förstå värdet av verktygen och arbetsflödena.
Designprocessen omfattar även utveckling. Designers, du måste känna igen att utvecklaren är lika viktig för designprocessen som du är.
Med det i åtanke, skapa en "levande" stilguide som inte bara innehåller färg och teckensnitt utan även komponenter. Alla borde ha tillgång till och uppdatera dokumentet när projektet kommer till liv.
En bra stilguide hjälper alla som arbetar med ett projekt att hålla samman med visuella element, skapa kontext för designval, fungera som en samarbetspunkt för projektet och hjälpa till att standardisera koden. Den levande stilguiden tillåter alla att dela med sig av idéer och ge vägledning genom ett projekt. Det är inte bara ett dokument som någon skapar direkt innan en design går live.
Lägg följande information i stilguiden för att få ut det mesta av det:
Respektera gallret. I responsiv webbdesign är nätet mer än bara en riktlinje för placering av element på skärmen, det kan också diktera var element går på olika skärmstorlekar och hur kolumner staplar och blandar sig.
Rutenettet kan hjälpa dig att utforma och underhålla flöde. (Utmaningen är att du inte på ett godtyckligt sätt kan bryta designreglerna.)
Tänk på det så här: Din design har fyra innehållsblock som är kantade över skärmen i rad (med samma rännbredd) på en bildskärm med full skärm. Sedan på en tablett växlar dessa block till två kolumner, med två rader. På en mobil enhet flyttas de till en enda kolumn med fyra rader.
Att förstå hur nätet påverkar storleken på objekt och hur objekt ska skiftas på olika enheter är viktigt eftersom det kan diktera hur du utformar för innehållet du har. Tänk på samma scenario igen. Vad händer om du hade fem innehållsblock? Det skulle kräva en omkonstruktion för att säkerställa att du skapar en konsekvent visuell disposition.
Den verkliga nyckeln till att säkerställa projekt samlas med lätthet är att vara flexibel. Designtekniker och standarder för webben ändras hela tiden. Medan vissa projekt tillåter dig att vara en stickler för detaljer och unmoving, lyhörd design fungerar inte riktigt så.
Den gyllene regeln när det gäller att arbeta med utvecklare är ... var inte en rycka.
Designers som är lätta att arbeta med kommer att tjäna mer respekt och ha bättre relationer med utvecklare. Detta kommer att leda till bättre och mer framgångsrika projekt. Det borde vara självklart, men alltför ofta finns det en hel del jerk-ish beteende där ute. Falla inte i den fällan.
Var flexibel, öppna och prata saker med din utvecklare. De kommer att älska dig för det.