INTERACTIVE DESIGN - PROJECT 1

13/09/18 - 20/09/18 (Week 3 - Week 4)

Yeap Phay Min (0331073)

Interactive Design

Project 1 - Landing Page Design 

---

LECTURE NOTES

20/09/18 (Week 4)

This week, we got a lecture on type for screen. In the intro of the lecture, we learned about how presenting beautiful type on websites nowadays are easy as there are popular web font services such as Adobe Typekit and Google Fonts. Back in the old days, there were very limited choice of typefaces such as Arial, Verdana, Helvetica, Georgia and Times New Roman. We also talked about web safe colours, web safe fonts as well as system fonts which are the fonts that are installed in the operating system.

PDF of Week 4's Lecture Slides

---

INSTRUCTIONS

13/09/18 (Week 3)

In this class, we were given the brief on our first project, in which we will be designing a static landing page for any one of our favourite singer, band, sports team or movie. We should research on the size/resolution that will be used. In our landing page, we need to include a call-to-action. Colours can be used as well as any fonts from Google Fonts. We should also look up and read about mobile friendly websites even though we are designing for a desktop. It is important to remember the golden rules of interface design as well. This project can be done on either Photoshop or Illustrator. Before the next class, we should already have an idea of what we want to design, with sketches and inspirations. 

I decided to go with one of favourite singer - Shawn Mendes! The target audience are fans or anyone that's interested in knowing more about him and his music. The goal of the site is to promote his latest self-titled album. As for the theme and colour scheme, I decided to go with the style and colours of the album.

Fig1.1: Notes & Site Map

Fig1.2: Wireframe Sketches #1

Fig1.3: Wireframe Sketches #2

Fig1.4: Theme

Fig1.5: Colour Palette

Fig1.6: Selected Font (From Google Fonts)

20/09/18 (Week 4)

For this week's class, we got started on our landing page. We could create it in either Photoshop or Illustrator. Before I started to create my landing page, I took screenshots of websites as my inspiration. We were also told to complete our landing page by the end of the week and submit it on Google Classroom, and have our blog post for this project updated.

Fig1.7: Inspiration for Landing Page

Fig1.8: Process of designing landing page #1 (With the help of reference photos at the side)

Fig1.9: Process of designing landing page #2 (Adjusting the text)

Fig1.10: Process of designing landing page #3 (Using grids to help with alignment)

Here is the first outcome of my landing page design!

Fig1.11: First Outcome of Landing Page

Fig1.12: First Outcome of Landing Page
 (with hover effect for store and gallery)

27/09/18 (Week 5)

With the feedback received, I decided to make adjustments to the store and add in another item so that the overall alignment of the landing page would be better.

Fig1.13: Process of re-editing 

Fig1.14: Final Outcome of Landing Page 

Fig1.14: Final Outcome of Landing Page 
 (with hover effect for store and gallery)

---

FEEDBACK

20/09/18 (Week 4)

General feedback: For the first project, our landing page should have a footer, and the content in there shouldn’t be cluttered. The arrangement of the elements should also  be even and have enough white space. Grids should also be used because alignment is important.

Specific feedback: Mr Shamsul said that it was good that I did a site map and a moodboard as it can help make the design process easier since I already have an idea of what theme I’m going for and what are the content I want to place in my landing page. 

27/09/18 (Week 5)

Specific feedback: Mr Shamsul mentioned that my landing page for project 1 is somewhat acceptable. The elements are well arranged and the information is clear. However, I could add in another item for the store part, to make the overall alignment of the landing page better.

---

REFLECTION

EXPERIENCE

10/09/18 (Week 3)
This week, I got to browse through different websites of celebrities to have an idea of what sort of content they have in their websites. Then, I got to sketch out various layouts as we had to create a landing page for this project.

20/09/18 (Week 4)
For this class, we got to start on creating our landing page and it was pretty interesting for me as I've never created a landing page before. I got to use the sketches I've done and turn them into a digital form on Adobe Illustrator. I also ended up combining my sketches and not sticking to only one of them.

OBSERVATION

10/09/18 (Week 3)
While looking through websites, I observed that there are many different kinds of layouts for a landing page, some with more content and some with lesser content. But the one thing they have in common is that their website's theme revolves around the style of the artists, especially the style of their latest album.

20/09/18 (Week 4)
I observed that while I was designing my landing page in Illustrator, I had to constantly be aware of the alignment and make use of the grids so that the placement of the elements are well aligned and aren't all over the place.

FINDINGS

10/09/18 (Week 3)
I found myself to be stuck at times while sketching because I wasn't sure of the arrangement of the elements. I also realised that making a site map helps me plan and organise my content I want to include in my landing page.

20/09/18 (Week 4)
I found that I enjoyed myself while designing this landing page as it was kind of a fun process to arrange the elements and also because I got to select one of my favourite celebs to do this project on. Also, I realised it is a good thing that we got to start our first project on Photoshop/Illustrator, as it helped me focus on my design and not having to worry about any HTML/CSS coding for now.

---

FURTHER READING

Web Design in Easy Steps by Sean McManus

Fig2.1: Book Cover

This book includes step-by-step guides that are clear and easy to follow to make learning simple. The book also showcases principles of a good web design by guiding readers through the process of creating a site. Fundamentals of layouts and contents for a professional web page are talked about, as well as effective navigation which makes website easy to get around. 

From the chapter of the book that discusses about how devices affect design, it states that various devices will have different capabilities and this should be taken into consideration while making decisions when designing a website. For example, there is a wide range of screen sizes. Even for a desktop computer, the size of the monitors may differ and the window may be opened with different widths. 

I also got to read up about the principles of accessibility. It is important to use a clear and consistent navigation which will ensure that the users can understand how to browse through the web easily. Each page should also have a title to show its purpose. Besides that, making sure it is easy to go straight to the content, is important. It isn't ideal for a web page to have a long and never ending list of content. Instead, provide links for users to go straight to where they want to go. Opening pop-up windows (without warning) are also a big no, as it may be confusing to users when they click the back button but it doesn't work since it's opened in a new window. Designers should also remember to avoid having page layouts that appear to be overcomplicated. If there are too many sections it may be overwhelming for the users when they are navigating through a site.