Interactive Design - Project 1

 

1.4.21 - 2.5.21 (Week 3 - Week 5)

Sajiya Mir (0340836)

Interactive Design

Bachelor of Design (Hons) in Creative Media

Project 1

---

Instructions

---

Week 3 : 

This week we were to decide our Topic, Purpose, Call to the purpose (CTA), and the Target Audience. While randomly growing websites I came across the MET website and felt the website could use some improvements, all the information was clustered up into one page and it was a bit confusing to navigate. So I decided to use this as my topic and for the project, I would try to make a subgroup and focus on only the art collection part of the website. I decided: 

Topic: Metropolitan Museum Of Art New York 

Purpose: is to look at the art collections, events happening and to buy tickets.

CTA: Visit us  

Target Audience: Art students, the General public (anyone who wants to see the art gallery)

Fig.1.0 Current Met website

Week 4 :

After deciding our topics we had to come up with 3-5 sketches for our website landing design.

Fig.1.1 Sketch 1 Website landing page (17/4/21)

Fig.1.2 Sketch 2 Website landing page (17/4/21)

Fig.1.3 Sketch 3 Website landing page (17/4/21)

For my final sketch, I tried to combine the elements that I liked from my other sketches to make a new sketch. 

Fig.1.4 Sketch 4 Website landing page (17/4/21)

Then I browsed the internet to find inspirations for the color scheme and possible layout. A couple of designers I really liked had a good aesthetic that I felt fit the art museum look. 

Fig.1.5. Design by Daniel Korenowskiy, Ivan Korenowskiy, and Andriy Dopilko

Fig.1.6 Design by Daniel Korenowskiy, Ivan Korenowskiy, and Andriy Dopilko

Fig.1.7 Design by Tjerk van der Heijden

Week 5:

After we got our wireframe approved we proceed to make our final website landing page. I decided to use illustrator to do my design. The first thing I did was go to the MET website and find all the images I wanted to use. I looked at their painting collections and found images that would go with the color scheme I wanted. Then I piled all the images up next to each other to give it the sliding effect. I turned down the opacity of the images in the back and made the text also a grey color. This was to put emphasis on the image in the front and give the effect of the user viewing that one painting. 

Fig.1.8 Progress 1  (2/5/21)

Next, I worked on the header and section 2. For the header, I used photoshop to extend the image I was gonna use by merging it with a box of similar color. This is so that the image fits the layout without having to stretch the image. 

Fig.1.9 Photoshop edit (2/5/21)

Next, I added all the text need in illustrator and added the line to give separation to the navigation section of the header. I had to recreate the MET logo using the pen tool and add that in too. I even tried changing the background color for section 1, but in the end, decided to revert back to the original black color. 

Fig.2.0 Progress 2 (2/5/21)

For section 2 of the layout, I worked more with the typefaces and tried to see how to introduce hierarchy with the information. For the directory of the events, I added a clear box around the words to let the user know which one they are viewing right now. Same with the image slider the dots are of different sizes compared to the top one so that it seems like the top image is currently being viewed. For the footer, I found icon vectors that I used for the social media links and like the other section, I added lines to give some separation between the sections. 

Fig.2.1 Progress 3 (2/5/21)

The last thing I did was align all the text and used the same fonts throughout. Then I tried to see if my design met all the criteria set by Mr. Shamsul: 

• Is the size suitable for any screen resolution?
• Does the CTA clear and visible?
• Does the images used in the layout appropriate with the content?
• Is the hierarchy of information clear?
• Does it have enough whitespace in the layout?
• Does the text readable and legible?
• Does the element in the layout is well aligned?
• Is the color used in the layout appropriate?

- Final Outcome -

Fig.2.2 Final Landing page - jpeg (2/5/21)

Fig.2.3 Final Presentation slides (2/5/21)

---

Feedback 

Week 4:  Mr. Shamsul like my sketch 3 the most and suggested I proceed with that. He also suggested I try to add white space to my layout. 

---

Reflection 

Experience:  Designing a website landing page was something new and really fun for me. As someone who has spent a lot of time browsing websites and apps, I understand what features and layouts are easy to navigate. Combined with what we learned in class, this exercise easy to understand and complete. I displayed my creativity in the project, too, and I was happy with the result. 

Observations: When looking for ideas, I found that many museum website redesigns used a darker background and color scheme. This is in contrast to current museum websites, which have a white backdrop and use vivid colors.

Findings: Typography has a major impact on a website's appearance, feel, and usability. I had to go through many fonts to figure out which one would work best for the layout and subject. It also had to be easy to read.