Home-theater-designers
Il web design è più accessibile che mai, ma richiede ancora molto lavoro e molte abilità per produrre risultati dall'aspetto professionale.
Fortunatamente, non è necessario ricominciare da zero ogni volta. Ci sono migliaia di modelli CSS gratuiti disponibili online, che abbracciano tutte le tendenze e le tecnologie del design moderno. Puoi usarli nella loro forma originale o personalizzarli per renderli tuoi.
In questa guida daremo un'occhiata più da vicino ai modelli CSS e dove trovarli.
Che cos'è un modello CSS?
Un modello CSS non contiene solo CSS: ti offre tutto il necessario per creare un sito web completamente funzionante. Quando ne scarichi uno, in genere otterrai una cartella contenente quanto segue:
- File HTML -- Otterrai un file HTML per ogni pagina del sito web. Conterrà testo e immagini di esempio che dovrai sostituire con i tuoi contenuti. Dovrai anche essere in grado di regolare i metadati, relativi a cose come la descrizione del sito.
- File CSS -- Di solito ottieni un file CSS principale contenente tutto lo stile 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, queste dovrebbero idealmente essere incluse in un proprio file separato, piuttosto che essere incorporate nei documenti HTML.
- Immagini, caratteri e icone -- Dovrebbero essere incluse anche tutte le immagini utilizzate nel modello. Potresti voler mantenere elementi come icone e sfondi, ma dovrai sostituire le altre immagini segnaposto con le tue. Potrebbero essere inclusi anche alcuni caratteri personalizzati.
A differenza della maggior parte degli altri tipi di modelli che incontrerai, che si tratti di Wordpress, Excel o Modelli InDesign -- I modelli CSS richiedono una certa quantità di conoscenze tecniche.
Non esiste un'interfaccia amichevole per modificarli, quindi dovrai sapere almeno come orientarti in un documento HTML solo per aggiungere il tuo contenuto. Per realizzare le tue personalizzazioni avrai bisogno di una discreta conoscenza dei CSS.
come ottenere un rimborso su un gioco Steam
Cosa cercare in un modello CSS
Ci sono così tanti modelli CSS gratuiti tra cui scegliere. Quindi, come fai a sapere quale è giusto per te? Ecco alcune cose a cui prestare attenzione:
- Design -- Ovviamente, vuoi un sito che abbia un bell'aspetto e rifletta l'immagine che vuoi 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, considera se potresti invece utilizzare un CMS come Wordpress.
- Ottimizzato per dispositivi mobili -- L'utilizzo del Web mobile è ora superiore a quello desktop, quindi è essenziale che il tuo sito funzioni correttamente sugli smartphone. Qualsiasi modello CSS decente dovrebbe utilizzare un design reattivo in modo che il sito funzioni perfettamente su schermi di qualsiasi dimensione. Se il tuo prescelto non lo fa, passa a uno che lo fa.
- Ben scritta -- Scarica il modello e dai un'occhiata al codice prima di impegnarti a usarlo. Dovrebbe essere pulito, ben strutturato e facile da modificare. Dovrebbe anche essere SEO-aware, con un uso corretto dei tag titolo e intestazione.
- Licenza -- Assicurati di controllare la licenza per il modello CSS scelto. Molti sono disponibili sotto una licenza Creative Commons , ma diverse versioni di questa licenza determinano se puoi modificare il modello, se puoi utilizzarlo commercialmente e se devi accreditare il designer originale.
- Componenti aggiuntivi -- Alcuni sviluppatori di modelli CSS offrono il loro lavoro su base 'freemium'. Ottieni il modello gratuitamente, ma hai la possibilità di pagare per ulteriori personalizzazioni per renderlo unico per il tuo sito.
Con tutto ciò che è stato spiegato, diamo un'occhiata ai posti migliori per trovare modelli CSS gratuiti.
1. Templated.co
Questa straordinaria raccolta di oltre 800 modelli CSS contiene stili per ogni classe di sito web. Sono tutti creati appositamente per il sito, quindi non dovresti vederli spuntare da nessun'altra parte.
Tutti i modelli sono responsive e costruiti con HTML5. Sono piccoli e leggeri, con funzionalità Javascript extra, come un video lightbox o effetti di scorrimento, utilizzati solo dove aggiungono valore reale all'esperienza.
2. Styleshout.com
Styleshout offre una vasta gamma di modelli sia gratuiti che premium, i primi rilasciati sotto licenza Creative Commons.
I modelli gratuiti coprono un'ampia gamma di categorie, da siti Web completi a pagine in arrivo, e persino la pagina di errore 404, spesso trascurata. Puoi personalizzarli tu stesso e adattarli allo stile del tuo sito esistente, oppure puoi pagare per farlo fare a Styleshout per te.
3. HTML5Up.net
Questa raccolta di modelli super elegante è anche molto popolare. La maggior parte è stata scaricata centinaia di migliaia di volte ed è facile capire perché.
Tutte le solite categorie di siti sono soddisfatte, come il blog e la pagina del prodotto, e ci sono alcuni design particolarmente carini per i fotografi per mostrare il loro lavoro. I modelli di base in stile griglia sono estremamente personalizzabili, mentre quelli più appariscenti tendono a utilizzare Javascript abbastanza pesantemente, quindi potrebbero essere meno adatti alle tue modifiche.
Quattro. Freebiesbug.com
Ciò che manca a Freebiesbug in quantità è più che compensato dalla qualità. Un sito in cui i giovani sviluppatori mettono in mostra le loro abilità, include molti design di fascia alta e premium.
L'impressionante raccolta di modelli gratuiti del sito è perfetta per agenzie, fotografi, sviluppatori di app e altri creativi. Ricco di effetti e animazioni Javascript e CSS, puoi personalizzare i siti, anche se spesso sono così carini che potresti non volerlo.
Inoltre, Freebiesbug.com include tutti i tipi di risorse gratuite per i web designer, inclusi font, foto d'archivio, schizzi di Illustrator e file PSD e altro ancora.
5. Free-CSS.com
Free-CSS.com è un sito Web senza fronzoli che offre, al momento della stesura, circa 2503 modelli gratuiti, oltre a molti modelli premium, nel caso in cui non riesca 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, sebbene l'esistenza di 10 anni del sito significhi che ospita ancora modelli scritti in XHTML. Ti consigliamo di evitare questi. L'altra cosa è assicurarsi di controllare la licenza per il modello scelto. Sono tutti gratuiti, ma alcuni sono di dominio pubblico, alcuni Creative Commons e alcuni utilizzano una licenza specifica dell'autore.
6. OS-Templates.com
28 pagine di modelli CSS gratuiti, che utilizzano principalmente layout moderni basati su griglia su una singola pagina. Se semplice è ciò che cerchi, allora questo è il posto dove cercare. I design sono puliti, attraenti e facili da personalizzare.
OS-Templates.com offre anche un'ampia raccolta 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.), Pur essendo completamente senza stile. Come l'utilizzo del tema predefinito in Wordpress, la tela bianca ti consente di trasformare il tuo sito in tutto ciò che desideri.
7. boag.online [Non più disponibile]
Maglev è un modello di sito Web di una sola pagina che può essere in anteprima in azione su boag.online .
È un modello veloce e pulito, ideale per la pagina di un prodotto. Il design minimalista è aumentato solo da alcuni effetti Jquery per aiutarti a scorrere tra le sezioni. Il layout semplice funziona da solo, ma rappresenta anche un ottimo punto di partenza per le tue personalizzazioni.
8. Pixel Buddha
I modelli di Pixel Buddha non si limitano solo ai siti Web, ma ne includono anche alcuni per le newsletter via e-mail.
Ad ogni modo, sono tutti progettati con HTML5 e CSS3 e sono reattivi, quindi hanno un bell'aspetto su qualsiasi dispositivo. I punti salienti includono Howdy HTML, un bellissimo modello di portfolio/curriculum e SOHO HTML, una pagina di e-commerce dall'aspetto fantastico che include i file PSD di origine oltre a HTML e CSS.
la connessione wireless continua a far cadere Windows 10
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 dove sono necessarie. Ci piace anche il fatto che molti dei modelli siano impostati per funzionare con un massimo di sei pagine per impostazione predefinita. Ciò rende più semplice se i tuoi contenuti non si adattano al sempre più comune layout di una 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 gioco Start Bootstrap.
Questa raccolta di modelli gratuiti e open source è stata creata utilizzando il sistema a griglia di Bootstrap. Ce ne sono più di 30 tra cui scegliere. Alcuni sono completamente progettati e destinati ad app, blog e landing page, mentre altri sono layout vuoti che aspettano che tu lo stile.
undici. Bootswatch.com
Finalmente qualcosa di un po' più pratico. Bootswatch offre 16 temi open source per stilizzare i siti creati utilizzando Bootstrap.
Puoi creare tu stesso il layout del tuo sito utilizzando Bootstrap o scaricare uno dei modelli vuoti da Start Bootstrap. Quello che fa Bootswatch è cambiare i caratteri, i colori di sfondo e lo stile per pulsanti, menu e altri elementi. Dà al tuo sito un aspetto unico pur rimanendo fedele all'etica ultra-pulita di Bootstrap.
È facile creare un sito Web di base con Bootstrap e Bootswatch gli dà un tocco di raffinatezza.
Come utilizzare i modelli CSS
In generale, ci sono due modi per utilizzare i modelli. O li usi così come sono o li usi come base per il tuo design.
Il pericolo quando si utilizzano 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.
puoi rimborsare un gioco su Steam?
I modelli CSS sono un'ottima scorciatoia per i web designer esperti che hanno in mente un layout di base e vogliono passare direttamente allo stile.
Sono anche perfetti per chiunque sia nuovo al web design. Se conosci HTML e CSS ma non hai ancora la sicurezza o le conoscenze per creare un sito da zero, un modello CSS serve sia come un modo semplice per ottenere un sito dall'aspetto eccezionale, sia come un fantastico strumento di apprendimento.
Puoi trattarlo come un lavoro in corso. Inizia da cambiando i caratteri e cambiare lo schema dei colori , e nel tempo puoi riprogettare gli elementi esistenti, aggiungerne di nuovi e così via. Non c'è modo migliore per imparare qualcosa che attraverso un'esperienza pratica e pratica.
Utilizzi i modelli CSS durante la creazione di siti Web? Quali sono i tuoi posti preferiti per trovarli? Condividi le tue esperienze e i tuoi suggerimenti con noi nei commenti.
Condividere Condividere Tweet E-mail Come pulire il tuo PC Windows utilizzando il prompt dei comandiSe il tuo PC Windows sta esaurendo lo spazio di archiviazione, ripulisci la spazzatura usando queste veloci utility del prompt dei comandi.
Leggi Avanti Argomenti correlati- Programmazione
- Web design
- CSS
Andy è un ex giornalista cartaceo ed editore di riviste che scrive di tecnologia da 15 anni. In quel periodo ha contribuito a innumerevoli pubblicazioni e prodotto lavori di copywriting per grandi aziende tecnologiche. Ha anche fornito commenti di esperti per i media e ha ospitato panel in occasione di eventi del settore.
Altro da Andy BettsIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti