Share
Welkom bij de achtste les van onze Web Design for Kids-serie, 'design basics'!
Gedurende deze reeks hebben we ons gericht op het tot leven brengen van een ontwerp, maar we hebben nog niet gesproken over de beslissingen die in het ontwerp zijn genomen om mee te beginnen. In deze tutorial doorlopen we een aantal van de basis ontwerpconcepten die deel uitmaken van het maken van een goede website.
Vergeet niet om vragen te stellen in het opmerkingengedeelte onderaan deze pagina!
Iets anders waar we tot nu toe veel over gesproken hebben is het gebruiker (of bezoeker). Elke beslissing die we nemen in webdesign en elk ontwerpconcept waar we het in deze tutorial over hebben, hebben allemaal hetzelfde doel: de website zo gebruiksvriendelijk mogelijk maken en begrijpen.
Is deze gebruiker blij?Bij design gaat het om het oplossen van problemen. Als onze gebruikers het moeilijk vinden om onze website te gebruiken, zullen ze gewoon vertrekken. Het is onze taak om eventuele problemen voor hen weg te nemen, het gemakkelijk leesbaar te maken en hen een supergemakkelijke ervaring te bieden. Onze beslissingen hebben betrekking op zaken als inhoud, organisatie, lay-out, lege ruimte, grafische weergave, kleur en typografie.
Inhoud is het belangrijkste onderdeel van webontwerp. Het maakt niet echt uit hoe mooi onze site eruit ziet als we geen inhoud hebben die gebruikers willen lezen. Een ding dat we onszelf kunnen stellen wanneer we een site willen bouwen is "Hebben mensen dit nodig?" En zo ja, "Welke informatie is essentieel?”.
Het kan verleidelijk zijn om zoveel mogelijk inhoud op een website te plaatsen. Het opschonen en verkleinen van inhoud zal de gebruiker uiteindelijk helpen om meer informatie te krijgen, omdat wat belangrijk is niet verloren gaat op de pagina..
Zodra we onze inhoud gereed hebben, moeten we deze in categorieën of relevante groepen indelen, zodat de gebruiker alles zonder problemen kan vinden.
De beste website zal heel natuurlijk stromen en ervoor zorgen dat de gebruiker niet te hard hoeft na te denken over waar iets zou kunnen zijn.
De website van Tuts + Town heeft niet veel inhoud, dus we konden alles op één lijn brengen en onze mooie afbeeldingen benadrukken. Als we meer tekst op de site zouden hebben, zou deze specifieke lay-out echter niet zo goed kunnen werken.
Om ervoor te zorgen dat onze site gemakkelijk te navigeren en plezierig is voor de gebruiker, moeten we er goed over nadenken kijk en voel. Dit is waar afbeeldingen, hiërarchie (duidelijk maken hoe belangrijk alles is, vergeleken met al het andere), typografie en kleur binnenkomen.
Op dit moment weten we alles over het gebruik van afbeeldingen op een website. We hebben vier afbeeldingen opgenomen op onze site Tuts + Town en hebben de verschillende typen afbeeldingen doorlopen die in een vorige zelfstudie op het web konden worden gebruikt.
Wanneer en waar deze afbeeldingen en grafische afbeeldingen moeten worden gebruikt, is ook belangrijk om over na te denken. Alle afbeeldingen op onze site Tuts + Town waren logisch naast de inhoud waarmee ze waren geplaatst. Onze website gaat bijvoorbeeld over Tuts + Town, dus we hebben een nette afbeelding aan de top van een belangrijk gebouw in onze stad. De drie afbeeldingen die volgen op deze zijn gerelateerd aan de groepen van bedrijven naast hen: hotels, restaurants en algemene winkels.
We hebben deze afbeeldingen gebruikt om de gebruiker een beter beeld te geven van de voelen van de stad, evenals hoe het winkelen zal zijn in onze prachtige gebouwen. Het is belangrijk dat we de aandacht van een gebruiker niet trekken met een afbeelding die niets te maken heeft met de daadwerkelijke inhoud waarmee deze wordt gedeeld.
Pictogrammen zijn kleine grafische afbeeldingen die gewend zijn vertegenwoordigen iets.
Een goed pictogram is goed begrepen en kan het vinden van belangrijke stukjes informatie op een website een stuk sneller maken.
Hier zijn enkele voorbeelden van bijzonder nuttige pictogrammen:
Weet je wat deze pictogrammen waarschijnlijk betekenen??Er is zoveel dat we kunnen communiceren zonder tekst te gebruiken en met behulp van pictogrammen in plaats van tekst in de juiste situatie kunnen we een schonere, gebruiksvriendelijkere site krijgen.
Visuele hiërarchie heeft alles te maken met het kiezen van wat opvalt en het weergeven van de relatie tussen informatie. De hiërarchie van de delen van een website kan worden weergegeven via een aantal verschillende stijlkeuzes, zoals: kleur, grootte, gebruik van lege ruimte en positionering. Al deze keuzes helpen de gebruiker te vertellen wat super belangrijk is, wat niet zo belangrijk is en welke informatie gerelateerd is.
Hiërarchie wordt niet alleen weergegeven door de grootte van onze tekst en afbeeldingen, maar ook door de afstand tot elkaar. Gelijkaardige inhoud moet dicht bij elkaar worden geplaatst en op afstand van niet-verwante inhoud.
Deze afbeelding van de Tuts + Town-hemel is ontworpen om ervoor te zorgen dat de ballon eerst de aandacht van de kijker trekt, gevolgd door de wolken. Al het andere in de afbeeldingen is minder duidelijk gemaakt om ervoor te zorgen dat de ballon en de wolken meer opvallen.
De bovenstaande afbeelding laat een verandering zien in waar we ons eerst op richten. Vindt u dat u eerst de wolken ziet deze keer, dan de ballon?
Er is veel gaande in deze afbeelding en we weten niet precies waar we het eerst moeten kijken. Er is geen kleurverandering, geen organisatie en geen spatiëring om ons te vertellen wat belangrijk is, waardoor het een beetje moeilijk te volgen is.
Whitespace is de lege ruimte op een site; het doet het niet hebben om wit te zijn hoor! Het zijn die plekken waar geen tekst en geen afbeeldingen zijn. Waar we ervoor kiezen om deze lege ruimte te hebben, is erg belangrijk omdat het bepaalt welke delen van een site opvallen en hoe goed we de inhoud kunnen lezen.
De bovenstaande afbeelding is een voorbeeld van een site die de witruimte niet goed gebruikt. Er is veel inhoud en afbeeldingen en niet genoeg ruimte tussen beiden om ons te laten zien wat het belangrijkste is.
Laten we kijken of we dit kunnen opruimen!
Veel beter. We gooiden wat niet-essentiële inhoud weg en creëerden een hiërarchie met veel meer witruimte en betere organisatie, waardoor het gemakkelijker te lezen is.
De spaties die we op onze site Tuts + Town hebben gebruikt, zijn eigenlijk lichtgeel.
We hebben grote plekken met lege ruimte aan de rechter- en linkerkant van de pagina, evenals tussen de afbeeldingen. Deze ruimte helpt onze inhoud te benadrukken en zorgt ervoor dat niets te vol is.
Onthouden! Het is net zo belangrijk om na te denken over wat is niet op de site zoals het is, en dat is waar witruimte in het spel komt.
Typografie en kleur zijn zo belangrijk voor webdesign dat ze hun eigen tutorials hebben om deze te volgen, dus we zullen ze hier snel aanraken.
Typografie is de kunst van het selecteren en arrangeren van het type op een manier die het zo aantrekkelijk en leesbaar mogelijk maakt. Hoewel onze site Tuts + Town niet veel tekst bevat, is er eigenlijk veel nagedacht over de keuze en indeling van het lettertype.
Kleuren kiezen is ook een echt krachtig onderdeel van design. Kleuren hebben betekenis en kan gebruikers helpen bepaalde gevoelens te geven over een merk of site. De Tuts + Town-kleuren dragen bij aan een leuk en gastvrij gevoel voor onze stad.
Maar nogmaals, we zullen er binnenkort veel meer over praten!
In deze tutorial hebben we enkele zeer belangrijke ontwerpconcepten aangeroerd. Nadat we inhoud gereed hebben gemaakt, moeten we deze inhoud op de eenvoudigste, meest ordelijke manier presenteren aan onze gebruiker.
Bij design draait alles om dingen gemakkelijk en leuk maken voor mensen. We hebben dit bereikt met onze Tuts + Town-website via lay-out, afbeeldingen, kleur en witruimte.
Vervolgens zullen we bespreken typografie, de kunst van het selecteren en rangschikken van het type; een van de meest interessante en leuke delen van het ontwerp.
Ik zie je in de stad!
Accentsconagua