Before you read any further, this is the first article I am writing (ever) about my work as a graphic designer. The reason I am doing this is because I think or hope it will be helpful to other young designers and to clients. A better understanding of the design process would create a better understanding of what graphic design is and that is in benefit of us all.
The Case. Design is Dead asked me to do a quick template redesign of the Ikari Cosmetics homepage. What is a template redesign? Well, that means that the technical part behind of the website will remain the same and that there are lots of limitations when doing a redesign. The content and building blocks of the website remain the same. It was my job to create something more "attractive" based on the content of the current website. In general, create something that works (communicates) better with the same elements.
The first thing to do when you start, even before you start to design is analysing the content of the page to see what information belongs where. In this case, the header (top part of the homepage) looks very messy. Your eyes don't know where to look first. Also, the structure of the page isn't as clear as it should be. Clarity is important as it creates rest for your eyes to lead them wherever you want them to go. There isn't much atmosphere, and looks very technical. Not the look and feel you would expect with this kind of brand. As designing is also an organic proces I will explain other choices along the way, colour choice for example.
Reordering the content
What I did is made their unique skin test the centre of the website, shortened the text that explains the test en added a picture to create a more attractive banner. Below that I added the three pillars of their product and service and below that I made space for the Pro area. By ordering these elements like this I made a clear separation between the "image" part and the "shop" part. It makes it easier to find what you need.
The use of images
I choose to use Stock images because the original design also used images. I used colour manipulation to create images that looked much better and luxurious than the original ones, and I also used a different crop of the picture.
Try not to use generic pictures, pictures need to add something to your story. If not, it's often better to leave them out. In this case I decided to keep them in but used more abstract images that would fit the title of the content block.
As you can see, the product shots used in the original design aren't perfect, due the deformation. Another issue is that a lot of the products use the same beautiful but simple packaging. Therefore I decided that it was much easier for the client to work with simple illustrations of the packaging so clients would have to focus more on the names of the products. Which is in this case more important than the actual packaging of the product. This also solves the problem with deformation and bad light conditions when a client needs to shoot the packaging themselves. And let's not forget it gives a more luxurious look to the whole website.
Colour and Typography
I choose to adapt the colour palette a bit to create a warmer style. I changed the bright red to a bit darker red and extended the colour palette with some softer skin colours and an extra grey.
Ikari had one typeface in their identity. Because using just one typeface is never a great idea (it makes it very hard to let text stand out) I added a classical modern typeface. Now it is easier to let titles stand out and create more hierarchy as you can see in the example.
The final result
I am quite sure that there is still a lot of room for improvement but as you can see, the difference with this simple design exercise is already immense. If you have any questions about this article or are interested in working with me feel free to send me an e-mail.
I am happy to tell you that I will be one of the people at the round table questionaires at OpenVRT Learn-up. An evening for young creatives were they can ask questions on portfolio presentation, social media exposure and other related topics. Happy to…