Interactive Design: Project #1

15.04.2021 - 01.05.2021 (Week #3 - Week #5)

Seerat Tayyab Mukhtar Qureshi - 0345576 (BDCM)

Interactive Design

Project #1

---

Lectures:

Week #3: We learnt the difference between UI and UX design. UI stands for User Interface and UX stands for User Experience. UX designers are focused on the structure and layout of content, navigation and how users interact with them. UI design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access. 

Interface design has 5 golden rules identified by Jakob Nielsen, User Advocate and Principal of the Nielsen Norman Group. 

• Ease of Learning

• Efficiency of Use

• Memorability

• Minimise Errors

• Satisfy the User

Next, we looked at the anatomy of a website.

Fig 1.0: Screenshot from lecture slides

These are all the factors we need to consider when designing a website and this guide will help us with our layout which leads to the introduction of our first project.

Mr Shamsul introduced us to our first project. To start off we need to design a static website layout in either Photoshop or Illustrator.

Instructions:

Module information booklet:

Project #1

To start us off, Mr Lun provided us with a wireframe that we can use to design our static page. We also needed to pick out a topic, purpose, audience and call to action.

Fig 1.1: Mr Lun's wireframe

Mr Shamsul said we should pick a topic we are interested in so I decided to go with streetwear/fashion.

Topic: Streetwear fashion

Purpose: To let people know what's trending currently in streetwear and fashion. I will talk about brands, articles of clothing and where these can be purchased from.

Audience: Young adults, people interested in fashion/trends.

CTA: Explore/Browse

We also had to find some visual references of websites that we can be inspired from.

Fig 1.2: https://vj-type.com/15-jager

Fig 1.3: https://universalfavourite.com.au

Fig 1.4: https://www.bennett-tea.com

Since my topic is streetwear and trendy fashion, I want my website to also be modern but at the same time not basic or too simple. I did three sketches following the wireframe. 

Fig 1.5: Abstract style sketch 

Fig 1.6: Modern & boxy style sketch 

Fig 1.7: Oval style sketch

I liked the oval style the most because it's a really nice combination of retro and modern which is what current street style trends are, so it will be well suited. 

I started by preparing my images in Photoshop. 

Fig 1.8: Preparing images

Fig 1.9: Final static page design

Fig 2.0: Final submission

Feedback:

Week #3: Mr Shamsul said he's okay with my idea. Mr Lun suggested that I can put the fashion season in the header of my website and then add a call to action to that such as BROWSE or EXPLORE. I can also talk about specific brands and then add links to their websites.

Week #4: Mr Shamsul liked my oval sketch as well he said my others were nice too but if I wanna go for the modern and boxy one I have to be careful because it can become too confined and tight. He said I can go ahead and start making the final version.

Week #5: We submitted our work and Mr Sham will give us feedback.

Reflection:

Week #3: I am excited about this project because we have the freedom to do it on a topic we like so that makes it interesting. We also have the creative freedom to make the website any way we want as long as it makes sense and is designed well. I have never really made a website layout before so this will also be a cool learning experience.

Week #4: I'm glad both Mr Shamsul and Mr Lun liked my sketches and told me to go ahead with them. I am excited to work on something I am interested in and develop my skills.

Week #5: I was a bit nervous about this because I have no experience in website design but I actually had a lot of fun designing a website with all the creative freedom. Since it was a topic of my interest I enjoyed picking out information and designing elements. It was a bit hard to get it to actually look like a real website but nevertheless, I learnt a lot.