# 103: Area frammenti di Photoshopping - Trucchi CSS

Anonim

È ora di tuffarsi nell'area Snippets! Cioè, l'effettiva area del contenuto di esso. Abbiamo già l'intestazione a posto. L'area dei frammenti è piuttosto popolare. Senza immergersi in profondità nell'analisi, so guardando i social media e ascoltando persone nella vita reale che trovano molte cose utili in quest'area.

Nella v9, una critica molto comune e legittima era che fosse difficile navigare. Era una fisarmonica dai colori intensi e ogni frammento era un "collegamento a bolle" (in mancanza di un descrittore migliore) che corrispondeva al colore principale di quella sottosezione del frammento. Peggio ancora, erano allineati giustificati, il che pensavo sarebbe stato un modo pulito per dare loro un po 'di spazio e saltare un po' l'occhio, ma alla fine sono sembrati strani e sciatti.

Riscattiamoci qui e rendiamo più piacevole la navigazione nell'area Snippet. Anche se, ancora una volta, la maggior parte di questi contenuti viene trovata tramite la ricerca. Tuttavia, potrebbe anche rendere piacevole la navigazione.

Decidiamo subito di non mettere un campo di ricerca proprio in basso nell'area dei contenuti. C'era in passato, ma questa è una riprogettazione e stiamo prendendo la decisione di consolidare la ricerca in un'area. Una volta che impari a utilizzare la ricerca una volta, saprai come funziona per sempre.

Per il design, andiamo con una cosa a due colonne. A sinistra, le principali categorie di Snippet, ciascuna con un colore unico. È l'ora dell'arcobaleno! Sfogliamo la nostra galleria per trovare l'ispirazione.

La colonna di destra sarà semplicemente un elenco degli snippet in quella categoria. Semplice, facile da sfogliare. Proprio come i link a piè di pagina. Le persone sanno come scansionare e utilizzare elenchi di collegamenti. È il modello di design più perfettamente semplice che ci sia.

Tuttavia, scherziamo con alcune decisioni di progettazione. I collegamenti devono corrispondere al colore della sezione o essere semplicemente grigi? Dovremmo "zebrare" i collegamenti con una versione sbiadita del colore principale? Dovremmo includere una data di pubblicazione o una data aggiornata o nessuna delle due? Cose divertenti e importanti a cui pensare, ma possiamo sempre prendere questo tipo di decisioni una volta che arriviamo al browser e stiamo lavorando con dati reali.