11 siti di template CSS non iniziano da zero!

Il Web design è più accessibile che mai, ma richiede ancora molto lavoro e molta competenza Vuoi imparare il web design? 7 canali YouTube per iniziare Hai bisogno di imparare il web design? 7 canali YouTube per farti conoscere YouTube ha migliaia di video e canali per i principianti del web design. Qui guardiamo alcuni dei migliori per iniziare. Leggi altro - per produrre risultati dall'aspetto professionale.

Fortunatamente, non è necessario ricominciare da capo ogni volta. Ci sono migliaia di modelli CSS gratuiti disponibili online, che abbracciano le tendenze e le tecnologie del design moderno. Puoi usarli nella loro forma originale, o personalizzarli per renderli tuoi.

In questa guida esamineremo più da vicino i modelli CSS e dove trovarli.

Cos'è un modello CSS?

Un modello CSS non contiene solo CSS: ti dà tutto il necessario per creare un sito Web completamente funzionante. Quando ne scarichi uno, di solito ottieni una cartella contenente quanto segue:

• File HTML - Otterrai un file HTML per ogni pagina del sito. Conterrà testo e immagini di esempio che dovrai sostituire con il tuo contenuto. Dovrai anche essere in grado di adattare i metadati, relativi a cose come la descrizione del sito.
• File CSS - Di solito ottieni un file CSS principale contenente tutti gli stili per il sito, più eventuali extra come un foglio di stile di ripristino o uno per i caratteri web.
• File Javascript - Se il sito contiene funzioni Javascript dovrebbero idealmente essere incluse nel loro file separato, piuttosto che essere incorporate nei documenti HTML.
• Immagini, tipi di carattere e icone - Dovrebbero essere incluse anche tutte le immagini utilizzate nel modello. Potresti voler mantenere le cose come icone e sfondi, ma dovrai sostituire le altre immagini segnaposto con le tue. Alcuni font personalizzati potrebbero anche essere inclusi.

Diversamente dalla maggior parte degli altri tipi di modelli che incontrerai - che si tratti di modelli WordPress, Excel o InDesign I 7 migliori siti per trovare modelli gratuiti di InDesign: libri, volantini, riviste e altro I 7 migliori siti per trovare modelli gratuiti di InDesign: Libri, Volantini, riviste e altro Come utilizzare un modello Adobe InDesign professionale invece di crearne uno proprio? Ecco i migliori siti di template gratuiti. Ulteriori informazioni: i modelli CSS richiedono una certa conoscenza tecnica.

Non c'è un'interfaccia amichevole per modificarli, quindi avrai bisogno di sapere almeno come orientarti in un documento HTML solo per aggiungere il tuo contenuto. Per creare le tue personalizzazioni avrai bisogno di una conoscenza decente dei CSS Imparare HTML e CSS con questi tutorial Step by Step Imparare HTML e CSS con questi tutorial passo per passo Curioso su HTML, CSS e JavaScript? Se pensi di avere un talento per imparare a creare siti Web da zero, ecco alcuni tutorial dettagliati che vale la pena provare. Leggi di più .

Cosa cercare in un modello CSS

Ci sono così tanti template CSS gratuiti tra cui scegliere. Quindi, come fai a sapere qual è giusto per te? Ecco alcune cose a cui prestare attenzione:

• Design - Ovviamente, vuoi un sito che sia bello e rifletta qualsiasi immagine tu voglia ritrarre. Ma considera anche se il modello è adatto alle tue esigenze sia ora che in futuro. Molti sono per siti Web di una pagina; alcuni sono progettati per più pagine. Se hai bisogno di quest'ultimo, valuta se potresti usare preferibilmente un CMS come WordPress.
• Ottimizzati per i cellulari - L'utilizzo del web mobile è ora più alto del desktop, quindi è essenziale che il tuo sito funzioni correttamente sugli smartphone. Qualsiasi modello CSS decente dovrebbe utilizzare un design responsivo in modo che il sito funzioni perfettamente su qualsiasi schermo di dimensioni. Se il tuo prescelto non lo fa, passa a quello che fa.
• Ben scritta - Scarica il modello e dai un'occhiata al codice prima di impegnarti a utilizzarlo. Dovrebbe essere pulito, ben strutturato e facile da modificare. Dovrebbe anche essere SEO-aware, con l'uso corretto di tag title e heading.
• Licenza - Assicurati di controllare la licenza per il modello CSS scelto. Molti sono disponibili sotto una licenza Creative Commons Che cos'è Creative Commons e dovresti usarlo? Che cos'è Creative Commons e dovresti usarlo? Creative Commons è un insieme di licenze che ti danno automaticamente il permesso di fare varie cose, come riutilizzare e distribuire il contenuto. Scopriamo di più su di esso e come usarlo. Ulteriori informazioni, ma versioni diverse di questa licenza determinano se è possibile modificare il modello, se è possibile utilizzarlo a livello commerciale e se è necessario accreditare il progettista originale.
• Addons - Alcuni sviluppatori di template CSS offrono il loro lavoro su a “freemium” base. Ottieni il modello gratuitamente, ma hai la possibilità di pagare ulteriori personalizzazioni per renderlo unico al tuo sito.

Detto questo, diamo un'occhiata ai posti migliori per trovare template CSS gratuiti.

1. Templated.co

Questa straordinaria raccolta di oltre 800 modelli CSS contiene stili per ogni classe di siti web. Sono tutti creati appositamente per il sito, quindi non dovresti vederli spuntare da nessun'altra parte.

Tutti i modelli sono reattivi e costruiti con HTML5. Sono piccoli e leggeri, con funzionalità Javascript aggiuntive, come una lightbox video o effetti di scorrimento, utilizzati solo dove aggiungono valore reale all'esperienza.

2. Styleshout.com

Styleshout offre una vasta gamma di modelli gratuiti e premium, il primo rilasciato sotto la licenza Creative Commons.

I modelli gratuiti coprono una vasta gamma di categorie, dai siti Web completi alle pagine Coming Soon e persino alla pagina degli errori 404, spesso trascurata. Come creare una pagina di errore 404 e esempi 10 Come creare una pagina di errore 404 e 10 esempi progettato pagina errore 404 può essere la differenza tra un sito web noioso e un sito web memorabile. Leggi di più . Puoi personalizzarli da soli e adattarli allo stile del tuo sito esistente, oppure puoi pagare per far sì che Styleshout lo faccia per te.

3. HTML5Up.net

Questa super elegante collezione di modelli è anche super-popolare. La maggior parte è stata scaricata centinaia di migliaia di volte, ed è facile capire perché.

Tutte le solite categorie di siti sono soddisfatte, come blog e pagina di prodotto, e ci sono alcuni disegni particolarmente carini per i fotografi per mostrare il loro lavoro. I template di base della griglia sono estremamente personalizzabili, mentre quelli più flosci tendono ad usare Javascript in modo piuttosto pesante, quindi potrebbero essere meno adatti alle tue modifiche.

4. Freebiesbug.com

Quello che Freebiesbug manca in quantità è più che compensato in termini di qualità. Un sito dove i giovani sviluppatori mettono in mostra le loro capacità, include molti design di alta gamma e premium.

L'impressionante collezione di template gratuiti del sito è perfetta per agenzie, fotografi, sviluppatori di app e altri creativi. Dotato di effetti e animazioni JavaScript e CSS, puoi personalizzare i siti, anche se spesso sono così belli che potresti non volerlo.

Inoltre, Freebiesbug.com include tutti i tipi di risorse gratuite per i web designer, inclusi i font, le foto di repertorio, gli schizzi di Illustrator Do not Pay per Adobe Illustrator: questa alternativa gratuita è fantastica Non paghi per Adobe Illustrator: questa alternativa gratuita è grande Adobe Illustrator è fantastico ma costa un bel po 'a causa dell'abbonamento di Creative Cloud. Questa alternativa alla web app è quasi altrettanto buona e non costa nulla! Ulteriori informazioni e file PSD e altro.

5. Free-CSS.com

Free-CSS.com è un sito web senza fronzoli che offre - al momento della scrittura - circa 2503 modelli gratuiti, oltre a molti altri premium, nel caso in cui non riesci ancora a trovare quello che stai cercando.

Con così tanti tra cui scegliere può essere un po 'difficile accontentarsi del design perfetto. La qualità è generalmente buona, anche se la durata di 10 anni del sito significa che ospita ancora modelli scritti in XHTML. Avrai voglia di evitare questi. L'altra cosa è assicurarsi di controllare la licenza per il modello scelto. Sono tutti gratuiti, ma alcuni sono di pubblico dominio, alcuni Creative Commons e alcuni usano una licenza specifica per l'autore.

6. OS-Templates.com

28 pagine di template CSS gratuiti, per lo più con layout moderni basati su griglia su una singola pagina. Se semplice è ciò che cerchi, allora questo è il posto dove cercare. I disegni sono puliti, attraenti e facili da personalizzare.

OS-Templates.com offre anche una vasta collezione di “modelli di base”. Questi ti danno la struttura di base per un sito web in vari schemi di layout popolari (due colonne, tre colonne, ecc.), Mentre sono completamente senza stile. Come usare il tema predefinito in WordPress, la tela bianca ti consente di trasformare il tuo sito in qualsiasi cosa tu voglia.

7. boag.online

Maglev è un modello di sito Web a pagina singola che può essere visualizzato in anteprima su boag.online.

È un modello veloce e pulito, ideale per una pagina di prodotto. Il design minimalista è potenziato solo da alcuni effetti di Jquery per aiutarti a scorrere tra le sezioni. Il layout semplice funziona a pieno titolo, ma è anche un ottimo punto di partenza per le tue personalizzazioni.

8. Pixel Buddha

I modelli di Pixel Buddha non sono solo limitati ai siti Web, ma ne includono alcuni anche per le newsletter via email.

In ogni caso, sono tutti progettati con HTML5 e CSS3 e sono reattivi, quindi si adattano perfettamente a qualsiasi dispositivo. I punti salienti includono Howdy HTML, un bellissimo modello di portfolio / curriculum Le ultime 5 applicazioni e siti per la creazione di curriculum di cui avrai mai bisogno Gli ultimi 5 siti e applicazioni per la creazione di resume di cui avrai mai bisogno Usa questi fantastici siti e applicazioni per resume quando ti servono per far risaltare il tuo CV tra la folla. Con gli strumenti giusti, puoi creare rapidamente un curriculum unico anche senza competenze di progettazione. Leggi altro, e SOHO HTML, una fantastica pagina di eCommerce che include i file PSD di origine sopra HTML e CSS.

9. Templatemo.com

Quasi 500 modelli gratuiti sono disponibili da Templatemo. Alcuni dei migliori sono quelli che si liberano dal sistema di griglia in stile Bootstrap per provare qualcosa di diverso.

La maggior parte dei modelli è semplice e ordinata, sebbene funzioni come lightbox e caroselli di contenuti siano incluse laddove sono necessarie. Ci piace anche il fatto che molti dei modelli siano impostati per funzionare con un massimo di sei pagine per impostazione predefinita. Questo rende più semplice se il tuo contenuto non si adatta al sempre più comune layout di una sola pagina.

10. Startbootstrap.com

Bootstrap è un framework front-end incredibilmente popolare che ti consente di creare siti web di alta qualità in pochissimo tempo. Tuttavia, ci vuole un po 'di tempo per imparare, ed è qui che entra in avvio Bootstrap.

Questa raccolta di modelli gratuiti e open source sono tutti costruiti utilizzando il sistema di griglia di Bootstrap Creazione di interfacce Web: da dove cominciare Creare interfacce Web: da dove iniziare Mostreremo come le interfacce web si interrompono, quindi evidenziare i concetti chiave, gli strumenti e elementi necessari per diventare un web designer del XXI secolo. Leggi di più . Ci sono più di 30 tra cui scegliere. Alcuni sono completamente progettati e destinati a app, blog e pagine di destinazione, mentre altri sono layout vuoti che ti aspettano per lo stile.

11. Bootswatch.com

Finalmente qualcosa di più pratico. Bootswatch offre 16 temi open source per lo stile di siti creati utilizzando Bootstrap.

Puoi creare tu stesso il layout del tuo sito usando Bootstrap o scaricare uno dei modelli vuoti da Start Bootstrap. Che cosa fa Bootswatch è cambiare i caratteri, i colori di sfondo e lo stile per pulsanti, menu e altri elementi. Dona al tuo sito un aspetto unico rimanendo fedele all'etica ultra-pulita di Bootstrap.

È facile creare un sito Web di base con Bootstrap e Bootswatch gli dà un tocco di sollievo.

Come usare i modelli CSS

In generale, ci sono due modi per usare i modelli. Puoi usarli così come sono o li usi come base per il tuo progetto.

Il pericolo quando si usano i modelli è che si finisce con un sito web identico a quello di qualcun altro. Scegli un modello popolare e potrebbero esserci letteralmente decine di migliaia di siti identici. Questo è l'argomento principale a favore della loro personalizzazione.

I modelli CSS sono un'ottima scorciatoia per i web designer esperti che hanno in mente un layout di base e vogliono entrare direttamente nello styling.

Sono perfetti anche per chi è nuovo nel web design. Se sai orientarti su HTML e CSS ma non hai ancora la certezza o le conoscenze per costruire un sito da zero, un modello CSS funge sia da un modo semplice per ottenere un sito di grande impatto, sia da un fantastico strumento di apprendimento.

Puoi trattarlo come un lavoro in corso. Inizia spegnendo i caratteri Vuoi caratteri Gorgeous gratuiti? Qui ci sono oltre 25 siti in cui troverai i fantastici font gratuiti? Ecco 25+ siti dove li troverai Piuttosto che guadare centinaia di font, ecco alcuni siti che ti aiuteranno a tenere il passo con tutti i nuovi font che vorresti usare nel tuo prossimo progetto. Per saperne di più e cambiare lo schema dei colori Come scegliere uno schema di colori come un professionista Come scegliere uno schema di colori come A Pro I colori sono difficili. Potrebbe sembrare abbastanza facile scegliere una manciata di colori che sembrano buoni insieme, ma come ogni designer che ha passato ore a modificare le sfumature ti dirà: è difficile. Leggi di più, e nel tempo puoi ridisegnare elementi esistenti, aggiungerne di nuovi e così via. Non c'è modo migliore di imparare qualcosa se non attraverso l'esperienza pratica e pratica.

Usi i modelli CSS quando costruisci siti web? Quali sono i tuoi posti preferiti per trovarli? Condividi le tue esperienze e i tuoi consigli con noi nei commenti.

Scopri di più su: CSS, Web Design.