Grafisk design vs webbdesign

grafisk och webbdesign är två områden som ofta förväxlas med varandra. Trots allt, de båda fokuserar på ‘design’ och de båda arbetar ofta på samma projekt.

men det betyder inte att de är desamma, och att veta skillnaderna är viktigt för att veta vem man ska vända sig till vid varje given punkt i ett projekt. För detta ändamål, här är en detaljerad uppdelning av varje roll och deras viktigaste skillnader.

naturligtvis, medan individuella färdigheter kan variera beroende på respektive person eller team, finns det några viktiga kärnklammer för grafisk design vs webbdesign som sällan förändras – det är det som definierar rollerna och vad vi vill fokusera på här!

Vad är grafisk Design?

grafisk design avser skapandet av visuella, kommunikativa tillgångar för den användarvända sidan av produkter. Detta kan inkludera illustrationer och ikoner (vad de flesta förmodligen tänker på som ‘grafik’), liksom typografi, fotografi och till och med mallar. En grafisk formgivare eller team kommer att använda alla dessa medier för att skapa nödvändiga tillgångar eller kompositioner för ett projekt.

den största möjliga skillnaden är att en grafisk formgivare inte har teknisk kunskap. Istället kompletterar de sina visuella färdigheter med en förståelse för användarnas beteende och förmågan att undersöka problem. Det är därför grafiska formgivare också kan hjälpa till med sidlayouter , till exempel-de förstår hur användare beter sig och utformar frontend därefter.

utöver detta kräver grafisk design mycket mer än förmågan att rita eller illustrera. Det kräver kunskap om färgteori (hur färger interagerar med varandra), psykologi (hur visuella påverkar användarnas beteende) och de mer avancerade ämnena, såsom visuella hierarkier (hur man visualiserar viktigare alternativ över sekundära). Medan grafisk design är ett område som saknar den tekniska kunskap som behövs i digitala projekt, är deras förståelse för bilder, användare och förhållandet mellan de två lika viktiga.

exempel på grafisk Design

grafisk design händer runt omkring oss-det finns i tidningar, skyltar, flygblad och annat tryckt material du kan tänka dig. Som sagt, här är några exempel på grafisk design när det gäller digitala medier – inklusive hur det överlappar och fungerar med webbplatser.

  • LinkedIn. Även om vi inte skulle betrakta något socialt medienätverk som ‘grafiskt tungt’, använder de alla ändå grafisk design som viktiga visuella genvägar. Med hjälp av LinkedIn som ett exempel reduceras den övre fältet till ett litet antal lätt tolkbara ikoner, vilket garanterar enkel navigering över skärmar. Dessutom hjälper detta till att översätta bra till mobil och surfplattor så att ikonerna säkerställer konsistens och förtrogenhet medan den visuella layouten kan ändras.

  • McDonald ‘ s. Detta är ett varumärke med en logotyp som är känd över hela världen, så det är ingen överraskning att webbplatsen och tryckta material använder grafiska designkomponenter så mycket som möjligt. Allt visas textljus och förmedlar varumärke genom logotyp, färg och fotografi. I själva verket är detta sant för ganska mycket alla de bästa matrelaterade tjänsterna, som restauranger och leveransappar: show Don ‘ t tell är vägen att gå.

  • IKEA. All e-handel eller detaljhandel kräver starka visuella, men IKEA har cementerat sig med branding och stil. Företaget använder grafik så mycket som möjligt, från sina livfulla blå och gula färger för att visa sina produkter i en hemmiljö. Dessa är grafiska designval som har definierat företaget nästan lika mycket som deras namnkonventioner.

Vad är webbdesign?

webbdesign hänvisar till de färdigheter och metoder som används för att både producera och underhålla en webbplats. Detta inkluderar både tekniska färdigheter, såsom kodning och sökmotoroptimering (som påverkas starkt av tekniska val), samt designrelaterade färdigheter, såsom gränssnitt och användarupplevelse.

oavsett om det är en enskild webbdesigner eller ett team som omfattar respektive kompetens som krävs, är webbdesign en process som är aktiv i början. I själva verket kan vi säga att det är i huvudsak produktdesign för webbplatser. Det handlar om att förstå webbplatsens mål, hur användarna kommer att interagera med den, göra respektive teknikval och planera en väg framåt.

vi nämnde dock bara att webbdesign kan innehålla några grafiska element. På grund av detta är det inte ovanligt att se några grafiska färdigheter inom webbdesignteam – vilket förmodligen är där en del av den ursprungliga förvirringen ligger – men det är webbdesigners som också skapar alla backend-infrastrukturer.

det är också värt att notera att webbdesign ofta betraktas som sin egen kompetens. Även om det finns många visuella element gemensamt med annan programvara, som knappar och navigering, har webbplatser ofta egna tekniska val. Med det sagt, med ökningen av progressiva webbappar, gränserna mellan webbplatser och applikationer har blivit alltmer suddiga.

vi behandlar inte längre webbplatser som helt separata enheter från applikationer och annan programvara inom affärsdomänen. På samma sätt ser vi också webbdesignkunskaper som behövs inom bredare områden.

exempel på webbdesign

varje bra webbplats använder webbdesign i sin uppfattning, så det finns ett stort antal fantastiska exempel där ute. Här är bara några vi vill påpeka:

  • Dropbox. Även om denna webbplats kan verka mycket minimalistisk, det är helt poängen. Dropbox webbplats är utformad för att stödja sin affärstjänst (överföra filer), så navigeringen är ren och enkel. På samma sätt gick många designval till att skapa själva fildelningsprocessen på ett sådant sätt att de fungerade med moderna webbläsare och enheter. Så här säkerställer Dropbox en intuitiv och smidig process.

  • Slack. Som en produkt som finns både i webbläsaren och som ett nedladdningsbart, fristående alternativ är Slack ett fantastiskt exempel på var webbplatser och mer dedikerad programvara börjar suddas ut. Plattformen använder tydlig navigering, trots en växande lista över funktioner och användbarhet, varför den fortsätter att vara en användarfavorit i sin konkurrenskraftiga nisch.

  • Wikipedia. Detta är ett exempel på en webbplats som i huvudsak är så långt borta från grafisk designpåverkan som möjligt. Som sagt, det har många val som görs av en anledning. Wikipedia behöver tydligt och enkelt visa stora mängder information på en enda skärm, samtidigt som man skapar webbarkitektur för att stödja dess bredare redigerings-och administratörsuppgifter. Det kan låta enkelt, men om du tittar på Wikipedias ursprungliga design ser du mycket arbete har gått för att göra det så intuitivt och användbart som möjligt.

grafiska och webbdesign skillnader

dynamisk vs statisk

grafisk design har funnits mycket längre än webbdesign, men mycket av dess engagemang ligger i fysiska medier, som tidskrifter och tryckta medier. Å andra sidan är webbdesign enbart inriktad på digitala medier, och häri ligger en viktig skillnad.

i en tidning eller bok ordnas innehållet i en viss ordning, där designen ofta tar detta för givet. Ordningen är något statisk. På en webbplats har dock olika användare sina egna vägar, och designers kan inte lita på ett etablerat mönster.

detta innebär att webbdesign måste tillhandahålla verktyg för användare att navigera enkelt, samt se till att varje sida i vyn fungerar som en fristående skärm för sina respektive ändamål.

dessutom, i en tid av personalisering och dynamiskt laddningsinnehåll, måste webbdesigners vara mer och mer kreativa. Ett bra exempel på detta ligger i e-handel. I en digital butik kan butiken prioritera objekt baserat på dina preferenser, ge rekommendationer baserade på historiska data och trender och andra anpassningar. Inget av detta händer i en katalog – tekniken finns inte där. Det är ett helt nytt område som webbdesigners måste alltmer överväga i sitt arbete.

kreativitet

liksom alla produkter måste en webbplats vara både användbar och stå ut från tävlingen. En vanlig webbplats med svartvit text kommer inte att få dig så långt. Dagens användare förväntar sig en stark visuell ansträngning – för detta behöver du människor som är kreativa.

grafisk design är där detta kommer in. Designers använder sin kunskap om målanvändarna för att skapa bilder som fungerar. Det är här några av de större varumärkesaspekterna också spelar in. En webbplats måste matcha allt annat företaget gör, till exempel fysiska butiker eller tryckt material. Varumärkeslojala följare bör enkelt kunna identifiera sig med webbplatsen.

filstorlek & prestanda

på en webbplats orsakar större filstorlekar långsammare laddningstider och andra prestandaproblem, vilket är dåligt för både sökmotoroptimering och slutanvändarupplevelsen. Det är välkänt att människor inte kan stå långsamma webbplatser och klicka bort om svaret inte är tillräckligt snabbt.

dessutom, medan människor också njuta av vackra webbplatser fulla av grafik och animationer, dessa är några av de främsta syndarna bakom stora filstorlekar och långsam prestanda.

webbdesigners tittar på prestanda som helhet. Förutom att arbeta med grafiska formgivare för att se till att bilderna är så lätta som möjligt, kommer de också att titta på hur innehållet laddas in, vilka andra åtgärder som fungerar bakom kulisserna och alla andra områden som kan påverka prestanda.

skala & förhållande

i traditionella utskriftsmedia ändras sidans storlek sällan. Detta gör det enkelt för grafiska formgivare att tillhandahålla material som är perfekt storlek, varje gång. Men i en digital värld äger vi alla olika stora skärmar.

som ett resultat av detta måste webbdesigners överväga mönster som kan hanteras på stora datorskärmar, surfplattor eller små smartphones. Det finns många sätt att göra detta – idag föredrar vi att dynamiskt ladda innehåll baserat på enheten snarare än att ha en sekundär mobilvariant av våra webbplatser-men det är en faktor som påverkar alla val.

webbdesigners måste skapa strukturer som dynamiskt anpassar sig till skalan. I sin tur innebär det att de måste planera med tillgångar som också anpassar sig. En bild som visas på ett skrivbord kan behöva skalas ner – men det kan också behöva justeras för att passa texten.

detta påverkar också typografi och andra områden, vilket skapar en överlappning mellan grafiska och webbdesignproblem. Ett grafiskt designteam kan till exempel välja de vackraste teckensnitten, men webbteamet måste testa om de kan läsas tydligt på en mindre skärm.

visuell teori

tidigare nämnde vi både färgteori och visuella hierarkier. Det är denna bredare visuella teori som är avgörande för webbplatser. När en användare landar på en webbplats är det den visuella presentationen på frontend som leder vart de går. Ju snabbare de kan förstå var de ska flytta, var de ska klicka och hur man hittar vad de behöver, desto mer framgångsrik är webbplatsen för att ta itu med sina initiala problem.

för detta förstår grafiska designers vilka färger som ska användas, hur man layouter sidor, hur man ger utrymme och visuell vikt till de viktigaste aspekterna och hur alla dessa val påverkar den slutliga upplevelsen.

Löpande stöd

när en visuell tillgång är klar är det det – det är klart. En webbplats anpassar sig dock ständigt och utvecklas. Nya sidor eller avsnitt läggs till, eller webbdesignteamet måste välja ny teknik för att göra det ännu mer presterande. I sin tur innebär dessa val att planera en ny sektion eller till och med omforma den befintliga strukturen.

när internet har utvecklats har webbplatser blivit mer anpassningsbara och presterande. För att hålla jämna steg har webbdesigners varit tvungna att hålla jämna steg med denna takt. Ökningen av smartphones innebar till exempel att mobila webbplatser blev allt viktigare, medan även stationära datorer har nya webbläsare och annan teknik som måste redovisas.

men det mesta av detta gäller sällan grafisk design, eftersom det är rent fokuserat på frontend. När teknikval påverkar bilder är grafisk design ofta inblandad, men fram till dess är det webbdesignteamet som underhåller och förbättrar befintliga webbplatser.

Analytics

vi har redan konstaterat att webbdesign är en pågående process – så vem tror du att det är som analyserar aktuell webbplats prestanda och data? Webbdesigners använder denna information för att mäta deras webbplats framgång och planera nästa förbättringar.

till exempel kan en typisk webbplats fokusera på vilka sidor som visas (och vilka inte), hur många som snabbt lämnar webbplatsen (avvisningsfrekvensen) och hur snabbt webbplatsen som helhet fungerar för användare. Det kan också fokusera på SEO, till exempel vilka nyckelord som drar människor in, vilka sidor som rankas högt och vilka de vanligaste trafikkällorna är. Många av dessa kan sedan leda till nya webbdesignbeslut.

men för mer specifika webbplatser slutar det inte där. E-handelsbutiker, liksom andra portaler, måste ofta överväga användaraktivitet ännu mer. Kan användarna hitta alla objekt de behöver? Går betalningsprocessen smidigt? Köper människor mer – eller mindre-ofta? Alla dessa kan indikera när något går fel och behöver förbättras.

roll med Utvecklare

även om det är uppenbart att webbdesigners inte är webbutvecklare (även om de två ofta klumpas under ‘web dev’ – branschen), är det tydligt att de fortfarande har stark teknisk kunskap. Detta gör dem till det perfekta valet för att arbeta sida vid sida med utvecklarna på ett visst projekt.

Designers måste göra tekniska val som överlappar med utvecklare, så det är perfekt att designrollen interagerar nära med den senare. Medan webbdesignrollen tar hänsyn till filstorlekar och prestandaproblem, är det i slutändan utvecklare som måste konvertera allt till funktionell kod. Detta gäller också när det gäller efterföljande förbättringar eller anpassningar. Som ett resultat är kommunikation mellan dessa två lag avgörande.

grafisk design å andra sidan överlappar sällan, om alls. När webbplatsen behöver visuella tillgångar är det webbdesignteamet som vanligtvis överlämnar dessa till utvecklarna som en del av hela projektet.

TL; DR – grafisk design vs webbdesign

om du arbetar på en webbplats behöver du både webbdesign och grafisk design. Den förstnämnda är aktiv under hela projektet, från initiala val till att hjälpa utvecklare att implementera allt korrekt. Utöver detta ger den grafiska designen kunskap om användarbeteende och visuell teori för att skapa tillgångar för att säkerställa att frontend är så användarvänligt och inspirerande som möjligt.

Lämna ett svar

Din e-postadress kommer inte publiceras.