Deze wikiHow leert je hoe je een soepele, professioneel ogende website ontwerpt. Hoewel u vrij bent om te beslissen over het ontwerp van uw site, zijn er enkele belangrijke dingen die u moet doen en vermijden bij het maken van een website.
Stap
Deel 1 van 2: Een site-ontwerp maken
Stap 1. Bepaal of u een websitemaker wilt gebruiken
Het helemaal opnieuw bouwen van een website vereist een gedetailleerd begrip van HTML-code, maar u kunt een site maken met behulp van een gratis hostingservice zoals Weebly, Wix, WordPress of Google Sites. Websitemakers zijn over het algemeen veel gemakkelijker voor beginnende ontwerpers dan HTML.
- Als u besluit zelf te coderen, moet u HTML- en CSS-codering leren.
- Als u terughoudend bent om de tijd en energie te besteden aan het maken van uw eigen website, kunt u een websiteontwerper inhuren. Freelance ontwerpersdiensten variëren sterk, sommige kosten per uur en sommige per project, met een totaal bereik van miljoenen tot tientallen miljoenen rupiah.
Stap 2. Maak een sitemap
Voordat u de maker van de website opent, moet u hebben bepaald hoeveel pagina's er op de site zijn, wat de inhoud op elke pagina is en de algemene lay-out van belangrijke pagina's zoals "Home" en "Over".
Het wordt gemakkelijker voor u om de pagina's van uw site te visualiseren door ruwe afbeeldingen te maken, niet alleen schaduwen
Stap 3. Gebruik een intuïtief ontwerp
Hoewel nieuwe ideeën meestal interessant zijn, moeten basisontwerpen deze algemene richtlijnen volgen:
- Navigatie-opties (bijvoorbeeld meerdere tabbladen voor verschillende pagina's) moeten bovenaan de pagina worden geplaatst.
- Als u het menupictogram (☰) gebruikt, zou dit in de linkerbovenhoek van de pagina moeten staan.
- Als u de zoekbalk gebruikt, plaatst u deze in de buurt van de rechterbovenhoek van de pagina.
- Nuttige links (bijvoorbeeld links naar 'Over'- of 'Contact'-pagina's) moeten onderaan de pagina staan.
Stap 4. Wees consistent
Welke tekst, kleurenpalet, afbeeldingsthema en ontwerp u ook kiest, zorg ervoor dat u dezelfde beslissingen op uw hele site toepast. Gebruikers zullen verrast zijn om te zien dat het lettertype en het kleurenschema op de "Over"-pagina heel anders is dan die op de startpagina.
- Als je bijvoorbeeld een zachte kleur gebruikt voor je homepage, gebruik dan geen felle kleur op de volgende pagina.
- Merk op dat het gebruik van heldere of botsende kleuren, vooral dynamisch weergegeven (of bewegende) kleuren, bij een minderheid van de gebruikers epileptische aanvallen of epileptische aanvallen kan veroorzaken. Als u besluit een dergelijke kleur te gebruiken, zorg er dan voor dat u een waarschuwing voor 'beslaglegging' vóór de betreffende pagina plaatst.
Stap 5. Voeg navigatie-opties toe
Het plaatsen van directe links naar belangrijke pagina's boven de startpagina zal nieuwe bezoekers helpen bij de inhoud die voor hen belangrijk is. De meeste makers van websites voegen deze link standaard toe.
Het is belangrijk om ervoor te zorgen dat alle pagina's van de site toegankelijk zijn door op een optie binnen de site te klikken in plaats van alleen toegankelijk te zijn via het pagina-adres
Stap 6. Gebruik bijpassende kleuren
Zoals alle soorten ontwerp, is website-ontwerp ook afhankelijk van aangename kleurencombinaties. Daarom is het kiezen van een bijpassende themakleur erg belangrijk.
Als je in de war bent, begin dan met zwart, wit en grijs
Stap 7. Overweeg een minimalistisch ontwerp
Het minimalistische concept stimuleert het gebruik van koele tinten, eenvoudige afbeeldingen, zwarte tekstpagina's op een witte achtergrond en zo min mogelijk verfraaiing. Aangezien een minimalistisch ontwerp heel weinig elementen vereist, is het een gemakkelijke optie om uw site er zonder al te veel moeite professioneel en aantrekkelijk uit te laten zien.
- De meeste websitemakers bieden een "minimalistisch" thema waaruit u kunt kiezen bij het maken van een website.
- Het minimalistische alternatief is "brutalisme", dat hardere woorden, felle kleuren, vette tekst en minimale afbeeldingen gebruikt. Er zijn veel minder gebruikers van brutalistische ontwerpen dan minimalisten, maar als de inhoud passend is, kan dit ontwerp een goede keuze zijn.
Stap 8. Pas unieke opties toe
Raster- en rechte-lijnelementen zijn veilige keuzes, maar sommige unieke stijlen zullen een persoonlijk tintje geven en uw site onderscheiden van de rest.
- Wees niet bang om tegen de trend in te gaan door asymmetrische site-elementen te plaatsen of gestapelde elementen te gebruiken om een gelaagde look te creëren.
- Hoewel elegante, scherpe vierkante elementen (bekend als op kaarten gebaseerde presentatie) minder wenselijk zijn dan zachte, ronde elementen.
Deel 2 van 2: Siteprestaties maximaliseren
Stap 1. Profiteer van opties voor auto-optimalisatie
Mobiele browsers genereren meer verkeer dan desktopbrowsers. Dit betekent dat de aandacht die u besteedt aan de mobiele versie minstens hetzelfde moet zijn als de ontwikkeling van de desktopsite. De meeste auto-creatorwebsites hebben al een autoversie gemaakt, maar houd voor mobiele sites rekening met de volgende informatie:
- Zorg ervoor dat knoppen (bijvoorbeeld sitelinks) groot zijn en gemakkelijk kunnen worden aangetikt.
- Vermijd functies die niet zichtbaar zijn op mobiele apparaten (bijv. Flash, Java, enz.).
- Overweeg een auto-app voor uw site te bouwen.
Stap 2. Voeg niet te veel foto's per pagina toe
Desktop- en mobiele browsers hebben soms problemen met het laden van pagina's met veel foto's of video's. Hoewel afbeeldingen erg belangrijk zijn in webdesign, kunnen grote hoeveelheden media per pagina de laadtijden verlengen, en dat ontmoedigt gebruikers om die pagina's te bezoeken.
Over het algemeen duurt het laden van een pagina minder dan vier seconden
Stap 3. Voeg een "Contact"-pagina toe
Het is u wellicht opgevallen dat de meeste sites een "Contact"-pagina bieden met contactgegevens (zoals telefoonnummer en e-mailadres). Sommige sites bieden zelfs een geautomatiseerd aanvraagformulier op deze pagina. De "Contact"-pagina is een directe communicatielijn tussen sitebezoekers en u, wat betekent dat het ook een oplossing is voor een vraag of frustratie van een bezoeker.
Stap 4. Maak een aangepaste 404-pagina
Wanneer een bezoeker op een specifieke pagina komt die niet is gemaakt of niet bestaat, verschijnt er een "404 Error"-pagina. De meeste browsers bieden een ingebouwde 404-pagina, maar u kunt aanpassen hoe deze eruitziet via de instellingen van de maker van de website. Als u een aangepaste 404-pagina wilt maken, voert u de volgende gegevens in:
- Grappige en leuke foutmeldingen (bijv. "Gefeliciteerd, je bent op een foutpagina beland!")
- Link terug naar homepage
- Lijst met links die bezoekers meestal zien
- De afbeelding of het logo van uw site
Stap 5. Voer indien mogelijk de zoekbalk in
Als de methode voor het maken van websites die u gebruikt het toevoegen van een zoekbalk ondersteunt, raden we u aan deze toe te voegen. Dit zorgt ervoor dat gebruikers de specifieke pagina of inhoud kunnen vinden waarnaar ze op zoek zijn zonder door alle navigatie-opties te hoeven klikken.
De zoekbalk is ook erg handig wanneer bezoekers willen zoeken naar veelvoorkomende termen zonder op willekeurige pagina's te ploeteren
Stap 6. Besteed meer aandacht aan de startpagina
Wanneer bezoekers naar de startpagina gaan, zouden ze de essentie van het thema van uw site moeten hebben. Bovendien moeten alle elementen van de startpagina snel worden geladen, inclusief navigatie-opties en afbeeldingen. De startpagina moet ook de volgende aspecten bevatten:
- Oproep tot actie (bijvoorbeeld een knop om op te klikken of een formulier om in te vullen)
- Werkbalk of navigatiemenu
- Uitnodigende afbeeldingen (zoals een effen foto, video of meerdere foto's met aanvullende tekst)
- Trefwoorden met betrekking tot de service, het onderwerp of de focus van uw site
Stap 7. Test uw site op verschillende browsers en platforms
Dit is erg belangrijk omdat browsers aspecten van een website op verschillende manieren verwerken. Probeer, voordat u uw site promoot, uw site te openen 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 standaardbrowser van sommige Android-telefoons (Samsung Galaxy, Google Nexus, enz.)
Stap 8. Houd de site up-to-date
Ontwerptrends, links, foto's, concepten en trefwoorden veranderen voortdurend. Dus ook u moet altijd wijzigingen doorvoeren om bij de tijd te blijven. U moet de prestaties van uw site controleren en deze ten minste eens per drie maanden (liever vaker) vergelijken met vergelijkbare sites.
Tips
- Toegankelijkheid is ook een even belangrijk aspect bij het ontwikkelen van websites. Toegankelijkheid omvat beschrijvingen voor slechthorende bezoekers, audiobeschrijvingen voor visueel gehandicapte bezoekers en lichtgevoeligheidswaarschuwingen als uw site potentieel aanval-inducerende effecten gebruikt.
- De meeste websitemakers bieden sjablonen die u kunt gebruiken om de lay-out en het ontwerp te bepalen voordat u de gewenste elementen toevoegt.
Waarschuwing
- De meeste makerssites zijn gratis, maar als u uw eigen domein wilt gebruiken (zoals "www.uwnaam.com" in plaats van "www.uwnaam.wordpress.com"), moet u een maandelijks of jaarlijks bedrag betalen.
- Vermijd plagiaat en leer alle auteursrechtwetten kennen. Voeg geen willekeurige afbeeldingen van internet of structurele elementen toe zonder toestemming.
