In questo mondo digitale, la domanda di siti Web di eCommerce aumenta di giorno in giorno poiché tutte le aziende si affidano all'online. E poiché l'eCommerce è in competizione in tutto il mondo, tutti vogliono creare la migliore piattaforma.
E la condizione principale per creare il miglior sito di eCommerce è progettare un wireframe efficace.
Il wireframing è la prima fase del processo di progettazione del sito web. Lo scopo del wireframing è lavorare in un modo davvero minimo per iniziare a organizzare e capire il flusso di una pagina.
È la fase preliminare prima di iniziare a preoccuparti di cose come i caratteri e i colori. Con il wireframing ti permetti di lavorare molto velocemente e di generare molte idee.
Se stai pensando di averne uno tuo sito e-commerce, segui queste linee guida. Qui troverai i suggerimenti necessari e le migliori pratiche per wireframe per un sito Web di e-commerce.
Wireframing: migliori pratiche e suggerimenti
Inizia sempre il wireframe usando solo una penna e un pezzo di carta. Potresti iniziare dal computer e molte persone lo fanno. Ma fare solo caselle grigie e usare il carattere predefinito è meglio.
Quando provi ad allineare le cose correttamente o fai in modo che una scatola abbia la dimensione esatta giusta, è allora che ti concentri su quei piccoli dettagli. Quindi perderai il flusso e non potrai generare idee rapide.
Quindi, attaccandoti solo con carta e penna puoi lasciarti davvero disordinato e tirare fuori le idee. Parliamo delle cose che dovresti seguire per progettare un wireframe per un sito di eCommerce.
Conosci i contenuti del tuo sito eCommerce
Prima di iniziare devi sapere quale contenuto sta andando sulla pagina che stai progettando. Il tuo compito è progettare le informazioni in modo che tu debba sapere quali informazioni stanno andando sulla pagina. Le informazioni che devi trasmettere prima di poter iniziare a progettare.
Ciò non significa che devi finalizzare la copia esatta, devi solo avere un'idea approssimativa delle informazioni. Di cosa si tratta e quanto ce n'è. Qui, ho fatto un elenco di alcuni contenuti comuni di un sito Web di eCommerce.
- Un'intestazione
- Informazioni biografiche
- Un piè di pagina
- Foto e titoli per ogni post
- Forse una sfocatura
- Link ai social media
- Una barra di ricerca e un'iscrizione alla newsletter
Usa la tecnica di Crazy 8 per generare idee
Per iniziare a generare idee, puoi utilizzare una tecnica nota come '8 pazzi'. Secondo questa tecnica, devi piegare un pezzo di carta in 8 sezioni diverse e poi farlo 8 idee diverse per un wireframe il più rapidamente possibile.
Puoi disegnare grande o piccolo quanto vuoi, qualunque cosa funzioni meglio per te. A volte, se la pagina è lunga, potresti volerne fare quattro su un lato e poi quattro su un altro lato. Funziona come una tecnica di riscaldamento per il tuo cervello. I designer lo trovano sempre affascinante perché iniziano a pensare a idee sui siti Web di e-commerce.
C'è solo un modo ovvio in cui potresti voler organizzare tutto. Ma quando ti costringerai a pensare a sempre più concetti, rimarrai sorpreso da tutte le idee che avevi appena nascoste nella tua mente.
Pensa a un Wireframe come a un progetto di costruzione
Considera di fare un cianografia del tuo sito eCommerce durante il wireframing. L'obiettivo di un wireframe è creare lo scheletro di base per ogni schermo del tuo progetto. In questo modo puoi rivedere il layout generale del design con i tuoi clienti.
Disegna un nuovo mockup
Non importa se sembra che un bambino l'abbia disegnato per qualcun altro; il punto è che hai tirato fuori le tue idee. Ora sai cosa significa e hai un posto dove iniziare con il tuo design. Dopo questa fase, guarda gli 8 concetti e metti una piccola stella accanto a quello che ritieni valga la pena esplorare.
A volte andrò quindi a disegnare un nuovo modello di tutti quei pezzi insieme. Ma in generale, a questo punto dovrai passare al computer.
Di quale programma hai bisogno?
Per creare un wireframe per un sito eCommerce, non è richiesto alcun programma. Tutto ciò di cui hai bisogno è un buon vecchio pezzo di carta e qualcosa con cui scrivere. Tuttavia, preferisco usare Invision a mano libera durante la creazione dei miei wireframe.
Matite e carta sono ottime ma a mano libera ti permettono di inviare i tuoi wireframe direttamente al cliente. Presentali in tempo reale e dai loro anche l'opportunità di prendere appunti nello stesso documento. Ciò ti consente di eseguire iterazioni e fornire rapidamente.
Usa l'app Sketch per il wireframing del tuo sito e-commerce
Puoi usare un programma chiamato Sketch per simulare i tuoi wireframe. Ma qui, usa semplici caselle grigie e il testo predefinito. Il motivo è che dovrai mostrare molti design ai tuoi clienti. L'uso di colori o icone appropriate o qualsiasi altra cosa confonderà tutto.
Non creare solo un wireframe in Sketch. Crea quante più idee ritieni per le tue parti preferite di questo processo di disegno. Dopodiché, è una buona idea dormirci sopra. In questo modo sarai in grado di tornarci con una mente fresca e una nuova prospettiva prima di passare alla fase successiva.
Conosci lo scopo dei tuoi prodotti
Quando si avvia un wireframe è necessario sapere cosa deve realizzare il proprio prodotto. Ad esempio, supponi di eseguire il wireframe di una semplice schermata di accesso per un'app mobile di un sito Web di e-commerce. Queste schermate in genere hanno alcuni elementi richiesti come un campo nome utente e password, un pulsante di invio, invito all'azione, ecc.
Ma l'obiettivo principale è ottenere l'accesso dell'utente. Elenca i requisiti che conosci prima di iniziare a creare effettivamente il wireframe.
Prova a elencarli in ordine di priorità o in base a ciò che è più importante per l'utente. Ora che hai le tue esigenze, puoi arrivare alla parte importante.
abbozzare
Lo schizzo è essenziale nel wireframing perché ti consente di ottenere rapidamente le tue idee. Se sei preoccupato, disegnare con un mouse sarà impegnativo. Freehand rende abbastanza facile creare un semplice rettangolo.
Puoi semplicemente tenere premuto Alt o Opzione quando disegna la tua forma e la leviga. Funziona anche con i cerchi, puoi anche tenere i turni durante il disegno per creare linee rette e persino giocare con le opzioni di riempimento e opacità.
Come puoi vedere, il wireframing non è un lavoro particolarmente complesso quando si tratta di elementi visivi. Sono principalmente caselle e testo come il resto di Internet. La differenza è il pensiero che ci sta dietro. Tutto ciò che viene creato in un wireframe ha il solo scopo di comunicare rapidamente le tue idee.
Il miglior dispositivo per il wireframing del tuo sito e-commerce
Puoi utilizzare iPad Pro, Apple Pencil e un'app chiamata Concepts. In questa app, puoi avere una tela illimitata. E puoi semplicemente continuare a disegnare e spostare sempre la pagina per ottenere più idee.
Elementi essenziali che devi includere per il tuo sito eCommerce
La pagina di elenco dei prodotti è un must per qualsiasi sito Web di e-commerce. Quindi, devi progettare una pagina di destinazione buona e attraente. Inoltre, ci sono diversi elementi che dovresti tenere a mente durante il wireframing. Sono-
- Schede prodotto
- Filtri
- Design della pagina dei dettagli del prodotto
- Immagini di alta qualità
- Pulsante carrello
- Pulsante prezzo
- Dettagli della descrizione del prodotto
- Pulsanti di pagamento
- Codici promozionali
Conclusione
Quando esegui il wireframing di un sito Web di eCommerce, concentrati solo sull'esperienza dell'utente. Nella prima fase, solo carta e matita, quindi passare alla lucidatura visiva in seguito.
Per ottenere fantastiche esperienze di acquisto online, segui queste linee guida. Ricorda solo che una gerarchia e un allineamento adeguati creeranno pagine di prodotti facili da scansionare.
E usando Motivi a Z nel design della pagina ti fornirà anche esperienze utente straordinarie. Ricorda sempre di metterti nei panni degli utenti e di pensare alle informazioni chiave. Si tratta di wireframing per i siti Web di e-commerce.
Ci vorrebbe un designer esperto 4-7 giorni per creare un wireframe. E per un designer medio, potrebbe ritardare 12-20 giorni o più.
Wireframe è un progetto e un mockup è un modello visivo. Significa che quando dai ai tuoi schizzi a matita una forma digitale e colorata, si trasforma in un mockup.