UX-byrå för webbdesign och UI-design, från research till genomförande
Text
ASES är en designbyrå för UI/UX-design. Vi designar webbplatser, appar och programvara som dina kunder och ditt team hittar rätt i utan instruktioner. Därför börjar vi med frågan vad dina användare vill få gjort, och designar utifrån det struktur, klickbar prototyp och färdigt gränssnitt. Om du vill genomför vårt eget team också designen.
Få din webbplats eller app designad: så går det till
Välj var din webbplats eller app står i dag. Kartan visar ditt nästa steg och vad du har fått efter varje fas.
Du är här
Vi planerar en ny webbplats eller app
Ditt första steg
Vi reder ut med dig vem som ska använda din webbplats eller app och vad de människorna vill få gjort där. Utifrån det utformas sidor, flöden och design.
Det räcker för att börja
En kort beskrivning av ditt projekt och, om du har några, webbplatser som du gillar, med en mening om vad du gillar med dem.
Vår webbplats eller programvara ska bli enklare
Ditt första steg
Först undersöker vi vad som fungerar bra i dag och kan få vara kvar. Sedan ser vi var användarna fastnar, och gör om just de ställena.
Det räcker för att börja
Adressen till din webbplats eller ett testkonto till programvaran. Åtkomst till dina analysdata hjälper, om du vill dela den.
Vi vill göra vår webbplats tillgänglig
Ditt första steg
Webbplatskontrollen visar dig direkt, för en sida, den del som kan mätas automatiskt. Tangentbord, skärmläsare och förstoring kontrollerar vi dessutom för hand och bestämmer sedan med dig vilka mallar och byggstenar vi anpassar.
Det räcker för att börja
Adressen till din webbplats.
Vår profil ser olika ut överallt
Ditt första steg
Vi samlar in hur ditt företag framträder i dag: på webbplatsen, i presentationer och i trycksaker. Logotyp, färger och typsnitt tar vi fram i designfasen och prövar dem direkt på din webbplats.
Det räcker för att börja
Din nuvarande logotyp och några exempel på ditt material.
01 Första samtalet och mål
Vi
Vi ber dig förklara vad din webbplats eller app ska uppnå för ditt företag, och tittar på det som redan finns i dag: sidor, program och material.
Du
Du beskriver mål och användargrupper och visar oss exempel som du gillar.
I slutet
En tydlig bild av mål, användare och deras viktigaste uppgifter.
02 Omfattning och offert
Vi
Vi bestämmer vilka sidor och vyer som ska tas fram, vilka research- och teststeg projektet behöver, om ett designsystem ingår och om vi också genomför designen.
Du
Du sätter prioriteringarna och granskar offerten.
I slutet
En offert till fast pris med exakt beskriven omfattning.
03 Research och struktur
Vi
Vi analyserar befintliga data, till exempel analysdata och vanliga frågor till din kundtjänst, och pratar med människor ur din målgrupp. Sedan bestämmer vi sidstruktur och flöden som wireframes.
Du
Du ger oss åtkomst till dina data. Vem som hittar deltagarna till intervjuer och tester bestämmer vi tillsammans.
I slutet
En struktur av sidor och flöden som alla är överens om.
04 Prototyp, test och design
Vi
Varje gränssnitt provar du i en klickbar prototyp innan utvecklingen börjar. Vi testar den med människor ur din målgrupp, ändrar de ställen där de tvekar och designar sedan alla vyer för mobil och dator, tillgängliga.
Du
Du ger återkoppling på prototypen och fattar besluten om designen tillsammans med oss.
I slutet
Testade utkast till alla vyer.
05 Genomförande och överlämning
Vi
Vi genomför designen som webbplats, webbutik eller programvara, eller lämnar över den till ditt utvecklingsteam. Vid lanseringen utbildar vi ditt team. Efter lanseringen tar vi om du vill fortsatt hand om webbplatsen eller appen och förbättrar den.
Du
Du går igenom resultatet med oss före lanseringen.
I slutet
Ett gränssnitt som fungerar så som det testades i prototypen.
Vad ditt utvecklingsteam får och hur utkastet blir kod visar avsnittet längre ned. Från utkast till kod
UX-design bestämmer hur dina användare hittar information och slutför sina uppgifter. UI-design utformar gränssnittet som de ser och använder under tiden. Båda planerar vi tillsammans, för webbplats, webbutik och programvara. Ofta griper flera ämnen in i varandra, till exempel i en redesign som börjar med ett användartest och slutar med ett designsystem.
UX-research & användartester
UX-research & användartester
Förstå dina användares behov och pröva gränssnitt med användartester och prototyper.
UX-audit
Användarintervjuer
Användartest
Klickbar prototyp
Du får en lista över iakttagelserna, ordnade efter vikt och var och en med en åtgärd.
Vi börjar med det som redan finns: analysdata, frågor som försäljning och kundtjänst svarar på om och om igen, och ord som besökare söker efter på din webbplats. Sedan pratar vi med människor ur din målgrupp om deras erfarenheter och låter dem lösa typiska uppgifter i en klickbar prototyp. Där de tvekar eller ger upp ändrar vi utkastet. En befintlig webbplats eller programvara tittar vi kort på redan i det första samtalet; den utförliga granskningen, UX-auditen, är då projektets första fas.
Passar när du vill veta var besökarna hoppar av eller varför användarna ständigt frågar.
Webbdesign
Webbdesign
Webbplatser som leder besökarna till målet och fungerar i mobilen lika väl som på datorn.
Responsiv webbdesign
Företagswebbplats
Redesign
Du får utkast till alla sidmallar för mobil, surfplatta och dator.
Först reder vi ut vad besökarna ska göra på din webbplats: skicka en förfrågan, jämföra produkter, hitta en kontaktperson. Utifrån det utformas meny, startsida och varje sidmall. Responsiv webbdesign betyder hos oss att vi designar varje mall för mobil, surfplatta och dator. Vid en redesign behåller vi det som fungerar bra i dag och ändrar det som hindrar besökarna.
Passar när besökarna snabbare ska hitta det de söker, eller när en redesign står på tur.
UI-design för appar & mjukvara
UI-design för appar & mjukvara
Gränssnitt för appar och verksamhetsapplikationer som går att använda utan inlärning.
Dashboarddesign
Kundportal
Appdesign
Verksamhetsapplikation
Du får utkast till alla vyer och tillstånd, prövade i prototypen.
Vi designar kundportaler, dashboards, interna verksamhetsapplikationer och appar för iOS och Android. Varje vy visar var användaren befinner sig och vad som ska göras härnäst. Dessutom designar vi alla tillstånd för en vy: tom, under laddning, med fel och efter lyckat slutförande. I appar följer vi de interaktionsmönster som dina användare känner igen från iOS och Android.
Passar när ditt team eller dina kunder arbetar med applikationen varje dag.
Designsystem
AaAa
Designsystem
En gemensam samling färger, typsnitt och byggstenar, så att alla gränssnitt förblir enhetliga.
Design tokens
Komponentbibliotek
Stilguide
Figma-bibliotek
Du får ett bibliotek i Figma, om du vill med komponenterna i kod.
Färger, typsnitt och avstånd bestämmer vi som design tokens. Knappar, formulärfält och andra komponenter designar vi med alla tillstånd, plus regler för när vilken ska användas. Ändrar du en färg, ändras den i alla gränssnitt på en gång. Kontraster, fokus och minsta storlek för pekytor är fastlagda i systemet. För ett medelstort företag räcker ofta ett slimmat bibliotek som växer med din produkt.
Passar när flera webbplatser, appar eller team använder samma byggstenar.
Tillgänglighet & BFSG
Tab⏎
Tillgänglighet & BFSG
Webbplatser och appar som så många människor som möjligt kan använda utan hinder, enligt den tyska tillgänglighetslagen (BFSG) och WCAG.
Tillgänglig webbplats
Granskning av befintliga webbplatser
Information om tillgänglighet
Du får en webbplats som går att använda med tangentbord och skärmläsare.
För en ny webbplats planerar vi in kontraster, tangentbordsnavigering, etiketter för skärmläsare och begripliga formulär från första skissen. För en befintlig webbplats undersöker vi först var hindren finns och bestämmer med dig i vilken ordning vi åtgärdar dem. Vilka som berörs av BFSG och vad som ingår visar avsnittet längre ned.
Passar när du erbjuder konsumenter avtal online eller när din webbplats ska kunna användas av alla.
Grafisk profil
Grafisk profil
Logotyp, färger och typsnitt som gör ditt företag igenkännbart överallt.
Logotyp
Färger och typsnitt
Grafisk manual
Presentationer och trycksaker
Du får logotypfiler, färger, typsnitt, grafisk manual och mallar för presentationer.
Läs mer
Vi tar fram din logotyp från grunden, utvecklar färger, typsnitt och bildspråk och samlar i en grafisk manual hur de ska användas. Så använder även ditt team och andra leverantörer dem rätt. Presentationsmallar och trycksaker designar vi så att de passar ihop. Som byrå för grafisk profil som också designar webbplatser och appar prövar vi den nya profilen direkt på din webbplats och app. Har du redan en grafisk profil, för vi in den i designsystemet.
Passar när ditt företag ska framträda enhetligt på webbplatsen, i presentationer och i trycksaker.
Illustration, motion, 3D
Mer än gränssnitt: illustration, motion och 3D
Utöver webbplatser och appar designar vi bilderna, rörelserna och objekten som får ditt varumärke att synas.
Illustrationer och ikoner
Illustrationer och ikoner
Egna illustrationer och ikonuppsättningar i stil med din grafiska profil, för webbplats, app, presentationer och trycksaker.
Illustrator
Figma
Motion och animation
Motion och animation
Animationer för gränssnitt och logotyper och korta videor som presenterar ditt erbjudande. På webbplatser och i appar genomför vi dem med Lottie eller Rive, så att de laddas snabbt.
After Effects
Lottie
Rive
3D och mockups
3D och mockups
3D-visualiseringar och mockups som visar din produkt, din app eller din webbplats i användning.
Blender
Spline
Photoshop
En idé
En idé, många former
Webbplats, app, webbutik eller kampanj: vi ger din idé den form som når dina kunder.
Webbplats
Webbutik
Din idé
App
Kampanj
Exempel
Så tas en vy fram: ett exempel från kundportalen
Ett exempel: en tillverkares företagskunder ringer ofta för att fråga när deras leverans kommer. Så gör vi om orderöversikten i kundportalen, så att de själva hittar svaret.
Exempel · kundportal · orderöversikt
01 Förstå
Förstå
Det vi gör
Vi läser de vanligaste frågorna till kundtjänsten och ser i analysdata var kunderna lämnar portalen.
Det som tas fram
Kundernas viktigaste uppgifter och deras väg genom portalen, på en sida.
02 Skissa
Skissa
Det vi gör
Vi tar fram flera varianter av översikten och bestämmer med dig vilken vi går vidare med.
Det som tas fram
En wireframe av orderöversikten.
03 Testa
”Ta reda på när din beställning kommer fram.”Här tvekade testpersonerna.
Testa
Det vi gör
Testpersoner löser en uppgift i den klickbara prototypen: ”Ta reda på när din beställning kommer fram.” Där de tvekar ändrar vi utkastet och testar igen.
Det som tas fram
En lista över iakttagelser och en ändrad prototyp.
04 Designa
Designa
Det vi gör
Vi gör översikten färdig, med leveransdatumet längst fram, för mobil och dator, i ljust och mörkt läge och med alla tillstånd.
Det som tas fram
Designfiler, redo för genomförandet.
Överlämning
Från utkast till kod: designsystem och överlämning
Det som är utformat i Figma ska se likadant ut i koden och gå att använda på samma sätt som i prototypen. Därför arbetar design och utveckling i samma team hos oss, och färger, typsnitt och byggstenar har samma namn i Figma och i koden.
Utkast
accent
title
xl
4
focus
Kod
I koden har färger, typsnitt, avstånd och fokus samma namn som i utkastet.
Oavsett om det är en webbplats med WordPress, TYPO3 eller Webflow, en webbutik eller en app: vi bygger den av samma byggstenar som i utkastet. Under genomförandet visar en länk till förhandsvisningen det som redan är klart.
Ditt utvecklingsteam får designfilerna med alla tillstånd och skärmstorlekar och länken till prototypen. Om du vill levererar vi även komponenterna som kod, dokumenterade i Storybook.
Tillgänglighet
Tillgänglig webbplats enligt BFSG och WCAG: det här ingår
Tillgänglig betyder att människor kan använda din webbplats även med tangentbord, skärmläsare eller kraftig förstoring. Det har alla besökare nytta av, till exempel genom tydliga etiketter, begripliga felmeddelanden och väl läsbara kontraster.
FöretagE-postAnge en giltig e-postadress.Skicka
TabTab⏎
Det som krävs
Varje fält och varje knapp går att nå med tangentbordet, i en rimlig ordning, och fokus är alltid synligt.
Så kontrollerar vi
Vi går igenom varje mall utan mus, för formulär ända till inskickningen.
Det som krävs
Fält, knappar och bilder har namn som en skärmläsare läser upp. Felmeddelanden säger vad som ska göras.
Så kontrollerar vi
Formulär och flöden lyssnar vi igenom med en skärmläsare.
Det som krävs
Vid kraftig förstoring hamnar innehållet under varandra, och inget skärs av. Texten skiljer sig från bakgrunden med tillräcklig kontrast.
Så kontrollerar vi
Varje mall kontrollerar vi kraftigt förstorad och mäter kontrasterna för text och kontroller.
Vi designar och kontrollerar varje projekt enligt WCAG 2.2, nivå AA. Webbplatskontrollen mäter, för en sida, den del som kan kontrolleras automatiskt; det är ingen bedömning enligt BFSG.
Den tyska tillgänglighetslagen (BFSG) gäller framför allt webbplatser och appar där konsumenter ingår avtal online, till exempel i en webbutik eller vid en bokning. För sådana tjänster gäller den sedan den 28 juni 2025. Undantagna är mikroföretag med färre än tio anställda och högst 2 miljoner euro i årsomsättning eller balansomslutning, när de erbjuder tjänster. Rena informationssidor och webbutiker som enbart säljer till företag berörs i regel inte av lagen.
Webbutikberörs
Onlinebokningberörs
Informationssidaberörs i regel inte
Webbutik enbart för företagskunderberörs i regel inte
Vilken information lagen kräver
Hur din tjänst uppfyller tillgänglighetskraven
Den ansvariga marknadskontrollmyndigheten
Den som omfattas av BFSG publicerar den här informationen om tillgänglighet för sin tjänst. Vi förbereder den med dig.
Hinder åtgärdar vi i koden, i mallarna och komponenterna på din webbplats, så att varje sida har nytta av det. Ett overlay-plugin ändrar sidan först i besökarens webbläsare; koden på din webbplats förblir då oförändrad.
Kostnader
Vad kostar webbdesign? Vad priset beror på
Priset för ditt designprojekt vet du innan arbetet börjar. För design och genomförande betalar du ett fast pris per projekt, för support och vidareutveckling en fast månadsavgift.
Offert
Design och genomförande, engångskostnad
Projekt till fast pris
För research, design och om du vill genomförandet, fram till lanseringen.
Fast pris för den exakt beskrivna omfattningen
Ändras omfattningen, anpassar vi först offerten
Ingen fakturering per timme
Lansering
Efter lanseringen, per månad
Support och vidareutveckling
För tiden efter lanseringen, om du vill.
Fast månadsavgift för underhåll och support
Support per telefon dygnet runt
Nya sidor och funktioner per arbetspaket med egen offert
Vad omfattningen beror på
Hur många sidmallar och vyer som tas fram
Vilka research- och teststeg projektet behöver
Om ett designsystem tas fram eller ett befintligt byggs ut
Om logotyp, färger och typsnitt redan står fast
Hur tillgänglig en befintlig webbplats redan är
På hur många språk gränssnitt och innehåll visas
Om vi också genomför designen
Har du en budgetram, berätta om den i det första samtalet. Vi anpassar omfattningen efter den och planerar fler sidor till senare steg.
Kostnader efter lanseringen
Även efter lanseringen uppstår kostnader: för licenser för typsnitt, bilder och verktyg som Webflow, för hosting och för underhåll. De posterna står i din offert.
Det här äger du
Det här blir ditt
När allt är betalt lämnar vi över allt du behöver för att själv driva din webbplats eller app vidare eller låta ett annat team vidareutveckla den.
Design
Designfiler för alla gränssnitt som vi designar åt dig
Länk till den klickbara prototypen
Designsystem som bibliotek
Kod, när vi genomför
Källkoden som utvecklats för dig
Git-repo med hela ändringshistoriken
Teknisk dokumentation
Åtkomster
Servrar och hosting
Domäner
Konton för alla tjänster
Rättigheter
Nyttjanderätt
Licenser för typsnitt och bilder, konton i verktyg som Webflow och Figma-filerna ligger hos oss under projektet. När allt är betalt överför vi dem till dig.
Filer och kod lägger vi upp så att även ett nytt team hittar rätt i dem. Vem som tar hand om din webbplats eller app i framtiden bestämmer du.
Verktyg
Verktyg som vi designar med
Vi arbetar med de verktyg som passar uppgiften: Figma och Sketch för gränssnitt, Adobe Photoshop, Illustrator, InDesign och After Effects för bild, grafik och rörelse, Blender och Spline för 3D och i koden React, Storybook och Tailwind CSS.
Design och prototyper
Utkast, klickbara prototyper och bibliotek för designsystem.
Figma
Sketch
Framer
Bild och grafik
Bildredigering, illustrationer, ikoner och trycksaker.
Photoshop
Illustrator
InDesign
Motion och 3D
Animationer för gränssnitt och logotyper, 3D-visualiseringar och mockups.
After Effects
Lottie
Rive
Blender
Spline
Komponenter
Byggstenar i koden, dokumenterade för ditt utvecklingsteam.
Storybook
React
Tailwind CSS
Webbplatser
Webbplatser vars innehåll ditt team själv redigerar.
Webflow
WordPress
TYPO3
Research och analys
Hur besökarna använder din webbplats och var de hoppar av.
Matomo
Google Analytics
Hotjar
Kontrollera tillgänglighet
Automatisk kontroll av kontraster, etiketter och struktur, kompletterad med vår kontroll för hand.
Svar om kostnader, arbetsgång, användartester, designfiler och tillgänglighet.
Vad kostar webbdesign eller ett UX-projekt?
Det beror på omfattningen: på antalet sidmallar och vyer, research- och teststegen, ett designsystem, läget för din grafiska profil, språken och på om vi också genomför designen. Så snart omfattningen står fast får du en offert till fast pris. Support fakturerar vi månadsvis, nya arbeten per arbetspaket. Vi fakturerar inte per timme.
Hur lång tid tar ett designprojekt?
Tiden beror på omfattningen, på testrundorna och på hur snabbt texter, bilder och beslut finns på plats. Vårt eget team kommer snabbt i gång. Har du ett fast datum, till exempel en mässa eller en planerad nylansering, berätta om det i det första samtalet. Vi planerar omfattningen efter det.
Vad gör en UX-byrå, och när lönar den sig för oss?
En UX-designbyrå tar reda på vad dina användare vill få gjort och var de fastnar på vägen. Den provar gränssnitt i en prototyp innan något utvecklas, och gör dem sedan färdiga. Det lönar sig när du planerar en ny webbplats eller app, när besökare hoppar av eller när en nylansering står på tur.
Vad är UX-design, vad är UI-design, och vad är skillnaden?
UX står för user experience, på svenska användarupplevelse. UX-design bestämmer om och hur lätt användarna når sitt mål: struktur, flöden och begrepp. UI står för user interface, användargränssnittet. UI-design utformar det som användarna ser och använder: layout, färger, typsnitt, knappar och deras tillstånd. Vi planerar båda tillsammans.
Hur testar ni om våra användare klarar sig med designen?
Människor ur din målgrupp löser typiska uppgifter i den klickbara prototypen, till exempel att hitta en beställning eller fylla i ett formulär. Vem som hittar deltagarna bestämmer vi med dig för varje projekt. Vi iakttar var de tvekar eller tar fel väg, ändrar utkastet och testar igen. I slutet får du en lista över iakttagelserna, ordnade efter vikt och var och en med en åtgärd.
Vad får vi i slutet: Figma-filer, prototyp, designsystem?
När allt är betalt får du designfilerna för alla gränssnitt i Figma, länken till prototypen, designsystemet som bibliotek och nyttjanderätten. Genomför vi också designen, tillkommer källkoden som utvecklats för dig med Git-repo, den tekniska dokumentationen och alla åtkomster.
Genomför ni också designen, och vem tar hand om den sedan?
Ja. Samma team utvecklar din webbplats med WordPress, TYPO3 eller Webflow, din webbutik, din app eller din programvara. Har ditt företag egna utvecklare, lämnar vi över designen till dem med alla tillstånd och skärmstorlekar. En design från ett annat team genomför vi också. Efter lanseringen tar vi om du vill fortsatt hand om webbplatsen eller appen, med uppdateringar, övervakning och vidareutveckling.
Kan ni göra om vår webbplats utan att bygga den helt på nytt?
Ja. Först slår vi fast vad som fungerar bra i dag och kan få vara kvar. Med dina analysdata ser vi var besökarna fastnar; webbplatskontrollen visar hur snabbt en sida laddas och vilka hinder som kan hittas automatiskt. De mallarna och sidorna förbättrar vi i det befintliga systemet. Passar struktur eller system inte längre ditt företag, planerar vi en nylansering med dig.
När lönar sig ett designsystem?
Så snart flera webbplatser, appar eller team använder samma byggstenar, din produkt fortsätter att växa eller din profil börjar spreta på olika ställen. För en enskild mindre webbplats räcker en slimmad stilguide och ett litet komponentbibliotek. Vi gör systemet så stort som det behöver vara och bygger ut det i takt med din produkt.
Måste vår webbplats vara tillgänglig?
Ingår konsumenter avtal online via din webbplats, till exempel i en webbutik eller vid en bokning, berörs du i regel av BFSG sedan den 28 juni 2025. Mikroföretag som erbjuder tjänster är undantagna. Rena informationssidor och webbutiker enbart för företagskunder berörs oftast inte av lagen. Vi designar varje projekt tillgängligt enligt WCAG 2.2, nivå AA, även om lagen inte berör dig.
Behöver vi först en grafisk profil?
Inte nödvändigtvis. Står logotyp, färger och typsnitt fast, för vi in dem i designsystemet och designar webbplats och app med dem. Saknas de eller ser din profil olika ut överallt, tar vi först fram den grafiska profilen och prövar den direkt på de första vyerna.
Vad behöver ni från oss för att vi ska kunna börja?
En brief eller kravspecifikation behöver du inte. Beskriv kort ditt mål och dina användare. Till hjälp är adressen till din webbplats, exempel som du gillar, med en mening om vad du gillar med dem, och befintliga logotyper, typsnitt eller en stilguide. Dela gärna också åtkomsten till dina analysdata, om du vill.
Berätta vem som använder din webbplats eller app och vad som ska bli enklare där. Vi hör av oss så snart som möjligt och bokar en tid för det första samtalet med dig.