In deze digitale wereld neemt de vraag naar eCommerce-websites met de dag toe, aangezien alle bedrijven afhankelijk zijn van online. En aangezien e-commerce over de hele wereld concurreert, wil iedereen het beste platform creëren.
En de belangrijkste voorwaarde voor het maken van de beste eCommerce-website is het ontwerpen van een effectief wireframe.
Wireframing is de eerste fase van het ontwerpproces van een website. Het doel van wireframing is om op een heel minimale manier te werken om te beginnen met het organiseren en uitzoeken van de stroom van een pagina.
Het is de pre-fase voordat je je zorgen gaat maken over zaken als de lettertypen en de kleuren. Met wireframing laat je jezelf heel snel werken en genereer je heel veel ideeën.
Als je erover nadenkt om er zelf een te hebben eCommerce website, volg deze richtlijnen. Hier vindt u de nodige tips en best practices voor wireframes voor een eCommerce-website.
Wireframing: praktische tips en tips
Begin uw wireframing altijd met alleen een pen en een stuk papier. Je zou op de computer kunnen beginnen en veel mensen doen dat. Maar het is beter om alleen grijze vakken te gebruiken en het standaardlettertype te gebruiken.
Wanneer je probeert om dingen goed op elkaar af te stemmen of een doos precies de juiste maat te krijgen, dan ben je gefocust op die kleine details. Dan verlies je de flow en kun je geen snelle ideeën genereren.
Dus, door alleen pen en papier te gebruiken, kun je jezelf echt rommelig maken en ideeën opdoen. Laten we het hebben over de dingen die u moet volgen om een wireframe voor een eCommerce-website te ontwerpen.
Ken de inhoud van uw eCommerce-website
Voordat u begint, moet u weten welke inhoud er op de pagina staat die u aan het ontwerpen bent. Het is jouw taak om de informatie te ontwerpen, zodat je moet weten welke informatie er op de pagina staat. De informatie die je moet overbrengen voordat je kunt beginnen met ontwerpen.
Dat betekent niet dat u de exacte kopie definitief moet hebben, u moet alleen een globaal idee hebben van de informatie. Waar het over gaat en hoeveel er van is. Hier heb ik een lijst gemaakt van enkele veelvoorkomende inhoud van een eCommerce-website.
- een kop
- Bio-info
- een voettekst
- Foto's en titels voor elk bericht
- Misschien een blurb
- Links naar sociale media
- Een zoekbalk en een nieuwsbriefaanmelding
Gebruik de techniek van Crazy 8 om ideeën te genereren
Om ideeën te genereren, kunt u een techniek gebruiken die bekend staat als: 'gekke 8's'. Volgens deze techniek moet je een stuk papier in 8 verschillende secties vouwen en dan doen 8 verschillende ideeën voor een wireframe zo snel mogelijk.
Je kunt zo groot of zo klein tekenen als je wilt, wat voor jou het beste werkt. Soms, als de pagina lang is, wil je misschien vier aan de ene kant en dan vier aan de andere kant. Dit werkt als een opwarmtechniek voor je hersenen. Ontwerpers vinden het altijd fascinerend omdat ze beginnen na te denken over ideeën over eCommerce-websites.
Er is maar één voor de hand liggende manier waarop u alles wilt regelen. Maar als je jezelf dwingt om steeds meer concepten te bedenken, zul je versteld staan van alle ideeën die je net in je hoofd had verstopt.
Denk aan een draadframe als een bouwblauwdruk
Overweeg om een plan van uw eCommerce-website bij wireframing. Het doel van een wireframe is om het basisskelet te creëren voor elk scherm in je ontwerp. Op die manier kunt u de algehele lay-out van het ontwerp met uw klanten bekijken.
Teken een nieuwe mockup
Het maakt echt niet uit of het eruit ziet alsof een kind het naar iemand anders heeft getekend; het punt is dat je je ideeën uit hebt. Nu weet je wat het betekent en kun je aan de slag met je ontwerp. Kijk na deze fase naar de 8 concepten en zet een sterretje ernaast waarvan je denkt dat het het ontdekken waard is.
Soms ga ik dan een nieuwe mockup tekenen van al die stukjes bij elkaar. Maar over het algemeen moet u op dit punt naar de computer gaan.
Welk programma heb je nodig?
Om een wireframe voor een eCommerce-website te maken, is geen programma vereist. Het enige wat je nodig hebt is een goed oud stuk papier en iets om mee te schrijven. Ik gebruik echter liever invision uit de vrije hand bij het maken van mijn wireframes.
Potloden en papier zijn geweldig, maar uit de vrije hand kunt u uw wireframes rechtstreeks naar de klant sturen. Presenteer ze realtime en geef ze ook de mogelijkheid om aantekeningen te maken in hetzelfde document. Hierdoor kunt u itereren en snel leveren.
Gebruik de Sketch-app voor het wireframen van uw e-commercewebsite
U kunt een programma genaamd Sketch gebruiken om uw wireframes te modelleren. Maar gebruik hier effen grijze vakken en de standaardtekst. De reden hiervoor is dat u veel ontwerpen aan uw klanten moet laten zien. Het gebruik van kleuren of de juiste pictogrammen of wat dan ook zal alles in de war brengen.
Maak niet zomaar één wireframe in Sketch. Maak er zoveel als je denkt dat je ideeën hebt voor je favoriete onderdelen van dit schetsproces. Daarna is het een goed idee om er een nachtje over te slapen. Op die manier kun je er met een frisse geest en een nieuw perspectief op terugkomen voordat je doorgaat naar de volgende fase.
Ken het doel van uw producten
Bij het starten van een wireframe moet u weten wat uw product moet bereiken. Stel dat u bijvoorbeeld een eenvoudig inlogscherm voor een mobiele app van een eCommerce-website wireframed. Deze schermen hebben meestal een paar vereiste items, zoals een gebruikersnaam en wachtwoordveld, een verzendknop, call-to-action, enz.
Maar het belangrijkste doel is om de gebruiker aangemeld te krijgen. Maak een lijst van de vereisten die u kent voordat u daadwerkelijk begint met het maken van het wireframe.
Probeer ze in een volgorde van prioriteit of in volgorde van wat het belangrijkst is voor de gebruiker op te sommen. Nu u uw vereisten heeft, kunt u naar het belangrijke deel gaan.
schetsen
Schetsen is essentieel bij wireframing omdat het je in staat stelt om je ideeën snel uit te werken. Als je je zorgen maakt, zal schetsen met een muis een uitdaging zijn. Freehand maakt het vrij eenvoudig om een eenvoudige rechthoek te maken.
U kunt Alt of Option gewoon ingedrukt houden bij het tekenen van uw vorm en het zal het gladstrijken. Dit werkt ook met cirkels, je kunt ook verschuivingen vasthouden tijdens het tekenen om rechte lijnen te maken en zelfs spelen met je vulling en dekkingsopties.
Zoals je kunt zien, is wireframing niet erg ingewikkeld werk als het op visuals aankomt. Het zijn meestal vakken en tekst zoals de rest van het internet. Het verschil is de gedachte erachter. Alles wat in een wireframe is gemaakt, is uitsluitend bedoeld om uw ideeën snel te communiceren.
Beste apparaat voor het wireframen van uw e-commercewebsite
Je kunt iPad Pro, Apple Pencil en een app genaamd Concepts gebruiken. In deze app kun je een onbeperkt canvas hebben. En je kunt gewoon blijven schetsen en de pagina altijd verplaatsen om meer ideeën op te doen.
Essentiële elementen die u moet opnemen voor uw eCommerce-website
Productvermeldingspagina is een must voor elke eCommerce-website. Je moet dus een goede en aantrekkelijke landingspagina ontwerpen. Bovendien zijn er verschillende elementen waarmee u rekening moet houden bij wireframing. Zij zijn-
- Productkaarten
- filters
- Ontwerp van productdetailpagina
- Afbeeldingen van hoge kwaliteit
- Winkelwagen knop
- Prijs knop
- Productbeschrijving details:
- Afrekenen knoppen
- Coupon codes
Conclusie
Wanneer u een eCommerce-website wireframed, richt u zich dan alleen op de gebruikerservaring. In de eerste fase alleen papier en potlood en later voor de visuele poetsbeurt.
Volg deze richtlijnen om geweldige online winkelervaringen te bereiken. Onthoud dat een juiste hiërarchie en uitlijning gemakkelijk te scannen pagina's met producten zullen creëren.
En gebruiken Z-patronen in pagina-ontwerp biedt u ook geweldige gebruikerservaringen. Denk er altijd aan om jezelf in de schoenen van de gebruiker te verplaatsen en na te denken over de belangrijkste stukjes informatie. Dat is alles over wireframing voor e-commerce websites.
Een deskundige ontwerper zou nemen: 4-7 dagen om een wireframe te maken. En voor een gemiddelde ontwerper kan het even duren voordat: 12-20 dagen of meer.
Wireframe is een blauwdruk en een mockup is een visueel model. Het betekent dat wanneer je je potloodschetsen een digitale en gekleurde vorm geeft, het een mockup wordt.