PORTFOLIO WEB DESGINer
By Julien Martin
PP
ABOUT ME
Julien, 31 ans en formation web designer sur montpellier.
passionné par la réalisation d’elements graphiques, de supports web responsive et d’outils de communication afin de creer une réelle sensation unique pour l’utilisateur.
Je m’intéresse à toutes sortes de développements visuels et suis impliqué dans les médias numériques sur tout type de support.
Grâce à mes compétences pour la suite Adobe, Wordpress ainsi que la conception HTML, CSS, Bootstrap d’un site internet, je pourrai vous assister dans la réalisation de sup- port graphique et Web tout en respectant un cahier des charges bien précis.
Depuis plusieurs années, j’ai acquis une véritable connaissance technique dans le monde de l’entreprise, un grand sens de l’adaptation, ainsi qu’une totale autonomie dans mon travail. De plus, je suis extrêmement rigoureux et soucieux du détail.
Persuadé que mon dynamisme et mes qualités relationnelles ainsi que mes compé- tences acquises jusqu’alors correspondent à l’image de votre entreprise.
TA BL E OF C ON TE NT P3
project P4
development p8
Logo p1P
illustration p14
P4
Project
qu’est-ce qu’un projet?
L’une des étapes fondamentales de l’élaboration d’un site web est la définition du projet en lui-même, permettant l’identification du périmètre initial du projet et l’établissement de l’organisation adéquate et des moyens nécessaires, tant humains, techniques que budgé-
taires, pour sa mise en application.
MOCA By Caroline Moulin
PP
BY CAROLINE MOULIN
ARCHITECTE DE - DECORATRICE
MOCA By Caroline Moulin
site basé sur wordpress P.P
j’ai reçu une demande d’une architecte d’intérieur pour réaliser son site vitrine, avec une forte identité et cahier des charges précis. un premier support web avait été crée mais nous sommes
partis sur une nouvelle base, simplement les photos ont été réutilisées et optimisées
WWw.mocabycarolinemoulin.com
MOCA By Caroline Moulin
PP
RESPONSIVE
COMPUTER
Capture d’écran de la page d’accueil version ordinateur
La demande était simple, une mise en avant d’un style épuré, sobre tout en gardant l’image de marque des prestations proposées par la
société.
tablet PP
SMARTPHONE
Format Tablette
la demande était également de prévoir les versions responsives d’un site sur les supports actuels
Format Smartphone
P8
DEVELOPMENT
qu’est-ce que le developpement ?
Le développement web repose sur l’utilisation des langages (HTML/CSS, JavaScript, PHP…) pour écrire des programmes qui sont ensuite exécutés par les ordinateurs. Les instructions sont mises en place sur Internet et sont effectuées sur des serveurs. En fonction des besoins des propriétaires du site ou des pages web, ces dernières peuvent être constituées uniquement de textes et d’éléments graphiques ressemblant à un document ou être interactives en affichant des informations qui évoluent (panier
d’achat, par exemple).
PP
H T
M L C
S S
HTML
ici est présenté une maquette d’une page web au format HTML concernant une mutuelle de santé éléborée lors de
ma formation
CSS
Cette maquette a été tout d’abord réalisée avec un style css simple
P1P
visuel
ici le visuel de la maquette en question, avec la page d’accueil où l’on retrouve les informations d’un espace client type.
La maquette est composée des différentes pages nécessaires, un espace d’authentification, messagerie etc
P11
ver sion
boot strap
La même maquette a été également réalisée avec
bootstrap 4
P1P
LOGO
qu’est-ce qu’un logo ?
Un logo ou logotype est une représentation graphique d’une marque ou d’une entre- prise qui est utilisé sur les différents supports de communication. Le logo renforce l’image de l’entreprise et favorise la reconnaissance de la marque lorsqu’il figure sur
le produit comme par exemple dans le cas des articles de sport.
Le logo doit donc généralement posséder, entre autres, des qualités d’évocation de l’activité et des valeurs de l’entreprise, mais également des qualités de lisibilité. Pour éviter un effet de discordance, le logo doit évoluer en même temps que l’entreprise ou
la marque et ses ambitions à travers les refontes de logo.
P13
afin de pouvoir représenter graphiquement mon identité j’ai réalisé un logo qui met en avant certaines de mes compétences
graphique et pour représenter le domaine du web design
Logo Principal
Logo inversion couleur Logo declinaison couleur
avec effet miroir
LOGO sans forme
P14
Illustration
qu’est-ce qu’une illustration ?
L’illustration est une représentation visuelle graphique ou picturale chargée de tra- duire, symboliser, décrire un message en image. Une illustration peut prendre différentes
formes : la gravure, la photographie, le dessin, etc.
On la retrouve sur différents supports aussi bien réels, comme un t-shirt, que numériques, comme un site internet.
P1P
PhotoShop
Style de calque
Les styles de calques permettent d’enrichir votre travail en lui apportant des effets dynamiques variés, paramétrables, enregis- trables, duplicables, tels que des ombres
portées, des biseaux et des contours Voici deux exemples qui permettent de mettre en avant l’utilisation de plusieurs
effets comme les textures ou les ombres
P1P
Conception de forme
L’outil Conception de forme est un outil interactif qui permet de créer des formes complexes en fusionnant et en gommant des formes simples. Il fonctionne tant sur les tracés simples que
sur les tracés transparents.
Illustrator
P1P
Realisation graphique
du Mont ventoux
P18
Elaboration de persona
Un persona est, dans le domaine marketing, un personnage imaginaire représentant un groupe ou seg- ment cible dans le cadre du développement d’un nouveau produit ou service ou d’une activité marketing
prise dans sa globalité.
Le persona est généralement doté d’un prénom et de caractéristiques sociales et psychologiques. Plu- sieurs personas peuvent être utilisés pour un même projet de développement. Le persona peut être même
parfois représenté sous forme de story board en situation d’utilisation du produit ou service.
P1P
Distorsion
La distorsion de l’enveloppe correspond à l’adaptation d’une forme par rapport à une autre. La forme qui va être adaptée peut être éventuellement vectorielle. Un objet vectoriel contrairement à une image bitmap peut être imprimé sur n’importe quel format.
