Share
In questo post ho intenzione di mostrarvi una serie di venti prototipi di schermate per un progetto del mondo reale su cui ho lavorato: l'imminente riprogettazione e riedizione della nostra galleria di design e ispirazione FaveUp. Spiegherò alcuni dei motivi e il modo in cui è andato nel design, come utilizzo le scenette per speculare su un'app Web e alcune note generali sul design. Il nuovo sito che chiamiamo Creattica Inspire è ora in fase di sviluppo da parte del nostro team di sviluppo di Melbourne e colpirà le valvole interweb come una delle nostre prime uscite del 2009..
Questo post è il 6 ° giorno della nostra sessione di Web Design. Sessioni creative "Session Day 5Session Day 7"Creattica Inspire è in realtà una ricostruzione di un sito esistente che gestiamo chiamato FaveUp che è una galleria di loghi, biglietti da visita e siti web. Ad essere sinceri, FaveUp è un sito che riesce nonostante suo. L'ho fatto costruire un anno fa da un appaltatore esterno e in realtà non è molto ben messo insieme - chiunque abbia presentato al sito saprà che è piuttosto bacato. Anche dal punto di vista del design ci sono alcuni problemi reali: uno strano "logo", un'interfaccia che vaga su alcune pagine, un sistema di classificazione stupido che puoi ingannare facilmente, e forse la cosa peggiore è che è piuttosto brutto. Tutto sommato è quello che mi piace definire affettuosamente "un gigantesco mucchio di vagabondi".
Tuttavia, il sito ha alcune cose che sembrano funzionare bene sul sito, il principale è che ha una forte attenzione al contenuto. Quando scorri una pagina, ottieni design dopo design e non molto altro. È semplice e chiaro e conta molto per rendere un sito utilizzabile. Ecco come appare il sito attuale di FaveUp:
Quindi stiamo praticamente ricostruendo il sistema da zero e importando tutti i vecchi contenuti. Il nuovo sito si troverà su inspire.creattica.com e farà parte della suite di siti e servizi creativi che stiamo costruendo su Creattica.com. Così alcune settimane fa ho deciso di ridisegnare FaveUp e allo stesso tempo di creare un look per Creattica. Il risultato finale sono questi mockup di cui parlerò:
Gli schermi sono un insieme di mockup costruiti in HTML che sono pensati per rappresentare tutte le schermate principali del sito. Lo sviluppatore di questo progetto, Erin, sta ora unendoli nella base di codice e quindi lo aggiorneremo e lo modificeremo nel prodotto finale.
Quindi quello che ho fatto qui sotto è usare questo design come un modo per parlare dei miei processi e pensieri personali, legati a un progetto del mondo reale. Spero che tu trovi utili le note!
Ridisegnare un sito può essere un processo complicato perché devi affrontare il peso dell'attesa, la resistenza degli utenti a cambiare e lo spettro sempre presente che potresti fare un passo indietro. Nella mia esperienza il trucco per una riuscita riprogettazione è quello di preservare la sensazione generale di un sito e catturare alcuni dei tratti distintivi del vecchio design in quello nuovo
Mantenendo tale sensazione, si garantisce la continuità del sito e gli utenti si sentono ancora a conoscenza del nuovo sito. Mantenere la sensazione di un sito non significa necessariamente che il nuovo sito debba avere lo stesso aspetto. Questa transizione da FaveUp a Creattica Inspire è molto diversa! Tuttavia ci sono un certo numero di cose che lo tengono correlato:
Ora puoi ovviamente ridisegnare e modificare totalmente il layout degli elementi della pagina, o rivedere le pagine chiave del sito, o passare a un nuovo stile di design. Tuttavia, per una riuscita riprogettazione credo che non si possa fare tutto in una volta. Se hai intenzione di spostare gli elementi della pagina, dovresti mantenere il design e apparire molto simili. Se cambierai completamente il design, almeno il posizionamento dovrebbe rimanere lo stesso.
Se non si mantengono le stesse cose, si perderà tutta la continuità ed è quasi come lanciare un sito da zero. Ci sono momenti in cui questo è necessario (a.k.a. il vecchio sito risucchiato) ma nella maggior parte dei casi in cui un sito è popolare, è meglio mantenere una certa continuità.
Il designer di Ace UX Cennydd Bowles ha un interessante articolo su come gli utenti reagiscono alle riprogettazioni, dove menziona le cinque fasi della reazione dell'utente - negazione, rabbia, contrattazione, depressione, accettazione.
Un sito che ho ridisegnato tre volte è Psdtuts + stesso. Se dai un'occhiata all'immagine qui sotto dove puoi vedere tutti e quattro i disegni uno dopo l'altro vedrai che è andata così:
Ad ogni passo qualcosa è cambiato in modo significativo (tranne forse l'ultimo passaggio), ma ugualmente alcune cose sono rimaste sempre le stesse. Quando siamo passati dal semplice sito HTML a un blog WordPress, lo schema dei colori e gli elementi di design sono rimasti gli stessi. Quando ci siamo spostati dal disegno marrone di WordPress a quello bianco, il posizionamento di tutto è rimasto lo stesso - incidentalmente questo è stato il passo più controverso :-)
Quando stai progettando un qualsiasi sito importante devi dedicare del tempo a pensare alla costruzione, ma questo è particolarmente vero con una riprogettazione. Poiché abbiamo un insieme di dati abbastanza grande da preservare (tutti gli invii di utenti) è molto importante capire come migrare al nuovo design nel modo più semplice possibile.
Per FaveUp> Creattica Inspire, una delle grandi considerazioni è che ci stiamo muovendo dall'idea di avere una singola immagine per design, di avere due elenchi e uno dettagliato. Nella pagina dettagliata puoi vedere come mi sono occupato di non avere un'immagine grande (un semplice centro con uno sfondo scuro fa il trucco).
Un buon web design dovrebbe guidare l'occhio di chi guarda attraverso lo schermo. Questo può essere fatto perché diversi elementi sulla pagina possono avere una diversa precedenza visiva in base alla loro dimensione, forma, colore e posizione. Di seguito sono un paio di schermate in cui ho cercato di mostrare il percorso che sono sperando l'occhio dello spettatore prenderà ...
Andy Rutledge ha un fantastico articolo su come guidare l'occhio dello spettatore attorno allo schermo completo di fantastici esempi. Leggilo qui: Progettare un tour guidato.
Progettare un sito ricco di informazioni è molto diverso dal lavorare su un sito leggero. Quando non ci sono molti contenuti puoi scatenare il tuo design e in un certo senso lasciare che il design domini il contenuto, e questo è OK. Un buon esempio di un sito leggero è un portafoglio personale in cui anche un look pesantemente progettato (controlla ad esempio l'elegante design Disease) funziona ancora bene e il sito è facile da aggirare e capire.
Un sito di contenuti pesanti, d'altra parte, è un diverso tipo di pesce. Come regola generale, più contenuti e informazioni su una pagina sono più sottostimati del tuo progetto. La ragione di ciò è che con un sacco di contenuti su una pagina, un design completo si intrometterà e confonderà il visualizzatore. È difficile digerire un sacco di informazioni in una sola volta e aggiungere un design molto pesante al mix e rischiare persone travolgenti.
Un secondo motivo altrettanto importante per ridimensionare il design è di mantenere l'attenzione sul contenuto stesso. Sul sito Inspire, gli spettatori hanno lo scopo di guardare una galleria di design. Se il design della galleria stessa è davvero stilizzato e aggressivo, questo ridurrà il contenuto stesso e indebolirà l'intero sito. Ecco perché se vai in una galleria d'arte che non vedi mai sono semplici muri bianchi, puoi immaginare se avessero carta da parati e luci ornamentali ovunque?
Gli ultimi siti per contenuti pesanti sono ovviamente i portali di notizie e portali. Se guardi a Washington Post, MSN, Yahoo, NYTimes troverai che il design su tutti loro è sospeso e spesso è relativamente semplice.
Sebbene un sito ricco di informazioni non richieda immagini pesanti, c'è ancora molto lavoro da fare. Quando lavori su questo tipo di sito devi fare molto più lavoro per assicurarti che la tua interfaccia sia super pulita e utilizzabile. Nel sito Inspire ho cercato di mantenere la navigazione molto chiara, utilizzare un sacco di spazio e utilizzare strati di nero, rosso, grigio e bianco per delimitare diverse sezioni dell'interfaccia.
Una cosa che facciamo molto a Envato è creare famiglie di siti web. Abbiamo la famiglia TUTS, i Marketplaces e ora stiamo lavorando a questa famiglia di siti Creattica. Questo mi ha dato molta esperienza nella creazione di progetti che possono essere riutilizzati su più siti per creare un aspetto unificato. Ecco alcune cose che ho imparato:
Quando abbiamo lanciato il primo sito secondario di Creattica un paio di mesi fa - Creattica Daily - non ho programmato scioccamente il futuro. Invece ho appena progettato un design pulito per il blog e ho lanciato il sito senza pensare a cosa avrei fatto per gli altri siti. Bene come puoi dire da questo look di Creattica Inspire, ho dovuto ricominciare da capo. Il vecchio look è ora in vendita su ThemeForest come tema WordPress, quindi non è uno spreco totale, ma ciononostante paga davvero pensare in anticipo e progettare un look adatto a più siti.
Per eseguire un singolo progetto su alcuni siti secondari è necessario almeno un elemento di sotto-branding. Su Creattica e TUTS è a colori, sui Marketplaces è una combinazione di colori e logo / temi animali. Qualunque cosa tu scelga, ci deve essere qualcosa per differenziare i siti quando passi da una all'altra.
Mantenere una famiglia di siti richiede molto lavoro, quindi vale la pena di rendere coerente la maggior parte del design. Questo non solo significa che gli utenti acquisiscono familiarità con la sensazione dei siti, ma a livello pratico significa anche che non devi fare tanto lavoro!
Prima di iniziare un progetto come questo, mi prendo sempre del tempo per fare surf. Oltre a rendere il mio lavoro molto più piacevole, in genere ho in mente due obiettivi:
Allora, qual è l'ispirazione di Creattica Inspire? È un piccolo sito chiamato CNN! Stavo guardando la CNN e come gestiscono una quantità così grande di informazioni e così tanti siti secondari, e ho deciso che mi sono piaciute due cose sul sito: il layout generale e l'idea di scatole bianche su uno sfondo grigio chiaro.
I due disegni sembrano uguali? Non proprio. Riesci a vedere la somiglianza ora che l'ho fatto notare? Probabilmente - soprattutto perché entrambi usano il rosso! È una cosa brutta da fare? Non ne sono sicuro. Penso che sia ingenuo fingere di lavorare nel vuoto e in qualche modo sto inventando nuove idee.
Immagino che sia mia opinione prendere il merito di prendere ispirazione da altri designer, infatti penso che sia impossibile non farlo. Non è corretto copiare i disegni. Quindi, di conseguenza, se sei ispirato da un altro design, è essenziale dargli una rotazione e un'interpretazione personali e lasciarlo sviluppare al punto in cui ha poca somiglianza.
Qual'è la tua opinione? L'ispirazione è OK? Quando cade nell'immissione? Il mio esempio è troppo lontano o OK?
Un progetto come Creattica Inspire è interessante perché implica molto di più della semplice creazione di un sito HTML o addirittura di skinning di un prodotto CMS come WordPress. È abbastanza grande da implicare alcuni problemi di sviluppo, livelli di accesso multipli e una varietà di funzionalità. Ecco alcuni dei miei pensieri su come lavorare su un'app Web:
Su progetti di grandi dimensioni come Inspire o FlashDen è inutile cercare di pensare a ogni singolo schermo che è o sarà sul sito. Fidati di me quando dico che ci sono pagine che in qualche modo trascurerai, o nuove funzionalità che nessuno ha ancora pensato che dovrà essere lavorato nel design più tardi nella sua vita.
Un piano molto migliore è progettare una struttura di tipo flessibile e modulare. Il design di Inspire è fatto in modo tale che una nuova pagina possa essere facilmente costruita mettendo insieme alcune di quelle scatole bianche, aggiungendo una nuova voce di menu o sottomenu e usando elementi di design standard come mini elenchi di gallerie o caselle di commenti degli utenti. Potrebbero esserci ulteriori progetti in futuro, ma sicuramente la creazione di una nuova pagina o di una nuova funzionalità non comprometterà il layout!
Quasi tutte le app web implicano una sorta di amministrazione. Nel caso di Inspire dobbiamo essere in grado di approvare nuovi progetti, modificare elementi e così via. Ai vecchi tempi disegnavo sempre un'area di amministrazione speciale per funzionalità come questa - un po 'come il modo in cui WordPress ha la dashboard di WP-Admin. Anche se in alcuni casi avere un'area di amministrazione è una buona idea, in molte situazioni è meglio andare con l'amministrazione in linea.
Amministrazione in linea significa lavorare con funzionalità extra nel design di front-end regolare che appare solo quando l'utente è un amministratore. Quindi, per esempio su Inspire quando un utente è un amministratore, otterrà un paio di funzioni extra su pagine normali. Ad esempio, possono cercare il sito come una persona normale e quindi modificare gli elementi che trovano.
Il motivo dell'amministrazione in linea è preferibile qui stiamo già costruendo una serie di modi per navigare nel sito, come ricerca e tagging, nonché un ottimo modo per visualizzare il contenuto del sito, quindi perché riprogettarlo e ricostruirlo di nuovo in un amministratore la zona. Con l'amministrazione inline, un utente può inviarti un link a un oggetto e piuttosto che ricollegarlo nell'area di amministrazione che puoi modificare direttamente su una pagina.
Su alcuni lavori servirai sia come web designer che come project manager. Nel mio caso è a causa del mio lavoro in Envato, ma anche nel normale lavoro dei clienti, potresti commissionare e sviluppare un progetto per conto del tuo cliente. In situazioni come queste dovrai istruire uno sviluppatore o un team di sviluppatori per realizzare il progetto su cui stai lavorando.
Esistono diversi modi per comunicare e lavorare con uno sviluppatore su un progetto. Molti di loro dipendono dalle dimensioni e dalla portata di un progetto. Per un progetto piccolo come questo, questo è quello io fare:
Inoltre, dal punto di vista del web design, queste 20 schermate prendono in considerazione praticamente tutti i principali tipi di layout per il sito.
Tendo a pensare che i progetti reali illustrino la funzionalità meglio dei wireframe, ma questo è abbastanza discutibile.
In teoria è possibile definire un intero progetto utilizzando gli scenari utente e c'è molta letteratura nel software e nello sviluppo web su di esso. Consiglio di leggere la progettazione dell'interfaccia utente di JoelOnSoftware per i programmatori, anche se sei un designer e non un programmatore!
Il punto di questi passaggi è questo:
Quindi questo è il mio difficile processo per informare uno sviluppatore. cosa fai? E se sei uno sviluppatore te stesso, c'è qualcosa che dovrei fare meglio?
Per un trattamento più approfondito del briefing di uno sviluppatore, potresti provare come creare un'app Web su ReadWriteWeb. Puoi anche parlare con il tuo team di sviluppo per vedere di cosa hanno bisogno e vogliono.
Penso che la ragione per cui il web design sia un lavoro fantastico è perché ci sono così tante sfaccettature nel lavoro. In questo articolo ho cercato di mostrare come un singolo lavoro di progettazione di siti Web può coinvolgere tutti i tipi di competenze e problemi, dall'ispirazione del design al lavoro con gli sviluppatori, dal tenere gli utenti felici in una riprogettazione alla pianificazione della gestione di un sito. Certo è impegnativo, ma è questo che lo rende così buono!
Per quanto riguarda Creattica Inspire, dovremmo vederlo fare il suo debutto all'inizio del 2009 (non posso credere che siamo proprio dietro l'angolo!) E sentirai parlare del lancio proprio qui su Psdtuts+!
Questo post è il 6 ° giorno della nostra sessione di Web Design. Sessioni creative "Session Day 5Session Day 7"
Accentsconagua