Share
Välkommen till den åttonde lektionen i vår webbdesign för barns serie, "designbasics"!
Under hela serien har vi fokuserat på att skapa en design till liv, men vi har ännu inte pratat om de beslut som gick in i den designen till att börja med. I denna handledning går vi igenom några av de grundläggande designkoncept som är en del av att göra en bra hemsida.
Glöm inte att ställa några frågor i kommentarfältet längst ner på den här sidan!
Något annat vi har pratat mycket om hittills är användare (eller besökare). Varje beslut vi fattar i webbdesign och varje designkoncept vi pratar om i denna handledning har alla samma mål: att göra hemsidan så enkel att använda och förstå som möjligt.
Är den här användaren lycklig?Design handlar om att lösa problem. Om våra användare tycker det är svårt att använda vår hemsida kommer de helt enkelt att lämna. Det är vårt jobb att bli av med några svårigheter för dem, göra det lätt att läsa och ge dem en övergripande supernytisk upplevelse. Våra beslut omfattar saker som innehåll, organisation, layout, tomt utrymme, grafik, färg och typografi.
Innehåll är den enskilt viktigaste delen av webbdesign. Det spelar ingen roll hur mycket vår sida ser ut om vi inte har innehåll som användare vill läsa. En sak vi kan fråga oss när vi vill bygga en webbplats är "Behöver folk det här?" Och i så fall "Vad är informationen grundläggande?”.
Det kan vara frestande att inkludera så mycket innehåll som möjligt på en webbplats. Att städa upp och minska innehållet kommer faktiskt att hjälpa användaren att få mer information i slutändan, för det som är viktigt kommer inte att gå vilse på sidan.
När vi har klarat innehållet måste vi organisera det i kategorier eller relevanta grupper, så att användaren kan hitta allt utan problem.
Den bästa webbplatsen kommer att flöda väldigt naturligt och se till att användaren inte behöver tänka för mycket om var någonting kan vara.
Tuts + Towns hemsida har inte mycket innehåll, så vi kunde centrera justera allt och markera våra underbara bilder. Om vi skulle få mer text på webbplatsen kanske den här layouten kanske inte fungerar lika bra.
För att säkerställa att vår webbplats är lätt att navigera och njutbar för användaren behöver vi tänka på dess titta och känna. Här är bilder, hierarki (som klargör hur viktig allt är, jämfört med allt annat), typografi och färg kommer in.
Vid denna tidpunkt vet vi allt om att använda bilder på en webbplats. Vi inkluderade fyra bilder på vår Tuts + Town webbplats och gick igenom olika typer av bilder att använda på webben i en tidigare handledning.
När och var att använda dessa bilder och grafik är också viktigt att tänka på. Alla bilder som inkluderades på vår Tuts + Town-sida var förnuftiga bredvid innehållet de var placerade med. Till exempel handlar vår hemsida om Tuts + Town, så vi har en snygg bild längst upp i en viktig byggnad i vår stad. De tre bilderna som följer den här är relaterade till grupper av företag bredvid dem: hotell, restauranger och allmänna shopping.
Vi använde dessa bilder för att ge användaren en bättre känsla av känna av staden, liksom vad shopping kommer att vara som i våra vackra byggnader. Det är viktigt att vi inte tar tag i användarens uppmärksamhet med en bild som inte har något att göra med det faktiska innehållet det är med.
Ikoner är små grafik som brukar användas representera något.
En bra ikon är väl förstådd och kan göra att hitta viktiga bitar av information på en webbplats mycket snabbare.
Här är några exempel på särskilt användbara ikoner:
Vet du vad dessa ikoner förmodligen betyder?Det finns så mycket vi kan kommunicera utan att använda text alls och att använda ikoner i stället för text i rätt situation kommer att ge oss en renare, lättare användning av webbplatsen.
Visuell hierarki handlar om att välja vad som står ut och visa förhållandet mellan information. Hierarkin för delar av en webbplats kan visas genom ett antal olika stylingalternativ, till exempel: färg, storlek, användning av tomt utrymme och positionering. Alla dessa val kommer att hjälpa till att berätta för användaren vad som är super viktigt, vad som inte är lika viktigt och vilken information som är relaterad.
Hierarkin visas inte bara av storleken på vår text och bilder, men också av deras avstånd från varandra. Liknande innehåll ska grupperas nära varandra och avstånd från orelaterat innehåll.
Den här bilden av Tuts + Town sky har utformats för att se till att ballongen förstår tittarens uppmärksamhet, följt av molnen. Allt annat i bilderna har gjorts mindre tydligt för att se till att ballongen och molnen sticker ut mer.
Ovanstående bild visar en förändring av det vi fokuserar på först. Finner du att du förstår molnen först den här gången, då ballongen?
Det finns mycket kvar på bilden och vi är inte helt säkra på var du ska se först. Det finns ingen färgförändring, ingen organisation och inget avstånd för att berätta vad som är viktigt, vilket gör det lite svårt att följa.
Whitespace är det tomma utrymmet på en webbplats; det gör det inte ha att vara vit men! Det är de ställen där det inte finns någon text och inga bilder. Där vi väljer att ha detta tomma utrymme är det verkligen viktigt eftersom det avgör vilka delar av en webbplats som står ut och hur bra vi kan läsa innehållet.
Bilden ovan är ett exempel på en webbplats som inte använder blankutrymme väl. Det finns mycket innehåll och bilder och inte tillräckligt med utrymme mellan dem alla för att visa oss vad som är viktigast.
Så, låt oss se om vi kan städa upp det här!
Mycket bättre. Vi kastade bort något icke-väsentligt innehåll och skapade en hierarki med mycket mer whitespace och bättre organisation, vilket gör det enklare att läsa.
Den färgutrymme vi använde på vår Tuts + Town-webbplats är faktiskt ljusgul.
Vi har stora fläckar av tomt utrymme till höger och vänster om sidan, liksom mellan bilderna. Det här utrymmet hjälper till att lyfta fram vårt innehåll medan du ser till att ingenting är för rotigt.
Kom ihåg! Det är lika viktigt att tänka på vad som är inte på platsen som vad som är, och det är där whitespace kommer till spel.
Typografi och färg är så viktiga för webbdesign att de kommer att ha egna handledningar för att följa den här, så vi kommer bara att snabbt ta kontakt med dem här.
Typografi är konsten att välja och ordna typ på ett sätt som gör det så tilltalande och läsligt som möjligt. Medan vår Tuts + Town-webbplats inte har mycket text, fanns det faktiskt mycket tankar som gick in i typsnittet val och arrangemang av det.
Att välja färger är också en väldigt kraftfull del av designen. Färger har menande och kan hjälpa till att ge användarna vissa känslor om ett varumärke eller en webbplats. Tuts + Town färger hjälper till att skapa en rolig och välkomnande känsla för vår stad.
Men igen, vi pratar om dessa mycket mer snart!
I denna handledning berörde vi några riktigt viktiga konceptkoncept. När vi har innehållsklar måste vi presentera detta innehåll för vår användare på det enklaste och mest ordnade sättet.
Design handlar om att göra saker enkelt och roligt för människor. Vi uppnådde detta med vår webbplats Tuts + Town genom layout, bilder, färg och blankutrymme.
Nästa kommer vi att diskutera typografi, konsten att välja och ordna typ; en av de mest intressanta och roliga delarna av designen.
Vi ses runt om i staden!
Accentsconagua