fbpx

Gids voor het opnieuw ontwerpen van websites: In 10 stappen naar een website ontwerp

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on pinterest
Als een webpagina niet goed converteert dan kun je deze met slechts enkele aanpassingen optimaliseren. Maar als je met optimaliseren niet de gewenste doelstellingen bereikt, omdat het conversieprobleem meerdere aspecten van de website raakt, zijn er wellicht grotere veranderingen nodig. Hoog tijd om na te gaan of een herontwerp van je website noodzakelijk is.


In ons vorige artikel: “hoe u zich voorbereidt op een herontwerp van een website” heeft u kunnen lezen wat er op het spel staat bij het opnieuw ontwerpen van een website. Nu is het dan tijd om te praten over hoe u er een kunt uitvoeren. Hier zijn de 10 stappen die u moet nemen om ervoor te zorgen dat uw herontwerp succesvol is:

Stap 1: Maak het voorstel voor het herontwerp van de website

Zelfs als je weet wat het spelplan is, moet de klant of je team aan boord zijn met wat je gaat doen.

Maak een voorstel voor het herontwerp van een website waarin het volgende wordt beschreven:

  • Omvang van het project
  • Project planning en kosten
  • Tijdlijn en mijlpalen
  • Lijst met te leveren functionaliteiten
  • Voorwaarden van herontwerp
elementor-proposal-template


Stap 2: Maak een planning

monday-project-planner
Een screenshot van Monday.com




Gebruik de stappen die hier zijn uiteengezet, evenals de afzonderlijke taken die u binnen elke taak uitvoert, om uw herontwerptaak ​​in te stellen binnen uw projectbeheersysteem.

Wees niet bang om alles te gedetailleerd op te schrijven, bijvoorbeeld wanneer mijlpalen worden bereikt. Zodra u alle taken heeft vastgelegd en ze de vervaldatums heeft gegeven, begint u taken toe te wijzen aan belanghebbenden, zodat ze kunnen zien wat er gebeurt en eventueel wanneer zij iets moeten aanleveren.

Het is geen slecht idee om een ​​startgesprek te hebben met uw team of indien u voor klanten websites ontwikkelt met uw klant

Stap 3: Onderzoek, plan en organiseer


Alles onder “Voorbereiding op het herontwerp van een website” hierboven wordt in deze fase van de taak gedaan.

Zorg ervoor dat je alles op een speciale plek opslaat, zodat je snel een reeks referenties hebt om jou, je team en je klant door het project te leiden.

Stap 4: Maak een back-up van de website


Hoewel u het ontwerp en de ontwikkeling op een staging-server of subdomein doet, moet u toch een back-up van uw website maken. Er zijn veel WordPress-plug-ins die u bij deze taak kunnen helpen. Wij gebruiken zelf UpdraftPlus.

Stap 5: werk de stijlgids bij


Als de website die opnieuw moet worden ontworpen nog geen stijlgids heeft, is dit het moment om er een te maken. Als er een is, wil je bekijken wat erin staat en ervoor zorgen dat eventuele wijzigingen worden gedocumenteerd.

Je weet nooit hoe vaak of hoe vaak je deze website zal updaten (of wie het zal doen), dus het is altijd een goed idee om deze te bekijken en bij te werken voordat je iets nieuws doet.

Stap 6: Wireframe alle pagina’s die opnieuw worden ontworpen


Tenzij u alleen oppervlakkige wijzigingen aanbrengt in de gebruikersinterface of merkelementen, zullen de lay-out van uw pagina’s en het verloop van de structuur van uw site waarschijnlijk veranderen.

Besteed wat tijd aan het maken van wireframes voor pagina’s of delen van uw site die worden beïnvloed door het nieuwe ontwerp.

Als u de oorspronkelijke ontwerper voor deze website was en u beschikt over de originele wireframes, wees dan niet bang om ze opnieuw te gebruiken. Ze besparen u tijd om ze helemaal opnieuw te moeten bouwen.

Of, als u dat wilt, kunt u Elementor gebruiken als uw wireframing-tool.

Het enige dat u hoeft te doen, is een kopie van uw huidige website op uw testserver maken. Maak vervolgens een nieuwe pagina of sjabloon en begin met het wireframen van uw nieuwe pagina’s of componenten.

U kunt zelfs de bloksjablonen van Elementor gebruiken om het proces te vereenvoudigen:

elementor-blocks

Hoewel er tientallen volledig ontworpen blokken zijn, zijn er veel bloksjablonen die goed zouden werken als standaard tijdelijke aanduidingen.

Stap 7: Maak uw mockups en / of prototypes


Wat geweldig is aan het maken van je wireframes in Elementor, is dat je de mockup-fase direct kunt overslaan en direct door kunt gaan met het bouwen van je werkende prototypes.

.

Stap 8: QA het herontwerp


Zodra uw prototypes zijn uitgewerkt en het herontwerp en / of herschrijven is voltooid, stuurt u de website – de hele website – naar uw contact-persoon..

Als je het alleen gaat doen, is dat ook prima. Geef uzelf wat afstand tussen het ontwerp en de ontwikkeling van het prototype en de kwaliteitsbeoordeling.

Als je 100% tevreden bent met wat er is gemaakt, geef het dan door aan je klant of team en ontvang hun feedback erover.

Stap 9: Push the New Design Live


Met de goedkeuring van uw klant of uw team in de hand en uw checklist vóór de lancering is voltooid, kunt u uw nieuwe ontwerp naar de live-site verplaatsen.

Stap 10: Controleer de site de komende maand zorgvuldig


U moet Google Analytics en uw bruikbaarheidstests (als u nog steeds heatmaps en sessie-opnames heeft) na de lancering goed in de gaten houden.

Het hele punt van het herontwerp van deze website is om uw website beter te laten presteren. Als uw gegevens dat niet weerspiegelen, kunt u eventuele wijzigingen die u heeft aangebracht ongedaan maken of een alternatieve strategie implementeren.

Een van de leuke dingen over het gebruik van WordPress om uw website te bouwen, is dat het automatisch eerdere versies van uw pagina’s opslaat.

Als uw inhoud meer problemen veroorzaakt, gaat u gewoon naar de Revisies van uw pagina en draait u deze terug. Als uw ontwerp het probleem veroorzaakt, kunt u de oude back-up herstellen.

Als uw herontwerp succesvol is, wordt het natuurlijk tijd om betaald te worden voor het voltooien van dit deel van het herontwerp en aan de slag te gaan met de volgende!

Nooit meer de beste Wordpressbazen-content missen?