Deze wikiHow leert je hoe je een website ontwerpt die er professioneel uitziet en goed presteert. Hoewel het grootste deel van het ontwerp van uw website uiteindelijk aan u ligt, zijn er enkele cruciale dingen die u moet doen en vermijden bij het maken van een website.
Stappen
Deel 1 van 2: Hoe u uw website ontwerpt
Stap 1. Bepaal of je een websitemaker wilt gebruiken
Websites die helemaal opnieuw zijn gemaakt, vereisen een redelijk gedetailleerd begrip van HTML-codering, maar u kunt eenvoudig een website maken door een gratis hostingservice zoals Weebly, Wix, WordPress of Google Sites te gebruiken. Websitemakers zijn over het algemeen veel gemakkelijker voor beginnende ontwerpers om te gebruiken dan HTML.
- Als u besluit uw eigen website te coderen, moet u zowel HTML- als CSS-codering leren.
- Als het niet aantrekkelijk klinkt om de tijd en energie te investeren in het maken van uw website, kunt u ook een websiteontwerper inhuren om uw site voor u te maken. Freelance ontwerpers kunnen ergens tussen de $ 30 per uur en meer dan $ 100 per uur kosten.
Stap 2. Breng uw site in kaart
Voordat u zelfs maar een websitemaker opent, moet u ongeveer weten hoeveel pagina's u wilt dat uw website heeft, wat de inhoud op elk van die pagina's zou moeten zijn en de algemene lay-out van belangrijke pagina's zoals de startpagina en de "Over" bladzijde.
De pagina's van uw website zijn misschien gemakkelijker te visualiseren als u ruwe afbeeldingen van elk van hen maakt in plaats van alleen te bepalen welke inhoud moet worden weergegeven
Stap 3. Gebruik een intuïtief ontwerp
Hoewel er iets te zeggen valt voor frisse ideeën, moet het basisontwerp van uw website de vastgestelde richtlijnen volgen, zoals de volgende:
- Navigatie-opties (bijvoorbeeld tabbladen voor verschillende pagina's) moeten bovenaan de pagina komen te staan.
- Als u een menupictogram (☰) gebruikt, moet dit in de linkerbovenhoek van de pagina staan.
- Als u een zoekbalk gebruikt, moet deze zich in de rechterbovenhoek van de pagina bevinden.
- Nuttige links (bijv. links naar de pagina 'Over' of de pagina 'Contact') moeten helemaal onderaan elke pagina staan.
Stap 4. Wees consistent
Welk tekstlettertype, kleurenpalet, afbeeldingsthema en ontwerpopties u ook kiest, zorg ervoor dat u dezelfde beslissing op uw hele website gebruikt. Het kan ongelooflijk schokkend zijn om één lettertype of kleurenschema te zien dat wordt gebruikt voor de "Over" -pagina wanneer een geheel ander is gebruikt voor de startpagina.
- Als u bijvoorbeeld uitsluitend koele kleuren gebruikt voor de startpagina van uw site, implementeer dan geen felle, luide kleuren op de volgende pagina.
- Houd er rekening mee dat het gebruik van luide of botsende kleuren, vooral wanneer de kleuren op een dynamische (bijvoorbeeld bewegende) manier worden weergegeven, bij een klein aantal internetgebruikers epilepsie kan veroorzaken. Als u besluit dergelijke kleuren op uw site te gebruiken, zorg er dan voor dat u een epilepsiewaarschuwing toevoegt voor relevante pagina's.
Stap 5. Voeg navigatie-opties toe
Door directe links naar belangrijke pagina's op uw website boven aan de startpagina te plaatsen, worden bezoekers die voor het eerst op bezoek zijn direct naar de inhoud geleid die ertoe doet. De meeste makers van sites voegen deze links standaard toe.
Het is belangrijk om ervoor te zorgen dat elke pagina op uw website toegankelijk is door op opties op uw website te klikken in plaats van alleen toegankelijk te zijn via het adres van de pagina
Stap 6. Gebruik kleuren die elkaar aanvullen
Net als elk ander soort ontwerp, is website-ontwerp afhankelijk van visueel aantrekkelijke kleurcombinaties; daarom is het van cruciaal belang om themakleuren te kiezen die bij elkaar passen.
Zwart, wit en grijs is een goede combinatie als je niet weet waar je moet beginnen
Stap 7. Overweeg een minimalistisch ontwerp te gebruiken
Minimalisme stimuleert koele toonkleuren, eenvoudige afbeeldingen, zwart-op-wit tekstpagina's en zo min mogelijk verfraaiing. Omdat minimalisme weinig fancy elementen vereist, is het een gemakkelijke manier om uw website er professioneel en aantrekkelijk uit te laten zien zonder veel werk.
- Veel websitemakers hebben een "minimalistisch" thema dat u kunt selecteren bij het opzetten van uw website.
- Een alternatief voor minimalisme is "brutalisme", dat gebruik maakt van hardere lijnen, felle kleuren, vetgedrukte tekst en minimale afbeeldingen. Brutalisme heeft minder aanhang dan minimalisme, maar afhankelijk van de inhoud van uw website kan het beter passen bij uw ontwerpbehoeften.
Stap 8. Maak unieke keuzes
Rechte lijnen en raster-vergrendelde webelementen zijn veilige weddenschappen, maar het nemen van een paar unieke stilistische beslissingen zal uw site zowel persoonlijkheid geven als uw site laten opvallen.
- Wees niet bang om tegen trends in te gaan door website-elementen asymmetrisch te plaatsen of door overlappende elementen te gebruiken om een gelaagd uiterlijk te creëren.
- Terwijl elegante, scherpe hoeken en vierkante elementen (ook bekend als een "kaartgebaseerde" presentatie) minder gunstig zijn dan ronde, zachte elementen.
Deel 2 van 2: Websiteprestaties maximaliseren
Stap 1. Profiteer van mobiele optimalisatie-opties
Mobiele browsers zijn goed voor meer webverkeer dan desktopbrowsers, wat betekent dat de hoeveelheid aandacht die u aan de mobiele versie van uw website besteedt, op zijn minst gelijk moet zijn aan de ontwikkeling van uw desktopwebsite. De meeste services voor het maken van websites maken automatisch een mobiele versie van uw site, maar u moet rekening houden met de volgende informatie voor uw mobiele site:
- Zorg ervoor dat knoppen (bijv. sitelinks) groot zijn en gemakkelijk kunnen worden aangetikt.
- Vermijd het implementeren van functies die niet op mobiel kunnen worden bekeken (bijv. Flash, Java, enz.).
- Overweeg om een mobiele app voor je website te laten maken.
Stap 2. Gebruik niet te veel foto's per pagina
Zowel desktop- als mobiele browsers kunnen moeite hebben om pagina's te laden die een groot aantal foto's of video's weergeven. Hoewel afbeeldingen belangrijk zijn in webdesign, kan het gebruik van meer dan een paar per pagina onnodig lange laadtijden veroorzaken, waardoor mensen de betreffende pagina('s) niet kunnen bezoeken.
Over het algemeen wilt u dat de pagina's van uw website in minder dan vier seconden worden geladen
Stap 3. Voeg een "Contact"-pagina toe
U zult merken dat vrijwel alle gevestigde websites een "Contact"-pagina hebben met contactgegevens (bijvoorbeeld een telefoonnummer en een e-mailadres); sommige sites hebben zelfs een ingebouwd vragenformulier op deze pagina. Door een "Contact"-pagina toe te voegen, krijgen websitebezoekers een directe communicatielijn met u, waardoor een oplossing wordt geboden voor mogelijke frustraties.
Stap 4. Maak een aangepaste 404-pagina
Wanneer iemand een specifieke pagina op uw website bezoekt die niet is ingesteld of niet bestaat, wordt een webpagina met een "404-fout" weergegeven. De meeste browsers hebben een standaard 404-pagina, maar u kunt de uwe mogelijk aanpassen vanuit de instellingen van de maker van uw website; zo ja, zorg er dan voor dat u de volgende gegevens vermeldt:
- Een luchtige foutmelding (bijv. "Gefeliciteerd - je hebt onze foutpagina gevonden!")
- Een link terug naar de startpagina van de site
- Een lijst met veelgebruikte links
- Een afbeelding of logo voor uw website
Stap 5. Gebruik indien mogelijk een zoekbalk
Als uw methode voor het maken van websites het toevoegen van een zoekbalk aan uw website ondersteunt, wordt u ten zeerste aangeraden dit te doen. Dit zorgt ervoor dat gebruikers snel naar een specifieke pagina of item kunnen navigeren zonder door uw navigatie-opties te hoeven klikken.
Zoekbalken zijn ook handig wanneer uw publiek naar een algemene term wil zoeken zonder trial-and-error
Stap 6. Investeer zoveel mogelijk tijd in uw startpagina
Wanneer iemand op de startpagina van uw website arriveert, zou hij onmiddellijk de essentie van het thema van uw website moeten begrijpen; daarnaast moeten alle elementen van de startpagina snel worden geladen, inclusief navigatie-opties en eventuele afbeeldingen. Uw startpagina moet de volgende aspecten hebben:
- Een call-to-action (bijvoorbeeld een knop om op te klikken of een formulier om in te vullen)
- Een navigatiewerkbalk of menu
- Een uitnodigende afbeelding (bijvoorbeeld één solide foto, een video of een kleine groep foto's met begeleidende tekst)
- Trefwoorden die betrekking hebben op de service, het onderwerp of de focus van uw website
Stap 7. Test je website in meerdere browsers op meerdere platformen
Dit is ongelooflijk belangrijk, omdat verschillende browsers aspecten van uw website anders kunnen behandelen. Probeer voordat u begint met het promoten van uw website uw website te bezoeken en te gebruiken in de volgende browsers op Windows-, Mac-, iPhone- en Android-platforms:
- Google Chrome
- Firefox
- Safari (alleen iPhone en Mac)
- Microsoft Edge en Internet Explorer (alleen Windows)
- De ingebouwde browser op verschillende Android-telefoons (bijv. Samsung Galaxy, Google Nexus, enz.)
Stap 8. Ga door met het bijwerken van uw website naarmate deze ouder wordt
Ontwerptrends, links, foto's, concepten en trefwoorden veranderen allemaal met het verstrijken van de tijd, dus u zult wijzigingen aan uw website moeten blijven aanbrengen om up-to-date te blijven. Dit vereist dat u de prestaties van uw website samen met andere vergelijkbare websites ten minste eenmaal per drie maanden (liever vaker) controleert.
Basis HTML-hulp
Voorbeeld webpagina met HTML
Ondersteuning wikiHow en ontgrendel alle voorbeelden.
HTML-spiekbriefje
Ondersteuning wikiHow en ontgrendel alle voorbeelden.
Voorbeeld van een eenvoudige webpagina
Ondersteuning wikiHow en ontgrendel alle voorbeelden.
Tips
- Toegankelijkheid van de website is een ander belangrijk aspect van website-ontwikkeling. Dit omvat zaken als ondertiteling voor slechthorenden, audiobeschrijvingen voor blinde bezoekers en waarschuwingen voor lichtgevoeligheid als uw website potentieel aanval-inducerende effecten gebruikt.
- De meeste websitemakers hebben een set sjablonen die u kunt gebruiken om de lay-out en het ontwerp van uw site te versterken voordat u de gewenste elementen toevoegt.
Waarschuwingen
- De meeste makers van sites zijn gratis; als u echter uw eigen domein wilt gebruiken (bijvoorbeeld "www.uwnaam.com" in plaats van "www.uwnaam.wordpress.com"), moet u een maandelijkse of jaarlijkse vergoeding betalen.
- Voorkom plagiaat en neem alle auteursrechtwetten in acht: voeg geen willekeurige afbeeldingen van internet of zelfs structurele elementen toe zonder toestemming.
