Come presentare mockup di web design a un cliente?


8

Sto lavorando a un progetto di riprogettazione del sito web. Dovrò presentare alcuni modelli diversi al cliente per la revisione. Voglio assicurarmi che il cliente possa vedere tutto nel contesto. Non voglio presumere che il client abbia il software giusto. Forse potresti anche aggiungere alcuni commenti, domande o sfondi sulla direzione del design.

Qual è un modo tipico di presentare i modelli ad un cliente? Presumo che presentare modelli di siti Web tramite e-mail non fosse il modo migliore. Se l'e-mail è un mezzo efficace per presentare i modelli, spiegalo in una risposta.


bene un mezzo di successo di un modello è codificarlo. Ci sarà SEMPRE una variazione dal design al codice. Quella piccola variazione farà sì che il cliente chieda o dica "che non era così nel progetto".
DᴀʀᴛʜVᴀᴅᴇʀ

Potresti sempre creare il tuo server e fornire loro collegamenti al modello che hai progettato? Penso che sarà il modo migliore. Potresti voler creare un account di basso livello e fornire loro i dettagli di accesso.
BBking

Risposte:


6

Bene, ci sono diversi modi per inviare un mockup a un client. Se sei preoccupato per il software, puoi esportare ogni disegno come .pdfe creare una pagina multipla .pdfin Acrobat e aggiungere commenti per facilitare la presentazione se non desideri semplicemente inviare immagini.

Un'altra opzione è farli stampare sul tabellone e fare una dimostrazione durante una riunione.

creare presentazioni e visualizzarle in un'intervista.

Codice il sito web in wire-frame, che è il motivo per cui ho postato questo .

Se vuoi andare a buon mercato acquista un po 'di carta per schizzi come questo , prendi un righello di circa 36 "wireframe il tuo sito e usa matite colorate per illustrare il wireframe.

La tua domanda è molto vaga e ci sono diverse idee e soluzioni. Quando leggo questa domanda non so quale fase ti trovi nella riprogettazione. Quando ti riferisci al modello, ho pensato che fossi nella fase del wireframe.

MODIFICA: ma in realtà se sei così preoccupato che il cliente ottenga la giusta sensazione per il sito, potresti anche codificarlo e assicurarti che il tuo file CSS sia abbastanza modificabile in modo da non scavare un buco con le modifiche. Questo sito dovrebbe essere un sito CMS, un semplice sito HTML, un sito di eCommerce, ecc. Ecc. Perché non creare l'intero sito in un wireframe CSS?


Quelle sono alcune buone idee. Per mockup intendo un esempio di alta qualità di come sarebbe il sito (ancora nessun HTML / CSS). Ho pianificato di creare alcuni modelli diversi in Photoshop perché è più veloce / facile cambiare il design in Photoshop piuttosto che nel codice. La creazione di una presentazione basata sul Web aiuterebbe il cliente a farsi un'idea di come sarebbe il sito in un browser. Potrei anche aggiungere un po 'di Google Analytics per sapere esattamente quale browser sta utilizzando il client in modo da poter fare in modo che appaia bene nel loro browser.
Andrew,

bene quale browser utilizza il client non importa se la loro demografia è verso qualcosa di diverso. devi sapere qual è la loro demografia per vedere se IE è necessario o no.
DᴀʀᴛʜVᴀᴅᴇʀ

Un buon consiglio, ma conosco già i browser di destinazione. La parte importante della conoscenza del browser client è che non si commettono errori evidenti che il client vedrà immediatamente. Inoltre, se il client utilizza uno strumento di amministrazione per modificare il proprio sito, è importante assicurarsi che il proprio browser sia supportato.
Andrew,

5

Se ho capito bene, ti starai chiedendo se esiste un modo "standard" di condividere i prototipi (come accade per l'invio, ad esempio, di disegni di logo, dove di solito segui le linee guida di presentazione).

Per quanto mi riguarda: no, non c'è.

Dipenderà principalmente dal mezzo di comunicazione che hai utilizzato con i tuoi clienti. Sebbene le e-mail siano perfettamente valide nella maggior parte dei casi, ad esempio, potresti dover condividere i risultati del tuo lavoro con un team più grande. In tal caso, potresti voler utilizzare alcune applicazioni che consentono alle persone di interagire in modo più dinamico.

Alcuni strumenti di gestione del progetto che ho usato per il feedback del team sono BaseCamp e Trello . Ma ce ne sono molti simili che potresti trovare molto utili (anche Google Documenti: qui c'è anche un elenco completo ). Il loro vantaggio è che consentono a membri diversi di lasciare input sullo sviluppo e, come accennato nel commento, consente follow-up su tutto.

Balsamiq è un altro ottimo strumento per aggiungere facilmente commenti e apportare modifiche ai modelli online (non richiede davvero alcuna competenza da parte del cliente, è molto intuitivo), ma probabilmente avrai bisogno di una licenza estesa per poter invitare le persone al di sopra di.


Quella lista completa è abbastanza buona. Non pensavo necessariamente a un servizio di terze parti (anch'io sono uno sviluppatore, posso costruirne uno mio). Mi chiedo solo come i designer di solito presentano modelli di web design in modo digitale per ottenere il feedback dei clienti.
Andrew,

3

Penso che tu stia chiedendo dell'atto fisico di presentazione piuttosto che i dettagli della tecnologia.

Hai ragione in quel contesto è una parte enorme di una presentazione di successo. Inviare mock-up per loro da guardare senza di te non è l'ideale. Ciò che accadrà in genere è che riceverai un feedback sfocato ... spesso dove i commenti si concentreranno sui dettagli estetici insignificanti e spesso soggettivi piuttosto che sulle principali questioni strategiche del quadro generale.

Quello che consiglierei è una forma di incontro formale con loro. Idealmente di persona, ma se non di persona, puoi gestirlo facilmente tramite una telefonata (invia i file 5 minuti prima della chiamata) o tramite una sorta di tecnologia di condivisione dello schermo come Skype.

In questo modo puoi non solo mostrare i tuoi oggetti visivi, ma puoi SPIEGARE i tuoi oggetti visivi. Puoi parlare delle decisioni estetiche e di strategia aziendale che hai preso per giungere alle conclusioni a cui sei arrivato. Puoi aiutare a focalizzare l'attenzione sugli aspetti chiave e deviare dai meno dettagli chiave per mantenere l'obiettivo del progetto.

Per quanto riguarda cosa mostrare, sono d'accordo con molti altri commenti sul fatto che mostrare modelli visivi statici per i siti Web non sia l'ideale e ci sono probabilmente modi migliori per farlo, ma questa è davvero una domanda completamente diversa.


Buon post e da aggiungere credo che ti riferisci a un webinar. Ci sono alcune soluzioni per le piccole imprese e soluzioni aziendali là fuori.
DᴀʀᴛʜVᴀᴅᴇʀ

3

Come sviluppatori e comunicatori, cerca di far sapere ai tuoi clienti che ciò che stanno guardando è un'immagine statica e piatta della loro futura progettazione del sito. Ecco alcuni dei metodi per esporre un web design a un cliente:

Metodi di presentazione di modelli di progettazione Web

  • Posiziona l'immagine su una pagina Web e invia loro un link

  • Invia un JPEG o PNG via e-mail

  • Usa un qualche tipo di applicazione basata sul web

  • Utilizzare il sito Web CodedPreview

  • Crea uno Studio client

  • Esporta mock-up in PDF

  • Invia loro un file JPEG o PNG e chiedi loro di stamparlo


2

Ho contattato un mio amico che mi ha raccomandato quanto segue:

  • Se stai solo lavorando con le immagini, ci sono app come mocku.ps
  • Se stai cercando un prodotto più completo, c'è Pixelapse , che si concentra maggiormente sulla collaborazione. Include controllo della versione, backup, commenti, ecc.

2

Non ci sono procedure standard a mia conoscenza. Come per la maggior parte delle cose, una volta che si ottiene di più dal lato commerciale del processo, diverse aziende e individui diversi hanno pratiche diverse.

Ho lavorato con un'azienda, che era un po 'più sul lato del lavoro / marketing continuo per i clienti, hanno un sistema intelligente, in cui danno ai loro clienti un accesso al loro sito Web, che li porta a una pagina con tutti i loro risorse disponibili per il download. Questo era più orientato alle copie del loro logo e ad altre opere varie in diversi formati di colore, risoluzioni e formati di file, quindi le aziende senza un disegno sfacciato potevano prenderne diverse varianti o un file vettoriale se ne avessero avuto bisogno per qualsiasi motivo. Puoi fare qualcosa di simile a questo, avere un log in che visualizza immagini e note sul lavoro in corso.

Questa è una procedura piuttosto pesante però. Se è un concerto più piccolo, una tantum, potresti semplicemente prendere in considerazione la possibilità di compilare le tue immagini in un file pdf con note che spiegano cosa sono, dove tu o loro sono nel processo, cosa è necessario da chi e cosa viene dopo. Schiaccia il tuo logo in alto e formattalo bene, e sembrerà più professionale che semplicemente allegando immagini a un'email.


1

Qualche mese fa mi sono imbattuto in un'app chiamata InVision . Offre la possibilità di caricare modelli e le loro revisioni, creare prototipi interattivi e la possibilità di lasciare un commento su un'area specifica del modello. Questa app ha migliorato il modo in cui do / ricevo feedback e comunico con i miei designer e clienti.


0

Bene, stai creando modelli per comunicare. Quindi vai a seminari dal vivo ogni volta che puoi.

In tali seminari, discutere i modelli mentre allo stesso tempo modificare e annotare i modelli proprio in quel momento. Stai creando qualcosa insieme - questo lo rende anche il loro bambino.

Si noti che sopra funziona se si procede in più passaggi (al contrario di avere una grande presentazione quando hai già completato completamente un prototipo dettagliato). A proposito, prima vuoi simulare le tue schermate / pagine principali. Solo allora vai nei dettagli e fallo uno scenario alla volta.


0

Nell'ultimo progetto che ho dovuto presentare, abbiamo avuto un incontro con il cliente e abbiamo mostrato lo storyboard png nel browser. Niente di speciale, ma ha presentato i disegni nel loro ambiente "nativo".


0

La mia esperienza con l'invio di immagini via e-mail al client è negativa - il client di solito ha un problema con il rapporto e la dimensione delle immagini nel loro client di posta. Ciò potrebbe comportare un aspetto diverso dell'anteprima di un web design.

Usiamo il servizio online per pubblicare il nostro lavoro. Carichiamo le nostre immagini su un servizio di hosting di terze parti e inviamo gli URL per il cliente.


0

In precedenza, negli anni 2000 l'invio di layout via mail era efficace. Ora, la presentazione del design al cliente offre servizi speciali. È stato progettato appositamente per questo.

Vediamo come il servizio (m) maquetter.com può aiutarti. È appositamente sviluppato per questo scopo che tu conti:

  • Aggiungi rapidamente i layout del sito che disegni;
  • Distribuire i layout per sezioni del sito Web (ripetendo il suo menu, ad esempio).

Ti permette anche:

  • per contrassegnare i layout approvati dal cliente
  • aggiorna lo stesso layout e memorizzalo nella cronologia.

Questo servizio ti fornisce un breve link. Lo invii (via mail, sms o skype). Il cliente può visualizzare comodamente i layout in qualsiasi browser. Puoi come funziona come può vederlo il tuo cliente .

Il servizio è gratuito Ma puoi utilizzare un piano tariffario a pagamento per essere in grado di presentare più layout.

Prova tu stesso

Per maggiori informazioni puoi leggere il blog


Saluti. Sì, ho creato l'idea del servizio e del project manager. Nel mio tempo libero voglio aiutare i designer nel loro lavoro. Trasmettere loro l'idea di questo e servizi simili (conosco 13ti). Sì maquetter rappresentato nella versione a pagamento. Ma il 1 ° ottobre, abbiamo introdotto il pacchetto di servizi "gratis - per sempre".
Igor Abyzov,

0

Puoi creare una demo interattiva con i tuoi screenshot / immagini. Dai un'occhiata a questi strumenti: http://www.appdemostore.com/ e http://giveabrief.com/ .

Entrambi sono molto facili da usare; scegli un frame del dispositivo, carica le tue immagini e aggiungi l'interazione di cui hai bisogno. Puoi includere pulsanti, icone per pizzicare, estendere ecc. Spero che ti possa aiutare. :)

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.