Interactive Design - Exercise 2
22/04/2025 - 26/05/2025 (Week 1 - Week6)
Interactive Design - Exercises
Cindy Noverin / 0376409
Bachelor of Design in Creative Media / Taylors University
Task 1 : Exercise 2
TABLE OF CONTENTS
LECTURES
Week 1
We had a briefing about our this module and upcoming projects that we'll be expecting for this semester. Mr. Shamsul gave us our first exercise which is to do visual analysis on websites that we picked ans begin doing proposal for on one website that can be improved for our next exercise.
Week 2
Design thinking
- Emphatize
- Define
- Ideate
- Prototype
- Test
Usability
- Consistency
- graphic element, layout, color, typography
- avoid back arrows on design layout
- Simplicity
- minimize the number of tabs
- Back then Shoppee needs 15 steps for payment, after updates, it just needs 4 steps
- Visibility
- Subscribe button in Youtube is more red (highlighted)
- Call to action Button
- Feedback
- hover effects, loading time (tell user to wait)
- Gives validation to users
- Breadcrumbs**
- Secondary navigation that displays user's location in the site hierarchy
- Error prevention
- alerting a user when making error
- authentication,
- forget password (new password, confirm password
Week 3
Website structures
there are mainly 3 key elements to website structures which is header, body and footer
week 8
on this week we have independent leaning week and given a selector quiz that we need to finish and show it later on on f2f class
INSTRUCTIONS
Module Information Booklet
Week 2 - Exercise 2
for this week we are given exercise to replicate 2 websites from the 5 website that we do analysis from. however, most of my website cannot be taken full screen so I had to find another two website to replicate which is
and
the result
 |
| fig.1.1. website and replicated comparison |
the first step I do when doing the replication is to adjust the main layout, seperating the text, pictures and also other elements like the click button, etc. then I look for typeface that would look similar to it and actually I did website 2 first and then do nanny services.
for sergio penzo website, the one that I struggle the most is finding the suitable pictures and typeface. I also noticed that everytime I took screenshot of any website its either its not fully screenshot-ed because its too long or the fixed header is stuck in the middle so I had to take another screenshot of the header for reference.
for the nanny services website the one I struggled the most is the inconsistency of the fonts size and amount of graphic and pictures I had to put, its already hard to find symbols that are transparent, let alone making it from scratch. at the end I made the symbols from scratch except for their brand logo and "download" button.
 |
| fig.1.2. Nanny Services Website Replication |
 |
| fig.1.2. Sergio Penzo Protfolio Website Replication |
and here's the progression timelapse
the google drive (ai files and result jpg)
REFLECTION
from this exercises, I learned to do a great analysis on websites and It has helped me in implementing thm when replicating and making new websites in the future. moreover, the second exercise has helped me get familiar with making websites layout and how each element would be displayed.
Comments
Post a Comment