Sådan holder du Responsive Design Engaging
Responsive webdesign er populært, og det er absolut ingen hemmelighed. Det er hvad eksperter kræver og hvad mange mærker skifter til. Det drejer sig ikke kun om at oprette et mobil-klar websted, men om at gøre dit websted synligt for alle browsere, uanset om det er via skrivebord, tablet eller smartphone.
Den vanskelige del om at designe for lydhørhed er at skabe et websted, der ser godt ud stort og lille. Du skal tage meget hensyn til, inden du bryder åbent dit designprogram og går på arbejde. Det er et ekstra skridt, som typisk ender med at være det værd i det færdige produkt. Det er meget tydeligt, når en designer ikke har planer om lydhørhed; websteder har tendens til at se virkelig bare og kedeligt ud.
Det er absolut nødvendigt, at designere opretholder deres kreativitet på alle lydhurtige websteder. Med flere personer, der bruger tabletter og smartphones, vil du være sikker på, at alle kan se dit websted. Her er nogle tips til at hjælpe dig med at holde kreative og effektive, når du designer for det lydhøre web.
1. Brug fremragende typografi
Med responsive sites skal du overveje, hvad der skal se godt ud på en mindre skærm. God typografi er et hæfteklammer af ethvert godt webdesign, men det er næsten nødvendigt i lydhurt webdesign. Da skærmstørrelser falder, skal de fleste elementer omdanne og krympe eller flytte også. Først og fremmest bør din typografi have denne mulighed.
For det andet skal du bruge forskellige overskrifter og forskellige størrelser i tekst. Nu bruger vi normalt meget store overskrifter og overskrifter til vores desktop designs. Dette behøver ikke at afbryde i sin helhed, fordi du tænker på mindre størrelser. Bare sørg for at du bruger et plugin, som FitText, for at formindske størrelsen af din tekst. Dette hjælper.
Smith bruger mange forskellige skrifttyper til at skabe et meget interessant udseende. De varierer også størrelsen af disse skrifttyper på hele webstedet. Hvad der er interessant i skrivebordsmodus, er den måde, teksten og afsnitene er anbragt i forskellige kolonner. Når vinduet skaleres ned, falder teksten ind i en kolonne. Heldigvis forbliver teksten konsistent ved at opretholde samme skala og stil.
Smashing magazine har tendens til at gøre det samme. De slipper helt af højre side af designet (reklamerne) helt, når vinduet er nedskaleret. Teksten wraps inde i vinduet og stilarter, farver og størrelser forbliver imidlertid ensartede.
2. Brug flotte billeder
Imagery, som typografi, er yderst vigtigt i ethvert website design. Ligesom typografi, i responsive designs, når du ser et websted på mindre skærme, skal dine billeder også vises mindre eller nedskaleret. Der er tonsvis af forskellige layouter og forskellige billedstørrelser, som kan bruges i et lydhørt design. Det er vigtigt at være opmærksom på de billeder, du vælger, og hvordan du bruger dem, fordi de uden tvivl vil ændre sig. Da skærme bliver større eller mindre, ændrer billederne form og afslører eller beskærer bestemte dele af billedet.
Ideelt set vil du sikre dig, at dine store fotografiske billeder ikke har noget grafisk indhold på dem, der kan beskæres, når windows ændrer størrelse. Derudover skal du sørge for, at du opretter et billede, der laster hurtigt, og når du opretter grafiske billeder, og det vil blive synligt på en mindre skærm. Det er grunden til, at designere har fået et fladt design. Det er bare nemmere.
Ved Pandiscio skal du først bemærke, hvordan billedet med større header ser på et skrivebord. Den er fuld, strækker sig til siderne og er ret høj kvalitet. Når du krymper vinduets størrelse, bliver billederne mindre, skift form (fra rektangulær til firkant) og få beskåret. De har fundet billeder, der ser godt ud, når skærmen ændrer størrelse.
KinHR er et websted, der bruger mange forskellige grafiske elementer samt fotografier. Bemærk, at når store og små, bliver hovedbillederne mindre som på Pandiscios websted. Imidlertid bliver billederne mindre med de grafiske elementer i kroppen, men opretholder deres form og bliver ikke beskåret.
3. Sov ikke på navigationen
Punkt blankt, hvis folk ikke har nogen anelse om, hvordan man kommer rundt på dit websted, så vil de bare ikke. Navigation er sværere, når man beskæftiger sig med responsivt design, fordi vi er vant til at skabe navigation til landskabsdesign. Nu er vi nødt til at oprette navigation, der let kan kondenseres for at passe portrætmål.
Det er ikke et stort problem, når du har en håndfuld links. Du kan enten gøre din menu mindre eller kondenseret nær toppen, eller du kan oprette en drop-down menu for seerne. Af stor betydning er, hvordan du håndterer navigation med mere indhold, tunge websites.
Mashable har tonsvis af links, fordi de har tonsvis af kategorier og og endnu flere artikler. Derudover har de deres egne virksomhedssentriske sider, der også skal knyttes til. Mashable beslutter at oprette en pop-up menu på venstre side af skærmen for mindre browsere.
Monocle har to øverste niveauer af omfattende navigation til deres websted. For mindre browsere har de lavet en diasmenu til det yderste indhold og har lige kondenseret det andet niveau af navigation.
4. Gør det sjovt at bruge
Når du klikker på links online, skal du sandsynligvis sidde der og vente på ting at indlæse, før du ser en side. På telefoner er det ekstra irriterende at nøjagtigt finde den næste knap for at kunne flytte til mere indhold. Ting som dette er ikke sjovt, og det er heller ikke intuitivt.
Vær opmærksom på detaljerne og gør dit websted mere intuitivt, hvilket gør dit websted mere delbart. Tænk på, hvordan det er at bruge et websted på en hvilken som helst browserstørrelse. Tænk på, hvad websteder skal gøre, når du opfordrer til en handling. Find disse ting og reparer dem, så dit websted er let, sjovt og intuitivt at bruge. Det gør det også lidt mere interessant!
Mud gør deres site mere interessant ved at være opmærksom på deres overgange. De skaber en meget slank følelse ved at lade mange af deres elementer glide ned og falme i stedet for bare at flytte brat og vise sig. Det gør en verden af forskel.
Neue Yorke bruger masser af bevægelse, når han går fra porteføljepost til vare. Igen skaber den en meget avanceret følelse og holder seerne interesserede i, hvad der snart skal afsløres.
5. Tænk uden for boksen
Når alt andet fejler, skal du bare være kreativ. Responsive webdesign er ikke meningen at være en begrænsning på måden vi skaber websites på. Der er altid plads til at bruge kreativitet, uanset om det er via kodning eller design.
Enso har skabt et websted, der ser ud som om det ikke har nogen chance for at være lydhør. Bemærk hvordan de har ændret layoutet lidt, når størrelsen bliver mindre, men de har fastholdt deres mærke og kreativitet.
TBWA har et websted, der har noget godt design. Men de har også gode billeder. Og de har også stor typografi! De har brugt det hele her for at lave et meget unikt og interessant responsivt webdesign.
Konklusion
Vedligeholdelse af din kreativitet i responsivt design eller i et hvilket som helst webdesign er lige så simpelt som at skitsere dit koncept og revidere det for at holde dine mål. De sjove ting sker lettere, når du begynder at planlægge, hvordan du vil have dit websted til at fungere og fungere, i stedet for at starte med det. Responsive webdesign behøver ikke at være denne store, almægtige opgave, som designere er bange for. Det er ret simpelt! Opbevar alle de tidligere ting, vi diskuterede i tankerne, og opret websteder, der bare er uden for denne verden! Held og lykke med dit responsive webdesign.
Hvilke tip vil du dele for at holde responsivt design engagerende? Har du fundet et meget kreativt responsivt design? Lad os vide i kommentarerne.