button go back to projects, bouton retour en arrière sur la page projets


Graphic redesign


imac mockup of clishare, mockup du projet clishare

There are 5 steps for this redesign of a basketball website : moodboards, wireframing, design system, graphical interface models and prototypes

During my 4th semester in MMI, I had to choose an option and I chose Webdesign. For me, it was obvious to choose this option because I want to let my passion become my profession in my nearest years. So I learned how to create a great design according to an Ux Design process. The UX design owns a big part of the project because isn't only a simple detail, it's a conscious consideration which is thought from the beginning,
The first step of this redesign was to create a moodboard I chose colors that remind basketball like a bright orange and complementary colors (dark blue) in order to create a contrast for a better readability. My moodboard is an assemblage of basketball's images, objects and words to express the style that I chose for the development of my creative idea :

image moodboard
color harmony of clishare's project; harmonie colorée du projet de webdesign

HEXA #e56e31
RGB R : 229
V : 110
B : 49

HEXA #174c61
RGB R : 23
V : 76
B : 97

HEXA #616161
RGB R : 97
V : 97
B : 97

HEXA #949997
RGB R : 148
V : 153
B : 151

first picture of wireframes redesign graphic, image des wireframes de la refonte graphique

Then, I created a wireframe. Here, it was a skeleton of low fidelity which was presented with a neutral graphic eliminating the elements of distraction to make it clear and understandable. The aim of my wireframe was only to facilitate my work afterwards for the creation of my graphical interface model.

second picture of design system, deuxième image du design system
third picture of design system redesign graphic, image du design system de la refonte graphique

After that I've made the wireframe, I created the design system. It's the direct descendant of the graphic charter, it tends to integrate into the teams' workflow in order to reconcile the print with the digital. So I've made my atoms and with them my moleculs, then my organisms, my templates and finally my pages.

first picture of graphic model, première image de la maquette

Eventually, with all of these last elements, I've done my graphical interface model. I decided to create animations on the title, sliders and buttons on XD in order to make it more attractive and interactive. In order to make it more colorful, I added some graphic elements which remind the basketball. Then, it stays consistent with this theme.

voir le projet suivant, see next project Previous