Quando Collis ha lanciato questo sito e chiesto ai lettori richieste di tutorial, uno comune era per un "tema di riviste" come fare per le piattaforme di blog. Questo tutorial si concentra sulla prima parte del processo: applicare una griglia CSS alla progettazione per prototipare un modello di pagina iniziale.
Demo e fonte
Puoi vedere una demo di questo tutorial facendo clic sul pulsante "Demo", sotto. Per il sorgente, il download del file ZIP non include il codice CSS Blueprint.
Cosa stiamo costruendo
L'attenzione è qui su un esempio di design di una pagina web che utilizza il framework griglia Blueprint, basato sul precedente articolo di CSS Grid Framework. Tuttavia, è possibile applicare lo stesso processo a qualsiasi framework di griglia CSS che preferisci. Se non ti piace utilizzare i framework di griglia sui siti di produzione, puoi sempre sostituire il codice CSS e le corrispondenti classi HTML con il tuo.
Il design della pagina mostrato di seguito è influenzato da numerosi temi delle riviste di WordPress, quindi potresti vedere elementi di design familiari, anche se questo non è un tutorial specifico per WP.
Un tipico processo di progettazione grafica
Permettetemi di precisare che io sono solo una "poltrona", designer autodidatta, e la natura minimalista del mio disegno rifletterà la mia mancanza di una formazione adeguata. Speriamo che questo ti permetta di concentrarti sulla progettazione generale della griglia e sul processo di codifica, che si basa su elementi geometrici, non sullo stile.
Un tipico processo di progettazione per le pagine Web è quello di iniziare con uno schizzo su carta, seguito da un mockup grafico in Photoshop o Fireworks, ecc. Rilasciare tutti gli elementi del disegno, posizionati approssimativamente dove li si desidera. Successivamente, nella fase di progettazione basata su griglia CSS, determinerai le misurazioni esatte.)
FilmPundits è un sito di proprietà di un amico che sto sviluppando. Il mockup di seguito è uno dei numerosi progetti di "FilmScenic" che ho prototipato. L'argomento del film si presta proprio a questo esempio a causa delle immagini in stile widescreen.
Se si desidera utilizzare un design simile per argomenti non cinematografici, è sufficiente regolare le altezze dell'immagine per farle apparire meno widescreen-y. Per le mie esigenze di progettazione, l'immagine più grande deve avere il massimo impatto. Quindi la composizione è posizionata leggermente fuori centro, orizzontalmente. Ciò rende l'intera pagina un po 'più dinamica e attira l'attenzione sugli elementi più importanti.
Diamo un'occhiata alle linee "guida", sotto, che formano la griglia di design per il modello sopra.
Usa il tuo software di grafica preferito per trasformare le linee guida in una mappa "fetta":
Se non stai usando una griglia CSS, potresti codificare manualmente la tua pagina web e il file CSS a questo punto, o lasciare che il tuo software generi il codice per te.
Processo di progettazione basato su griglia CSS
Ora che abbiamo un mockup di progettazione grafica, dobbiamo tradurlo in codice HTML e CSS. Per reiterare, l'utilizzo di un framework griglia CSS velocizza il processo di prototipazione. Puoi misurare i tuoi elementi di design in larghezze di pixel e finetune per adattarli alla griglia CSS che stai utilizzando. (Non mi sto avvicinando molto al posizionamento verticale perché tendo a controllarlo con l'altezza delle immagini e i margini superiore / inferiore.)
Ecco la procedura che in genere utilizzo per applicare le griglie CSS, che considera il mockup di progettazione grafica come una parte. Dovrai regolarlo in base alle tue esigenze.
Su un foglio di carta, disegna un rettangolo di delimitazione, orizzontale o verticale, che rappresenta la forma generale del design della pagina.
Partizione del rettangolo di delimitazione in sezioni approssimative: intestazione, piè di pagina, contenuto principale, barra laterale.
Suddividere ulteriormente le sezioni ruvide, se necessario.
Scegli il tuo framework griglia CSS, sia pre-costruito che personalizzato. Sto usando Blueprint. Puoi usare questo documento PDF di una pagina come un "cheat sheet".
Decidi la larghezza massima della pagina. Ho usato la larghezza di pagina predefinita di Blueprint di 950 pixel, che è formata da 24 colonne di larghezza pari a 30 px ciascuna e grondaie da 10 px tra le colonne (24x30 - 10 = 950 px).
Metti a punto il tuo design in software di grafica raster (Photoshop, Fireworks, ecc.), Se lo desideri. Tendo a saltare questo passaggio perché. Si noti che la maggior parte dei framework griglia CSS include una griglia PNG o JPG che è possibile sovrapporre come guida. Non ho usato quella griglia nel processo di progettazione grafica discusso sopra.
Decidi le larghezze minime per le varie sezioni.
Volevo che la barra laterale fosse larga almeno 190 px (5 colonne Blueprint), ma l'ho lasciata fino all'ultimo, per garantire che i tre piccoli blocchi funzione in basso a sinistra avessero priorità.
Il lato sinistro del blocco "caratteristiche" dovrebbe avere un bel po 'di spazio bianco (> = 30 px, poiché è la larghezza di una colonna in Blueprint). Dopo aver giocato con le sezioni con priorità più alta, ho optato per 3 colonne = 110 px di larghezza.
I tre piccoli blocchi di caratteristiche devono avere la stessa larghezza. Qualcosa di meno di 190 px di larghezza non avrebbe lo stesso impatto visivo. Qualunque cosa più di 190 px non lascerebbe abbastanza spazio per lo spazio bianco a sinistra. (Se avessi il tempo e l'inclinazione, avrei potuto creare una struttura personalizzata di Blueprint che avrebbe dato un controllo più fine, o usato una pagina di larghezza più grande del tutto.)
La larghezza dell'immagine della grande caratteristica (590 px = 15 colonne) viene decisa automaticamente, poiché deve estendersi per la larghezza di tutti e tre i blocchi di caratteristiche più piccole. Il suo rapporto altezza / larghezza è maggiore rispetto a quello delle immagini di caratteristiche più piccole, per impatto visivo e quindi per indicare che è "più importante" di altri elementi di pagina. Tutte queste immagini conferiscono un aspetto a tutto schermo, nonostante diversi rapporti altezza / larghezza.
Nella sezione "Messaggi recenti" della barra laterale, la larghezza dell'immagine è forzata a 70 px (2 colonne) - anziché i miei pollici 48x48 desiderati - come risultato di ciò che è rimasto sullo schermo orizzontale. (Qui è dove un quadro di griglia CSS può essere una responsabilità: dimensioni forzate.) Alla fine però, anche le piccole miniature suggeriscono leggermente il tema "widescreen".
Qualsiasi blocco di testo troppo largo può essere facilmente risolto utilizzando un carattere più piccolo, preferibilmente usando una famiglia di caratteri che è ancora leggibile con le dimensioni ridotte.
Determina le quote degli elementi laddove possibile. Soddisfare le preferenze sull'altezza mi preoccupa meno, ma ho minimizzato il posizionamento degli elementi di design verticalmente in modo che il design generale della pagina rispecchi un aspetto "widescreen". Almeno per questo modello di pagina iniziale, non volevo che l'altezza della pagina fosse così grande che la maggior parte dei lettori avrebbe dovuto scorrere verso il basso. Ciò rovinerebbe l'effetto "widescreen".
Il menu è solo un segnaposto e non è coperto qui nel codice. Si estende su tutta la larghezza del "contenuto" di 710 px (18 colonne).
L'altezza dell'immagine di grandi dimensioni è stata decisa dal layout. Le sue proporzioni dovrebbero assomigliare ad un "ampio schermo".
Le immagini di piccole dimensioni sono una versione ridotta di quelle che uso in un altro sito di film. Gli originali sono 470 w x 175 h. Dato che c'è solo 190 px di larghezza con cui lavorare, il ridimensionamento di un'immagine originale rende l'altezza risultante di 71 px, che ho ritagliato qui a 70 px. La proporzione risultante offre comunque una sensazione widescreen, ma fa eco al fatto che questi blocchi non sono importanti quanto l'immagine di grandi dimensioni.
L'altezza del testo di ogni piccola sezione caratteristica è definita da quattro sezioni verticali: titolo del film, data di pubblicazione, autore e descrizione del post, nonché diversi "bordi inferiori". (Nel codice CSS in seguito, vedrai che l'altezza della linea predefinita è 115%.)
L'altezza degli elementi nel blocco Post recenti è di almeno 49 px, anche se sono variabili a seconda della lunghezza del titolo di un post.
La parte superiore della sezione Notizie non si allinea alla parte superiore delle piccole funzionalità. Ci sono modi per raggiungere questo obiettivo, sebbene non ne abbia parlato qui.
Determina le larghezze finali di ogni elemento, tenendo conto delle impostazioni del tuo schema di griglia. È possibile utilizzare lo schizzo di carta o il mockup di grafica come ausilio.
Taglia il tuo mockup grafico, se ne stai usando uno, e salva i segmenti in file immagine.
Aggiungi i tag div Blueprint e gli attributi di classe necessari per supportare il tuo progetto.
Metti alla prova e perfeziona fino a quando non hai un progetto finale di cui sei soddisfatto.
Se lo desideri, elimina il framework Blueprint. Ciò significa sostituire il framework esplicito (HTML, CSS) con uno implicito - che per me sembra un sacco di lavoro non necessario (ma sono solo io). Come minimo, in produzione, utilizzare la versione "compressa" dei file Blueprint.
Andare in diretta.
Se sei un vero designer, a differenza di me stesso, probabilmente farai la maggior parte del mockup di progettazione nel tuo pacchetto di editing di grafica preferito. Generalmente preferisco abbozzare su carta, quindi prendere in giro al volo usando HTML e CSS (sia Blueprint che classi personalizzate), come discusso di seguito.
Processo di codifica basato su griglia
Ora che hai un mockup del tuo layout di pagina, puoi iniziare a scrivere codice HTML e CSS. Ecco un processo approssimativo delle fasi di codifica effettive:
Includere i riferimenti CSS Blueprint necessari e il codice condizionale IE in capo elemento della tua pagina web.
Nel tag del corpo, inizia con a div di chi classe l'attributo è impostato su "contenitore". Questo è un codice Blueprint per specificare un'area contenitore per elementi di design. Questo sezioni fuori l'intera pagina. Se vuoi che la griglia sia visibile, per aiutarti a posizionare correttamente gli elementi, aggiungi anche il valore "showgrid" al file classe attributo di questo div.
Iniziare a raffinare i blocchi in sezioni più piccole utilizzando il contenuto HTML incluso div tag, così come i rettangoli controllati da CSS per le immagini. Per specificare le larghezze, utilizzare le classi "span-x" di Blueprint. Aggiungi qualsiasi classe CSS personalizzata di cui hai bisogno. Di solito inserisco blocchi personalizzati ridondanti (con uno sfondo grigio), quindi li rimuovo dopo che il mio progetto attuale è stato implementato nel codice.
È possibile continuare a perfezionare ciascun blocco grezzo o saltare al passaggio successivo.
Crea tutti i logo, le icone o i banner necessari che non erano già stati creati in precedenza.
Sostituire i blocchi grezzi con gli elementi di progettazione reali. Aggiungi l'appropriato div tag, eventuali valori rimanenti della classe Blueprint.
Esempio di codice HTML e CSS
Per rendere più chiari i processi precedenti, diamo un'occhiata ad alcuni frammenti di codice HTML e CSS reali per l'esempio di design del sito cinematografico illustrato in precedenza. Tieni presente che sono stato estremo con i tag div non Blueprint puramente per chiarezza in questo tutorial. Probabilmente vorrai eliminare tutte le classi in eccesso, eventualmente unire tag div nidificati.
Nota anche che ho usato alcuni nomi di classi CSS "brutti" non Blueprint per chiarezza. Sono tutti preceduti da "fs-", seguito da un nome funzionale, per rendere chiaro ciò per cui li sto usando.
Ho codificato cinque fasi per questo tutorial, per illustrare il processo di perfezionamento in HTML e CSS. Normalmente, comprimerei lo stadio 1-3.
Modello vuoto con la classe "contenitore" Blueprint e il file CSS vuoto.
Fase di blocco approssimativa 1.
Fase di blocco approssimativa 2. Definire i blocchi grezzi dallo stage 1.
Fase di blocco approssimativa 3. Raffinamento del blocco finale nelle sezioni necessarie.
Pagina web finale e CSS.
Questi passaggi saranno più chiari nelle sezioni seguenti.
Passaggio 1: Codice modello vuoto
Per iniziare, vogliamo impostare il file HTML:
Modello FilmScenic
intestazione, contenuto, barra laterale e piè di pagina vanno qui
Share
Accentsconagua