Interactive Design _ Exercises / HTML Document Development & HTML, CSS Document Development, CSS Layout Model.

on
________________

3 April 2023 - 24 April 2023, (Week 1 - Week 4)
Christine Tan Yuen Yan, 0344039 
Interactive Design GCD 60904 / Bachelor of Design (Hons) in Creative Media 
Exercises / HTML Document Development & HTML, CSS Document Development, CSS Layout Model. 
INSTRUCTIONS 
MIB
LECTURES 
WEEK 1 _ LECTURE 1 _ Surveying the Possibilities 

Week 1 _ Class Note _ Surveying the Possibilities 

In-Class Exercises:  

WEEK 2 _ LECTURE 2 _ Usability: Designing Products for User Satisfaction

Week 2 _ Class Note _  Usability: Designing Products for User Satisfaction


In-Class Exercises: 
WEEK 3 _ LECTURE 3 _ Colours for Web 

Week 3 _ Class Note _ Colour Theory for Web Designers 

In-Class Exercises: 
Do some reach with the link that is given: 

Question:
1) What are the three basic colours that the monitor transmits? 

2) How many colours could be referenced by name (e.g. 'red') in HTML 4.01?
16 colours are defined in the HTML. White, Silver, Grey, Black, Red, Maroon, Yellow, Olive, Lime, Green, Aqua, Teal, Blue, Navy, Fuchsia, Purple. 

3) How many different colours are there in the 'web-safe' palette?
216 colours 

4) Are the majority of people we refer to as colour blind unable to see any colour at all? Explain. 
It is not true. 

5) According to the WebAIM page on colour blindness what is the key to designing sites that are accessible to people who are colour blind? 
EXERCISES
WEEK 1 _ EXERCISES 1 _ Website Analysis 
INSTRUCTIONS
We are assigned to choose two websites from the link given and review it. Things that need to take noted it is the design, layout, content and functionality. Moreover, we need to identify the strengths and weaknesses of the website and do consider how they impact the user experience. Write a brief report summarising in not more than 500 words. 


What to have in the Analysis: 

1) Consider the purpose and goals o the websites and evaluate whether they are effectively communicated to the user. 
2) Evaluate the visual design and layout of the website, including its use of colour, typography and imagery.
3) Consider the functionality and usability of the website, including its navigation, forms and interactive elements.
4) Evaluate the quality and relevance of the website's content, including its accuracy, clarity and organization.
5) Consider the website's performance, including its load times, responsiveness and compatibility with different devices and browsers. 

EXERCISES 1 _ WEBSITE ANALYSIS 

Fig 1.1 _Website Analysis 


WEEK 2 _ EXERCISES 2_ Web Replication 
Task Description:

The objective of this task is to recreate two existing websites, which can be accessed through the provided link. The main goal is to gain a deeper understanding of their website structures. We are free to choose any two websites from the given options. 

Ensure that the dimensions of the existing websites, including width and height, are followed precisely during the replication process. This exercise presents an excellent opportunity to improve design skills using either Photoshop or Adobe Illustrator software while learning about the best practices for web design.

When working on the replication, feel free to use images from stock image sources or free stock icons. While the images don't need to be exact matches, may use similar ones that align with the overall theme. Pay close attention to the layout, type style, and colour scheme of the original websites.

If you need similar typefaces or fonts to those used in the original websites, can explore Google Fonts to find suitable options.

As part of the task, don't forget to update your e-portfolio to document the entire process of completing the exercise. This will showcase my progress and the skills I have developed while working on this project.

Ocean
Fig 2.0_Final_Ocean

Bitcoin 
Fig 2.1 _Final_Bitcoin

EXERCISE 3_HTML Personal Profile:
Task Description:
Our assignment involves creating a personal profile page exclusively using HTML. The primary purpose of this exercise is to provide an opportunity to hone our HTML skills while developing a webpage that showcases our individual interests.

Instructions for the Task:

Firstly, carefully consider the elements we wish to incorporate into our profile page. Key components should encompass our name, a photograph, a concise biography, and a selection of personal interests.

To structure the content effectively, utilize HTML tags. Employ headings such as h1, h2, etc., to emphasize different sections and paragraphs (p) to enhance content readability.

To display our personal interests, utilize lists (ul or ol). For example, we may craft a list that comprises our favourite books, movies, or hobbies.

Incorporate relevant links (a) on our profile page. This may involve linking to our social media profiles or other captivating websites of interest.

To further enrich the profile page, include an image (IMG) – this could be a picture of ourselves or an image that symbolizes our hobbies and passions.

Once the profile page is complete, we can publish it online through a complimentary hosting service like GitHub Pages or Netlify. Doing so will enable us to witness our webpage live on the internet and easily share it with others.

Fig 3.0, Screenshot from Website.

Fig 3.1, Screenshot from DW. HTML

click here to view my HTML Personal Profile 


EXERCISE 4_Layout Exercise
Task Description:
The objective of this assignment is to design a responsive grid layout for a website using the provided text and images. The grid layout should be visually attractive and functional on various screen sizes, ensuring optimal viewing on both desktop and mobile devices. After completing the task, we are required to upload the exercise to Netlify and share the link for evaluation. During the design process, we should explore media queries to ensure responsiveness, as well as different link styles to enhance both usability and the overall aesthetics of the website.

Content Included in the Layout Exercise:
1. CSS Styling Links
2. CSS @media Rule

To begin, I have prepared a preliminary HTML outline to provide a clear overview of how the layout and content should be presented. This step will facilitate the subsequent CSS styling stage, making the design process smoother and more efficient.

Fig 4.0, Screenshot of PS 

Fig 4.1, Screenshot from DW. HTML

click here to view my Layout Exercise 
FEEDBACK 

- No Feedback - 

REFLECTION 
Experience
Thanks to this exercise, I have gained a deeper understanding of UI/UX and the fundamental structure of HTML and CSS. The hands-on experience allowed me to explore and learn how to create visually appealing user interfaces while ensuring a seamless user experience. By working on this project, I have been able to grasp essential principles such as layout design, colour schemes, and the importance of responsive web design. Moreover, delving into HTML and CSS has given me the ability to construct and style web pages effectively, bringing life to my creative ideas. I am grateful for the opportunity to learn through practical application, and I am excited to further enhance my skills in UI/UX design and web development in the future.



Comments

Post a Comment