Portfolio

Création d’une maquette

Amandine — Wed, 15 Apr 2020 00:17:42 +0000

Maquette de la page d’accueil dans sa version ordinateur et mobile

Tout comme pour le Wireframe, j’ai commencé par démarrer photoshop pour y créer un nouveau plan de travail de 1920×1080. J’ai ensuite importé l’image animée pour la placer en haut de page, par-dessus j’ai créé une forme rectangulaire blanche avec uniquement les contours de visible, que j’ai placé au centre de l’image animée. A l’intérieur de ce cadre, j’y ai écrit le nom du site, ainsi que le nom de l’activité du propriétaire du site. J’ai continué en créant le menu avec une forme rectangulaire et en y écrivant le nom des catégories prévues. J’ai ensuite importé le logo animé que j’ai placé sous le menu à gauche, puis ai écrit le texte de présentation que j’ai placé à droite du logo. J’ai terminé cette maquette en créant le footer avec une forme rectangulaire, en y écrivant les copyrights, les mentions légales et en y ai importé les icônes de facebook et instagram dont j’ai modifié la couleur en blanc, que j’ai ensuite placé.

Maquette de la page de galerie photo

Pour la seconde page, j’ai créé un nouveau menu et ai dupliqué le footer de la page d’accueil. J’ai ensuite ajouté un fond noir, puis j’ai importé les photos de créations de bois, où j’ai ensuite ajouté une forme rectangulaire par-dessus avec 50% de transparence pour le titre de la photo. J’ai ensuite dupliqué cette forme pour la placer sur chaque photos. J’ai terminé en écrivant tous les titres.

Maquette de la page d’Essences de Bois

Pour la page des Essences de bois, j’ai dupliqué le menu, le fond et le footer de la page précédente. J’ai ensuite importé toutes les photos d’essences de bois et les ai placées.

Maquette de la page de contact

Pour finir avec la page de contact, j’ai encore une fois gardé le même menu, le même fond ainsi que le même footer que la page précédente. J’ai ensuite écrit le nom des cases à remplir du formulaire, puis j’ai tracé trois traits par-dessous. J’ai terminé en créant une forme rectangulaire ne contenant que les contours blanc, pour le bouton d’envoi et y ai écrit « valider ».

Création d’un Wireframe

Amandine — Thu, 09 Apr 2020 20:47:41 +0000

n°1 : Réaliser des illustrations, des graphismes et des visuels

J’ai tout d’abord démarré photoshop et créé un nouveau plan de travail de 1920×1080 pour la page d’accueil. J’ai commencé par créer tout ce que contiendra le « Header », j’ai donc créé une forme rectangulaire avec une croix pour mon image animée, j’y ai rajouté une autre forme rectangulaire par-dessus pour y écrire le nom du site et le slogan. J’ai ensuite ajouté un rectangle pour le fond du menu et j’y ai ajouté d’autres rectangles par-dessus pour chaque catégorie prévue.

Pour le « Main », j’ai ajouté une forme carré avec une croix pour le logo du site, avec le texte de présentation juste à côté.

Pour finir avec le « Footer », j’ai ajouté une forme rectangulaire ainsi que deux carrés avec une croix pour les icônes des réseaux sociaux, puis j’ai ajouté les textes de copyrights et de mentions légales.

J’ai ensuite dupliqué deux fois ce plan de travail pour le refaire dans sa version mobile et tablette. J’ai donc modifié leurs tailles en 768×1024 et 480×640. Où j’ai modifié le menu en version burger, puis j’ai mis le logo au-dessus du texte de présentation, et où j’ai modifié la disposition du « Footer » en mettant les copyrights au-dessus des mentions légales et des réseaux sociaux.

Wireframe de la page d’accueil dans sa version ordinateur et mobile

Wireframe de la page de galerie photo

Pour la seconde page, j’ai dupliqué le menu et le footer de la page d’accueil. J’ai ensuite ajouté une forme carré avec une croix, où j’ai ensuite ajouté une forme rectangulaire par-dessus avec 50% de transparence pour le titre de la photo. J’ai ensuite dupliqué 3 fois ces formes et les ai placé côte à côte. J’ai ensuite dupliqué la totalité de ces calques plusieurs fois pour que cela constitue la galerie.

Pour la version mobile et tablette, j’ai gardé les mêmes menu et footer que la page d’accueil, que j’ai donc dupliqué. J’ai ensuite dupliqué les cases photos que j’ai placé les unes par-dessous les autres pour n’en garder qu’une à la fois sur l’écran.

Wireframe de la page de galerie photo

La troisième page étant une galerie photo également, j’ai donc entièrement dupliqué la page précédente. J’ai ensuite supprimé les cases semi-transparentes et ai collé toutes cases « photo ».

Pour la version mobile et tablette, j’ai gardé le modèle de la page précédente et toute comme dans la version ordinateur, j’ai supprimé tous les rectangles semi-transparents. J’ai modifié les cases « photos » pour les rendre plus rectangulaire et les ai placé les une par-dessous les autres.

Wireframe de la page contact

Pour finir avec la page de contact, j’ai encore une fois gardé le même menu ainsi que le même footer. J’ai ensuite ajouté deux formes rectangulaires l’une au dessus de l’autre pour le nom et l’adresse mail de l’utilisateur voulant envoyer le message. Et un autre rectangle plus large pour le corps du message.

Enfin, pour les versions mobile et tablette, j’ai toujours gardé le menu et footer des pages précédentes, et ai gardé la même disposition pour les rectangles, que j’ai tout simplement rendu moins long.

Création d’un Flat Design

Amandine — Fri, 03 Apr 2020 22:15:15 +0000

n°1 : Réaliser des illustrations, des graphismes et des visuels

J’avais comme exercice de créer un flat design d’un monument existant. Appréciant les structures Coréenne, j’ai décidé de faire le Palais Royal de Gyeongbokgung, j’ai donc pris une photo de ce dernier sur le Web, pour le rendre flat.

J’ai tout d’abord dessiné les fondations du bâtiment, les poteaux que j’ai réalisé avec l’outil «ellipse», les toits réalisés avec la plume. J’ai ensuite ajouté les murs par-dessous. Pour continuer, j’ai réalisé les barrières et ai ajouté la porte avec les outils «rectangle» et «ellipse». J’ai ensuite ajouté en fond, une montagne que j’ai réalisé à la plume ainsi que la couleur de background.

J’ai terminé en ajoutant le nom du monument en écriture latine et en Hangeul, sa langue natale.

Résultat :

Création d’une bannière Facebook

Amandine — Fri, 13 Mar 2020 14:19:38 +0000

n°1 : Assurer une veille technique et concurrentielle

C’était un exercice où je devais réaliser la bannière Facebook d’un restaurant appelé « Une Sage Idée », j’ai donc réalisé une veille sur les bannière de restaurant et m’en suis inspiré. Je suis ensuite allée sur l’instagram et le site internet du restaurant pour lequel je devais faire la bannière, et j’y ai pris le logo ainsi que la typographie, les couleurs principales et quelques photos de leurs plats. J’ai ensuite démarrer photoshop pour commencer le projet.

n°2 : Réaliser des illustrations, des graphismes et des visuels.

J’ai donc commencé par créer un nouveau document web de 820x312px. J’ai d’abord mis un background de la couleur du logo de base. J’ai ensuite ajouté quelques effets de pinceaux par-dessus, dont une bulle qui laisse penser à une assiette et un cadrillage pour que cela fasse penser à une serviette de table. J’ai ensuite placé les photos des plats, je les ai retouché pour que le rendu soit plus flashy et plus net et je les ai délimité. J’ai rajouté un effet de calque sur la délimitation, puis j’ai créé l’entête. J’ai redessiné entièrement les logos de téléphone, d’adresse et du mail, en commençant par dessiner pour chacun d’entre eux, un cercle blanc puis les tracés de la couleur du background. J’ai rajouté le numéro de téléphone, l’adresse et l’adresse mail. J’ai continué en ajoutant la deuxième version du logo du restaurant qui est blanc. Puis j’ai rajouté la citation qu’ils ont sur leur site entre guillemets et ai rajouté la signature des propritaires en empruntant leur propre typographie.