Interactive Design/Exercises 1 & 2

on
3.4.2023 - 8.5.2023 /Week 1 - Week 5
Sim Jian Xiong (0356498)
Bachelor Design (Hons) in Creative Media
Exercises
LECTURES

Week 1 - Surveying the Possibilities
We started off with a group activity in class by exploring and analyzing different websites. I've written some points that makes a website look good:
  • Avoid overlapping
  • Colour schemes with purpose
  • Suitable for Target Audience
  • Call-to-action button must be visible
  • Website purpose must be clear 
Week 2 - Usability
Meaning: When a user goes to a website and knows what to do

Key Principles of Usability
  1. Consistency
  2. Simplicity
  3. Visibility
  4. Feedback
  5. Error Prevention
For today's class activity, we were assigned to a group and given a scenario to sketch a web prototype. We were tasked with designing a new social media platform for a specific interest group, such as fans of a particular TV show or hobby.
Fig 1.1 Prototype, Week 2 (10.4.2022)

We've chosen movies as our topic and designed a website where you need to sign in to an account to watch movies, write a review and make a tier list.

Week 3 - Colours For Web
Why colours matter in Web Design?
  • help users understand and navigate site
  • improve visitor's online experience
  • respond to your Call to Action button
  • plays a significant role in branding and product messaging
  • increase overall brand recognition
INSTRUCTIONS
 
Exercise 1 - Website Analysis
Our first assignment is to write down an analysis for two websites. I read my lecturer's notes under the assignment and tried my best to observe and analyse two websites.
 '
Fig 1.2 Website Analysis Final Submission, Week 2 (8.4.2022)

Exercise 2 - Web Replication
Our next task is to replicate two existing websites' landing page that are given in the list. We're allowed to use Adobe Illustrator and Photoshop for this task.

Website 1: Wobzer
Fig 1.3 Original (Left) Vs Replication (Right), Week 3 (17.4.2022)

I started off by taking a screenshot of the website landing page. Since we were told that we didn't have to use the same exact image, I used stock images online.

Fig 1.4 Original (Left) Vs Screengrab (Right), Week 3 (17.4.2022)

There is a section where it displays a resume template and I managed to find that template by clicking through the website. So, I photoshopped an image and filled in bogus details to use in my replication for maximum authenticity.

Fig 1.5 Before and After Kerning, Week 3 (17.4.2022)

As the text layout, I've attempted to match up mine with the original as close as possible by kerning and tracking, as I've learned during my time in Typography.

Fig 1.6 Replicating Assets, Week 3 (19.4.2022)

I found it difficult to find similar vectors or icons used in the website, so whenever possible, I replicated some of them.

Fig 1.7 Adding Shadows, Week 3 (19.4.2022)

Finally, I noticed some parts have shadows so I replicate them with brush strokes and Gaussian blur.

Fig 1.8 Original (Left) Vs Replication (Right), Week 3 (21.4.2022)

Fig 1.9 Replicating Assets, Week 3 (21.4.2022)

Similarly, I screenshotted the website, used similar stock images and replicated some icons. I used the gradient tool to achieve the fading effect.

Final Submissions
 
Final 2.1 Web Replication Final Submission (Week 3, 21.4.2022)
FEEDBACK

Week 2
General Feedback: Too simple = bland
Specific Feedback: Miss out on Save, Share, Favourite button

Week 3
General Feedback: Mr. Shamsul's Mental Health Tip of the Day - "Don't Overthink"
Specific Feedback: None
REFLECTIONS  

Experience
Exercise 2
Even though it's unnecessary, I enjoyed replicating the icons for the websites. Almost as if I'm creating my own.

Observation
Exercise 2
I noticed that I learned better through examples. As I'm new to this module, I lack knowledge in creating a website, so by replicating an existing website, I'm slowly becoming aware of a website's layout and structure.

Findings
Exercise 2
Halfway through my first replication, I realised that I may have picked the longest website on the list. But I refused to start all over. I should've check and compare other websites given. I gave myself stress.

Comments

Post a Comment