Design Exploration - Project 2: Design Expansion
18.10.2023 - 08.12.2023 ( Week 8 - Week 15 )
Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative Media
Design Exploration
Project 2 - Design Expansion
INSTRUCTIONS
PROGRESSION
Week 8
In week 8, I came up with an idea to create a brand for milk and create a website for it. So, this week, I decided to create the branding first. My idea was to connect my HONOR artwork with the brand. Since my artwork is related to mooncakes, I want it to be milk or mooncake-related. Initially, I wanted the brand to be a Chinese translation of the Mooncake which is "yuèbǐng" (月饼). Here is the first trial of creating the brand logo and name. I used Procreate.
Week 9
By this week, I came up with an idea to make the logo to be more fluid and fluffy. Here is my logo.
Then, I looked around for the heading and body typeface for the brand. I decided to choose these typeface.
The next thing I did was to find the brand color. I decided to choose blue and some white for the brand because it matches the most with milk.
In week 10, I planned to list the products that I wanted to make and create a mascot for the brand, and here is the conclusion from what I made.
The main product would be whole milk followed by some items for the events that I created for the brand that can match my HONOR artwork. I also tried to find some references from Behance and Pinterest.
Week 11
The first thing I did was to find some mock-ups for the packaging, I tried to look on Freepik and Behance. After finding the right mock-up that I can access, I designed the packaging using Adobe Illustrator. Here are my attempts.
Then, I put my design from Adobe Illustrator to Adobe Photoshop to make the mock-up, and here are the results.
Week 12 - Week 14
After designing the product, I decided to add the paper bag design and I just made a simple design.
It came in 2 sizes with different colors. Then I started to work on the website. The first thing I did was to list what pages I wanted on the website. These are the ideations.
And this is what it looks like on the website.
I made the home page next, I decided to make the CTA button to be "shop now" which will lead the user to the shopping page. This is how it looks like when the user lands on the homepage
Then I want the next content to be the event showcase so I designed it to be like this. I used ChatGPT to help me create the event details. I also added a moving banner on the top of the event secetion.
When the user clicks on the "more details" button, it will lead them to a more specific page about the event.
I asked ChatGPT to help me with the information. This page contains:
REFLECTIONS
It came in 2 sizes with different colors. Then I started to work on the website. The first thing I did was to list what pages I wanted on the website. These are the ideations.
I started off by creating the local styles which are the colors for the website.
Then I made the navigation bar
Then I made the navigation bar
And this is what it looks like on the website.
I made the home page next, I decided to make the CTA button to be "shop now" which will lead the user to the shopping page. This is how it looks like when the user lands on the homepage
Then I want the next content to be the event showcase so I designed it to be like this. I used ChatGPT to help me create the event details. I also added a moving banner on the top of the event secetion.
When the user clicks on the "more details" button, it will lead them to a more specific page about the event.
There is a "more details" button that if you click it, a pop up page will appear.
The next section under the event section is for hot selling items showcase which is in the form of carousel.
And for the more bottom part is the footer.
Here is the full page of the home page.
About Us Page
The next section under the event section is for hot selling items showcase which is in the form of carousel.
And for the more bottom part is the footer.
Here is the full page of the home page.
About Us Page
- Introduction about MooJoy
- Story about MooJoy
- Why MooJoy
Here is the full page.
This page contains the product from MooJoy.
Shop Page
When the user clicks on the "+" button a pop-up page will appear to confirm their decision to add the items to the cart.
To showcase their cart, the user can click the cart icon on the top right of every page. This is how the cart page looks like.
When the user clicks submit, a pop-up notification will appear.
To showcase their cart, the user can click the cart icon on the top right of every page. This is how the cart page looks like.
After the user clicks on the "check out" button, there will be some steps they need to do and these are the pages.
On this page, the users can send us a message about any inquiries.- Fill out information
- Order Summary - to make sure their purchase is correctWhen the user clicks the check out button a pop-up notification will appear.
- Order Status Page - after completing the purchase
If the user wants to see their receipt they can click the button and the receipt will appear like this.
Contact Page
When the user clicks submit, a pop-up notification will appear.
REFLECTIONS
For this project, I was a bit stuck in the ideation. I decided to try doing something towards graphic design as my internship is coming. I decided to create a brand with the help of ChatGPT. I looked for references from Behance and Pinterest. It was very interesting because my specialization is UI/UX. I learned that even if we are UI/UX students, it is important for us to have graphic design skills. I believe graphic design is one of the important skills that every designer should have.
Comments
Post a Comment