PAGINA ARCHIVIO PAGINA PERSONALIZZAZIONE PAGINA CHECK-OUT

Transcript

1

2 PAGINA ARCHIVIO PAGINA PERSONALIZZAZIONE PAGINA CHECK-OUT

3 WIREFRAMING E-COMMERCE WIREFRAMING HOME PAGE PAGINA ARCHIVIO Il progetto realizzato dovrà essere un e-commerce, in cui il prodotto che si venederà, (da me scelto), saranno le cravatte. Il wireframing, dovrà essere essenzialmente senza grafica, e conterrà le linee guida per la sua realizzazione. Per la realizzazione di questo sito internet, ho pensato di suddividerlo subito, in prodotti (cravatte) e designer (grandi firme). Così da dare la possibilità al visitatore di filtrare subito il prodotto che vuole cercare. Lo stile dovrà essere elegante, ecco perchè ho utilizzato molto il nero. Nell home page, per inserire tutti gli elementi, viene utilizzato una griglia modulare, con un layout a sezioni per rendere il tutto più ordinato. La caratteristica di questo e-commerce sarà la possibilità, (scelta la cravatta), di personalizzare un profilo d uomo per vedere come puo stare la cosiddetta cravatta con vari indumenti. FLOW CHART HOME PAGE PAGINA PERSONALIZZAZIONE PAGINA CHECKOUT tie knot (tutorial) prodotto designer blog caratteristiche aziendali - di sempre - del mese - della settimana ordine alfabetico - accedi - registrati - spedizione gratuita - acquisto sicuro - velocità di consegna pagina archivio pagina personalizzazione pagina check-out

4 HEADER SEZIONE TIE KNOT (tutorial) SEZIONE PRODOTTI SEZIONE DESIGNER SEZIONE BLOG SEZIONE AZIENDALE Nella sezione prodotto, avremo un effetto :hover, dove al passare del cursore sopra uno dei tre cerchi dell immagine, comparirà la categoria di quel prodotto. Con il cambiare della categoria poi cambierà anche il prodotto con la sua relativa immagine emozionale.la cravatta che ogni volta comparirà sarà sempre il prodotto maggiormente votato. Scrollando con il mouse vedremo anche la sezione delle caratteristiche aziendali, o meglio dire, i punti di forza del negozio. Queste caratteristiche saranno inserite dentro uno slider verticale che automaticamente, con un effetto di transizione farà vedere le suddete caratteristiche.

5 PERCORSO DEI CLICK CARRELLO FILTRI FOOTER Ecco come viene rappresentata la finestra di selezione allo scegliere del prodotto da acquistare. Questa finestra apparirà con un effetto di :hover, ovvero alla sovrapposizione del cursore su ogni cravatta verra in salita la finestra suddetta. Grazie ai pulsanti RADIO abbiamo la possibilità di cambiare la visualizzazione delle cravatte nella pagina archivio. Ora la pagina apparirà di default con 4 colonne di cravatte Grazie a questa finestra si puo scegliere se acquistare e continuare gli acquisti oppure stampare il prodotto o votarlo.

6 MENÙ PRINCIPALE PROFILO PERSONALIZZATO RAITING / WISH - LIST COMMENTI Di seguito viene mostrato come si può effettuare la personalizzazione attraverso i filtri a disposizione che possono andare dal modello della giacca al suo colore, fino a cambiare anche i pantaloni. Scelto il prodotto da acquistare ci verra sempre segnalato con un indicazione affianco all icona del carrello, con scritto la quantita dei prodotti che stiamo acquistando. Il tutto verra visto automaticamente, (attraverso una scrittura AJAX che non richiede ricarimanenti della pagina) nell anteprima del profilo affianco.

7 EFFETTO ZOOM In questa finestra vedremo, grazie all effetto dello zoom i dettagli della nostra cravatta. Insieme a questo effetto viene pure inserita la descrizione della cravatta PAGAMENTO Qui a lato avremo i vari step dell eventuale pagamento, all inizio un riepilogo dei nostri acquisti. Nello step 2 abbiamo la scelta del corriere e l indirizzo, infine avremmo il pagamento con contrassegno o eventuale Paypal CORRIERI Tabella descrittiva degli eventuali corrieri che si possono scegliere, con costo, descrizione e tempistica delle varie aziende. PRODOTTI CORRELATI Alla fine della pagina avremmo le varie cravatte correlate con la nostra o con i nostri prodotti acquistati, con eventuali consigli