10 esercitazioni selezionate per principianti Web designer

Quindi stai iniziando a mostrare interesse per il web design, ma stai avendo problemi a capire da dove iniziare? Vuoi creare fantastici siti Web, imparare a codificare HTML / CSS e conoscere gli standard Web e l'esperienza utente? Se è così, abbiamo una lista di tutorial Envato scelti a mano che dovrebbero iniziare nel tuo viaggio!

Cominciando dall'inizio

Prima di esaminare tutti questi fantastici tutorial scritti da designer e sviluppatori di grande talento, ricorda una cosa: niente è impossibile e se possono farlo ... puoi farlo anche tu, proprio come ho fatto qualche anno fa. Cominciai ad attraversare i forum relativi al design (Envato non era presente all'epoca), scavavo in tutti i post relativi al web design che potevo trovare, provavo le cose da solo, sperimentavo tentativi ed errori finché non creai finalmente il mio primo sito web (che era piuttosto brutto) . Non essere timido per chiedere aiuto, siamo una grande comunità piena di amore per condividere le nostre conoscenze gratuitamente! Detto questo, ecco un elenco di, a mio parere, tutorial per principianti, che ti aiuteranno a capire i termini "web" e "design", ti insegnano come funzionano HTML e CSS e come puoi fare tutto te stesso. Cominciamo.

Nota: alcuni tutorial qui elencati fanno parte del programma Soci Plus. Maggiori informazioni su Plus Tuts possono essere trovate qui.

Iniziamo con la teoria del colore ...

"L'importanza del colore nel Web design"

Troppo spesso, vedo un grande concetto di design con una scarsa scelta di colori. Parte di ciò che rende "fantastico" un ottimo web design è il layout, la tipografia e il colore. Quando ognuno di questi aspetti lavora per complimentarsi a vicenda, nasce un grande design.

Gerarchia visiva in Web design

Ogni giorno guardo tutti i tipi di siti web e tutti i tipi di design. Una cosa in comune con i modelli di successo su ThemeForest o con i siti Web sul Web è una forte gerarchia visiva. Spesso vedo modelli che hanno un grande concetto ma hanno una scarsa gerarchia visiva. Tratterò la gerarchia visiva e alcuni grandi esempi in questo articolo.

Errori comuni nel web design

Molti modelli rifiutati qui su Themeforest soffrono degli stessi errori comuni: tipografia (carattere, altezza riga, spaziatura lettere, colore), allineamento (griglia) e spaziatura (riempimento). In questo tutorial, daremo un'occhiata più da vicino su come evitare questi errori comuni.

CSS: i primi passi

Questo è per coloro che sperano di muovere i primi passi nel web design. Questo tutorial video di 70 minuti assumerà che tu abbia una conoscenza zero dei CSS. Nel corso dello screencast, imparerai la sintassi di base, una pletora di proprietà diverse e come creare gli inizi del tuo primo sito web.

Progetta e codifica il tuo primo sito web in una facile comprensione dei passaggi

In questo tutorial, progetteremo e codificheremo il nostro primo sito web in semplici e semplici passaggi. Questo tutorial è stato scritto per i principianti con la speranza che ti fornirà gli strumenti per scrivere i tuoi siti web conformi agli standard! È una settimana nuova di zecca; forse è tempo di imparare una nuova abilità!

30 HTML Best Practices per principianti - Basix

L'aspetto più difficile dell'esecuzione di Nettuts + è rappresentato da così tanti diversi livelli di abilità. Se pubblichiamo troppi tutorial avanzati, il nostro pubblico principiante non ne trarrà beneficio. Lo stesso vale per il contrario. Facciamo del nostro meglio, ma ci sentiamo sempre liberi di informarci se ti senti trascurato. Questo sito è per te, quindi parla! Detto ciò, il tutorial di oggi è specifico per coloro che si stanno appena immergendo nello sviluppo del web. Se hai un anno di esperienza o meno, si spera che alcuni dei suggerimenti elencati qui ti aiuteranno a diventare migliore, più veloce!

Senza ulteriori indugi, esaminiamo trenta best practice da osservare durante la creazione del markup.

Andare avanti…

Ora che abbiamo una conoscenza di base della teoria, e abbiamo imparato come progettare e codificare una pagina web molto semplice, siamo pronti a procedere un po 'oltre. I seguenti articoli e tutorial sono qui per insegnarti di più sul processo di progettazione web e sulle migliori pratiche di codifica.

Elementi di Great Web Design: The Polish

Quando metto insieme i disegni, di solito lo faccio in due fasi: Layout e polacco. Durante la fase di layout, posiziono gli oggetti principali sulla pagina che in genere finiscono con qualcosa che sembra relativamente completo. Nella seconda fase - la polacca - vado oltre il design e regola i colori, i trattamenti di tipo, le ombre, i livelli e in genere pulisco tutto. In questa prima di una serie di tutorial sul web design, guarderemo il polacco.

Progettare una famiglia di siti web

Il tutorial che ho aggiunto oggi si chiama "Come progettare una famiglia di design di siti web" ed è un seguito passo-passo di un insieme di progetti di blog WordPress che ho fatto di recente. Poiché le abilità di Photoshop coinvolte non sono così avanzate, ho passato più tempo a parlare del perché certe cose sono state fatte.

Da PSD a HTML, passo dopo passo, creando una serie di design di siti web

Oggi vi illustrerò tutto il mio processo di trasferimento da Photoshop a HTML completato. Creeremo un set di 4 mockup PSD di un sito Web che diventerà un tema WordPress. È un tutorial enorme, quindi se hai intenzione di seguire fino alla fine, assicurati di avere un paio d'ore di anticipo!

Ultimo, ma ugualmente importante ...

Essere ispirato, ma non copiare

C'è una linea sottile tra ispirazione e copia. Siamo circondati da oggetti e arte nella nostra vita di tutti i giorni. Trovare ispirazione per un design è un compito facile in questi giorni. In questo articolo, ti guiderò attraverso il processo di progettazione di un sito web che ho appena terminato. Fornirò immagini di siti web che mi hanno ispirato a creare un nuovo layout web unico.

Un omaggio per farti iniziare ...

30 elementi di Photoshop Web, sfondi e set di icone (tramite GraphicRiver)

Quando stai progettando o costruendo un sito web, è probabile che avrai bisogno di vari piccoli elementi progettati. Personalmente tendo a riutilizzare molti degli stessi pulsanti, menu, icone e così via. Da quando abbiamo lanciato GraphicRiver all'inizio di quest'anno abbiamo visto un sacco di interessanti grafiche per siti web, sotto forma di elementi web, sfondi e icone. Quindi ho compilato 30 dei migliori per darti un'idea di ciò che è disponibile laggiù. Ovviamente non dimenticare che se ti serve solo un modello di progettazione PSD completo da costruire, puoi prenderlo a ThemeForest!

Non siamo ancora finiti ...

Prenditi qualche minuto e leggi queste fantastiche interviste di alcuni dei nomi più famosi del settore web. Sarai stupito da quanto puoi imparare da questi ragazzi!

  • Elliot Jay Stocks
  • Chris Coyier
  • Jeffrey Zeldman
  • Eric Meyer
  • Jeff Croft
  • Marko Dugonjić

... e altro ancora. Leggi tutte le interviste qui.

Pensieri finali…

Ogni nuovo inizio è duro; lo stesso vale per il web design. Mi ricordo quando stavo imparando: ore di debug HTML / CSS, mentre la soluzione era proprio lì davanti a me; ma hey, impariamo dai nostri errori e ripetizioni. Mi piacerebbe avere accesso alla rete Tuts + quando stavo iniziando per la prima volta. Avrebbe potuto risparmiarmi un sacco di tempo e frustrazione. Considera questo articolo come il punto di partenza, se ti trovi a muovere i primi passi in questo settore. Qualsiasi domanda?

Scrivi un tutorial Plus

Sapevi che puoi guadagnare fino a $ 600 per scrivere un tutorial PLUS e / o screencast per noi? Stiamo cercando tutorial dettagliati e ben scritti su HTML, CSS, PHP e JavaScript. Se sei dell'abilità, contatta Jeffrey a [email protected].

Si prega di notare che il risarcimento effettivo dipenderà dalla qualità del tutorial finale e screencast.

  • Seguici su Twitter o iscriviti al feed Nettuts + RSS per i migliori tutorial di sviluppo web sul web.