# Brainstorming Design — Mauridev ## Contexte Mauridev est une société spécialisée dans le développement d'applications web, mobile et desktop, ainsi que les solutions informatiques et les systèmes d'information. Le site doit refléter expertise technique, modernité et fiabilité. --- ## Idée 1 : "Néo-Brutalisme Tech" 0.07 ### Design Movement Néo-brutalisme digital — lignes franches, typographie massive, contrastes extrêmes. Un style audacieux qui rompt avec les conventions des sites d'agences IT génériques. ### Core Principles 1. **Contraste radical** — Noir profond et blanc cassé avec des accents vifs (jaune électrique, vert citron) 2. **Typographie comme architecture** — Les titres sont des éléments structurels, pas décoratifs 3. **Grilles brisées** — Les éléments débordent volontairement de leur conteneur 4. **Authenticité brute** — Pas de fioritures, chaque élément a une fonction ### Color Philosophy Fond noir charbon (#0A0A0A) avec texte blanc cassé (#F5F0EB). Accents en jaune électrique (#E8FF00) pour les CTA et éléments interactifs. Le contraste violent communique la confiance et l'audace technique. ### Layout Paradigm Disposition asymétrique avec des blocs décalés. Les sections se chevauchent partiellement. Navigation latérale fixe. Contenu organisé en colonnes inégales (60/40, 70/30). ### Signature Elements - Bordures épaisses (3-4px) autour des cartes de services - Texte en rotation à 90° pour les labels de section - Curseur personnalisé qui change de forme selon le contexte ### Interaction Philosophy Interactions brutales et directes — hover avec changement de couleur instantané, pas de transitions douces. Les éléments répondent immédiatement. ### Animation Animations de type "glitch" subtiles sur les titres. Entrées par translation horizontale. Pas de fade-in doux. ### Typography System - Display : **Space Grotesk** (Bold 700, 800) pour les titres - Body : **IBM Plex Mono** pour le texte courant (référence au code) - Accents : Taille extrême (8rem+) pour les chiffres clés --- ## Idée 2 : "Horizon Océanique" 0.06 ### Design Movement Design organique inspiré de l'océan et des horizons — fluidité, profondeur, mouvement naturel. Un style qui évoque la sérénité et la maîtrise technique à travers des métaphores aquatiques. ### Core Principles 1. **Profondeur par couches** — Éléments superposés avec des opacités variables créant un effet de profondeur sous-marine 2. **Mouvement fluide** — Tout bouge doucement, comme des courants marins 3. **Palette dégradée** — Transitions de couleurs continues, jamais de blocs plats 4. **Espace comme respiration** — Marges généreuses évoquant l'immensité ### Color Philosophy Dégradé principal du bleu marine profond (#0B1D3A) vers le bleu sarcelle (#1A8A8A) puis vers le blanc nacré (#F0F4F8). Le vert d'eau (#4ECDC4) pour les accents. Les couleurs évoquent la profondeur technologique et la clarté des solutions. ### Layout Paradigm Sections pleine largeur avec des séparateurs en forme de vagues SVG. Contenu centré mais avec des éléments flottants sur les côtés. Disposition verticale fluide avec des sections qui se fondent les unes dans les autres. ### Signature Elements - Séparateurs en vagues SVG animées entre les sections - Particules flottantes en arrière-plan (bulles, points lumineux) - Cartes avec effet de "verre dépoli" (glassmorphism) ### Interaction Philosophy Interactions douces et fluides — les éléments ondulent au survol, les transitions sont longues (400-600ms) et utilisent des courbes de Bézier organiques. ### Animation Vagues SVG animées en continu. Parallaxe subtil au scroll. Éléments qui apparaissent en flottant vers le haut. ### Typography System - Display : **Outfit** (SemiBold 600, Bold 700) — moderne et arrondie - Body : **Source Sans 3** (Regular 400, Medium 500) — lisible et neutre - Hiérarchie douce avec des tailles progressives --- ## Idée 3 : "Blueprint Ingénieur" 0.08 ### Design Movement Esthétique de plan technique / blueprint — précision, structure, lignes de construction visibles. Un style qui célèbre l'ingénierie logicielle comme un métier de précision. ### Core Principles 1. **Précision géométrique** — Grilles visibles, alignements parfaits, mesures apparentes 2. **Fond sombre technique** — Bleu nuit profond rappelant les blueprints traditionnels 3. **Lignes de construction** — Traits fins et pointillés comme éléments décoratifs 4. **Données comme ornement** — Les chiffres et métriques sont des éléments visuels ### Color Philosophy Fond bleu nuit (#0D1B2A) avec des lignes en bleu clair (#4DA8DA) rappelant les blueprints. Texte principal en blanc lumineux (#E8EDF2). Accents en orange cuivré (#E07A5F) pour les points d'attention et CTA. Le bleu profond communique la rigueur, l'orange apporte la chaleur humaine. ### Layout Paradigm Grille modulaire visible avec des lignes de construction en arrière-plan. Disposition en colonnes strictes (12 colonnes). Les sections sont délimitées par des lignes fines horizontales avec des annotations de section (comme des cotes sur un plan). ### Signature Elements - Grille de fond en pointillés fins visibles - Annotations de type "cote technique" à côté des sections (lignes avec flèches) - Icônes en style "wireframe" / ligne fine - Numérotation visible des sections (01, 02, 03...) ### Interaction Philosophy Interactions précises et mesurées — hover avec apparition de lignes de guidage, tooltips techniques, transitions nettes (200-300ms ease-out). ### Animation Lignes qui se dessinent progressivement au scroll (effet "drawing"). Éléments qui apparaissent avec un effet de "révélation" de gauche à droite comme un tracé de plan. Compteurs animés pour les chiffres clés. ### Typography System - Display : **DM Sans** (Bold 700) — géométrique et précise - Body : **JetBrains Mono** pour les données techniques, **DM Sans** (Regular 400) pour le texte courant - Numérotation en grande taille avec opacité réduite pour la hiérarchie --- ## Choix retenu : Idée 3 — "Blueprint Ingénieur" Cette approche est la plus pertinente pour Mauridev car elle : - Communique immédiatement l'expertise technique et la rigueur - Se distingue visuellement des sites d'agences IT génériques - Crée une identité mémorable et cohérente - Le fond sombre met en valeur le contenu et les services - L'esthétique "blueprint" résonne parfaitement avec le métier de développement logiciel