Skip to main content

INTERACTIVE - Exercise 1

 03/04/2023 - 03/07/2023 / Week 1 - Week 14

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

Song Yang / 0355576

Exercise 1





INSTRUCTION 


Exercise-1


Week 1 |  Exercise 1 

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 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.
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.

2website that I choose: 
  • https://fpp.net/
  • https://simplychocolatecph.com/


Brief Report


  • The first website

This site replicates your supermarket shopping experience in an online store. The 3D visual effect makes you feel like you are there. FPP's shopping aisle mimics a real shopping experience, as it allows you to virtually stroll through the store and find pineapples by scrolling your mouse.




Fig 1.1 Overall site layout



Use the copy to direct you to the shopping area and look for pineapples in the powder aisle. Shopping marketing agency FPP tells visual stories of missing products and abandoned shopping carts among hundreds of products.




Fig 1.2 Site subtitle



Fig 1.3 Site subtitle



Fig 1.4 Site subtitle



Fig 1.5 Site subtitle



Fig 1.6 Site subtitle



Fig 1.7 Site subtitle





As you move further down the aisle, you'll find their service neat and creative. Aisles use minimal color and parallax effects to make the navigation experience pleasant, calm, and reduce eye strain.



Fig 1.8 Partial color matching display





The Pineapple button is a great web design experiment.



Fig 1.9 The Pineapple button display


  • The second website

Danish Chocolate maker Simply Chocolate created the site, which contains specific pages for each bar. One of the most pleasing visual aspects of the site is the brand consistency that all the products show as you scroll from product to product. In the interface switching is very smooth.


Fig 1.10 Website page display



At the same time, you can clearly see the changes and differences in the formula of different flavors of chocolate bars by scrolling.


Fig 1.11 Different flavors of chocolate bar page display



Fig 1.12 Different flavors of chocolate bar page display




You can choose your favorite chocolate bar flavor by sliding the mouse to open its wrapping paper. In this way, you can learn more about the information of the chocolate bar flavor, such as the raw material, the origin of the raw material and the nutritional content. Targeted screening of the target group of information can help readers to read information efficiently.



Fig 1.13 Open the chocolate bar after the page display





Fig 1.14 Open the chocolate bar after the page display






Week 2 |  Exercise 2


Your 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 color style. To find similar typefaces/fonts, you can download fonts from Google Fonts.


First of all, I selected two of the five websites provided by the teacher as the websites for this exercise. Then, I took a screenshot of the website and made it with Photoshop (ps) using the method taught by the teacher in class




Fig 2.1 Screenshot of Adobe Illustrator




Fig 2.2 Screenshot of Adobe Illustrator






Then I selected some alternate images




Fig 2.3  alternate images


Fig 2.4 alternate images


Fig 2.5  alternate images

Fig 2.6  alternate images



Then I replaced the images and fonts to complete the new site


Fig 2.7 Final outcome



Fig 2.8 Final outcome









Exercise 3 / HTML Personal Profile Page


Task Requirements: In this exercise, we will create a profile page using HTML. The purpose of this exercise is to help practice our HTML skills and create a web page that showcases our personal interests.

First, I wrote down some personal information for the content of the website.


Fig 3.1 Outline of website contents






Fig 3.2 Final Outcome for Personal Profile Page









Exercise 4 / CSS Layout




We are required to create a responsive grid layout for a website, based on the provided content (text and images). The layout should be visually appealing and functional on various screen sizes, ensuring optimal viewing on desktop and mobile devices. Once we finish the task, we need to upload the exercise to Netlify and submit the link here. It is recommended to explore media queries to ensure the website's responsiveness and different link styles to enhance usability and aesthetics.



Fig 4.1 Full size screen shot of web




Labels:

Comments

Post a Comment

Popular posts from this blog

INTERCULTURAL DESIGN | PROPOSAL, DATA COLLECTION AND FINAL PROJECT

  Februray 8, 2024 - March 22, 2024 08.02.2024 –  / Week1 – Week7 Song Yang / 0355576 Intercultural Design / Bachelor of design (Honours) in Creative Media MIB Project 1   Proposal   (2. Proposal Presentations Slides) For this module, we are required to create a study based on the theme "Cultural Sensitivity in Design". We are to study a cultural phenomenon or a particular subculture that is perceived as 'sensitive' and frame our study within the chosen theme. We decide to propose about 3 ideas. ・Chinese Calligraphy ・Red packets ・Oil-paper Umbrellas Project 2 Data collection (3. Data collection presentations slide) After getting feedback from Mr. Azrial as Oil-paper Umbrellas as our chosen topic, we started to do further research into the topic. We decided to frame our research into 4 different cultural aspects and meanings behind the oil-paper umbrellas; Chinese, Japanese, Malaysian, and Indonesian culture. Here, we conducted two things: online research an...
Post a Comment
Read more

Major Project

 25/09/2024 - 08/01/2025 / Week 1 - Week 15 Song Yang / 0355576 Major Project / Bachelor of Creative Media / Taylor's University Major Project INSTRUCTIONS Process Explored the cultural significance of Tang Dynasty tea attendants, focusing on their elegance and rituals. Brainstormed key brand values: tradition, refinement, and modern integration.  Logo Design and Brand Visuals Fig 1.1 Logo in Black Fig 1.2 Logo in Color Fig 1.3 Image Sketch Fig 1.4 Image Color Fig 1.5 Image Color Fig 1.6 Image Color Fig 1.7 Image Color Packaging Design Exploration - Paper Bag Fig 2.1 Paper Bag 1  - Design Fig 2.2 Paper Bag 2   - Design Fig 2.3 Paper Bag 3  - Design Fig 2.4 Paper Bag 4   - Design - Milk Tea Cup Fig 2.5  Milk Tea Cup 1 - Design Fig 2.6  Milk Tea Cup 2  - Design Fig 2.7  Milk Tea Cup 3  - Design Fig 2.8  Milk Tea Cup 4  - Design - Tote Cup Holder Fig 2.9  Tote Cup Holder  1 - Design Fig 2.10  Tote Cup H...
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