10 handmatige zelfstudies voor het starten van webontwerpers

Dus begin je interesse te tonen in webdesign, maar heb je moeite om erachter te komen waar te beginnen? Wilt u geweldige websites maken, leren HTML / CSS coderen en meer te weten komen over webstandaarden en de gebruikerservaring? Als dat zo is, hebben we een lijst met zorgvuldig geselecteerde Envato-zelfstudies die u op weg moeten helpen!

Eerste dingen eerst

Voordat je ingaat op al deze geweldige tutorials geschreven door zeer getalenteerde ontwerpers en ontwikkelaars, onthoud één ding: niets is onmogelijk en als ze het kunnen doen ... kun jij dat ook - net zoals ik dat een paar jaar geleden deed. Ik begon ontwerpgerelateerde forums te doorlopen (Envato was toen niet aanwezig), verdiepte zich in elk webdesign gerelateerd bericht dat ik kon vinden, probeerde dingen zelf, kreeg proefondervindelijk ervaring totdat ik eindelijk mijn eerste website creëerde (wat behoorlijk slecht was) . Wees niet verlegen om hulp te vragen, we zijn een geweldige community vol liefde om onze kennis gratis te delen! Dat gezegd hebbende, hier is een lijst met, naar mijn mening, geweldige tutorials op beginnersniveau, die je zullen helpen de termen "web" en "ontwerp" te begrijpen, je leren hoe HTML en CSS werken, en hoe je het allemaal kunt doen door jezelf. Laten we beginnen.

Let op: sommige tutorials die hier worden vermeld, maken deel uit van het Plus-lidmaatschapsprogramma. Meer informatie over Plus Tuts is hier te vinden.

Laten we beginnen met kleurentheorie ...

"Het belang van kleur in webdesign"

Al te vaak zie ik een geweldig ontwerpconcept met een slechte kleurenkeuze. Een onderdeel van wat een geweldig webontwerp "geweldig" maakt, is lay-out, typografie en kleur. Wanneer elk van deze aspecten elkaar complimenteren, is geweldig ontwerp geboren.

Visuele hiërarchie in webontwerp

Dagelijks bekijk ik allerlei websites en allerlei ontwerpen. Een ding gemeen met succesvolle sjablonen op ThemeForest of met websites op het web is een sterke visuele hiërarchie. Vaak zie ik sjablonen die een geweldig concept hebben, maar een slechte visuele hiërarchie hebben. Ik zal bespreken wat visuele hiërarchie is en enkele geweldige voorbeelden in dit artikel.

Veelvoorkomende fouten bij webontwerp

Veel afgewezen sjablonen op Themeforest hebben dezelfde vaak voorkomende fouten: typografie (lettertype, lijnhoogte, letterspatiëring, kleur), uitlijning (raster) en spatiëring (opvulling). In deze zelfstudie gaan we nader in op het voorkomen van deze veelvoorkomende fouten.

CSS: De allereerste stappen

Deze is voor diegenen die hopen hun eerste stappen te zetten in webdesign. Deze 70 minuten durende video-zelfstudie gaat ervan uit dat je geen kennis hebt van CSS. In de loop van de screencast leer je over de basissyntaxis, een overvloed aan verschillende eigenschappen en hoe je het begin van je allereerste website creëert.

Ontwerp en codeer uw eerste website in gemakkelijk te begrijpen stappen

In deze zelfstudie gaan we onze eerste website ontwerpen en coderen in eenvoudige, eenvoudige stappen. Deze tutorial is geschreven voor de beginner, in de hoop dat deze je de tools zal geven om je eigen normen-conforme websites te schrijven! Het is een gloednieuwe week; misschien is het tijd om een ​​nieuwe vaardigheid te leren!

30 HTML Best Practices voor beginners - Basix

Het moeilijkste aspect van het werken met Nettuts + is het rekening houden met zoveel verschillende vaardigheidsniveaus. Als we te veel geavanceerde tutorials plaatsen, zal ons beginnerspubliek daar niet van profiteren. Hetzelfde geldt voor het tegenovergestelde. We doen ons best, maar voelen je altijd vrij om binnen te komen als je het gevoel hebt dat je wordt verwaarloosd. Deze site is voor jou, dus zeg het maar! Met dat gezegd, is de tutorial van vandaag specifiek voor diegenen die net duiken in webontwikkeling. Als je een jaar ervaring of minder hebt, hopelijk helpen sommige van de hier genoemde tips je om beter en sneller te worden!

Laten we, zonder verder uitstel, dertig best practices bekijken om te observeren bij het maken van uw markup.

Verder gaan…

Nu we een basiskennis van de theorie hebben en hebben geleerd hoe we een zeer eenvoudige webpagina kunnen ontwerpen en coderen, zijn we klaar om iets verder te gaan. De volgende artikelen en tutorials zijn hier om u meer te leren over het webontwerpproces en de beste codeermethoden.

Elements of Great Web Design: The Polish

Wanneer ik ontwerpen samenstel, doe ik dat meestal in twee fasen: lay-out en Pools. Tijdens de lay-outfase plaats ik de belangrijkste objecten op de pagina meestal met iets dat er relatief compleet uitziet. In de tweede fase - de Poolse - bespreek ik het ontwerp en pas ik kleuren aan, typ ik behandelingen, schaduwen, lagen en ruim ik het allemaal op. In deze eerste van een reeks tutorials over webontwerp zullen we naar de Poolse gaan kijken.

Een familie van websites ontwerpen

De zelfstudie die ik vandaag heb toegevoegd, heet 'Een familie ontwerpen ontwerpen voor de website' en is een stapsgewijze follow-along van een reeks WordPress-blogontwerpen die ik onlangs heb gedaan. Omdat de betrokken vaardigheden van Photoshop niet zo geavanceerd zijn, heb ik meer tijd besteed aan het praten over waarom bepaalde dingen zijn gedaan.

Van PSD tot HTML, stap voor stap een set websiteontwerpen bouwen

Vandaag ga ik met u door mijn hele proces van ophalen van Photoshop tot voltooide HTML. We gaan een set van 4 PSD-mockups van een website uitwerken die uiteindelijk een WordPress-thema zullen worden. Het is een enorme tutorial, dus als je het tot het einde wilt volgen, zorg dan dat je een paar uur over hebt!

Laatste, maar even belangrijk ...

Wees geïnspireerd, maar niet kopiëren

Er zit een dunne lijn tussen inspiratie en kopiëren. We zijn omringd door objecten en kunst in ons dagelijks leven. Het vinden van inspiratie voor een ontwerp is tegenwoordig een gemakkelijke taak. In dit artikel zal ik u begeleiden bij het ontwerpproces van een website die ik onlangs heb voltooid. Ik zal afbeeldingen van websites aanbieden die me hebben geïnspireerd om een ​​nieuwe en unieke weblay-out te maken.

Een freebie om je te laten beginnen ...

30 Photoshop-webelementen, achtergronden en pictogrammensets (via GraphicRiver)

Wanneer u een website ontwerpt of bouwt, is de kans groot dat u verschillende kleine elementen moet ontwerpen. Persoonlijk heb ik de neiging om veel van dezelfde knoppen, menu's, pictogrammen en dergelijke opnieuw te gebruiken. Sinds we GraphicRiver eerder dit jaar lanceerden, hebben we al heel wat leuke webgraphics gezien, in de vorm van webelementen, achtergronden en pictogrammen. Dus ik heb 30 van de besten samengesteld om je een voorproefje te geven van wat daar beschikbaar is. Vergeet natuurlijk niet dat als je gewoon een compleet PSD-ontwerpsjabloon nodig hebt om uit te bouwen, je die kunt pakken op ThemeForest!

We zijn nog niet klaar ...

Neem een ​​paar minuten de tijd en lees deze geweldige interviews van enkele van de toonaangevende namen in de internetindustrie. Je zult versteld staan ​​hoeveel je van deze jongens kunt leren!

  • Elliot Jay Stocks
  • Chris Coyier
  • Jeffrey Zeldman
  • Eric Meyer
  • Jeff Croft
  • Marko Dugonjić

… en meer. Lees alle interviews hier.

Laatste gedachten…

Elk nieuw begin is moeilijk; hetzelfde geldt voor webdesign. Ik herinner me mezelf toen ik voor het eerst leerde: urenlange HTML / CSS-foutopsporing, terwijl de oplossing precies voor me lag; maar hey, we leren van onze fouten en herhalingen. Ik wou dat ik toegang had tot het Tuts + netwerk toen ik voor het eerst begon. Het had me veel tijd en frustratie kunnen besparen. Beschouw dit artikel als het startpunt, als je merkt dat je de eerste stappen in deze industrie zet. Nog vragen?

Schrijf een Plus-zelfstudie

Wist je dat je tot $ 600 kunt verdienen voor het schrijven van een PLUS tutorial en / of screencast voor ons?? We zijn op zoek naar diepgaande en goed geschreven tutorials over HTML, CSS, PHP en JavaScript. Als je van het vermogen bent, neem dan contact op met Jeffrey via [email protected].

Houd er rekening mee dat de daadwerkelijke compensatie afhankelijk is van de kwaliteit van de laatste zelfstudie en screencast.

  • Volg ons op Twitter of abonneer je op de Nettuts + RSS Feed voor de beste tutorials voor webontwikkeling op internet.