W EBD ESIGNS

Transcription

1 1

2 W EBD ESIGNS

3 REFONTE COMPLÈTE DU SITE «MERCI POUR L ADRESSE» BRIEF CLIENT Re-penser la plateforme en accord avec le magazine gratuit. Travailler en collaboration avec la Directrice Artistique print. Création du site avec Wordpress. Développer une plateforme responsive. RÉALISATIONS Conception : arborescence détaillée, wireframes, maquettes graphiques. Test d intégration HTML5 et CSS3 des principaux gabarits. Mise en place du CMS Wordpress, installation d un thème enfant et des différents plugins. Adaptation et customisation du thème en collaboration avec une développeuse Back-end

4 6 7

5 COMPÉTENCES PROJET Conception, ergonomie, wireframes (UXpin) Design Mockups / Photoshop Wordpress, thème customisation Intégration HTML 5 & CSS 3 8 9

6 PASCAL COLRAT PHOTOGRAPHE, GRAPHISTE, ILLUSTRATEUR BRIEF CLIENT - Réalisation technique (intégration) d un site web d après une arborescence et des gabarits graphiques. Etude et réalisation responsive du site. Optimisation des images. INTÉGRATION FRONT OFFICE RÉALISATION - Etudes et découpage des maquettes graphiques. Conception de l aspect responsive. Intégration HTML5 et CSS3, utilisation du micro framework KNACSS. Mise en place des plugins jquery adéquats. Optimisation des images

7 PAGE D ACCUEIL * AFFICHE BLOG EXPLORATION EXPO / PUBLICATIONS PORTRAIT CONTACT blog réalisation / une de presse / archives GALERIE D IMAGES ICONO + TITRE MEME PRINCIPE PAGE THÉMATIQUE PAR COMMANDITAIRE Visualisation des noms au survol MEME PRINCIPE MEME PRINCIPE Visualisation des noms des commanditaires au survol APERÇU PAGE PROPRE À L EXPO MEME PRINCIPE PAGE PROPRE AU COMMANDITAIRE MEME PRINCIPE MEME PRINCIPE Possibilité de passer d une image à l autre dans l aperçu Galerie d image + aperçu à droite Galerie d image classée par années + aperçu à droite * La barre de menu est présente sur chaque page afin de pouvoir retourner dans n importe quelle rubrique à tout moment

8 COMPÉTENCES PROJET Responsive Web Design : conception et Media Queries Optimisation des images Intégration HTML5, CSS3, jquery 14 15

9 REDESIGN DU SITE DE L OFFICE DE TOURISME DU PAYS D ALESIA & DE LA SEINE BRIEF CLIENT Re-penser et moderniser l interface. Attirer une cible plus jeune et parisienne. Mise en place d un CMS pour les mises à jour. Développer une interface responsive. RÉALISATIONS Réorganisation de l arborescence. Redesign des interfaces et des fonctionnalités. Mise en place de Wordpress, installation d un thème et des différents plugins. Création d un thème enfant, customisation CSS et organisations des contenus

10 18 19

11 COMPÉTENCES PROJET Conception, ergonomie, wireframes Design Mockups / Photoshop Wordpress, thème customisation CSS & HTML 20 21

12 Website creation Brief client - Réaliser un site web et une identité graphique pour un projet jouant avec les images et les mots autour d une certaine vision : «transfigurer un vide-grenier en expérience arty pour décrypter le génome du langage design». Réalisations - Installation du CMS Wordpress et d un thème enfant. Adaptation et customisation. Logo, identité web

13 24 25

14 COMPÈTENCES PROJET Conception, wireframes Design mockups / Photoshop Logo, icônes / Illustrator Customisation WordpressCSS & HTML 26 27

15 WEBSITE CREATION BRIEF CLIENT - Réaliser un site vitrine pour une décoratrice d intérieur, avec un portfolio. Respecter l identité de la marque (logo, couleurs et choix typographiques). Réaliser des illustrations pour le site web et les supports de communications. RÉALISATIONS - Analyse du projet : benchmark, arborescence, wireframes, planches tendances et maquettes graphiques. Réalisation des illustrations : dessins, scan, travail de retouche et intégration sur le site. Installation du CMS Wordpress, création d un thème enfant, adaptation et customisation

16 Laura Gouby Accueil Prestations Navigation pricipale Réalisations A propos Contact Liens illustration Baseline Social Facebook + Pinterest Prestations Réalisations A propos Liens Contact Conseils déco Déco intérieur particuliers Conseil déco Book Projet Mission Complète Déco intérieur About / Bio Contact Particuliers Professionnels Book Projet Thanks Galerie photos Stylisme déco Mission complète Scénographie Déco intérieur professionnels Scénographie Social Facebook + Pinterest L étude avant projet Stylisme déco Scénographie 30 31

17 COMPÉTENCES PROJET Conception, charte graphique Illustrations, mockups / Photoshop Wordpress, customisation CSS & HTML 32 33

18 WEBSITE REDESIGN BRIEF CLIENT - Re-penser et moderniser l interface. Créer une identité graphique : logo, typos, icônes. Mettre en place un CMS. Concevoir une interface responsive. Développer un site bilingue, français-anglais. RÉALISATIONS - Analyse de l ancien site : arborescence, wireframes, benchmark. Ré-organisation de l arborescence. Redesign des interfaces et des fonctionnalités, wireframes et maquettes graphiques. Mise en place de Wordpress, installation d un thème enfant. Adaptation et customisation du thème

19 >> ARBORESCENCE SITE INTERNET Accueil Navigation pricipale Infos Agenda Médias Photos Presse Contact Liens Crédits Infos chaudes Baseline versions anglaise et française Infos Agenda Medias Photos Presse Contact Liens Crédits Bio Répertoire Disco Prix (?) Audio vidéos Liens vers pages réseaux sociaux 36 37

20 COMPÉTENCES PROJET Conception, wireframes Design mockups / Photoshop Logo, icônes / Illustrator Customisation Wordpress / CSS & HTML 38 39

21 WEBSITE CRÉATION BRIEF CLIENT Création d un site vitrine corporate responsive pour une boîte de production spécialisée dans les documentaires et les courtsmétrages de fiction. Mise en avant du catalogue avec fiche descriptive pour chaque projet. Établir une charte graphique web (logo déjà existant). RÉALISATION Analyse et organisation des contenus : arborescence. Installation de Wordpress. Choix et customisation d un thème responsive. Installation des plugins. Choix des typographies et du thème coloré du site. Mise en place d un CMS

22 COMPÉTENCES PROJET Conception, arborescence Wordpress, customisation CSS & HTML 42 43

23 WEBSITE CREATION BRIEF CLIENT - Créer un site vitrine pour une gamme de gâteaux. Créer une identité web et un sigle pour le logo. RÉALISATION - Analyse de la marque et des consommateurs, benchmark. Arborescence et wireframes. Planches tendances, maquettes graphiques, réalisation du sigle. Intégration des maquettes graphiques : XHTML, CSS and Jquery

24 46 47

25 COMPÉTENCES PROJET Conception, design thinking, wireframes Design Mockups / Photoshop Pictos, sigle / Illustrator Intégration front office / XHTML, CSS & Jquery 48 49

26 PROJET DE FORMATION, GOBELINS - WEBSITES CREATION BRIEF CLIENT - Réaliser deux sites internet pour les Amis du Musée d Art Moderne de la Ville de Paris et pour la librairie du musée. Promouvoir l association. Attirer de nouveaux membres. REALISATION - En tant que «directrice artistique» j ai réalisé l identité web de l association : conception, UX design, logos, planches tendances, choix typograpiques, maquettes graphiques

27 LOGO SAMAM ESPACE MEMBRE LOG PASS PROFITER Activités Editions limitées REJOINDRE Avantages Adhésion DECOUVRIR Présentation Historique SOUTENIR Acquisitions Dons & legs Adhésion MAMSHOP VOYAGES AA Mentions légales vos Questions MAM Contact News Letter Plan du site 52 53

28 COMPETENCES PROJET Conception, design thinking, ergonomie, wireframes Conception et creation des logos / Illustrator Planches tendances, recherches graphiques Maquettes graphiques / Photoshop 54 55

29 Laura Gouby Webdesign, integration HTML/CSS & Jquery, illustrations, graphic design - 56 laura.gouby@gmail.com // +(33)