Interactive Design / Project 1 & 2
17.05.2022 - 19.06.2022 (Week 8 - Week 12)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Interactive Design
Project 1 & 2: Landing Page
LECTURES
 |
| Fig 1.0: Thumbnail |
All the lectures are done in Exercise page. To go to Exercise page, click here.
INSTRUCTIONS
Project 1: Prototype Design – Landing Page Design
A landing page is a distinct page on the website that's built for one single conversion objective. A landing page should be designed, written, and developed with one business goal in mind. Students are required to create a static landing page of a microsite from any topic of their choice. The lecturer assigned us to start to create the wireframe/sketches of the landing page, with a minimum of 5 sketches required. From the 5 sketches, students will discuss and choose one of the designs with the lecturer, and then decided on which one to use for the static landing page.
Requirements for Project 1:
- All images used must be royalty-free and not bound to any copyright
- As for the content, students may want to reword or create new content for the project
For this project, I chose to build a webpage with the topic “Online K-Pop Merchandise Store”. I named my store “Keypopies” for no reason, it just randomly came to my mind. The store will be selling most of the K-Pop merchandise such as CD albums, DVDs, fanlights, concert goods, photobooks, season greetings, etc. from various K-Pop artists.
In that case, I decided to divide them into 5 sections, which are the navigation bar, carousel, 2 body contents (Pick Your Artist & Best Sellers), and the footer. And I decided 3 buttons: “Get Yours!”, “More Artists”, and “More Products” as the call to action. I will explain further in the next slides.
I began this project by designing 5 wireframes for my landing page design. Actually, my brain was stuck when I finished 3 wireframes. I have no idea what to put in the rest wireframe, so I just put everything randomly. Here are the 5 wireframes that I designed.
 |
| Fig 2.1.1: Wireframes |
 |
| Fig 2.1.2: Chosen Wireframe |
 |
| Fig 2.1.3: Color Palette |
This is my whole landing page design. There is a total of 5 sections for the landing page, such as navigation, carousel, body content 1 & 2, and footer.
 |
| Fig 2.1.4: Final Landing Page Design |
For this section, there’s a store logo on the left side, followed by 6 navigations: CD&DVD, Lightstick, Merchandise, Search, Cart, and Account. However, not all of the buttons are active (some can’t be clicked) as I will only link some to another page when being clicked. But I will still explain the use of each button.
 |
| Fig 2.1.5: Navigation |
2. Carousel
It is just a simple carousel that consists of 3 carousels. It’s mainly showing the newest arrival product, pre-order product, or ongoing event. The main carousel page I chose here is the “New Arrival” page. It has a “Get Yours!” button which is the main call to action button on my landing page. The button will lead the buyer to the specific product page when it is clicked.
 |
| Fig 2.1.6: Carousel |
3. Body Content 1
For the first body content, I put the container containing the 3 most searched artists with the label Pick Your Artist! as the header.
 |
| Fig 2.1.7: Body Content 1 |
4. Body Content 2
For the second body content, I put the container containing the 3 best seller products with the label Best Sellers as the header.
 |
| Fig 2.1.8: Body Content 2 |
5. Footer
The content inside the footer is just the same as other online shopping websites. It consists of 5 buttons: FAQ, Terms & Conditions, Privacy Policy, Notice, and Return & Exchange which might be helpful for buyers. Buyers will be led to the page that’s chosen if they click one of the buttons.
I also include my store logo there, and below the logo, there’s a customer service contact with a thinner typeface. I put my store copyright after the contacts. At the very bottom, I include 3 social media icons, which will direct buyers to my store’s social media page.
 |
| Fig 2.1.9: Footer |
Here are some K-Pop online store websites that I took for my reference in designing my page.
– https://en.smtownandstore.com/
– https://www.withdrama.co.kr/goods/brand.php
– https://www.ktown4u.com/
– https://withdrama.net/
Project 2: Microsite – Working Landing Page
For the next step of this project, students were told to create a working landing page of the layout design that we did in the past project. This is the extension from project 1. From a prototype to a working website. The task is to develop a microsite that we have proposed in project 1. The website must be fully functioned with a clear call to action. The working landing page needs to be uploaded to Netlify.
Honestly, I thought that this will be easy since I have already done similar things in the exercises that happened in the first few weeks. I was having a hard time while doing this project because of the content arrangement and some CSS didn't work. However, after looking for a solution in Google and asking for help from my cousin who studies web programming, I can overcome the problems and successfully create the landing page.
This is how my landing page looks like after I made it become a working website.
 |
| Fig 2.2.1: Landing Page Final Outcome – Desktop View |
 |
| Fig 2.2.2: Landing Page Final Outcome – Mobile View |
FEEDBACK
- Nice and clean layout design overall
- The color palette looks so good and suitable for the webpage
- Give your store a logo
- Make the first call to action button (Get Yours!) bigger
- Change the second and third call to action (More ...) into a 'next' button
- Make the 5 help buttons well-aligned, don't leave it in a mess with the inappropriate alignment
Project 2
- Try to identify the problems you that encounter and look up solutions in W3Schools
- Remove the padding that you put for the next and previous buttons in the carousel
REFLECTIONS