Visual Screens

Vår egen digitala identitet — byggd för att visa hur strategi, form och teknik kan samspela i en tydlig upplevelse.

visualscreens.se

KUND: Visual Screens
UPPDRAG: Vår egen digitala närvaro
OMFATTNING: Visuell riktning · UX/UI · Webbutveckling
PLATTFORM: Next.js · Vercel

TANKEN BAKOMDESIGN & DIGITAL IDENTITET

Strategin bakom
en tydligare byrå.

Visual Screens arbetar med både design och utveckling. Vår egen webbplats behövde göra bredden begriplig och samtidigt visa den känsla för form och detaljer som vi tar med oss in i varje uppdrag.

UTGÅNGSPUNKTEN

En byrås hemsida ska visa vad byrån kan.

För den som letar efter en digital partner räcker det inte att se en lista med tjänster. Det behöver vara lätt att förstå vilka vi är, vad vi kan hjälpa till med och hur vårt arbete faktiskt ser ut. Därför fick projekten, vårt arbetssätt och vägen till kontakt bli grunden för sidans innehåll.

Vi ville också ge Visual Screens ett uttryck som känns personligt och går att känna igen. Stora rubriker ger sidan karaktär, medan kortare textstycken och en tydlig ordning hjälper besökaren vidare. Designen ska väcka nyfikenhet och samtidigt göra informationen lätt att ta till sig.

DEN VISUELLA IDENTITETEN

Från logga till
Varumärke

Loggan blev utgångspunkten för resten av identiteten. Dess kraftiga bokstäver och enkla ram återkommer i webbplatsens typografi, bildytor och bakgrundsdetaljer. Färg och form får på så sätt en gemensam grund genom hela sidan.

Färger med olika roller.

Svart ger identiteten en tydlig bas och låter projekten ta plats. Den brutna vita färgen skapar kontrast i loggan och typografin, medan isblått lyfter utvalda ord, länkar och detaljer. Tre färger med tydliga roller håller ihop uttrycket utan att konkurrera med kundernas egna varumärken.

Svart#090909

Vit#E8E8E8

Isblå#9DD9F3

Tyngd möter handstil.

Inter Tight knyter an till loggans tydliga formspråk. De stora, täta rubrikerna får ta plats, medan brödtexten har en lättare vikt och mer luft. Ephesis tillför en handskriven kontrast i utvalda ord och gör uttrycket lite mer personligt.

DIGITALInter Tight

Växer med erEphesis

Ramen som återkommande form.

Loggans ram följer med ut i designen som diskreta bakgrundselement. Projektbilderna presenteras i egna rundade ramar, och mjuka skuggor och små rörelser ger dem djup. Det skapar igenkänning utan att varje del av sidan behöver se likadan ut.

Grafiska element.

01Svart#090909

02Vit#E8E8E8

03Isblå#9DD9F3

DIGITALInter Tight

Växer med erEphesis

LEVERANSEN

En helhet som känns lika tydlig i varje del

Resultatet blev ett sammanhållet digitalt uttryck där färg, typografi, innehåll och rörelse arbetar tillsammans. Besökaren möter samma tydliga avsändare från första rubriken till formuläret.

Visuell riktning

En gemensam visuell grund där logga, färger och typografi hänger ihop. De kraftiga rubrikerna, handskrivna detaljerna och återkommande ramarna ger Visual Screens ett eget uttryck. Samma byggstenar kan användas i nya sidor och annat material, så att varumärket känns igen även när innehållet förändras.

Digital upplevelse

En responsiv webbplats som samlar projekt, tjänster och berättelsen om oss i ett tydligt flöde. Layout, textstorlekar och interaktioner är anpassade för både stora och små skärmar. Besökaren kan utforska vårt arbete och läsa vidare om det som är relevant, med samma visuella känsla genom hela upplevelsen.

Väg till kontakt

Kontaktvägen är en del av upplevelsen, från startsidan till de enskilda casen. Tydliga knappar öppnar ett gemensamt formulär där besökaren kan beskriva sitt projekt, välja flera tjänster och ange sina förutsättningar. Det gör det lättare att ta första steget och ger oss en bra grund för det första samtalet.