This project required both a website with it’s own brand, including a logo, fonts, colours, business cards and so on.
This project consisted in designing and developing a website for a new company called Carpatica Cups which sells to other companies recyclable paper cups. It is meant to officially open in 2021 when a law in Romania for forbidding plastic cups will be official.
The second task requires me to completely create the brand of the company, which means style, colours, fonts used, way of speaking, logo,business card and so on. At the end of the project when I finish creating everything for the client, I am also going to create a set of guidelines.
I loved designing for this project as it gave me complete freedom. I chose to go with a “water & wave” (liquid) kind of theme as it relates with the liquids that the cups are going to hold in them. Furthermore when you think of liquids you think straight away at water which is blue, which is the reason why I chose that colour. The owner is also a fan of that colour therefore that went perfectly.
The cups won’t be used just for water, they will be used for coffees and so on, but I did not want to gave the website the colour brown as I did not think it would go with my light modern style I was thinking about. Also in my perspective the white of the cups goes better with a blue background rather than brown.
In this page I will present my design journey from research, sketches, to first design development to the last design solution.
A set of guidelines will be provided by March 2020.
Adriana Crina Petz, owner of the Romanian business side of Isuzu, which is a global company. Owner of the new business Carpatica Cups recycling cups company.
For my research I had to do look into websites of companies selling similar products. The ones presented bellow are the ones that inspired me. But I did not like the feeling of commercialization it gave me. I do understand that is the reason of their existence but I do believe that I can make them aesthetically more pleasing and still serve the same purpose.
My second step in my design process are my sketches. I first design my main idea which I came up with straight away after my website research and I am really in love with.
My current design doesn’t have a search bar as the business only has a product at the moment therefore I didn’t see the need for one at the moment.
This is my main design which was also my first idea. As soon as I knew about the role of the cups I immediately thought about a liquid & weave inspired kind of theme.
This design has multiple structures in each section which i wasn’t a fan of which is why I preferred sharing less on the home page as those information are available on the pages that the information belong to such as About us Page, Shop Page, Contact page and it makes the home page too busy with everything presented there.
Also the lack of more products to sell made me change my design as to begin with the client will only sell on type of cup.
This sketch represents the details page which was inspired by how Amazon and Shein (online shops) present their products. But as the product doesn’t have quite a lot of description or information needed besides a basic description there was no need for a Specs section or More information section for example.
Moreover, as this is mainly a website that sells to big companies that buy in large quantities there won’t be the need for discounts sections or “buy 3 pay for 2” kind for deals, as the owner will deal directly with those kind of requests personally using either the phone or email I inserted in the contact page.
These are other examples for the home page that i decided not to go with, as I preferred to take more imaginative design approach and take advantage of doing a more creative page due to the “liquid”theme I chose to go with. I could choose those design for quite a lot of different website ,but this “liquid and wave theme” is not for any website and therefore I took advantage of the situation and loved designing this idea.
The products section is again not needed at the moment for the lack of other products.
Above you can see my About page, Contact page and Gallery page.
The designs are quite similar to my current designs but I still thought the client was selling more types of cups which is why you can see in the Gallery page more items. Once the client will sell more items, the Gallery will have the products showcased in that style you can see in the left corner.
My first step in development consisted in starting to create my designs in Adobe XD, and later creating the actual assets that will be used such as the waves backgrounds.
Below I am presenting my design process in developing the waves for the web pages but I soon realised that it looks too asymetric and not so much like a wave. Therefore I chose in the end to use a more normal looking wave.
Previous designs and my development in Illustrator and Adobe XD.
On the first design I made the following changes:
-changed the logo colour
-changed the wave dividing line into a blue section
-chose the top version for the “why choose us?”section
-gave up the similar products section as to start with the company will only have one
On the second design I made the following choices:
-I used a burger menu
-changed the logo
-made the “why choose us section” blue inside waves
-gave up the products section for the same reason
In the third design idea I tried the following:
-tried to see how a normal menu will look like and decided to go with that version as it is used more in other websites which sale similar products .
-the same other reasons from the other designs will be applied in the final design
I also had to choose between the different design options for the “Why choose us”section and I decided to go with the one that has the polls as me and Danny both agree it looks better visually and the animation that will be added to it as it will loud will be a nice touch.
OBJECT DETAILS PAGE
Object detail page was my favourite one as it has a very modern design. I might also add that is looks quite minimal as well.
On the example below I have the similarities section which I had to delete as at the time being the client will not have any other products, but which might change in the future.
The fond used is also different as it is slightly more thick than my current font Geosans Light which you can see in the image under. I chose to change the font as it looked more elegant and modern with a lighter font and it is also the font I used for the Logo which makes the branding of the website even more consistent.
I was also trying to see If I can put the language button on all pages somewhere but I chose in the end to leave it only on the Home page as it is interfering with my design and it doesn’t look good at all.
I tried placing it both in the menu next to the cart, but two symbols next to each other just didn’t look good, and under the menu,but this didn’t satisfy me at all. Which is why my only option that I could see was leaving it on the home page.
FINAL DESIGN SOLUTION
My object details page is my favourite one I designed as it looks very elegant and minimalist at the same time,while having all the features the client asked for and it’s own style. It has a basked in order to buy, quantity, language and it’s own brand.
The shop page only has one product as the client will start with one and later on in the business advance with more products.
ABOUT US PAGE
The first design is actually my current design for the About page, but it shows how I was trying to see if I should make the underline as a wave too as the rest of the brand or should I leave it straight. In my final design i chose to leave it straight as it would have been too much if everything would have looked like waves.
I also started thinking about adding overlaying colours over the button of the page users are on as a reminder and reassurance that they clicked on the right bottom as sometimes people are in a rush.
I also added the recycling symbol in my background image as a reassurance and reminder for the people that the company is all about recyclable products. I used the same colour as the one in the footer so I can keep my brand consistent.
I also added some arrows in order to push the view of the user towards the poll . I chose to make them more sketchy looking as it makes the company look more “friendly” and organic,therefore everything is recyclable.
The second design is my first design idea ,which taking a look back looks way too simple. But at the moment I didn’t know what else to add until I did more research into what other similar websites did.
My current design uses a different font which is Geosans Light which is the exact font I used for the logo as well in the purpose of setting a brand out of this business so it can be unique with its specific features.
This page didn’t suffer any alterations besides the font used which is Geosans Light, as per my sketch I had a clear idea from the start knowing the main elements the page needs to have and having a general knowledge from researching and using other websites. I had to have a title, Google map, contact number , address, email and complaints/information contact details. Therefore designing it was quite easy as I knew exactly the elements I needed and the structure as seen in my sketch.
Waves for the background created in Illustrator for the final development:
I created these for the background of the website both for the actual coding development but also for my final design, as my first designs were made using the pen tool in Adobe XD which didn’t allow me to make them perfect like the way the Pen tool from Adobe Illustrator is allowing me to create forms.
OTHER ELEMENTS PREPARED FOR THE DEVELOPMENT PART
BUSINESS CARDS DESIGN
FINAL DESIGN CHOSEN BY THE CLIENT
The Business card on the right is the design the client chose for their business. The theme on the business card is also based on the liquid theme the website had as it became part of the brand. This time I used white drops to represent the water. I added the logo as the main element and under it the name of the client.
On the back of the business card I decided to use white dots when presenting the contact information, as using white drops again it would be a bit too much and it would not look visually pleasing.
This is the logo design I created it as soon as I choose the font GeoSans Light used in the website as it helps more keeping the brand consistent and it was very elegant, modern and minimalist which is the look I was going for. I made a version for blue background with “Cups” in white and one below for every background.
I worked on the project for the period of 8 weeks with no milestones encountered as the client really enjoyed our ideas and for me personally I really enjoyed designing this website and business Cards. My communication with the client was over Messenger video, text or face to face. This is an ongoing project that need to be done by the end of 2020 the latest but me and Danny think we are going to finish by latest March. I will keep working with the company for future marketing materials as the client was really happy with my work.
CONCLUSION, FINAL DESIGN SOLUTION AND PROTOTYPE
As a conclusion I am very happy with the outcome as our client was very friendly and gave me a lot of freedom in terms of design. I loved creating the brand of the company who creates environmentally friendly products for it customers. The background theme is made as a reference to the utility of the product. The colours used are White, Black, Light blue ( 9accef) and Dark Blue ( 4466ae). Font used GeoSans Light, type Regular. A set of guidelines will also be produced by March 2020 and the website will be completely live by the end of 2020 as planned by the client as the company will start running right at the beginning of 2021.