Hvordan holde Responsive Design Engaging
Responsive webdesign er populært, og det er absolutt ingen hemmelighet. Det er det som eksperter ber om og hva mange merker skifter til. Det handler ikke bare om å skape et mobilklar nettsted, men om å gjøre nettstedet ditt synlig for alle nettlesere, enten via skrivebord, nettbrett eller smarttelefon.
Den vanskelige delen om å designe for respons er å skape et nettsted som ser bra ut stort og lite. Du må ta mye hensyn til før du bryter opp designprogrammet ditt og går på jobb. Det er et ekstra skritt som vanligvis blir vel verdt det i ferdigproduktet. Det er svært tydelig når en designer ikke planlegger respons nettsteder har en tendens til å se veldig naken og kjedelig ut.
Det er helt avgjørende at designere opprettholder sin kreativitet på alle lydhørsteder. Med flere personer som bruker tabletter og smarttelefoner, vil du være sikker på at alle kan se nettstedet ditt. Her er noen tips for å hjelpe deg med å holde kreative og effektive når du designer for den responsive weben.
1. Bruk utmerket typografi
Med responsive nettsteder må du vurdere hva som skal se bra ut på en mindre skjerm. God typografi er et stift av noe godt webdesign, men det er nesten nødvendig i responsivt webdesign. Når skjermstørrelsene faller, bør de fleste elementene transformere og krympe eller flytte også. Først og fremst bør typografien din ha denne kapasiteten.
For det andre bør du bruke forskjellige overskrifter og ulike størrelser i tekst. Nå bruker vi vanligvis veldig store overskrifter og overskrifter for våre desktop design. Dette trenger ikke å avbrytes i sin helhet fordi du tenker på mindre størrelser. Bare sørg for at du bruker et plugin, som FitText, for å redusere størrelsen på teksten. Dette hjelper.
Smith bruker mange forskjellige skrifttyper for å skape et veldig interessant utseende. De varierer også størrelsene på disse skriftene på hele nettstedet. Det som er interessant i skrivebordsmodus, er måten teksten og avsnittene er lined opp i forskjellige kolonner. Når vinduet skaleres ned, kollapser teksten inn i en kolonne. Heldigvis forblir teksten konsekvent ved å opprettholde samme skala og stil.
Smashing magazine har en tendens til å gjøre det samme. De blir kvitt høyre side av designet (annonsene) helt når vinduet skaleres ned. Teksten wraps inne i vinduet og stilene, farger og størrelser forblir imidlertid konsistente.
2. Bruk flotte bilder
Imagery, som typografi, er ekstremt viktig i enhver nettside design. Også som typografi, i responsive design, når du ser et nettsted på mindre skjermer, bør bildene dine også vises mindre eller skaleres ned. Det er mange forskjellige layouter og forskjellige bildestørrelser som kan brukes i en responsiv design. Det er viktig å være oppmerksom på bildene du velger og hvordan du bruker dem, fordi de utvilsomt vil forandre seg. Da skjermbildene blir større eller mindre, endrer bildene form og avslører eller beskjærer bestemte deler av bildet.
Ideelt sett vil du sørge for at store, fotografiske bilder ikke har grafisk innhold på dem som kan beskjæres når vinduene endres. I tillegg, når du lager grafiske bilder, må du sørge for at du oppretter et bilde som laster raskt og vil være synlig på en mindre skjerm. Derfor har designere tatt med seg flat design. Det er bare enklere.
På Pandiscio må du først legge merke til hvordan bildet med større topptekst ser på et skrivebord. Den er full, strekker seg til sidene og er ganske høy kvalitet. Når du krymper vinduets størrelse, blir bildene mindre, endrer form (fra rektangulær til firkant) og blir beskåret. De har funnet bilder som ser bra ut når skjermen endrer størrelse.
KinHR er et nettsted som bruker mange forskjellige grafiske elementer samt fotografier. Legg merke til at når det er stort og når det blir små, blir toppbildene mindre som på Pandiscios nettside. Imidlertid, med de grafiske elementene i kroppen, blir bildene mindre, men opprettholder sin form og blir ikke beskåret.
3. Ikke sov på navigasjonen
Pek tom, hvis folk ikke har noen anelse om hvordan du kommer rundt på nettstedet ditt, så vil de bare ikke. Navigasjon er vanskeligere når det gjelder responsiv design fordi vi er vant til å skape navigasjon for landskapsdesign. Nå må vi lage navigasjon som enkelt kan kondenseres for å passe portrettdimensjoner.
Det er ikke et stort problem når du har en håndfull koblinger. Du kan enten gjøre menyen mindre eller kondensert nær toppen, eller du kan lage en rullegardinmeny for seere. Av stor betydning er hvordan du håndterer navigasjon med mer innholdsrike nettsteder.
Mashable har tonnevis av koblinger fordi de har tonnevis av kategorier og og enda flere artikler. På toppen av det har de egne selskapssentriske sider som også må knyttes til. Mashable bestemmer seg for å lage en popup-meny på venstre side av skjermen for mindre nettlesere.
Monocle har to toppnivåer med omfattende navigasjon for deres nettsted. For mindre nettlesere har de opprettet en nedtrekksmeny for det aller beste innholdet, og har nettopp kondensert det andre nivået av navigasjon.
4. Gjør det morsomt å bruke
Når du klikker på koblinger på nettet, må du sannsynligvis sitte der og vente på ting å laste før du ser en side. På telefoner er det ekstra irriterende å nettopp finne den neste knappen for å bevege seg mot mer innhold. Ting som dette er ikke morsomt, og det er heller ikke intuitivt.
Vær oppmerksom på detaljene og gjør nettstedet ditt mer intuitivt, slik at nettstedet ditt blir mer delbart. Tenk på hvordan det er å bruke et nettsted på hvilken som helst nettleserstørrelse. Tenk på hvilke nettsteder som skal gjøres når du ringer til en handling. Finn disse tingene og reparer dem, slik at nettstedet ditt er enkelt, morsomt og intuitivt å bruke. Det gjør det også litt mer interessant!
Mud gjør deres nettsted mer interessant ved å ta hensyn til overgangen deres. De lager en veldig slank følelse ved å la mange av elementene glide seg ned og falme i stedet for bare å flytte bratt og vise seg. Det gjør en verden av forskjell.
Neue Yorke bruker mye bevegelse når han går fra porteføljepost til gjenstand. Igjen, det skaper en veldig high-end følelse og holder seerne interessert i det som snart skal avsløres.
5. Tenk utenfor boksen
Når alt annet feiler, bare vær kreativ. Responsive webdesign er ikke ment å være en begrensning på måten vi oppretter nettsteder på. Det er alltid plass til å bruke kreativitet, enten det er via koding eller design.
Enso har skapt et nettsted som ser ut som om det ikke har noen sjanse til å være lydhør. Legg merke til hvordan de har endret oppsettet litt når størrelsen blir mindre, men de har opprettholdt sin merkevare og kreativitet.
TBWA har et nettsted som har flott design. Men de har også flotte bilder. Og de har også flott typografi! De har brukt alt her for å lage en veldig unik og interessant responsiv webdesign.
Konklusjon
Opprettholde din kreativitet i responsiv design, eller i et hvilket som helst webdesign er like enkelt som å skisse ut konseptet og revidere det for å holde målene dine. De morsomme tingene skjer lettere når du begynner å planlegge hvordan du vil at nettstedet ditt skal fungere og fungere, i stedet for å starte med det. Responsive webdesign trenger ikke å være denne store, allmektige oppgaven som designere er redde for. Det er ganske enkelt! Hold alle de tidligere tingene vi diskuterte i tankene, og opprett nettsteder som bare er ute av denne verden! Lykke til med ditt responsive webdesign.
Hvilke tips vil du dele for å holde responsiv design engasjerende? Har du funnet en veldig kreativ responsiv design? Gi oss beskjed i kommentarene.