Health Tech · Dizaino sistema · Web dizainas · 2024

Logotipas buvo.
Visa kita — ne.

FitSkin sukūrė SkinScanner — dermatologo lygio odos analizę bet kuriame telefone. CNN, ELLE, Sephora. Produktas buvo. Vizualinės sistemos — ne.

Rolė
Dizaino sistema · Web dizainas
Įrankiai
Figma · Photoshop
Metai
2024
Tipas
Dizaino sistema + 6 puslapiai
Situacija
Prieš
✓Logotipas
✓Produktas (SkinScanner)
✗Spalvų sistema
✗Nuosekli tipografija
✗Vieninga vizualinė kalba
Kiekvienas puslapis atrodė kaip atskiras projektas. Potencialus B2B partneris nerado vizualinio patvirtinimo.
Po
✓Spalvų sistema
✓Tipografijos sistema
✓Komponentų biblioteka
✓6 dizaino puslapiai
✓Dizaino žinynas
Vieninga sistema per visus 6 puslapius. B2B partneris, atėjęs iš CNN ar ELLE, mato įmonę, kuria galima pasitikėti.
Vizualinė sistema

Šilta. Moksliška. Premium.

Spalvų balansas tarp medicininio švarumo ir grožio šilumos. Smėlio tonai signalizuoja premium, balta — švarumą, tamsi ruda — autoritetą.

Smėlio smiltys
#C9A882
Pagrindinis · premium
Gintarinė juoda
#1C130C
Tekstas · pagrindas
Vidutinė ruda
#8A6A47
Antrinis · muted
Kreminė balta
#F5EDE0
Fonas · šviesa
SkinScanner
Outfit 800Display
Prekės ženklo antraštės, hero blokai
Clinically validated. Beautifully simple.
Inter 400Body
Pagrindinis tekstas, B2B aprašymai
Svetainė

Dizaino sistema, kuri veikia 6 puslapiuose.

Kiekvieną komponentą iš Figma bibliotekos galima tiesiogiai naudoti puslapyje. Spalva, tipografija, tarpai — viskas nuoseklu.

Papildomi puslapiai

Nuo pagrindinio iki partnerių puslapio.

Sistema veikia vienodai tiek produkto aprašyme, tiek B2B pardavimų puslapyje — keičiasi tik turinys, kalba lieka ta pati.

Ką padariau

Sistema. Puslapiai. Biblioteka.

Šeši etapai — viena nuosekli dizaino sistema.

01
Spalvų sistema
Smėlio tonai + balta + tamsi ruda. Kiekviena spalva su naudojimo taisykle — jokios improvizacijos.
02
Tipografijos sistema
Outfit + Inter. Trys aiškūs lygiai. Sistema veikia tiek žiniasklaidos pakete, tiek B2B pardavimų pristatymuose.
03
Figma komponentų biblioteka
Mygtukai, kortelės, hero blokai, navigacija — visi su variantais, auto-layout ir šviesia/tamsia versija.
04
Pagrindinis puslapis
CRO struktūra: produktas — socialinis įrodymas — B2B — partneriai. Kiekviena sekcija veda link vieno veiksmo.
05
5 papildomi puslapiai
Produktas, apie mus, partneriai, karjera, kontaktai — visi iš tos pačios bibliotekos.
06
Dizaino žinynas
Kaip naudoti spalvas, šriftus, tarpus ir komponentus. Dokumentas, kurį naujas komandos narys perpranta per 10 minučių.
Gyvas projektas

Pamatyti gyvai

Galutinis rezultatas — svetainėje

fitskin.com ↗