Share
Au cours des dernières années, le design plat est devenu de plus en plus populaire et continue de dominer le monde du web et du graphisme.
Qu'est-ce que le design plat? Le design plat est essentiellement axé sur la convivialité et le manque d'ombres, de biseaux, de dégradés et d'autres éléments esthétiques qui détournent l'attention de ce qui compte vraiment: votre contenu. Il est généralement caractérisé par une typographie large et audacieuse, des icônes de ligne et des arrière-plans de couleur unie utilisant des couleurs vives..
Le design plat a été rendu populaire pour la première fois par Microsoft lors de la refonte complète de son interface utilisateur sous Windows 8. Rapidement adopté par Google et Apple, il est progressivement devenu courant et est désormais utilisé dans de nombreux modèles de conception Web..
Dans ce didacticiel, vous allez apprendre à créer rapidement un site Web plat à l’aide d’un thème WordPress de style plat. Mais tout d’abord, quelques exemples remarquables de conception de sites plats:
Avant de plonger plus profondément dans ce didacticiel, voici cinq exemples de sites Web plats pour vous inspirer pour votre prochain projet:
Blocklevel est une agence de design numérique néerlandaise. Leur site Web présente un design plat avec un arrière-plan sombre et des couleurs vives sur toute la page d'accueil. Le site a également beaucoup d'espace blanc autour des éléments, donnant à l'ensemble du site un aspect épuré. De ce fait, il est facile de naviguer sur le site et les visiteurs sont instantanément attirés par les différentes sections de la page d'accueil..
Fabriqué par FibbMade by Fibb est un autre exemple d'agence utilisant un design plat. Vous remarquerez immédiatement la couleur jaune vif, un menu de navigation qui a été mis de côté pour ne pas encombrer le reste de la page et une typographie audacieuse facile à lire..
Aire de jeu inc.Playground Inc. a opté pour un arrière-plan rouge vif associé à une typographie blanche dans l'en-tête et à un arrière-plan blanc avec une police noire et épaisse. Le site utilise également une conception de site Web de style plat avec des icônes animées qui attirent parfaitement l’attention..
GeckoboardLa spécialité de Geckoboard est la création de tableaux de bord personnalisés permettant aux propriétaires d'entreprise et aux chefs d'équipe de suivre des métriques importantes. Leur site Web utilise un fond gris foncé avec des touches de typographie verte et élégante vives dans un style design plat.
TripIAgentL’agence de voyage TriplAgent a opté pour un design plat avec une couleur pourpre et des photographies magnifiques pour illustrer les différents guides qu’ils ont sur leur site. Le menu principal a été repoussé sur le côté et une typographie blanche, associée à des boutons fantômes, rend les appels à l'action faciles à remarquer..
Si vous souhaitez créer un site Web moderne pour votre entreprise, votre portefeuille ou votre blog, opter pour un thème plat est un excellent choix. Dans le post d'aujourd'hui, nous allons vous montrer comment utiliser l'un de nos modèles de site Web WordPress pour créer un site Web magnifique qui ne manquera pas d'attirer l'attention de vos visiteurs..
J'utiliserai le thème Kirion, qui est un modèle de site Web WordPress polyvalent avec un design plat et élégant. Grâce à sa polyvalence, il peut être utilisé à la fois pour les sites d’entreprise et les sites de portefeuille. Il propose plusieurs démos prédéfinies, un créateur de pages convivial et de nombreuses options de personnalisation pour en faire le vôtre..
Kirion plat modèle de conception de site Web WordPress.Avant de commencer à concevoir votre site Web plat, il est nécessaire de choisir un nom de domaine et de l’acheter, ainsi que de vous procurer un plan d’hébergement pro qui hébergera tous les fichiers de votre site Web..
C'est aussi une bonne idée de choisir un thème WordPress et de préparer le texte et les images qui iront sur votre site Web. Cela facilitera la copie et le collage de votre contenu, plutôt que de l'écrire à partir de zéro lors de la création de votre site..
Choisir le bon nom de domaine n'est certainement pas facile. Cependant, vous devez garder à l’esprit quelques points qui vous aideront à préciser vos choix..
Pensez au but de votre site. Est-ce un site commercial pour une entreprise déjà établie? Créez-vous un portefeuille personnel? Peut-être que vous voulez commencer votre propre blog?
Pour les sites d'entreprise, il est judicieux de conserver le nom de votre entreprise, tandis que les propriétaires de portefeuilles personnels peuvent généralement utiliser leur propre nom. Si vous êtes un blogueur, examinez les sujets de votre blog et choisissez un nom en rapport avec votre sujet. Cela permettra aux lecteurs de savoir facilement à quoi ils peuvent s’attendre en termes de contenu..
Dans la mesure du possible, essayez d’utiliser une extension .COM et n’oubliez pas de garder le nom facile à épeler et à prononcer.
Vous devrez choisir une société d'hébergement pour pouvoir installer WordPress sur leur serveur et rendre votre site accessible aux visiteurs. Il existe de nombreuses sociétés d'hébergement et WordPress a même des recommandations pour des hôtes réputés.
La prochaine étape consiste à choisir et acheter un thème pour votre site. Comme mentionné précédemment, il existe de nombreux thèmes WordPress plats et le meilleur atout pour choisir un thème WP premium est son soutien garanti par l'auteur. Vous pouvez également être sûr que le thème sera mis à jour régulièrement afin de ne pas vous retrouver avec un thème de site Web obsolète..
La dernière étape de préparation consiste à rédiger le contenu et à rassembler toutes les images et tous les éléments visuels tels que votre logo, votre favicon, des images d'arrière-plan ou des motifs, et de les rendre facilement accessibles.
Maintenant que votre nom de domaine, votre plan d'hébergement, un thème professionnel et tout votre contenu sont prêts, il est temps de commencer à concevoir votre site Web. Vous devez installer WordPress, le thème, les plug-ins requis, configurer vos pages et personnaliser votre site. Commençons!
Lorsque vous achetez vos packs d'hébergement, le fournisseur d'hébergement vous enverra un email de bienvenue contenant les informations sur votre compte. Vous aurez besoin du nom d'utilisateur et du mot de passe qu'ils vous ont fournis pour pouvoir vous connecter au tableau de bord de votre compte. Une fois connecté, accédez à la section Site Web ou Scripts et recherchez WordPress. Sélectionnez-le et suivez les étapes pour installer WordPress sur votre site..
Dans la plupart des cas, vous devez entrer le titre et la description du site, définir le nom d'utilisateur et le mot de passe souhaités, ainsi que saisir votre adresse électronique. Après avoir rempli toutes les informations, cliquez sur le bouton Installer bouton.
Le processus d'installation prend généralement quelques minutes. Après cela, vous verrez un message indiquant que WordPress a été installé. Pour vous connecter à votre tableau de bord, rendez-vous à l'adresse www.votrenom.com/wp-admin et entrez le nom d'utilisateur et le mot de passe que vous avez créés lors de l'installation..
Maintenant que vous êtes connecté à votre tableau de bord, vous devez installer le thème plat WordPress que vous avez acheté. Aller à Apparence> Thèmes> Ajouter un nouveau. Puis clique Télécharger un thème.
Après cela, recherchez le dossier compressé contenant les fichiers du thème WP et téléchargez-le. Une fois l’installation terminée, cliquez sur Activer.
Si vous utilisez le thème Kirion comme dans ce didacticiel, vous devrez installer le thème parent LayersWP, qui peut être téléchargé gratuitement et vous n'avez pas besoin de l'activer. Téléchargez simplement LayersWP, puis téléchargez le thème Kirion WordPress et activez-le..
Votre prochaine étape consiste à installer les plugins nécessaires. Vous remarquerez une notification dans votre tableau de bord vous indiquant quels plug-ins sont nécessaires, ainsi qu'un lien vous conduisant directement à l'écran d'installation.
Installer les plugins WordPress requis.Sélectionnez tous les plugins et choisissez Installer dans le menu déroulant. Une fois les plugins installés, allez à Plugins> Tous les plugins et sélectionnez Plugins inactifs Alors choisi Activer du menu déroulant.
Maintenant que le design du thème WordPress et les plugins ont été installés et activés, vous pouvez commencer à configurer les pages de votre site Web et à personnaliser les couleurs, les polices de caractères, etc. Dans la plupart des cas, le meilleur moyen d'accélérer le temps d'installation de votre thème et de faciliter l'édition du contenu est d'importer le contenu de la démonstration..
Si vous souhaitez utiliser le contenu de la démonstration, vous devez accéder à votre tableau de bord et rechercher le sous-menu appelé Outils> Importer. Là, trouver Importateur WordPress, installez-le, puis cliquez sur Run Importer. Habituellement, votre dossier de thème aura un sous-dossier appelé Import de démo ou Échantillon de données. Utilisez les fichiers XML de l’un de ces dossiers pour importer tous les articles, pages, mises en page et images..
Sinon, si vous utilisez le thème Kirion, allez à Calques> Ajouter une nouvelle page. Comme vous pouvez le voir sur la capture d'écran ci-dessous, Kirion inclut plusieurs modèles de page que vous pouvez utiliser pour créer votre site Web. J'ai choisi le Kirion Home Layout One pour la page d'accueil.
Entrez le nom de la page puis cliquez sur procéder à personnaliserr. Votre page sera instantanément créée et vous serez redirigé vers le Personnaliseur écran.
Lorsque le Customizer est chargé, vous pouvez voir toutes les options disponibles. Vous pouvez éditer la mise en page en cliquant sur le bouton Modifier la mise en page option. L'éditeur est plutôt simple et facile à utiliser. Tout ce que vous avez à faire est de sélectionner l'élément souhaité et de remplacer le contenu par le vôtre. Vous pouvez également modifier l’arrière-plan, télécharger vos propres images, remplacer des images de curseur, etc..
Mise en page.Pour créer et éditer des pages supplémentaires, allez à Calques> Ajouter une nouvelle page et choisissez la mise en page avec laquelle vous souhaitez travailler.
Ajout de nouvelles pages de site Web à Kirion.Si vous souhaitez modifier les styles, sélectionnez Paramètres du site. Ici, vous pouvez modifier les couleurs, les polices, télécharger votre propre logo, etc..
Personnaliser les couleurs de votre site Web plat.Enfin, vous devrez créer un menu pour votre site. dans le Personnaliseur, cliquer sur Menus> Menu principal. Tout d'abord, choisissez un emplacement pour le menu. j'ai choisi entête menu. Ensuite, cliquez sur Ajouter des articles. Ajoutez toutes les pages que vous avez créées, puis enregistrez le menu..
Si vous souhaitez en savoir plus sur le design plat et appliquer ses principes à votre site, nous avons rassemblé quelques tutoriels et cours pour vous aider à démarrer:
Ce tutoriel présente les meilleurs conseils pour créer des graphiques qui fonctionneront bien avec n'importe quel site Web de type plat. Vous en apprendrez un peu plus sur l'histoire du design plat, sur la création d'icônes simples mais percutantes, sur l'utilisation des couleurs, etc..
Ce cours est une visite en profondeur de l’esthétique plate et de la manière de l’atteindre dans vos propres conceptions. Vous apprendrez à configurer votre fichier Photoshop, à créer une mise en page pour un site Web à plat et à concevoir tous les éléments qui seront utilisés, tels que des icônes, des formulaires, des menus, etc..
Si vous aimez travailler avec Affinity Designer, vous allez adorer ce cours. Vous apprendrez tout sur le processus de création d'icônes vectorielles plates; trucs et astuces utiles pour travailler avec des formes géométriques de base, les modifier et utiliser diverses opérations pour combiner les formes. Le cours explique également comment aligner et organiser les objets et les fonctions principales du programme..
Essayez ce cours si vous envisagez de créer des éléments de conception d'interface utilisateur. Le cours explique comment créer des menus, des boutons, des onglets, des lecteurs vidéo, des sélecteurs de date et d'autres éléments d'interface utilisateur à l'aide d'un style de conception plate..
Ce cours couvre à la fois Adobe Photoshop et Adobe Illustrator, deux programmes puissants considérés comme la norme de l'industrie en matière de design. Au cours, vous apprendrez à créer des icônes plates, à les exporter et à monétiser vos efforts créatifs..
Créer un site Web à plat n'a jamais été aussi simple grâce à WordPress et aux superbes thèmes plats de qualité supérieure. Commencez à travailler sur votre site Web plat aujourd'hui en parcourant notre collection de thèmes WordPress plats..
Accentsconagua