Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukpromoteurDéveloppement d'outils d'IA pour les entreprises. Haute qualité. Prix abordables.Écrire sur Telegram
Creative Giants — un aperçu d'un site dans ce style

Creative Giants

Affiche éditoriale grand format sur papier crème

Creative Giants ressemble à une double page de livre d'art grand format, rendue par le code: une toile chaude et crémeuse, des marges fines et une typographie si imposante qu'elle évoque davantage une affiche qu'un titre. L'ensemble du système repose sur l'espace négatif et une taille unique et légère (300): les titres sont à peine audibles entre 64 et 84 px, au lieu d'être mis en valeur par le gras, et l'espacement des lettres diminue fortement (-0,04 em) à mesure que la taille de la police augmente, donnant aux mots un aspect ciselé plutôt que décollé. La palette de couleurs est répartie par petites touches saturées: violet vif, turquoise profond, bleu clair, rose fuchsia, menthe et bleu marine apparaissent en surface ou en accents, plutôt qu'en fond. Les éléments interactifs sont des formes noires sur fond crème aux rayons parfaitement arrondis (1440 px), tandis que les éléments chromés sont presque invisibles: un logo rond et le bouton « Menu» flottent dans l'espace blanc. Le concept visuel s'inspire d'une planche-contact de studio de production: un titre immense, une photo pleine largeur et une ligne de texte discrète. Une page sur deux devrait adopter le même style laconique.

Mise en page plein écran: aucun conteneur de largeur maximale n’est défini; le contenu occupe toute la largeur de la page avec des marges égales à gauche et à droite (16 à 32 px sur mobile, plus de 32 px sur ordinateur). Le titre principal est un unique et grand titre (« GÉANTS DE LA CRÉATION» à 84 px) occupant environ 40 % de la fenêtre, immédiatement suivi d’une photo plein écran avec une balise méta dans le coin inférieur gauche et un titre superposé. Le rythme des sections est monolithique: chaque nouvelle section commence par un court texte en majuscules et une explication, séparés par un espace blanc de 48 à 64 px. Il n’y a pas d’alternance de bandes claires et foncées, à l’exception d’une carte d’accentuation bleu marine inversée. Le contenu est aligné à gauche; il n’y a pas de blocs centrés, à l’exception du titre principal. La section Actualités/Études de cas utilise une grille de cartes à trois colonnes avec un bloc de flèche flottant à droite. La navigation s’effectue via un seul bandeau supérieur, sans barre latérale ni éléments ancrés. La mise en page générale est aérée et cohérente avec le style éditorial: chaque section respire et l’espace blanc constitue l’élément structurel principal.

La photographie éditoriale domine le design: les images occupent toute la largeur de la page, avec des angles nets, sans chevauchement ni flou. Le style se veut documentaire et atmosphérique – mains ridées, installations publiques et portraits spontanés – sans jamais recourir à la photographie de produits mise en scène. Les images sont toujours présentées en grand format (pleine largeur ou occupant toute la carte), l’élément central du design étant la photographie et non l’interface utilisateur. On ne trouve ni illustrations, ni modèles 3D, ni maquettes de produits. L’iconographie est minimaliste: un petit logo circulaire, des chevrons en contour sur les commandes du carrousel et des icônes d’interface utilisateur légères avec un contour de 1 px. La densité d’images est déterminée par l’image elle-même, et le texte sert de couche d’annotation discrète, placée au-dessus ou en dessous de la photographie.

Palette

Marque

  • Magenta Bloom #8a0467 — Le rose est utilisé comme couleur d'accent secondaire pour les détails décoratifs et pour mettre en évidence les requêtes de recherche moins fréquentes. Il ne doit pas être utilisé comme couleur principale pour un appel à l'action.
  • Forest Teal #03624c — Une couleur d'accent riche, idéale pour les cadres de cartes et les touches décoratives; s'associe à Magenta Bloom pour un fini bicolore.

Neutre

  • Bone White #fffef7 — La toile de la page, les surfaces en carton et le texte sur des accents foncés présentent une teinte chaude et crémeuse qui remplace le noir pur et donne à l'ensemble du système un aspect papier imprimé.
  • Ink Black #000000 — Les couleurs foncées mettent en valeur les textes et icônes neutres et créent un contraste marqué. Évitez de les utiliser comme couleur principale pour les appels à l'action.
  • Graphite #666666 — Le texte secondaire, les légendes, les métadonnées et les textes d'accompagnement sont relégués à l'arrière-plan pour laisser la place au texte principal.
  • Ash #aaaaaa — Bordures des champs de saisie, couleur des liens inactifs, séparateurs tertiaires: une couleur grise structurelle discrète qui disparaît lorsqu’elle n’est pas nécessaire.
  • Charcoal Scale #4d4c4a — Une teinte neutre moyenne pour les bordures de la liste, avec un léger renforcement du contraste sur le dégradé foncé – gris chaud plutôt que gris bleuté.
  • Powder Blue #a5c8eb — Une touche de couleur douce — fonds de carte postale, arrière-plans flous, illustrations aux tons discrets — rafraîchit un fond chaud sans créer de concurrence.

Typographie

de 12 à 84 px · 7 étapes

  • Switzer — remplacement: Inter (300 · grandes lignes 300, 400 · Un système de police unique: graisse 300 pour tous les éléments d’affichage et les titres (12–84 px), graisse 400 pour le corps du texte, les métadonnées et les commandes d’interface. L’option privilégiée est l’utilisation de la graisse 300 pour les tailles de 64 à 84 px; la plupart des systèmes utilisent une police grasse de 700 à 800 dans ces tailles. La police Switzer, aux tons clairs, conserve des traits fins, donnant l’impression d’un effet aérographe sur un fond crème. Un espacement plus serré entre les lettres à mesure que la taille augmente (-0,04 em à 84 px, -0,018 em à 14 px) préserve la lisibilité sans créer une impression de surcharge.

Intervalles et forme

ButSignification
Densitémoyenne
Étape de base8px
Rayon du bouton1440px
Rayon de la carte0px
Ombresnon - des bordures à la place des ombres
Entre les sections64px

L'IA construira votre site web dans le style Creative Giants et le remplira.

  • Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
  • Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
  • Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
  • Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.

Styles similaires

  • Studio — Un mur de galerie en mouvement. Chaque écran représente une surface d'exposition grise et silencieuse où des éléments typographiques et des œuvres créatives superposées rivalisent d'attraits.
  • Mollie — Un comptoir en cachemire, un registre sombre. Prévoyez un large espace blanc autour du texte noir pour la mise en page, puis mettez en valeur les produits avec des tons crème chauds, des bruns expresso et des photos illustrant les moyens de paiement.
  • Bajgart Office — Mur de galerie éditoriale. Utilisez un grand espace blanc où les polices à empattement discrètes et les extraits de portfolio ont plus d'impact visuel que les éléments d'interface chromés.
  • Bejamas — Pyjamas — vert citron acide à travers du verre noir. Créez des pages éditoriales apaisantes, aux tons gris clair, ponctuées de panneaux noirs captivants où des traînées de lumière verte floues sillonnent la surface.
  • Kagi — Une salle de lecture séparée. Créer un espace blanc ouvert autour d'un texte en gras couleur graphite, en utilisant de subtiles touches de violet et des surfaces aux tons pastel chauds pour rompre la tranquillité.
  • Milanote — Milanote est un studio de création dédié. Créez des pages de style galerie éditoriale à l'aide de panneaux visuels flottants: murs encadrés de noir, espace d'affichage blanc et captures d'écran qui ressemblent à de véritables objets avec une profondeur subtile.
  • Co2 — Un atlas climatique sous la lumière hivernale. Créez des pages comme un paysage documentaire aérien, où les titres à empattement, les données codées par catégorie et les images glacées mettent en valeur de larges marges blanches.
  • GitButler — Du turquoise en fin de texte. Une combinaison de titres à empattements contrastés, de grilles techniques subtiles, de surfaces graphite chaudes et d'une discrète touche de turquoise.
  • ElevenLabs — Un reportage photo aux tons crème chauds, avec des titres discrets. Un carnet de style Bauhaus: papier couleur coquille d’œuf, encre noire et une touche de violet et d’orange pour la présentation du produit.
  • monopo saigon — Une lueur liquide et irisée derrière le silence éditorial — une galerie éditoriale monochrome flottant sur une lumière en fusion
  • Awesomic — Grille éditoriale en zinc avec des signes de ponctuation orange évoquant des confettis
  • Monad — revue technique éditoriale sur parchemin chaud

Catalogue des styles par catégorie