Produktdesign & UI/UX

Figma och visuell design

Tydliga, konsekventa gränssnitt för webb och mobil, designade i Figma. Varje nyckelskärm, tillstånd och brytpunkt täcks, i filer som dina utvecklare kan bygga från.

Diskutera ditt projektDiskutera din UI-design

Vem behöver slutgiltig UI-design

Era flöden är överenskomna, men skärmarna ser ofärdiga eller omaka ut, och varje utvecklare fyller de visuella luckorna på sitt eget sätt. Visuell design ger varje nyckelskärm ett slutgiltigt, varumärkesanpassat utseende som ert team kan bygga utifrån.

  • Grundare med godkända wireframes eller en prototyp som behöver slutgiltiga skärmar före utveckling
  • Team som återlanserar en föråldrad SaaS-produkt eller dashboard utan att bygga om dess flöden
  • Utvecklarteam, interna eller byrå, som behöver kompletta Figma-filer att bygga utifrån

Visuell design som tjänar användbarhet och ditt varumärke

Attraktiva skärmar räcker inte om användarna inte kan läsa dem, hitta nästa steg eller återhämta sig från ett fel. Våra designers skapar högupplösta gränssnitt i Figma för webbplatser, SaaS-produkter, dashboards och mobilappar, och tillämpar ditt varumärke med konsekvent typografi, färg, mellanrum och komponenter. Varje nyckelskärm levereras med sina tillstånd, brytpunkter och de anteckningar utvecklare behöver. Du kan anlita oss för enbart visuell design; utveckling och hosting omfångsbestäms separat.

AI-assisterad utforskning, visuell design som ägs av designers

Hur AI hjälper till

  • Utforskar visuella riktningar och layoutalternativ inom ditt varumärke, så att fler idéer jämförs tidigt.
  • Genererar variationer för täta skärmar som dashboards, tabeller och formulär, för designers att förfina.
  • Skissar realistiskt exempelinnehåll, så att skärmar granskas med trovärdig text och data.
  • Flaggar inkonsekvenser i Figma-filer, som färger utanför paletten, frånkopplade komponenter och saknade tillstånd.

Vad våra experter ansvarar för

  • Designers sätter den visuella riktningen, hierarkin och varumärkespassningen, och godkänner varje skärm.
  • Designers kontrollerar tillgänglighet: färgkontrast, textstorlek, fokustillstånd, tryckytor och etiketter.
  • Visuell konsekvens upprätthålls genom delade komponenter, variabler och dokumenterade användningsregler.
  • Nyckelskärmar valideras med ditt team, och med riktiga användare där det behövs, före överlämning.

Vilka tillstånd varje nyckelskärm får

Illustrativ tillståndstäckning för en SaaS-webbapp; er avtalas skärm för skärm.

StandardLaddarTomFelLyckades
Registrering och inloggningDesignad specifikt för denna skärmDelat mönster, anpassat med anteckningarBehövs inte på denna skärmDesignad specifikt för denna skärmDesignad specifikt för denna skärm
Dashboard-översiktDesignad specifikt för denna skärmDesignad specifikt för denna skärmDesignad specifikt för denna skärmDelat mönster, anpassat med anteckningarBehövs inte på denna skärm
Datatabell med filterDesignad specifikt för denna skärmDelat mönster, anpassat med anteckningarDesignad specifikt för denna skärmDelat mönster, anpassat med anteckningarDelat mönster, anpassat med anteckningar
Fakturering och planändringarDesignad specifikt för denna skärmDesignad specifikt för denna skärmDelat mönster, anpassat med anteckningarDesignad specifikt för denna skärmDesignad specifikt för denna skärm
AviseringspanelDesignad specifikt för denna skärmDelat mönster, anpassat med anteckningarDesignad specifikt för denna skärmDelat mönster, anpassat med anteckningarBehövs inte på denna skärm
  • Designad specifikt för denna skärm
  • Delat mönster, anpassat med anteckningar
  • Behövs inte på denna skärm

Så här designar vi ert gränssnitt

  1. 01

    Riktning

    Vi granskar ert varumärke, er produkt och era användare, utforskar visuella riktningar med AI-assisterade variationer och enas om en tillsammans med er.

  2. 02

    Grunder

    Färg, typografi, avstånd och kärnkomponenter uppsatta som Figma-variabler och komponenter, grunden för varje skärm.

  3. 03

    Skärmar och tillstånd

    Designers skapar varje nyckelskärm med dess tillstånd och brytpunkter och kontrollerar kontrast, hierarki och konsekvens efter hand.

  4. 04

    Överlämning och design-QA

    Specifikationer, resurser och anteckningar för utvecklare, en genomgång med ert team och en granskning av bygget mot designen.

Två sätt att arbeta med AI-verktyg

AI hjälper till att syntetisera tillåten forskning och utforska designer. Välj var den får bearbeta er forskning och era filer.

Osäker? Vi rekommenderar ett under avgränsningen. Jämför AI-leveransalternativ

Vad du får

UI-designleverabler i Figma

  • Högupplösta skärmar

    Slutgiltigt UI för varje nyckelskärm, inklusive tomma tillstånd samt laddnings-, fel- och framgångstillstånd, så att utvecklare inte lämnas att gissa.

  • Responsiva layouter

    Brytpunkter för desktop, surfplatta och mobil designade tillsammans, med regler för hur layouter anpassar sig däremellan.

  • Ljusa och mörka teman

    Mörkt läge designat som ett eget tema, med kontrast kontrollerad i båda teman snarare än framställt genom att invertera färger.

  • Varumärke tillämpat på produkten

    Dina varumärkesriktlinjer utökade för digital användning: färgroller, typografiskala, ikonografi, bildspråk och diagramstilar.

  • Organiserade Figma-filer

    Auto layout, komponenter, varianter och variabler korrekt uppsatta, med tydlig namngivning så att ditt team kan underhålla filerna.

  • Överlämning till utvecklare

    Specifikationer, exporterade tillgångar, tillgänglighetsanteckningar och implementeringsvägledning, genomgångna med dina utvecklare.

Typiska förfrågningar om visuell design

Typiska scenarier vi omfattar, inte kundfallstudier.

  • Godkända wireframes, inget slutgiltigt gränssnitt

    Lågupplösta wireframes är godkända, och utvecklare vill ha slutgiltiga skärmar innan de börjar. Vi enas om en visuell riktning, designar de första skärmarna de ska bygga och utökar sedan samma utseende över resten av produkten.

  • En dashboard som är svår att överblicka

    En SaaS-dashboard trycker in tabeller, diagram och statusmärken i varje skärm, och användarna kämpar för att hitta det som är viktigt. Vi sätter en tydlig visuell hierarki, en diagrampalett kontrollerad för färgblindhet och tabellstilar som är lätta att överblicka.

  • En ommärkning som stannade vid webbplatsen

    Webbplatsen har ett nytt varumärke, men produkten ser fortfarande ut som sin första version, så att registrera sig känns som att byta företag. Vi för in de nya färgerna, typografin och bilderna i appen, anpassade där täta skärmar behöver mer kontrast.

Vad visuell design inte täcker

  • Flöden och wireframes kommer först: ta med era egna, eller börja med Wireframing & Prototyping om användarresor och skärmstruktur ännu inte är överenskomna.
  • Rörelse, övergångar och gestbeteende specificeras i Interaction Design; här designas varje tillstånd som en statisk skärm med anteckningar.
  • Ett tokensystem, kodade komponenter och bidragsregler som delas av flera team eller produkter är Design Systems-arbete; här betjänar Figma-komponenter och variabler denna produkts skärmar.
  • Logotypdesign, namngivning och varumärkesstrategi ingår inte. Utan varumärkesriktlinjer enas vi om en visuell stil för produkten, inte en komplett varumärkesidentitet.

Hur visuell design förs vidare in i bygge, QA och lansering

  • Ingenjörer involverade tidigt

    Designers granskar genomförbarheten tillsammans med ingenjörer före överlämning och svarar på frågor under implementeringen, oavsett om våra utvecklare bygger det eller era.

  • Design-QA på den verkliga bygget

    Vi jämför den byggda produkten med designen och täcker avstånd, typografi, tillstånd och brytpunkter, så att skillnader åtgärdas före lansering.

  • Tillgänglighet kontrollerad två gånger

    Kontrast, fokustillstånd och textstorlek kontrolleras i Figma, och sedan igen med QA i webbläsaren med tangentbord och skärmläsare.

  • Utrymme att växa efter lansering

    Nya skärmar återanvänder samma komponenter och regler, och feedback från verklig användning vägleder nästa omgång av visuella förfiningar.

FAQ

Vanliga frågor

Genereras era designer av AI?

Nej. AI hjälper oss att utforska riktningar, ta fram variationer och förbereda exempelinnehåll snabbare, men designers fattar de visuella besluten, kontrollerar tillgänglighet och konsekvens och godkänner varje skärm. AI-genererade bilder används endast om ni godkänner dem för ert varumärke.

Kan ni designa för en produkt som våra egna utvecklare ska bygga?

Ja. Visuell design kan vara ett fristående uppdrag; utveckling och hosting ingår inte om ni inte lägger till dem. Era utvecklare får organiserade Figma-filer, specifikationer och implementeringsanteckningar, och vi kan granska deras bygge mot designen om ni inkluderar design-QA.

Designar ni om befintliga produkter?

Ja. Vi kan förnya det visuella lagret gradvis eller designa om viktiga användarresor, samtidigt som vi behåller tillräcklig igenkänning för nuvarande användare. Analysdata och supportfeedback ni delar hjälper oss att avgöra vad vi ska ändra först, och vi arbetar inom era befintliga varumärkesriktlinjer.

Vad ingår i överlämningen?

Tillgång till Figma-filerna, komponenter och variabler, specifikationer och mått, exporterade resurser, anteckningar om interaktionstillstånd och tillgänglighet samt en genomgång med era utvecklare. Stöd under implementeringen avtalas i omfattningen.

Få ett gränssnitt som ert team kan bygga

Berätta om er produkt och ert varumärke. Vi föreslår en omfattning för de skärmar och tillstånd ni behöver, oavsett vem som bygger dem.

Diskutera ditt projektDiskutera er design