Interactive Design - Exercise

03/04/23-00/00/23(Week 1- Week )

Chai HongHong/0354211

Interactive Design/Bachelor of Design (Honours) in Creative Media









INSTRUCTION 





  Exercise 1
                                                    


I love this site, I was drawn to the colors at first sight. This website uses four colors to change, each color is very comfortable. I think the layout of this page is very simple, the navigation part is very clear, there is a brand logo, their main products are on the picture, and some interesting elements have been added. When your mouse hovers over these elements, they will have feedback. For example, when I am browsing the SHOP page or STORIES page, I don't need to click the back button many times if I want to return to the main page. I only need to click the Logo part of the navigation interface, and I can directly return to the main interface.


Fig.1.1.

This website is a website for users to learn about and purchase products, and I was attracted by the color at first sight. This website uses four colors to change, each color is very comfortable. I think the layout of this page is very simple, the navigation part is very clear, there is a brand logo, the picture has their main product and main material (Cannabis) and added some interesting elements, when your mouse hovers over these elements They will have feedback. For example, when I am browsing the SHOP page or STORIES page, I don't need to click the back button many times if I want to return to the main page. I only need to click the Logo part of the navigation interface, and I can directly return to the main interface.

Fig.1.2






This website is like a beautiful work. His design mainly uses photography works with philosophical copywriting to reflect the combination of handmade furniture and nature, so that users have a comfortable look and feel. The layout is very clear, users can easily know how to use this website, click on the website is a picture of the raw materials of furniture, accompanied by a paragraph of philosophical meaning. Clicking again will enter the main page. The black and gray background and philosophical copy make people want to explore and understand the story of this website.

Fig.1.3


When the mouse stops on the furniture navigation bar, various furniture categories will appear, and users can clearly click on the page they want to know.

The page of furniture introduction is also very clear, the layout is simple and comfortable, and the content is mainly based on pictures, giving users the most intuitive feeling and the clearest understanding of raw materials.

Fig.1.4








  Exercise 2
                                                    


I chose a marine-themed website and a website about HR. The following are my design works and design process.


Web 1


Fig.2.1.Before Redesign



Fig.2.2. After Redesign


I chose the picture I like from the free picture site provided by Mr. Hamimi, and I will use it as the background picture,

Fig.2.3.


When I was typesetting, I found that the background image I chose could not read the text clearly, which would cause visual fatigue for users, so I added a layer to make the layer transparent and cover the original image. After the original image became lighter, the font became clearer.

Fig.2.4. Before


Fig.2.5. After




Web 2


The second website I chose is related to work. Mr. Hamimi said in class that blue represents trust, so I found a set of blue-based color systems on the Adobe Color website.

Fig.2.6. Before and after


Fig.2.7. Final


The font is mainly blue and white. In the blue area I used a red button, and in the red area I used a blue button, which looks harmonious.

Fig.2.8. 


Fig.2.9. 








  Exercise 3



We are asked to create a layout based on the provided.











































Comments

Post a Comment

Popular posts from this blog

Games Development

Image
23.04.2025 - 27.07.2025 (Week1-Week15) ZengYu/035538​​​​8 Chai HongHong/0354211 Bachelor of Design (Hons) in Creative Media Game Development INSTRUCTIONS Our Google Drive Submission Link： https://drive.google.com/drive/folders/1J4MP9nAnGTgJlgFNlyGJDq4o1plwtkaO?usp=drive_link Task 1 -  Game Design Document   In this task, we are required to design a 2D side-scrolling/platformer game and create a Game Design Document (GDD). The GDD should outline: Game concept and mechanics Character design and abilities Level and world design Art style and visuals Weekly Progress Final Proposal Submission Task 1 Feedback We named the game "Run, Eggsy!", which shaped the core concept and gameplay framework of the game eggman's adventure. Our goal is to create a humorous, trap-filled platformer inspired by games like Level Devil, with a unique twist on the typical puzzle adventure formula. While the project is still in progress, here are some key observations and conclusions so far: Clear ch...
Read more

Advanced Typography / Final Compilation & Reflection

Image
30.08.2023-29.11.2023（Week1-Week14） Chai HongHong/0354211/Creative Media Design. Advanced Typography /  Final Compilation & Reflection                                 INSTRUCTION Task 1:  Typographic Systems & Type & Play Task 2:  Key Artwork and Collateral Task 3:   Type Exploration and Application SUBMISSIONS Task 1 Exercise 1/Typographic Systems Fig.1.1. Axial Final attempt. Fig.1.2. Radial final attempt Fig.1.3. Modular final attempt Fig.1.4. Random final attempt Fig.1.5. Dilatational attempt Fig.1.6. Transitional final attempt Fig.1.7. Grid final attempt Fig.1.8. Bilateral final attempt PDF.1.1. Task 1/Exercise 1/Typographic Systems PDF.1.2. Task 1/Exercise 1/Typographic Systems/Grid Exercise 2/ Type & Play Fig.1.8. Final A Fig.1.9. Final L Fig.1.10. Final M Fig.1.11. Final U PDF.1.3. Task 1/Exercise 2 Fig.1.12. Final Poster  PD...
Read more

Application Design I / Final Task

Image
16.06.2023 - 24.07.2023 / Week 12 - Week 16 Chai HongHong / 0354211 Application Design I / Bachelor of Design (Hons) in Creative Media Final Task /  High-Fidelity Prototype INSTRUCTION  Final Task:  High-Fidelity Prototype Original Design In this task, a high-fidelity prototype is to be created for the mobile application. This prototype showcases the final visual design, interactions, and functionality of your application. In this interface, touch the option box will turn green. Fig.1.1. If you log in with a Google account, you can directly enter the main page, and the main page will pop up your personal information. The user profile picture and user nickname will be the same as the default Google account information. Fig.1.2 The search history and recommended music types will be displayed on the Search interface. Search for songs in the record, and it will be played directly after clicking. Recommended music genres are updated and changed frequently. The circle will boun...
Read more