Interactive Design - Exercises
28.8.2023 / Week 1-
Marcus Leong Ka Shing 0363643
Interactive
Design / BA of Design (HONS) in Creative Media / Taylor's University
Exercises
LECTURES
Week 1:
For this week, Mr. Shamsul conducted a session where he reviewed the module
information booklet, elaborated on our upcoming projects and assignments for
the semester, and provided guidance on the first task. We were directed to
download Dreamweaver, sign up for Netlifly, and start our initial assignment,
which involves analyzing a website from a given link. Moreover, he included us
in a WhatsApp group, facilitating communication among us for any queries
regarding our tasks.
Week 2:
Usability is about how user-friendly and effective a digital product is.
It's crucial for design because it directly impacts the user's experience
and a product's success. Key aspects include:
1. Consistency: Keeping the design uniform throughout the application for
predictability.
2. Simplicity: Making designs straightforward for quicker, more efficient
use.
3. Visibility: Ensuring elements are easily noticed and accessible.
4. Feedback: Providing clear feedback on user actions.
5. Error Prevention: Guiding users on error recovery.
Week 3:
The structure of a website is vital, impacting user experience, SEO, and
overall success. Key elements include:
1. Header: The top webpage section with the logo, menu, and contact info,
offering quick access to essential information.
2. Body: The primary content area with text, images, and multimedia.
Organizing content here is crucial for readability.
3. Footer: Located at the webpage's bottom, it includes copyright info,
links, and contact details, offering closure and extra navigation.
For organized content, use headings (H1, H2, H3) for hierarchy.
Navigation menus aid user movement. Use clear labels and consider dropdown
menus for complex sites.
INSTRUCTIONS
Exercise 1
For our first exercise, we were told to write a 500 word analysis report on 2 websites. I chose the website 'Ubunzo'(https://www.ubunzo.com/) and 'NekoHealth'(https://www.nekohealth.com/en) as the two websites to analyze.
For this exercise, we were tasked with replication of 2 websites using Adobe Photoshop or Illustrator. I chose to use Illustrator. Below can be seen as my work of replication compared to the actual webpage.
Web Replication 1
First Section:
|
| Replication |
Second Section:
|
| Replication |
Third Section:
|
| Replication |
Fourth Section:
|
|
Replication |
Fifth Section:
|
| Replication |
Web Replication 2:
First Section:
|
| Replication |
Second Section:
|
| Replication |
Third Section:
|
| Replication |
Exercise 3
For this exercise, we were given the task to create a recipe using html and
css code based on our lectures and tutorials we had.
I began to write my code similar to the tutorial video I watched. It was very
helpful and it acted as a guide/template for me.
After that I linked it with a CSS file and made changes so the content looks better on the site.
This is how it looks like on the website.
This is the final screengrab of how the content is placed.
Feedback:
Week 2:
- add images when explaining analysis
Comments
Post a Comment