Progettare un sito incentrato sull'infanzia non è un compito facile, specialmente per persone come me che solitamente preferiscono temi, colori e trame maschili nei loro progetti. Oggi affronteremo questa attività creando un sito di annunci per bambini divertente e unico, tutt'altro che tipico.
Sentiti libero di seguirti e di essere sicuro di scaricare il PSD in modo da poter dare un'occhiata in giro o addirittura usarlo nel tuo sito.
Il progetto
Scarica Layered PSD
Qualsiasi lettore di Design Shack può iscriversi per diventare un membro gratuito. Uno dei vantaggi dell'adesione è che puoi inviare i tuoi? Dilemmi di progettazione? e ricevi aiuto gratuito da Design Shack! Se pensiamo che il tuo dilemma sia rilevante per il nostro pubblico, lo trasformeremo in un articolo come questo.
Recentemente abbiamo ricevuto una presentazione da Jonathan Jose che è attualmente molto felice che presto diventerà padre. È così eccitato che vuole configurare un sito Web in cui le persone possano tentare di indovinare il nome del suo bambino e vincere $ 100! Jonathan suona come se sapesse come configurare il sito in WordPress ma ha bisogno di aiuto per il design attuale.
Beh, sei fortunato Jonathan perché questo tipo di problema è esattamente il motivo per cui abbiamo creato il programma Dilemma del design. Iniziamo!
Progettare per i bambini
Imparare a indirizzare correttamente i tuoi progetti è un'abilità importante. Se non si valuta correttamente il pubblico, il progetto potrebbe facilmente diventare completamente inefficace. Ad esempio, il tuo tipico salone per le unghie probabilmente non vorrebbe un sito web che assomigli a quello di un bar biker locale.
Con questo in mente, potresti pensare che dal momento che il nostro progetto riguarda un bambino, deve assomigliare a qualcosa del genere:
È sicuramente vero che questo design è giusto per il suo scopo. Per i principianti, la madre è in genere la persona a cui mirano i siti come quello sopra. Quando si combina il concetto di neonati e madri, di solito si ottiene un sacco di design femminile con pastelli, grafica per bambini, ecc.
Al contrario, il nostro sito è tutto incentrato su un papà orgoglioso che vuole condividere la sua eccitazione con i suoi amici. Di conseguenza, possiamo considerarlo un'opportunità per trasformare il tipico tema del bambino in testa creando qualcosa di un po 'più retrò e sgangherato. Sarà comunque ovvio che il sito parla di un bambino, ci stiamo semplicemente allontanando intenzionalmente da temi comuni trovati in disegni come quello sopra.
Passaggio 1: lo sfondo e la trama
Per iniziare, crea un documento Photoshop a 1200px per 1200px a 72 dpi. Quindi, riempilo con # 55b06f. Ora crea un nuovo livello, riempilo di bianco e vai a Filtro> Aggiungi disturbo con le impostazioni di seguito.
Si noti che siamo partiti? Monocromatico? incontrollato. Dopo alcuni esperimenti, questo sembrava produrre la più bella diffusione del rumore, così ho seguito e poi ho desaturato il livello (Comando-Maiuscole-U). Infine, imposta il livello su Color Burn e riduci il Fill (non l'Opacità) al 53%.
Passaggio 2: il titolo
Dopo aver impostato tutto il tuo background, vai a scaricare Chunk Five e Museo dall'articolo di ieri di 12 Fonts and Free Slab Serif Fonts.
Usa questi due caratteri insieme per creare un bel titolo tipografico come quello qui sotto. Si noti che qui ho utilizzato numerosi strumenti di progettazione diversi. In primo luogo, ho variato notevolmente la dimensione e l'audacia del tipo per aggiungere variazioni e porre l'accento sulle parti importanti. Successivamente ho avuto un po 'di creatività con l'impilamento in modo che il titolo riempisse lo spazio orizzontale bene.
Ora che abbiamo messo il titolo fuori come lo vogliamo, lasciamo trasparire parte di quella texture di sfondo. Cambia la modalità di fusione in Color Burn e Opacity al 62%.
Passaggio 3: la foto
Successivamente, aggiungiamo una foto per portare vita e umorismo alla pagina. Ovviamente, dal momento che il bambino non è ancora nato, dovremo andare con la madre. Dal momento che in realtà non ho foto della futura mamma, ho trovato una foto divertente su Flickr che è perfetta per questo progetto.
Ora, noterai che la foto non si adatta perfettamente al sito se la buttiamo lì. Per risolvere questo problema, ho creato un livello di regolazione del filtro fotografico e applicato un filtro di riscaldamento.
Alla fine ho creato un'ombra deformata e l'ho aggiunta alla foto. Questo processo è abbastanza facile. È sufficiente creare un effetto di livello ombra esterna, fare clic con il tasto destro del mouse sull'effetto e selezionare "Crea livello" ,? quindi usa lo strumento curvatura per aggiungere un arco alla parte inferiore del livello ombra.
Come ultimo passaggio per eliminare l'effetto retrò, abbiamo scaricato alcuni eccellenti pennelli grunge gratuiti e applicato un po 'di invecchiamento al testo e alla foto.
Passaggio 4: Orso, stelle e testo
Solo così puoi vedere dove stiamo andando, ecco il prodotto finito di questo passaggio:
Come puoi vedere, si sta evolvendo in una sorta di vecchio tema dei poster di boxe. Ti lascerò gestire le stelle da solo, basta prendere lo strumento di forma di Photoshop, disegnare una stella, quindi duplicarla un paio di volte.
Allo stesso modo, il testo è piuttosto semplice: basta creare una casella di paragrafo e inserire un tipo. L'orso tuttavia è un po 'più complicato. Volevo un semplice elemento grafico ma non volevo prendermi il tempo per disegnarne uno, così ho deciso di manipolare la foto qui sotto.
Per iniziare, applica il filtro Torn Edge Photoshop con le seguenti impostazioni. Image Balance: 33, Smoothness: 13 e Contrast: 10. Questo dovrebbe darti qualcosa come l'immagine qui sotto:
Ora per la parte difficile. Hai un'immagine in bianco e nero, ma vuoi solo trasferire i pixel neri sul sito web, lasciando uno sfondo trasparente. Ci sono un sacco di modi per farlo, ma uno dei più facili che ho trovato è quello di fare Command-Click su Blue Channel per creare una selezione. Quindi inverti la selezione con Command-Shift-I. Infine, premi Comando-J per duplicare la selezione in un nuovo livello.
Puoi quindi prendere questo livello e posizionarlo, dargli una sovrapposizione di colore e fare qualsiasi altra cosa ti piaccia!
Step 5: The Blocks
Dato che lo scopo del gioco è quello di indovinare il nome del bambino, stavo pensando che sarebbe stata una buona idea restringere le opzioni (ovviamente, questo aumenterebbe le probabilità che tu debba effettivamente pagare qualcuno). Come parte del gioco, potresti rivelare una singola lettera del nome del bambino ogni mese, iniziando comunque molti mesi dalla nascita in quanto vi sono lettere nel nome del bambino.
Quindi, ad esempio, se il nome contenesse cinque figliate, riveleresti la prima lettera cinque mesi dopo la scadenza. Il modo in cui mi sono presentato per introdurre questo aspetto del gioco è attraverso i blocchi di forma qui sotto. Le lune e le stelle rappresentano lettere che non sono state ancora rivelate. Ogni luna o stella diventerà quindi una lettera in un mese designato.
Il prodotto finito
Come potete vedere qui sotto, ho deciso di implementare l'idea del blocco in una striscia verticale e ho terminato il sito con un'area per i commenti. Ho anche aggiunto un po 'più di variazione del colore in modo che i blocchi non sembrassero fuori posto.
E con questo siamo tutti finiti! Come promesso, il prodotto finale non assomiglia al tuo sito medio per bambini e crea uno spazio fantastico per il concorso. Come bonus, il design è abbastanza versatile da poter essere modificato per riflettere qualsiasi scopo tu voglia.
Conclusione
Il punto di questo esercizio era di portare un progetto di design in una direzione completamente inaspettata. Questo è un ottimo esercizio che apre davvero le possibilità di progettazione se praticato regolarmente. Basta tenere a mente chi è il progetto alla fine e come si può fare appello a quel cliente in un modo interessante.
Lascia un commento qui sotto e facci sapere cosa ne pensi! Inoltre, se hai progettato fantastici siti web, loghi o qualsiasi altra cosa, lascia un link qui sotto in modo che possiamo dare un'occhiata.