Webbutvecklingskoncept Alla webbdesigners ska förstå

Det finns mycket att säga om skillnaden mellan designers och utvecklare. Beviljas det finns många designer / utvecklare hybrider som kan förstå båda sidor av myntet, men de är få och långt ifrån.

Kreativa projekt trivs på korrekt kommunikation. Men detta kan vara svårt när designers och utvecklare är osäkra på hur man ska prata med varandra. Jag tror inte att designers behöver veta hur man skriver korrekt JavaScript, och borde inte heller utveckla master typografi urval. Men det finns några grundläggande ämnen som jag tror går båda vägarna.

Följande ämnen är min egen personliga satsning viktiga webbutvecklingsidéer som alla designers ska förstå. Som designer / utvecklare själv vet jag hur förvirrande det kan vara att studera båda områdena. Men det är alltid värt ansträngningarna att lära sig eftersom en tydlig förståelse förbättrar kommunikationen och gör en designer mycket mer värdefull för ett kreativt team.

Frontend Code Behavior

Webbdesigners är ofta ansedda att ha frontend kompetens tillsammans med deras design talanger. Detta är ett hett debatterat ämne, främst för att det finns inget korrekt svar.

Designers ska göra vad de gör är bekväma med. Om det bara betyder att göra visuellt designarbete, så var det så. Men en kort förståelse av frontend-teknik kan göra samma designer mer intuitivt när du skapar tillgångar till utvecklare.

Jag tror att alla designer ska åtminstone förstå tre grundläggande språk för frontendutveckling (HTML, CSS och JS) tillsammans med hur de används. De flesta rullgardinsmenyer är till exempel beroende av JavaScript, men det finns också CSS-bara alternativ.

När en formgivare skapar en rullgardinsmeny kan de tänka på komplexiteten att genomföra den via kod. En designer som förstår vilka element som kräver JavaScript kan vara bättre förberedda för att förstå vad de ber utvecklare att bygga.

Det här är möjligt utan att lära sig att skriva en enda kodlinje.

CSS är gjord till stil webbplatsen. Det är mestadels statisk bortsett från CSS animation och CSS skapar majoriteten av bilderna på en sida. De flesta dynamiska funktioner skapas med JavaScript.

Om du kan förstå denna uppdelning kommer det att andas en medveten insats i designarbetet. Det kommer också att tvinga UX-konstruktionsdesigners att överväga hur mycket arbete som går att animera ett gränssnitt.

Responsiva tekniker

Varje webbdesigner borde åtminstone känna till termen responsiv design. Detta tillåter webbplatser att anpassa sig till olika skärmstorlekar, till var och en en annan layout hör till. Enhetsdimensioner när en ny layout tillämpas är definieras av brytpunkter, läggs till i (en av) CSS-filerna.

Brytpunkter anges av a viss pixelbredd (och / eller ibland höjd), antingen minsta eller maximala, där layouten anpassas för att passa den skärmstorleken. Så en lyhörd layout kommer att se annorlunda ut på en 1080px bildskärm än på en 320px smartphone.

För att se hur brytpunkter fungerar på riktiga webbplatser kolla in Media Queries hemsida.

Ditt jobb som designer är att överväga hur varje brytpunkt kan påverka mockupen. Du kan vara uppgift att designa flera comps, var och en passar in i olika skärmdimensioner.

När du förstått att en CSS-brytpunkt definierar villkoren när layouten ändras, får du mycket enklare tid att leverera dessa tillgångar till dev teamet.

Tänk modulär med mönster

Utvecklare vill alltid återanvändningskod så mycket som möjligt, eftersom detta tillvägagångssätt gör utveckling mindre verbose och skär ner filstorlekar - Det är faktiskt en viktig kodoptimeringsteknik.

Modulär design beskriver en metod för att skapa webbplatser ur “moduler” det kan vara återanvändas över tiden. Tänk knappar, form inmatningar, rubrik stilar eller blockquotes med snygga stylingar.

Om du designelement modulärt, Det blir lättare för utvecklare att koda layouten med återanvändbara CSS klasser. Det är alltid en bra idé att tänka på var du kan rimligen återanvändning samma färger, texturer och sidelement, men du måste vara smart om det att inte skada övergripande estetik.

Det är ännu bättre om du kommentera vilka element du har kopierat över olika mockups, så att utvecklare kan markera dessa delar av webbplatsen med upprepad kod - vilket gör utvecklingen snabbare och enklare.

Modulär design hänför sig till atomdesign, båda metoderna är snarare inriktade på utvecklare. dock visualisering kan hjälpa dig att förstå hur koden fungerar, så om du kämpar för visualisera modulär design kolla in det här inlägget för att se några exempel.

Förstå Retina Images & SVG

Vanligtvis är det designerens jobb att förbereda bilder, fånga alla nödvändiga foton och designa ikoner från början. Detta innebär att designers är ensam ansvariga för leverera de visuella tillgångarna att utvecklare så småningom kodar in i layouten. Det är därför det är viktigt att förstå näthinnor och till passera näthinnan stödda tillgångar till utvecklarna tillsammans med den sista mockupen.

Jag rekommenderar starkt det här Smashing Magazine-inlägget om du vill lära dig mer om retina design arbetsflöden. Retinera Det är en fri samling av Photoshop-åtgärder som kan skapa automatiskt näthinneversioner av dina tillgångar.

De flesta designers vet redan att stödja @ 2x bilder, men de nyare iPhone 6 + enheterna har @ 3x upplösningar. Men vissa projekt stör inte med @ 3x bildstorlekar, så prata med din projektledare innan du slutför några tillgångar.

En sista sak att tänka på är framsteg av SVG på webben. Alla moderna webbläsare stöder SVG som är en vektorbaserat bildformat. Det betyder att SVG-ikoner kommer automatiskt skala utan någon kvalitetsförlust, så du behöver inte näthinnan för SVG-grafik.

Inte alla kreativa team är villiga att gå med SVGs för webbdesign men. De är säkert stödda av webbläsare, men i vissa fall kan de också vara knepiga att implementera. Därför är kommunikationen avgörande för en framgångsrik designer / utvecklare.

Diskutera för-och nackdelarna med att använda vektorgrafik och bestämma vad som fungerar bäst för varje projekt. Genom att bara ha en förståelse för dessa funktioner kan du kommunicera med utvecklare tydligt och till och med hjälpa dem att koda layouten för näthinnans stöd.

Förstå tillgänglighet

Progressiv förbättring och värdigt förfall är två olika sätt att hantera samma problem: tillgänglighet. Inte alla användare kommer att vara på enheter eller köra webbläsare som stöder 100% av en webbplatss dynamiska funktioner.

Dessa användare borde fortfarande få en erfarenhet som fungerar, och detta måste hanteras med korrekt kodning. Vissa skärmsläsare kan ignorera all JavaScript och CSS-kod, men webbplatsen behöver fortfarande fungera.

Jag gjorde nyligen ett inlägg som täckte progressiv förbättring i detalj, eftersom det är min föredragna utvecklingsmetod. Progressiv förbättring börjar med mycket grundläggande funktioner, sedan arbetar upp till mer “Avancerad” funktioner.

Värdigt förfall är motsats var Alla huvudfunktioner är utformade först, då bestämmer utvecklaren hur man hanterar dessa funktioner om användaren inte stöder JavaScript eller CSS.

Det är osannolikt att en designer skulle bli ombedd att göra mockups för någon av dessa situationer. Men det är viktigt att designers förstår dessa villkor och vad de menar, eftersom de påverkar utvecklingsprocessen. Detta gäller särskilt för projekt där tillgänglighet är en stor angelägenhet.

I stängning

Det finns några ämnen jag hoppade över, eftersom jag anser dem valfria. Versionskontroll, felhantering och JavaScript-animeringar är några mer komplicerade ämnen som designers kanske vill dyka in i.

Men sanningsenligt kommer de punkter som tas upp i detta inlägg mer än att hjälpa designers att förstå kraven för ett utvecklingslag. Genom att bara skumma ytan på webbutveckling kommer du få insikt som hjälper dig att kommunicera idéer och sympatisera med problem som uppstår under produktionen.

Om du letar efter mer relaterat innehåll kan du titta på dessa inlägg:

• Hur effektivt kommunicerar med utvecklare (Smashingmagazine.com)
• Hjälp designers och utvecklare Lär dig att förstå varandra (Uie.com)
• Lärande att kod ger dig fördelar som en UX-designer (Jessicaivins.net)