Come faccio tu mockup un sito web?
Il tipico flusso di lavoro inizia in Photoshop e poi passa a HTML e CSS per simulare il PSD originale nel miglior modo possibile. Tuttavia, c'è una crescente tendenza nel web design per rompere il passo di Photoshop in favore della creazione della comp iniziale direttamente nel browser con il tuo editor preferito. Sono sicuro che ora la tua testa è piena di motivi per cui questo approccio potrebbe limitare il tuo design, ma in realtà c'è molto più che puoi fare nel browser di quanto tu possa pensare. Questo articolo ti fornirà gli strumenti e i trucchi necessari per creare prototipi brillanti e funzionanti come il primo passo nel processo di progettazione.
L'argomento
Meagan Fisher di 24ways.org costituisce un argomento convincente per la progettazione nel browser. Mentre non condivido il suo disdegno per Photoshop (adoro Photoshop più di qualsiasi altro software sul pianeta), sono d'accordo con alcuni dei suoi altri punti. Fisher sostiene che un'immagine statica non ti dà realmente la sensazione di un sito web come una pagina live e che la progettazione nel browser ti obbliga a concentrarti sull'organizzazione dei contenuti prima del design, che può contribuire a garantire una migliore accessibilità e una gerarchia appropriata delle informazioni.
Useremo l'articolo di Fisher come trampolino per i nostri consigli su come diventare un professionista nella creazione di fantastici simil-in-browser che sono quasi pronti quando (e se) il cliente ti darà il via libera.
Suggerimento 1: Avvia di base e utilizza una griglia
Come ho detto sopra, l'introduzione e l'organizzazione di tutti i contenuti non disegnati ti consente di creare un design che si adatta ai tuoi contenuti piuttosto che viceversa. L'utilizzo di un framework basato su griglia può ridurre drasticamente i tempi di sviluppo e aiuta a garantire che il layout sia solido.
risorse:
Per ulteriori informazioni sul web design basato su griglia, consulta il nostro articolo sui framework CSS.
Suggerimento 2: ottieni un buon editor
Se stai codificando i siti a mano, un web editor professionale è la pietra angolare del tuo flusso di lavoro. Personalmente uso (e assolutamente amo) l'espresso da MacRabbit. Ha tutte le piccole funzionalità che desidero come frammenti e completamento automatico, nonché le grandi funzionalità di cui ho bisogno, come poter vedere le modifiche in tempo reale all'anteprima del browser mentre digito il codice. Dovresti guardarti intorno e trovare l'applicazione più adatta alle tue esigenze. Ecco un breve elenco di editor per iniziare:
- Aptana: Mac, Windows Linux (di gran lunga la mia opzione gratuita preferita)
- Komodo IDE: Mac, Windows, Linux
- NetBeans: Mac, Windows, Linux
- Coda: Mac (una valida alternativa all'Espresso)
- Text Wrangler & BBEdit: Mac
Suggerimento 3: Posizionare un'ombra su un elemento
Photoshop non è più l'unico modo per ottenere un'ombra decente sul web. Molti (ma non tutti) i principali browser ora supportano CSS3 e con questo supporto arrivano diverse nuove funzionalità per la creazione di design avanzati. Una delle caratteristiche più utili è box-ombra, che ti consente di aggiungere ombre a determinati oggetti usando solo CSS. Il formato di box-shadow è box-shadow: 5px 5px 20px # 000000. Questi valori ti consentono di regolare la larghezza e la lunghezza dell'ombra e il suo raggio e colore della sfocatura.
risorse:
Controlla l'articolo di CSS.flepstudio sull'effetto box-shadow per ulteriori informazioni su come utilizzare questa funzione.
Suggerimento 4: ombreggia il testo
Se vuoi mettere un'ombra sul testo, usa il text-shadow funzione come dimostrato in questo tutorial Kremalicious. Il formato per text-shadow è text-shadow: 1px 1px 1px # 000. I primi due valori determinano l'offset dell'ombra (rispettivamente xey), il terzo valore determina il raggio di sfocatura e il valore finale consente di cambiare il colore dell'ombra.
Questa funzione può essere applicata per creare più che semplici ombre. Il tutorial sopra ti mostrerà come usare text-shadow per creare un effetto tipografico, un effetto bagliore e persino un effetto di testo infuocato.
Suggerimento 5: angoli arrotondati
Gli angoli arrotondati sono un'altra caratteristica che è stata finalmente adottata nei CSS moderni. Puoi realizzare angoli arrotondati CSS sia in Safari che in Firefox usando il border-radius funzione. Basta impostare il -moz-border-radius e / o -webkit-border-radius ad un dato valore in pixel per regolare la rotondità del confine su un determinato oggetto.
risorse:
Per esercitazioni d'angolo più arrotondate di quelle a cui puoi dare una scossa, dai un'occhiata alla raccolta di CSS Juice di 25 tecniche degli angoli arrotondati con CSS.
Suggerimento 6: creazione di una combinazione di colori
Photoshop offre un modo piacevole per visualizzare e sperimentare con colori diversi, ma ci sono anche una miriade di risorse gratuite di combinazioni di colori sul web. A mio parere, il migliore di questi è Adobe Kuler. Kuler non solo fornisce la migliore interfaccia per creare bellissimi schemi di colori al volo, ma ti dà anche accesso a una vasta libreria di combinazioni di colori pre-elaborate e ricercabili. Vuoi dare al tuo sito un aspetto autunnale? Basta digitare? Fall? e hai oltre 2.600 schemi tra cui scegliere. Kuler rende super facile creare una combinazione di colori straordinaria che puoi inserire direttamente nel tuo CSS (che a sua volta semplifica il cambiamento e la sperimentazione al volo).
risorse:
Per ulteriori strumenti a colori accurati, consulta il nostro articolo su 25 Strumenti fantastici per la scelta di uno schema di colori per siti web.
Suggerimento 7: sfumature di testo
Se sei furbo, puoi effettivamente applicare una sfumatura per vivere il testo nel browser. Che strano voodoo è questo che chiedi? Naviga su WebDesignerWall per controllare il loro tutorial sull'argomento. In sostanza, si inserisce un'estensione attorno al testo su cui si desidera applicare la sfumatura, quindi si imposta lo sfondo dello span su un PNG ripetuto del gradiente. Naturalmente, per creare il PNG, dovrai usare un editor di immagini (sì, sapevi che avresti dovuto ricorrere al buon vecchio Photoshop di tanto in tanto).
Suggerimento 8: utilizzo di RGBA per i colori dello schermo
CSS3 implementa una nuova funzionalità chiamata RGBA (? A? Che significa alfa). Usando il? A? valore, è possibile impostare l'opacità di un riempimento. Questa pratica funzionalità non solo ti consente di creare facilmente combinazioni di colori usando un singolo colore con diversi valori alpha, ma ti consente anche di creare oggetti trasparenti che rivelano il disegno dietro di loro in modo simile a ridurre l'opacità di un livello in Photoshop.
risorse:
Leggi l'articolo di Oncemade sul modo giusto per dichiarare i colori RGBA.
Suggerimento 9: conosci i tuoi caratteri web
Non cadere nella trappola di utilizzare gli stessi due caratteri su ogni singolo sito che disegni. Cambia le cose sfruttando l'intera gamma di caratteri sicuri per il web. Typetester è un ottimo strumento per fare proprio questo. Ti consente di visualizzare in anteprima blocchi di testo in vari tipi di carattere e impostazioni (dimensioni, allineamento, tracciamento, ecc.) Direttamente nel tuo browser. La parte migliore è che quando trovi le impostazioni che ti piacciono, Typetester esporterà il CSS per te.
Suggerimento 10: font ancora migliori
Creare un testo come immagine in Photoshop ti dà la libertà di usare qualsiasi carattere che desideri senza preoccuparti della compatibilità. Sfortunatamente, questo metodo genera un testo che non è selezionabile o ricercabile. Tuttavia, non è così difficile aggirare questo problema. Al giorno d'oggi, ci sono diverse soluzioni per installare font personalizzati con testo selezionabile dal vivo sul tuo sito usando il comando @ font-face.
risorse:
Ottieni fantastici tipi di carattere sul tuo sito in pochi minuti con il nostro tutorial TypeKit passo a passo.
Suggerimento 11: l'arte di riserva è il tuo amico
Spesso, specialmente con i prototipi iniziali, è necessario un pulsante rapido, un'icona o altro elemento grafico che non si desidera necessariamente creare da zero. Siti artistici come GraphicRiver sono pieni di elementi web pronti per essere inseriti in un sito, molti dei quali non richiedono modifiche a Photoshop! Anche se puoi costruire facilmente gli oggetti da te in un'ora, far cadere un dollaro su un grande pezzo d'arte e averlo pronto per andare in 2-3 minuti è piuttosto allettante.
Suggerimento 12: utilizzare gli strumenti di test del browser
So che molti di voi semplicemente non vedono l'ora di scrivere un commento feroce su come molte delle tecniche di cui sopra (ombre, angoli arrotondati, ecc.) Funzionano solo in determinati browser e sono quindi inutilizzabili. Che è esattamente il motivo per cui cerco sempre di presentare entrambi i lati di una discussione. Le persone a favore dello sviluppo nel browser presentano queste tecniche come prova del fatto che si può fare molto al di fuori di Photoshop ma sono forse un po 'troppo ansiosi di ignorare il fatto che diversi browser riceveranno un'esperienza drasticamente diversa a causa della mancanza di supporto.
Il punto è che, indipendentemente da come sviluppi lo sviluppo di un sito web, devi sempre sapere esattamente in che modo i principali browser renderanno il tuo sito. Quindi puoi prendere una decisione informata su quali browser, se ce ne sono, sono accettabili da lasciare. Per realizzare questa impresa, controlla Adobe Browserlab. Questa utility incredibilmente utile ti consente di visualizzare in anteprima in tempo reale un sito su più browser e sistemi operativi. L'unico svantaggio è che potresti effettivamente rendersi conto di quanto il tuo sito sia danneggiato in determinati browser, il che porta inevitabilmente a ore di imprecazioni e grattacapi.
Conclusione
Beh, cosa ne pensi? Sei pronto per attraversare e iniziare a creare comps armato solo con un editor di testo e un browser? O sei come me, sicuro che un coroner dovrà liberarsi di una scatola di software Photoshop dalle dita fredde prima di lasciarla andare? Ovviamente, qui non ci sono assoluti. Pochi designer professionisti creano prototipi senza alcun aiuto da un editor di immagini. La domanda diventa quindi, nella bozza iniziale, dove pensi che la maggior parte del tuo tempo sia trascorsa al meglio? Ci piacerebbe sapere. Sentiti libero di usare i commenti per prendere posizione e difendere la tua posizione fino alla morte. Per quanto mi riguarda, questa conclusione sembra essere sempre più macabra, quindi farò meglio a fermarmi qui.