30 tips om webdesign te leren in 30 dagen
Staat het leren van de basisprincipes van webdesign nog steeds op uw "ooit" lijst? Waarom ben je nog niet begonnen? We hebben 30 tips en bronnen samengesteld om u te helpen deze maand webdesign te leren (en misschien zelfs een nieuw carrièrepad te vinden!)
Grafische ontwerpers, printontwerpers en creatieven die iets nieuws willen leren of een website willen doorbreken, moeten stoppen met uitstellen. Elke dag dat je die eerste stap niet zet, laat je een dag verder achter op iedereen!
Volg deze stappen om te leren hoe u uw eerste website, best practices uit de branche en nog veel meer kunt maken - allemaal binnen 30 dagen!
1. Start een website
De beste manier om webdesign te leren, is door het te gaan doen. Dat is het advies van David Kadavy, auteur van Design Hackers.
Ik raad je aan een blog te starten. Ik begon een blog alleen om een webdesign-speelplaats te hebben, en 7 jaar later lanceerde ik een best verkocht boek over dit 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 verprutst.
Je hoeft niet te beginnen met een enorme website of een gek ontwerp; begin klein. Speel met de website, zoek uit wat de dingen doet werken. (En zorg ervoor dat u de code inspecteert, zodat u vertrouwd kunt raken met wat uw website doet werken.)
Snel aan de slag? Een websitebouwer zoals Wix kan u helpen een voorsprong te krijgen met een stijlvol websiteontwerp, terwijl u de concepten en bouwstenen leert van wat er in een website terechtkomt.
2. Lees alles wat je kunt
Start met lezen. Omdat je op deze blog zit, ben je waarschijnlijk gewend om bij te houden wat er gebeurt in de wereld van design. Blijf lezen.
Lees alles wat u kunt over website-ontwerp, trends, technieken en best practices. Volg ontwerpers die je bewondert op sociale media.
Werp ook een breed net voor het lezen van uw websiteontwerp. Lees over de basis om wat code te leren, lees over ontwerptheorie en lees tutorials en huidige artikelen.
3. Wees een effectieve communicator
Als je niet de meest gearticuleerde persoon bent, poets dan die vaardigheden op. Een groot deel van het website-ontwerp is communicatie.
Website-ontwerpers moeten regelmatig met klanten communiceren om erachter te komen welk probleem het ontwerp moet oplossen; ze moeten die oplossingen communiceren en ook implementeren.
4. Abonneer u op Tuts + & Envato Elements
Overweeg een abonnement op Envato Elements, waarmee u ook toegang krijgt tot het uitstekende leermiddel Tuts +.
Tuts + publiceert regelmatig cursussen over grafisch en webdesign, van basistechnieken tot de nieuwste geavanceerde benaderingen en ontwikkelingen. Het is volledig op eigen tempo, onderwezen door deskundige instructeurs. U krijgt ook toegang tot Envato Elements, een geweldige bron voor het vinden van afbeeldingen, sjablonen en meer om in uw webontwerpwerk in te pluggen.
5. Denk in HTML
HTML of opmaaktaal voor hypertext is een hoeksteen van het ontwerpen van websites. HTML is het skelet dat helpt bij het creëren van de structuur van een website en als je de taal eenmaal hebt gelezen, zal de wereld van website-ontwerp veel logischer zijn.
W3Schools heeft een geweldige HTML-startershandleiding met honderden HTML-voorbeelden waarmee u op het scherm kunt spelen om te zien wat er gebeurt en hoe het precies werkt. (Misschien vindt u het intuïtiever dan u zich had voorgesteld.)
6. Speel met Code op Codeacademy
Hoewel HTML een goed begin is, kun je bijna elke programmeertaal van Codeacademy leren. De gratis set tools leert je coderen met behulp van interactieve activiteiten en games.
Je kunt een Codeacademy-cursus volgen waar en wanneer je die nodig hebt en zo nodig starten en stoppen. Kies een onderwerp om te leren - webontwikkeling, programmeren, data science - of taal om op te focussen - HTML & CSS (een geweldige plek om te beginnen), Python, Java, SQL, Ruby en meer.
7. Leer CSS te begrijpen
CSS, of trapsgewijze opmaakmodellen, bepalen de presentatie van een document dat is 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 geweldige verzameling 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, het specificeren van lengte, kleur en andere eenheden in CSS, cascade en overerving, basisprincipes van boxmodellen en CSS voor foutopsporing. Vervolgens gaan modules verder om stylingtekst en -vakken uit te leggen.
8. Pas uw ontwerpvaardigheden toe op het web
Als u al in een creatief of grafisch ontwerpveld werkt, bedenk dan de dingen waarvan u al weet dat u deze ook op het ontwerp van websites kunt toepassen. De principes die iets visueel aantrekkelijk maken, veranderen niet op basis van medium en al die ontwerptheorie komt ook van pas 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 prachtig gecodeerde website als je er geen interactie mee wilt hebben?
9. Besteed aandacht aan websites waar u van houdt
Let op websites waar u van houdt. Hoe zit het met jou? (En hoe kun je die elementen leren repliceren?) Let op:
- Typografie
- Navigatie
- Gebruik van afbeeldingen en ruimte
- Ontwerp van formulieren
- Animatie- en scrolleffecten
- Kleur
10. Teken een draadmodel
Wireframing is de brainstorm van een webdesigner.
In zijn puurste vorm is een draadframe een schets van wat de website zal zijn. Het is geen overzicht 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 daarin.
Weet u niet zeker hoe u een draadframe moet maken? Digitale telepathie heeft een gids met praktische tips om u te helpen leren.
11. Neem de tijd om Sketch te leren
Sketch is een vectortekenprogramma voor Mac waarmee u eenvoudig ontwerpelementen kunt maken. Veel ontwerpers wenden zich tot Sketch om UI-elementen te maken en ontwerpblokken te herhalen.
Het zit boordevol plug-ins en stelt u in staat code te exporteren voor eenvoudig gebruik en toegang. Het is een van de krachtigste en populairste tools die er zijn sinds Adobe's Creative Suite en het is de moeite waard.
12. 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 u 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 verband houden met het werk dat je doet. Als je een website hebt met online chat, begin dan met het leren over bots. Of als je veel video-inhoud gebruikt, speel dan rond met 360-graden video.
Elementen zoals kunstmatige intelligentie en virtuele of augmented reality zijn zelfs nog complexer, maar worden waarschijnlijk later geïntegreerde onderdelen van het landschap van het websiteontwerp. U moet ten minste weten wat ze zijn en wat de mogelijke toepassingen kunnen zijn.
13. Word vertrouwd met SEO
Hoewel veel webontwerpers denken dat een SEO-specialist het aankan om een website klaar te maken voor zoekmachines om te lezen, is er veel ontwerpwerk dat verband houdt met SEO.
Van de manier waarop afbeeldingen worden geüpload tot het maken van schone code die snel is, tot het opnemen van metabeschrijvingen op pagina's en elementen, de ontwerper moet zoekdenken opnemen in zijn workflow.
Freelancers, ook voor jou is dit van levensbelang. De meeste klanten zijn slim genoeg om te vragen om een SEO-geoptimaliseerde website. Als u alleen werkt, moet u genoeg weten om een solide raamwerk te creëren dat Google kan lezen (en de klant kunnen doorverwijzen naar een SEO-specialist als er meer werk moet worden gedaan).
14. Speel met een Website Builder
Een websitebouwer kan een geweldige manier zijn om vertrouwd te raken met best practices en hoe u kunt beginnen met het bouwen en ontwerpen van websites.
De meeste van deze tools hebben veel sjablonen en u kunt elementen aanpassen en zelfs codefragmenten toevoegen. Voor eenvoudige sites hebben veel websitebouwers ook een gratis plan waarmee u een persoonlijke portfoliopagina of basiswebsite kunt maken die als een speeltuin voor u dient.
Kies vervolgens de stukjes uit de websitebouwer. Kijk hoe ze zijn ontworpen en gecodeerd om een idee te krijgen van hoe het allemaal samenkomt. U zult versteld staan van wat u kunt achterhalen door gewoon een ander ontwerp uit elkaar te halen.
15. Zoek een mentor
Is er iemand met wie je werkt die je bewondert als webdesigner? Neem ze mee naar de lunch en kies hun hersens over de industrie.
Het vinden van een mentor die bereid is 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 live persoon die je periodiek persoonlijk kunt ontmoeten. (Misschien is het de moeite waard om online en persoonlijke mentoren te hebben.)
16. Word lid van de CodePen-gemeenschap
Zodra u vertrouwd raakt met wat code en programmeren, wilt u lid worden van de CodePen-community. Met de open-sourcecommunity kunt u codefragmenten delen en bewerken in een soort sociaal netwerk.
Hier is iets meer van de oprichters van de site: “CodePen is een omgeving voor sociale ontwikkeling. In de kern kunt u code in de browser schrijven en de resultaten ervan bekijken terwijl u bouwt. Een handig en bevrijdend hulpmiddel voor ontwikkelaars van elke vaardigheid, en vooral krachtig voor mensen die leren coderen. We richten ons voornamelijk op front-end-talen zoals HTML, CSS, JavaScript en preprocessing-syntaxen die in die dingen veranderen. ”
17. Volg een les
Voor sommige leerlingen is een meer formele klasomgeving het beste.
Er zijn een heleboel lessen beschikbaar - persoonlijk en online - om de basisprincipes van webdesign te leren. Begin met een lokale universiteit of online leercentra zoals Udemy of Coursera. Kies een klas op je huidige vaardigheidsniveau en blijf gewoon doorgaan.
18. Wil je iets doen? Google het
Zoek voor de niet-zo-traditionele leerling het antwoord op het webontwerpprobleem op Google. Er zijn zoveel tutorials en video's beschikbaar die u door bijna elk probleem en elke oplossing kunnen leiden.
De sleutel is om precies te zoeken wat u moet weten en naar een betrouwbare bron te zoeken voor het antwoord. Hier is nog een tip als het gaat om tutorials en video's - recentere inhoud zal je waarschijnlijk een beter, completer en relevanter antwoord geven. (Vergeet niet dat sommige dingen snel veranderen.)
19. Besteed aandacht aan de gebruikerservaring
Niets kan een website maken of breken zoals het ontwerpen van gebruikerservaringen. Je moet ervoor plannen en het begrijpen.
Hier is hoe de Interaction Design Foundation UX-ontwerp beschrijft:
User Experience (UX) -ontwerp is het proces van het maken van producten die zinvolle en persoonlijk relevante ervaringen bieden. Dit omvat het zorgvuldig ontwerpen van zowel de bruikbaarheid van een product als het plezier dat consumenten ervan zullen genieten. Het houdt zich ook bezig met het hele proces van verwerving en integratie 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 de factoren die het proces opzettelijk beïnvloeden te creëren en vorm te geven. Om dit te doen, zal een UX-ontwerper het waarom, wat en hoe van productgebruik overwegen.
20. Besteed aandacht aan ontwerptrends
Hoe ziet een modern website-ontwerp 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 hebt gedownload of naar een website op je telefoon hebt gekeken, 2016 was, heb je veel te verzinnen.
Door websiteontwerpen te maken die moderne accenten en trends in het ontwerp hebben geïntegreerd, zullen uw projecten opvallen. Hoe weet je wat trending is? Blijf sites zoals deze lezen en let op wat andere ontwerpers doen. Let op de kleuren en stijlen en functies die zijn opgenomen in de websites die u vaak bezoekt.
21. Creëer zonder kleur
Begin elk ontwerp zonder kleur. Een geweldige ontwerper vertelde me ooit dat als je ontwerp in zwart-wit werkt, het onberispelijk van kleur zal zijn.
Dat is misschien niet altijd het geval, maar het is een goed startpunt.
Door ontwerpen in zwart-wit te maken, kunt u zien waar elementen contrasteren en hoe ze samen spelen. Je hebt alle emotionele associaties weggenomen met kleur of oogbewegingen die daardoor gebeuren. Deze eenvoudigste vorm van ontwerp geeft je een idee of iets als concept werkt voordat je verder gaat met de afronding.
22. Leer van Google Fonts te houden
Google Fonts is je vriend.
Ongeacht hoe u over Google denkt, de mogelijkheid om door lettertypen te bladeren, ze te sorteren en te selecteren waarvan u weet dat ze werken in website-ontwerpen is belangrijk. U hoeft niet na te denken over licenties of of 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 bespaart u op de lange termijn veel tijd.
23. Kies een UI Kit
Download een gebruikersinterface of icon kit en kies het uit elkaar.
Net zoals u de code van een website kunt inspecteren, kijk ook hoe ontwerpelementen voor het web zijn geconstrueerd. Let op de schaal en het raster, kijk naar de kleurenmixen en hoe bestanden zijn georganiseerd in Photoshop of Illustrator.
Zoek naar een kit om te downloaden met elementen in meerdere formaten voor beeldschermen met hoge resolutie. (Het downloaden van een aantal JPEG's zal je niet zo goed van pas komen.)
Probeer vervolgens zelf een of twee elementen te bouwen of aan te passen.
24. Word een typograaf
Modern website-ontwerp heeft een sterke focus op typografie ... goede typografie. Van heldenkoppen met gigantische woorden tot tekstlagen die een gebruiker in het ontwerp betrekken, het is van vitaal belang om de principes te begrijpen van het koppelen van type-elementen en het bouwen van boeiende tekstblokken.
Begin met Ellen Lupton's Thinking with Type. (Er is ook een boek met dezelfde naam.) Lupton is de autoriteit op het gebied van typografie en haar informatie zal je in een mum van tijd doen denken als een typograaf.
25. Spring in JavaScript
Wanneer je je redelijk goed begint te voelen over het spelen met webdesign, daag jezelf dan opnieuw uit om JavaScript te leren. Na HTML en CSS is dit de belangrijkste taal van internet.
JavaScript is een tool waarmee ontwerpers complexe dingen en interactie op webpagina's kunnen implementeren. Het is wat een schuifregelaar maakt of die parallax-animatie animeert.
Learn JS heeft een interactieve tutorial om u op weg te helpen.
26. Werk uw portfolio bij
Zodra u begint met ontwerpen voor het web, moet u uw portfolio bijwerken met webontwerpprojecten. Met deze eenvoudige actie kunt u uzelf en anderen laten zien dat webdesign deel uitmaakt van uw repertoire.
Een bijgewerkte portfolio kan potentiële klanten helpen te zien hoe uw 'stijl' eruit ziet. Zorg ervoor dat u lay-outs, kleuren, typografie en verschillende technieken laat zien die laten zien wat u kunt doen.
27. Daag jezelf uit
Met zoveel snelkoppelingen en codefragmenten om u te helpen bijna elk website-probleem op te lossen, wordt u niet lui. Vergeet niet om jezelf voortdurend uit te dagen om nieuwe vaardigheden, nieuwe technologieën te leren en je webdesignspel te blijven verbeteren.
Het enige aan dit veld is dat het voortdurend verandert; er is altijd iets nieuws te leren of te proberen.
28. Maximaliseer uw ervaring
Ga erop uit en ontwerp. Je moet websites gaan ontwerpen om een webdesigner te zijn.
Begin klein, maar neem projecten met anderen aan. Vraag om mee te werken aan een project met een team op het werk. Pak een kleine website aan voor een vriend. Hoe meer ervaring je hebt met het bouwen van websites, hoe beter en sneller je wordt.
Waar wacht je op? Stop met uitstellen.
29. Vraag om feedback
Gebruik uw netwerk om feedback te verzamelen over uw website-ontwerpprojecten, hoe klein u ook denkt dat ze zijn. Luister naar deze feedback - zelfs als je het niet leuk vindt en kijk wat je kunt leren.
Heeft de persoon die feedback geeft, afgezien van visuele voorkeur, suggesties gegeven om de website beter te laten functioneren? Kunnen ze gemakkelijk het doel van het ontwerp begrijpen? Hebben ze verbinding gemaakt met de berichten?
30. Blijf nieuwe dingen leren
Om een geweldige website-ontwerper te zijn, moet je gewoon blijven spelen, proberen en nieuwe dingen leren. Maak een punt om te netwerken en te communiceren met anderen in het veld, zodat u op de hoogte kunt blijven van technieken en visuele veranderingen waar veel vraag naar is.
Als u website-ontwerp wilt leren, dan is dit waarschijnlijk al iets dat u regelmatig doet. Maar dit is een evoluerend veld en het verandert bijna elke dag. Vraag het maar aan iedereen die het doet.
