La guida definitiva per iniziare in Web Design

Vuoi imparare come progettare il tuo primo sito web? Forse ne hai progettati alcuni e ora ti piacerebbe trasformare le tue capacità in una carriera? Questo articolo è qui per indicarti la giusta direzione.

Un articolo non può coprire tutto ciò che devi sapere, naturalmente; le abilità, gli strumenti e le tecnologie di cui avrai bisogno per diventare un designer ragionevolmente esperto, impiegheranno mesi per imparare e anni per padroneggiare. Scusa no. Non c'è davvero un modo più veloce. Ma l'apprendimento e lo sviluppo costanti sono uno degli aspetti più divertenti di questo lavoro.

Per i designer tra noi: hai mai detto a qualcuno "I design websites", e ho provato quel freddo terrore quando hanno risposto con "Cool! Puoi insegnarmi come farlo? "Voglio dire, spiegare quanto sia difficile il design del lavoro. Questo è particolarmente vero quando la persona che chiede sa poco dei computer per cominciare. Molte persone danno per scontato che fai clic e trascini tutto sullo schermo, un po 'come PowerPoint, forse. Ti dirò questo gratuitamente: l'opzione di PowerPoint per l'esportazione di "pagine web" non ha aiutato. Siamo qui per aiutarti a correggere questo errore. La prossima volta che qualcuno ti chiede come progettare siti web, indirizzali qui.

Benvenuto, Signore e signori, alla guida del Depot del Webdesigner per iniziare il web design. Prendi i tuoi topi e abbraccia le tue tastiere, questa sarà lunga. Il caffè è facoltativo, ma altamente raccomandato.

Per chi è questo?

Questo articolo è destinato a chiunque desideri iniziare a progettare siti Web nel proprio browser. È anche per le persone che vogliono iniziare a progettare siti web, punto. Questo articolo presuppone che il lettore non abbia avuto alcuna formazione formale di progettazione, nessuna abilità di codifica e nessuna esperienza nel settore del web design.

I "requisiti minimi" per le persone che vogliono progettare il loro primo sito Web sono bassi. Se sai quali sono le cartelle e i file di testo, puoi iniziare. È così semplice.

Tuttavia, mentre iniziare è semplice, costruire un buon sito Web è tutto fuorché. Ci sono molte abilità che dovrai imparare. Dovrai imparare la teoria dei colori. Avrai bisogno di sapere come gli esseri umani interagiscono con i siti web e perché lo fanno nel modo in cui lo fanno. Avrai bisogno di imparare i linguaggi di programmazione di base, ovvero HTML e CSS.

Quindi, potresti voler imparare alcune programmazioni di base in JavaScript e capire come usarlo per manipolare parti del tuo sito web. Poi ci sono i sistemi di gestione dei contenuti, l'ottimizzazione dei motori di ricerca, il marketing.

E, naturalmente, devi avere alcuni ottimi contenuti per il tuo sito web in primo luogo. Perché mai vuoi farlo, comunque? Voglio dire, potresti assumere un professionista. Devi esserci perché ami imparare. Devi essere affascinato da Internet e da tutto il suo potenziale. Hai bisogno di molto tempo libero. Tuttavia, non è necessario essere esperti in tutto. Nessuno dei professionisti è. Alcuni sono specializzati in un'area. Alcuni fanno un po 'di tutto.

Benvenuti nel meraviglioso mondo del web design, newbie. Preparati a fare un sacco di errori e ricorda di divertirti!

Come usare questa guida

Leggi quanto basta per iniziare. Crea il tuo primo sito Web, probabilmente schifoso. Ritorna e leggi altro. Migliorare. Ripetere.

No davvero, probabilmente non vuoi leggerlo tutto in una volta. Ci sono un sacco di risorse esterne da leggere, un sacco di concetti per girare la testa. Non l'ho imparato in una volta. Molto probabilmente, nemmeno tu. Va bene.

Stiamo progettando nel browser

Forse hai guardato intorno al Web e hai notato che molte persone usano i redattori di immagini per progettare i loro siti web per primi. Codificano i disegni dopo, o lo fanno qualcun altro. Photoshop è lo strumento più comunemente usato, ma le persone usano anche programmi come Schizzo , GIMP , Inkscape , e Illustratore .

Guardati intorno al Web e vedrai post sul blog dopo il thread del forum discutere i vantaggi e i problemi inerenti l'utilizzo di uno strumento o di un altro per progettare i tuoi siti web. Questo è buono. Ho sempre detto che le persone dovrebbero usare qualsiasi strumento che funzioni meglio per loro. Tuttavia, faccio un'eccezione a questa regola. Credo che i siti web dovrebbero essere progettati nel browser, idealmente in diversi browser, perché le persone non navigano sul Web in Photoshop.

Oltre a ciò, un flusso di lavoro basato su browser ha molti altri vantaggi:

Vedi esattamente quello che stai ricevendo. Anche i prototipi di alta fedeltà non trasmettono molto bene le parti interattive o le parti animate di un sito web. Con il design basato su browser, puoi vedere esattamente come funziona il design.

Questo è particolarmente vero quando si tratta di design reattivo. (Per chi non lo sapesse: il design reattivo è quando crei un design di un sito web che cambia e si adatta a diverse dimensioni dello schermo. Ciò significa che lo stesso sito Web avrà un aspetto e forse funzionerà in modo leggermente diverso su telefoni, tablet e computer desktop.)

Hai mai provato a creare almeno tre mockup ad alta fedeltà di ogni layout di pagina sul tuo sito web? Non è conveniente. Molto meglio farlo "tutto in una volta".

Il design basato su browser può renderti un designer migliore. Quando esegui tutto il lavoro preliminare di progettazione, ad esempio in Photoshop, è facile lasciare che le cose sfuggano di mano: le interfacce possono ingombrare, i designer scatenarsi con la grafica pesante. Trame di cuoio ovunque! (Fortunatamente questa tendenza è diminuita negli ultimi anni.) Non ha bisogno di succedere in questo modo, ma spesso lo fa. Questo peggiora se la persona che progetta il sito Web non è la persona che lo codificherà.

Questo è un modo in cui la progettazione nel browser potrebbe cambiare il tuo approccio all'aspetto estetico e visivo. Ti costringe anche a saperne di più su HTML. E, si impara molto di più su come funzionano i diversi browser. Fondamentalmente, più ti sporchi le mani con il codice, meglio capirai come funzionano i siti web. Questo non ti renderà un fantastico designer per conto suo; ma è un ottimo inizio.

La mente di cui avrai bisogno

Prima di aprire un editor di testo e iniziare a digitare, è necessario comprendere alcuni principi di base. Le persone che progettano in un editor di immagini come Photoshop potrebbero progettare un sito web come questo:

1. Se sono intelligenti, prima abbozzeranno alcune idee su carta. Quindi apriranno Photoshop. Da dilettante, ho sempre iniziato con quel secondo passo: non commettere i miei errori.
2. Verseranno il loro cuore, anima, sangue, sudore e lacrime nelle loro migliori idee. Queste idee formeranno un design completo e bello per la home page (probabilmente). Quindi, supponendo che abbiano un capo o un cliente che lo richiede, potrebbero rapidamente mettere insieme alcune altre opzioni di progettazione / layout.
3. Il cliente sceglierà quasi inevitabilmente uno dei concetti "inferiori" per ragioni proprie. Anche se non è "colpa del cliente", può essere molto, molto difficile tornare indietro e cambiare i progetti che hai già arricchito o "finito".

Questo approccio non fa bene a nessuno. Quindi, la prima cosa che devi sapere è:

Tutto è iterativo

Letteralmente ogni parte del tuo design dovrebbe essere soggetta a cambiamenti. Niente è sacro. Se qualcosa non funziona o non si adatta al resto del design, dovrebbe andare o essere cambiato. Anche una volta che il tuo sito web è stato "completato" e avviato, potresti notare dei bug o potresti decidere di prenderlo in una nuova direzione. Il web stesso è fluido e in continua evoluzione. Sebbene io non creda veramente nel cambiamento per il cambiamento, dovresti essere pronto ad adattarlo quando necessario.

Non si costruisce semplicemente un sito Web e lo si lascia lì. I siti web sono un po 'come i bambini, solo che non crescono mai e se ne vanno di casa. Devi continuare a badare a loro, aggiornarli, mantenerli.

Fai bene, però, e otterrai un fantastico ritorno sull'investimento.

Non puoi mai smettere di imparare

Il momento in cui i designer smettono di apprendere nuove cose sul web design è il momento in cui smettono di essere rilevanti. Internet è tutto sulla rilevanza. Seriamente, se il tuo sito web sembra troppo datato, è probabile che molti visitatori non si fermeranno per vedere cosa hai da dire. La percezione è tutto.

Non hai bisogno di riprogettare ogni sei mesi, ma dovresti sempre leggere di più, scoprire nuovi eroi del design e parlare con altri designer. Come ogni dottore, avvocato o altro professionista, dovrai tenere il passo con le novità.

Non sono tutte le nuove tendenze di design brillanti. Ci sono anche nuove app, tecnologie e trucchi che possono semplificarti la vita e il lavoro. Ricorda cosa ho detto di essere in questo per il lungo raggio? Si. Questa è una parte di ciò di cui stavo parlando.

I contenuti contano più di ogni altra cosa

Abbiamo già stabilito che, quando si crea un sito Web, non si dovrebbe mai saltare direttamente alla creazione della grafica. Davvero, non dovresti mai saltare prima a nessun lavoro di progettazione. Il primo passo nella progettazione di un sito Web è garantire che tu abbia il contenuto del sito web. Questo significa testo, foto, informazioni di contatto, i lavori. Ne hai bisogno prima. Questo non è negoziabile.

Potresti aver visto persone riempire i loro disegni con un testo fittizio chiamato testo "Lorem ipsum". Potresti anche saperlo come "testo latino" o "testo greco" anche se in realtà ha ben poco da fare con entrambe le lingue. È solo un testo fittizio, progettato per mostrare come sarà un design pieno di contenuti. Evitalo se puoi. Credo che, per quanto possibile, i progettisti dovrebbero cercare di utilizzare il contenuto reale per il sito. Dovrebbero farlo anche nei loro telai digitali.

Questa pratica fornisce un'idea molto migliore di quanto spazio avrai bisogno per i tuoi contenuti e può aiutare a evitare molti bug e problemi in seguito.

La regola da tenere a mente è questa: il contenuto non dovrebbe essere fatto per adattarsi al tuo design. Il design dovrebbe essere fatto per adattarsi al tuo contenuto. Una volta pronunciato a voce alta, sembra un gioco da ragazzi. Mi ci sono voluti anni per capirlo. No, non sono solo in questo.

Corollario: la tipografia è fondamentalmente il web design

A meno che il sito Web in costruzione non sia specificamente dedicato a immagini, video o audio, ci sarà molto testo. In effetti, potrebbe esserci un sacco di testo anche in quei casi. Commenti di testo, descrizioni di testi, revisioni di testi, argomenti di testo relativi ai contenuti in questione. Internet è principalmente testo.

È ovvio, quindi, che la tipografia è la disciplina di design estetico più importante da padroneggiare. Se le persone possono leggere i tuoi contenuti, sei d'oro. Non fraintendetemi, tutte le discipline del design sono importanti; ma inizia con la tipografia. Un testo di bell'aspetto ti porterà lontano.

Scorri il Web in modo diverso rispetto ai tuoi utenti

Ti consigliamo di ricordare che le persone navigano sul Web con diversi dispositivi e in ambienti diversi. Dovrai tener conto di ciò in diversi modi.

Alcune persone hanno schermi più piccoli, molto più piccoli. Ti ricordi cosa ho scritto sopra del responsive design? È qui che entra in gioco. Il tuo sito web dovrà adattarsi a schermi di dimensioni comprese tra tre e quaranta pollici di larghezza. Non è facile, ma ne vale la pena. Ne vale la pena perché se più persone possono effettivamente utilizzare il tuo sito web, è più probabile che comprino ciò che stai vendendo.

Altri stanno navigando in un'illuminazione diversa da te, e i loro schermi potrebbero essere scuri. Oppure potrebbero avere una vista scarsa. Ciò significa che il tuo design avrà bisogno di contrasto e molto. Quelle differenze meravigliose e sottili di colori e sfumature non significano nulla per molti utenti.

Alcune persone usano i touch screen. Di solito sono le stesse persone che usano schermi piccoli. È necessario tenere conto di ciò assicurandosi che collegamenti e pulsanti siano facili da toccare con le dita. Mentre testi i tuoi progetti con i tuoi dispositivi mobili, potresti incontrare altri problemi di usabilità da affrontare.

Poi ci sono gli ipovedenti. Ci sono persone che usano solo browser diversi. Persone che utilizzano browser basati su testo. Potrei andare avanti, ma il punto è questo: le esperienze dei tuoi utenti con il tuo sito web varieranno, a volte molto. Non dimenticarlo mai.

Stai vendendo qualcosa

Infine, ricorda di progettare per la vendita. E sì, stai vendendo qualcosa. Anche se stai solo bloggando sulle tue esperienze personali, ti stai ancora vendendo. Stai vendendo le tue esperienze, presumibilmente sulla premessa che sono di interesse o forniscono valore ai tuoi lettori. Per un blog, questo potrebbe significare solo assicurarsi che le persone possano trovare rapidamente e facilmente i post a cui sono interessati. Per un sito di brochure, ciò potrebbe significare progettare ogni pagina per mostrare al meglio la ricchezza del prodotto / servizio, rendendo più semplice l'acquisto effettivo della cosa.

Fattore questo in tutto ciò che riguarda il sito, compresi i contenuti e il layout effettivo del sito. Le persone devono vedere cosa stai vendendo ed essere convinti che lo vogliono. Veloce. Devono essere mostrati che c'è un modo semplice per agire in base a ciò che stai vendendo. Se sei un blogger, questa azione potrebbe essere quella di iscriverti al tuo blog. Se stai vendendo un prodotto o un servizio, potrebbe essere per darti soldi per detto prodotto / servizio.

Le abilità di cui avrai bisogno

Se vuoi farlo professionalmente, avrai bisogno di una varietà di abilità. Qui, ci concentreremo sulle abilità richieste per la progettazione e costruzione di un sito web. Avrai anche bisogno di capacità di business e di comunicazione, naturalmente. Quando sei pronto per imparare tutto ciò che puoi, guarda il Attività commerciale categoria qui su WDD.

Per ora, iniziamo con le prime cose che devi sapere.

User Experience Design

User Experience, - o UX - design, in questo contesto, si basa sulla conoscenza di come la maggior parte delle persone utilizza i siti Web e traduce tali conoscenze in un design di sito superiore. È un processo, è una filosofia, ed è un sacco di lavoro. Ricorda, il modo in cui usi i siti web può essere diverso dal modo in cui gli altri lo fanno. Ciò che ha senso per te potrebbe non avere senso per i tuoi utenti. I web designer ad ogni livello di abilità dimenticano che di tanto in tanto, quindi stai attento.

Naturalmente, ci sono risorse che possono aiutarti a iniziare, ad esempio Cos'è la progettazione dell'esperienza utente? Questo articolo completo di Smashing Magazine copre le basi del design UX e include una massiccia lista di collegamenti ad altre risorse. Una volta che hai finito, assicurati di leggere UI vs UX: qual è la differenza? , di Dain Miller. (A volte vedrai termini come "design dell'interfaccia utente (interfaccia utente)" e "design UX" usati in modo intercambiabile, e questo dà alle persone l'impressione sbagliata.)

Questo è anche un buon momento per conoscere il wireframing. Wireframing è un processo durante il quale è possibile delineare alcune idee di layout molto semplici su carta e penna. La penna e la carta, o un programma di disegno su un tablet, sono ideali per il tipo di concetti rapidi e approssimativi con cui lavorerai.

In seguito, potresti utilizzare un'app desktop o tablet per creare una versione più dettagliata del tuo layout. Questo processo è una parte essenziale per decidere, fin dall'inizio, come funzionerà il tuo sito web.

Per un'introduzione veloce ai concetti base di wireframing, dai un'occhiata Utilizzo di Wireframes per semplificare il processo di sviluppo . Per un'introduzione più ampia, completa di una lunga lista di risorse, leggi Guida per principianti a Wireframing .

Abilità estetiche

Alcuni sostengono che dovresti imparare a codificare i tuoi progetti prima di preoccuparti di cercare di renderli belli. Potrebbero avere ragione Per gli scopi di questo articolo, tuttavia, volevo includere la teoria prima delle abilità pratiche.

Estetica: è una cosa complicata. Ciò che sembra un grande schema di colori per alcune persone può sembrare alquanto strano per gli altri. I caratteri che ti sembrano "giusti" possono sembrare totalmente sbagliati per i tuoi partner commerciali. Sembra molto, molto soggettivo.

C'è una scienza nel far sembrare le cose belle, però. Può sembrare una scienza inesatta, ma conoscere le regole di base ti farà superare molti problemi. Proprio come in ogni altra disciplina creativa, conoscere le regole è il primo passo. Poi impari come infrangere le regole in modo creativo, senza rompere il tuo sito web.

Tipografia

Ricordi cosa ho detto sull'apprendimento della tipografia prima? Non stavo scherzando. Internet è testo. Sono parole. Quelle parole dovrebbero apparire incredibili . La tipografia è più che scegliere il font giusto, però. La tipografia riguarda l'usabilità. È necessario scegliere le dimensioni dei caratteri e i tipi di carattere corretti, ad esempio, per rendere il testo leggibile per la maggior parte delle persone, nella maggior parte degli schermi. È necessario impostare le giuste dimensioni per intestazioni e titoli per creare una gerarchia visiva. Devi rendere il tuo testo sensato al maggior numero possibile di persone.

Qui per aiutarti a farlo Tipografia pratica di Butterick . Questo libro ha tutto: eccellenti spiegazioni di concetti tipografici, le regole della tipografia, grandi esempi e uno dei titoli più britannici che abbia mai sentito. Dovresti leggere l'intero libro. Puoi farlo online, gratuitamente, o ordinare una copia di vita reale. Fallo. Anche se non sei mai in grado di progettare il tuo primo sito web, i consigli contenuti in questo libro miglioreranno l'aspetto di ogni documento che crei.

Se non vuoi leggere l'intero libro, dai un'occhiata la versione breve . In letteralmente meno di dieci minuti, imparerai il minimo di ciò che devi sapere.

Dopo aver appreso le regole della tipografia, potresti provare a scegliere alcuni caratteri per il tuo progetto. Ci sono molti buoni gratuiti là fuori, quindi guardati intorno. Molte persone, me compreso, scelgono i loro caratteri da Google Web Fonts . I caratteri Google ti consentono di "incorporare" direttamente i caratteri da utilizzare nel tuo sito Web, quindi è conveniente. Ancora meglio, alcuni grandi stilisti sono andati e hanno compilato liste di combinazioni di caratteri da provare:

• 5 migliori combinazioni di caratteri consigliate di Google
• 8 fantastiche combinazioni di caratteri di Google10 Google più impressionante
• Combinazioni WebFont da provare oggi
• 10 Altre fantastiche combinazioni di caratteri Google che puoi copiare

Se vuoi creare le tue coppie di caratteri Google, dai un'occhiata Il Web Font Combinator . È uno strumento che ti consente di visualizzare rapidamente in anteprima le combinazioni di caratteri in modo sensato. Per uno strumento di pianificazione tipografica più avanzato, prova typecast . Ha un piano gratuito che si adatta alla maggior parte dei principianti e designer solitari. Se inizi a lavorare con altri, e hai davvero bisogno di dare loro l'accesso in modifica alla pianificazione dei font, il prezzo non è affatto male. Typecast ti consentirà inoltre di accedere ai caratteri a pagamento non presenti nella libreria di Google Fonts.

Un altro posto dove cercare i caratteri web: Font Squirrel. Font Squirrel ha una vasta libreria di font gratuiti da usare sui siti web. A differenza di Google, l'incorporamento non è così conveniente. Dovrai farlo da solo. Se vuoi imparare come farlo, ecco a ottima guida . Prima di farlo, tuttavia, potresti voler saltare avanti e imparare prima HTML e CSS di base.

Ultimo, ma non meno importante, ci sono un sacco di grandi caratteri, gratuiti e a pagamento, elencati qui al deposito di Webdesigner. Abbiamo anche molti ottimi articoli sulla tipografia che vanno oltre le basi. Guardare intorno al sito per i caratteri (alcuni di loro sono nella sezione Freebies). Puoi trovare gli articoli di tipografia qui: https:// {$lang_domain} / Categoria / tipografia /

Teoria dei colori

La teoria del colore ha poco a che fare con l'apprendimento dei nomi tecnici dei colori. Quindi, se il tuo cliente chiede il fucsia, ma vuole davvero il rosa acceso, sei da solo. (<- Esperienza di vita reale.)

La teoria del colore si occupa di combinazioni di colori e delle emozioni umane che possono evocare. È una scienza attuale. Per una grande introduzione alla teoria dei colori, consulta questo articolo di Tutsplus: Un'introduzione alla teoria del colore per i web designer . Al termine dell'articolo, controlla i due generatori di schemi colore mostrati alla fine.

Ricorda che la teoria del colore ha anche implicazioni per l'usabilità e l'esperienza utente del tuo sito web. Ad esempio, se il colore del tuo testo è troppo vicino al colore dello sfondo, le persone non saranno in grado di leggerlo bene. Questo problema peggiora con l'abbagliamento dello schermo, schermate mal configurate e problemi alla vista.

HTML e CSS

HTML sta per "Hypertext Markup Language". Ogni sito web che hai mai guardato è realizzato in HTML. L'HTML è ciò che dice al tuo web browser se guarda al vecchio testo, un'immagine, un link, un video e così via. Il tuo browser quindi lo traduce in ciò che vedi sullo schermo.

Il linguaggio rende carino un sito Web è chiamato CSS, ed è l'acronimo di "Cascading Style Sheets". CSS dice al browser quale font deve essere il testo e quali colori usare. Il CSS definisce anche il layout del tuo sito web, come appaiono i pulsanti, quanto dovrebbe essere grande o piccolo tutto ... puoi persino animare cose con esso.

Imparare queste lingue è abbastanza semplice. Sono le lingue informatiche più facili che potresti mai imparare. Tuttavia, sono anche estesi e possono essere combinati in tantissimi modi, per creare moltissimi design fantastici. Ti ci vorrà un po 'per imparare come usarli correttamente. Suggerisco di iniziare Code Academy . Code Academy è un sito in cui puoi imparare HTML e CSS, oltre a pochi linguaggi di programmazione, tutti gratuitamente. Le spiegazioni sono semplici. Ti vengono forniti esercizi di codifica e feedback dal vivo sul tuo lavoro.

Una volta che conosci le basi, ci sono un numero davvero incredibile di siti web là fuori dove puoi saperne di più.

JavaScript di base (opzionale)

Javascript, come detto prima, è un linguaggio di programmazione di base che ti consente di manipolare il contenuto del tuo sito web in modi che HTML e CSS da soli non sono in grado di gestire. Tuttavia, non ne hai effettivamente bisogno . È anche un ordine di grandezza più complicato rispetto agli HTML / CSS di base. Oh, è incredibilmente utile, ma per il tuo primo sito Web, non è essenziale. È, tuttavia, una delle tecnologie più importanti associate al web design, e quindi lo cito qui.

Cosa puoi fare con questo? Oh, cose come sfilate di diapositive di fantasia, che chiamano nuovi contenuti senza ricaricare la pagina, migliorando l'usabilità del sito Web e molte altre cose! Se vuoi imparare come fare queste cose, la mia raccomandazione è la stessa dell'ultima sezione: Code Academy. Sono semplicemente così fantastici.

jQuery

Una nota a margine: Code Academy ti insegnerà anche come utilizzare jQuery, se lo desideri. jQuery è essenzialmente una libreria di cose che altre persone hanno già realizzato con JavaScript. Facilita l'uso di JavaScript nelle pagine Web semplificando la selezione e la manipolazione del contenuto.

Se non hai capito niente, va bene. Inizia con HTML e CSS. Impara un po 'di JavaScript regolare. Guarda il codice degli altri ... molto. Tra questo e il corso di Code Academy, inizierai a capirlo.

Gli strumenti di cui avrai bisogno

Il software può essere un argomento delicato, con alcune persone che giurano su un editor di immagini e altri che predicano la buona notizia del loro editor di testo preferito. Altri ancora urleranno, "No! Ti stai sbagliando tutto! "Su e su gli argomenti vanno. A volte possono diventare piuttosto intensi; ma puoi tranquillamente ignorare la maggior parte di questo.

Altri non sono così eccitati per le app che usano. Tuttavia, si sentono a proprio agio in una particolare app e a loro non piace il cambiamento. Questa mentalità è la morte di qualsiasi designer o programmatore. Tutti dovrebbero prendere tempo regolarmente per sperimentare nuovi strumenti, flussi di lavoro e processi. Potresti non avere il tempo di farlo costantemente, e va bene. C'è qualcosa da dire per "Se non è rotto, non aggiustarlo". Il mio punto è che non dovresti mai aver paura di sperimentare qualcosa di nuovo, specialmente in questo settore.

Quindi, ecco cosa farò: elencherò alcuni fantastici strumenti gratuiti. Se ti piacciono, fantastico! Se ritieni di aver bisogno di qualcosa di diverso, ci sono elenchi di liste di alternative.

Il set completo di browser moderni

Ah, il browser. Potresti saperlo come "Chrome", o "Firefox", o, Dio non voglia, "That Blue 'E' Thingy". Nessuno di loro è lo stesso. Hanno tutti i loro piccoli capricci e i siti web possono sembrare un po 'diversi in ognuno di essi. Possono anche apparire radicalmente diversi, a seconda di come il sito Web è stato codificato. Dovrai testare il tuo sito Web e assicurarti che sia il più completo possibile. Fortunatamente, le funzionalità del browser hanno raggiunto il punto in cui i siti Web iniziano a sembrare quasi identici in ciascuno di essi. Almeno i layout del sito Web, in generale, non rappresentano più un problema.

Tuttavia, le chiavi per garantire la qualità del tuo lavoro è di testarlo nel maggior numero possibile di ambienti. Se il tuo computer desktop / portatile esegue Windows, hai già Internet Explorer (Blue E). Lo vorresti anche tu Firefox e Google Chrome , almeno.

Su un Mac, avrai Safari, ma avrai problemi con l'esecuzione di Internet Explorer. È fattibile, ma fastidioso. Se il tuo computer utilizza un derivato Linux come Ubuntu, puoi testare Safari 5 e Internet Explorer 8 e versioni successive. È necessario notare che IE 8 e versioni successive sono le versioni più dolorose di IE con cui lavorare e sono difficilmente in uso. In effetti, Internet Explorer sta cadendo in disgrazia in generale, e sempre meno persone lo usano ogni anno. Inoltre, Microsoft rilascerà un nuovo browser con Windows 10 con Gioca su Linux .

Browser per dispositivi mobili

Il test del tuo browser mobile sarà limitato dai dispositivi che possiedi. Detto questo, i noti browser per dispositivi mobili hanno tutti caratteristiche abbastanza simili.

Si dice che Firefox per iPhone / iPad sia in produzione per quest'anno. È possibile, tuttavia, installare Cromo , e Opera Mini proprio adesso.

Sui dispositivi Android, puoi installare Cromo , Firefox , musica lirica e Opera Mini. Nessun amore Safari, anche se non è una sorpresa. A Apple piace mantenere le cose "in famiglia".

Pensi che questo sia un sacco di browser da testare? Ce ne sono molte di più! Tuttavia, le loro basi di utenti sono relativamente piccole. Durante i test nei browser, devi giocare alla maggioranza; o ti farai impazzire.

Utensili per incorniciatura

Carta e penna (o un'app di disegno)

Ho già detto che vorrai iniziare la tua inquadratura su carta e penna, o forse in una sorta di app di disegno. Questo è importante È molto raro che le prime idee di qualcuno siano le loro migliori idee. L'utilizzo di wireframe rapidi e usa e getta per iniziare ti consente di affinare le tue idee un po 'prima di dedicarti a qualcosa.

Disegnare app

Una volta che sei pronto per iniziare a creare i tuoi veri telai, quelli su cui sarà basato il tuo codice, avrai bisogno di un'app per la telegrafia. Ho scelto Google Draw (è ciò che io chiamo l'app di disegno in Google Drive) perché ha tutto ciò di cui ho bisogno. Viene fornito con tutte le forme base che potrei mai desiderare, ottime funzionalità di condivisione e collaborazione dal vivo. Esatto, se sto lavorando con qualcun altro, possiamo apportare modifiche allo stesso wireframe contemporaneamente.

L'ho già fatto prima. Funziona. È meraviglioso. Oh, e ottieni circa 15 GB di spazio libero con cui lavorare. È basato sul Web, quindi funziona su qualsiasi sistema operativo desktop. Non sembra avere una versione tablet, che mi delude. Beh, non puoi avere tutto.

Per i tablet, abbiamo un elenco di app che possono svolgere il lavoro qui: Come progettare wireframe sul tablet .

Un editor di codice

Un editor di codice è in realtà solo una versione glorificata di Blocco note. Potrei aver appena fatto un po 'di schizzi e maledetti tecnici, ma è soprattutto vero. La differenza è che questi editor di testo sono dotati di molte funzioni extra progettate per semplificare la codifica di siti Web e programmi. Ricordi cosa stavo dicendo delle persone ossessionate dal loro software? Diventa cattivo con la folla di editor di testo.

Ricorda, se qualcuno ti chiede di "Vim" o "Emacs", torna indietro lentamente senza rompere il contatto visivo. Questa è la tua unica protezione.

Questa è una di quelle volte in cui dovrai sperimentare e vedere ciò che ti piace di più. Puoi letteralmente creare siti Web nel Blocco note, se lo desideri. Dopo un po 'diventerebbe doloroso e noioso, ma puoi.

Quindi con quale si dovrebbe iniziare? Sto per dire Parentesi . È ancora in fase di sviluppo attivo, ma è stabile. È gratis. Funziona su Windows, Mac e Linux. È progettato specificamente per le persone che progettano e costruiscono siti Web nel browser.

Un editor di immagini

Potresti non progettare più siti Web in Photoshop, ma dovrai comunque creare e modificare singole immagini. Che si tratti di foto, loghi o icone, avrai bisogno di qualcosa. Di nuovo, usa quello che funziona per te. Questo potrebbe essere Photoshop, GIMP, Paint.Net o una delle app di Corel.

Un server locale (semi-opzionale)

Infine, potresti voler installare un server web sul tuo personal computer. Un server web viene solitamente utilizzato per comunicare a Internet in generale, "Guardalo! C'è un sito web qui. "Fondamentalmente, un server Web dà a tutti il ​​permesso di guardare i file specifici che compongono il tuo sito web.

A meno che tu non abbia una connessione Internet spaventosa e un computer altrettanto spaventoso, non aprirai il tuo server a Internet. Invece, puoi installare un server per imitare il modo in cui le cose funzionano online.

Imparare a lavorare con un server sul tuo computer può farti risparmiare un sacco di tempo quando carichi i tuoi file su un vero server di hosting. Quindi sì, probabilmente ne vuoi uno, anche se non è strettamente necessario.

Per motivi di facilità d'uso, dirò di iniziare XAMPP . Puoi installarlo su Windows, Mac o Linux e sei a posto.

Un processo di esempio

Diciamo che hai acquisito una certa competenza con tutte le competenze e gli strumenti necessari per creare il tuo primo sito web. In alternativa, potremmo dire che vuoi provare le tue abilità per la prima volta. In ogni caso, è tempo di mettere tutto ciò che hai imparato da usare. Ho messo insieme un processo di esempio che potresti utilizzare durante la progettazione e la codifica del tuo sito web; ma ma non prenderlo come vangelo.

Giocaci. Modificalo. Personalizzalo. Mentre ci sono alcune cose che dovrebbero essere fatte prima, molti dettagli dipendono da te. Il tuo processo influisce sul risultato, quasi più di ogni altra cosa, comprese le tue abilità e abilità. Assicurati che funzioni per te e per qualsiasi cliente per cui lavori.

Ottieni i tuoi contenuti insieme

Scaricalo dal tuo cliente o scrivilo tu stesso. Potresti assumere un copy writer e un fotografo, o cercare immagini di stock decenti. Qualunque cosa tu debba fare, prendi il testo, le immagini, e cosa-hai-tu insieme e organizzato.

Se stai scrivendo contenuti per te stesso, ti suggerisco di leggere tutto quello che hai scritto CopyBlogger . Hanno anni e anni di consigli su come scrivere buoni contenuti per Internet.

Architettura dei contenuti

Nota: Content Architecture probabilmente non è il termine tecnico. È uno che uso per questo passaggio, perché l' architettura dell'informazione era già stata presa.

Una volta che hai i tuoi contenuti insieme, devi decidere come sarà organizzato. Cosa sta succedendo sulla home page? Cosa succede nelle altre pagine? In che modo queste pagine saranno collegate tra loro?

Questa organizzazione strutturale è fondamentale e determinerà molti aspetti della progettazione del tuo sito (in particolare la navigazione), come organizzi i tuoi file, tutto.

Ecco un esempio di una mappa mentale che ho creato per un cliente qualche tempo fa, descrivendo in dettaglio l'architettura del contenuto e la struttura di navigazione per un sito di medie dimensioni. Questo sito include pagine di base che pubblicizzano alcuni servizi e un catalogo di prodotti:

Nota: ho usato l'applicazione di disegno di Google anche per questo.

wireframing

Now, take everything you learned about wire-framing from the articles linked above, and have at it! Start with disposable wire-frames, and iterate quickly. Give each page of your site no more than, say, half an hour. (Actually, that might be a lot.) Remember, these first wireframes need not be very detailed. Create the basic layout, and nothing more.

Once you're ready, move on to your wire-framing application of choice. Create more detailed versions of the wire-frames for each page, including as much of the actual content as you can. Don't forget to include individual elements like forms and buttons. Try to define, as much as possible, exactly how the user is expected to interact with each page.

If you have a lot of the same type of page, for example, in a product catalog, just make one of each type. No need to make more work for yourself than you're already doing.

Creating Style Tiles (or some equivalent)

So you have your website structure, planned. È fantastico! If the fonts, color scheme, typographical styles, and other aesthetic stuff hasn't already been defined by a style guide, now is a good time to pick them.

Piastrelle di stile are a great way to do this. Here's an explanation of what Style Tiles are, straight from the official website:

The files you download from this website will be Photoshop files. They're meant for you to play around with until you find the right combination of fonts, colors, and imagery to use as a guide while you build and style your website.

Coding

Basically, you open up your text editor and your main browser, then you start typing. You keep typing code until a page forms in the browser that is a combination of the structure you planned in your wireframes, and the style you planned in your style tiles. Then you keep typing code until you're happy with it. It's all about iteration.

The text editor I linked to above, Brackets, has a great feature for this part. Hit the “Live Preview” button on the right side of the Brackets window, and it will launch a browser window for you. (You need Google Chrome installed for this.) The browser window will update live with any changes you make.

During this part of the process, you'll find yourself re-sizing the browser a lot, to see what your website looks like at different screen sizes. You'll make typos, figure things out through trial and error, and spend lots of time going back and looking for those typos I mentioned.

People used to clicking and dragging things onto their canvas may get quite frustrated, at first. Once you have your workflow in place, however, designing in the browser can be a speedy process.

analisi

Once you have all of your basic code in place, it's time to start testing your website on all those browsers I mentioned earlier. More bug fixes may ensue.

Don't sweat the really small inconsistencies between browsers, to start with. (If you're testing in Internet Explorer 8 or below, don't sweat the big inconsistencies.) Just make sure that people have access to all of the information on your site. The goal is to make sure that people can see what you're selling, and take some form of action based on what they read and see.

If some browsers show some pixel-for pixel differences, that's fine. È la vita. The most important thing is to make it work.

Lanciare

Ready to put your website online? Have a domain name (example: mywebsite.com) and hosting (space on a computer that's constantly connected to the Internet)? Upload those files, kick back, relax, and…

Things to do post-launch

Fix the things you forgot.

Oh. Destra. That thing… you meant to fix that before launch. How did you forget that? Voglio dire, andiamo!

It happens to everyone. There are almost inevitably post-launch bugs. The bigger your site is, the more likely it is you missed or forgot something. For your convenience, here's a pretty thorough pre-launch checklist to go through: http://boagworld.com/mobile-web/pre-launch-checklist/

Ask Questions

You don't know everything you need to. You'll always run into new problems and challenges, techniques and browser bugs. You'll spend lots of time asking professionals how to accomplish things, and researching those same things.

I've said this many times, but Google is your friend. Also, before you ask a question, see if someone else has already asked it on Stack Overflow , a site where people discuss various computer languages and how to make stuff with them.

Often, you'll find that discovering the answers you need requires searching for very specific words and phrases relating to the technologies in question. Do your reading first, and get familiar with the lingo. It'll make getting help a lot faster.

Get feedback

You can't improve unless you know where you've made your biggest mistakes. Time and experience can teach you that, but others can teach you faster.

When you're just starting out, I'd suggest that you join a community too build a network of fellow designers who can help you out with feedback. One of the most well-known and longest-running communities is the Sitepoint Forum .

Do it all over again

Maybe it's been a year or so months and your site needs a re-design. Maybe you're building a new one. Whatever the reason, it's time to take all the skills you've learned, the knowledge and experience you've gained, and do it again.

Hey, I said it was a lot of work.

Immagine in evidenza, web design space via Shutterstock.

• ← In che modo l'aggiornamento ottimizzato per i dispositivi mobili di Google influirà su di te (e cosa puoi fare al riguardo)
• I designer dovrebbero imparare a codificare? →