Interactive Design - Exercises
03.04.2023 - 26.05.2023 / Week 1 - Week 8
Lim Rui Ying / 0358986
Interactive
Design / Bachelor of Design (Hons) in Creative Media
Exercises
LIST
Exercises
Exercise 3:
HTML & CSS Development
Exercise 4:
CSS Layout
INSTRUCTIONS
PRACTICAL
WEEK 1 | Group Activity: Websites Analysis
We are divided into groups to analyse THREE good websites and THREE bad
websites by listing the characteristics and identifying the target audience
and the purpose of the websites. Websites to be analysed should be selected
from the websites below:
1. https://www.mwa.my/2021/
1. https://www.mwa.my/2021/
|
| Overview of websites analysis (Group 4), Week 1 (3/4/2023) |
Good websites
M&M Glass Company
TuneBoss
WEEK 2 | Group Activity: Prototyping
During week 2 class, we learned about website usability. We were given
four scenarios for designing website interfaces by prototyping to solve
a particular problem or meet the user's needs. Then, each group is
tested on the usability of the website by another group.
The scenario assigned to our group:
|
| Scenario 4: Design a new website for a local restaurant |
Group activity: Prototyping for restaurant website design, Week 2
(10/4/2023)
Slides are made by Vincent Lee
Slides are made by Vincent Lee
WEEK 3 | Class Activity: Colour Theory Exercise
We have to read through the resources from the websites below and answer
the questions given by Mr Shamsul.
Resources:
Web Style Guide: Visual Design
http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html
Wikipedia: Web Colors
http://en.wikipedia.org/wiki/Web_colors
WebAIM: Color Blindness
http://www.webaim.org/articles/visual/colorblind.php
Questions:
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?
3. How many different colours are there in the "web-safe" palette?
4. Are the majority of people we refer to as colour blind unable to see
any colour at all? Explain.
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?
Answers:
1. The three basic colours are red, green and blue.
2. 147 colours could be referenced by name in HTML 4.01.
3. There are 216 colours in the "web-safe" palette.
4. No, they can see certain colours. For example, people with
red-green deficiencies only have difficulty distinguishing between
some shades of reds and greens.
5. Make sure colour is not the only way to convey a message.
WEEK 7 | CSS Style
During week 7's class, Mr Shamsul reviewed our personal profile page and introduced CSS to us. He taught us to implement internal CSS into the HTML file of our personal profile page.
 |
| CSS style |
EXERCISES
HTML Document Development & HTML, CSS Document Development, CSS
Layout Model
EXERCISE 1: Websites Analysis
WEEK 1
We are to choose TWO websites from SPINX Digital and analyse the chosen websites from all aspects. We have to
identify the strengths and weaknesses of the websites and consider the
impacts on user experience. We should write a brief report to summarize
our findings and recommendations.
Report requirements:
- Format: Google Docs / Google Slides- Word count: not more than 500 words for TWO websites
- May include screenshots of the webpage as support evidence to explain
Aspects to be analysed:
- Purpose and goals - Visual design and layout - use of colour, typography, imagery
- Functionality and usability - navigation, forms, interactive elements
- Quality and relevance of content - accuracy, clarity, organisation
- Website performance - loading times, responsiveness, compatibility with different devices and browsers
Report of Website Analysis
Fig. 1.1 Summary report of website analysis - PDF, Week 1
(9/4/2023)
EXERCISE 2: Web Replication
WEEK 3
We were tasked to replicate the landing page of two websites from the
five websites given by the lecturer. We could learn how the grid system
is applied in website interface design through this exercise.
Websites for replication:
Morgan Stanley
https://www.morganstanley.com/
People by Wagepoint
https://kinhr.com/
Wozber
https://www.wozber.com/en-us
Ocean Health Index
https://www.oceanhealthindex.org/
Other resources:
Google Fonts
https://fonts.google.com/
Free stock images: Pexels
https://www.pexels.com/
Website Replication 1: Luno
First, I import the screenshots of the landing page of the website Luno
into Adobe Illustrator.
|
| Fig. 2.1 Screenshots of the original website, Week 3 (20/4/2023) |
The website uses the typeface Fracktif. I couldn't find the typeface in Google Fonts so I replaced it with the typeface Helvetica Neue. The texts are arranged according to their places and shown in outline view.
|
| Fig. 2.2 Texts in outline view, Week 3 (20/4/2023) |
Below is the comparison between the original website and replication, and also an outline view of the final outcome.
|
|
Fig. 2.4 Comparison #1 - original & replication; Final outcome outline view #1, Week 3 (20/4/2023) |
|
|
Fig. 2.4 Comparison #2 - original & replication; Final outcome outline view #2, Week 3 (20/4/2023) |
Fig. 2.5 Final outcome of website replication 1: Luno - PDF, Week 3
(20/4/2023)
Website Replication 2: Ocean Health Index
|
| Fig. 2.6 Screenshots of the original website and images imported, Week 3 (17/4/2023) |
|
| Fig. 2.7 Texts in normal and outline views, Week 3 (17/4/2023) |
|
| Fig. 2.8 Images and boxes are arranged, Week 3 (17/4/2023) |
Below is the comparison between the original website and replication and the final outcome in the outline view.
|
| Fig. 2.9 Comparison - original & replication, Week 3 (17/4/2023) |
|
| Fig. 2.10 Final outcome in outline view, Week 3 (17/4/2023) |
Fig. 2.11 Final outcome of website replication 2: Ocean Health Index
- PDF, Week 3 (17/4/2023)
EXERCISE 3: HTML & CSS Development
HTML Exercise: Personal Profile Page
WEEK 6
For this task, we were required to create a personal profile page using
HTML.
Task requirements:
- Software: Adobe Dreamweaver OR Visual Studio Code
- Include your name, a photo, a bio, and personal interests (hobbies,
favourite movies/books, etc)
- Use headings (h1, h2, etc) and paragraphs (p)
- Use lists - ordered list (ol) & unordered list (ul) to present the
personal interests
- Add links (a) that link to your social media profiles or to other
websites that you find interesting
- Add an image (img) - an image of yourself or images that represent your
interests
- Publish the profile page through a free hosting service: GitHub Pages OR
Netlify
Before starting the exercise, I followed the tutorial by Mr Shamsul to
practise HTML and learn its structure as I have no HTML coding experience
before.
Heading into the exercise, I first documented the content to be included
in my profile page:
Fig. 3.1 Content of personal profile page - PDF, Week 6
(14/5/2023)
|
| Fig. 3.2 Draft personal profile page & HTML code #1, Week 6 (14/5/2023) |
|
| Fig. 3.3 Files are organised, Week 6 (14/5/2023) |
Although I knew that the presentation of a web page is defined by CSS
code, I would like to enhance the structure and aesthetics of my profile
page using the "style" attribute. Thus, I applied colours, changed the
font and adjust the alignment. Additionally, I added margins to the
profile page so that the content would not go across the full width of the
page.
- Background colour: lavender
- Font colour: indigo (h1 & h2 - headings), #ff9999 light coral (h4 -
subheading), #ff6666 coral (a - links)
- Font: Optima
- Header alignment: center
- Margins: 7% 15%
|
| Fig. 3.4 Draft personal profile page & HTML code #2, Week 6 (14/5/2023) |
After completing my profile page, I published it on Netlify. But when I
opened the Netlify link, my profile image was not visible. I investigated
the issue and realised that it could be due to incorrect image links,
changes in the location or names of image files or folders. It seemed that
I might have renamed the file or folder, causing the image to not appear.
Once I understood the reasons, I reinserted the image link in the HTML and
republished the profile page on Netlify.
|
| Fig. 3.5 My profile image was not showing, Week 6 (14/5/2023) |
Final HTML Exercise: Personal Profile Page
My profile page on Netlify: https://ruiyiing.netlify.app/
Fig. 3.6 Full personal profile page - PDF, Week 6 (14/5/2023)
Fig. 3.7 HTML code of personal profile page - PDF, Week 6
(14/5/2023)
EXERCISE 4: CSS Layout
WEEK 8
For this task, we were assigned to create a responsive grid layout web page
using HTML and CSS with the given content.
Responsive web design:
- The design and alignment should be visually appealing and functional
across different screen sizes, allowing for optimal viewing on both desktop
and mobile devices
- Explore media queries to ensure that your website is responsive
First, I created a layout sketch for the web page and made the first attempt
in Visual Studio Code.
|
| Fig. 4.1 Sketch, Week 8 (26/5/2023) |
|
| Fig. 4.2 Attempt #1, Week 8 (26/5/2023) |
From my first attempt, I found some parts of the layout had to be adjusted:
1. the navigation bar was not centred
2. the columns for each sub-article did not fit well with the content
3. the last section should be centred
|
| Fig. 4.3 Layout amendments made, Week 8 (26/5/2023) |
Amendments made:
1. the navigation bar was centred by utilising the grid property
2. the auto overflow property was added to the sub-article container
3. left and right paddings of 40 px were added to the last section
After making the amendments, I moved on to create the responsive web page. I
first inserted the viewport meta tag to ensure the web page could fit all
sizes of devices and browsers.
Next, I observed the parts to be adjusted for desktop view and mobile view
by utilising the DevTools on Google Chrome. Media queries were applied to
create the responsive web page.
|
| Fig. 4.4 Responsive navigation bar, Week 8 (26/5/2023) |
I wanted to make the navigation bar be viewed vertically centred on mobile devices so I changed the float left to none and added the clear left property to the navigation bar.
|
| Fig. 4.5 Responsive sub-article column, Week 8 (26/5/2023) |
The content and the image of each sub-article were not visually appealing in mobile view, so I intended to centre the title and the image, and let the text move below the image. To make the adjustments, the centre text-alignment property was applied to the title and the centre grid property was applied to the image. While for the text, the clear left property was added to it.
|
| Fig. 4.6 Responsive footer, Week 8 (26/52023) |
Finally, the footer had a similar problem to the navigation bar and I would
like to make them view vertically centred as well. Thus, the float left
property had changed to none and a line height of 1.6 em was applied to the
footer.
Final Exercise 4: CSS Layout
Display web on Netlify: https://display-exercise4.netlify.app/
Fig. 4.7 Final Exercise 4: CSS Layout (desktop view) - PDF, Week 8
(26/5/2023)
Fig. 4.8 Final Exercise 4: CSS Layout (mobile view) - PDF, Week 8
(26/5/2023)
Fig. 4.9 Exercise 4 HTML and CSS codes - PDF, Week 8 (26/5/2023)
REFLECTION
Exercise 1: Website Analysis
Through the group and individual website analysis exercises, I noticed
that a high-quality website should have a clear purpose, navigation,
engaging interactive elements, aesthetic visual design, quality content
and optimised web performance. When I browsed through those
websites, I was amazed by the nice designs and layouts of the websites,
also the engaging interactions.
Exercise 2: Website Replication
Through the website replication exercise, I could understand the pattern of
a landing page design and the elements included in the landing page of a
website such as the logo, navigation bar, and footer which consists of
contacts. I also observed that the layout of the website design is arranged
based on the grid system. Besides, a website always has its purpose stated
clearly on the landing page with a big title.
From these exercises, I could learn how websites interface, usability and
functionality are designed. This module is well-related to UI/UX and it
gives me an overall view of UI/UX. To specialise in UI/UX, I will have to
further study all phases of web design, from research, planning, design,
development testing, and launch to maintenance.
Exercise 3: HTML & CSS Development (Personal Profile Page)
It was quite an interesting experience of creating a personal profile page
using HTML for the first time. Learning the basics of HTML code was not
difficult as I thought. However, there are still many rules and conventions
of HTML I have to learn.
Exercise 4: CSS Layout
Creating a responsive website with a grid layout using CSS was
challenging, especially when trying to achieve a specific desired layout,
as well as a responsive web design. I have to understand the concepts and
utilise the appropriate properties so that I can gain more control over
the grid layouts and achieve the desired outcomes for different
circumstances on the website.
Both exercises help to build my foundation in web design, especially for
the upcoming project. I have to master the HTML and CSS concepts and rules
to build engaging, functional and responsive websites.
Comments
Post a Comment