Hur man håller Responsive Design Engaging
Responsiv webbdesign är populär och det är absolut ingen hemlighet. Det är vad experter ringer efter och vilka många varumärken övergår till. Det handlar inte bara om att skapa en mobilklar webbplats, utan om att göra din webbplats synlig för alla webbläsarstorlekar, oavsett om det är via skrivbord, surfplatta eller smartphone.
Den knepiga delen om att designa för respons är att skapa en webbplats som ser bra ut som det är stort och litet. Du måste ta mycket hänsyn till innan du bryter upp ditt designprogram och går till jobbet. Det är ett extra steg som vanligtvis slutar vara väl värt det i den färdiga produkten. Det är mycket tydligt när en designer inte planerar för lyhördhet; webbplatser tenderar att se riktigt nakna och tråkiga ut.
Det är absolut nödvändigt att designers behåller sin kreativitet i alla lyhörda webbplatser. Med fler personer som använder tabletter och smartphones vill du vara säker på att alla kan se din webbplats. Här är några tips som hjälper dig att hålla kreativa och effektiva när du utformar för den mottagliga webben.
1. Använd utmärkt typografi
Med mottagliga webbplatser måste du överväga vad som kommer att se bra ut på en mindre skärm. God typografi är en häftning av någon bra webbdesign, men det är nästan nödvändigt i en responsiv webbdesign. När skärmstorlekar minskar, bör de flesta av elementen omvandlas och krympas eller flyttas också. Först och främst bör din typografi ha denna förmåga.
För det andra bör du använda olika rubriker och olika storlekar i texten. Nu brukar vi brukar ha mycket stora rubriker och rubriker för våra skrivbordsdesigner. Detta behöver inte sluta i sin helhet eftersom du tänker på mindre storlekar. Bara se till att du använder ett plugin, som FitText, för att minska storleken på din text. Detta hjälper.
Smed använder många olika teckensnitt för att skapa ett mycket intressant utseende. De varierar också storleken på dessa typsnitt på hela webbplatsen. Vad som är intressant i skrivbordsläget är hur texten och styckena är uppradade i olika kolumner. När fönstret är skalat, kollapsar texten i en kolumn. Lyckligtvis är texten fortsatt konsekvent genom att bibehålla samma skala och stil.
Smashing magazine tenderar att göra detsamma. De släpper helt av den högra sidan av designen (annonserna) helt när fönstret är nedskalat. Texten wraps inuti fönstret och stilar, färger och storlekar förbli emellertid konsekventa.
2. Använd bra bilder
Imagery, som typografi, är oerhört viktigt i någon webbdesign. Också som typografi, i responsiva mönster, när du tittar på en webbplats på mindre skärmar, ska dina bilder också visas mindre eller skalas ner. Det finns massor av olika layouter och olika bildstorlekar som kan användas i en lyhörd design. Det är viktigt att uppmärksamma de bilder du väljer och hur du använder dem eftersom de utan tvekan kommer att förändras. När skärmar blir större eller mindre ändras bilderna på form och avslöjar eller skär ut vissa delar av bilden.
Helst vill du se till att dina stora fotografiska bilder inte har något grafiskt innehåll på dem som kan beskäras när Windows ändrar storlek. Dessutom, när du skapar grafiska bilder måste du se till att du skapar en bild som laddas snabbt och kommer att synas på en mindre skärm. Därför har designers tagit fram platt design. Det är bara enklare.
Vid Pandiscio måste du först märka hur den större huvudbilden ser ut på ett skrivbord. Den är full, sträcker sig till sidorna och är ganska hög kvalitet. När du krymper fönsterstorleken blir bilderna mindre, ändra form (från rektangulär till kvadrat) och skörda. De har hittat bilder som ser bra ut när skärmen ändrar storlek.
KinHR är en webbplats som använder många olika grafiska element samt fotografier. Observera att när stor och när liten blir huvudbilden mindre som på Pandiscios webbplats. Men med de grafiska elementen i kroppen blir bilderna mindre men ändå behåller sin form och får inte beskäras.
3. Sova inte på navigeringen
Peka tomt, om folk inte har någon aning om hur man kommer runt din webbplats, så kommer de bara inte. Navigering är svårare när man arbetar med lyhörd design eftersom vi är vana vid att skapa navigering för landskapsdesign. Nu måste vi skapa navigering som enkelt kan kondenseras för att passa porträttdimensioner.
Det är inte ett stort problem när du har en handfull länkar. Du kan antingen göra din meny mindre eller kondenserad nära toppen eller du kan skapa en rullgardinsmeny för tittare. Av stor vikt är hur du hanterar navigering med mer innehåll tunga webbplatser.
Mashable har massor av länkar eftersom de har massor av kategorier och ännu fler artiklar. Utöver det har de egna företagscentrerade sidor som också måste kopplas till. Mashable bestämmer sig för att skapa en popup-meny på vänster sida av skärmen för mindre webbläsare.
Monocle har två toppnivåer med omfattande navigering för sin webbplats. För mindre webbläsare har de skapat en bildruta för det största innehållet och har bara kondenserat den andra nivån av navigering.
4. Gör det roligt att använda
När du klickar på länkar online måste du sitta där och vänta på att saker ska laddas innan du ser en sida. På telefoner är det extra irriterande att bara hitta nästa knapp för att flytta till mer innehåll. Saker som detta är inte kul eller är det intuitivt.
Att uppmärksamma detaljerna och göra din webbplats mer intuitiv gör att din webbplats är mer delaktig. Tänk på hur det är att använda en webbplats i alla webbläsarstorlekar. Tänk på vilka webbplatser som ska göras när du ringer till en åtgärd. Hitta dessa saker och åtgärda dem så att din webbplats är lätt, kul och intuitiv att använda. Det gör det också lite mer intressant!
Mud gör deras webbplats mer intressant genom att uppmärksamma sina övergångar. De skapar en mycket snygg känsla genom att låta många av deras element glida ner och blekna in snarare än att bara flytta brått och visa sig. Det gör en värld av skillnad.
Neue Yorke använder mycket rörelse när man går från portföljartikel till objekt. Återigen skapar det en mycket avancerad känsla och håller tittarna intresserade av vad som snart ska avslöjas.
5. Tänk utanför lådan
När allt annat misslyckas, var bara kreativ. Responsiv webbdesign är inte avsedd att vara ett hinder för hur vi skapar webbplatser. Det finns alltid utrymme att använda kreativitet, oavsett om det är via kodning eller design.
Enso har skapat en webbplats som ser ut som om den inte har någon chans att vara responsiv. Lägg märke till hur de ändrat layouten lite när storleken blir mindre, men de har behållit sitt varumärke och kreativitet.
TBWA har en webbplats som har en bra design. Men de har också bra bilder. Och de har också bra typografi! De har använt allt här för att göra en mycket unik och intressant responsiv webbdesign.
Slutsats
Att behålla din kreativitet i lyhörd design, eller i vilken webbdesign som helst, är så enkelt som att skissera ditt koncept och ändra det för att behålla dina mål. De roliga grejerna sker lättare när du börjar planera hur du vill att din webbplats ska fungera och fungera, snarare än att börja med det. Responsiv webbdesign behöver inte vara denna stora, allsmäktiga uppgift som designers är rädda för. Det är ganska enkelt! Håll alla tidigare saker vi diskuterade i åtanke och skapa webbplatser som bara är ute i världen! Lycka till med din lyhörda webbdesign.
Vilka tips skulle du dela för att hålla responsiv design engagerande? Har du hittat en väldigt kreativ responsiv design? Låt oss veta i kommentarerna.