Interactive Design - Project 1

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

Chai HongHong/0354211

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









INSTRUCTION 




Project 1
                                        

I chose a website with Chinese specialty food.


Fig.1.1. Bad Web.
http://www.py-guanyun.com/index.php?p=index1



Analyze

The pages of the website are divided into 5 pages, and you need to slide the mouse to turn the pages. This website design does not use space effectively to present important information. The pictures used are not uniform, some are hand-painted pictures and some are photographic pictures, which do not form a unified style.

The first page is an introduction to the official website and a rough introduction to the product. At first glance, the main picture looks like a tourist promotion of an ancient town. In fact, it is a website selling beef, but it is difficult for people to see the appearance of the product. I think this page puts product highlights on the hype. And there is some overlap in the color of the picture and the font.

The second page is about us, which I think should show more information.

The third page is products. I think this page does not effectively display the types and introductions of products.

The fourth page is Inherit The Taste Of Pingyao Cuisine. It shows the different packaging of the product. The font design is a bit cumbersome, which is not conducive to user browsing.

The fifth page is news, which shows the relevant news of the brand. But the layout is a little weird.

The last interface is contact us. I think this information can be placed at the bottom of the page instead of occupying a separate page.


Fig.1.2. Analyze


Improve

In order to make reasonable use of space, I think a title bar can be added to make the layout concise and clear. For example, unify the picture style, effectively introduce products, and put the contact information on the bottom bar of the last page. I hope this improves the user experience when browsing. Make browsing easier and clearer for users.



Design Progress


Fig.1.3


Fig.1.4

                                                 3 Dynamic Homepages

I received feedback from Mr. Hamimi. He suggested that I add arrows to my dynamic homepage and add a buyable button.

Fig.1.5. Dynamic page 1


Fig.1.6. Dynamic page 2


Fig.1.7. Dynamic page 3


Final Design

Figma Link: 


Fig.1.8.Final Design

























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