Skip to main content

INTERACTIVE DESIGN / PROJECT 1 & 2: PROTOTYPE DESIGN

 24/04/2023 - 11/06/2023 / (Week 4 - Week 11)

Song Yang / 0355576 / Design in Creative Media

GCD 60904 / INTERACTIVE DESIGN

Project 1 & 2





INSTRUCTIONS

 




Project 1 Instructions:


Choose an existing website with design problems that you would like to address. Analyze the website's design and identify the areas that need improvement. Develop a concept for your landing page that addresses the design issues and improves the user experience. Create a wireframe or a mock-up of your landing page design. Develop your landing page prototype using any prototype software of your choice (Figma or Adobe XD).



Project 2 Instructions:

This is the extension from project 1. From a static prototype to working web page. Your web page should be easy to navigate and use, with clear labelling and intuitive menus. Your web page should be responsive, meaning it should display properly on different devices and screen sizes. Your web page should adhere to web design best practices, including accessibility and usability.



PROJECT 1


Choosing a Website


One site I chose that doesn't seem to have put much thought into design is penny juice in the US. The site has a jarring mix of fonts, colors, and images that don't work well. The site also lacks clarity, as many buttons and links are difficult to determine function. Overall, the site provides a frustrating user experience and is an example of bad website design.



Fig 1.1 Chosen Website - penny juice






Process


I started my first attempt at the second creation of the peeny juice website.



Fig 1.2 Process


Fig 1.3 Process




Fig 1.4 First draft for the web redesign



I received feedback from Mr. Hamimi. He suggested changing the overall color, which started with light pink, to brighter colors, such as orange and green, which look like juice and would be more suitable for the hue of Penny juice's website. And I changed the picture, because Mr. Hamimi thought that the picture I chose before could not highlight the characteristics of the juice.



Fig 1.5 Process


Fig 1.6 Process

Fig 1.7 Process




Final Design





Fig.1.8.Final Design



Project 2


For the coding, I started by setting up the HTML structure. After doing the basics, I included the necessary meta tags for character encoding and configuring the viewport.


Fig 2.1 HTML Markup




I uploaded all the files to GitHub, then I can get my website.


Fig 2.2 screenshot of Github



Final Submission

https://songyangnb666.github.io/syy.github.io/



Fig 2.3 Final Outcome




Comments

Post a Comment

Popular posts from this blog

Information Design / Exercises

Final Outcome Quantify & Visualize:12/01/2023 / Week 1-Week 3 Song Yang / 0355576 Information Design / Bachelor of Creative Media / Taylor's University INSTRUCTIONS  EXERCISE 1 Quantify & Visualize data  We are required to quantify our chosen items and arrange the objects into a presentable layout or chart. I decided to use coins for this exercise.  Fig. 1.1 – Instructions for Exercise 1 I collected data on coins around the house as informational posters  Fig. 1.2 – Data (box of coins)  Final Outcome Quantify & Visualize: Fig 1.3 - Final Exercise 1: Quantify Data   EXERCISE 2 L.A.T.C.H (Location / Alphabet / Time / Category / Hierarchy) For Exercise 2, we are going to organize a group of information into a visual poster that combined and utilizes the LATCH principles. I decided to go with Pokémon's Pokédex, following the link provided in the slides.  Fig. 2.1 - Instructions for exercise 2 For Exercise 2, we are going to organize a gro...
Post a Comment
Read more

Information Design - Project 1

 26.1.2023 - 23.2.2023 (Week 3 - Week 7) Song Yang (0355576) Bachelor of Design (Hons) in Creative Media  Information Design Instructable Infographic poster & Motion graphic INSTRUCTIONS For this project, we were assigned to create a teachable poster infographic and an animated infographic video from a video recipe, explaining how to cook/bake our chosen dishes from the Pasta Grandma YouTube channel. I started this project by binge-watching multiple videos from the pasta Granny and decided to make this video on how to make flake bread. Flatbread is found all over Italy, and Enrica shares her recipe for "crostoli" (it's plural and singular is crostolo) here. Lard is a key ingredient, and the way it's made makes delicious pancakes. Fig 1.1   Enricas' video recipe on how to make flake bread https://www.youtube.com/watch?v=XzY3uoMCgtE After watching the video, I recorded in my notes the ingredients and steps of how to make the flake bread. Fig 1.2 Ingredie...
Post a Comment
Read more

Information Design / Final Project

23/01/2023 - 05/03/2023 / (Week 3 - Week 8) Song Yang / 0355576/ Design in Creative Media GCD 60504 / INFORMATION DESIGN Final Project  INSTRUCTIONS Final Project initial draft Fig 1.1 initial draft We changed our draft after getting feedback Fig 2.2 Final draft Final Outcome
Post a Comment
Read more