Interactive Design: Exercises

-


8/08/2023 - Week 1
Amirah Akbar Ali  / 0361001
Interactive Design / Bachelor of Design (Hons) in Creative Media 



  • Exercise 1: Web Analysis
  • Exercise 2: Prototype Design
  • Exercise 3: Creating a recipe card
  • Exercise 4:

WEEK 1:Module Briefing

INSTRUCTIONS



Exercise 1: Web Analysis

Choose TWO (2) websites from the link given. Take note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.




https://docs.google.com/presentation/d/1fBaZZdYc3uJBcOYfznXP9fAT671uuLiXkCmRqXs5MtQ/edit?usp=drive_link 


WEEK 2:Usability 

Lecture Slides - Usability, Week 2

Fundamental Usability Principles
  • Consistency
  • Simplicity
  • Visibility
  • Feedback
  • Error Prevention

1.Consistency
- Ensures your website looks coherent and works harmoniously across all its different elements (headers, footers, sidebars & navigation bars.)
- Consistent design is intuitive design.
- If similar looking things don't produce a similar output, the user is bound to become frustrated.

2. Simplicity
- Betters user interfaces by helping the user achieve their goals faster and more efficiently
- Number of steps involved in a process should be minimised
- Use symbols and terminology that make the interface as obvious as possible

3. Visibility
- The more visible an element, the more likely users will know about them and how to use them

4. Feedback
- Communicates the results of any interaction
- Gives the user a signal that they have succeeded or failed at performing a task
- e.g hovering over a navigation item and it changes colour or loads a submenu

5. Error Prevention
- Alerting a user when they make a mistake


The 5 Processes of Design Thinking
1. Empathise
2. Define 
3. Ideate
4. Prototype
5. Test

The 5 Processes of Design Thinking


EXERCISE 2: Replicate a Website

Replicate TWO (2) existing main pages of the websites from the links given to gain a better understanding of their structure. Follow the dimensions of the existing website from the width and height.  Focus on the layout, type style, and colour style. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.


Understanding Website Structure

Why?
- It is the foundation of a user friendly and accessible website
- It affects user experience, SEO (search engine optimisation), and overall website performance
- Keeps users engaged

Key Elements
1. Header
- Website logo, navigation menu and contact information
- Provides user quick access to essential information and navigation

2. Body
- Main content
- Text, images, videos and other multimedia elements
- Proper organisation is crucial for readability

3. Footer
- Copyright information,  links to important pages and contact details
- Provides closure to the webpage and additional navigation options


Week 2:Class Activity


Week2: Clothing Website Design




  • Replicate two existing main website pages using Adobe Photoshop/Illustrator

References: banditrunning.com, MorganStanley.com, pexels.com


Process

Firstly, i had to do a full sized screenshot of the website. Clicking on 'Inspect' when right clicking will open a small window. Then, press Ctrl + Shift + P and it will open up this panel.

Secondly, type in 'screenshot' and these options should come out. Press on the second option and it will automatically download the full screenshot of the main page of the website.



Screen Shot view of  Web Inspect


screenshots into Adobe Illustrator and created another artboard with the same dimensions.

For each elements is by using the ruler guides to make it easier to place text and images in the right position as the original. Then I placed the images, header and footer using the shape tool and photos.



Bandit Running Website Replication 1


I repeated this process with the second website replication. For the image in the last section, I went into Photoshop to slightly erase and blur the top section so it blended better into the dark blue background like in the original.


Morgan Stanley Website Replication 2


Website 1: Bandit Running
Bandit Running Website Replication


Website 2: Morgan Stanley 
Morgan Stanley Website Replication


EXERCISE 2:Website Structure

week 3: Website Structure

Website structure affects user experience, SEO, and overall website performance. A good structure helps users find information easily and keeps them engaged. They are divided into 3 sections: header, body, and footer.





EXERCISE 3: Creating a recipe card


In this exercise, we have to create a recipe card using HTML and CSS.To design a basic webpage that displays a recipe of ingredients and instructions on how to cook a certain particular food.


Steps on starting HTML and CSS format:
  • Create an HTML file named "index.html."
  • Create a section that displays the following information:
  • Recipe title
  • Include necessary images for the page
  • List of ingredients
  • Step-by-step cooking instructions
  • Create an external CSS file named "style.css."
  • Apply CSS rules to style your recipe card.
  • Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

Fig: Coding progress HTML


We were required to watch a pre-recorded lecture video about CSS Selectors. Therefore,I started with the coding the basic format of HTML  and  the important information, including the ordered list for the step by step instructions. 



Fig: Coding progress CSS


By following the tutorial video, i proceed to continue my progress with the CSS coding. After a few tutorials and errors, i have managed to understand on how to use the HTML and CSS coding format properly.



FINAL:
Click HERE for the website.


REFLECTION:
Exploring interactive design through the replication of two websites using HTML and CSS was a fascinating journey that allowed me to delve into the intricacies of web development. The hands-on experience not only sharpened my coding skills but also deepened my understanding of user experience. Through this process, I gained insights into the importance of layout, color schemes, and responsive design in creating a visually appealing and user-friendly website. The challenges encountered during the replication fostered problem-solving skills and a keen eye for detail. Overall, this interactive design subject has been a valuable opportunity to apply theoretical knowledge to practical tasks, providing a solid foundation for future endeavors in web development.










Comments

Post a Comment

Popular posts from this blog

Digital & Social Media Communication - Task Compilation & Progression

-
Image
  24.09.2024 - 02.01.2025 (Week 1 - Week 14) Amirah Akbar Ali / 0361001 Digital & Social Media Communication  Task Compilation & Progression INSTRUCTION MIB LECTURES Week 1 FACT-FINDING (Drives your content) Social media content for awareness: to share with the people out there about the products and services. [already have certain market/followers] Visibility: beginning stage  Conversion: convert something into sales Questions to ask: How long has the business been around? How do you do your marketing (promote: offline/online store, etc)? What’s your revenue (sales) like? How big is the team? What is your conversion rate? (Follow-up question) How much do you spend? (Supplementary question) Do you keep track of your client database? *A high conversion rate is anything ranging from 30%> *Rule of thumb for ads= 1:2 Introduction to Social Media Content Creation and Planning Building Captions and Messaging Visual and Video Editing Strategic Use of Different Social ...
Read more

Task 1: Typography Exercise

-
Image
  4/04/2023 - 2/05/2023  Week 01 - Week 05 Amirah Akbar Ali (0361001) Bachelor of Design (Hons) in Creative Media Typography - Task 1: Exercise 1& 2 TABLE OF CONTENTS 1. Type Expression 2. Text Formatting Feedback   Reflection Further Reading Introduction Typography:   The art and technique of arranging type to make written language legible, readable, and appealing when displayed. Font:   The individual font or weight within the typeface. Typeface:   The entire family of fonts/weights that share similar characteris tics/styles.
Read more

Creative Brand Strategy - Task 1A & 1B

-
Image
  24.09.2024 - 15.10.2024 (Week 1 - Week 4) Amirah Akbar Ali / 0361001 Creative Brand Strategy Bachelor of Design in Creative Media  LECTURES Fig 1: MIB As part of my Creative Brand Strategy module at Taylor's University, I’ve embarked on a journey to deepen my understanding of branding and develop practical skills in crafting and presenting brand strategies. This module focuses on building brands with strong visual identities, making them resonate in the minds of consumers. Throughout the semester, we are tasked with analyzing existing brands and developing our own campaign proposals. 1. Case Study (Task 1A): In this part, we are required to analyze a well-known rebranding campaign. I chose Skittles' rebranding as it stands out for its playful and quirky nature, which is closely tied to its identity. Skittles recently refreshed its logo and packaging to modernize its look while maintai...
Read more