INTERACTIVE DESIGN - PROJECT 1



04.04.2019 (Week 3 - Week 4)
Rausha Aminath (0337000)
Interactive Design
Project 1


LECTURES

Lecture 3: 
18.04.2019 (Week3)




INSTRUCTIONS



WORK


Week 3

We started our project 1 by planing out our wire frame after choosing our topic of interest, during the class and showing it to Mr.Shamsul. I chose to make a website one of the albums of my favourite band, OneRepublic. After getting approval from him, we were to start building up our landing page in either photoshop or Illustrator. I started my work on illustrator after Mr.Shamsul approved my design.

I started off by looking at some existing samples of some musicians and also samples of landing pages I liked.

James Arthur Official Page

Sam Smith Official Page
Landing Page References
Initial Design 


Week 4
After experimenting with blending background color, I saw that the background had a dirty look and so I decided to use a photo of the band instead of the album cover. The original album cover was too bright and did not match my color scheme and so I started redesigning and my design did not resemble the sketch I had previously done.

One of the New Designs

Second New Design
I got feedback for the above two designs and Mr.Shamsul preferred the white background and he suggested reducing the amount of content with texts and have summarized text written on the page and also to have video songs on a seperate page.
After Refining
Above is the fixed landing page I showed it to Mr.Shamsul and he said it looks better and has more white space. He then suggested aligning all the photos.
I started working on fixing the layout once again. Played around and created different drafts till I found the best fit.

Some of the Draft Layouts
Final Layout (Two Versions, White (left) Black (Right)
Process 1

Process with drop down




Final Design main page (left) and drop down menu (Right)



Final Outcome - Embedded Pdf


FEEDBACKS


Week 3:

Mr.Shamsul approved my idea of creating a website from an old album of One Republic. He approved my design sketch and suggested having the album art with a low opacity behind as a background for the landing page.


Week 4:
Mr.Shamsul pointed out that I need to insert title for each page and also to leave more white space. I showed all my drafts and he preferred the draft with white background and he gave small details to change. He said to minimize the use of photos that had texts in it and try writing a summary in the page itself.


REFLECTIONS

EXPERIENCE
Week 3:
During this weeks class I was pretty clam and felt like I was sure of what exactly I wanted and this was not common for me so I was excited to start my project 1 right away in the class. I did not want to waste time as my motivation was at peak. It was a pretty productive class.


OBSERVATIONS
Week 3:
I noticed that most of my classmates were taking a lot of time trying to determine their topic for the landing page. I also observed that many existing websites for the topic I chose had a very similar layout.


FINDINGS
Week 3:
I realized that choosing a topic that I found very interested in makes me want to work harder and made me excited for the final outcome. This is so far one of my favorite projects this semester. I found myself being very productive in class and wasting less time procrastinating.


FURTHER READINGS



Week 3

The 12 Do's and Don'ts of Web Design

Don'ts of Web Design


When designing websites, making your design useful and enjoyable is your top priority, which could be overwhelming for a new beginner. There are Do's and Don'ts for web designing.

Don'ts include, not making  users wait for content to load. Avoid blank pages during loading.
Don't open internal link into new tabs.
Don't use too many types faces.
Don't use too many colors in your website.
Don't show automatic pop-ups too early, such as request to subscribe.
Don't use generic photos of people. Many corporate stated are over-using insincere photography, rarely adding to the design and harm the user experience
Don't let promotion steal the show. It is important to acknowledge that anything that looks like an advertisement is usually ignored by users - the phenomenon knows and banner blindness.
Don't play background music or autoplay videos with music. While it works in specific areas it is simply a bad idea for most. Put users in control. Set music to default by allowing them to turn on if they click.
Don't hijack scrolling. Designers manipulate scrollbar to behave differently on their website, which takes control away from them making it annoying for most users. 
Don't use horizontal scrolling. Users usually have no idea they can discover content by scrolling horizontally.

Comments

Popular Posts