Interactive Design Exercises & Lectures
28/8/2023 - 1/12/2023 Week 1 - Week 14
Wong Kai Xin / 0353027
Interactive Design / Bachelor of Design in Creative Media
Exercises & Lectures
LECTURES / CLASS SUMMARY
Week 1 :
- briefing on module information booklet as well as what interactive design is about
- introduced to figma
- signed up on netlify
Week 2 :
We were shown a video on how design can change people's lives and make it
easier for them to do tasks
5 stages in design thinking: empathize, define, ideate, prototype, test
Usability reflects on the effectiveness, efficiency of a product or
design for users
Principle of Usability:
1. consistency
- makes user feel like they are always on the same website
- examples of websites with good consistency: apple, maxis
2. simplicity
- clear structure, simple for users
- minimize the number of steps for a process
3. visibility
- ensuring users to figure out the accessibility of an interface
4. feedback
- to give the user a signal that the product have succeeded or failed at
performing a task
5. error prevention
- alerting user when they are making an error
- example: red wavy lines when there is a spelling error
Week 3
- We were asked to create a layout for a travel agency. I learned that the placement of the categories are important and we have to always put ourselves in the readers' shoes.
- Social proof are testimonials to make the website more credible.
- include social media icons
Week 4
- heading and subheadings creates hierarchy
- HTML codes are made up of character that live inside angled brackets
- These are called HTML elements (usually made up of two tags, opening & closing tag) <element>information<element>
We had a class activity of making our own website with html.
Week 5 :
- the first thing u need to do when creating a site is define a site
- when saving a html file ONLY USE LOWERCASE, no space as well
- if have two words can use - or _ for example: about-me.html about_me.html
- manage site
- new site
- name the site
- locate the folder (create new individual folder for a particular project)
- click save
- id attribute- unique
- class attribute- same name on several html tag
- block elements will always start on a new line, for example:
<h1>, <p>, <ul> and <li>
- inline elements will always be displayed at the same line as their neighbour elements, for example:
<b>, <i>, <em>, <a> and <img>
CSS
-allows you to create rules that specify how the content of an element should
appear
-between a property and a value you must separate it with a colon
How to use figma:
- click frame
- choose desktop
- layout grid
- click plus
- press column
- choose 12 columns
Week 7 :
- adding the * symbol means selecting everything from your html file
shortcut is more convenient as it also automatically sets the right and left padding to be the same
- if u use margin auto, you will have equal space for the left and right margin, if you move the desktop size, it moves as well
- to make photo into a circle, apply border-radius
a:link
a:active
a:hover
a:visited
(must be written in order)
Week 11:
- logo/brand- png/svg
- h: 120 px
- w:150 px
- java script must always be at the BOTTOM
- use min-height height will put your element to a size of 100% of it's container.min-height will put the element to min 100% of the container size
- https://getbootstrap.com/ for codes
INSTRUCTIONS
EXERCISES
Exercise 1: Web Analysis
For the web analysis, we had to pick 2 websites from https://www.csswinner.com/winners
Review the website selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.
What To Have in The Analysis:
What To Have in The Analysis:
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
- Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
- Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Personally if comparing both sites, I would prefer the second website (https://people.wannathis.one/) as it felt more organised overall and more interesting to scroll through
with all it's graphic elements.
Fig Web Analysis (PDF) 4/9/2023
Exercise 2: Web replication
For this exercise, we were to replicate 2 websites of our choice from the 3 options provided. We were required to follow the dimensions of the existing website from the width and height. This exercise will help develop design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. For images, I have used images from https://www.pexels.com/ (the image that you will be using does not have to be an exact image from the original website).
side by side comparison of original and replicate
replication of website 1 (PDF)
side by side comparison of original and replicate
replication of website 2 (PDF)
Exercise 3: Creating a recipe card
In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.
Note: use unordered list for ingredients!
recipe I used: https://grandbaby-cakes.com/easy-shrimp-scampi-pasta/
html file
attached css file
link to my exercise: https://0353027recipeexercise.netlify.app/
Comments
Post a Comment