Interactive Design - Project 1
Chan Qian Hui (0334447)
Interactive Design
Project 1
LECTURE NOTES
10.09.19 (Week 3)
For this week, Mr Shamsul talked to us about the web standards and how the web works. He also taught how pages use structure to organise information and some of the basics of html such as opening tags, closing tags and the attributes.
INSTRUCTIONS
PROJECT 1 - LANDING PAGE
For our first project, we were required to design a web landing page using Adobe Photoshop for any bands, artists or brands which we prefer. The website should be HTML based which means it should be a static webpage. The artboard size was set to 1980px x 1080px and minimum of 3 sections were required for the landing page.
For my website, I have chose to create a page for a J-Pop Artist, LiSA. The goal of my website : A website for fans to get updates and schedules about the artist, stream her music to generate views and also send her fan letters.
Research and sketches
 |
| Fig 1.0 Research on good websites structures |
 |
| Fig 1.1 Sketches of sections and wireframe |
Progress of creating the landing page
The 4 sections which I chose are :
- The first section is to attract the fans to follow the page and create a sense of atmosphere in the section which portrays the artist which are rock and pop funk.
- The second section is mainly for people to stream and listen to her album musics. The layout is kept clean to focus the viewer's attention to the center which is the play button.
- The third section is about her latest tour schedule, which also allows fans to purchase tickets directly from the website.
- The last section is my favourite because I wanted to include something special in the website which would attract viewers to come back again. Thus I included a fan letter section where fans can type their message and include photos or documents which will be then sent to the artist. Besides that, I also included the share link so people could promote about this special feature to other people and thus gaining more viewers on the website.
These are the assets and colour palette which I used :
 |
| Fig 1.2 Assets sourced online |
 |
| Fig 1.3 Colour palette reference used |
Progress :
I made 2 landing pages with different structures for the first section.
 |
| Fig 1.4 Progress of creating Landing Page |
 |
| Fig 1.5 Progress of creating Landing Page |
Landing page A :
 |
| Fig 1.6 First attempt |
Feedback :
Mr Shamsul stated that the information in the first section should've been center aligned, the call to action button does not need the shadow and the arrows can be reduced to one only. The words for the information in tour schedule can be smaller but the "buy tickets" button design was good. For the "submit" button it was too big and should be smaller as well.
Final Landing Page A :
 |
| Fig 1.7 Final Landing Page A |
 |
| Fig 1.8 First Attempt |
Feedback :
Mr Shamsul said that the first section for this was much better compared to the other design because the information are balanced. The call to action button is clearer and the button for latest news works as well. Other sections should be fixed as well according to the feedback from landing page A.
He also told me to submit this as the final landing page.
Final Landing Page Design :
 |
| Fig 1.9 Final Landing Page Design |
FURTHER READING
How Visual Design Makes for Great UX (Website)
This website article looks at why people prefer attractive interfaces, what it says about us as humans, and how we as UX practitioners can use this knowledge to create better user experiences. There may be certain interactions or site elements that we feel are attractive because we associate them with usability. At the same time, there are web trends and visual assets that may seem attractive now, but won’t hold the same pull in a few months or years. With the understanding that there is no one “perfectly beautiful” aesthetic, we can now delve into the role of visual design in UX. After all, it’s far more than merely making things pretty.
Comments
Post a Comment