En résumé, mon site doit être simple dans la forme afin de laisser s'exprimer l'originalité et le décalage de certains de mes projets.

Transcription

1

2 - vitalité bonne humeur : charte graphique aux couleurs vives! - franchise rigueur : graphisme du site épuré et couleurs primaires! - originalité curiosité : mise en avant du processus de conception: mise à jour de nouveaux projets, de pistes créatives et d'esquisses conceptuelles. - ouverture d'esprit / dialogue: présence et échange sur les réseaux sociaux En résumé, mon site doit être simple dans la forme afin de laisser s'exprimer l'originalité et le décalage de certains de mes projets.

3 les objectifs! - présenter mes projets et mes compétences en matière de design (graphisme, photographie, concept, packaging...), - me faire connaître auprès de futurs prospects et auprès des professionnels dans le domaine de la communication et de la publicité : développer mon réseau de contacts.

4 un nom de Le site, sous ce nom de domaine, me permettra de me faire reconnaître en tant qu'identité créative à part entière. C'est seulement une fois que j'aurai développé assez d'expériences et obtenu assez de contacts que je pourrai envisager des partenariats avec d'autres créatifs et techniciens et monter ainsi ma propre agence. Le nom du site changera peut-être alors à ce moment-là.

5 les Les futurs prospects: Il peut s'agir de commerces, de collectivités locales, de PME et de particuliers qui souhaitent réaliser des supports de communication print ou web (à l'heure actuelle mes compétences en web design se résument aux CMS et aux sites vitrines simples). Pour atteindre ce public, il faudra veiller à mettre en avant des projets de graphisme, de photographie, de packaging, de web design. Il faudra bien-sûr que les prospects aient un moyen efficace et simple de me contacter. Demande de devis accessible facilement. Les professionnels de la communication et de la publicité: Les projets présentés devront avoir une approche professionnelle et soignée (bonne résolution des photos, accessibilité du site sur smartphone...) et montrer un processus de création original (des idées osées et décalées). Des projets ou même de simples idées de créations devront remplir le site de façons hebdomadaire (une photographie prise sur le vif dans Bordeaux, une idée de concept d'objet...) ou quotidienne. Cette démarche me permettra également d'exposer mon approche artistique et mes réalisations sur les réseaux sociaux.

6 principales L'utilisateur doit pouvoir: - consulter mes projets et apprécier mes compétences techniques et créatives - me contacter aussi bien pour une demande de devis que pour un partenariat - faire connaître mes projets ou mes idées ( partager vers son réseau social) Les rubriques principales seraient donc : - MAG / Projets (déjà réalisés) - MAG / Agence (identité + contact ) - MAG / Le mag (les news )

7 Pour obtenir une ergonomie "facile", il me semble qu'il peut être intéressant d'utiliser des codes couleurs simples et tranchés, comme ceux que l'on utilise dans des communications rapides (pictogrammes, etc) ou simplifiées (par exemple auprès des enfants). Mon image de communication, comme je l'ai défini précédemment, se veut jeune, rigoureuse et enjouée. Les couleurs primaires réprésentent plusieurs avantages: elles sont stables et efficaces (on ne se situe pas dans des camaieux de couleurs!), elles ne se démodent pas (elles reviennent encore à la mode cet été!) et elles sont vives donc dynamiques. 3 couleurs pour 3 grandes rubriques!

8

9 m a g

10 # F9E81C # E32126 # 269BD2 # A5A5A5

11 BEBA NEUE est une typographie libre de droits et non courante sous les navigateurs web. C'est pourquoi elle est uniquement utilisée pour le logotype. Le logotype sera une image au format.png. Courrier new est une typographie libre de droits et reconnue par les navigateurs web. Elle sera utilisée pour les intitulés des rubriques et des projets. Tahoma est une typographie libre de droits et reconnue par tous les navigateurs web. Elle est aussi couramment utilisée et très lisible par les internautes.

12 Page type pour les rubriques Le principe de navigation est identique aux autres rubriques. Au survol des images, le nom apparaît et lorsque l'internaute clique sur l'image, le contenu du projet apparaît. tous droits réservés MAG Design

13 Page d'accueil Partie de gauche: La partie de gauche présente le menu du site. 3 couleurs pour 3 grandes rubriques qui reprennent les couleurs du logo MAG. Les chiffres 1,2,3 consolident la mémorisation de l'architecture du site et reprennent le slogan de MAG. Partie de droite: Elle permet de présenter le contenu du site. Les images sont en noir et blanc pour ne pas affaiblir les couleurs vives du menu et du logotype. Les projets ne prennent leurs véritables couleurs qu'une fois que l'internaute les consulte. tous droits réservés MAG Design Enfin, la partie de gauche reste statique de façons à toujours apparaître à l'écran tandis que la partie de droite est mobile pour permettre d'afficher tous les projets et leurs contenus, textes, images etc.

14 Détails de la page d'accueil Détails: Lorsque l'utilisateur passe la souris sur une image, un cadre de couleur apparaît (sa couleur faisant référence à la rubrique à laquelle le projet appartient). Le titre du projet y est inscrit ainsi que la sous-rubrique dans laquelle il est classé. Les boutons des sous-rubriques du menu sont également actifs et changent de couleurs à leurs survols. cahiers bohêmes - photographie tous droits réservés MAG Design Les images sont volontairement grandes pour donner suffisamment envie de visiter les projets. Leur format horizontal connote un "tour d'horizon".

15 Page type pour un projet Les images sont cette fois en couleurs. Textes de présentation du projet, des partenariats etc. Jouer avec des photos au format horizontal au maximum afin de ne pas faire trop blog! Les textes sont en colonnes étroites pour dynamiser visuellement le contenu. Texte par défaut, Texte par défaut, Texte par défaut, Texte par défaut, Texte par défaut, Texte par défaut, Texte par défaut, Texte par défaut,texte par défaut,texte par défaut,texte par défaut,texte par

16 Page d'identité Trois photographies en noir et blanc (le regard, l'oreille et les mains) au format horizontal toujours et trois textes (ma formation, mes expériences professionnelles et ma philosophie de vie!) marie alice girard Blabla sur mes expériences sur ma philosophie de vie. Les instants à capter, à sauvegarder, à préserver! Les projets réalisés, les partenariats, anedoctes. Parcours et formation professionnelle.

17 Page "contacts" Cette page présente les différents moyens pour me contacter ainsi qu' un formulaire de contact au design très très simplifié, comme le serait une feuille de papier vierge! Le curseur clignote là où l'utilisateur peut entrer son nom. Ensuite s'il clique en dessous de "prénom" le curseur clignote et il peut écrire. Idem pour les autres champs. Je ne sais pas si c'est facilement réalisable cependant... formulaire nom: contacts mail: tel.: adresse postale: 15, rue du Professeur Roux Bègles

18 Le mag Le mag est un espace de laboratoire que je réserve, pour déposer mes photos mobiles, mes prises de sons sur le terrain et mes idées conceptuelles autour d'un objet, d'un slogan, d'une stratégie... Cet espace me permet de rester active (et de véhiculer aussi cette image) et de partager mes "découvertes". Rester "créactive". Le contenu peut concerner tout ce qui m'entoure (un son, une lumière, une forme...) et me permettra, par exemple pour une photo d'un groupe de musique, de faire des liens vers le groupe et ainsi de générer du trafic vers mon mag. Chaque photo peut être agrandie et partager via les réseaux sociaux. Il faudra donc intégrer un bouton de partage vers facebook ou twitter. Le fond doit rester blanc comme une page à remplir.

19 Le mag La navigation reste identique au site internet de façons à garder les internautes dans le même univers. La partie de gauche avec son menu est statique de façons à toujours être visible, tandis que la partie de droite est mobile et remplie par les contenus. C'est une page qui se remplie chaque semaine! J'aimerai beaucoup que des internautes puissent laisser leurs commentaires ou même déposer des réponses créatives à mes pistes mais je ne sais pas comment l'organiser. Cela risque d'être assez compliqué mais pourrait pourtant générer du trafic... édito photos mobiles échantillons boîte à idées contacts... Le mag est un espace de laboratoire que je me garde pour déposer mes photos mobiles, mes prises de sons et mes idées conceptuelles autour d'un objet, d'un slogan, d'une stratégie... Cet espace me permet de rester active (et de véhiculer aussi cette image) et de partager mes "découvertes".... Le mag appelle à une newsletter pour informer les internautes de mes nouveautés créatives.

20 vesion mobile : à vos smarphones!

21 Page d'index: Le site mobile pour smartphone doit permettre de visualiser aisément les contenus, sans avoir à zoomer comme c'est le cas sur certains sites!! Il doit permettre de partager facilement vers facebook et twitter mobiles. Le slogan qui accompagne le logo est différent de la version non-mobile. Ce slogan insiste sur le fait que le site est une version mobile, uniquement pour smartphone (ce qui me permet donc de bénéficier d'une meilleure image aussi bien auprès des professionnels que du grand public).

22 Page d'accueil Le logo MAG est volontairement maitenu renversé de façons à ne pas perturber les internautes: en effet ils sont entrés grâce à un bouton renversé et ils sont sur une version du site mobile. Il faut visuellement rester dans le même univers. 3 couleurs, 3 rubriques, 3 boutons. Pour y accéder, l'internaute n'a qu'à appuyer sur le bouton de son choix. projets agence le mag

23 Page des projets: Une fois que l'internaute a appuyé sur le bouton "projets" de la page d'accueil, il peut visualiser tous les projets, en faisant dérouler l'écran vers le haut. photographie Un cadre jaune, avec l'intitulé de la sous-rubrique, permet de savoir dans quels types de projets on se trouve. Pour accéder à un projet en particulier, il suffit de toucher du doigt l'image et pour le refermer de rappuyer une autre fois sur l'image. Le retour à la page d'accueil se fait par le logo MAG.

24 Page type d'un projet: L'internaute a donc, à ce stade de la navigation, appuyé sur la photo d'un projet. Il est donc maintenant au sein du projet. Le fond passe au second plan et l'opacité est donc diminuée. Même principe pour visualiser le projet dans son ensemble: faire dérouler l'écran vers le haut. En bas de la page, un bouton doit permettre de revenir à la page des projets. Pour fermer le projet, il suffit de rappuyer sur l'image. photographie Projet réalisé en 2010: conception d'un logotype, de la signalétique et d'affiches publicitaires. Chaque photo, vidéo ou musique est visualisable en plus grand.

25 Rubrique agence: Cette rubrique contient une photographie cliquable (qui ouvre mon profil, identique à mon profil sur le site non-mobile). Le numéro de téléphone renvoie directement vers l'option appel sur le smartphone. L'adresse renvoie directement vers l'option de rédaction d'un sur le smartphone. L'adresse postale renvoie directement vers un plan. agence marie alice girard Tel.: Mail: En descendant plus bas dans la page, il y aura le formulaire de contact.

26 le mag: Le bouton "le mag", de la page d'accueil, renvoie directement vers le site mobile du mag. Présentation simple, à faire défiler. Les médias sont visualisables et zoomables sur le même principe que pour le site MAGMobile.... Le mag est un espace de laboratoire que je me garde pour déposer mes photos mobiles, mes prises de sons et mes idées conceptuelles autour d'un objet, d'un slogan, d'une stratégie... Cet espace me permet de rester active (et de véhiculer aussi cette image) et de partager mes "découvertes"....

27 merci de ton aide Nico! ;)