Oggi esamineremo un problema del mondo reale che frequentemente affronta i designer. L'aggiornamento e il vecchio design possono essere un compito arduo, che sia di tua proprietà o di qualcun altro. Una volta che vedi un disegno presentato in un certo modo, è difficile uscire da quella scatola mentale, anche se non ti piace l'originale.
L'articolo di seguito affronterà una serie di problemi di tocco per i progettisti. Ci occuperemo di grafica obsoleta, leggibilità su sfondo scuro, sovraccarico di informazioni, utilizzo di trame e altro ancora. Continua a leggere per vedere come affrontiamo questi problemi.
Il progetto
Il progetto di oggi deriva da due richieste dalla nostra pagina del Dilemma del design, una nuova sezione in cui chiediamo ai progettisti di aiutarci con problemi reali, gratuitamente.
La prima domanda è di Atif Mohammed Ameenuddin. Atif è incappato in incredibili trame gratuite e vuole sapere come inserirle in un attraente web design.
Inoltre, Joe Elias ha difficoltà a progettare un sito Web per un cliente. Ha un mockup iniziale di Photoshop ma sa che ha bisogno di aiuto. Ci sono alcuni meriti nel design di Joe, ma penso che nel complesso ci si sente un po 'sorpassati. Ho l'impressione che un designer di stampa stia tentando di convertire un design di flyer sul web. Oggigiorno il web design è molto più che un design di stampa interattivo, ha un aspetto e una sensazione unici che traggono vantaggio dal ricco supporto web.
Si noti che il sito è anche per un servizio di fosse settiche! Non è il compito di progettazione più semplice che abbia mai intrapreso, ma mi piace una sfida. saltiamo dentro e cominciamo.
Utilizzando i pattern di sfondo
Il primo passo è andare su Premium Pixel e scaricare i pattern di sfondo. Questi sono già salvati come plug-in di pattern di Photoshop, quindi non potrebbero essere più facili da implementare.
Una volta scaricato il file di pattern, trascinalo semplicemente su Photoshop per installarlo automaticamente. Successivamente, crea un nuovo documento RGB che si trova a circa 1200px per 1300 px. Riempi il livello di sfondo con il bianco e aggiungi uno stile di sovrapposizione pattern. Da qui puoi semplicemente selezionare il modello che desideri e regolare le dimensioni a tuo piacimento. Assicurati di visualizzare il documento al 100% in modo da poter ridimensionare il modello correttamente.
Il logo
Mi sono preso la libertà di aggiornare il logo un po '(il progettista probabilmente non ha la libertà di farlo). Non è assolutamente eccezionale e potrebbe usare più lavoro, ma si adatta meglio al tema maschile.
Ho usato l'icona della chiave inglese esistente e l'ho combinata con un carattere più manieroso. Ho anche aggiunto un tratto di testo con una sfumatura solo per aggiungere un po 'di interesse visivo. Molte persone non si rendono conto che è possibile modificare il tratto di Photoshop in una sfumatura anziché in un colore pieno, questa opzione si trova vicino alla parte inferiore della finestra del tratto.
Le quattro scatole
Successivamente, voglio indirizzare i quattro riquadri mostrati di seguito.
Uno dei punti principali della e-mail di Joe era che voleva un po 'di layout / idee organizzative. Penso che quest'area possa essere trasformata in qualcosa di molto più dinamico e attraente con un po 'di jQuery. Con la magia dei cursori JavaScript, possiamo prendere tutte queste informazioni e metterle in una sola area.
È difficile da mostrare in un'immagine statica, ma in pratica quest'area ciclicherebbe automaticamente tra quattro immagini che rappresentano ciascuno dei quattro riquadri di Joe sopra. Si noti che abbiamo creato molto spazio per il contenuto del testo anche con l'area posteriore schermata a sinistra. Ci sono un sacco di slider jQuery gratuiti disponibili online, molti dei quali hanno aree di contenuto come questo built-in.
Per aiutare l'immagine a risaltare sulla trama dello sfondo, le ho dato un trattamento polaroid di base. Ciò implica un'ombra discendente, un tratto allineato all'interno (questo ti dà angoli duri anziché arrotondati) e una leggera ombra interna. Per la foto, ho appena preso qualcosa da Flickr perché non avevo le immagini originali con cui Joe lavorava.
Rompere lo sfondo
Il design originale conteneva un bel po 'di testo. Abbiamo bisogno di onorare i desideri del cliente includendolo, ma è nostro compito come designer presentare le informazioni in modo attraente. Lo faremo suddividendolo un po ', il che trasformerà il contenuto in blocchi più gestibili.
Lo sfondo con texture può essere un po 'eccessivo sull'intera pagina, quindi andiamo a romperlo un po' aggiungendo una striscia orizzontale. Ciò aiuterà anche a organizzare visivamente il contenuto.
Ho fatto molto qui. Per il banner, ho dato un colore rosso scuro, leggera sfumatura, sottile tratto nero, trama sottile e ombre che si staccano sia dalla parte superiore che inferiore (fare clic sull'immagine per vederla a grandezza naturale). Ho anche gettato un'altra immagine per aiutare a rompere ulteriormente il testo. Notare che si allinea orizzontalmente con il cursore sopra di esso. Sebbene lo stendardo stesso si estenda lungo tutta la pagina, il contenuto all'interno deve ancora aderire al layout che abbiamo impostato.
Il resto del testo
Ho posizionato la seconda parte del blocco di testo sullo sfondo sotto l'area del nastro. La parte difficile è che lo sfondo rende il testo sottile piuttosto difficile da leggere. Fai sempre del tuo meglio per non sacrificare l'usabilità in nome dell'estetica.
Per risolvere questo problema, ho semplicemente applicato un'ombra molto scura al blocco di testo. Questo aiuta a distinguersi e può essere facilmente realizzato con i CSS, lasciando il testo completamente selezionabile.
Quando combinato con l'area del banner sopra, questo rende una porzione molto più attraente del testo che non travolge la pagina.
Finendo
Infine, pubblicheremo un semplice piè di pagina nella parte inferiore della pagina con le informazioni di contatto e saremo tutti finiti. Tutto ciò che ho fatto qui è stato creare una scatola nera e ridurre un po 'l'opacità.
E con questo, ecco il nostro prodotto finito. Clicca qui per vederlo a grandezza naturale.
Come puoi vedere, ha un aspetto molto più moderno dell'originale.Onestamente, l'errore che la maggior parte dei progettisti fa è che provano troppo. Si riempiono una pagina piena di tutto ciò che possono pensare di mettere lì e finiscono con qualcosa che è occupato e difficile da guardare. L'attuale tendenza nel design professionale è verso layout semplici e puliti con distrazioni minime e un'enfasi sul contenuto.
Come designer, questo significa che possiamo prendere la via più facile e togliere tutti i pelucchi dai nostri disegni fino a trovare un perfetto equilibrio tra semplice e attraente.
Conclusione
Per riassumere, l'aggiornamento di un vecchio progetto può spesso comportare un passo indietro rispetto al layout precedente. Non lasciarti coinvolgere nel mantenere le stesse cose e apportare modifiche incrementali, a volte devi solo ricominciare da zero e cercare una nuova idea.
Se hai un progetto su cui vorresti un aiuto, assicurati di dare un'occhiata al nostro programma di Dilemma del design. Se pensiamo che il tuo problema sia qualcosa a cui molti designer possono fare riferimento, lo trasformeremo in un articolo completo come questo.