Interactive Design-Exercises

-
03.04.2023-..2023 / Week 1-Week 
Kor Qian Qian / 0359496
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercises


INSTRUCTIONS


LECTURES

Week 1-Surveying the possibilities  


Week 2-Usability: Designing Products for User Satisfaction 


Week 3-Colors for Web 


Practical

Week 1

Group activity: Pick 3 good websites and 3 bad websites, fill in the spreadsheet and present it to the class.
fig 1-requirement of exercise 1

Week 2

fig 2.1-Requirement for the class activity

Our group chose scenario 1: an e-commerce clothing store as our content. We first discussed the pages we needed, and we divided the labour and cooperated. Each person chose a part to draw. Here are some pictures of the finished sketches.

fig 2.2-some sketches of our group exercise

Week 3

What are the three basic colours that the monitor transmits?
Red, Green and Blue

How many colours could be referenced by name (e.g., "red") in HTML 4.01?
147 colours

How many different colours are there in the "web-safe" palette?
216 colours

Are the majority of people we refer to as colour blind unable to see any colour at all? Explain.
No. The vast majority of people with colour blindness see a range of colours, but they see some colours differently than others do. They may also have trouble telling the difference between certain colours or shades. Some very rare forms of colour blindness make a person unable to see any colours.

Exercises

Exercise 1: Web analysis

Choose TWO (2) websites from the link given. Review the website that you've 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:
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 colour, 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.
Deliverables:

Write a brief report summarizing in not more than 500 words. You can include a screen capture of each section or page of the website to explain.

Exercise 2: Web replication

The task is to replicate TWO (2) existing websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimension of the existing website from the width and height. 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. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image. You may replace it with a similar image. Focus on the layout, type style, and colour style. To find similar typefaces/fonts, you can download fonts from Google Fonts.

Free image: https://www.pexels.com/

Google Fonts link: https://fonts.google.com/

Process:

First replicated website: https://kinhr.com/

fig 2.3-navigation font

The font I used in the navigation buttons is Poppins in the medium. I adjusted some kerning between the letters to make it look more similar to the original website.


fig 2.4-main title font

The font I used in the main title is Faustina in bold.


fig 2.5-company logo font

The font I used in the company logo is Lexend Deca in bold.


fig 2.6-subtitle font

The font I used in the subtitle is Faustina in bold.


fig 2.7-minor title font

The font I used in the minor title is Poppins in regular.


fig 2.8-text & shadow effect

The font I used in the body text is Poppins in regular.

To identify the box and the background easily, I follow the original website and added a shadow at the bottom of the box. (Tutorial of shadow: create a box under the layer with black colour filling-effect-blur-gaussian blur)

Those illustrations are drawn with the pen tool in Illustrator.

fig 3.1-similar image from https://www.pexels.com/


fig 3.2-illustrate some simple icon

Fig. 3.3-Using the grid to align the texts and design elements

Final Web Replication 1 Submission:

fig 2.9-final submission of web replication

final submission of web replication 1 in PDF

Second replicated website: https://www.wozber.com/en-us

fig 2.10-company logo font

The font I used in the company logo is Montserrat in the medium.


fig 2.11-main title font

The font I used in the main title is DM Sans in bold.


fig 2.12-subtitle font

The font I used in the subtitle is Roboto in regular.


fig 2.13-navigation font

The font I used in the navigation buttons is Inter in the medium.


fig 2.14-illustrate some simple icon


fig 2.15-Using the grid to align the texts and design elements.  


Final Web Replication 2 Submission:

fig 2.16-final submission of web replication

Final submission of web replication 2 in PDF

Exercise 3: Web Html

We were asked to create a personal profile page using HTML. 

Requirement: Name, a photo, a brief bio, and some personal interests. Use headings (h1, h2, etc.) and paragraphs (p) to make the content more readable. Add lists (ul or ol) to showcase personal interests. Add links (a) to the profile page and include an image (img) on your profile page.

fig 3.1-Code of the website

fig 3.2-Code of the website

Final Website: https://korqianqian-exercise3.netlify.app/


Exercise 4: Layout Exercise

We were asked to create a responsive grid layout for a website. The design and alignment should be visually appealing and functional across different screen sizes, allowing for optimal viewing on both desktop and mobile devices.

Source: https://drive.google.com/drive/folders/1bQMXsrVAmj3Sf2Fax5hS2qhNDUnUWQRb?usp=sharing

fig 4.1-Code of the website

fig 4.2-Code of the website

Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design-Final Project

-
Image
23.06.2024-03.08.2024 / Week 9-Week 15 Kor Qian Qian / 0359496 Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media Final Project INSTRUCTIONS Final Project -  Completed Thematic Interactive Website In tasks 1 and 2, we have fully expressed our ideas and plans. In this final project, we will transform our prototype into a real webpage using Adobe Animate. All animations must be completed in Adobe Animate. We will integrate visual assets and refine the prototype into a complete, working, and functional product experience. Process Preloader page At first, I created the layout in Adobe Illustrator and then imported it into Adobe Animate. However, because the layer arrangement in Illustrator was crucial, I had difficulty grouping the layers correctly. Ultimately, I decided to create the layout directly in Adobe Animate. For the preloader page, I created a new file specifically for it and, a...
Read more

Advanced Interactive Design-Task 1

-
Image
24.04.2024-29.05.2024 / Week 1-Week 4 Kor Qian Qian / 0359496 Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media Task 1 INSTRUCTIONS Task 1 - Thematic Interactive Website Proposal What to do:  Fig 1.1 Requirement Brainstorming Initially, I explored food brands such as Starbucks, McDonald's, and Burger King, but these themes didn't interest me. So, I looked into many luxury brands, and finally decided to base my assignment on Jo Malone's Mother's Day collection. Jo Malone's Mother's Day collection includes various products such as perfumes, scented candles, and cosmetics. I decided to focus solely on the perfumes from the same collection for the website I'm about to create. Fig 1.2 Main product ...
Read more

Minor Project-Pink Stuff

-
Image
24.04.2024-15.08.2024 / Week 1-Week17 Kor Qian Qian / 0359496 Minor Project / Bachelor of Design (Honours) in Creative Media Pink Stuff-Pinkify Instruction Important link MIRO Board Website Prototype Final Proposal Presentation Slide Final Project Presentation Research Question Google Form Pink Stuff Week 2 - Meet Client Met with the client to gather insights about their preferences for pink-themed products. Discussed the client's expectations from the project. Aligned on the overall vision and direction for the project. Every group members give their idea and opinion for the direction of our products, I suggested pet supplies and eco products. My idea These are the ideas of the team members. All members's ideas Week 3 Decided to focus on gaming accessories as the main product line. Discussed and finalised the specific products to be featured. Planned surveys or interviews to gather user feed...
Read more