Interactive Design - Exercise 1, 2 & 3

TAN YING YI / 0362425 / BACHELOR OF DESIGN (HONS) IN CREATIVE MEDIA
INTERACTIVE DESIGN
EXERCISE 1,2 & 3

INSTRUCTIONS

Exercise 1: Web Analysis

People 3D Characters

  • Purpose and Goals

    The purpose of the website is to introduce and sell the 3D product which can improve user interfaces. People can buy the product to design faster. This website can effectively communicate with user.

    Fig 1.1 3D Character Introduced

  • Visual Design and Layout The layout is neat and simple to browse. Bright colour can attract our attention and make the website more interesting. The words are clear and concise. Images which are insert can also help us to understand the information.

    Fig 1.2 Colour, Typefaces and Images

  • Functionality and Usability We can look at all information by scrolling down. All information are matched with images so that we can understand easily. It would be more interesting if there are more interactive elements such as click ourselves to separate shadow.

    Fig 1.3 Interactive Elements

  • Quality and Relevant of Content The words are matched with the images. It is easy to understand. The sections are clear.

    Fig 1.4 Words with Image

  • Performance Loading time of the website is quite short. The website enable automatic adaption to the screen of different devices. Compatible with different devices and browsers.

    Fig 1.5 Responsiveness

  • Purpose and Goals
    The purpose of the website is to introduce the timeless evolution of the iconic doll - Barbie. The website is for people who like Barbie and people who are curious about Barbie. This website can communicate with users effectively using lots of images.

    Fig 2.1 Website about Barbie

  • Visual Design and Layout Each page has different layout. The pages perform in different ways and they are really interesting. Most of the pages of the website use iconic colour of Barbie - pink. The images show different Barbie and lots of information. Some of the typefaces are not clear as their colour is similar to the background.

    Fig 2.2 Typefaces not Clear

  • Functionality and Usability We can look at all information by scrolling down or clicking the options on top. Most of information are in the images. There are lots of interactive elements such as the files and photos of the movie. There are also jumplink to other websites for more information.

    Fig 2.3 Options

  • Quality and Relevant of Content Information in the website is accurate and photos are used with their copyright. All information used on this website are from their respective owners.

    Fig 2.4 Photos and Information

  • Performance The website need to load for long time. The website disable automatic adaption to the screen of different devices. Incompatible with different devices and browsers as some devices can’t see Barbie’s model in the first page.

    Fig 2.5 Responsiveness
Exercise 2: Web Replication

We are asked to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help us develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. We can use any image from stock image or free stock icon. The image that we will be using does not have to be an exact image from the original website. We may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, we can download fonts from Google Fonts. We may need to screengrab the website and can begin to replicate the page. 

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

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


Process in Adobe Illustrator

 
        
Fig 1.1 Progress

One of the websites I chose is Ocean Health Index.

This is a screengrab of the website.

Fig 1.2 Screengrab of The Website

Web Replication:
Fig 1.3 Web Replication ( Week 2, 7/9/2023 )


This is a screengrab of the website.

Fig 1.4 Screengrab of The Website

Web Replication:
Fig 1.5 Web Replication ( Week 2, 8/9/2023 )


Fig 1.6 Compare ( Week 2, 8/9/2023 )

Exercise 3 - Create A Recipe Card

Information and Tutorial

    Recipe Source

[CSS] - How to add space between horizontal list items in CSS

Process


I used an unordered list for ingredients.


I used an ordered list for cooking instructions. I set the class as list2 so that the design of the unordered list wouldn't change when I changed the design for the ordered list.


I added horizontal space between the list items.


I changed the font which is from Google Fonts.


I used this background but it influenced readability, so I considered changing the background.


This is the new background I chose.


I added an anchor link to jump to the specific part of the page using <a href="#cookinginstructions" class="nav-link">COOKING INSTRUCTIONS</a>. Cooking instructions is the id name, we can change it to other id names.


Final

Comments

Post a Comment

Popular posts from this blog

INFORMATION DESIGN - PROJECT 1: ANIMATED INFOGRAPHIC POSTER

Image
TAN YING YI / 0362425 / BACHELOR OF DESIGN (HONS) IN CREATIVE MEDIA INFORMATION DESIGN PROJECT 1: ANIMATED INFOGRAPHIC POSTER INSTRUCTIONS PROJECT 1: ANIMATED INFOGRAPHIC POSTER DESCRIPTION:  After time exploring media and learning about information design, you will now develop an infographic that presents a series of different processes as visuals rather than text. REQUIREMENT: Your main intention is to analyse the “delivery mechanism’s” that affect the outcomes of your infographics. Though content is important, however the aim of this presentation is too look at what makes an infographic presentation work or does not work. This includes content but only as one of the many components of an infographic: PART 1: Infographic poster (10%)             INSTRUCTION: 1. Choose 1 infographic poster reference from Internet (Please consult before proceed) 2. Redesign the poster into A4 size. Sketch the idea and process 3. Redesign and simplify the poster ba...
Read more

INFORMATION DESIGN - EXERCISES

Image
TAN YING YI / 0362425 / BACHELOR OF DESIGN (HONS) IN CREATIVE MEDIA INFORMATION DESIGN EXERCISES INSTRUCTIONS EXERCISES: QUANTIFIABLE INFORMATION EXERCISE 1 – Quantify raw data and visualize information as a photograph A is a visual representation of numerical data that allows for easy interpretation and analysis.  Instruction: Gather a set of objects and separate it into category such as color, shape, pattern, and other quantifiable factor. Example: 1. Box of Lego 2. Jar of button 3. Jar of marble ball 4. Set of colourful rubber strap In this exercise you're required to quantify our chosen objects and arrange them into  a presentable layout or chart .  The information must be presented as is, and you need to arrange the objects with relevant indicators written out with pens to help you to visualize the quantity and data. The examples of objects that can be use are buttons, coins, lego pieces, M&Ms, and more. Submission: E-Portfolio report consists of 1. Photo of...
Read more

INFORMATION DESIGN - FINAL PROJECT: INFOGRAPHIC VIDEO ANIMATION

Image
TAN YING YI / 0362425 / BACHELOR OF DESIGN (HONS) IN CREATIVE MEDIA INFORMATION DESIGN FINAL PROJECT: INFOGRAPHIC VIDEO ANIMATION INSTRUCTIONS PROJECT 1: ANIMATED INFOGRAPHIC POSTER INSTRUCTION: Based on FLIP group topic research, produce a basic video animation. DESCRIPTION:  Using a processed design framework, you will now produce an infographic report to present the given information to a ‘target audience’ with the purpose of: 1. Creating awareness (such as Global Warming, Recycle, etc.) 2. Explaining a process (such as "how to" video) 3. Defining a concept (such as "What is Fast Fashion", "What is Color Wheel", etc.) Any time based media and software using photography, vector imagery. Design Considerations: ● Organization Principles – LATCH and Content Organization ● Aesthetic Principles – Animation principles ● Cognitive Principles – Principles of visualization Output Expectation: The presentation must be deliberated on, consider each assessment rubri...
Read more