Ja, Het is perfect mogelijk om jezelf te leren webdesign. Ik vroeg rond deze week om te zien hoe mensen erin geslaagd om de vaardigheden te verwerven en ik probeerde te herinneren wat werkte voor mij.
er zijn drie belangrijke manieren waarop je jezelf kunt leren webdesign.
- door doen. Mensen leren door daadwerkelijk websites te maken.
- met behulp van onlinebronnen. Iedereen op een gegeven moment vindt antwoorden online over hoe websites te ontwerpen.
- door lezen. Deze verraste me. De meeste ontwerpers zeggen dat ze webdesign leren, deels door het lezen van boeken.
dus, laten we gaan door elk van deze categorieën om uit te vinden hoe je jezelf te leren webdesign.
webdesign leren door
de beste manier om webpagina ‘ s te begrijpen is door te kijken hoe bestaande websites worden samengesteld en ze zelf te bouwen.
kijk hoe andere websites werken
om te beginnen worden de meeste webpagina ‘ s op het internet, althans gedeeltelijk, in HTML geschreven. Om de HTML die deze pagina maakt te zien moet u” Bron bekijken ” in de browser die u gebruikt. Probeer Cmd/Ctrl-U (voor Firefox), ga Cmd/Ctrl-Alt/Opt-u (voor Chrome), en als u Internet Explorer gebruikt, moet u zich echt afvragen of webdesign de juiste carrièrepad voor u is.
kijk in de HTML om te zien hoe de verschillende elementen op een webpagina gemarkeerd zijn. U kunt mogelijk bepaalde tags meteen identificeren. Bijvoorbeeld <p> is voor alinea, <h1,2,3> zijn kopjes, <img> is voor een afbeelding, enz. U zult merken dat de meeste van deze tags in paren werken om het begin en einde van de markering aan te geven, bijvoorbeeld <p>Text here</p> toont het openen en sluiten van de alinea-tag met de schuine streep (/) voorafgaand aan de sluitingstag. Andere tags werken niet in paren, bijvoorbeeld de image tag self sluit <img src = "https://robcubbon.com/images/rob.jpg" /> dit instrueert de browser om een afbeelding met een bepaald webadres als bron (src) weer te geven.
een ander ding dat je zou kunnen opmerken van de HTML-bron is dat alle HTML-pagina ‘ s een vergelijkbare structuur hebben. Ze beginnen allemaal met een <!DOCTYPE> declaratie waarin staat in welke versie van HTML Het is, gevolgd door een <HTML> declaratie, gevolgd door de <head> van het document dat een container is van verschillende elementen, waaronder links naar scripts, typogrammen, de meta-informatie, enz. Na de <head> komt de <body> waar de elementen van de webpagina zijn gemarkeerd.
oefening: Selecteer alle broncode van deze pagina in een NotePad (PC) of TextEdit (Mac) document en sla het op uw computer als “test.html ” of zoiets. Open dit bestand in een browser en het moet er precies hetzelfde uitzien als de online versie. Schakel nu uw verbinding met het internet uit en zie hoe de testpagina eruit ziet. Nogal anders, hè? Probeer uit te zoeken waarom.
Tools van de handel
terwijl u dit doet, zullen er bepaalde tools zijn die u nodig hebt.
- meerdere browsers en smartphones. Probeer het testen van uw eigen sites op verschillende browsers en telefoons (Dit is waar je begint een langdurige haat affaire met Internet Explorer).
- teksteditor. U kunt gebruik maken van de basis NotePad (PC) of TextEdit (Mac), of misschien Coda (Mac) of Dreamweaver – gebruik Dreamweaver niet in de visuele modus, gewoon werken aan de code, Je moet begrijpen hoe dit spul werkt onder de motorkap.
- Validator. Valideer uw webpagina ‘ s met de HTML Validator en de CSS Validator (gebruik een browser plugin zoals Web Developer voor Chrome om snel een beroep op hen).
- Chrome-ontwikkeltools en Firebug voor Firefox. Deze tools helpen je CSS en JavaScript te begrijpen, wat, als je dacht dat HTML moeilijk was, wat begrip vergt.
- Graphics en image editors. Centraal in webdesign staan beeldbewerkers zoals Photoshop of vuurwerk. Deze zijn vrij duur, maar er is GIMP plus een groot aantal online image editors als je net begint.
uw eigen statische HTML-websites
terwijl uw kennis van HTML, CSS en JavaScript groeit, moet u statische HTML-sites maken, lokaal of op een webserver. Continu spelen met de code om te proberen om coole dingen te doen. Probeer bepaalde elementen in andere websites opnieuw te maken door stukjes van de code te kopiëren.
hoewel de websites die u uiteindelijk maakt waarschijnlijk niet gemaakt zullen worden van HTML-bestanden, is het belangrijk dat u eerst begrijpt hoe u statische HTML-sites kunt maken voordat u PHP en/of Content Management Systems (CMS) kunt gebruiken om HTML te maken.
uw eigen websites maken met CMS
de meeste websites worden gemaakt door CMS – software die HTML-pagina ‘ s kan maken binnen opgegeven sjablonen. De beste zijn WordPress, Joomla en Drupal, maar er zijn een groot aantal lichtere, open source CMS waarmee je kunt experimenteren, deze zullen je leren hoe PHP, en met andere CMS, ASP, worden gebruikt om samen te werken websites.
gebruik MAMP (Mac) of Wamp (Windows) op uw computer om deze systemen lokaal te draaien, zodat u een goed begrip kunt krijgen van hoe ze werken.
image editors gebruiken
u moet weten hoe u Photoshop of iets dergelijks moet gebruiken. U hebt dit nodig om afbeeldingen te maken voor de site en om volledige visuals te bieden van hoe de site eruit zal zien wanneer u klaar bent om het ontwerpproces te helpen.
Get designing
natuurlijk heb ik niet gezegd dat de resulterende websites niet alleen moeten valideren, werken, gevonden worden door zoekmachines, een doel dienen en op de markt gebracht worden, maar ook … ze moeten er goed uitzien.
om uw artistieke oog te verbeteren, moet u regelmatig werk produceren en proberen te verbeteren. Schets ontwerpen op papier dan werken op hen in Photoshop of wat voor grafisch programma je hebt. De praktijk zal u helpen een betere ontwerper te worden. Ik zal later meer middelen aanbevelen die u zullen helpen met ontwerpprincipes.
Online bronnen
wanneer mensen antwoorden willen, gaan ze naar het internet en “Google it” of zoeken ze op YouTube. Web design is niet anders. Er zijn veel bronnen die u online zullen helpen. Eerst en vooral is er W3 scholen die webdesigners verwijzen naar als de beste online zelfonderricht bron, is er ook Tizag. Sommige mensen raden Lynda.com hoewel ik het niet persoonlijk heb gebruikt.
Blogs
er zijn een aantal geweldige design blogs. Er zijn grote die u kunnen helpen zoals SmashingMagazine, WebDesignerDepot, 1stWebDesigner en het Envato netwerk.
persoonlijk krijg ik meer van de onafhankelijke web-en grafisch ontwerpers die bloggen. Er zijn, echter, ladingen die ik heb geleerd van door de jaren heen, dus hier zijn slechts een paar en ik verontschuldig me bij een uitstekende bloggers die ik uit de lijst heb gelaten.
- Chris Colyer ’s CSS Tricks is een geweldige responsieve website, maar heeft ook geweldige webdesigninfo en tricks
- Veerle Pieters heeft geweldige Photoshop en Illustrator tutorials op Veerle’ s blog
- David Airey is iemand die ik een tijdje heb gevolgd op zijn eigen gelijknamige blog, LogoDesignLove en IdentityDesigned. David is onder andere geïnteresseerd in de overkoepelende identiteit van organisaties.
- Chris Spooner heeft me veel geleerd met tutorials op zijn blog op SpoonGraphics en plus information and inspiration op Line25
- Fabio Sasso ‘ s prachtig ontworpen site Abduzeedo biedt veel inspiratie en vreemdheid.Nick La ‘ S N. Design Studio en WebDesignerWall hebben fantastische informatie en grote inspiratie.
aarzel niet om uw favoriete design blogs toe te voegen in de reacties hieronder.
Forums
wanneer je je hoofd tegen een muur slaat, zijn forums geweldige plaatsen om antwoorden te krijgen. Plaats een beschrijving van uw probleem en het webadres en heel vaak zal iemand terug naar u met een oplossing. Hier zijn enkele van mijn favoriete forums.
I like Estetica Design Forum, DesignForums.co.uk en Designer, s Talk. Er, s Digital Point en Sitepoint voor meer bredere vragen, de WordPress forum is uitstekend en er, s De Warrior Forum voor internet marketing.
boeken
veel webdesigners beweren dat goede ouderwetse fysieke boeken hen hebben geholpen webdesign te leren. Hier zijn een paar van mijn favorieten en enkele anderen die aan mij zijn aanbevolen. De links zijn Amazon.com affiliate links.
- bouw je eigen Website op de juiste manier met behulp van HTML & CSS 3de (derde) editie door Ian Lloyd is een Sitepoint boek dat ik jaren geleden las. Het echt hielp me op het moment als het richt zich op web design best practices. Zorg ervoor dat je een up-to-date Editie koopt (op dit moment de derde editie die veel op HTML5 bevat).
- CSS: De ontbrekende handleiding van David Sawyer McFarland bevat uitleg, voorbeelden en stap-voor-stap tutorials. Dit boek is vooral aan te raden omdat het je de achtergrond van CSS geeft en veel over CSS3 bevat.The Principles of Beautiful Web Design, 2nd Edition door Jason Beaird, stelt dat design een vaardigheid is die je kunt leren en leert je de fundamentele principes van design.
- Color Design Workbook: a Real World Guide to Using Color in Graphic Design door AdamsMorioka (editor) biedt de essentiële informatie die nodig is om kleur creatief en effectief toe te passen op ontwerpwerk.
- zet me niet aan het denken: A Common Sense Approach to Web Usability, 2e editie door Steve Krug een instant klassieker op web usability, geladen met inzichten en praktisch advies.
- echt worden: de slimmere, snellere en gemakkelijkere manier om een succesvolle webapplicatie te bouwen met 37 signalen gaat misschien over het creëren van webapplicaties en niet over sites, maar het heeft zo ‘ n geweldige manier om webprocessen te vereenvoudigen dat ik het zo nuttig vond om te lezen.
- graven in WordPress door Chris Coyier & Jeff Starr wordt sterk aanbevolen als het grote WordPress boek. Beschikbaar als PDF-versie (handig voor het kopiëren van code) evenals een fysieke versie.
er zijn veel meer boeken die ik had kunnen opnemen, vooral over designtheorie. Als u suggesties van boeken die u hebben geholpen met web design, laat het ons weten over hen in de opmerkingen.
wat u kunt doen
veel ontwerpers beweren dat falen eigenlijk de beste leraar is. Dus ga naar buiten en ontwerp websites! Wanneer, zoals ongetwijfeld zal gebeuren, je tegen een stenen muur, kunt u een aantal van de online bronnen hier gebruiken om u te helpen. En als je niet meer naar het computerscherm kunt kijken, kun je er een boek over lezen!