Interactive Design - Project 1

INTERACTIVE DESIGN - PROJECT 1

08/09/20 - 08/10/20/ Week 3 - Week 7

Ibrahim Fazal Ahmad / 0337423

Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylors University

Project 1

INSTRUCTIONS

Week 3: We were tasked with having to design a website layout for a website of our choice, I had chosen to make a website for my favourite game, Overwatch. I really like all the bright colours and characters and thought making a website for them would be an interesting task. I made a basic wireframe for the website:

Figure 1: Overwatch wireframe sketch.

WEEK 4: After doing this simple wireframe I polished the website using images and content about the game I found online. 

Figure 1.01: Overwatch website Design 1

After showing this to Mr Shamsul, I got some feedback that I should try going for websites that I would consider "bad" or "difficult to use", and try to fix those websites rather than going for a game with a much better website than mine and would be nearly impossible for me to top. With that piece of advice, I decided to redesign the Sunway Pyramid website. My friends and I wanted to go there and check the stores online before and we were getting so frustrated using the website, they knew I had this assignment and suggested for me to try and redesign the website.  Here are a few screenshots of the website:

Figure 1.02: Landing page

Figure 1.03: Landing page

Figure 1.04: Landing page

Figure 1.05: Landing page

After looking through just the landing page I was really frustrated. When someone goes to this website, they most likely already know that it is a shopping mall and would like to see the amenities and how to get there. But here, you see a lot of clutter and disarray. It feels like a brochure rather than a website for a shopping mall. 

Main problems:

• Clutter
• Disorganised
• Unimportant information
• No clear call to actions

WEEK 5: I did a really simplistic wireframe sketch for the website and showed it to Mr. Shamsul to get some opinions on it. He agreed that the website was very cluttered and said it looked like a bunch of advertisements, like a brochure. After looking through the sketch I got the all-clear to start digitising it, I was just advised to use Adobe Illustrator and not Photoshop. 

Figure 1.06: Sketch of the Landing page.

What I decided to change was the level of information on the landing page. I made the main call-to-action as the magnifying glass asking where they would like to go as I most people coming to this website would like to know whether the store they're interested in is here. Next, I put a directory for the shops and categorised it based on its type: Food, Clothing, Entertainment, and Beauty. Lastly, I put a location for Sunway Pyramid and different methods of getting to the mall. 

WEEK 6: I did the new website landing page design on Adobe Illustrator to keep the quality high with vectors. During class we had just worked on a different exercise so that we will be prepared for our Project 2. The image below was my first draft on the design. 

Figure 1.07: Landing Page Design 1

After looking through some of my seniors' work and analysing my own design, I made some very minor changes to the layout, specifically the font weights.

Figure 1.08: Landing Page Design 2

Here is the final presentation about the landing page design proposal. 

Figure 1.09: Final Presentation

FEEDBACK:

Week 4: Try to make a website for something that already exists but has a bad website, Overwatch's website looks very professional. Look for something else unless you can do better.

Week 5: The design looks fine, continue onto designing the polished version on Adobe Illustrator.

Week 6:  -

Week 7: -

REFLECTIONS: 

WEEK 3: This task seems really interesting and I'm excited to design a website for a game I really enjoy. I am a little worried because we need to bring this design to life in our second project by making it in Adobe Dreamweaver. I have had some experience with Adobe Dreamweaver in the past as I took IGCSE ICT however, it has been almost three years since I have actively used Dreamweaver. Hopefully, my knowledge from then has still stuck around. One observation I made was that most if not all websites have a CTA (Call-to-action), to keep the user engaged and interested. One finding I made was that every HTML element can carry both the ID and Class attributes. 

WEEK 4: This week I had done most of my website for Overwatch, however, I was told by Mr. Shamsul that I shouldn't be focusing on a game that already has a website that is very good, as I will be compared to that. Unless I can do better, since I most definitely cannot do that with my level of expertise, I have to come up with a new idea. I ended up settling with the Sunway Pyramid website as I remembered my friends complaining about how difficult and cluttered the website was. One observation I made was that Overwatch had a very well designed website that was really engaging and had a really clear call-to-action on the page. One finding I made was that very small mistakes in Dreamweaver can cause your code to not function, so you must be very detail orientated when working. 

WEEK 5: This week I had shown my really rough sketch to Mr. Shamsul about how I could redesign the Sunway Pyramid website. Firstly, he asked me to show him the website and point out its flaws. I pointed out how it was very unintuitive, cluttered, and inconsistent with its design. After agreeing, I proposed my idea, to which he gave me the all-clear and allowed me to start working. One observation I made was that the Sunway Pyramid website worked rather well and had some nice animations, it is just very unintuitive and cluttered. One finding I made was that we can change the colours of the headings after we click them on websites through Dreamweaver.

WEEK 6: This week I had finished my landing page a little early, but during class, we were doing some exercises instead and focused on that. Mostly learning about flexboxes and float boxes. It was honestly really hard to understand at first and I really struggled with understanding and doing the exercise personally. However, I managed to finish the in-class exercises, but with the given exercise as homework, I am a little worried as it seems really hard. One observation I made was that you can name your classes and ids anything you want, as I had thought they needed to be named a specific name to work originally. One finding I made was most products have a rather similar branding, such as skincare products. They will all be different brands but their websites gave the same atmosphere when using it. 

WEEK 7: This week we had to submit our landing page design on Google Classroom along with the exercise from last week. Now we have to move on and start designing the websites we illustrated onto Dreamweaver. I am a little scared for this project moving forward as I personally think I'm a novice at coding and such. However bootstrap seems like it could really ease my difficulties. This worries me because the design I had in mind is rather complex and difficult to achieve. Hopefully, it will work out. One observation I made was that a font can sometimes make or break a website, changing the font on my layout exercise had changed the mood and quality so drastically I was quite shocked. One finding I made was that bootstrap has a lot of interesting elements that can be added from their websites.