Hoe leer je webdesign (in 9 stappen)

de belangrijkste concepten van visueel ontwerp begrijpen

regel

elke letter, rand en deling in een opmaak bestaat uit regels die hun grotere structuur vormen. Het leren van webdesign betekent het begrijpen van de toepassingen van lijnen in het creëren van orde en evenwicht in een lay-out.

vormen

de drie basisvormen in visueel ontwerp zijn vierkanten, cirkels en driehoeken. Vierkanten en rechthoeken werken voor blokken inhoud, Cirkels werken voor knoppen en driehoeken worden vaak gebruikt voor pictogrammen die een belangrijk bericht of oproep tot actie begeleiden. Vormen hebben ook een gevoel van emotie, met vierkanten geassocieerd met kracht, cirkels met harmonie en comfort, en driehoeken met belang en actie.

textuur

textuur repliceert iets in de echte wereld. Door de textuur krijgen we een idee of iets ruw of glad is. Texturen zijn te zien in webdesign. Van papierachtige achtergronden tot de kleurrijke slierten van een Gaussiaanse vervaging, wees je bewust van de verschillende soorten texturen die je ontwerpen interessanter kunnen maken en ze een gevoel van lichamelijkheid kunnen geven.

kleur

om ontwerpen te maken die geen oogspanning zijn, moet u uzelf onderwijzen in de kleurtheorie. Inzicht in het kleurenwiel, complementaire kleuren, contrasterende kleuren, en de emoties die verschillende kleuren zijn gebonden aan zal u een betere webdesigner.Grids

Grids

Grids hebben hun wortels in de vroegste dagen van grafisch ontwerp. Ze functioneren zo goed in het ordenen van afbeeldingen, teksten en andere elementen in een webdesign. Leer hoe u uw web lay-outs structureert met behulp van rasters.

ken de basis van HTML

Hypertext markup language (HTML) geeft aanwijzingen voor hoe de inhoud, afbeeldingen, navigatie en andere elementen van een website worden weergegeven in iemands webbrowser. Hoewel je geen expert in HTML hoeft te zijn, helpt het nog steeds om enige bekendheid te hebben met hoe het werkt, zelfs als je een visueel gebaseerd ontwerpplatform zoals Webflow gebruikt.

HTML-tags zijn de instructies die een browser gebruikt om een website te genereren. Koppen, alinea ‘ s, koppelingen en afbeeldingen worden allemaal gecontroleerd door deze tags. U zult vooral willen weten hoe header tags zoals H1, H2, en H3 tags worden gebruikt voor de inhoud hiërarchie. Naast het beà nvloeden van de lay-out structuur, header tags zijn belangrijk in hoe web crawlers classificeren van een ontwerp en beïnvloeden hoe ze worden weergegeven in organische zoekranglijsten.

om meer te leren over de basisconcepten van HTML (er is ook een sectie over CSS), bekijk dan deze les die we hebben samengesteld in Webflow University.

CSS begrijpen

CSS (of cascading style sheets) biedt styling en extra instructies over hoe een HTML-element gaat verschijnen. Dingen doen zoals het toepassen van lettertypen, het toevoegen van opvulling, het instellen van uitlijning, het kiezen van kleuren, en zelfs het maken van rasters zijn allemaal mogelijk via CSS.

Als u weet hoe CSS werkt, krijgt u de vaardigheden om unieke websites te maken en bestaande sjablonen aan te passen. Laten we gaan over een paar belangrijke concepten van CSS.

CSS-klassen

een CSS-klasse is een lijst van attributen die samen komen in het stylen van een individueel element. Iets als body text zou het lettertype, de grootte en de kleur allemaal een deel van een enkele CSS-klasse.

CSS combo klassen

een combo klasse is gebouwd op een bestaande basis klasse. Het erft alle attributen zoals dimensionering, kleur en uitlijning die al op zijn plaats kunnen zijn. Attributen kunnen dan worden gewijzigd. Combo klassen bespaart u tijd en laat u het opzetten van variaties van een klasse die u kunt toepassen waar u nodig hebt om in een web design.

weten hoe CSS werkt is essentieel bij het leren van webdesign. Zoals vermeld in de sectie over HTML, raden we je aan om naar Webflow University te gaan voor meer informatie over hoe CSS werkt.

leer de basis van UX

UX is de magie die een website tot leven brengt, het transformeren van een statische opstelling van elementen in iets dat zich bezighoudt met de emoties van iemand scrollen door het.

het kleurenschema, de inhoud, de typografie, de lay-out en de visuals komen allemaal samen om uw publiek te dienen. User experience design gaat over precisie en het oproepen van gevoelens. Het biedt iemand niet alleen een vlotte reis, maar een ervaring die hen verbindt met de entiteit of het merk achter het webdesign.

hier zijn een paar UX principes die u moet weten.

gebruikerspersona ‘ s

Webdesign betekent begrip voor eindgebruikers. Je moet leren hoe je gebruikersonderzoek doet en hoe je gebruikerspersona ‘ s maakt. Daarnaast moet u weten hoe u deze informatie kunt gebruiken bij het maken van een ontwerp dat is geoptimaliseerd voor hun behoeften.

informatiearchitectuur

zonder duidelijke organisatie raken mensen in de war en stuiteren ze. Informatiearchitectuur en contentmapping bieden een blauwdruk voor hoe de website en elke sectie samenwerken om een duidelijke customer journey te bieden.

Gebruikersstromen

het construeren van gebruikersstromen kan een rol spelen wanneer u zich opwerkt naar uitgebreidere ontwerpprojecten, maar u zult in de toekomst beter af zijn als u hierover begint na te denken en ze uitwerkt voor uw vroege ontwerpen. Gebruikersstromen communiceren hoe mensen zich door een ontwerp bewegen. Ze helpen u om prioriteit te geven aan de belangrijkste secties en ervoor te zorgen dat mensen ze kunnen openen.

Wireframes

Wireframes geven aan waar op een webpagina koppen, tekst, afbeeldingen, formulieren en andere elementen zullen worden geplaatst. Zelfs als je het bouwen van een eenvoudige one-page web design, het in kaart brengen van een wireframe zal u een solide gids om uit te werken. Als je verder gaat naar meer gecompliceerde websites, zijn wireframes essentieel voor het creëren van een consistente ervaring, het structureren van lay-outs en het missen van niets dat moet worden opgenomen.

Prototyping

Prototypes kunnen verschillende niveaus van betrouwbaarheid hebben, maar fungeren als een representatie van een functionerend ontwerp. Beelden, interacties, inhoud en andere belangrijke elementen zijn allemaal aanwezig en repliceren het echte ontwerp. Prototypes worden gebruikt om feedback te krijgen en een ontwerp te verfijnen gedurende het hele proces.

vertrouwd raken met UI

een gebruikersinterface is een mechanisme dat een stukje technologie in werking stelt. Een deurknop is een gebruikersinterface. De volumeregeling op uw autoradio dat uw significante andere niet zal stoppen met knoeien met is een gebruikersinterface. En het toetsenbord waar je je pincode in invoert bij een ATM is een gebruikersinterface. Net zoals knoppen en andere mechanismen in de echte wereld iemand in staat stellen om te communiceren met machines, de gebruikersinterface elementen op een website kunnen iemand om acties in beweging te zetten.

laten we twee belangrijke UI-principes bekijken: intuïtief ontwerp en eenvoud.

hoe intuã tieve interfaces te creëren

interactie en interactie met een website moet consistent zijn en herhaalbare patronen volgen. Mensen die op een website landen, moeten onmiddellijk de systemen begrijpen die op hun plaats zijn om er doorheen te navigeren.

maak UI eenvoudig

UI bestaat om de bruikbaarheid te optimaliseren. Dit betekent dat de bedieningselementen gemakkelijk te gebruiken, evenals duidelijk in hun functionaliteit. Of u nu het minimaliseren van het aantal navigatie-opties, het maken van de kassa proces snel, of het integreren van andere interactieve elementen die de toegankelijkheid te verhogen, inzicht UI zal u helpen iemands ervaring in de interactie met een website te stroomlijnen.

natuurlijk is UI een uitgebreid onderwerp dat niet in een paar alinea ‘ s kan worden vastgelegd. We raden u aan om de blogpost “10 essentiële UI (user interface) design tips” als een primer naar UI.

gerelateerde leest: UX vs UI: belangrijke verschillen elke ontwerper moet weten

begrijp de basisprincipes van het maken van lay-outs

onze ogen klampen zich automatisch vast aan bepaalde ontwerppatronen, wat zorgt voor een gemakkelijke route door een webdesign. We weten intuïtief waar we moeten kijken omdat we dezelfde patronen steeds weer hebben gezien als we media hebben geconsumeerd in ons hele leven. Het kennen van ontwerppatronen zal u helpen websites te maken die een vlotte stroom naar de inhoud en visuals hebben. Twee gemeenschappelijke Web lay-out patronen die u moet weten over zijn Z-patronen en F-patronen.

Z-patroon

voor lay-outs met een besparing van woorden en afbeeldingen en royale hoeveelheden negatieve ruimte, biedt het Z-patroon een efficiënte manier om door een website te cruisen. Wanneer je begint te letten op waar je ogen door een ontwerp gaan, zul je meteen herkennen wanneer een Z-patroon op zijn plaats is.

F-patroon

ontwerpen die veel tekst bevatten, zoals voor een online publicatie of een blog, volgen vaak een duidelijk F-patroon. Aan de linkerkant van het scherm ziet u een lijst met artikelen of berichten en in het hoofdgedeelte van de pagina ziet u rijen met gerelateerde informatie. Dit patroon is geoptimaliseerd om mensen alle informatie te geven die ze nodig hebben, zelfs als ze er snel doorheen kijken.

gerelateerde leest: webpagina-indeling: website anatomie elke ontwerper moet

leren over typografie

lettertypen kunnen verschillende tonen of emoties geven en de leesbaarheid beïnvloeden. Als je leert over webdesign, is het essentieel om te weten hoe je typografie moet gebruiken.

typografie dient voor verschillende doeleinden in webdesign. Ten eerste dient het het utilitaire doel om inhoud leesbaar te maken. Maar het kan ook dienen als decoratie, en het smaakvolle gebruik van gestileerde typografie kan toevoegen aan de algehele esthetiek.

hier zijn drie typografische basisconcepten die u moet kennen.

Serif

Serif-lettertypen hebben minuscule regels die serif ‘ s worden genoemd die elke letter opsteken. Deze typografische stijl is terug te voeren op druk.

schreefloos

zoals de naam al aangeeft, missen schreefloos lettertypen de identificerende regels van schreeflettertypen. Deze typenfaces zijn te vinden via de digitale wereld van websites en apps.

Display

Display-lettertypen worden vaak gebruikt voor koppen en kunnen groot en impactvol zijn of gemaakt zijn van scherpe, dunne lijnen. Ze hebben meestal geavanceerde lettervormen en zijn bedoeld om iemands aandacht te trekken.

gerelateerde leest: typografisch ontwerp: lettertypestijlen en bronnen voor ontwerpers

Zet uw kennis in actie en bouw iets

u kunt tutorials bekijken, blogberichten lezen, online cursussen volgen en alle theorie en informatie over webdesign opnemen, maar de enige manier om webdesigner te worden is beginnen met webdesign.

begin met een eenvoudig project. Misschien iemand die je kent heeft hulp nodig bij het maken van een portfolio of heeft een side hustle die ontbreekt elke vorm van aanwezigheid op het web. Bied hen iets gratis te ontwerpen.

een blog is ook een groot beginnersproject. Dit geeft je praktische ontwerpervaring in het leren hoe je dingen als een CMS kunt gebruiken, evenals een showcase voor je schrijfvaardigheden.

het bouwen van een website voor een nep bedrijf of bedrijf is een andere leuke creatieve oefening in het ontwikkelen van uw ontwerp chops. Plus, u kunt het toevoegen aan uw portfolio.

krijg een mentor

mentoren zijn waardevol omdat ze zijn geweest waar je bent — aan het begin — en hebben de wens om u te helpen door de zuurverdiende lessen die ze hebben geleerd. Ze hebben een diepe bron van expertise en kennis. Ze zijn een geweldige bron in het krijgen van feedback over uw werk en het vinden van wat je goed doet en wat moet worden verbeterd.

bij het zoeken naar de juiste mentor, zorg ervoor dat je iemand vindt die het type ontwerp doet dat je bewondert en gespecialiseerd is in wat je wilt leren. Mentoren kunnen u een duidelijk pad van jaren doorgebracht in het veld, zodat u niet hoeft te struikelen door het leren van webdesign.

geen code geeft een eenvoudige toegang tot webdesign

er was een tijd, niet zo lang geleden, dat je een diep begrip van HTML en CSS moest hebben om handmatig de code achter een webdesign te schrijven. Vandaag, zonder code tools zoals Webflow, is het mogelijk om samen te stellen een website en start het in een korte tijd. Wat dagen of weken in beslag nam, kan nu in uren gebeuren.

natuurlijk gaat er zoveel in het creëren van een goed webdesign. Het leren van de grondbeginselen achter visual design, de basisprincipes van UI en UX, en te weten hoe de front-end en back-end functie zal u een meer goed afgeronde ontwerper.

of u nu net begint of een expert bent, Webflow biedt een intuïtief visueel gebaseerd platform om u in staat te stellen uw creativiteit te realiseren. Samen met een eenvoudig te gebruiken manier om websites te lanceren, Webflow heeft een hele gemeenschap om u advies te geven en om u te helpen uw vaardigheden te verhogen. We kijken ernaar uit om u te zien werken in onze Showcase.