Hoe een webpagina helemaal opnieuw ontwerpen?
In dit artikel leer je hoe een website helemaal opnieuw te ontwerpen en enkele gratis en betaalde programma's om uw eerste zakelijke website te bouwen.
Wanneer een website goed is ontworpen, of dat nu met een websitebouwer is of met de hulp van webdesigners en ontwikkelaars, laat het zien wat je te bieden hebt, ondersteunt het het genereren van zakelijke kansen en trekt het je ideale doelgroep aan.
Als u een online winkel opzet, moet u ook zorgen voor een veilig en gebruiksvriendelijk platform bij het verkopen van producten.
Een goede website stelt je in staat om een sterke merkidentiteit op te bouwen en je verhaal te vertellen zoals jij dat wilt. Je hebt volledige controle over elk element, tot op de laatste pixel.
Het goede nieuws is dat wanneer je aan de slag gaat, je helemaal zelf een website kunt bouwen. Het komt erop neer dat u bepaalde richtlijnen volgt bij het maken van het visuele ontwerp van uw website om effectief de aandacht van de gebruiker te trekken en vast te houden met een gebruiksvriendelijke gebruikersinterface.
Gebruik de volgende stapsgewijze handleiding en tips om vanaf het begin een geweldige website te ontwerpen die de unieke waarde van uw bedrijf uitstraalt.
Laten we beginnen!
1. Stel doelen en prioriteiten vast
Wanneer velen denken aan succesvol website-ontwerp en -ontwikkeling, denken ze aan de namen van webdomein, een betrouwbare webserver, kleurenschema's voor websites en contentmanagementsystemen...
Een succesvol website-ontwerp is echter afhankelijk van duidelijke prioriteiten. Begin uw websiteproject door te bepalen wat het belangrijkst is voor uw bedrijf, zodat u weet wat uw website moet bevatten.
Schrijf op hoe succes eruitziet en werk van daaruit verder. Dit proces zal u helpen beslissen wat er deel zal uitmaken van uw website.
Het kan handig zijn om andere websites in uw niche om u te inspireren met het ontwerp. Blader door hun pagina's en noteer de informatie die ze bieden, hoe hun merken communiceren en wat ze bieden om de aandacht van bezoekers te trekken en vast te houden ...
Denk na over wat u denkt dat goed zal werken op uw website en wat u wilt verbeteren met uw eigen ontwerp.
Deze lijst met belangrijke website-elementen helpt u bij het maken van een sitemap.
Maak een sitemap
Een sitemap, zoals de naam al doet vermoeden, brengt uw website in kaart met een overzicht van welke pagina's u zult hebben en hoe de pagina's zich tot elkaar zullen verhouden, en zal u helpen uw ontwerp- en informatiearchitectuur helemaal opnieuw op te bouwen.
Overweeg deze op te nemen basistypen webpagina's op uw website:
Hoofdpagina
Dit is de eerste pagina van uw website, dus het is vaak de eerste pagina die nieuwe bezoekers zien. Ze moeten eerst de belangrijkste informatie zien die ze nodig hebben, begrijpen wat u aanbiedt en weten hoe ze gemakkelijk kunnen navigeren naar wat ze vervolgens moeten doen.
Over ons
Hier kunnen bezoekers basisinformatie vinden over uw bedrijf, hoe u bent begonnen, waar u bent, uw missie en de profielen van belangrijke leden van uw team.
U kunt ook links opnemen naar openingstijden en locaties (als u die heeft), links naar pagina's op sociale media en contactgegevens.
Diensten
Afhankelijk van wat uw bedrijf of organisatie doet, kan een pagina met korte uitleg over de diensten die u aanbiedt of de visuele inhoud van uw producten en links naar gedetailleerde pagina's voor meer informatie over die diensten, zeer nuttig zijn voor nieuwe bezoekers.
Carrières
Als je vaak nieuwe teamleden nodig hebt, overweeg dan een pagina waar je beschikbare vacatures kunt markeren of een formulier waar mensen kunnen informeren naar vacatures.
Blog
Als u regelmatig inhoud plaatst, kan een blogpagina een centrale locatie zijn die bezoekers kunnen vinden ...
Dit kunnen product- of service-updates zijn, artikelen met betrekking tot wat u aanbiedt, profielen van nieuwe projecten en andere inhoud die websitebezoekers helpt te informeren over uw organisatie.
Aanbevolen lectuur: Stap voor stap een blog starten.
2. Maak een draadframe
Un wireframe is een skeletdiagram voor uw website. Net als een plattegrond voor een huis, geeft het u een tweedimensionaal beeld van het ontwerp, de structuur en de functionaliteit van uw website.
Wireframes kunnen worden gemaakt met een eenvoudige pen en papier, of digitaal met behulp van webontwerptools of een websitebouwer die u kan helpen uw webpaginastructuur visueel te communiceren.
er 3 soorten draadframes en terwijl u uw website ontwikkelt, wisselt u tussen hen, terwijl u meer "loyaliteit" of details krijgt.
1. Low-fidelity wireframes
Deze vroege schetsen, die meestal eenvoudige vormen en plaatsaanduidingstekst hebben, zijn geweldig om uw browsestroom in kaart te brengen.
Concentreer u nu op de inhoud en hoe de gebruiker ermee omgaat, in plaats van hoe de site er in werkelijkheid uitziet. Dit gaat over het planningsniveau, dus je schetst alleen de website en denkt na over de hiërarchie.
2. Wireframes met gemiddelde getrouwheid
Op dit moment heb je nog geen live tekst of afbeeldingen. U maakt zwart-witweergaven die een nauwkeurige weergave van de webpaginalay-out laten zien.
Er zijn tools beschikbaar om deze renderings te maken die gratis proefversies bieden, zoals: Schets ou balsamico. Deze stap is de ruggengraat van uw website. Je hebt geen specifiek ontwerp nodig, maar je hebt wel strakke lijnen en een precieze maat nodig.
3. High-fidelity wireframes
In deze laatste stap van uw websiteontwerp maakt u een mockup die eruitziet als uw echte website, met afbeeldingen, kleurencombinaties en echte tekst ...
Nu kunt u dingen zoals uw menu's en interactieve inhoud voor uw website helemaal opnieuw ontwerpen. Hier voeg je kleur en tekst toe, maar verwar het niet met een werkend prototype. Dit is nog maar één voorbeeld van uw websitehiërarchie.
3. Ontwerp met je publiek in gedachten
Terwijl u de ontwerpfasen van een website doorloopt, moet u zich concentreren op het bouwen van een troef om uw publiek van dienst te zijn. Dat is tenslotte het punt.
Zorg ervoor dat u bij elke stap van uw websiteontwikkeling, van prioritering en opmaak tot het bepalen van navigatie, nadenkt over de behoeften van uw doelgroep.
Hoe spannend het ook kan zijn om een volledig unieke en onorthodoxe website te maken, je moet altijd de eindgebruiker voorop stellen.
Biedt een visuele hiërarchie
Dankzij de robuuste hiërarchie kunnen bezoekers snel informatie verzamelen en begrijpen waar ze op uw website naartoe kunnen gaan voor meer informatie.
De visuele hiërarchie omvat spatiëring, kleuren, witruimte, herhaling, enz.
Houd het simpel
Houd bij het ontwerpen van uw website de bezoekerservaring gebruiksvriendelijk door te overwegen of gebruikers alle elementen nodig hebben. Mogelijk voegt u functies toe die de website ingewikkelder maken en het voor uw publiek moeilijker maken om te navigeren.
Zorg voor een duidelijke call-to-action
"Plaats een bestelling", "Koop nu", "Registreer", "Neem contact met ons op" en andere call-to-actions (CTA's) moeten gemakkelijk te vinden en intuïtief zijn.
Blijf jezelf afvragen of het ontwerp van je website het gemakkelijk maakt voor je publiek om te weten waar je naartoe wilt.
Maak het toegankelijk
Je website moet responsive en toegankelijk zijn vanaf elk apparaat. Bekijk het ontwerp en de prestaties van verschillende aspecten van uw website op pc's, tablets en mobiele telefoons.
Zorg ervoor dat gebruikers tekst en afbeeldingen correct kunnen zien op verschillende apparaten, en dat knoppen en calls-to-action gemakkelijk klikbaar zijn op schermen van verschillende groottes.
4. Gebruik foto's om je verhaal te vertellen
Een website is een visuele ervaring, dus focus op afbeeldingen die uw doelgroep aanspreken om te helpen communiceren waar uw merk over gaat.
Als u nog geen eigen foto heeft om uw producten of diensten te illustreren, zijn er veel bronnen voor stockfoto's. Websites zoals Pixabay, Pexels et Unsplash bieden een brede selectie van gratis afbeeldingen voor u helpen beginnen.
Zoek een reeks archiefbeelden van dezelfde set of van dezelfde fotograaf. Hierdoor kunt u stilistische consistentie op uw website behouden. Het maakt uw website-ontwerp professioneler en uw bedrijf betrouwbaarder.
Canva is een andere geweldige tool die u kunt gebruiken om het ontwerp van uw website helemaal opnieuw te verbeteren .
Het is een geweldig programma met tal van functies om uw website er geweldig uit te laten zien.
Aanbevolen lectuur: wat is Canva en waarvoor wordt het gebruikt?
Tips voor het kiezen van afbeeldingen
- Zorg ervoor dat je foto's een verhaal vertellen
- Kies niet alleen een afbeelding omdat deze mooi is. Vraag jezelf af of de afbeelding bij je inhoud past om je merk tot leven te brengen.
- Ook al gebruik je acties, wees origineel.
- Kies niet voor de meest voor de hand liggende optie. Je wilt niet iets kiezen dat een bezoeker meteen zal herkennen, zoals een stockfoto die ze op een dozijn andere websites hebben gezien.
- Zorg ervoor dat de mensen in de afbeeldingen op je doelgroep lijken. Hierdoor zullen bezoekers het gevoel hebben dat uw website, en uw merk, product of dienst, iets is waar ze zich mee kunnen identificeren en dat ze nodig hebben.
Wees consistent met de stijl van de foto
Zorg ervoor dat uw website-visuals trouw blijven aan uw merk. Zorg voor consistentie in kleuren, lettertypen en afbeeldingen, zodat ze uw merkimago versterken.
Afbeeldingen bijsnijden voor meer impact
Als u bijvoorbeeld geïmporteerde koffie verkoopt en een afbeelding vindt van een man die koffie drinkt in een groep mensen, snijd de foto dan bij om de man te markeren. U krijgt meer aandacht en het ziet er uniek uit in vergelijking met andere websites die de afbeelding mogelijk hebben gebruikt zonder bij te snijden.
5. Volg je prestaties
Een website zal continu evolueren naarmate uw bedrijf groeit. Houd uw prestaties in een vroeg stadium bij met behulp van de rapporten van uw website om te zien wat werkt en wat niet. Pas je dan aan om de gebruikerservaring en de resultaten voor jou te verbeteren.
De integratie van Google Analytics naar uw website kan u helpen de activiteit bij te houden om te zien welke pagina's het meeste verkeer genereren en waar mensen op klikken.
Wat is een A/B-test?
de A / B, waar 2 verschillende versies met elkaar worden vergeleken, helpt u te bepalen welke elementen van uw website het beste presteren en zorgt ervoor dat uw CTA uw bezoekers motiveert.
Een manier om te zien hoe gebruikers omgaan met uw website is met een heatmap-tool zoals Hotjar.
De hittekaart biedt een kleurgecodeerde grafische weergave van waar de ogen van mensen op natuurlijke wijze worden getekend op de website. Dit kan u laten zien welke delen van uw website de meeste aandacht krijgen en kan uw toekomstige ontwerpverbeteringen begeleiden.
Omdat het verkeer in realtime wordt gevolgd, is het geschikt voor zowel nieuwe websites als websites met een lange levensduur. En het beste is dat de lay-out van de warmtekaart eenvoudig en duidelijk te begrijpen is.
5 programma's voor het ontwerpen van webpagina's
Hier zijn 5 van de beste programma's voor het helemaal opnieuw ontwerpen van een website. Sommige van deze programma's zijn betaald en stellen u in staat om gratis aan de slag te gaan.
1. Klik op Trechters
ClickFunnels is een generator van verkooptrechters voor ondernemers. U selecteert een vooraf gedefinieerde sjabloon en begint uw webpagina's te ontwerpen met de editor voor slepen en neerzetten.
Het bouwen van uw verkoopproces is eenvoudig omdat ClickFunnels al het giswerk eruit haalt. Lees recensies online en u zult zien dat de beste eigenschap van de tool de bronnen zijn.
ClickFunnels biedt een gratis proefperiode van 14-dagen. Betaalde abonnementen beginnen bij $ 97 / maand.
2. Hoofdpagina's
Leadpages is vooral bekend om zijn daar landen pagina bouwer et pagina van verkoop bouwer, maar je zult zien dat het even goed werkt voorvolledige websites.
Leadpages-software biedt conversiegerichte functies zoals aanmeldingen met één klik en waarschuwingsbalken, waardoor het een goed idee is als u overal op uw website kwaliteitsleads wilt aantrekken ...
Het biedt ook veel sterk geconverteerde en mobielvriendelijke sjablonen zonder enige codeervereiste.
Het Standard Leadpages-abonnement begint bij $ 37 per maand. je kunt probeer Leadpages 14 dagen gratis.
3. Krijg een reactie
GetResponse beschikt over een gestroomlijnde webpagina-ontwerper met slepen en neerzetten waarmee u elk element op de pagina helemaal opnieuw kunt aanpassen en aanpassen aan elk apparaat.
Net als andere webontwerpers biedt GetResponse ook een groot aantal kant-en-klare sjablonen voor bestemmingspagina's.
Maar GetResponse is meer dan alleen een webdesigner. Het is een alles-in-één oplossing die gespecialiseerd is in marketingautomatisering. En als we alles in één zeggen, menen we het ook echt. Het is ook een van de beste platforms voor email reclame op de markt.
Alle GetResponse-abonnementen worden geleverd met 220 e-mailsjablonen, 180 sjablonen voor bestemmingspagina's, 700 formuliersjablonen, 40 automatische trechtersjablonen, 150 integraties en 24/24 live chatondersteuning.
Het Basic GetResponse-abonnement kost $ 15 per maand.
