Designing en Web App UI Kit i Adobe Photoshop
Hva du skal lage
Stil guide drevet utvikling tilbyr et enormt fleksibel tilnærming til moderne web design. I denne opplæringen vil jeg gå gjennom å utforme en UI (brukergrensesnitt) kit, mens også forklare beslutninger som vil holde vår UI kit konsekvent og gjenbrukbare.
Instruksjons Eiendeler
I For å følge med dere trenger følgende (fritt tilgjengelig) eiendeler:
Åpne Sans font fra Font Squirrel eller Google Fonts
Arkivfoto fra Unsplash
Faces fra UI Faces
Arrow ikonet fra Iconfinder
Forbered Photoshop Document
Trinn 1
Åpne opp Photoshop og opprette et nytt dokument (Fil > New ...) med de innstillingene som er vist nedenfor. Du er fri til å bruke et lerret av hva dimensjonene du foretrekker -. Nettet er ikke fast bredde, tross alt
Trinn 2
La oss sette noen guider så vår UI kit er organisert og innrettet . Jeg har ikke alltid bruke et rutenett, men å sette noen begrensninger vil sikre ryddighet og konsistens. Gå til View > New Guide ... og sette noen retningslinjer. Jeg pleier å velge 1000px som et nettsted starter bredde så la oss holde våre UI kit disse målene
Merk:.
Retningslinjer brukes for denne opplæringen. Vertikal på 100px, 600px og 1100px
Tips: Du kan også bruke GuideGuide Photoshop plugin for å gjøre denne prosessen enda raskere
Trinn 3
Stikker til Photoshop etikette vi vil holde ting organisert og lett å navigere og redigere. . I et arbeidsmiljø trenger vi denne UI kit for å brukes mange ganger som et referansepunkt og utvikling eiendel, så du må holde den organisert (utviklere vil takke deg). La oss lage seks lag grupper navngitte Typografi, Knapper, skjemaer, avatarer, bilder og farger.
For å opprette grupper gå til lag > New > Group ... og gi hver enkelt en tittel som nevnt. For rask etablering av en gruppe bare klikk på ikonet.
Definere Typografi
Som Oliver Reichenstein famously uttalte "Web Design er 95% Typografi", så du trenger for å få det riktig. Først av alt må vi sette opp et perfekt miljø for vår type; en bakgrunn som er nøytral og lett på øyet. Bakgrunn og typografi trenger for å opprettholde et rimelig nivå kontrast å være lesbar. For denne opplæringen la oss bruke subtile lys grå - en nøytral farge, men sterk nok til å gi din app en personlighet. Jeg har satt forgrunnsfargen til # e9eeef og trykk på Alt + Backspace
for bakgrunnen.
Trinn 1
Åpne opp Typografi gruppen, plukke den Horizontal Type Tool (T) Hotell og velg Åpne Sans
skrift. Åpne Sans er en moderne skrifttype som kommer i mange forskjellige vekter og har en profesjonell, men innbydende utseende. Det er stilig nok for overskrifter, men også praktisk nok for kroppen kopi på nettet.
Åpne Sans har mange varianter, så for denne UI kit vil jeg bruke bare én skrift. Husk at du bør være forsiktig hvis du bruker mer enn to ulike fonter for dine prosjekter som ting kan bli rotete raskt.
Jeg har satt forgrunnsfargen til svart # 000000 deretter bruke Horizontal Type Tool (T) Hotell og den tidligere nevnte Åpne Sans
skrift med Lys
alternativ og 55 piksler størrelse kom inn i tittelen på avsnittet. Vi vil bruke samme stil og størrelse titler for fremtidige titler å holde konsistens.
Trinn 2
Nå må vi etablere et hierarki for vår typografi. Sjekk denne artikkelen Hvordan etablere en Modular Typografisk Scale av Ian Yates å bedre forstå vitenskap og betydningen av web typografi.
HTML
(Hypertext Markup Language) har mange forskjellige koder som hjelper nettlesere tolke innholdet på en side. Mange av disse kodene er spesielt brukt for web typografi som < h1 >, < h2 >, < h3 > og så videre. Disse beskrive overskrifter, < h1 > være den viktigste. Etter at det er en < p > tag brukes for avsnitt. Uten å gå i detalj hvor HTML er opptatt av vi skal definere utseende for disse elementene.
Ved hjelp av Horizontal Type Tool (T)
skriv tre overskrifter. Jeg har brukt Åpne Sans (Light)
x 55 piksler for h1, 44px for h2 og 32px for h3 forlater 30px gapet mellom dem. Avstanden er en annen viktig ting å huske på. La det være nok plass slik at typen er lett lesbar og ser balansert
Merk:.
Jeg har brukt Vanlig
vekt på h3. Som type blir mindre Lys
variant kan bli mindre leselige.
Trinn 3
Som vi har vår overskrifter sett la oss hoppe til det faktiske innholdet kopien. Vurdere alle mulige varianter av kopi og vise den i UI kit slik at utviklere kan gjennomføre det du har planlagt. Tenk på en overskrift stil inne i ledd, fet, kursiv og også koblinger.
For hoved kopi fargen jeg har plukket grå # 838383, for overskriften svart # 000000 og blå # 006ee3 for koblingen farge .
Overskriften vil bli merkbart mørkere enn hoved kopi, gir det større effekt. Hovedinnholdet fargen skal være avslappende og lett å lese. Til slutt, må du velge en annen farge for koblinger slik at brukerne forstår at de er klikkbare
Merk:.
Sett overskrift og link font til halvfet
vekt for å gjøre dem ser større og mer viktig.
Opprette Knapper
Knapper er svært viktig for webprosjekter. De er enkle linker eller sende inn skjemaer mesteparten av tiden, men de kan også tjene en oppfordring (CTA) funksjon av ledende folk gjennom siden, ta beslutninger raskere. Det er viktig å definere et konsekvent utseende til knappene slik at brukeren er kjent med dem gjennom hele programmet.
Trinn 1
Minimer Typografi gruppe ved å klikke på den lille pilen ved siden av gruppenavnet og åpne opp Knapper gruppen. Etter det skape noen nye vertikale retningslinjer for å dele innholdet vårt område i tre like områder med 35px mellomrom mellom. Gå til View > New Guide ... og juster følgende vertikale retningslinjer: 410px, 445px, 755px og 790px. Det er der vi vil plassere våre knapper slik at alle av dem er lik og konsekvent.
Trinn 2
Gå tilbake til Typografi gruppen, finne den delen tittelen lag og kopiere den ved å klikke < b> CMD + J
, og deretter flytte det til knappegruppe og endre det til «Knapper»
Etter det gå inn tre titler på knappen tilstander:. Normal, svever og Aktiv. Plassere disse til venstre for våre tre like deler, og tatt hensyn til 35px gap mellom første, andre og tredje områder.
Trinn 3
Nå satt forgrunnsfargen til tidligere brukte blå # 006ee3 og opprette en ny gruppe som heter Primær Normal. Deretter plukke opp en Avrundet rektangel Tool (U)
, sette Radius
å 3px og tegne en 310x44px størrelse avrundet rektangel form. Plasser den mellom de to første retningslinjene under "Normal" overskrift. Å sluttføre knappen skrive ned noen tekst på den ved hjelp av hvit farge #ffffff så det er tydelig lesbar.
Trinn 4
Nå duplisere Primary Button gruppen ved å klikke CMD + J
på gruppen og gi nytt navn til disse gruppene til Primær Hover og Primær Active. Etter det sted disse nye grupper under de to seksjonene vi har skapt overskrifter før.
Hva gjør hover Hotell og aktiv
mener, kan du spørre? Hover beskriver tilstanden på en knapp når du beveger musepekeren over den, så vi trenger å illustrere noen tilbakemeldinger fra knappen. En kobling blir aktiv når du klikker på den.
For styling hover og aktive stater av knapper vi skal rett og slett mørkere dem. Lag et nytt lag over knappen form og fylle den med svart # 000000. Etter det holder nede Alt Hotell og musen over lag til du ser en liten pil-ned-ikonet - slipper det å lage en Beskjærings Mask
. Endelig redusere lagets Opacity
til 10%
Merk:.
For den aktive staten knappen økning svart lag Opacity
til 20%.
Trinn 5
Nå duplisere alle tidligere knappegrupper og endre sine titler og farge til videregående. Vi kommer til å definere UI kit farger senere i denne opplæringen, for nå bare plukke en farge og erstatte den forrige blå. Jeg har brukt grønn # 36c265.
Designing Forms
Skjemaer er en svært viktig web app element som de tillater brukere å legge inn informasjon og samhandle med app. Vi vil være å designe noen grunnleggende former slik at utviklere kan holde seg til den samme stilen og holde utformingen konsekvent.
Trinn 1
Minimer Knapper gruppen og åpne opp Forms gruppen. Igjen duplisere seksjonen tittelen fra forrige gruppen og endre navnet til "Skjemaer". Vi skal lage noen grunnleggende formen innsatstyper, inkludert ordbok, passordfeltet, dropdown eller velg feltet og sende feltet (en enkel knapp).
Ved utforming former klarhet og fortrolighet er de viktigste faktorene. Ikke prøv å gjenoppfinne hjulet. Opprett en ny gruppe og kaller det navn. Deretter plukke en Horizontal Type Tool (T) Hotell og skriv en inngang feltetiketten, i mitt tilfelle er det "fornavn" med samme 18px størrelse svart # 000000 Åpne Sans (Regular) Anmeldelser font.
Nå duplisere en av de knapp formlag og flytte den inn i gruppenavnet. Etter det endre bakgrunnsfargen til hvit #ffffff og legge en 1px grå # d5d5d5 inne hjerneslag. Endelig, plasserer et eksempel på inngangs teksten i hvit avrundet rektangel. For mitt eksempel har jeg brukt 16px Åpne Sans (Regular) Hotell og den grå # 838383 som farge brukt tidligere for brødteksten.
Trinn 2
Lag litt mer inntastingsfelt med titler ved ganske enkelt å kopiere den første inntastingsfeltet. Tradisjonelt for passord feltbruk prikker • eller stjerne *. Et eksempel på flere felt er vist nedenfor.
Duplicate CMD + J
en av de knapp grupper, flytte det innenfor Forms gruppen og plassere den under den nylig opprettede input felt. Igjen er det viktig å være konsekvent og gjenbruke tidligere opprettede elementer.
Trinn 3
I denne opplæringen vi stikker til en svært grunnleggende brukergrensesnitt som kan tjene en veldig enkel web app. La oss nå lage en annen type input-feltet; < velge >.
Duplicate en av inngangsfeltgrupper og plassere den mellom tredje og fjerde vertikale retningslinjer, sørg for å justere alt. Endre verdien til hva du vil og legge en enkel pil-ikonet for å indikere at det er en dropdown-feltet. Du kan finne pilikoner på Iconfinder.
Trinn 4
For å gjøre utvikleren arbeidet lettere, igjen husk å ta en aktiv tilstand. Tenk på hvordan dropdown vil se ut når brukeren klikker på den? Det er en designer jobb å veilede utvikleren å skape en enhetlig og helhetlig opplevelse.
Dupliser nylig opprettet dropdown-gruppen. Bruke Direct Selection Tool (A)
klikker på en form hjørnet for å se kant poeng da, holder nede Shift
, velger de fire nederste punktene, og trykk på ned Anmeldelser et par ganger for å forlenge form. Denne teknikken holder formen vektor og holde hjørnene urørt.
Etter det rett og slett kopiere mulige valg og plassere noen under den første. Bruk en Linje Tool (U)
1px i Vekt
å lage enkle separatorer og til slutt endre pilen farge til den som brukes for knapper. Dette vil bidra til å indikere at feltet er aktiv.
Trinn 5
Vi skal nå lage en enkel feilmelding scenario, for eksempel hvis noen har lagt inn et passord som er for svak. < .no>
Duplicate CMD + J
den tidligere opprettet passordfeltet og legg den under rullegardin felt. Etter det, endre feltets grensen til en subtil rød (jeg brukte # eb8686) og bakgrunnen til en gråaktig rød # e9dde3. Endelig, plukke en sterkere rød # b63131 og skriv en enkel feilmelding.
Det er det med former! Jeg har dekket det grunnleggende, men det er nok til å komme i gang å utforme mer komplekse former.
Avatars
Avatarer er nesten standard i alle web app i disse dager, så det er praktisk å ha noen visuelle for enklere kommunikasjon og identifikasjon av brukere.
Trinn 1
Minimer unødvendige grupper og åpne opp avatarer gruppen. Plukk Ellipse Tool (U) Hotell og holde nede Shift
, tegne en 80x80px sirkel. Head over til uifaces.com og plukke et bilde. Kopiere den og lime over nylig opprettet sirkel. Hold nede Alt Hotell og musen over miniatyrbildet av bildet til du ser en liten pil, og slipp musa for å skape en Beskjærings Mask
.
Trinn 2
Det er viktig å tenke på hvordan avatarer vil bli brukt og inkluderer noen forskjellige størrelser for utviklere å bruke. For eksempel kan større avatar bilde brukes på profilsiden og små i kommentarfeltet.
Bare kopiere avatar og skalere det ned CMD + T
, holder nede Skift
nøkkelen for å beholde proporsjonene.
Images
Vi bør egentlig inneholde et eksempel på hvordan bildene skal vises i app vår. Jeg skal sette bare ett bilde inne i avrundet rektangel for å vise at bildene skal ha avrundede hjørner.
Trinn 1
Velg Avrundet rektangel Tool (U) Hotell og tegne et rektangel form mellom de vertikale retningslinjene under avatarer gruppen. Etter at plukke et bilde, jeg brukte en fra unsplash.com, endre størrelse om nødvendig med CMD + T Hotell og skape en Klipping Mask
.
Definere farger Anmeldelser
Til slutt vil vi dekke farger. En solid fargepalett er avgjørende, og du bør sjekke fargeteori for å bedre forstå betydningen og viktigheten av fargene du bruker. Vi velger å velge farger rett på slutten av prosessen fordi vi nå har en god idé av elementet vi trenger å style.
Trinn 1
Åpne opp Farger gruppen og velg en av fargene du har brukt for knappene som forgrunnsfarge. Etter det, ved hjelp av en Avrundet rektangel Tool (U)
tegne et rektangel. Deretter plukke en Horizontal Type Tool (T) Hotell og skrive ned tittelen på farge, eller hva det skal brukes til f.eks "Primary Color" og gi fargekoder i HEX, RGB eller et annet format som trengs. Opprett en ny gruppe, gi den et navn på farge og sett alle lagene i den.
Trinn 2
Nå bare duplikat CMD + J
fargegruppe og gjøre så mange fargeprøver som du trenger. Vanligvis er det best å holde seg til fire eller fem farger som flere farger kan gjøre ting ser rotete. Sjekk ut Kuler og COLOURlovers for fantastiske fargepaletter en inspirasjon.
For denne opplæringen som du ser har jeg brukt "Primary" og "sekundære" farger, en farge for brødtekst og en for overskrifter, også hvit for innspill bakgrunn. Disse er alle vist nedenfor.
Gratulerer du er ferdig!
Så det du har det. En enkel web app brukergrensesnitt stil guide. Jeg håper du har lært og forstått det grunnleggende for å skape en stil guide, hvorfor noen beslutninger ble gjort og hvordan de fordeler prosjektet.
Hvis du har spørsmål, eller har problemer, ikke nøl med å pinge meg i kommentarfeltet! Anmeldelser