Share
Oggi, nella seconda parte di questo enorme tutorial, continueremo questa sessione con il secondo giorno di progettazione. Abbiamo già progettato la home page, quindi ora progetteremo le quattro pagine di supporto che costituiscono il resto del design completo del sito (Portfolio, Elenco blog, Post del blog e Pagina del modulo di contatto). Immergiamoci in noi?
Troverai molti tutorial sul Web design e sullo sviluppo in rete? ma pochissimi tuts che ti portano dall'inizio alla fine. Un sacco di tutorial sono solo per la progettazione, e altri sono solo per la codifica. Oggi stiamo iniziando una nuova serie in cui progetteremo e svilupperemo un sito Web completo da zero; Ti porteremo dal wireframe iniziale alla progettazione completa del sito (incluse 5 pagine). Quindi codificheremo il design (in Nettuts ovviamente) e infine convertiremo questo tema XHTML completo in un tema WordPress funzionante!
Controlla l'intero processo come accade nella nostra pagina di sessione!
Esaminiamo brevemente gli obiettivi del nostro progetto che abbiamo impostato il primo giorno:
Il nostro obiettivo è progettare e sviluppare un design semplice del sito con un layout moderno che sia favorevole ai sistemi CMS come WordPress. Non applicheremo alcun effetto stile selvaggio e pazzo nel nostro design (il punto qui è quello di mantenerlo semplice), ma stiamo per affrontare l'intero processo, dall'inizio alla fine, come uno studio nel layout e un uso corretto di margini e imbottitura.
Useremo il sistema a griglia 960 dall'inizio alla fine, e questo non sarà diverso per la nostra sessione di design del secondo giorno.
Una breve descrizione del corso. Potremmo suddividerlo in modo diverso una volta che avremo raggiunto la fase di codifica, ma questo dovrebbe darvi un'idea di dove stiamo andando con questa serie:
Iniziamo dando uno sguardo a cosa creeremo:
La fase di progettazione di oggi è anche divisa in quattro parti e in questa sessione progetteremo tutte le altre pagine di Iconify. Poiché abbiamo già progettato la home page, il nostro compito principale è stato completato, quindi è sufficiente compilare gli spazi vuoti per il resto della sitemap.
Questo è un passaggio cruciale che è spesso trascurato in molti progetti di design, ma la progettazione di alcune specifiche per queste pagine di supporto è qualcosa che non vorrai saltare. Ricorda, il design di un sito Web non è completo dopo aver appena configurato la home page - per lo meno avrai bisogno di un paio di modelli aggiuntivi progettati per le pagine aggiuntive che costituiscono un sito.
Poiché il nostro layout è abbastanza semplice, cambieremo semplicemente l'area del contenuto principale per ogni pagina. Gli elementi del sito universali (intestazione, navigazione, piè di pagina) rimarranno gli stessi da una pagina all'altra. Questo è importante per mantenere una base coerente per il sito in modo che gli utenti sappiano sempre dove si trovano.
La Portfolio Page è la prima pagina di supporto che progetteremo. Ricorda che stiamo utilizzando il 960 Grid System per l'intera progettazione del sito, quindi utilizzeremo lo stesso layout di base e la stessa struttura delle colonne quando configuriamo il design della homepage.
Crea un duplicato di index.psd file e rinominarlo in portfolio.psd. Aprilo con Photoshop. Elimina tutto dall'interno soddisfare gruppo di livelli tranne il bg strato.
Ora crea i livelli "breadcrumb" e "note" per la pagina del portfolio. Per la forma di sfondo delle "note", usa gli stessi stili di livello di quelli usati per noi progetto recente'S bar rettangolo. Usa l'immagine E - 1a come linea guida.
Successivamente, utilizzeremo una semplice tecnica per lavorare in una manciata di diverse varianti di colonne all'interno di questa pagina per i nostri articoli del portfolio.
Usa la tecnica di creazione dell'immagine dal primo giorno (passaggio C3) per creare due elementi del portfolio di colonne come mostrato nell'immagine E - 2a. Se ricordi, stiamo semplicemente disegnando dei rettangoli che si adattano alle guide delle colonne, applicando uno stile di livello e quindi ritagliando le immagini per creare un effetto di bordo sottile.
Ora ripeti questa stessa tecnica per tre colonne e quattro voci di portafoglio di colonne. Usa l'immagine E - 2b e E - 2c come linea guida. Nota che stiamo girando tra i diversi 12 strati di colonna di colori a 12 colonne e 16 colonne per ottenere questo perfetto. Infine, organizza i tuoi livelli come mostrato nell'immagine E - 2d.
La pagina Elenco blog è destinata a essere la posizione in cui vengono mostrati "estratti" di ciascun post del blog. Questi "stralci" sono anche chiamati elementi "loop" e di solito sono composti da un titolo, un'immagine di anteprima, una breve anteprima di testo e alcune meta informazioni (come la data, l'autore, i tag, ecc.).
Proprio come abbiamo fatto con l'ultima pagina, inizieremo creando un duplicato di portfolio.psd pagina e rinominandolo blogs.psd. All'interno del file blogs.psd, cancella tutto all'interno della cartella del contenuto, tranne bg, briciole di pane, e pagine strati. Ora abbiamo un file blog vuoto, possiamo iniziare a popolarlo con alcuni contenuti.
Per la prima volta utilizzeremo un layout blog standard a due colonne: uno per i contenuti e un altro per la barra laterale. Usa l'immagine F - 1a come linea guida per progettare il blog e il contenuto della sidebar: notiamo che abbiamo posizionato la linea di separazione verticale tra due strati della colonna in modo che sia perfettamente distanziata.
La progettazione attuale qui è piuttosto semplice, quindi non entreremo troppo nel dettaglio - basta seguire le regole impostate per i livelli di testo (il testo rosso negli esempi) e utilizzare tutti gli stili che abbiamo già configurato nelle nostre altre pagine. Prendi nota in particolare della spaziatura tra gli elementi (indicata anche in rosso) poiché ti dirà esattamente dove posizionare tutto.
Quando hai finito, organizza i tuoi livelli come mostrato nell'immagine F - 1b.
Ora che abbiamo impostato la pagina dell'elenco dei blog, abbiamo bisogno di un modello per ogni post completo del blog. Questa è una pagina piuttosto pesante in termini di contenuto perché dobbiamo anche pianificare in anticipo un sistema di commenti e molti altri piccoli dettagli. Prestare particolare attenzione alle immagini di esempio in questa sezione!
Ancora una volta, inizia a salvare nuovamente il file blogs.psd file con un nome di blog-post.psd. Dentro blog-post.psd, elimina tutto il contenuto dell'elenco blog in modo che possiamo iniziare nuovamente. Nella sezione dei contenuti, prendi lo strumento di testo e inizia a popolare con testo e immagini come mostrato nell'immagine G - 1a.
Disegna un rettangolo e applica gli stessi stili di livello di progetto recente'S bar dal file index.psd. Compilalo con il contenuto e posizionalo come mostrato nell'immagine G - 2a. Per gli stili del righello orizzontale, controllare l'immagine G - 2b.
Disegna un rettangolo con 630 px di larghezza e qualsiasi altezza per ora. Nominalo bg e posizionarlo all'interno di un gruppo di livelli denominato Commenti. Copia gli stili di livello da bg post popolare, quindi incollalo su questo livello. Usa l'immagine G - 3a come linea guida.
Per le frecce delle caselle di commento, disegna un triangolo all'interno del riquadro dei commenti (attiva Aggiungi all'area della forma mentre si disegna) misurando 10X10px ruotare la freccia e posizionarli come mostrato nell'immagine G - 3b e applica gli stili di livello come mostrato nell'immagine G - 3b.
Lasciamo un margine sinistro di 40 px per il secondo commento per indicare che si tratta di una risposta. Usando questa stessa tecnica, possiamo andare ancora più in profondità - mostrando una terza, quarta o addirittura quinta profondità di risposta semplicemente indentando un altro 40px per ogni livello. Faremo lo stesso nella nostra versione XHTML, quindi ricorda queste regole di stile di base.
Disegna un altro rettangolo con lo stesso stile di Commenti'S bg strato e nominare questo livello bg. Inseriscilo all'interno di un gruppo di livelli denominato modulo di commento. Usa l'immagine G - 4a come linea guida.
Ancora una volta, copia blogs.psd e incollarlo con un nome di contact.psd. Aprilo in Photoshop. Elimina tutto tranne breadcrumb e barra laterale da soddisfare gruppo di livelli. copia modulo di commento e incollarlo come mostrato nell'immagine H - 1a. Ancora una volta, digita il contenuto come mostrato nell'immagine.
Noterai che molto di questo è ormai la ripetizione: stiamo solo copiando / incollando il contenuto, adattandolo alle guide che vogliamo utilizzare e usando la stessa tipografia e gli stessi stili di livello delle pagine precedenti.
Le cose dovrebbero muoversi molto velocemente quando avrai finito questa pagina. Puoi ripetere questo stesso processo di base per tutte le pagine di cui hai bisogno per mockup: basta attenersi alle guide delle colonne e utilizzare le stesse regole tipografiche e di stile di livello per ogni nuovo design e dovrebbe essere in grado di battere altri di questi elementi potrebbe essere necessario molto rapidamente.
Questo conclude la seconda parte del nostro enorme tutorial! Ormai, abbiamo progettato con successo il nostro sito web. Nella prossima sessione (in arrivo su Nettuts), inizieremo la procedura di codifica, quindi torna qui (e su Nettuts) mentre pubblichiamo le nuove parti di questo tutorial!
Accentsconagua