Interactive Design | Project 1

-

17.5.2022 (Week 9 ) - 6.6.2022 (Week 12)
Nur Allyssa Nabilah Binti Mohd Nizam / 0337796 / BDCM
Interactive Design
Project 1

LECTURE

For all lecture notes, refer to this link

INSTRUCTION



Project 1

With all the knowledge of us learning about websites and the coding languages like HTML as well as CSS, Mr Shamsul finally gave out our Project 1. In this project, we are required to create a landing page with the topic of our own choice.

As a beginning, I decided to just decided to choose a topic and straight away design a wireframe for that specific topic. Below are the wireframes that I came up with based on the topic that I chose.

Figure 1.1 Wireframe layouts (22/05)

To explain the topic and my wireframe briefly, I thought of coming up with a website to promote a newly released book by a specific author. In the following landing page wireframes, I decided to add in the synopsis of the book , about the author, reviews by readers of the book and the contact us page.     

After receiving the given feedback by Mr Shamsul on my wireframe design and the topic I chose. I decided to redo my research and properly note down what I exactly I needed to do for this very project. Below is the list of things I've made for what I need to do.

  1. Choose a topic to my liking (What will this website be about?)
  2. With the chosen topic, Decide what will the purpose of the website?
  3. Come up with the landing page wireframe
With that noted down, I decided to properly do my research on what is a microsite as previously I did not read his brief properly.

Through the research I have done, I found that a microsite is a website where companies use to promote an individual product that they have launched or a campaign.

Topic Choosing

For me to choose a great topic to work with, I decided to list down some of my own interests so I would find it easier for me to come up with a great landing page. Below are some topics that come to mind which pick my interests:

  • Visual Novels (Mangas, Manhwas)
  • Romance Storybooks
  • Food 
  • Music 
  • Video Games
Between the couple of interests I listed down, 2 interests in particular picked my interests and had me have ideas for it.

  • Music 
  • Food 
After looking over both the ideas I've got, I decided to go with Music as my website topic. As I have finally have a solid topic to work with I started diving deep and doing some research on what I could do for the topic of my choice.

Deciding The Website Purpose

With a solid topic in mind which is music, I listed down some ideas that I was able to come up with for this topic as it is still quite a broad topic.

  • Musical Artist Promotional Page
  • Online Registration for Music Lessons
  • Music Reviews
From the three following topics, I thought the my second idea (Online Registration For Music Lessons) had a proper and solid purpose for audiences to visit my website. After finally deciding on a specific topic, I decided to start on working on the wireframe for my website. Below is the new wireframe I came up with for the new website topic.

Figure 1.2 Wireframe Landing Page Updated 

After coming up with my wireframe, I decided to start working on looking for the pictures I need to make my websites prototype. I decided to use the website that Mr Shamsul suggested us to use to look for copyright free pictures which is pexels (https://www.pexels.com/). 

With the amount of intense searching for the images I wanted, I was able to finally come up with a prototype that I was happy with. Below is the finalized prototype of my landing page.

Figure 1.3 Landing Page Prototype

Details about the Landing Page:

1. Home
In this section, I am going to add in a stock image and write up the call to action for the website on to the stock image. I decided that the call to action will be the “Register Here” button as the point of my website is for people to register for music lessons. 

2. About Us
In this section, I thought of giving a brief introduction about the academy on what we would want our students to achieve and showcase the goal my academy wishes to achieve.

3. Courses
In this section, I decided to list out what kind of music lesson that the my music academy has. I decided to put the three usually registered music lesson on the main page. This section also has the "load more" link where the users of the page are taken to a different page to see more lessons offered at my music academy if they clicked on the link.

4. Contact Us
In this section, I decided to use it as a footer as I feel like it is quite fitting as I have referred to other websites on this. It features the contact details of my academy so users could use to contact my music company. It also features the opening hours of my academy as well as where my academy is located at.

As for the color palette I decided to use the color combination of the stock image that I have chosen. Below is the color palette of my website.

Figure 1.4 Color Palette for my Landing Page

FEEDBACK

Week 10

General Feedback:
Mr Shamsul looked over my wireframe designs


Specific Feedback:
Mr Shamsul mentioned that I should either look for a new topic or try looking into the topic more. He also mentioned that the layout of my website is quite messy and its too packed which the eye flow isn't nice. He advised me to look up more on website layouts to help me out on how to make a great eye flow.

REFLECTION

I found this task to honestly be quite tough. The process of me trying to come up with a topic was super hard which gives me very little time to explore more on website layout designs. I felt that my layout design could have been a lot better but I'm still overall quite happy with the design even though it could be more better.

Comments

Post a Comment

Popular posts from this blog

Advanced Typography | Task 1 (Exercises)

-
Image
31.8.2022 (Week 1 ) - 10.10.2022 (Week 7 ) Nur Allyssa Nabilah Binti Mohd Nizam / 0337796 / BDCM Advanced Typography Task 1 (Exercises) LECTURE Week 1: Introduction/ Typographic Systems Since our first ever class for this module lands on a Merdeka Public Holiday, Mr Vinod prepared a YouTube video for us to watch so we will still be on track with our lesson for this module. In the video, Mr Vinod gave an explanation for our MIB (Module Information Booklet) which talked about what are we to expect in this current module. He then gave out our first task which he wishes to see it completed in the following week. What is Typographic Systems? Typographic Systems are systems that provide a structure for designers so they could use to organize their compositions and make them coherent. These systems are broken down into eight major variations. Those variations are: Axial Radial Dilatational ...
Read more

Typography | Final Compilation and Reflection

-
Image
23.8.2021(Week 1) - 24.11.2021 (Week 14) Nur Allyssa Nabilah Binti Mohd Nizam / 0337796 / BDCM Typography  Final Compilation and Reflection INSTRUCTION Task 1: Type Expression and Text Formatting Exercise 1 Part 1: Type Expression Part 2: Type Expression Gif Exercise 2 Text Formatting Task 2: Typographic Exploration and Communication Article Layout Task 3A: Type Design and Communication Part 1: Font Design Part 2: Font Poster Design Task 3B: Type Design and Communication Part 1: Telegram Celebration Sticker Part 2: Telegram Celebration Sticker GIF SUBMISSIONS Task 1: Type Expression and Text Formatting 25.8.2021(Week 1) -  22.9.2021(Week 5) Average Hours Spent: - Research = 2 hours - Sketches and Ideation = 6 hours - Digitization (Still Expression) = 6 hours - Gif Animation = 1 hour - Blog Docume...
Read more

Game Studies | Lectures & Exercises

-
Image
  31.8.2022 (Week 1 ) - ..2022 (Week 14 ) Nur Allyssa Nabilah Binti Mohd Nizam / 0337796 / BDCM Game Studies LECTURE Week 1 No lecture wohoo! (Merdeka Holiday) Week 2: Introduction In this weeks lecture we were introduced to our lecturer Dr Charles. He then continues to give us a briefing of  what are we to expect in this module INSTRUCTION Exercise 1: Personal Gaming History For our first ever exercise, we are required to do a presentation of our personal gaming history. In this exercise, we are required to showcase to the class on what games that we have played and were significant throughout our life (from childhood - now).  After receiving the task, I decided to quickly work on it since it was quite a simple task to complete. Below is a PowerPoint presentation that I have prepared regarding My Personal Gaming History. Figure 1.1 My Pers...
Read more