Beginnershandleiding voor hulpmiddelen voor webontwerp

Wilt u uw eigen website ontwerpen? Of wil je carrière maken met hulpmiddelen voor webontwerp? Nou, het wordt niet gemakkelijk. Het kost tijd, geduld en veel hard werken om uw eigen website te ontwerpen. Hoewel een enkel artikel niet voldoende is om alle vaardigheden, hulpmiddelen en technologie te bieden die nodig zijn om hulpmiddelen voor het ontwerpen van websites te worden, helpt deze specifieke gids je in de goede richting. Als je eenmaal weet welke weg je moet inslaan, moet je je voortdurend ontwikkelen en leren om je bestemming te bereiken.

Deze gids is bedoeld voor mensen zonder formele achtergrond of opleiding in hulpmiddelen voor webontwerp. Zolang je de basisprincipes kent van het bedienen van een computer, zou je de inhoud van deze handleiding redelijk goed moeten kunnen volgen. Houd er echter rekening mee dat hulpmiddelen voor het ontwerpen van websites een behoorlijk high-end onderwerp zijn. Je begint misschien bij de basis, maar je moet veel vaardigheden en kennis opdoen, zoals een menselijke interactie met het ontwerpen van websites, kleurtheorie en natuurlijk codeertalen zoals CSS en HTML. Mogelijk moet u ook JavaScript en andere programmeertalen leren. Dan is er zoekmachineoptimalisatie, contentmanagementsystemen, enzovoort.

Laten we beginnen met het doornemen van enkele concepten van hulpmiddelen voor webontwerp:

Gebruikerservaring Web Designing Tools

Ook wel UX- of UI-ontwerp genoemd, het ontwerp van gebruikerservaringen gaat eigenlijk over weten hoe mensen uw website-ontwerp zullen bekijken, ermee omgaan en gebruiken, en hoe die kennis te gebruiken om een ​​betere website-ontwerp te maken. Er is veel werk mee gemoeid en ook veel vallen en opstaan. De manier waarop u een website ontwerpt en ervaart, kan verschillen van hoe anderen dat doen. Uw hulpmiddelen voor het ontwerpen van web zijn misschien heel logisch voor u, maar verwarreren uiteindelijk anderen.

Terwijl je leert over het ontwerpen van gebruikerservaringen, is het ook een goed idee om te beginnen met het lezen van draadframes, wat de verwerking is waarin je heel eenvoudige lay-outideeën voor webontwerpgereedschappen schetst. De schetsen en concepten zijn vrij ruw, dus je kunt een goede oude pen en papier of alfabet gebruiken. U kunt vervolgens overschakelen naar een tablet of desktop naarmate uw ideeën voor de lay-out van uw webontwerphulpmiddelen gedetailleerder worden. Dit proces bepaalt hoe het ontwerpen van uw website werkt, vanaf nul.

Esthetische vaardigheden leren

Sommige mensen hebben de neiging zich eerst te concentreren op het leren coderen voordat ze voor esthetiek gaan, maar het kan voordeliger zijn om de theoretische stukjes esthetiek te bedekken voordat je je handen in codering steekt. Esthetiek kan tenslotte best lastig te beheersen zijn. Er is geen verklaring voor smaak; wat er goed voor je uitziet, kan voor anderen onverteerbaar zijn. Lettertypen die goed lijken te werken met het thema van uw hele website, zien er misschien vreemd en ronduit verkeerd uit voor anderen. Alles is subjectief, maar er is een wetenschap voor alles. Als je deze wetenschap kunt vastleggen en de basisregels van de esthetiek onder de knie hebt, kun je de meeste problemen voorbij komen die te maken hebben met dit deel van hulpmiddelen voor webontwerp.

1. Typografie

Afbeeldingen en video's worden online steeds populairder, maar de tekst blijft en blijft het grootste deel van het ontwerpen van websites. Het internet draait allemaal om woorden en hoe ze er fantastisch uit kunnen laten zien en lezen. Het schrijven van goede tekst is aan de schrijver, maar om het er goed uit te laten zien hangt af van de typografie. Typografie gaat echter niet alleen over het kiezen van een lettertype. Het gaat ook over het kiezen van een goede lettergrootte en -type en deze zo in te delen dat deze leesbaar is voor uw websitebezoekers, ongeacht welke browser ze op welk apparaat gebruiken. Het gaat ook over het creëren van een visuele hiërarchie tussen de koppen, titels en hoofdtekst.

Zodra u de regels van typografie kent, is het tijd om de juiste lettertypen te kiezen voor het ontwerpen van de website. Je kunt er veel gratis vinden, en vooral Google Web Fonts kunnen hierin een geweldig hulpmiddel zijn. In hulpmiddelen voor het ontwerpen van websites kiezen veel ontwerpers voor Google-lettertypen omdat deze rechtstreeks kunnen worden ingesloten in het ontwerpen van websites. U kunt zelfs online enkele geweldige Google-lettertypecombinaties vinden, of de Web Font Combinator gebruiken om uw eigen lettertypecombinaties te koppelen en te bekijken.

In sommige gevallen moet u de lettertypen zelf insluiten, wat niet zo handig is. Als je wilt leren hoe je zelf lettertypen kunt insluiten, moet je een aantal basis-CSS- en HTML-codering leren.

2. Kleurentheorie

Kleurentheorie gaat meer dan alleen het leren van de technische namen van verschillende kleuren. In feite gaat het over kleurencombinaties en hoe verschillende kleuren verschillende effecten kunnen hebben op menselijke emoties. Kleurentheorie is een echte wetenschap en kan een grote impact hebben op de bruikbaarheid en gebruikerservaring op uw website ontwerpen. De tekst op een webpagina zou bijvoorbeeld niet erg zichtbaar zijn als de kleur te dicht bij die van de achtergrond was. Schermverblinding, visuele beperkingen en slecht geconfigureerde schermen kunnen de uitdagingen nog vergroten.

3. HTML

Als je eenmaal de esthetiek en theorie achter webontwerptools kent, is het tijd om je handen vuil te maken en wat codering te leren, te beginnen met de meest fundamentele taal: Hypertext Markup Language of HTML. Elke website die ontwerpt gebruikt ooit HTML, die de webbrowser vertelt of deze naar een video, link, afbeelding of tekst kijkt.

De volgende taal die u moet leren is Cascading Style Sheets of CSS, waardoor uw website er goed uitziet. Het vertelt de browser het lettertype van de tekst en kleuren van verschillende elementen. Het kan ook de lay-out van het ontwerpen van de website, het uiterlijk van de knoppen, de grootte van verschillende elementen en zelfs animaties definiëren.

HTML en CSS zijn eigenlijk vrij eenvoudig te vinden, maar ze zijn uitgebreid en kunnen op verschillende manieren worden gebruikt om unieke vaardigheden op het gebied van webontwerp te maken. Het kost tijd en oefening om te leren hoe je ze effectief kunt gebruiken.

4. JavaScript

JavaScript leren is een optioneel ding, maar het kan een enorme bonus zijn. Het is een programmeertaal die webinhoud kan manipuleren op manieren die niet alleen via CSS of HTML kunnen worden gedaan. Maar het is niet noodzakelijk voor elke website die wordt ontworpen en het kan iets moeilijker te begrijpen zijn dan HTML of CSS. Desondanks is het erg handig en een belangrijke technologie die wordt gebruikt bij het ontwerpen van webvaardigheden. Je kunt het gebruiken om chique elementen zoals diavoorstellingen toe te voegen of nieuwe inhoud aan te roepen zonder de pagina opnieuw te hoeven laden. Dit kan de bruikbaarheid van websites verbeteren.

De benodigde hulpmiddelen krijgen

Webontwerpvaardigheden vereisen bepaalde tools, processen en workflows, hoewel het moeilijk is om vast te houden aan een bepaalde mix. Iedereen heeft zijn eigen favoriete tools, en er zijn mensen die hun selecties met woeste loyaliteit zouden verdedigen. Afgezien van deze intense loyaliteit, is het altijd een goed idee om te blijven experimenteren met nieuwe vaardigheden op het gebied van webontwerp in plaats van jezelf op te sluiten.

Het is nooit een goed idee om uzelf op te sluiten voor een beperkt aantal tools en er te comfortabel mee te werken. Blijf experimenteren met nieuwe tools en houd je geest fris. Laten we om te beginnen de gratis bekijken.

  • Alle belangrijke browsers

De belangrijkste browsers - Mozilla Firefox, Google Chrome en Microsoft Internet Explorer - werken op hun eigen unieke manieren en kunnen dezelfde webpagina op verschillende manieren weergeven. U moet zien hoe uw website eruitziet in al deze belangrijke browsers en ervoor zorgen dat er geen grote problemen zijn. Websitelay-outs zijn in het algemeen vrijwel uniform in de belangrijkste browsers dankzij verbeteringen in hun mogelijkheden, maar hetzelfde kan niet voor alle elementen worden gezegd. De sleutel tot goede webontwerpvaardigheden is testen in meerdere omgevingen.

Mobiele browsers moeten ook worden gebruikt, hoewel u beperkt zou zijn tot de apparaten die u momenteel bezit. Niettemin hebben de meeste grote mobiele browsers tegenwoordig vergelijkbare mogelijkheden. Chrome is de meest voorkomende mobiele browser, maar Mozilla werkt aan een mobiele versie van Firefox voor iOS. Opera en Opera Mini zijn andere veel voorkomende alternatieven.

  • Draadomlijstingsgereedschap

Voor draadomlijsten kunt u een eenvoudige pen en papier of een soort teken-app gebruiken. De sleutel is om iets wegwerpbaar te hebben en een platform te hebben voor het schetsen van ruwe ideeën om ze een beetje meer te verfijnen.

  • Apps tekenen

Zodra je begint met het maken van echte draadframes voor de basis van je code, is het tijd om een ​​draadframeapp te kopen. Google Draw van Drive is een goede optie omdat het alle basisvormen en functies voor live samenwerking en delen biedt voor het geval je wilt werken of hulp van iemand anders wilt. Het is ook webgebaseerd en u krijgt ongeveer 15 GB vrije ruimte. Als u echter met uw tablet werkt, moet u een alternatief vinden.

  • Code-editor

HTML en CSS kunnen worden gecodeerd op zoiets eenvoudigs als Kladblok. Het enige dat u nodig hebt is een teksteditor, maar geen tekstverwerker zoals Microsoft Word. Code-editors zijn in wezen teksteditors met toegevoegde functies om codeerprogramma's en websites eenvoudiger te maken.

Er zijn er veel beschikbaar, en het beste wat je hier kunt doen, is experimenteren en jezelf niet beperken tot slechts één. Voor beginners is een goede optie om mee te beginnen haakjes. Het is stabiel en gratis en werkt op Linux, Mac en Windows. Beugels zijn ook specifiek ontworpen voor degenen die vaardighedenwebsites in de browser bouwen en ontwerpen.

  • Foto-editor

Tekst vormt het grootste deel van de website-inhoud, maar afbeeldingen zijn ook een groot deel van de ervaring en u moet pictogrammen, logo's, foto's en andere afbeeldingen voor uw website maken en bewerken. Nogmaals, de sleutel is om te blijven experimenteren met verschillende programma's. Je zult voor deze editors moeten betalen, maar er zijn gratis proefversies beschikbaar om ze te testen. Veelvoorkomende om mee te beginnen zijn GIMP, Photoshop, Paint.Net, CorelDraw en andere Corel-apps.

  • Lokale server

Deze is optioneel, maar het is een goed idee om een ​​webserver op uw pc te installeren. Een webserver is in wezen bedoeld om mensen toegang te geven tot alle of delen van uw website. Een lokale server blijft afgesloten van internet tenzij u een echt snelle internetverbinding en een krachtige computer hebt. In plaats daarvan kunt u gewoon een server instellen om te imiteren hoe dingen online werken. Leren werken met een lokaal geïnstalleerde server kan ook veel tijd besparen bij het uploaden van uw bestanden naar een echte hostingserver. Voor beginners is XAMPP een goede optie om een ​​lokale server op te zetten. Het kan worden geïnstalleerd op Linux, Mac of Windows.

Stappen naar een website ontwerpen

Nu u over de benodigde tools, vaardigheden en kennis beschikt, is het tijd om snel te kijken naar het proces van webontwerpvaardigheden:

  • Inhoud binnenbrengen

Het maken van website-inhoud verschilt van het proces van webontwerpvaardigheden. U moet de inhoud zelf schrijven of van uw klant krijgen. Je kunt ook een fotograaf of copywriter inhuren of goede stockafbeeldingen kiezen. In elk geval moet u alle inhoud, inclusief de tekst en afbeeldingen, georganiseerd en klaar voor gebruik hebben.

Als je eenmaal alle inhoud hebt, is het tijd om alles georganiseerd te krijgen. Wat gebeurt er op de startpagina en andere pagina's en hoe zijn deze pagina's verbonden? Deze vragen zijn belangrijk bij het opzetten van een structurele organisatie die uw sitenavigatie, bestandsorganisatie en andere aspecten zal bepalen.

Wire-framing is een goed proces om hier te volgen. Begin met wegwerpbare draadframes en houd dingen eenvoudig. Het is een snel proces en het duurt niet langer dan een half uur om elke pagina te voltooien. Maak meer gedetailleerde versies zodra u klaar bent met het wegwerp-draadframewerkproces. Neem zoveel mogelijk actuele inhoud op en voeg afzonderlijke elementen toe, zoals knoppen en formulieren. Blijf meer definitie toevoegen. Als u veel pagina's van hetzelfde type hebt, maakt u gewoon een pagina van elk type.

Aanbevolen cursussen

  • Java-slaapstand
  • Professionele Java Spring Course
  • Professionele WordPress-training
  • Professionele Ruby-cursus
  • Coding

Nu is het eindelijk tijd om uw codeerhoed op te zetten en uw teksteditor te starten. De sleutel hier is om code te blijven typen totdat u tevreden bent met de uiteindelijke uitvoer. De teksteditor Brackets heeft hiervoor een geweldige functie: de knop Live Preview. Het opent een Google Chrome-browservenster dat wordt bijgewerkt met de wijzigingen die u in de code aanbrengt. Tijdens dit proces moet je je browser meerdere keren van grootte veranderen om te zien hoe de website er in verschillende formaten uitziet. Er worden typefouten gemaakt en er zijn vallen en opstaan.

  • testen

Met de basiscode op zijn plaats, is het tijd om de website op alle belangrijke desktop- en mobiele browsers te testen en de bugs op te lossen. Maak je geen zorgen over kleine inconsistenties; de sleutel is om de gebruikerservaring positief te maken, ongeacht de browser. De gebruiker moet door de site kunnen navigeren zoals jij het bedoeld hebt en de call-to-action bereiken.

Aanbevolen artikelen

Dit is een gids geweest om carrière te maken uit hulpmiddelen voor webontwerp? Nou, het wordt niet gemakkelijk. Dit zijn de volgende externe koppelingen met betrekking tot hulpmiddelen voor webontwerp.

  1. HTML5 en Flash - Top 8-functies
  2. JavaScript Web Development Tools & 4 Beste voordelen
  3. Top 10 beste trends in webontwerp die u moet weten voor 2016
  4. 5 Website-instellingen Fouten die u moet kennen

Categorie:

Web ontwikkelingstools