Interactive Design - Project 1

10.9.19 - 25.9.19 (Week 3 - Week 5)                               
Abigail Bea Chong Ka Yee (0333966)
Interactive Design
Project 1 - Landing Page Design

---

LECTURE NOTES
Lecture 3: The Web
10.9.19 (Week 3)

Today Mr Shamsul gave us a lecture about the web. He also introduced our first project, where we would have to create a landing page. It would have to be 1920 x 1080 (web large) on Illustrator. We would have to design at least 3 sections.

---

INSTRUCTIONS

---

PROJECT 1 | Week 3

For this project, we had to create a landing page. It could be about our favourite singer, band, or sports team. I chose my favourite kpop group BTS. Initially, I wanted to do a tour page about Stray Kids but I couldn't find accurate pictures. To create a landing page we needed an objective and call of action. Here are my sketches and information about the page I am going to create:

Fig 3.1 Initial idea for Stray Kids

Fig 3.2 Initial wireframes for Stray Kids landing page

Fig 3.3 The confirmed idea for BTS

Fig 3.4 The confirmed wireframes for BTS landing page 

I then proceeded to design the landing page in Illustrator because I'm more comfortable using the tools there than in Photoshop. The pictures used for the project:

Fig 3.5 Image #1

Fig 3.6 Image #2

Fig 3.7 Image #3

Fig 3.8 Image #4

Fig 3.9 Image #5

Fig 3.10 Image #6

Fig 3.11 Image #7

Fig 3.12 Image #8

Fig 3.13 Image #9

Fig 3.14 Image #10

Fig 3.15 Image #11

Fig 3.16 Image #12

Fig 3.17 Image #13

Fig 3.18 Image #14

Here is my progression.

This is my first attempt on the landing page. Mr Shamsul gave me feedback on how the overlapping of the calendar with the image won't work along with too many icons at the top of the header. For the second and third page, it's too boxy and the text looks tightly squeezed. Thus the colour doesn't pop out as inviting to want to subscribe to the website. The Gallery, Location and footer were fine overall.

Fig 3.19 Landing page #1

My second attempt at this was to try to make the calendar into a list of dates so it will be easier to see and I also removed the icons at the header so it won't be distracting. I also tried to move the images around and take out the boxes. And for the colour, I matched it with the main page layout. I wasn't really happy with this so I asked Mr Shamsul for feedback and he told me that the design is not quite there yet and the elements used still look immature.

Fig 4.1 Landing page #2

I made a whole new design instead of following Fig 4.1 because I felt like I wasn't making that much progress. For my third and final attempt at the landing page instead of overlapping the dates on the picture I decided to make it into a smaller section and have only one date showing. I also changed the main page image to a better one where it focuses on BTS more and not as distracting with the flowers. Since the image was black and white it made it easier for me to design the whole layout.

Fig 4.3 Final landing page 

---

FURTHER READING

Bad Design vs. Good Design: 5 Examples We can Learn From by Teo Siang

Fig 1.1 Bad Design vs Good Design: 5 Examples We can Learn From

This websites shows us what is a bad design and good design. It ranges from telling how too much information isn't good for a website; how we should add friction to user actions with caution; a clever design that ignores usability; there shouldn't be that many animations and mystery meat navigation. After reading the article what I gathered from this website is that:

• Understand what is required by your users, then deliver the information.
• If you have to express a lot of information, consider utilizing graphics rather than script.
• Users don't like mystery links make sure to always label them
• Do not attach any complexity to user behavior unless they are meant to dissuade the operation.
• Check and test your clever designs carefully and cautiously.
• Animation is like cursing. It loses all its impact, if you overuse it.