Accentsconagua
Share
Hva du skal skapeI denne opplæringen tar jeg deg gjennom designprosessen min for å skape en responsiv design i Sketch. For å holde ting i orden, snakker jeg om en responsiv destinasjonsside jeg laget for en reiseprogram en stund tilbake. La oss komme rett inn i det!
Hvert designprosjekt har noen form for oppsett. For denne spesifikke, skal jeg kort snakke om innhold og wireframes før du hopper inn i den responsive designprosessen i Sketch.
Det er generelt god praksis å få tak i innholdet før du starter et designprosjekt. Det er akkurat hvordan jeg starter alle mine prosjekter (for hva det er verdt, det er en del av kontrakten min - noe jeg anbefaler at du legger i praksis også). Denne opplæringen fokuserer på UI-siden av ting, utelat de viktige UX-spørsmålene, for eksempel hvorfor bestemt innhold ble valgt, sidemål og så videre.
Mens du diskuterer innhold med klienten eller teamet ditt, må du tenke på innholdet på både små og store skjermer. Jeg foreslår at du skriver innholdet for mobil først, skriv alt ut i en Google Dok. Deretter åpner du doktoren på telefonen for å finne ut om det er riktig eller hvis det er for mye av det. Hvis du ruller gjennom sider og sider med skrevet ut innhold på telefonen, vet du at du må adressere det umiddelbart.
Alltid, uansett hva, kutte innholdet betydelig.
"Bli kvitt halvparten av ordene på hver side, og slipp deg av med halvparten av det som er igjen." -Steve Krug, ikke få meg til å tenke
Når du er fornøyd med mobilinnholdet, er du velkommen til å legge til flere i nettbrettet og på skrivebordet. Større skjermer har mer skjerm fast eiendom for å håndtere mer detaljert informasjon.
Du vil selvfølgelig gjennomgå revisjoner. Ikke bli for hengt opp på det på dette stadiet. Innholdet bør være nær endelig, men det må ikke skrives i stein.
For å lære mer om en innholdsrettet tilnærming, les gjennom James Deers artikkel:
Enighet om innhold for alle nettstedversjoner er det første trinnet i å sette opp design. Du vet nå hva du kan forvente. Det er helt greit å holde innholdet det samme hele, akkurat som det er å få bestemt innhold til å vises eller forsvinne avhengig av skjermstørrelsen.
Den vanligste typen innhold på nettet er skrevet tekst. Imidlertid er det andre ting, inkludert bilder og grafikk (dvs. fotografier eller illustrasjoner), videoer, sitater, lydfiler (dvs. podcaster), spill eller til og med innebygd innhold gjennom iframes.
Du trenger ikke å ha alle videoene og podcast-episodene spikret ned. I det minste har en beskrivelse av det visuelle eller hørbare innholdet. Det var det jeg gjorde for denne klienten. Jeg visste omtrent hva slags grafikk jeg ønsket for hver seksjon for å forklare merverdiavgiftene for hver seksjon. Men jeg hadde ikke den faktiske grafikken da innholdet ble diskutert. Jeg har nettopp beskrevet det.
Det neste trinnet er å representere innholdet visuelt. Med dette prosjektet valgte jeg å gjøre enkle, fidelity wireframes. Jeg ønsket å raskt og visuelt tegne innholdet. Jeg laget to wireframes, en mobil og en desktop fordi de hver hadde forskjellige innholdskrav. Begge gir deg en generell ide om destinasjonens visuelle struktur.
Du kan bruke det verktøyet du har mest komfort med med wireframes, men jeg brukte Sketch her. Du kan også lage enkle penn og papir wireframes. Det spiller ingen rolle. Du kan til og med bruke teknikkene som diskuteres senere i denne opplæringen for å lage mottakelig tråd.
La oss hoppe inn i lydig UI-design med Sketch.
Det vil gjøre livet enklere hvis vi først identifiserer innhold som er det samme på tvers av alle varianter og innhold som er unike for bestemte skjermer.
I dette designet er følgende elementer til stede på alle skjermbilder:
Elementer unikt for forskjellige skjermstørrelser:
Perfekt. Nå kan vi komme i gang med å skape disse elementene på riktig måte.
Min grunnleggende knapp for både skrivebord og nettbrett er et rektangel som er 352px ved 40px med en 5px grense radius. Bakgrunnen er # 7455FF. Innenfor størrelsesegenskapene, velg for å pinne objektet til venstre og høyre kant og angi en fast høyde.
Neste er tekstlaget, knappens kopi, med en skriftsnitt på Objekt Sans UI, fet skrift og en skriftstørrelse på 16 pkt. Det er hvitt eller #ffffff. Justeringsbredden er satt til auto og det er ingen andre innstillinger satt på tekstlaget. Hvis du vil, kan du slå knappen til et symbol, selv om det ikke er nødvendig for denne spesifikke utformingen fordi knappen bare vises en gang over hele siden.
Når du kombinerer de to elementene i en gruppe (eller et symbol), bør du kunne endre bredden på knappen ikke noe problem, med teksten som ligger i midten uansett knappens bredde.
En annen ting du kan gjøre er å bruke Anima-plugin for Sketch. Det lar deg lage væskeskjermer som endres, samtidig som de holder sammen, slik som avstand, polstring eller høyde. Det er flott for layouter med skjemaer.
Vi kan bruke Anima til å holde forskjellige hovedelementer sammen, mens du endrer størrelsen på det fra mobil til skrivebord. Det vil også gi oss en god indikasjon på hvordan disse elementene vil oppføre seg i forhold til hverandre i andre skjermstørrelser enn de vi designer i størrelsene mellom som en større telefon eller en nettbrett.
Men for det vi gjør i dag, legger dette pluginet ikke til mye.
Denne destinasjonssiden design krever noen store og vakre overskrifter. I desktop-versjonen er h1 72px mens h2 er 32px. 72px er altfor mye for mobil. Vi må gjøre h1-overskriften lydhør. Det er ikke så enkelt som væsketypografi er i CSS, men det er gjennomførbart.
Vi må lage en stil for hver h1-overskrift og lagre den som en tekststil med riktig navngivningskonvensjon eller syntaks. Dette vil tillate oss å senere velge den nødvendige h1 etter behov mens du utformer resten av siden. Det er ikke perfekt og ganske manuell, men så går det.
For h1 er disse følgende stiler: Noto Sans UI, fet, størrelse 72 (desktop), størrelse 48 (tablett) og størrelse 32 (telefon).
Samme syntaks kan brukes for å organisere symboler også. For eksempel: Style-name / sub-navn / bestemt stil
Så, for å organisere vår typografi, kan vi bruke følgende syntaks for store h1 for stasjonære datamaskiner: Overskrifter / H1 / Desktop, for tablett: Overskrifter / H1 / Tablet og for telefoner: Overskrifter / H1 / Telefon.
Grunnen til at det står Overskrifter / h1 i rullegardinmenyen, for øyeblikket er fordi vi ikke har lagt til noen andre stiler. Så la oss flytte inn på h2 og legge til et annet lag av hierarki i tekststilene.
For h2 bruker jeg følgende stiler: Noto Sans UI, fet, størrelse 73 (skrivebord og nettbrett) og størrelse 18 (telefon). La oss bruke følgende syntaks for h2 på telefoner: Overskrifter / H2 / Telefon. For tablett kan vi gjøre to ting her, vi kan kombinere det med skrivebordet og ringe det Overskrifter / H1 / Desktop + Tablet eller vi kan ha to separate stiler som er rett og slett de samme. Jeg skriver om dette designet etter at det er ferdig, så det er litt partisk. Jeg skal si at la oss skille tabletten fra skrivebordet fordi det er en bedre designpraksis.
Med typografi stiler i Sketch, kan du virkelig bli detaljert og organisert med sine syntaksregler. Imidlertid er det ingen funksjon i Sketch, eller ingen plugin, som forandrer typografien for deg, slik fluidtypografi fungerer via CSS. Fra og med nå er det fortsatt en manuell prosess.
Opp neste, skal vi lage symboler for å gjenbruke og gjøre livet enklere. I dette designet har vi rikelig med attester og sitater fra tidligere brukere; de trenger å være lydhør.
Heldigvis vil formatet for attester bli det samme gjennom hele siden, så vi må bare gjøre dette en gang for dem. Først har vi personens navn og deretter sitatet. De to er imidlertid forskjellige stilarter. La oss style kilden først. Jeg heter tekststilen Testimonial / Source. Den faktiske stilen til dette elementet er: Noto Sans UI, fet, størrelse 14, linjehøyde 24. Deretter har vi den faktiske vitnemål. Jeg heter tekststilen Testimonial / Quote. Stilen er: Noto Serif, vanlig, størrelse 14, linjehøyde 24.
For å lage et symbol, velg begge tekstelementene og klikk på Opprett symbol ikonet øverst til venstre i verktøylinjen. Jeg heter mitt symbol Testimonial.
Nå må vi redigere symbolet slik at det kan endre størrelsen godt for forskjellige skjermstørrelser og for forskjellige sitatstørrelser. Dobbeltklikk på det nyopprettede symbolet for å redigere det.
Først og fremst må vi omdøpe elementene i symbolet. Som standard er navnet på et tekstlag laget av eget tekstlig innhold. Jeg omdøpte dem til Kildens navn og Sitat, henholdsvis.
Deretter må vi justere størrelsesinnstillingene for begge tekstelementene. De vil ha samme resizing egenskaper. Hverken vil ha en fast bredde eller høyde. Men de vil begge endre størrelsen fra deres venstre og toppkanter. Dette sikrer at når du endrer størrelsen på symbolet, forblir tekstelementene der de tilhører.
For å gjenbruke symbolet, klikk på rullegardinmenyen øverst til venstre på verktøylinjen som sier Sett inn og naviger til Uttalelser symbol. Deretter klikker du hvor som helst på tavla for å plassere den. For å endre teksten lim inn innholdet i de aktuelle overstyringsinngangene som vi omdøpt før. Endre størrelsen etter behov.
Jeg bruker begrepet "responsiv grafikk" litt annerledes her. Tanken er at grafikken vil endre seg, avhengig av skjermstørrelsen. Imidlertid må jeg fortsatt lage grafikken manuelt for hver skjerm. Med mindre de er flytende, som et inngangselement eller en knapp, kan de ikke gjøres automatisk.
For å få en bedre forståelse av hva responsiv grafikk er, her er en lenke til en artikkel jeg skrev om responsive ikoner, men ideen er akkurat det samme for alle typer grafikk og bilder.
Vi kan slå både reisekortene til symboler, samt kortene under den sosiale delen av destinasjonssiden. La oss gå med de sosiale kortene rundt dag 3 grafikken i stedet (det er litt mer interessant).
Velg igjen kortet og slå det til et symbol. Dobbeltklikk på den for å redigere symbolet. Vi vil sørge for at størrelsen tilpasses både vertikalt og horisontalt.
Fra og med bakgrunnen vil vi gi den størrelsen på størrelsen på egenskaper som gjør objektet til toppen og til venstre. Det samme gjelder for de to tekstlagene. Vi vil imidlertid at bildet, eller avataren, skal festes øverst til høyre. Til slutt, ikke glem å endre titlene på disse elementene til noe mer passende for når vi overstyrer innholdet.
Og voila!
Til slutt vil vi også takle de små designdetaljer. I denne spesifikke utformingen bruker jeg den lille lilla linjen med en prikk mye. Jeg snu denne lilla indikatoren til et symbol også.
Dette symbolet består av en sirkel som er 8px med 8px med en # 7455FF bakgrunn. Linjens bredde spiller ingen rolle for mye, men standardverdien er 122px. Dens høyde er 2px. Igjen, med # 7455FF bakgrunn.
Innenfor symbolet må vi gjøre noen størrelsesinnstillinger igjen. For sirkelen trenger vi det til å være i samme størrelse og på samme sted. Vi skal gi den en fast bredde og høyde og knytte den til øverste høyre kant. For linjen vil vi også gi den en fast høyde, men ikke en fast bredde som vi trenger den til å utvide i bredde. Vi vil også pinne den til høyre kant når du endrer størrelsen.
På denne måten, når vi endrer størrelsen på dette symbolet, vil det bare endre bredden på linjen.
En ting vi kan gjøre er å sette bakgrunnen til å være væske også. Høyder av seksjoner varierer mellom mobile og desktop layouter; Dette betyr at du må flytte bakgrunnselementene opp og ned til riktig sted.
Her kaller brukergrensesnittet en 16 px hvit ramme. Det betyr at bakgrunnslaget må være 16px unna kantene på tavlen. Alt du trenger å gjøre er å velge bakgrunnslaget, og bruk enten anima-pluginet eller bruke størrelsesegenskapene til å pinne alle kantene på bakgrunnslaget. Så pin den til toppen, bunnen, venstre og høyre. Nå, når du skal endre størrelsen på tavla, følger bakgrunnen seg etter!
Nå som vi har tatt vare på de fleste designelementene som kan gjøres responsive eller flytende eller til gjenbrukbare symboler, er det på tide å snakke om resten av designelementene på denne siden.
Enkelt sagt, dette er hvor du ruller opp ermene og gjør designene manuelt, en etter en. Å designe kartbildet må gjøres for hånd fordi det er unikt. Det samme gjelder utformingen og plukkfargene, og bestemmer seg for typografi.
Dessverre er utforming av responsive grensesnitt i Sketch ikke et stykke kake ennå. Men det er teknikker, selv plugins, som vil gjøre livet ditt enda enklere som en designer som jobber i Sketch. Jeg håper denne opplæringen har gitt deg et godt gjennomslag i min egen designprosess. Å designe responsive brukergrensesnitt trenger ikke å være kjedelig, det kan også automatiseres mye.
Har du noen tips eller triks for å designe responsivt brukergrensesnitt for å dele med oss? Slip dem i kommentarene nedenfor!
