6 modi per migliorare il design del tuo blog
I blog possono spesso essere lasciati fuori al freddo quando si tratta di design. Molti di noi non considerano la necessità di un design intenso quando si tratta dei nostri blog, sia per le nostre aziende che per noi stessi.
Ma è importante rendersi conto che ogni aspetto della nostra identità online dovrebbe essere progettato in modo pulito e intuitivo con qualsiasi stile tu preferisca. Questo aspetto elusivo del lavoro sul web è qualcosa per cui dovremmo costantemente lottare. E sì, questo include il tempo che impieghiamo a lavorare con i blog.
Un sacco di volte i blog si perdono nella confusione perché li consideriamo come enormi "dump di testo" quando si parla di architettura dell'informazione, e questo è certamente un aspetto della loro identità, ma hanno più potenziale di quello.
Alcuni blog, se progettati correttamente, sono ottimi per mostrare il nostro flusso di pensieri e alcune informazioni sul portfolio, mentre altri sono ottimi per la visualizzazione di notizie e fotografie.
Il punto è che un blog può essere un grande serbatoio di riserva per una varietà di argomenti e la cui visualizzazione dipende dalle specifiche scelte progettuali che hai fatto. Negli ultimi cinque anni sono arrivate molte cose per rendere il mondo dei blog molto più facile di un tempo. Ad esempio, WordPress è ottimo e i temi fanno molto per noi, ma se vuoi renderlo più piccante, ci sono alcune cose che devi tenere a mente.
Allo stesso modo, se si desidera modificare la navigazione o il layout del tema, ci sono anche alcune cose di cui si desidera essere a conoscenza. Questo vale per quasi tutti i motori di blogging, o quando si lavora da soli. Ecco alcuni dei miei pensieri su ciò che penso siano quei pezzi importanti.
Lavorare con effetti di testo basati su ombre
Gli effetti di testo sono ottimi modi per presentare titoli di intestazione, barre di navigazione o presentazioni di contenuti sul tuo blog, a condizione che vengano utilizzati con parsimonia. Esaminiamo alcuni degli effetti più comuni che vediamo sovrautilizzati sul Web e come usarli correttamente.
Testo retrò
Spesso è un problema lavorare, ma sembra aver fatto i giri l'anno scorso e mezzo nonostante questo fatto. E con l'avvento del CSS3 è molto più facile manipolare e trovare quella perfetta sfumatura. Ho un esempio qui per aiutarci a capire come creare correttamente questo effetto, quindi andrò su quando e quando non usarlo. Il nome del gioco con effetti retrò non è il raggio di sfocatura e utilizza le doppie ombre. Quindi diciamo che stiamo lavorando con un font di colore scuro (# 707070I), vogliamo usare un doppio testo-ombra per raggiungere questo obiettivo. Sarebbe simile a questo:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
Questo dovrebbe darti un bel effetto doppio bordo, con un aspetto molto anni '70. Naturalmente, per ottenere la vera atmosfera degli anni '70 potresti dover aggiungere tutti i tipi di manipolazione del colore, ma almeno abbiamo l'effetto di base verso il basso. Ricorda però, non impazzire con la colorazione - e sicuramente non impazzire con l'offset x e y per le ombre del testo (in quanto potrebbe risultare illeggibile molto velocemente). Quando si tratta di utilizzare un effetto retro, l'uso migliore è nei titoli di intestazione. Questo non è un effetto che potrebbe funzionare bene con testo di piccole dimensioni o informazioni descrittive. Meglio lasciarlo rimanere nella parte superiore del tuo blog e lasciarlo da solo.
Letterpress & testo inserito
Un'altra caratteristica popolare dell'offerta shadow di CSS3 è un tipo di stile interno, altrimenti noto come "letterpress". Questo è sicuramente un argomento scottante nel mondo degli effetti di testo CSS3, quindi vediamo come eseguirli correttamente. In genere, uno stile interno si ottiene spostando leggermente l'asse Y per dare l'impressione di una sottile evidenziatura all'interno dello sfondo immediato del testo. Spesso si vedrà che viene utilizzato come opposto al contrasto di sfondo (luce contro buio) in modo che l'effetto abbia un impatto maggiore sul lettore. Facciamo un esempio.
Sfondo chiaro, testo scuro:
body { background-color: #888; text-shadow: 0px 2px 3px #666;}
Sfondo scuro, testo chiaro
body {background-color: #666; text-shadow: 0px 2px 3px #888;}
Ciò produrrà un effetto stratificato / inserto davvero piacevole che può essere utilizzato per intestazioni o titoli di blog. Usalo con parsimonia in tutto il sito, perché nulla è peggio di qualcuno che abusa degli effetti di testo. In questo caso, sarebbe opportuno utilizzarlo in vari sottotitoli o con varie barre laterali o elementi di piè di pagina - ma assicurati di non utilizzarlo su informazioni descrittive. Di nuovo, qualsiasi effetto di testo basato sull'ombra non dovrebbe essere usato per una cosa del genere.
Lavorare con le immagini sul tuo blog
Ammettiamolo, come web designer ci piace mostrare il nostro lavoro. Ci piace così tanto che anche i nostri blog personali possono essere pieni di immagini di portfolio e di didascalie disseminate. Quindi perché non consolidare questi due? Il modo migliore per lavorare con le informazioni sulle didascalie consiste nel contenere informazioni pertinenti all'interno dell'immagine stessa e il modo migliore per farlo è implementare un effetto CSS3 direttamente sull'immagine.
Se sei curioso del motivo per cui ritengo che questo sia un aspetto così importante del lavoro con le immagini, vai direttamente al negozio web di Google Chrome (componenti aggiuntivi). Sono in grado di visualizzare migliaia di immagini senza alcun testo intorno a loro, e tuttavia ci danno ancora abbastanza informazioni su detta immagine per sapere se vogliamo cliccarci sopra oppure no. Questo è geniale, e molti di noi dovrebbero implementare una tale tecnica per non solo ripulire il testo della didascalia non necessario, ma anche per dare una spinta all'esperienza utente.
Ricreamolo per il tuo blog personale, ma con il tuo tocco personale, in modo da poter visualizzare le informazioni del cliente per le immagini del sito web su cui hai lavorato:
Per prima cosa dobbiamo creare un contenitore per l'immagine, e quindi all'interno di questo dobbiamo creare un altro contenitore per il testo che vogliamo usare. In questo caso, utilizzeremo un'intestazione secondaria, un po 'di testo e un collegamento. poi dentro che creano un contenitore per il testo e link al sito web del cliente che stiamo visualizzando.
In questa sezione, ciò che stiamo facendo è ottenere la transizione dell'immagine reale e la preparazione del passaggio del testo. Stiamo anche identificando che vogliamo che l'immagine lasci lungo l'asse X e non l'asse Y, quindi ciò significa avremo un tipo di porta scorrevole di effetto.
Ora imposteremo l'effetto di passaggio del mouse e inizieremo la transizione per iniziare questo evento.
.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }Come puoi vedere qui, ciò che abbiamo fatto è stato simile a quello che abbiamo fatto sopra per l'immagine. Abbiamo semplicemente inserito il testo dopo che l'immagine è stata lasciata e gli abbiamo dato un ritardo di + 0,1 secondi per assicurarci che vada liscio. E questo è tutto.
Ci sono un sacco di altri modi in cui puoi personalizzare questo e sicuramente un sacco di altri effetti di transizione che puoi usare. Ricorda però che se lavori con transizioni più avanzate non li usi in modo così ripetitivo come faresti con qualcosa di così semplice. Sono usati al meglio con parsimonia per enfatizzare le immagini chiave.
Lavorare con layout creativi
Spesso, come web designer, vedremo le tendenze eccessivamente utilizzate che sono state abusate anno dopo anno e vogliono essere una voce per il cambiamento che li riguarda. Ma andare controcorrente può essere una pratica rischiosa, specialmente se non lo fai correttamente (come nota - non sto dicendo che devi essere creativo nel "modo giusto" perché non esiste una "via giusta" per essere creativo). Ho menzionato questo perché penso che essere creativi sia per definizione stessa distacco di noi stessi da vincoli o norme creative, e in effetti lo incoraggerei, ma penso anche che dovremmo diffidare della ragione per cui tali norme sono state radicate nella nostra rete temi di design e cosa possiamo fare per essere innovativi con loro, con questo in mente.
Allineamento del testo unico
Quando si lavora con il testo in modo creativo o unico (cioè non allineato al centro di Arial 12pt) è molto importante ricordare che il testo non è più il contenuto principale della pagina. È stato relegato a un elemento di supporto, anche se importante.
Una domanda da porsi sempre quando si lavora con il testo è, "Questo bilancia bene con il resto della pagina?" Potrebbe essere adiacente ad alcuni lavori di portfolio, alcune immagini casuali, o forse solo varie altre colonne di testo su entrambi i lati di la pagina.
Ma indipendentemente da ciò che è adiacente o perpendicolare a te devi cercare di bilanciarlo nel modo migliore possibile. Pensa alle linee della griglia e studia i sistemi di rete là fuori se devi ( Sistema a griglia 960 è quello che mi sento di raccomandare). Studia dove hanno posizionato il layout della griglia sulla pagina e poi chiedi perché, quindi deduci se il tuo è altrettanto equilibrato. Immagina di posizionare il tuo contenuto lungo il sistema di griglia stesso e provare a pensare a come sarebbe in quel caso, quindi replicarlo in CSS.
Piè di pagina creativi
I piè di pagina creativi possono davvero aggiungere molta personalità a un blog o a un sito Web, e sembra un po 'controproducente pensarlo. Sia che si parli di scrolling jQuery che ci porta in un bellissimo footer tematizzato in uno stile 'under-the-Earth', o solo per il fondo del sito Web o del blog di un'azienda, è una parte molto minuta di un sito Web ma uno che può avere un impatto molto potente. Le opinioni sono divise in che misura questo è il caso, e perché potrebbe essere. Ho una mia teoria: quando leggiamo una pagina web iniziamo dall'alto e passiamo in fondo, ed è ai piedi della pagina che traiamo le nostre conclusioni su ciò che abbiamo letto.
Quando lavori con un creativo footer ci sono alcune cose che vuoi tenere a mente, e alcune best practice che ho notato sono state usate nei footer che amo di più. Per me la parte più importante dell'utilizzo di un footer in questo modo è utilizzare la stessa combinazione di colori del tuo sito web, ma con un contrasto diverso . Questo è incredibilmente importante e, naturalmente, è possibile pompare il contrasto su o giù sul colore del carattere rispetto al contrasto con cui si sta lavorando per il tema generale sul footer, in primo luogo.
La cosa importante da ricordare è che vuoi avere un bel set di stile per questa sezione. Dà un bel senso di completamento al sito. Quando si utilizza questa tecnica è possibile rendere il piè di pagina alto come si desidera, entro limiti ragionevoli, perché con la combinazione di colori a contrasto è ovvio che questa è effettivamente una sezione di piè di pagina.
Per quanto riguarda il contenuto, nel mondo del new-footer può essere opportuno aggiungere l'illustrazione del logo e il nome del blog, le immagini oi link dei social network, i tweet più recenti e anche un semplice modulo di contatto semplicistico. Questo ovviamente può variare in base alle preferenze personali, ma il mio punto di vista di tutte queste opzioni è illustrare l'evoluzione dal passato al presente in ciò che è appropriato visualizzare in fondo a un sito Web o blog.
jQuery scrolling
Questo è uno dei miei metodi preferiti per navigare su un sito web, e penso anche che sia specificamente applicabile alla navigazione di post su un blog. Ci sono diversi modi per lavorare con jQuery per questo, quindi qui andrò su quello che è uno dei miei modi preferiti (e più semplici) per fare uno scrolling fluido e poi passare attraverso quello che sta succedendo e come implementarlo.
Questo è il codice per lo scorrimento verticale, poiché lo scorrimento orizzontale non è desiderabile.
$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top} , 1000); event.preventDefault ();});});Quello che sta succedendo qui può sembrare complicato, ma in realtà è piuttosto semplice. Stiamo aprendo una funzione sulla ".class" dell'elemento di navigazione su cui clicchiamo (questo è un evento click). Quindi la parte più importante qui è quella di intitolare la classe della lista (ul) a "nav". Oppure sostituisci "nav" nel codice con quello che hai chiamato quella classe. E questo è più o meno per un jQuery scroll funzionante, basta lanciarlo nel tuo sito web e collegarlo al jQuery minified (preferibile) e siete tutti pronti per partire.
Per quanto riguarda l'utilizzo con un rotolo verticale come questo, è abbastanza illimitato. Un sacco di persone si divertono a non dover scorrere verso il basso manualmente, a loro piace davvero la pagina che fa per loro, ed è anche un modo brillante per spostarsi da un post all'altro su un sito web, soprattutto se quei post sono grandi. Lo userò spesso per passare a varie sottosezioni di portfolio all'interno dei miei blog o attraverso le categorie sui siti web. È anche una tecnica perfetta se temi il tuo sito, ad esempio un tema da giorno a notte o temi per categorie o argomenti del blog.
Spero che alcune di queste tecniche siano state utili per tutti voi nel tentativo di applicare vari aspetti estetici del design sul vostro blog. Ricorda, usali con parsimonia e cerca di assicurarti di agire con il tuo miglior giudizio quando usi effetti vistosi. Abbiamo l'obbligo di creare una rete che non sia così brutta come alcuni aspetti del mondo esterno sono diventati. Anche se è un compito vasto e travolgente, è quello che possiamo realizzare se prendiamo semplicemente un progetto alla volta e un giorno alla volta. Mantieni la semplicità, mantienila onesta, mantienila reale e metti sempre la passione in quello che fai, come sempre risplenderà.
Quali sono i tuoi migliori consigli sul design del blog? Cosa rende davvero un grande blog design? Fateci sapere nei commenti!
