Innhold
- Wireframing in Sketch
- 01. Bygg komponentene i Sketch
- 02. Bruk et rutenett og guider
- 03. Lag symboler i Skisse
- Forbedre Sketch-prototypene dine
- 04. Legg til animasjoner i Sketch
- 05. Flagg startsiden din
- Samarbeid i Sketch
- 06. Bruk Sketch Cloud
- 07. Prototyper i Sketch Cloud
- 08. Aktiver kommentarer i Sketch Cloud
- 09. Viktige snarveier i Sketch Cloud
- Bygg et designsystem i Sketch
- 10. Hold orden
- Lag et sidedesign
- 12. Lag et sterkt visuelt hierarki
- 13. Bruk farger fornuftig
- 14. Bruk typografi effektivt
- 15. Bruk ikoner for å legge til kontekst
- 16. Design knapper og innganger
- 17. Komplekse komponenter og seksjoner
Idé- og wireframing-fasen i ethvert design gjør at du kan vurdere utformingen og brukeropplevelsen helt fra starten av prosjektet. Ved å bare bruke kjernekomponentene for webdesignet ditt - topptekst, bunntekst, navigering, knapper - til å begynne med, kan du alltid sørge for at fokuset ditt er på brukeren, uten å bli distrahert av hvilken fargepalett du skal bruke.
Det er mange wireframing-verktøy der ute, men i dag bruker mange web-team Sketch. Dens brukervennlighet og uovertruffen hastighet gjør det til det opplagte valget.
Fra og med toppteksten, hva trenger vi hvis vi nærmer oss dette prosjektet mobile først? Er logoen hovedfokus? Bør vi vurdere å bruke en 'burger' -navigasjon for å sikre beste praksis? Dette er spørsmålene enhver designer bør fortsette å stille seg selv gjennom hele prosessen når de bygger sine trådrammekomponenter og oppretter et sidedesign, og her kan du løse disse spørsmålene og mer ved hjelp av Sketch. Vil du ha forskjellige verktøy for bygging av nettsteder? Vurder å bruke en nettstedbygger eller veie opp alternativene for webhotell.
Klikk på ikonet øverst til høyre på hvert bilde for å forstørre det
Wireframing in Sketch
01. Bygg komponentene i Sketch
De første trinnene bør være å lage et tegnebrett for mobil eller desktop, og begynne å bygge komponentene på siden med enkle former, for å definere omrisset av komponentene, som overskriften.
For mange farger kan være forstyrrende, så minimer fargepaletten din for å tydelig definere viktige elementer i trådrammene dine. Å fremheve de viktige tingene (oppfordringsknapper, topptekst) med dristigere farger er en subtil, men effektiv måte å skape et visuelt hierarki når du deler designene med kolleger og klienter (del det enkelt med anstendig skylagring).
For eksempel vil du sette inn en logo og navigering i en fet blå farge på en pastellblå bakgrunn i overskriften, som de viktige elementene i komponenten din.
Det er også verdt å merke seg at det er mulig å oppdatere koblingsfargene i Sketch-innstillingene dine, bare i tilfelle det oppstår et fargekollisjon i et design med standard oransje.
02. Bruk et rutenett og guider
Det er også viktig å vurdere et rutenett, polstring og marginer så snart som mulig når du definerer trådrammene. Vis linjaler i en skissefil ved å gå til Vis> Lerret> Vis linjaler (eller ctrl+R). Ved å klikke på disse linjaler (ned til venstre og over tegnebrettet) vil du lage guider, som igjen sparer mye stress når du deler design, da konsistens er nøkkelen når du definerer et designsystem.
03. Lag symboler i Skisse
Planlegger du å bruke disse komponentene i mer enn ett tegnebrett? Hvorfor ikke lage et symbol? Symboler er den beste funksjonen i Sketch, de fungerer som superkomponenter som oppdaterer alle tegnebrettene de for øyeblikket sitter i. For å lage en komponent, høyreklikk på et element og velg Create symbol. Dette lagres i en pakket vare som kan håndteres fra symbolsiden.
Forbedre Sketch-prototypene dine
04. Legg til animasjoner i Sketch
Under målområdet på høyre panel er det muligheten til å legge til animasjoner mellom tegnebrettene dine. Å bruke animasjoner er en fin måte å gi mer liv til prototypen din. Imidlertid er de nåværende alternativene mer skreddersydd mot app-prototyper, og gir ikke mye fleksibilitet hvis de demonstrerer et webstedsdesign. Når det er sagt, forventes det at listen vil vokse i fremtidige oppdateringer av Sketch med alternativer som fadingoverganger, for eksempel.
05. Flagg startsiden din
Når du forhåndsviser en prototype, er flaggikonet som sitter i toppteksten til popupen ved siden av rullegardinmenyen, en fin måte å indikere hvilken av tegnebrettene som er hjemmesiden. Hver gang prototypen er åpnet, vil dette tegnebrettet være den første siden. Dette vil også angi hjemmesiden når prototypen deles i skyen.
Samarbeid i Sketch
06. Bruk Sketch Cloud
Sketchs siste skyfunksjon er et online utstillingsvindu med alle sider og tegnebrett på ett sted. Alle kan registrere seg for å bruke Sketch Cloud for å se, laste ned og kommentere Sketch-filer, som har blitt delt offentlig eller privat direkte fra Sketch.
Sider fungerer som seksjoner på din Sketch Cloud-lenke og vises i rekkefølge etter strukturen i Sketch (fra topp til bunn). Tegnebrett på disse sidene gjør det samme, så sørg for at strukturen er riktig (for tavler, bestill fra venstre til høyre) for å vise design i en bestemt rekkefølge. Dette er også en flott plattform for å utføre brukertesting når du har delt skyelinken din.
Når prototypen er fullført, klikker du på Cloud-ikonet, registrerer deg med en konto og laster opp designene til skyen. Fra dette tidspunktet og fremover vil lenken være den samme, så eventuelle fremtidige endringer som legges til prosjektet, vil lastes opp når du klikker på skyikonet og velger Oppdater i delings-popupen. Dashbordet på skyen er selvforklarende med prototyper, tegnebrett og symboler tilgjengelig for visning i rekkefølge.
07. Prototyper i Sketch Cloud
Hvis du så prototypen din i Sketch-filen din tidligere, og flagget en av sidene dine som startsiden, oppretter Sketch Cloud en ny seksjon med denne prototypen klar til bruk.
Ser du ikke en prototype? Bare gå tilbake til Sketch-filen, marker tegnebrettet du vil skal være startsiden, klikk Forhåndsvisning slik at du ser popupen, og klikk til slutt på flaggikonet. Når du skyver til neste sky, venter denne prototypen på deg.
08. Aktiver kommentarer i Sketch Cloud
Alle brukere med tilgang kan legge igjen kommentarer på hvert tegnebrett, slik at all tilbakemelding kan holdes på ett sted, så det er ikke lenger behov for den langvarige e-postmeldingen. Hvis du ønsker å få tilbakemelding på din prototype eller design, eller ønsker å dele prototypen på en offentlig lenke, klikk på tannhjulikonet øverst til høyre på skyinstrumentet. Her kan du aktivere kommentarer (som vises når du ser på et design ved å klikke på ikonet nederst til høyre), og opprette en offentlig lenke for designene dine for deling.
Du kan holde designene private og gi tilgang via e-post til noen heldige. Hvis du vil dele en direkte lenke til prototypen din uten at brukeren trenger å navigere i Sketch-skyen, vil du legge til "spill" eller ta tak i URL-en i prototypemodus og aktivere en offentlig delingskobling. For eksempel: sketch.cloud/s/1abc2/all/website/home/
09. Viktige snarveier i Sketch Cloud
Skyv de siste endringene til skyen ved å velge dette ikonet - nettleseren din åpner lenken når den er fullført.
Opphev Sketch-sky-lenken din ved å bare velge siden du vil vise i rullegardinmenyen øverst til venstre, og del URL-en herfra i stedet.
I popup-vinduet i innstillingspanelet merker du av for 'Bruk som bibliotek' for å fortelle teamet ditt automatisk at det har skjedd en endring.
Flagg åpningsbordet ditt i forhåndsvisningsmodus før du skyver til skyen for å få det til å vises først på Sketch Cloud-lenken.
Bygg et designsystem i Sketch
10. Hold orden
Hold merkevarefargene ordnet i dokumentpaletten ved å velge fargen og klikke på '+' -ikonet.
Hold favorittsymbolene dine organisert i flere tilstander ved å bruke skråstreker når du navngir symbolene, for eksempel ved å navngi symbolene dine 'Button / Active' og 'Button / Disabled' vil gruppere symbolene dine under samme kategori.
Lag en designsystemside ved å skille alle elementene dine som definerer merkevaren din til sin egen side i Sketch. Dette er en enkel måte å vise alle hvor de kan hente eiendelene.
Du kan overskrive innholdet i symbolene dine, for eksempel tekst i knappen din (se ovenfor), slik at du ikke trenger å bekymre deg for å lage nye elementer hvis det bare er en liten endring.
Lag et sidedesign
12. Lag et sterkt visuelt hierarki
Et sterkt visuelt hierarki sikrer klarhet i ethvert brukersentrert design. For å komme i gang må du først designe de mest universelle komponentene - for eksempel farge og typografi - og deretter arbeide ned til mindre komponenter som knapper og inngangskomponenter.
For å sette inn omtrent hva som helst i designet ditt, svev over til Sett inn-fanen øverst i Sketch UI, klikk og start deretter å importere elementer til tegnebrettene dine. Husk trådrammen og designsystemet ditt for å sikre konsistens i arbeidet ditt.
13. Bruk farger fornuftig
Farge er uten tvil det viktigste elementet i enhver design-arbeidsflyt. Med farge kan vi stille inn det generelle utseendet, følelsen og tonen til et design, så sørg alltid for at du bruker det i samsvar med viktigheten av elementene de er tildelt.
Prøv å gruppere fargene dine slik:
- Primære farger: hovedmerkefargene, brukt til å lage det grunnleggende fargevalget for et prosjekt og viktige elementer som knapper.
- Sekundære farger: disse følger med primærfargene, og kompromitterer forskjellige nyanser, graderinger og fargetoner fra primærfargene.
- Tertiære farger: en viktig gruppe som viser systemmeldinger, for eksempel varsler, advarsler og varsler.
For å gjøre fargene dine så effektive som mulig, lager du hver farge som et symbol i Sketch-filen for å sikre at endringer oppdaterer elementene på tvers av designet ditt.
14. Bruk typografi effektivt
Det er viktig å utforme stilen og størrelsen på alle overskriftene (H1, H2, H3 og så videre) og avsnitt for å skape et visuelt hierarki. Vanligvis har typografi ikke mange stilistiske variasjoner, for eksempel farge eller vekt, så bør du vurdere å bruke fargene dine effektivt for å presentere merkevarens personlighet.
Når du er fornøyd, definerer du tekststiler i høyre panel ved å klikke på rullegardinmenyen "ingen tekststil" og velge "ny tekststil", når du er lagret, kan du bruke denne typografiske stilen i hele designet, som symboler.
15. Bruk ikoner for å legge til kontekst
Når de brukes effektivt, legger ikoner sammenheng til mer komplekse komponenter som knapper, etiketter eller tabeller. Ikoner i designet ditt kan være funksjonelt ved å oppmuntre brukere til å samhandle - ved å bruke en 'X' i en knapp for å betegne en Fjern-handling, for eksempel.
Vurder å lage et sett med UI-ikoner som nestede skissesymboler for å hjelpe til med å utfylle andre UI-elementer i designrammeverket, - for eksempel piler - som kan brukes i glidebrytere, forrige og neste knapp og paginering.
16. Design knapper og innganger
Når du designer knapper og innganger, må du sørge for å designe deres individuelle ‘tilstander’. Hver har flere tilstander og gir brukerne visuell tilbakemelding for å indikere gjeldende tilstand (for eksempel sveve, klikket). Det er god praksis å opprette hver stat som et eget symbol, siden dette gir fleksibilitet.
17. Komplekse komponenter og seksjoner
På dette stadiet kan designet betraktes som komplett, siden det har alt som trengs for å skape et fungerende produkt. Det er imidlertid verdt å bruke mer tid på å lage komponenter for UI-rammeverket, for eksempel kort, bord og skjemaer. Disse kan deretter kombineres for å utvikle seksjoner, og forme blokkene som våre nettsteder og applikasjoner er avhengige av, for eksempel overskrifter, navigasjoner og bannere.
Denne artikkelen dukket opprinnelig opp i utgave 277 av Web Designer. Kjøp utgave 277 her eller abonnere.
