Välkommen till vår blogg

På vår blogg skriver vi om allt som intresserar oss. Här postar vi våra nyheter och lite annat smått och gott.

Vad är skillnaden på UI och UX design

Vad är skillnaden på UI och UX design? 

Av | ui-design, ux-design, webbutveckling

Dessa begrepp är vanligt förekommande inom webbutveckling och är något snarlika vilket gör att de lätt kan bli förväxlade. Både UI och UX design är viktiga komponenter för ett lyckat webbprojekt så vad är egentligen skillnaden på UI och UX design?

UX design (user experience design) 

Handlar om interaktionen som sker mellan dig som användare och en produkt. UX design har som syfte att göra interaktionen så enkel och effektiv som möjligt för att användaren enkelt ska uppnå målen med produkten. Fokus för UX design är att ta reda på hur man använder ett system och försöka förutse vilka behov som användarna har. När behoven är identifierade är det viktigt att gränssnittet har element som uppfyller dessa identifierade behov. 

UI design (user interface design) 

Handlar om hur en produkt ser ut och hur den blir uppfattad av användarna. Inom UI design är det färger, kontraster, format, bilder och typsnitt som anpassas för att fånga målgruppens intresse. Därför kan man kan säga att UI design fokuserar på hur ett system ser ut, ett väl fungerande gränssnitt, informativa element och färger som är tilltalande. 

Varför behöver man UI och UX design?

Bra UI och UX design behöver du för att skapa en positiv kundupplevelse. Det är sedan den positiva kundupplevelsen som i sin tur bygger varumärken och driver försäljning. Därför kan det vara avgörande att skapa ett gränssnitt som är välfungerande och innovativt. 

Vi på Quality think vet att bra webbdesign har många fördelar. Om du eller ditt företag behöver hjälp med ett webbprojekt kan du läsa mer om våra tjänster här.

 

UI-designmissar du vill undvika

Av | färger, strategi, tips, ui-design

Att skapa design med fokus på bra användarupplevelser är något vi på Quality Think värdesätter högt. Därför vill vi dela med oss av några grundläggande designdetaljer att se över för att skapa ett bra visuellt intryck. 

Hierarki

Det är viktigt att texterna i designen har rätt hierarki, vilket betyder att huvudtiteln ska vara störst, underrubriker mindre och brödtexten ännu mindre. Har du fel hierarki upplevs texterna som röriga samt svårare att läsa och eftersom du vill underlätta för användaren att ta till sig budskapet så är det viktigt att texterna har rätt hierarki.

UI-designmissar du vill undvika

Kontraster

Att ha tydliga kontraster ger bättre läsbarhet och visuellt intryck. Det är därför viktigt att använda sig av kontrasterande färger när man väljer färg till sin design. 

UI-designmissar du vill undvika

Avstånd

För ett bra visuellt intryck så ska det finnas bra med avstånd mellan objekten i designen. En layout med objekt som är för nära varandra ger ett stökigt och svårnavigerat intryck och därför lönar det sig att ge objekten utrymme. 

UI-designmissar du vill undvika

Färger

Steg 1 för att lyckas med färgerna är att välja en färgpalett med liknande färger, färger som kompletterar varandra och enhetliga färger. Steg 2 är att använda sig av 60/30/10 regeln som är en designprincip som innebär att 60% av färgerna ska bestå av primärfärger, 30% av sekundärfärger och 10% av accentfärger.

UI-designmissar du vill undvika

Ikoner

Ikonerna i designen ska även ha samma stil och storlek för att skapa ett enhetligt intryck. 

UI-designmissar du vill undvika

Skuggor 

Skuggor skapar liv och kan ge den där extra detaljen som ibland behövs till designen. Försök däremot att undvika starka och tydliga skuggor i designen om du vill skapa ett modernt intryck.

UI-designmissar du vill undvika

Bilder

När man använder bilder så är det viktigt att bilden har hög upplösning. Ett tips om bilderna innehåller tomma ytor är att placera text över dem för att bibehålla läsbarheten.

Kommentera gärna om du vet några mer UI-designmissar du vill undvika. Vill du veta mer om våra tjänster och hur vi kan hjälpa dig med din digitala närvaro? Läs mer här!

 

 

 

SEO guide: vad är SEO och varför ska man använda det?

Av | tips

SEO guide vad är det och varför ska man använda det?

I denna SEO guide kommer vi gå igenom vad SEO är, varför man ska använda det och tips på hur du effektivt jobbar med sökoptimering. SEO är en förkortning för Search Engine Optimization och på Svenska kallas det för sökoptimering. Det viktigaste med sökoptimering är att synas på sökmotorer som exempelvis Google, för syns man inte så finns man inte. I dagsläget har Google 95,88% av sökmotormarknaden i Sverige och 90,46% globalt, vilket gör det viktigt ur affärssynpunkt att synas på Google. Att jobba med SEO på ett bra och effektivt sätt gör det enkelt för Google att hitta till hemsidan och hänvisa besökare till den. Att arbeta med SEO handlar till största del om att skapa innehåll på rätt sätt och ha koll på relevanta sökord för att hamna högt upp på sökmotorernas lista.

Här nedan listar vi 5 tips för effektiv sökoptimering

1. Innehåll

Skapa innehåll som din målgrupp vill läsa. Idag prioriterar Google innehållet före hur många gånger som sökordet finns med. Det viktigaste är att den som söker efter information snabbt ska få det mest relevanta svaret, därför prioriterar inte Google längre hur många gånger som sökordet finns med. För att hamna högt upp på listan är det viktigt med relevant innehåll som kan ge det svar besökarna letar efter.

2. Sökord

Sökorden ska finnas med i rubriker, texter, bilder och länkar. Även fast Google prioriterar relevant innehåll före en överanvändning av sökord är det fortfarande viktigt. Ett tips är även att välja sökord med mindre konkurrens för att öka chanserna att rankas högre av sökmotorerna.

3. Metadata

Enkelt uttryckt så är innehållet det som står på sidan och metadata det som står om sidan. Även här bör sökorden finnas med och gärna specifikt i title, meta description, H1 och URL.

4. Bilder och filer

Sökorden ska också finnas med i namnet på de bilder, dokument och filer som finns på hemsidan. Detta är något som många kanske inte tänker på men är en detalj som kan göra stor skillnad för en effektiv sökoptimering.

5. Verktyg

Det finns även många bra verktyg som analyserar den effekt som sökoptimeringen ger. Exempel på verktyg är Google analytics som är ett gratis verktyg för webbanalys.

När detta är uppnått är det bara att vänta in resultatet. Att lägga tid på SEO lönar sig och gjort på rätt sätt kommer du garanterat att se resultat. Hoppas att denna SEO guide har gett dig mer förståelse vad SEO är och varför du ska använda det. Om du vill veta mer om våra tjänster och hur vi kan hjälpa dig med din digitala närvaro? Läs mer här.

6 favoritverktyg för att skapa prototyper inom UX-design

Av | tips, trender, ui-design, ux-design

Upptäck våra favoritverktyg för att skapa prototyper inom UX-design som ger ditt arbetsflöde en extra knuff i rätt riktning. 

Det finns många verktyg idag som hjälper dig att producera digitala produkter. Ett bra prototypverktyg kan hjälpa dig att göra digital produktion snabbare och effektivare, och i sin tur lättare att skapa en bra prototyp ger en överblick över din design, interaktioner och idéer. Här nedan listar vi våra 6 favoritverktyg.

Sketch

Sketch är ett vektorbaserat designverktyg som hjälper dig att skapa gränssnitt snabbt och intuitivt.

Balsamiq

Balsamiq är ett wire-frame verktyg som har skapats för att att man snabbt ska kunna skapa simpla prototyper för  användargränssnitt, webbplatser, skrivbord och mobila applikationer. Dra och släpp element – och Voilá!

Flinto

En solklar favorit främst för den välfungerade integrationen med Sketch. Flinto låter designers skapa interaktiva prototyper för både mobilen och webbläsaren.

Adobe XD

Adobe XD är en del av creative cloud och är Adobes egna lösning för att producera UI/UX-design. Den främsta fördelen med XD är integrationen med Adobes andra program, Illustrator, Photoshop och After Effects.

Axure

Detta världsledande kraftpaket är ett dra-och-släpp prototypverktyg som är utmärkt då man ska designa komplexa system. I jämförelse med andra verktyg så är det mycket mer avancerat vilket resulterar att man också har fler möjligheter.

Invision

Bland alla populära prototypverktyg finns också Invision, som också integreras sömlöst med Sketch. Den mest framträdande fördelen med Invision är dess samarbetsfunktioner, som tillåter alla användare att ge feedback, skriva anteckningar och se produktändringar i realtid.


Många projekt tog slut innan årskiftet och i januari drar dom nya projekten igång! Vad passar då bättre än att ladda på med ny inspiration för kommande sprints och designprojekt. Hur kommer året att se och vilka trender kan vi vänta oss 2019 inom UI/UX-design? Läs mer…

Trender inom UI/UX-design 2019

Av | strategi, tips, trender, ui-design, ux-design | Inga kommentarer

Året är nytt och kanske är du fortfarande lite ringrostig efter julledigheten. Januari är ett ypperligt tillfälle för reflektion och trendspaningar. Många projekt tog slut innan årskiftet och i januari drar dom nya projekten igång! Vad passar då bättre än att ladda på med ny inspiration för kommande sprints och designprojekt. Hur kommer året att se och vilka trender kan vi vänta oss 2019 inom UI/UX-design?

Nerdo Logo Animation nerdo motion motion design animation character 2d cel animation after effectsNerdo Logo Animation 

Rörelsedesign och animering av element

Tack vare nya webbläsarfunktioner är det nu enklare att lägga in rörliga element i de digitala gränssnitten. Det gör att vi förmodligen kan förvänta oss mer komplexa övergångar och rörliga sätt att förmedla information på år 2019. Mikroanimationer kommer också bli allt vanligare och används de rätt så kommer det att hjälpa användaren att skilja på element och funktioner.

Hur element rör sig och beter sig kommer att spela roll på ett helt annat sätt och genom rörelser kommer man att kunna spegla företaget och bygga vidare på varumärket. Förutom att färg, typsnitt och formspråk spelar roll i varumärkets profil så kommer man jobba mer med varumärkets “kroppsspråk”.

Financial Landing Page desktop gradient money credit card dashboard icon monster illustration bank financial landing pageFinancial Landing Page 

Överlappningar och gradienter

Vi älskar gradienter eftersom de lägger till realism och djup på plattformer och detta är något som vi kommer att få se mer av 2019! Att överlappa är en teknik som kan skapa ett mer strukturerat gränssnitt och detta kommer sannolikt också att bli ett populärt sätt att organisera färger, text och bilder.

Ashbry Music Festival event opera festival music branding vector ux ui typography illustration design site webAshbry Music Festival 

Typografi och berättande

Typografi är ett utmärkt verktyg för att bygga ditt varumärke och fånga användaren, kombinerar vi det med en bra berättelse = succé!

Fitness app chatbot ui ux gif animation interaction ux ui bot ai chat fitness ai mobile app iosFitness app chatbot ui ux 

AI växlar upp

2019 kommer AI-tekniken att forsätta förbättras och webbplatser och appar kommer på olika sätt att använda röstkommandon för en förbättrad upplevelse.


Har vi missat något?

Vi älskar att diskutera aktuella ämnen. Är det någon trend för det kommande året vi missat? Ser du något helt annat i spåkulan? Kommentera gärna här nedan!

Svårt att hitta tillbaka till jobbtänket efter julledigheten? Lugn, vi vet tre metoder för att komma igång igen. Vem vet, kanske kan 2019 bli jobbåret då du stressar mindre men ändå får mer gjort? Läs mer…