https://www.alsacreations.fr/_nuxt/CYDaTen_.js

1import{_ as c}from"./BYBhZ3hj.js";import{p as n,c as g,d as t,a as s,b as l,g as a,w as o,F as v,o as b,_ as f}from"./B_VJXJcG.js";import{_ as h}from"./qlRXJOev.js";import{_ as q}from"./DbUMFFzn.js";import{_ as x}from"./Dcem0MdB.js";import{_}from"./CaXrynAP.js";import"./B2EBZxct.js";const y=n("/images/pages/stabulo-logotypes.avif"),C=n("/images/pages/team-design.webp"),L={class:"article"},N={class:"section section-intro","data-layout":"boxed"},z={"data-layout":"duo","data-gap":"m"},w={class:"box rounded theme-dark"},V={"data-layout":"duo","data-split":"auto-1","data-gap":"s"},E={class:"box rounded"},P={"data-layout":"duo","data-split":"auto-1","data-gap":"s"},U={"data-layout":"duo","data-gap":"m"},I={class:"box rounded"},k={"data-layout":"duo","data-split":"auto-1","data-gap":"s"},B={class:"box rounded theme-dark"},F={"data-layout":"duo","data-split":"auto-1","data-gap":"s"},R={class:"section"},S={"data-layout":"boxed"},J={__name:"identite-visuelle",setup(A){return($,e)=>{const r=c,i=f,u=h,d=q,m=x,p=_;return b(),g(v,null,[t(r,{items:[{url:"/prestations",label:"Prestations"},{url:"/prestations/identite-visuelle",label:"Identité Visuelle"}]}),s("article",L,[e[18]||(e[18]=s("h1",{class:"title-big"},"Identité Visuelle",-1)),s("section",N,[s("div",z,[s("div",w,[e[1]||(e[1]=s("h2",{class:"title-small"},"Charte Graphique",-1)),s("div",V,[t(i,{name:"solar:pallete-2-line-duotone",size:"6rem"}),e[0]||(e[0]=s("p",null," Nous concevons des chartes graphiques pensées pour le web moderne, fluides et légères. Votre identité ne subit aucune dégradation technique, quel que soit le support utilisé (print ou web). ",-1))])]),s("div",E,[e[3]||(e[3]=s("h2",{class:"title-small"},"Identité Visuelle accessible",-1)),s("div",P,[t(i,{name:"solar:diploma-verified-line-duotone",size:"6rem"}),e[2]||(e[2]=s("p",null," L'identité visuelle est le premier point de contact avec votre public. Nous portons une attention rigoureuse aux contrastes de couleurs pour que les éléments importants soient lisibles par les personnes ayant des troubles visuels (malvoyance, daltonisme, etc.). ",-1))])])]),s("div",U,[s("div",I,[e[5]||(e[5]=s("h2",{class:"title-small"},"Logotype",-1)),s("div",k,[t(i,{name:"solar:ruler-pen-line-duotone",size:"6rem"}),e[4]||(e[4]=s("p",null,[l(" Le logotype est la clé de voûte de votre identité. Son importance tient en trois points : "),s("strong",null,"identification"),l(" immédiate, "),s("strong",null,"mémorisation"),l(" et "),s("strong",null,"portabilité"),l(". Il doit résister au temps et fonctionner aussi bien sur un immense panneau publicitaire que sur l'écran d'une montre connectée. En tant qu'agence, nous nous livrons le logo dans un format vectoriel léger pour le web, garantissant une netteté absolue sur tous les écrans sans alourdir le temps de chargement du site. ")],-1))])]),s("div",B,[e[7]||(e[7]=s("h2",{class:"title-small"},"Confiance et valeur",-1)),s("div",F,[t(i,{name:"solar:medal-ribbon-star-line-duotone",size:"6rem"}),e[6]||(e[6]=s("p",null," Une marque accessible est une marque inclusive : une identité de marque facile à comprendre et à utiliser réduit naturellement les obstacles à la communication, ce qui génère plus d'engagement et de fidélité de la part de l'ensemble de vos utilisateurs. C’est le choix d'une démarche de qualité globale, qui valorise durablement votre image auprès du grand public comme des institutions. ",-1))])])])]),e[19]||(e[19]=a('<div class="section"><div data-layout="boxed"><div data-layout="duo" data-gap="l"><img class="rounded" src="'+y+'" alt="Exemples de logotypes créés par Alsacréations pour Stabulo."><div><h2 class="title-medium"><span class="accent-blue">Charte graphique</span> : votre boîte à outils visuelle </h2><p> La charte graphique est un document essentiel. C&#39;est le guide qui explique comment utiliser votre nouvelle identité pour rester cohérent. Elle permet de s&#39;assurer que votre marque est la même partout. </p><h3 class="title-small">Les piliers de la charte graphique</h3><ul><li><strong>Le logo</strong> avec ses tailles minimales et ses variantes de couleurs. </li><li><strong>Les couleurs</strong> avec les codes précis pour l&#39;impression et les écrans. </li><li><strong>Les polices</strong> avec les écritures choisies pour vos titres et textes. </li><li><strong>Les icônes</strong> avec le style des visuels et des petits pictogrammes. </li><li><strong>Les règles d’utilisation</strong> avec les tailles minimales du logo, variantes (noir et blanc, monochrome) et des exemples de bonnes/mauvaises pratiques (à faire/à éviter). </li><li><strong>Les livrables inclus</strong> avec les fichiers Figma (maquettes modifiables et collaboratives), PDF et droits d&#39;usage (vous obtenez l&#39;exclusivité totale sur votre identité visuelle). </li></ul></div></div></div></div>',1)),s("div",R,[s("div",S,[s("div",null,[e[8]||(e[8]=s("h2",{class:"title-big text-center"}," Pourquoi confier votre image de marque à Alsacréations ? ",-1)),e[9]||(e[9]=s("p",null,` Créer l'image de votre entreprise (votre logo, vos couleurs, vos police

1s d'écriture), ce n'est pas seulement faire quelque chose de "joli". C'est avant tout s'assurer que cette image fonctionne partout, sur tous les écrans, et qu'elle soit comprise par tout le monde. `,-1)),e[10]||(e[10]=s("div",{class:"section-body has-parallax rounded","data-layout":"boxed"},[s("img",{src:C,caption:"Réunion de brainstorming avec l'équipe.",alt:"",width:"1305",height:"604",loading:"lazy"})],-1)),e[11]||(e[11]=s("p",null," En confiant ce travail à des spécialistes, vous évitez les erreurs de conception invisibles à l'œil profane mais fatales pour l'expérience utilisateur, tout en vous épargnant des refontes correctives coûteuses. C'est l'assurance d'un écosystème visuel pérenne, cohérent et inclusif, qui pose les fondations d'une marque hautement crédible auprès de votre public comme des institutions. ",-1)),t(u,{who:"le",note:"présenter votre marque et ré-imaginer votre identité"})])])]),t(d,{variant:"green",title:"Une image de marque pour toutes et tous"},{"args-item-1":o(()=>[t(i,{name:"solar:accessibility-line-duotone"}),e[12]||(e[12]=l(" Design inclusif ",-1))]),"args-item-2":o(()=>[t(i,{name:"solar:diploma-verified-line-duotone"}),e[13]||(e[13]=l(" Durable ",-1))]),"args-item-3":o(()=>[t(i,{name:"solar:user-heart-rounded-line-duotone"}),e[14]||(e[14]=l(" Responsable ",-1))]),"list-item-1":o(()=>[...e[15]||(e[15]=[s("h3",{class:"title-small"},"Visible par tout le monde",-1),s("p",null," Nous veillons à ce que votre identité visuelle soit accessible à tout le monde, renforçant ainsi l'inclusivité de votre marque. ",-1)])]),"list-item-2":o(()=>[...e[16]||(e[16]=[s("h3",{class:"title-small"},"Inspire la confiance et l'engagement",-1),s("p",null," Une marque inclusive renvoie une image moderne, humaine et responsable. ",-1)])]),"list-item-3":o(()=>[...e[17]||(e[17]=[s("h3",{class:"title-small"},"Elle dure dans le temps",-1),s("p",null," Les chartes graphiques accessibles s'appuient sur des règles de design épurées, logiques et structurées. Elles vont à l'essentiel et évitent les effets de mode éphémères. ",-1)])]),_:1}),e[20]||(e[20]=a('<section class="section" data-layout="boxed"><div data-layout="boxed" data-boxed="small"><h2 class="title-medium title-shrink"> Les <span class="accent-green">différentes étapes</span> de la phase d&#39;identité visuelle </h2></div><ol class="list-bullets"><li class="list-bullets-item"><h3 class="list-title title-small"> Phase d&#39;analyse (audit ou découverte) </h3><p class="list-desc"> Pour une refonte, nous ne partons pas de zéro. Nous analysons ce qui fait la force de votre marque actuelle pour la moderniser et la rendre plus performante. Notre travail de recherche s&#39;articule. Nous étudions l&#39;évolution visuelle de votre secteur pour nous assurer que votre nouvelle identité de marque vous démarque tout en restant crédible. </p></li><li class="list-bullets-item"><h3 class="list-title title-small">Brief créatif d&#39;évolution</h3><p class="list-desc"> Nous définissons ensemble le curseur de la refonte. Souhaitez-vous un rafraîchissement léger (optimisation) ou une transformation profonde (rupture) ? Nous créons par la suite une planche de tendance qui présente des pistes pour moderniser vos typographies, ajuster vos contrastes (accessibilité) et épurer vos formes. </p></li><li class="list-bullets-item"><h3 class="list-title title-small"> Premier atelier en collaboration </h3><p class="list-desc"> Une fois nos recherches terminées, nous organisons un premier atelier (en visio ou dans vos bureaux). L’objectif est de présenter et partager la planche de tendance (moodboard). Cet atelier permet de valider ensemble la &quot;direction de voyage&quot;. C’est grâce aux conclusions de cet échange que nous lançons la création concrète des pistes de logos. </p></li><li class="list-bullets-item"><h3 class="list-title title-small"> Création de la charte graphique sur Figma </h3><p class="list-desc"> Nous concevons 2 à 3 axes créatifs distincts. Chaque proposition est étudiée pour être lisible, accessible, et unique. Nous organisons un deuxième atelier pour vous présenter les pistes retenues. Nous vous expliquons la réflexion derrière chaque logo (le choix des formes, la symbolique, l&#39;équilibre). </p></li><li class="list-bullets-item"><h3 class="list-title title-small"> Votre écosystème visuel (<span lang="en">Print</span> et Web.) </h3><p class="list-desc"> Une fois le logo validé, nous construisons son &quot;mode d&#39;emploi&quot;. Ce document de référence permet à toute personne (collaborateur, imprimeur, développeur) d&#39;utiliser votre identité sans l&#39;abîmer. </p></li></ol></section>',1)),t(m,{items:[{title:"Château de Mutzig",href:"/realisations/mutzig",illust:"mutzig/mutzig-chateau.webp",logo:"mutzig.svg",tags:[{name:"identité visuelle",lang:"fr"},{name:"signalétique",lang:"fr"},{name:"expérience utilisateur",lang:"fr"}]},{title:"Ermees",href:"/realisations/ermees",illust:"ermees/illust-ermees-header.avif",logo:"ermees.svg",tags:[{name:"design",lang:"en"},{name:"wordpress",lang:"fr"}]},{title:"Stabulo",href:"/realisations/stabulo",illust:"stabulo/illust-stabulo-header.avif",logo:"stabulo.svg",tags:[{name:"design",lang:"en"},{name:"application",lang:"fr"},{name:"nuxt",lang:"fr"},{name:"api",lang:"fr"}]},{title:"Hager",logo:"hager.svg"}]})]),s("aside",null,[t(p)])],64)}}};export{J as default};