staat het leren van de basisprincipes van webdesign nog steeds op uw “someday” – lijst? Waarom ben je nog niet begonnen? We hebben samen 30 tips en middelen om u te helpen beginnen met het leren van web design Deze maand (en misschien zelfs vinden jezelf een nieuwe carrière pad!)

grafisch ontwerpers, printontwerpers en creatievelingen die iets nieuws willen leren of op de website willen inbreken, moeten stoppen met uitstellen. Elke dag dat je die eerste stap niet zet laat je een dag verder achter iedereen!

volg deze stappen om te leren hoe u uw eerste website, industrie best practices, en nog veel meer te maken—allemaal in 30 dagen!

Start een Website

de beste manier om webdesign te leren is door het te beginnen. Dat is het advies van David Kadavy, auteur van Design <voor> Hackers.

Ik adviseer u een blog te starten. Ik begon een blog alleen maar om een webdesign speeltuin te hebben, en 7 jaar later, lanceerde ik een bestseller over het onderwerp. Het hebben van een persoonlijk project, zoals een blog, geeft je een plek waar je nieuwe dingen kunt proberen, en je baas zal je niet ontslaan als je het verknoeit.

u hoeft niet te beginnen met een massieve website of een gek ontwerp; start klein. Spelen met de website, erachter te komen wat maakt dingen werken. (En zorg ervoor dat u de code inspecteert, zodat u vertrouwd kunt raken met wat uw website laat werken.)

wilt u snel aan de slag? Een website builder als Wix kan helpen om u een voorsprong te geven met een stijlvol website ontwerp, als je begint te leren van de concepten en bouwstenen van wat er in een website gaat.

lees alles wat u kunt

begin met lezen. Omdat je op deze blog bent, ben je waarschijnlijk gewend om bij te houden wat er gebeurt in de wereld van design. Blijf lezen.

Lees alles over websiteontwerp, trends, technieken en best practices. Volg ontwerpers die je bewondert op social media.

Cast een breed net voor het lezen van uw website ontwerp. Lees over de basis om wat code te leren, lees over design theorie en lees tutorials en huidige artikelen.

Wees een effectieve Communicator

Als u niet de meest gearticuleerde persoon bent, moet u die vaardigheden bijspijkeren. Een groot deel van website ontwerp is communicatie.

Websiteontwerpers moeten regelmatig met klanten communiceren om erachter te komen welk probleem het ontwerp moet oplossen; zij moeten deze oplossingen communiceren en ook implementeren.

Abonneer op Tuts+ & Envato Elements

overweeg een abonnement op Envato Elements, waardoor u ook toegang krijgt tot de uitstekende Tuts+ leerbron.

Tuts + publiceert regelmatig cursussen over grafisch en webdesign, van basistechnieken tot de nieuwste geavanceerde benaderingen en ontwikkelingen. Het is volledig eigen tempo, onderwezen door deskundige instructeurs. U krijgt ook toegang tot Envato elementen, dat is een geweldige bron voor het vinden van afbeeldingen, sjablonen, en meer aan te sluiten op uw web design werk.

Think in HTML

HTML, of Hypertext markup language, is een hoeksteen van website design. HTML is het skelet dat helpt bij het creëren van de structuur van een website en als je eenmaal de taal kunt lezen, zal de wereld van website design een stuk zinvoller te maken.

W3Schools heeft een geweldige HTML starter tutorial met honderden HTML voorbeelden waarmee je op het scherm kunt spelen om te zien wat er gebeurt en hoe het precies werkt. (Misschien vind je het intuïtiever dan je dacht.)

speel met Code bij Codeacademy

hoewel HTML Een goed begin is, kunt u bijna elke programmeertaal van Codeacademy leren. De gratis set van tools leert u te programmeren met behulp van interactieve activiteiten en games.

u kunt een codeacademy-cursus ophalen waar en wanneer u deze nodig hebt en starten en stoppen als dat nodig is. Kies een onderwerp voor learn-web development, programming, data science – of taal om op te focussen-HTML & CSS (een geweldige plek om te beginnen), Python, Java, SQL, Ruby, en meer.

leer CSS begrijpen

CSS, of cascading style sheets, definieer de presentatie van een document geschreven in HTML, of XML en SVG.

zoals gedefinieerd door Mozilla

CSS beschrijft hoe elementen moeten worden weergegeven op het scherm, op papier, in spraak of op andere media.

Mozilla heeft ook een grote verzameling van CSS-Bronnen om aan de slag te gaan, met een solide introductie van hoe CSS werkt, inclusief selectors en eigenschappen, het schrijven van CSS-regels, het toepassen van CSS op HTML, hoe lengte, kleur en andere eenheden in CSS, cascade en overerving, box model basics, en het debuggen van CSS. Vervolgens modules gaan naar styling tekst en dozen uit te leggen.

Pas uw ontwerpvaardigheden toe op het Web

Als u al werkt in een creatief of grafisch ontwerpveld, denk dan na over de dingen die u al weet en die u ook kunt toepassen op website design. De principes die iets visueel aantrekkelijk maken veranderen niet op basis van medium en al die ontwerptheorie zal ook van pas komen in de digitale ruimte.

hoewel elementen zoals het leren van code misschien niet natuurlijk aanvoelen, is het hebben van een ontwerpachtergrond een enorme bonus. Wat heb je aan een mooi gecodeerde website als je er niet mee wilt communiceren?

Besteed aandacht aan Websites waar u van houdt

let op websites waar u van houdt. Wat is daar aantrekkelijk aan? (En hoe kun je leren om die elementen te repliceren?) Let op:

• typografie
• navigatie
• gebruik van afbeeldingen en ruimte
• ontwerp van formulieren
• animatie en scroll-effecten
• kleur

teken een Wireframe

wireframing is een webdesigner brainstormen.

in zijn puurste vorm is een wireframe een schets van wat de website zal zijn. Het is geen schets van esthetische elementen, eerder een blauwdruk van de website. Het tekenen van een draadframe gaat niet echt over het uiterlijk van dit ontwerp, het gaat over de informatiestructuur erin.

weet niet zeker hoe een wireframe moet worden aangemaakt? Digital Telepathy heeft een gids met best practices om je te helpen leren.

neem de tijd om Sketch te leren

Sketch is een vector-tekenprogramma voor Mac dat het eenvoudig maakt om ontwerpelementen te maken. Veel ontwerpers wenden zich tot schets te maken UI-elementen en het herhalen van ontwerp blokken.

Het zit boordevol plugins en stelt u in staat om code te exporteren voor eenvoudig gebruik en toegang. Het is een van de meest krachtige, en populaire, tools om rond te komen sinds Adobe ‘ s Creative Suite en de moeite waard uw tijd.

blijf op de hoogte van technologie

AI, VR, AR, 360-graden video, bots.

het kan moeilijk zijn om zoveel nieuwe technologieën en trends bij te houden. Maar je moet een punt maken om op de hoogte te blijven van deze veranderingen.

pak ze één voor één aan en begin met technologieën die het meest direct gerelateerd zijn aan het werk dat u doet. Als u een website met online chat, beginnen met het leren over bots. Of als je veel video-inhoud gebruikt, speel dan rond met 360-graden video.

elementen zoals artificiële intelligentie en virtual of augmented reality zijn nog complexer, maar zullen waarschijnlijk later deel gaan uitmaken van het ontwerplandschap van de website. Op een minimum, je moet weten wat ze zijn en wat de mogelijke toepassingen kunnen zijn.

Maak het u gemakkelijk met SEO

hoewel veel webdesigners denken dat een SEO-specialist het aankunnen om een website klaar te maken voor zoekmachines om te lezen, is er veel ontwerpwerk dat verbonden is met SEO.

vanaf de manier waarop afbeeldingen worden geüpload naar het maken van schone code die snel is om metabeschrijvingen op pagina ‘ s en elementen op te nemen, zou de ontwerper zoekdenken in zijn workflow moeten opnemen.

Freelancers, dit is ook van vitaal belang voor u. De meeste klanten zijn slim genoeg om te vragen voor een SEO-geoptimaliseerde website. Als u alleen werkt, moet u genoeg weten om een solide kader dat Google kan lezen te creëren (en in staat zijn om de klant te verwijzen naar een SEO specialist als er meer werk moet worden gedaan).

speel met een Website Builder

een website builder kan een geweldige manier zijn om vertrouwd te raken met best practices en hoe je begint met het bouwen en ontwerpen van websites.

De meeste van deze tools hebben veel sjablonen en stellen u in staat om elementen aan te passen en zelfs codefragmenten toe te voegen. Voor eenvoudige sites, veel website bouwers hebben ook een gratis plan waar u een persoonlijke portfolio pagina of eenvoudige website die dient als een speeltuin voor u kunt maken.

haal dan de stukjes uit elkaar in de websitemaker. Kijk hoe ze zijn ontworpen en gecodeerd om een gevoel te krijgen voor hoe het allemaal samenkomt. Je zult versteld staan van wat je kunt achterhalen door gewoon een ander ontwerp uit elkaar te halen.

zoek een Mentor

is er iemand met wie je werkt en die je bewondert als webdesigner? Neem ze mee naar de lunch en kies hun mening over de industrie.

het vinden van een mentor die bereid is om met u samen te werken en u te helpen nadenken over het veld en hoe u zelf webdesign kunt leren, kan van onschatbare waarde zijn. En hoewel je waarschijnlijk een mentor kunt vinden in een online community, is niets beter dan een levende persoon die je regelmatig persoonlijk kunt ontmoeten. (Misschien is het de moeite waard om online en in-person mentoren.)

Word lid van de Codepen-gemeenschap

zodra u vertrouwd raakt met wat code en programmeren, wilt u lid worden van de CodePen-gemeenschap. Met de opensource-community kunt u codefragmenten delen en bewerken in een soort sociaal netwerk.

Hier is een beetje meer van de oprichters van de site: “CodePen is een sociale ontwikkelingsomgeving. In het hart, het stelt u in staat om code te schrijven in de browser, en zie de resultaten van het als je bouwt. Een nuttig en bevrijdend hulpmiddel voor ontwikkelaars van elke vaardigheid, en in het bijzonder empowerment voor mensen die leren programmeren. We richten ons vooral op front-end talen zoals HTML, CSS, JavaScript en preprocessing syntaxes die veranderen in die dingen.”

volg een les

voor sommige leerlingen is een formelere klaslokaalinstelling het beste.

Er zijn een heleboel lessen beschikbaar-in-persoon en online-voor u om web design basics te leren. Begin met een lokaal college of online leerhubs zoals Udemy of Coursera. Pak een klas op je huidige niveau en blijf doorgaan.

wilt u iets doen? Google It

voor de niet-zo-traditionele leerling vindt u het antwoord op het webdesignprobleem op Google. Er zijn zoveel tutorials en video ‘ s beschikbaar die u door bijna elk probleem – en oplossing kunnen leiden.

de sleutel is om precies te zoeken wat u moet weten en te kijken naar een gerenommeerde bron voor het antwoord. Hier is een andere tip als het gaat om tutorials en video ‘ s – meer recente inhoud is waarschijnlijk gaat om u een beter, completer en relevanter antwoord te geven. (Vergeet niet, sommige van deze dingen is snel aan het veranderen.)

let op de gebruikerservaring

niets kan een website maken of breken zoals user experience design. Je moet het plannen en begrijpen.

zo beschrijft de Interaction Design Foundation UX design:

User experience (UX) design is het proces van het creëren van producten die zinvolle en persoonlijk relevante ervaringen bieden. Het gaat hierbij om het zorgvuldig ontwerpen van zowel de bruikbaarheid van een product als het plezier dat consumenten zullen ontlenen aan het gebruik ervan. Het houdt zich ook bezig met het hele proces van het verwerven en integreren van het product, inclusief aspecten van branding, ontwerp, bruikbaarheid en functie.

UX ontwerpers, of ontwerpers die zich bewust zijn van het proces van ervaringsvorming, proberen bewust de factoren te creëren en vorm te geven die het proces beïnvloeden. Om dit te doen, zal een UX ontwerper het waarom, wat, en hoe van productgebruik overwegen.

let op ontwerptrends

Hoe ziet een modern websiteontwerp eruit? Het is geen strikvraag. Om moderne websites en gebruikerservaringen te ontwerpen, moet u weten wat gebruikers willen en hoe ze ermee omgaan. Als de laatste keer dat je een app gedownload of keek naar een website op uw telefoon was 2016, Je hebt veel grond te maken.

het creëren van websiteontwerpen die moderne accenten en trends in het ontwerp hebben geïntegreerd, zal uw projecten helpen opvallen. Hoe weet je wat trending is? Houd het lezen van sites als deze en aandacht besteden aan wat andere ontwerpers doen. Let op de kleuren en stijlen en functies die zijn opgenomen in de websites die u regelmatig bezoekt.

Maak zonder kleur

Start elk ontwerp zonder kleur. Een grote ontwerper vertelde me eens dat als uw ontwerp in zwart-wit werkt, het onberispelijk van kleur zal zijn.

die misschien niet altijd klopt, maar het is een goed uitgangspunt.

door ontwerpen in zwart en wit te maken, kunt u zien waar elementen contrasteren en hoe ze samen spelen. Je hebt alle emotionele associaties met kleur of oogbewegingen verwijderd die daardoor gebeuren. Deze eenvoudigste vorm van ontwerp zal u een idee geven als iets werkt als een concept voordat u verder gaat met het afronden van het.

leer van Google Fonts houden

Google Fonts is uw vriend.

ongeacht hoe u zich voelt over Google, de mogelijkheid om te bladeren, sorteren en selecteren lettertypen waarvan u weet dat ze zullen werken in website ontwerpen is belangrijk. U hoeft niet na te denken over licenties of als lettertypen compatibel zijn met specifieke browsers of niet.

de beperking is dat je alleen hebt wat er in de Google Fonts-bibliotheek staat om mee te werken. Maar als je het probeert kun je iets vinden dat bij bijna elk project past. Het zal je een hoop tijd besparen op de lange termijn.

haal een UI-Kit uit elkaar

Download een gebruikersinterface of icon-kit en haal het uit elkaar.

net zoals u de code van een website kunt inspecteren, kijk dan hoe ontwerpelementen voor het web worden geconstrueerd. Let op de schaal en het raster, kijk naar de kleurenmixen en hoe bestanden worden georganiseerd binnen Photoshop of Illustrator.

zoek naar een te downloaden kit met elementen in meerdere formaten voor beeldschermen met hoge resolutie. (Het downloaden van een stel JPEG ‘ s gaat je niet zo goed van dienst zijn.)

probeer dan zelf een of twee elementen te bouwen of aan te passen.

typograaf worden

Modern website design heeft een sterke focus op typografie … goede typografie. Van hero headers met gigantische woorden tot lagen tekst die een gebruiker in het ontwerp te trekken, het begrijpen van de principes van het koppelen van type elementen en construeren boeiende tekstblokken is van vitaal belang.

begin met Ellen Lupton ‘ s denken met Type. (Er is ook een boek met dezelfde naam.) Lupton is de autoriteit op het gebied van typografie en haar informatie zal je denken als een typograaf in een mum van tijd.

Spring in JavaScript

wanneer u zich vrij goed begint te voelen over het ploeteren met webdesign, Daag uzelf dan opnieuw uit om JavaScript te leren. Na HTML en CSS is het de belangrijkste taal van het web.

JavaScript is een tool die ontwerpers in staat stelt om complexe dingen en interactie op webpagina ‘ s te implementeren. Het is wat maakt een slider slide of dat parallax animatie animeren.

leer JS heeft een interactieve handleiding om u te helpen aan de slag te gaan.

Update uw Portfolio

zodra u begint met ontwerpen voor het web, zorg ervoor dat u uw portfolio bijwerkt met webdesignprojecten. Deze eenvoudige actie zal je helpen jezelf te laten zien … en anderen … dat webdesign deel uitmaakt van je repertoire.

een bijgewerkte portfolio kan potentiële klanten helpen om te zien hoe uw” stijl ” eruit ziet. Zorg ervoor dat u lay-outs, kleuren, typografie en verschillende technieken die laten zien wat je kunt doen.

Daag jezelf uit

Met zoveel snelkoppelingen en codefragmenten om je te helpen bijna elk website probleem op te lossen dat je hebt, word niet lui. Vergeet niet om jezelf voortdurend uit te dagen om nieuwe vaardigheden te leren, nieuwe technologieën en blijven verbeteren van uw web design game.

het enige aan dit veld is dat het voortdurend verandert; er is altijd iets nieuws om te leren of te proberen.

Maximaliseer uw ervaring

Ga naar buiten en ontwerp. Je moet beginnen met het ontwerpen van websites om een webdesigner te zijn.

Start klein, maar neem samen met anderen projecten aan. Vraag om mee te doen aan een project met een team aan het werk. Pak een kleine website voor een vriend. Hoe meer ervaring je hebt met het bouwen van websites, hoe beter en sneller je zult krijgen.

waar wacht u op? Hou op met uitstellen.

vraag om Feedback

Gebruik uw netwerk om feedback te verzamelen over uw websiteontwerpprojecten, ongeacht hoe klein u denkt dat ze zijn. Luister naar deze feedback-zelfs als je het niet leuk vindt en zie wat je kunt leren.

naast visuele voorkeur, heeft de persoon die feedback geeft suggesties gedaan om de website beter te laten functioneren? Konden ze het doel van het ontwerp gemakkelijk begrijpen? Hebben ze verbinding gemaakt met de berichten?

blijf Nieuwe Dingen Leren

om een geweldige websitedesigner te zijn, hoeft u alleen maar nieuwe dingen te blijven spelen, proberen en leren. Maak een punt om te netwerken en te communiceren met anderen in het veld, zodat u kunt blijven op de hoogte van technieken en visuele veranderingen die in de vraag zijn.

als u website design wilt leren, dan is dit waarschijnlijk al iets wat u regelmatig doet. Maar dit is een evoluerend veld, en het blijft bijna elke dag veranderen. Vraag het maar aan iedereen die het doet.