Interactive Design - Project 1
Atiqah Farzana Binti Syalleh Karimyee (0336740)
Interactive Design
Project 1
LECTURE NOTES
INSTRUCTIONS
Module Information Booklet:
EXERCISE
Project 1 - Landing page Design
Week 6 (20/05/20)
Our first project is to make a landing page for a website of our choice. I chose GOLF which is a clothing brand.
Firstly, I went to the official GOLF website to see what it currently looks like.
 |
| Fig 1.1 GOLF Website Landing Page |
The page was very, very lengthy. However, it seemed as though the content was sort of repetitive or unnecessary to be placed in the landing page (older collections, the same collections but with different pictures, newest releases not being on top, etc.).
I then looked up other similar brands so I can compare them better.
This one is the Vans website:
I then looked up other similar brands so I can compare them better.
This one is the Vans website:
 |
| Fig 1.2 Vans Website Landing Page |
The length of the landing page is not as lengthy, which I prefer. The content of the page is diverse and more interesting and engaging. There are even videos/ gifs which add a pop of excitement to the visual. However, this can also be a disadvantage to some people who are sensitive to flashing lights or do not like moving images.
This is the Converse website:
 |
| Fig 1.3 Converse Website Landing Page |
This landing page is much shorter and compressed, however, I feel like it's a bit boring. Although it is clean and has a minimalistic layout, I don't think it matches Converse's whole brand. The first two sections are clickable, while the last container is a collage of different pictures that will enlarge slightly when you hover your cursor. It's visually responsive and somewhat playful but that's pretty much all there is to the page.
This one is also incredibly lengthy, and I did not like the layout at all. It all seemed very messy and not cohesive. The prices were displayed right up-front which I did not like, however, I understood that their brand sells staple, necessary clothing items which is probably why they did that. More exclusive brands would likely just have pictures/ lookbooks that show the products, and the prices will not be stated so boldly.
After looking at all of these pages, I had to find a middle ground of what I liked and what I wanted to include in my landing page.
For planning, I jotted down the brand's purposes and elements I wanted to include.
After looking at all of these pages, I had to find a middle ground of what I liked and what I wanted to include in my landing page.
For planning, I jotted down the brand's purposes and elements I wanted to include.
 |
| Fig 1.5 Planning |
After having a clear idea of what to do, I came up with a few layout designs.
 |
| Fig 1.6 Layout Sketch 1 |
 |
| Fig 1.7 Layout Sketch 2 |
I think my first layout sketch is kind of basic so I decided to go with the latter. I noticed that I didn't like the long landing pages so I want to make mine compressed and simple.
I think the way I sketched it did not really convey how I wanted to do it, but basically the landing page is just the entire web screen, and to see the sections you can just scroll down/up. The header (consisting of the 'GOLF' logo, hamburger menu, cart symbol and bottom arrows) will be fixed while only the different sections can move.
Here is a mockup of the layout:
I think the way I sketched it did not really convey how I wanted to do it, but basically the landing page is just the entire web screen, and to see the sections you can just scroll down/up. The header (consisting of the 'GOLF' logo, hamburger menu, cart symbol and bottom arrows) will be fixed while only the different sections can move.
Here is a mockup of the layout:
 |
| Fig 1.8 Mockup Layout |
 |
| Fig 1.9 Mockup Layout (Compiled) |
As for the hamburger menu, this is what I envision it to look like when it is clicked on:
 |
| Fig 1.10 Hamburger Menu |
After showing my work, Mr. Shamsul suggested that I change a few things.
- Change picture in first section to clothes
- Shopping cart icon- make it better and smaller
- arrow pointing downwards- make it wider, only on the top section and no need for the rest
- show more of the clothing items!
The picture in the first section as it was a bit confusing to him, and potentially other users too. He said that using an image of the clothes would be more relevant and appropriate for the website instead of the picture of the flamingos. He also told me to show more of the clothes, possibly in the lookbook section or anywhere else too.
I realised that I never put myself in the perspective of someone who doesn't know the brand. If I were to stumble across this website without knowing GOLF, it wouldn't be much help to see an image of flamingos right on the landing page. I definitely have to take this into consideration as I build my website later on.
I made the necessary changes and this is the final layout:
 |
| Fig 1.11 Final Layout |
Mr. Shamsul said it looks more like a clothing brand now because I added more clothes in. Mr. Lun said that Bootstrap would be very easy to use as my layout follows the grid layout.
Here are my slides for my layout:
Fig 1.12 Project 1 -Slides
 |
| Fig 1.13 Final Layout (Compiled) |
FEEDBACK
Week 6 (20/05/2020)
Specific feedback: Mr. Shamsul asked me to (1) change picture in first section to clothes instead of the flamingos, (2) make a new shopping cart icon- make it better and smaller, (3) add an arrow pointing downwards- make it wider, only on the top section and no need for the rest, and (4) show more of the clothing items.
The picture in the first section as it was a bit confusing to him, and potentially other users too. He said that using an image of the clothes would be more relevant and appropriate for the website instead of the picture of the flamingos. He also told me to show more of the clothes, possibly in the lookbook section or anywhere else too.
Week 7 (27/05/2020)
Specific feedback: Mr. Shamsul said it looks more like a clothing brand now because I added more clothes in. Mr. Lun said that Bootstrap would be very easy to use as my layout follows the grid layout.
REFLECTION
Experience: Week 6 (20/05/20); I was quite anxious starting this project, as our coding exercises seemed to be getting more difficult. As we were just showing our layouts this week, it was still fine but it feels like the calm before the storm. Week 7 (27/05/20); I was very pleased that the feedback that I received did not ask me to make any drastic changes to the layout and I could already start doing the website.
Experience: Week 6 (20/05/20); I was quite anxious starting this project, as our coding exercises seemed to be getting more difficult. As we were just showing our layouts this week, it was still fine but it feels like the calm before the storm. Week 7 (27/05/20); I was very pleased that the feedback that I received did not ask me to make any drastic changes to the layout and I could already start doing the website.
Observation: Week 6 (20/05/20); All of my classmates chose different types of websites which was interesting and refreshing to see the diverse websites layouts. Week 7 (27/05/20); After seeing my classmates' layouts, I observed that a layout must suit the specific brand or company that you are representing, and it is very important that the layout properly communicates that. From this, I also learned that a layout doesn't necessarily have to be complicated or extravagant to look good.
Findings: Week 6 (20/05/20); I realised that I never put myself in the perspective of someone who doesn't know the brand. If I were to stumble across this website without knowing GOLF, it wouldn't be much help to see an image of flamingos right on the landing page. I definitely have to take this into consideration as I build my website later on. Week 7 (27/05/20); I found that creating a layout takes a lot of time and thought behind each decision, as it must be both attractive to the eyes as well as functional as a website.
Comments
Post a Comment