Vorrei sapere la differenza tra Wireframes e Mockup. Spero di ottenere una semplice comprensione della differenza o di sapere definitivamente che entrambi sono uguali.
L'ho cercato su Google ma non riuscivo a capire quale fosse esattamente la differenza, lo apprezzerei se qualcuno potesse spiegarmelo in modo conciso.
Risposte:
Un wireframe riguarda la funzionalità. Può essere uno schizzo davvero semplice che dimostra che tipo di cose che puoi fare nel tuo design. Ad esempio, un wireframe di un sito Web mostrerà la navigazione, i pulsanti principali, le colonne, il posizionamento di diversi elementi. Puoi pensarlo come un progetto per un sito web.
Un mockup è una rappresentazione realistica di come apparirà il prodotto, in questo caso: un sito Web. Il risultato finale può apparire esattamente come il modello o essere una sua variazione dopo le revisioni della versione. Mentre alcune persone preferiscono disegnare i modelli usando un software grafico, altri lo fanno direttamente in HTML / CSS.
Uso Balsamiq per i wireframe e Photoshop / Illustrator o HTML + CSS (a seconda della complessità) per i modelli.
Un esempio di un wireframe:
I wireframe sono forme o linee rudimentali utilizzate per designare solo posizione e / o dimensione. L'obiettivo di qualsiasi wireframe è "adattare" gli elementi in un layout, non indicare come gli elementi possono effettivamente apparire in un progetto finale, solo dove saranno posizionati.
I mockup sono costruiti sopra i wireframe e vanno oltre per mostrare gli aspetti di aspetto generale di un design, tra cui le scelte di tipo, le scelte di colore, ecc. L'obiettivo di un mock up è mostrare, il più vicino possibile, come verranno visualizzati tutti gli aspetti finali.
Sostengo la risposta dettagliata di @Yisela, anche per aggiungere questa visione esposta nella seguente presentazione
Ecco un breve riassunto di un articolo di Marcin Treder :
Wireframe
Un wireframe è una rappresentazione a bassa fedeltà di un design. Dovrebbe mostrare chiaramente:
• La struttura delle informazioni (dove?)
• Una descrizione e visualizzazione di base dell'interazione utente - interfaccia (come?)
Modello
I wireframe vengono utilizzati per definire il framework, la gerarchia delle informazioni, dimostrare il flusso di lavoro, fornire dettagli su ciò che è sullo schermo e una descrizione del funzionamento di un componente (annotazione). A seconda della complessità dell'applicazione o del sito, i wireframe dovrebbero essere basati su un altro requisito realizzabile; modelli di processo. I wireframe possono essere utilizzati per ottenere requisiti da un client ed eventualmente confermare i requisiti con un client. I wireframe sono un modello visivo della struttura di un sito o di un'applicazione. Non definiscono il carattere che verrà utilizzato, l'imbottitura, il colore, lo stile ecc. Non sono in scala e non hanno toni o sfumature. Tutto ciò deve essere comunicato con il cliente in modo che comprendano il processo e il contesto del deliverable wireframe, insieme ad altri deliverable di requisiti.
Un mock-up viene in genere creato in Photoshop e mentre si basa sulla struttura o sulla struttura del deliverable wireframe confermato, è un deliverable distinto, con una pianificazione e un processo di approvazione distinti. Mock-up o composizioni, definiscono lo stile visivo o il tono dell'interfaccia. Una volta accettati, i modelli si traducono in una serie di requisiti aggiuntivi o prodotti di lavoro, come codice CSS, guide di stile, risorse grafiche, ecc.
I wireframe non devono mai essere modelli. I mock-up potrebbero essere utilizzati come wireframe ma ciò avrebbe implicazioni per eventuali revisioni che potrebbero essere necessarie e influire significativamente sul budget.
Fonte: 15 anni come Communications Designer, UX Lead, Business Analyst in un ambiente aziendale sviluppando siti Web e applicazioni. E l'amato BABOK
Non ho ancora la reputazione di commentare la risposta di Dave Kaye, quindi ho dovuto rispondere direttamente. Vale davvero la pena notare la sua risposta rispetto alla brillante risposta di Rachuru.
In un'interpretazione di frasi moderne, la spiegazione del profano potrebbe / dovrebbe essere;
La terminologia attuale proviene dagli anni '80. All'epoca non avevi la potenza di calcolo per produrre immagini in tempo reale, ma potevi guardare "wireframe" di grafici che fluttuavano sullo schermo in tempo reale. Una "demo" corretta ha richiesto il rendering notturno ecc.
In questi tempi, un "wireframe" rappresenta uno scheletro "design" e, con un buon processo di progettazione iterativo, le persone dovrebbero generare prototipi dal wireframe, ottenere feedback e restituirlo per migliorare il design del wireframe.
Sfortunatamente, al giorno d'oggi, ci sono molti software disponibili per i clienti che consentono loro di progettare modelli che non utilizzano nulla che sia direttamente utilizzabile dai programmatori. Spesso, i loro progetti sono costruiti da altri, quindi il modello viene aumentato privatamente anziché essere riportato ai programmatori per tener conto dei grandi progetti.
Penso che sia effettivamente ciò che Dave è stato un po 'più educato nel menzionare :-)
Keith
Devo aggiungere un punto che le persone non hanno espresso ... queste risposte forniscono descrizioni tecniche decenti, ma in un ambiente di lavoro le differenze non sono sempre così chiare. Alcune aziende potrebbero aggiungere funzionalità a un mockup e alcune potrebbero imporre requisiti di progettazione di alto livello in un wireframe. Starei attento a non essere troppo bloccato in una risposta su ciò che "dovrebbe" essere le cose in quanto la prima azienda a cui vai potrebbe fare qualcosa che non è uno di questi!
Secondo le mie conoscenze, le schermate del mockup sono la rappresentazione finale dell'interfaccia utente, aspetto grafico. Quale sarà il flusso normale e quale sarà il flusso alternativo. Penso che possa essere una specie di prototipo web creato principalmente in HTML e CSS. Facciamo quindi principalmente durante la fase HLD per mostrare e avere l'accettazione da parte del cliente.
I wireframe come confronto si concentrano più come il diagramma di flusso in cui è presente una descrizione generale. Se non rappresenta alcune descrizioni dettagliate come ciò che accade quando si fa clic sull'evento, modificare l'evento e cose simili. Sono per lo più realizzati da SA / BA e i modelli sono realizzati da designer / sviluppatori. Più di alcune persone allegano specifiche tecniche con wireframe come DB coinvolti in quella particolare interfaccia utente.
Ma di nuovo dipende dal progetto da proiettare. Nel nostro caso i wireframe rappresentano la fonte della verità.
Questo è ciò che capisco come una differenza in loro
Un wireframe può essere un modello. Un modello può essere considerato un wireframe. Mentre a volte sono cose separate (come hanno affermato altri), altrettanto spesso non sono cose separate.
Un tempo, si potrebbe considerare wireframe ciò che Visio creerebbe. E i prototipi sarebbero ciò che PhotoShop creerebbe.
Ma oggi, con la gamma di strumenti che abbiamo, sono spesso lo stesso documento reale. All'inizio possono iniziare come wireframe (puramente layout e funzione) ma col tempo diventano sempre più dettagliati al punto da poter essere considerati un modello. E se si utilizza uno strumento interattivo come Axure, a un certo punto si potrebbe considerare il prototipo.
Quindi è uno spettro con molte sovrapposizioni.
wireframes
Quando si intende progettare un'applicazione mobile o un'applicazione Web, sarà prima necessario uno schizzo di come apparirà ogni pagina. Basandosi solo su concetti di business, un designer può definire il flusso dell'applicazione e una prima bozza di progettazione, che ha uno schizzo di come sarà, quali pulsanti ci saranno, quali campi ci saranno, ecc. Questo è il wireframe pensato per.
Mockups
I modelli sono immagini più vive. Sono visivamente più accattivanti, hanno colori, caratteri, temi, pulsanti, logo, ecc. A questo punto le etichette dei campi, le note, i tipi di carattere, il menu di navigazione, ecc. Sono specificati nel disegno. È una rappresentazione esatta dell'aspetto dell'app mobile o delle pagine Web.
Puoi trovare un confronto dettagliato tra Wireframe e Mockup in questo articolo informativo: La differenza tra Wireframe, Mockup e Prototype