Interactiv Design

28.8.2023 -  / Week 1 -
Nie Weiqiu / 0360239 / BA of Design (HONS) in Creative Media
Interactive Design

Exercises 1 - 4 

INSTRUCTIONS



LECTURES

Week 1 / 28.8.2023 

In week 1, we were briefed about this module and our assignments throughout the whole semester. Our first task is to do a web analysis on 2 websites based different aspects


Week 2


<>

Mr Shamsul briefed us regarding the usability of a design, emphasizing on the fact that a core aspect of design lies in it's discoverability and how well they accomodate to a users' needs and context. 


EXERCISES

Exercise 1 - Web Analysis

Requirements:

1. A brief report in Google Slides
2. Not more than 500 words for 2 analysis
3. Include a screen capture of each section or page of the website
4. Format should be clear (heading/subheadings)

What To Have in The Analysis:

1. Purpose and goals of the website - communication with the user
2. Visual design and layout of the website, including its use of color, typography, and imagery.
3. Functionality and usability of the website, including its navigation, forms, and interactive elements.
4. Quality and relevance of the website's content, including its accuracy, clarity, and organization.
5. Website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.


Exercise 2 - Replicating Website

In exercise 2, our task is to replicate 2 existing main pages of the websites in order to gain a better understanding of their structure.

I used Adobe Illustrator for this exercise. I placed the original website side by side so that I could more accurately measure the placement of images, boxes, and text. I used Montserrat Regular and Montserrat Bold, with different fonts for different parts.



1. Ocean Health Index (https://www.oceanhealthindex.org/?authuser=0) 

Original Website (Screen grab)


Replicated Website


2. Bandit Running (https://banditrunning.com/?authuser=0)

Original Website (Screen grab


Replicated Website



Exercise 3 - HTML and CSS Document Development

We will create the recipe card using HTML and CSS. The goal is to design a basic web page that displays a recipe's ingredients and instructions in a visually appealing format.

Create an HTML file named "recipe.html".

Create a section that displays the following information:

Recipe title

Contains necessary images for the page

Ingredient list

Step-by-step cooking instructions

Create an external CSS file called "style.css".

Apply CSS rules to style your recipe cards.

Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to set up different parts of the card style.

I choose a Kaya toast recipe that I love to eat in the morning


HTML Codes and Attributes

CSS Selectors

Final Recipe Card









Comments

Post a Comment

Popular posts from this blog

Immersive Visual Effects

Image
23.9.2024 - 14.10.2024 (Week 1 - Week 4) NIE WEIQIU/ 0360239 / Bachelor of Design (Hons) in Creative Media / Taylor's University Immersive Visual Effects Task 1 / Pre-production INSTRUCTIONS Fig. 1. Module Information Booklet Pre-production According to the teacher's further explanation, I roughly understood it, so I wrote three ideas PPT introduction After receiving feedback, I finally thought the idea of ​​forest was good, so I continued to use the idea of ​​forest. Final Thoughts Week 2 Exercise: 3D Camera For this exercise, we just had to learn how to use and experiment with using the 3D camera feature. We were given an After Effects file and we had to use it as a template and animate it.  https://youtu.be/eKh4FhTSVNk Project 2 Introduction: Produce 3D block-out pre-visualization. • Produce 3D elements and effects block-out • Composition nesting and layer breakdowns • Timing and transition confirmation • Style frame for final look and feel • Composition ready renderin...
Read more

Design Research Dissertation

Week 1 - Week  NIE WEIQIU / 0373215 Design Research Dissertation  Bachelor of Design (Honours) in Creative Media / Taylor's University INSTRUCTIONS Final Submission Task 1: Dissertation draft Task 2: Visual Design Publication Task 3: Final Dissertation and Turnitin Submission Turnitin Submission Final Dissertation KREATE google drive FEEDBACK Weekly Progress Reflection Sheet.docx REFLECTION Throughout this module, I went through three key stages: drafting the research paper, designing the visual publication, and submitting the final paper. In the initial phase, I reviewed a wide range of literature, gradually clarifying my research topic and objectives, while also learning the fundamental methods and structure of academic writing. During the visual publication stage, I worked on transforming academic content into a visually engaging publication. This not only deepened my understanding of layout design but also enhanced my ability to organize and present information effectively...
Read more

Information Design - Exercise

Image
  6.2.2024 -  / Week 1 - Week  Nie Wei Qiu / 0360239 / BA of Design (HONS) in Creative Media Information Design Exercises 1 - 2 LECTURES Week 1 / 6.2.2024 In the first week, the teacher introduced us to the entire module, and also introduced us to exercises, electronic portfolios and projects.  We have to prepare a presentation on our first week with our group too, one of the first topics we have to prepare is to find out the different types of infographics and we are going to use a free online infographic tool to reframe a poorly structured piece of information  infographic poster. Group Task (FLIP Presentation) FLIP 1: Types Of Infographics Individual Task (Re-design Infographic Poster) I started by doing some research on infographic posters on Pinterest. I found a few posters and analyzed them.I found a poster that I thought was problematic and reworked it Infographic Poster from Pinterest I think its structure is a little too crowded and I want to chang...
Read more