Inledning#
När det kommer till webbsammanhang avser begreppet design den arbetsprocess då en webbplats tar form rent grafiskt. Processen går till exempel ut på att bestämma storlekar, placering, typografi, färgskalor, ikoner och logotyper, men kan sträcka sig till så gott som allt som syns på en hemsida. I denna sektion fördjupar vi oss i webbdesignens historia, arbetsgång, definitioner och koncept.
Vad är design? 💅#
En definition kan sägas vara "Konstnärlig formgivning gärna av bruksföremål" I vårat sammanhang handlar det ofta om att med hjälp av grafiska gränsnitt (GUI) underlätta för en användare genom en intuitiv upplevelse, med vissa undantag där man varit kreativ med webbplatsens utförande designmässigt. Idag hänger design och användbarhet ihop tätare än förr, vilket i kombination med att användare idag har väldigt höga krav vad gäller såväl känsla som utseende gör att det ställs höga krav på designens första intryck.
Begreppet design inefattar många moment. Dess betydelse varierar beroende på kontext men den har haft en alltmer avgörande roll på internet. Smaken för hur saker och ting skall designas på webben har förändrats en hel del sedan webbens begynnelse - så till den ringa grad att så gott som ingenting är sig likt. Trender inom färger, designelement, typsnitt och layout kommer och går, vissa snabbare än andra.
Designens betydelse 🤔#
Det handlar inte bara om att skapa ett gränssnitt - det handlar om att skapa en upplevelse. Ett genomgående designtänk syns mycket väl utifrån och har stor betydelse när det kommer till allmänhetens uppfattning om en produkt samt därmed dess framgång. Detta i sin tur kan vara avvgörande för ett företags framgång, om det till exempel är beroende av webbplatsen för att erbjuda en tjänst. För att lyckas med detta är det även viktigt att sätta sig in i rätt kontext, för att på så sätt kunna skapa en design som sänder rätt budskap! Design ger helt enkelt ytterligare en dimension till ett företags sätt att uttrycka sig och det de står för.
Arbetsgång ⚙️#
Låt innehållet stå som grund för designen, inte tvärtom!#
Att börja välja färger och typsnitt innan man vet vad innehållet kommer att bestå av är helt onödigt då båda designelement kommer att ändras allteftersom designen tar form. Börja istället med design i svart-vitt för att hålla användarvänlighet och tillgänglighetanpassning på en hög nivå redan från början.
Motstå frestelsen att tänka uppifrån och ned#
Detta exempelvis för att det kan vara svårt att veta vad som kommer att behöva sammanfattas när designen är klar! Börja istället med små, utskurna bitar av funktionalitet. En sökfunktion? En knapp? Genom att jobba med små bitar blir det enklare att ta beslut om senare designelement, jämfört med att försöka ta sig för att få hela designsystemet komplett från början. Det blir dessutom enklare att resonera kring små enheter av funktionalitet i taget. Hur skall sökresultaten visas? Hur många skall visas samtidigt?
Börja med enkla skisser och håll det enkelt. Designen kommer sedan att genomgå många iterationer av färgsättning, val av typsnitt, designelement osv men det är viktigt att komma ihåg att detta inte tillhör den tidiga processen i en design.
Se till att testa designen, kanske rentav fysiskt med hjälp av pappersbitar. Detta återigen för att minska antalet timmar spenderade på att implementera funktionalitet som inte ens fungerar!
Alla dessa ansträngningar bidrar på sitt sätt för att designen skall:
- Vara enklare att avfärda, kasta eller helt enkelt börjas om
- Vara enklare att koppla till användares feedback kring funktionalitet snarare än subjektiv inställning till färgval, typsnitt m.m
- Fortsätta att utvecklas genom minimering av tillfällen då man kan fastna i diskussioner
Varför skall vi lära oss detta? ❓#
Det är viktigt att ha designen i åtanke för såväl backend som frontend. I frontend gäller det att strukturera upp innehållet på ett sätt som känns intuitivt för användare. Detta innebär i sin tur att de designval som görs kommer att påverka kodens struktur, så det är viktigt att ha designen klar för sig innan man sätter igång med programmeringen om man inte tycker att det är kul att göra om sitt arbete, något som en arbetsgivare kanske inte blir superlycklig över.
För att strukturera/designa en databas eller annan backend-tjänst krävs det nästan att man har klart för sig när, på vilket sätt och i vilken mängd som data förväntas hämtas/levereras till frontend. För att ha koll på detta krävs det att man har en någorlunda uppfattning om hur gränssnittet kommer att se ut, annars famlar man i mörkret och bygger på gissningar.
Definitioner 📝#
Kontext#
Omständigheter, sammanhang, omgivning eller övergripande situation
Motton 📣#
K.I.S.S - Keep It Simple, Stupid!#
Börja med de allra enklaste elementen som behövs för att sidan skall fungera. Skissa med papper och penna, och håll dig borta från färger, komplexa strukturer etc. så att du enkelt kan göra snabba ändringar utan att känna att du kastar bort tid.
Kill your darlings#
Låt inte din känsla av stolthet för en viss design vara ett hinder för att slita den i stycken och börja på nytt, om så skulle vara nödvändigt. Om den inte passar produktägaren, inte är praktisk eller av någon annan anledning inte fungerar i verkligheten är det viktigt att den slopas istället för att sitta i timmar och förändra detaljer i jakt på att få den att fungera.
Koncept#
Design#
Design (ä.k formgivning) beskriver ett föremåls konstruktion, utseende eller skapandeprocess (Wikipedia). Inom webben refererar detta framförallt till framtagandet av den visuella, upplevda biten av en webbplats. Processen inkluderar en hel del områden där bland annat utseende i form av färg och typsnitt samt layout är stora områden. För att en design skall bli lyckad ur något annat än ett artistiskt perspektiv måste den vara anpassad efter en målgrupp, gärna efter utvärdering/intervjuer.
Prototyp#
En prototyp är en tidig version (ett testexemplar) av en slutprodukt. Prototypen tjänar till att utvärdera en ny idé, för att avgöra huruvida den lämpar sig väl eller ej. Detta gör prototypen till en avgörande del av desingprocessen, eftersom den är en av de sista utvärderingarna som görs innan en produkt massproduceras eller gör offentlig. När det gäller webbdesign handlar detta om att skapa en fungerande version av en framtagen design, detta för att kunna göra sig en bild av hur användbar den är (User Experience, UX) på en produktionsnära nivå.
Hierarki#
Begreppet hierarki är mycket brett, men gemensamt är att det benämner ett system med en inbördes rangordning som är bestämd på förhand. Inom design talatr man oftast om visuell hierarki, som beskriver principen i vilken element på en webbplats placeras på ett sätt som gör det tydligt hur viktiga de är. Det är väsentligt att en webbdesigner har användaren i åtanke, på så vis att designen är enkel för användaren att förstå. Genom att placera element såsom länkar, knappar och menyer på ett logiskt och strategiskt sätt kan en designer guida användarnas uppmärksamhet till rätt ställe, vilket minskar på belastningen.