SOMMAIRE PRÉFACE PRÉFACE TSUNAMMI HABANERO AGENCY REAL-MMI-GRENOBLE COSMUS WAIT FOR YOU

Documents pareils
FORMATIONS FORMATIONS : E-COMMERCE / E-MARKETING / WEBDESIGN / VENTE / INFORMATIQUE / BUREAUTIQUE LE CATALOGUE DE

PHOTOSHOP - L'AFFICHAGE

novatis Agence Web innovatrice

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

Concepteur réalisateur graphique

FOLIO No. 1 TRAVAUX GRAPHIQUES 2013

Les 10 étapes incontournables pour réaliser un site internet performant et accessible

Webmaster / Webdesigner / Wordpress

Créer une maquette de site Internet

WORDPRESS : réaliser un site web

Les différents parcours en S4

Agence Web innovatrice

PROGRAMME DE FORMATION CONTINUE «CHEF DE PROJET WEB»

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN ING

L interface Outils, palettes, règles, repères, grille Paramétrer les préférences

Modalités pratiques. Objectifs de la Formation

WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES

FORMATION CONTINUE DÉTAIL DU PARCOURS.

MARIE VACHER MARIE VACHER

RESPONSIVE WEBDESIGN

Maîtriser Concevoir Réaliser Diffuser

CAHIER DES CHARGES Réalisation de site web

HTML. Notions générales

QUESTIONNAIRE CAHIER DES CHARGES POUR FACILITER LA CREATION DE VOTRE SITE WEB

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

Questionnaire préalable Site Internet

ANICOTTE Guillaume GUFFROY Matthieu LIMA Juliette SALLOUH Chamsseddine CAHIER DES CHARGES SI 28

kévin Lampin DA Junior 02/07/ (33) kevin.lampin@club-internet.fr

ANGULAR JS AVEC GDE GOOGLE

L avenir de votre marque se décide en ligne.

WEB design. Pierre Chassany Comstone.ch vocables.com

Maximisons les performances de votre stratégie digitale

DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET

HTML5 et CSS3 pour des sites Responsive Web Design

May Lopez PETIT COUTEAU SUISSE CRÉATIF. May Lopez Petit couteau suisse créatif

Charte éditoriale 1- Comment préparer un contenu écrit pour le Web?

2.REZO s appuie sur son expérience et sa veille créative pour vous conseiller et vous accompagner dans votre stratégie de communication.

Léa Dumas Développeuse front-end Intégratrice //

LICENCE PROFESSIONNELLE

Diffuser un contenu sur Internet : notions de base... 13

NOS DESSIN FORMATIONS. PAOMULTIMEDIAWEB3DCINEMAAUDIOVISUEL La formation idéale existe, nous l avons inventée!

TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES. Page 1/5

CREATION DE SITE INTERNET

Modules Multimédia PAO (Adobe)

Publier dans la Base Documentaire

INTEGRATEUR WEB/WEBDESIGNER

Internet et les associations

Note d intention Agence : KRONOS DIGITAL

1. Des chartes graphiques homogènes, élégantes, créatives

Jérémy Bérenger. Résumé. Expérience. Web Designer - Intégrateur Web jeremy.berenger@gmail.com

MODE D EMPLOI WORDPRESS

La saisie d un texte

agence de création digitale 1 sur10

ERGO web. Augmentez votre e-business grâce à une conception Web de qualité taillée sur mesure, ergonomique, innovante et créative.

02/02/2011. test 1. Communication visuelle & web. Pao. Principes fondamentaux. Les six principes de base. La mise en page. Module sur trois journées

3 EXPERTISES AU SERVICE DE VOS OBJECTIFS

OFFRE DE SERVICE.

webmestre : conception de sites et administration de serveurs web 42 crédits Certificat professionnel CP09

SOMMAIRE I. CONTEXTE ET JUSTIFICATION... 3 II. OBJET... 3 III. RESULTATS ATTENDUS... 4 IV. ACTIVITES A REALISER... 4 V. CONDITIONS DE SERVICE...

Formation Créateur de site web e-commerce Certifiant

Publier un Carnet Blanc

MIX:GRAPHICLAB_PRO FORMATION PAO WEB MULTIMÉDIA PÔLE MIX BERGERAC EPSECO TALIS FORMATION

Analyse Sectorielle de site e-commerce

Graphiste Webdesigner freelance depuis 2011,

Exemple de charte d intégration web

UserReplay. UserReplay. Départments ecommerce et Marketing. Service Client. Web Ops/ Infrastructure: Développement du site et Support technique

Qu est-ce qu un outil de travail collaboratif Google Drive?

SOMMAIRE 1. NOTRE AGENCE NOS PRESTATIONS NOTRE MÉTHODOLOGIE PROJET NOS OFFRES LES ATOUTS DE NOS OFFRES...

COMMUNICATION VISUELLE COMMUNICATION INTERACTIVE EXPERT IMPRIMEUR. Studio de création Print Solutions Web Offset & Numérique

CATALOGUE FORMATION 2015

Service des ressources informatiques - Conseil Scolaire de District Catholique Centre-Sud Page 1

Charte graphique 2011

Trucs et astuces d un Expert Jimdo pour un site réussi

L apprentissage Gartésien c est l acquisition de compétences professionnelles et une union de valeurs humaines.

GRAPHISME MULTIMÉDIA & WEB

Introduction à HTML5, CSS3 et au responsive web design

160 Boulevard de la République Saint Cloud - tel : info@meliatis.com

F i d e s i o. présentation de l agence

sommaire Charte graphique - identité visuelle éléments constitutifs de la charte papeterie contenu du CD-ROM

Présentation du Framework BootstrapTwitter

Tarifs publicité 2010

formations Une approche simple et personnalisée pour une meilleure acquisition de compétences en PAO

ITNETWORK PORTFOLIO ITNETWORK. 45, rue de Domremy Paris Tel : contact@itnetwork.fr

Ateliers Bureautique et Internet

Premier cours d informatique

I - Pour créer un site web

Créer un magnifique en-tête web

VOLUME 1 CRÉATION D UN SITE WEB

ANIMATION 3D PHOTOGRAPHIE VIDÉO & SON COMMUNICATION GRAPHIQUE MULTIMÉDIA RELIEF DONNEZ DU AVENIR À VOTRE. formation

Brief créatif site e-commerce

Bailly Pauline Multimédia & Images

Création d un site web avec Nvu

Programme de formation Photoshop : Initiation 24 heures de formation (3 jours) 1/2

Design. Search. Cloud AMOA ECM. Intégration. IT Solutions. Formation. Développement. Mobilité. Open source. Infogérance. Ergonomie

Transcription:

SOMMAIRE PRÉFACE 01 PRÉFACE 02-03 TSUNAMMI 04-05 HABANERO AGENCY 06-07 REAL-MMI-GRENOBLE 08-09 COSMUS 10-11 WAIT FOR YOU «Do it with passion, or not at all.» - Rosa Nouchette Carey Je suis Océlia, j ai 21 ans, stéphanoise depuis toujours, j ai «migré» vers Grenoble en 2015 pour intégrer le DUT Métiers du Multimédia et de l Internet. En effet, passionnée par la création digitale depuis maintenant plus de quatre ans, j aimerais faire de ce qui était au départ un loisir, mon métier: je souhaite devenir webdesigner et évoluer par la suite en tant que directeur artistique.

01. TSUNAMMI Projet personnel -2016 Association du Bureau des Étudiants du département MMI de Grenoble, Tsunammi est une vague rafraichissante, et dynamique créée par douze étudiants volontaires. L objectif était d améliorer le bien-être à l IUT, créer des interactions, des affinités entre les étudiants mais surtout faire de MMI une promotion plus connue auprès des autres étudiants de Grenoble. A la tête du pôle communication, j ai eu en charge la création des supports de communication pour chaque évenement organisé : affiches, flyers, bannières... Voici un exemple avec une sortie ski. Adaptation de l affiche au format bannière pour la page Facebook. Le logo a également été «customisé» pour l occasion, grâce à l utilisation de ma tablette graphique du logiciel Illustrator. Fusion d une photographie de la station Chamrousse et d un snowboardeur (toutes deux libres de droit) via le logiciel Photoshop, j ai choisi pour cette affiche de faire ressortir des tons de couleurs violettes, rosées, pour rappeler la couleur du ciel lors de nuits neigeuses. J ai choisi de mettre les informations textuelles en rouge, afin de rappeler l identité visuelle du BDE, mais aussi d attirer l attention. Ces deux productions ont permis l animation de notre communauté Faccebook.

02. HABANERO AGENCY Projet scolaire -2016 Habanero Agency est une agence de communication fictive créée lors de ma première année en DUT MMI. Nous avions la volonté de véhiculer l image d une activité positive, dynamique, originale avec une touche de piment dans nos créations, c est pourquoi nous avons choisi le nom de HABANERO qui est un piment très fort originaire du Mexique. Mon. rôle. était. d établir l identité de notre agence avec la réalisation du logo, et des supports visuels en fonction des attentes de mes camarades. J étais également chargée du design du site web (Front-End) réalisé avec le framework HTML bootstrap. Pour renforcer l interaction des utilisateurs avec le site, nous avons également intégré des scripts Javascript. Prenez : - Une bulle de communication : - Un piment : - Une apostrophe : - Le «h» de Habanero : et vous avez les ingrédients parfaits pour notre logo. Nous avons choisi les typos Butler pour le titre et Roboto / Raleway pour les paragraphes, en jouant sur les épaisseurs, les tailles de police. Réalisé dans Illustrator, le logo a été pensé pour renvoyer une image dynamique de notre agence grâce à sa couleur, mais aussi pour être identifiable grâce à sa forme peut commune rappelant l aspect communication de notre marque! Nous avons fait le choix de partir sur une base de gris très clair pour le fond du site, qui représente la technologie et le modernisme. Afin de ne pas tomber dans le monotone, nous avons créé le contraste avec du rouge, repris du piment. Le site est un one-pge pour une ergonomie et une navigation simples mais complètes.

03. REAL-MMI- GRENOBLE Projet scolaire -2017 L ancien site de réalisations du département MMI de Grenoble bien que fonctionnel, n était plus actuel et manquait de contenu. Il nous a été demandé de revoir ce site afin qu il soit le plus représentatif possible de la formation. Responsable graphique..,j ai eu en charge la création des maquettes tout en respectant la charte graphique réalisée par un autre groupe de projet. A travers mon design, j ai essayé de transmettre l énergie l aspect électique et technique de la formation. L une des problématiques du projet était de s assurer que le site soit régulièrement mis à jour sans avoir à modifier le code source. Nous avons donc choisi d utiliser le CMS Wordpress. Nous devions aussi satisfaire l ensemble des étudiants de la formation, et cela a été concluant puisque le site a été élu meilleure création artistique 2017 par la promotion. Soutenue par mes camarades de groupe, j ai souhaité redonner de la modernité au site en m inspirant de la tendance de «casser les grids», afin de donner un aspect moins structuré ce qui le différencie du site institutionnel. J ai utilisé une police large et grasse pour les titres, pour facilité la lisibilité. Pour les paragraphes j ai contrasté avec une police plus fine pour allegé l assimilation du message. Pour mettre en situation le visiteur, j ai choisi de prendre une photo de la vue que l on a de l IUT de Grenoble que j ai recouvert d un dégradé des 3 couleurs, dans l ordre, du nouveau logo de la formation. J ai également choisi de les utiliser pour les pages principales du site :

04. COSMUS Projet scolaire -2017 Cosmétiques + USA = Cosmus. C est une entreprise fictive proposant des cosmétiques provenant des Etats-Unis en France aux prix similaires créée lors du module CMS e-commerce de mon semestre 4. Nous devions rendre par équipe de 3 au moins trois wireframes, ainsi qu un thème Prestashop. Ayant le rôle de webdesigner de l équipe, j ai choisi d établir l identité de la marque autour de la galaxie. En plus de la création du logo, des wireframes et de la maquette, j ai aussi participé à la fabrication du thème Prestashop. Cosmus n est pas seulement un mot-valise, c est aussi un paronyme de Cosmos. Il existe plusieurs homonymie de ce nom dont deux très connues : les cosmos qui sont des fleurs, le cosmos qui désigne l univers. L aspect «univers» collait parfaitement avec la marque qui importe des produits de beauté. Lorsque l on pense à l univers, à la galaxie, on visualise souvent des tons de couleurs violets, rosés. Ce sont aussi des tons de couleurs que l on associe souvent à la beauté. Pour m assurer de la modernité de ce projet, je me suis aidée des couleurs de l année pantone 2017 pour définir la charte graphique. Les wireframes m ont permis de construire les maquettes en me focalisant uniquement sur l habillage graphique et les styles du site, tout en m adaptant aux contraintes de Prestashop. J ai combiné Playfair Display une police sérif très contrastante, avec Open Sans une police sans sérif au design minimaliste, afin d obtenir une association harmonieuse et originale.

05. WAIT FOR YOU Projet personnel -2017 «Vous n en avez pas marre de perdre des heures dans les files d attente?», c est de cette phrase qu est née l idée de Wait For You une application mobile créée lors du module Jeu d Entreprise au semestre 4. C est une plateforme de mise en relation payante entre deux personnes : l une prendrait la place de l autre dans les files d attente en échange d une rémunération. Le but premier de ce module était de créer une entreprise (étude de marché, prévisions financières etc.) Cependant j ai décidé d apporter de mon côté une dimension artistique au dossier à rendre en fin de module. J ai ainsi créé une identité visuelle : avec un logo et une maquette de l application. Avant de m engager dans la réalisation du logo dans Illustrator, j ai choisi de travailler la typographie sur papier. Premièrement j ai réfléchi à l écriture : je la voulais épaisse, pour plus de lisibilité. Ensuite j ai choisi de la coupler avec une flèche avec 12 graduations à l intérieur, pour symboliser le temps gagné grâce à l application. La charte graphique de l application est à l image qu elle souhaite renvoyer : originale et moderne. Les couleurs sont éclatantes, le dégradé ajoute de la profondeur. La typographie du texte est simple, sans serif pour avoir un rendu sobre, et ne pas alourdir le design. J ai ensuite repris mes idées à la plume dans Illustrator.