Interactive Design - Project 1
Glen Owen / 0354952
Interactive Design / Bachelor of Design (Hons) in Creative Media
Taylor's University
INSTRUCTION
Fig 1.1 Interactive Design MIB
PROJECT 1 - Landing Page Design Prototype
In this project we are tasked to design a landing page of a website of our choices that we feel has a design issue. Our landing page should be designed to improve the user experience and address the design issues we have identified in the original website. The landing page should also consist of a Call-To-Action button that directs user to the most important part of the website.
Fig 2.1 Hobbylink Japan website
Firstly, I feel like the categories shouldn't be put at the side and it needs some label so people can easily navigate them. For the second problem, there are too much selection in the landing page which could take a while to load so I am planning to redesign it to make the selection lesser than the original website. Lastly, the color choices kind of not complementing each other.
To make the website have a good look, I decided to make some wireframes first in Adobe XD. I decided to use Adobe XD than Figma because Adobe XD looks more simple and they provide some plugins that can give us assets. I was wondering how much wireframes I should make until one of my course mate tells us. As for my case, I decided to make 4 wireframes because 4 are enough for me to design a good layout for this website.
Fig 2.3 Wireframes in Adobe XD(Week 5, 04/05/2023)
After doing this wireframes, I ended up designing the website using combination of this wireframes layout I made. The next thing I do is to choose a color palette for the web. I picked two type of color harmony in Adobe Color which is the Shades and Split Complementary colors.
Fig 2.4 Split Complementary Color Palette (Week 5, 05/05/2023)
Fig 2.5 Shades Color Palette (Week 5, 05/05/2023)
Fig 2.6 Designing process (Week 5, 05/05/2023)
For the layouts I was inspired by some multiple type of online shopping websites like Amazon, Shopee, and etc. The idea I am trying to apply in this website it to give the label a vector logo in each categories. I use two type of fonts which is Futura Std and Montserrat, I use Montserrat font to emphasize some important parts of the website while Futura Std as a default font. I made the CTA button color yellow to attract attention of the audience to click that button in order to sign in as a member.
Fig 2.7 Designing process (Week 5, 06/05/2023)
The motivation for blurring the "Daily Spotlight Items" image was to imply that there is a lot of items being suggested everyday. As for the "Monthly Ranking" category I stay with the original design but instead of putting it at the top of the website I put in in the middle area of the website. I added another CTA button at the footer of the website just in case the audience missed the top one. I opted a "Back to top" button to give the audience an easier way to go back to the top of the website instead of scrolling back.
Fig 2.8 Final design of the new Hobbylink Japan website (Week 5, 06/05/2023)
After showing it to Mr. Shamsul, he said that I just need to refine the design a little but the design itself is clean and it's good to go. He also suggested me to use pictures instead of icons for the categories label. In this case, I took some picture from the website itself as the main icon. I changed some of the fonts used in this design but it's still Futura Std and Montserrat.
Fig 2.9 Replacing icon to pictures (Week 6, 08/05/2023)
After 2 weeks of our Project 1, Mr. Shamsul decided to give feedback for our Project 1 for the last time just to make us change our mind on the design or just let it be. Personally, after he told me if I am satisfied with the design or not, I kind of hesitate to say if I'm satisfied. So in the end, I did some little adjustment to improve my final design and the difference are really impactful. I also did some changes on the color, I picked a color palette from colorhunt.co since they have a lot of options for me to choose.
Fig 2.10 Color palette I chose (Week 9, 29/05/2023)
Fig 2.11 Final Design (Week 9, 29/05/2023)
FINAL SUBMISSION
Fig 3.1 Final Submission Embedded Link (Week 6, 08/05/2023)
Fig 3.2 Final Submission JPEG form (Week 9, 29/05/2023)
FEEDBACK
Week 6 (08/05/2023)
- Instead of using icons, use pictures instead
- Centralized the contents within a margin
- Resize the icon label smaller than the original size
Week 9 (29/05/2023)
- Curves are too big
- No need to add "More"
- Change the logo
- Improve the color palette
- Adjust some of the navigation size
- Add thumbnails to certain areas
REFLECTION
My first impression on doing this project are pretty stressful. It's reasonable why I got stressful since I didn't read the MIB in the first place. There's some part of the instruction in the Google Classroom that I found confusing, but in the end I asked Mr. Shamsul just in case if I did it right or not. Even though I am quite stressful, I stayed calm as usual and did the task. It all went smoothly and I had fun designing it. When the work is done, I can't believe my own eyes that I really designed a website cleanly. Well, this is still the first project which is just designing. The real challenge I'll face is the next one which is to make a real working website. Anyway, I look forward on the next project and see if I can suffer more in this module.
Comments
Post a Comment