Home-theater-designers
La conception Web est plus accessible que jamais, mais il faut encore beaucoup de travail - et beaucoup de compétences - pour produire des résultats d'aspect professionnel.
Heureusement, vous n'avez pas besoin de recommencer à zéro à chaque fois. Il existe des milliers de modèles CSS gratuits disponibles en ligne, tous embrassant les tendances et technologies de conception modernes. Vous pouvez les utiliser dans leur forme originale ou les personnaliser pour les personnaliser.
Dans ce guide, nous examinerons de plus près les modèles CSS et où les trouver.
Qu'est-ce qu'un modèle CSS ?
Un modèle CSS ne contient pas seulement du CSS : il vous donne tout ce dont vous avez besoin pour créer un site Web entièrement fonctionnel. Lorsque vous en téléchargez un, vous obtenez généralement un dossier contenant les éléments suivants :
- Fichiers HTML -- Vous obtiendrez un fichier HTML pour chaque page du site Web. Il contiendra des exemples de texte et d'images que vous devrez remplacer par votre propre contenu. Vous devrez également être en mesure d'ajuster les métadonnées, relatives à des éléments tels que la description du site.
- fichier CSS -- Vous obtenez généralement un fichier CSS principal contenant tout le style du site, ainsi que tous les extras comme une feuille de style de réinitialisation ou un pour les polices Web.
- Fichier Javascript -- Si le site contient des fonctions Javascript, elles devraient idéalement être incluses dans leur propre fichier séparé, plutôt qu'incorporées dans les documents HTML.
- Images, polices et icônes -- Toutes les images utilisées dans le modèle doivent également être incluses. Vous souhaiterez peut-être conserver des éléments tels que des icônes et des arrière-plans, mais vous devrez remplacer les autres images d'espace réservé par les vôtres. Certaines polices personnalisées peuvent également être incluses.
Contrairement à la plupart des autres types de modèles que vous rencontrerez, que ce soit Wordpress, Excel ou Modèles InDesign -- Les modèles CSS nécessitent une certaine quantité de connaissances techniques.
Il n'y a pas d'interface conviviale pour les modifier, vous devrez donc au moins savoir comment vous y retrouver dans un document HTML juste pour ajouter votre propre contenu. Pour faire vos propres personnalisations, vous aurez besoin d'une bonne connaissance de CSS .
pouvez-vous utiliser votre ordinateur portable comme moniteur
Que rechercher dans un modèle CSS
Il y a tellement de modèles CSS gratuits parmi lesquels choisir. Alors comment savoir ce qui vous convient ? Voici quelques éléments à surveiller :
- Concevoir -- De toute évidence, vous voulez un site qui soit joli et reflète l'image que vous souhaitez présenter. Mais déterminez également si le modèle convient à vos besoins actuels et futurs. Beaucoup sont destinés aux sites Web d'une page ; certains sont conçus pour plusieurs pages. Si vous avez besoin de ce dernier, demandez-vous si vous ne feriez pas mieux d'utiliser un CMS comme Wordpress à la place.
- Optimisé pour les mobiles -- L'utilisation du Web mobile est désormais plus élevée que celle du bureau, il est donc essentiel que votre site fonctionne correctement sur les smartphones. Tout modèle CSS décent doit utiliser un design réactif afin que le site fonctionne parfaitement sur n'importe quel écran de taille. Si votre choix ne le fait pas, passez à celui qui le fait.
- Bien écrit -- Téléchargez le modèle et examinez le code avant de vous engager à l'utiliser. Il doit être propre, bien structuré et facile à modifier. Il doit également être sensible au référencement, avec une utilisation correcte des balises de titre et de titre.
- Licence -- Assurez-vous de vérifier la licence du modèle CSS que vous avez choisi. Beaucoup sont disponibles sous licence Creative Commons , mais différentes versions de cette licence déterminent si vous pouvez modifier le modèle, si vous pouvez l'utiliser commercialement et si vous devez créditer le concepteur d'origine.
- Modules complémentaires -- Certains développeurs de modèles CSS proposent leur travail sur une base « freemium ». Vous obtenez le modèle gratuitement, mais vous avez la possibilité de payer pour des personnalisations supplémentaires afin de le rendre unique à votre site.
Avec tout cela expliqué, examinons les meilleurs endroits pour trouver des modèles CSS gratuits.
1. Templated.co
Cette superbe collection de plus de 800 modèles CSS contient des styles pour chaque catégorie de site Web. Ils sont tous créés spécialement pour le site, vous ne devriez donc pas les voir apparaître ailleurs.
Tous les modèles sont réactifs et construits avec HTML5. Ils sont petits et légers, avec des fonctionnalités Javascript supplémentaires, comme une visionneuse vidéo ou des effets de défilement, uniquement utilisés lorsqu'ils ajoutent une valeur réelle à l'expérience.
2. Styleshout.com
Styleshout propose une large gamme de modèles gratuits et premium, les premiers étant publiés sous licence Creative Commons.
Les modèles gratuits couvrent un large éventail de catégories, des sites Web complets aux pages à venir, et même la page d'erreur 404 souvent négligée. Vous pouvez les personnaliser vous-même et les adapter au style de votre site existant, ou vous pouvez payer pour que Styleshout le fasse pour vous.
3. HTML5Up.net
Cette collection de modèles super élégante est également très populaire. La plupart ont été téléchargés des centaines de milliers de fois, et il est facile de comprendre pourquoi.
Toutes les catégories habituelles de sites sont prises en charge, comme le blog et la page de produit, et il existe des designs particulièrement agréables pour les photographes pour montrer leur travail. Les modèles de base de style grille sont extrêmement personnalisables, tandis que les plus flashy ont tendance à utiliser assez fortement Javascript et peuvent donc être moins adaptés à vos réglages.
Quatre. Freebiesbug.com
Ce que Freebiesbug manque en quantité, il le compense largement en qualité. Un site où les jeunes développeurs présentent leurs compétences, il comprend de nombreux designs haut de gamme et premium.
L'impressionnante collection de modèles gratuits du site est parfaite pour les agences, les photographes, les développeurs d'applications et d'autres créatifs. Emballé avec des effets et des animations Javascript et CSS, vous pouvez personnaliser les sites, bien qu'ils soient souvent si agréables que vous ne le voudriez peut-être pas.
De plus, Freebiesbug.com comprend toutes sortes de ressources gratuites pour les concepteurs de sites Web, notamment des polices, des photos, des croquis Illustrator et des fichiers PSD, etc.
5. Free-CSS.com
Free-CSS.com est un site Web sans fioritures proposant – au moment de la rédaction de cet article – quelque 2503 modèles gratuits, ainsi que de nombreux modèles premium, au cas où vous ne trouveriez toujours pas ce que vous cherchez.
Avec autant de choix, il peut être un peu difficile de choisir le design parfait. La qualité est généralement bonne, bien que l'existence de 10 ans du site signifie qu'il héberge toujours des modèles écrits en XHTML. Vous voudrez les éviter. L'autre chose est de vous assurer de vérifier la licence du modèle que vous avez choisi. Ils sont tous gratuits, mais certains sont du domaine public, certains Creative Commons et certains utilisent une licence spécifique à l'auteur.
6. OS-Templates.com
28 pages de modèles CSS gratuits, utilisant principalement des mises en page modernes basées sur une grille sur une seule page. Si simple est ce que vous recherchez, alors c'est l'endroit où chercher. Les designs sont propres, attrayants et faciles à personnaliser.
OS-Templates.com propose également une large collection de « modèles de base ». Ceux-ci vous donnent la structure de base d'un site Web dans divers schémas de mise en page populaires (deux colonnes, trois colonnes, etc.), tout en étant complètement sans style. Comme en utilisant le thème par défaut dans Wordpress, la toile vierge vous permet de transformer votre site en tout ce que vous voulez.
7. boag.online [N'est plus disponible]
Maglev est un modèle de site Web d'une seule page qui peut être aperçu en action sur boag.online .
C'est un modèle rapide et propre, idéal pour une page de produit. Le design minimaliste n'est augmenté que de quelques effets Jquery pour vous aider à faire défiler les sections. La mise en page simple fonctionne en soi, mais elle constitue également un excellent point de départ pour vos propres personnalisations.
8. Bouddha pixelisé
Les modèles de Pixel Buddha ne se limitent pas aux sites Web, ils en incluent également pour les newsletters par e-mail.
Quoi qu'il en soit, ils sont tous conçus avec HTML5 et CSS3 et sont réactifs, ils ont donc fière allure sur n'importe quel appareil. Les points forts incluent Howdy HTML, un magnifique modèle de portfolio/CV, et SOHO HTML, une page de commerce électronique impressionnante qui inclut les fichiers PSD source en plus du HTML et du CSS.
comment voir l'activité entre deux amis sur facebook
9. Templatemo.com
Près de 500 modèles gratuits sont disponibles sur Templatemo. Certains des meilleurs sont ceux qui se libèrent du système de grille de style Bootstrap pour essayer quelque chose de différent.
La plupart des modèles sont simples et épurés, bien que des fonctionnalités telles que les lightbox et les carrousels de contenu soient incluses là où elles sont nécessaires. Nous aimons également le fait que plusieurs des modèles sont configurés pour fonctionner avec jusqu'à six pages par défaut. Cela facilite les choses si votre contenu ne correspond pas à la mise en page d'une page de plus en plus courante.
dix. Startbootstrap.com
Bootstrap est un framework frontal incroyablement populaire qui vous permet de créer des sites Web de haute qualité en un rien de temps. Cependant, cela prend un peu de temps à apprendre, c'est là qu'intervient Start Bootstrap.
Cette collection de modèles open source gratuits est tous construit à l'aide du système de grille de Bootstrap. Il y en a plus de 30 à choisir. Certains sont entièrement conçus et destinés aux applications, aux blogs et aux pages de destination, tandis que d'autres sont des mises en page vierges qui vous attendent.
Onze. Bootswatch.com
Enfin, quelque chose d'un peu plus pratique. Bootswatch propose 16 thèmes open source pour styliser les sites construits à l'aide de Bootstrap.
Vous pouvez soit créer vous-même la mise en page de votre site à l'aide de Bootstrap, soit télécharger l'un des modèles vierges à partir de Start Bootstrap. Bootswatch modifie les polices, les couleurs d'arrière-plan et le style des boutons, des menus et d'autres éléments. Il donne à votre site un aspect unique tout en restant fidèle à la philosophie ultra-propre de Bootstrap.
Il est facile de créer un site Web de base avec Bootstrap, et Bootswatch lui donne un aspect instantané.
Comment utiliser les modèles CSS
D'une manière générale, il existe deux façons d'utiliser les modèles. Soit vous les utilisez tels quels, soit vous les utilisez comme base pour votre propre design.
Le danger lorsque vous utilisez des modèles est que vous vous retrouvez avec un site Web identique à celui de quelqu'un d'autre. Choisissez un modèle populaire et il pourrait y avoir littéralement des dizaines de milliers de sites identiques. C'est le principal argument en faveur de leur personnalisation.
comment rendre votre twitter bleu
Les modèles CSS sont un excellent raccourci pour les concepteurs de sites Web expérimentés qui ont en tête une mise en page de base et qui souhaitent se lancer directement dans la mise en forme.
Ils sont également parfaits pour tous ceux qui découvrent la conception de sites Web. Si vous connaissez le HTML et le CSS, mais que vous n'avez pas encore la confiance ou les connaissances nécessaires pour créer un site à partir de zéro, un modèle CSS est à la fois un moyen facile d'obtenir un site magnifique et un outil d'apprentissage génial.
Vous pouvez le traiter comme un travail en cours. Commencez par changer les polices et changer la palette de couleurs , et au fil du temps, vous pouvez reconcevoir des éléments existants, en ajouter de nouveaux, etc. Il n'y a pas de meilleure façon d'apprendre quoi que ce soit que par une expérience pratique et pratique.
Utilisez-vous des modèles CSS lors de la création de sites Web ? Quels sont vos endroits préférés pour les trouver ? Partagez vos expériences et astuces avec nous dans les commentaires.
Partager Partager Tweeter E-mail Comment nettoyer votre PC Windows à l'aide de l'invite de commandeSi votre PC Windows manque d'espace de stockage, nettoyez les fichiers indésirables à l'aide de ces utilitaires d'invite de commande rapides.
Lire la suite Rubriques connexes- La programmation
- Création de sites web
- CSS
Andy est un ancien journaliste de presse écrite et rédacteur en chef de magazine qui écrit sur la technologie depuis 15 ans. Au cours de cette période, il a contribué à d'innombrables publications et produit des travaux de rédaction pour de grandes entreprises technologiques. Il a également fourni des commentaires d'expert aux médias et animé des panels lors d'événements de l'industrie.
Plus d'Andy BettsAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner