Interactive Design - Exercises (HTML & CSS)
03 Apr 2023 - 30 May 2023 (Week 1 - Week 9)
On the left, to showcase the featured research on the landing page, I
added a rectangular shape and reduced its opacity, blending it with the
background (image). However, I was dissatisfied with the final outcome
because on the original landing page, both elements blended seamlessly,
making it difficult to distinguish that a black background was blended
with the rest of the page.
In this exercise, we will create a personal profile page using HTML. The
goal of this exercise is to help us practice our HTML skills and create a
webpage that showcases our personal interests.
Task Requirements
Once I opened a new file using Visual Studio Code, I stored it in a
directory named week 6_exercise and gave it the name index.html.
Additionally, I generated a separate folder titled images where I intend
to place the images that will be utilized on the profile page.
Create a visually appealing and functional responsive grid layout for a
website based on the provided content (text and images). The layout should
adapt to different screen sizes, ensuring optimal viewing on desktop and
mobile devices.
Software: Visual Studio Code
Using split screen, I have my CSS file on the left and HTML file on the right, then I use my iPad to have live update.
In this exercise, we adapt the previous skills and knowledge obtained then further explore the use of ID and class attributes to build our web page. By utilising these attributes effectively, we can manipulate and style different elements on our page with precision.
before (left)
What is Breadcrumb & How It Eases Navigation? (With Examples). (2023, March 23). VWO.
Vincent Lee // 0359386
Interactive Design // Bachelor of Design (Hons) in Creative Media // Taylor's University
Exercises (HTML Document Development & HTML, CSS Document Development, CSS Layout Model)
Interactive Design // Bachelor of Design (Hons) in Creative Media // Taylor's University
Exercises (HTML Document Development & HTML, CSS Document Development, CSS Layout Model)
INSTRUCTIONS <span
id="LIST"></span>
Exercises
Exercise 4:
Web Layout Exercise
Practical
All lectures has been documented here.
Week 1 | Surveying the Possibilities
In-Class Activity
We will split into teams to study THREE good websites and THREE bad websites. We'll make a list of the features and figure out who the websites are meant for and what they're trying to achieve. We'll choose the websites to analyse from the following options:Below are the discussion outcomes from our group (Group 4):
|
| Class Activity 1: Sites Evaluation_jpeg, Week 1 (03 Apr 2023) |
Good websites
M&M Glass Company
Week 2 | Usability: Designing Products for User Satisfaction
In-Class Activity
Mr Shamsul divided us into groups and assign specific scenario in which we
need to design a new interface to solve a particular problem or meet a
particular user need. After that, each group test their prototypes for
usability by having another group act as "users" and attempt to complete a
task using the product or interface.
|
|
Assigned Scenario: Scenario 4: Design a new website for a local
restaurant. |
Class Activity 2: Website Design for Restaurant_slides, Week 2
(10 Apr 2023)
Week 3 | Colour Theory
In-Class Activity
After lectured on the colour theory, we were given instruction to study the links provided then answer the following questions. This activities are conducted as a class discussion where we contribute and discuss each other outputs. Mr. Shamsul gave additional details and explanation after that too.
Class Activity 3: Interactive Exercise_pdf, Week 2 (10 Apr
2023)
Week 6 | The Web
Practical
Mr. Shamsul guided us to use Visual Studio Code and Dreamveawer for our
Exercise 3 and upcoming Project 2. The progression and outcome are
documented below.
|
| filing and renaming |
I rename the folders, files and images according to the
instructions.
|
| visual studio code: project root folder |
|
| adobe dreamweaver: project root folder |
In this practical exercises, we had applied what have been taught in the
lecture session such as headings, paragraph, italics lists, and links
(internal and external link). Besides, Mr. Shamsul also teach us using
[alt="" title=""] to do the hover effect of links and images.
|
| outcome/ view in Safari (Netlify) |
Week 8 | Display and Position
Practical
Creating layout using Display and external style sheets to link several
HTML file. From there, we got to try out how to create borders and
control the height, width, overflow, padding, float, display, margin and
some others.
|
| documenting and renaming of folders and files |
|
| split screen: style_abt.css, index.html, display in safari |
|
| final layout attempt (pre-design) |
Instructions
MIB
<iframe
src="https://drive.google.com/file/d/1QC8REytwzPwV8bgIK6fwXMxF1UDrmN36/preview"
width="640" height="480" allow="autoplay"></iframe>
Week 1 | Exercise 1: Website
Analysis
Figure 1.1 - Exercise 1: Website Analysis_pdf, Week 1 (03 Apr
2023)
Week 2 | Exercise 2: Web
Replicating
For this task, we need to recreate two existing websites provided
below, using the same dimensions as the original sites. This exercise
will help us improve our design skills using software such as Photoshop
or Adobe Illustrator, and learn about web design best practices.
We are also free to use any stock image or icon, moreover we should pay
attention to the layout, font, and colour styles. We are allow to
download similar fonts too if we find them from Google Fonts.
websites to replicate
1. Morgan Stanley:
https://www.morganstanley.com/
2. People by Wagepoint:
https://kinhr.com/
Web Replicating 1 - Morgan Stanley
|
| Figure 1.2 - progressions: "Morgan Stanley", Week 3 (17 Apr 2023) |
While on the right, is the evidence proving my efforts. I used pen tool
and image trace to replicate the icons on the footer of the landing page.
Besides, I also done some leading as I found that the gap of letters are
wider from each others.
|
| Figure 1.3 - Final Exercise 2: Web Replicating "Morgan Stanley"_jpeg, Week 3 (17 Apr 2023) |
Figure 1.4 - Final Exercise 2: Web Replicating "Morgan Stanley"_pdf,
Week 3 (17 Apr 2023)
Web Replicating 2 - People by Wagepoint
|
| Figure 1.5 - progressions 1: "People by Wagepoint", Week 3 (17 Apr 2023) |
I have replicate the icons using pen tool and on both side, I have added
shadow to create depth. Shadows can help create the illusion of depth in
a two-dimensional design, making it appear more three-dimensional.
|
| Figure 1.6 - progressions 2: "People by Wagepoint", Week 3 (17 Apr 2023) |
In Figure 1.4, I have recreated the icons exactly and positioned them
nicely, while the logos of the organisations were downloaded by
right-clicking on the images themselves.
|
| Figure 1.7 - Final Exercise 2: Web Replicating "People by Wagepoint"_jpeg, Week 3 (17 Apr 2023) |
Figure 1.8 - Final Exercise 2: Web Replicating "People by Wagepoint"_pdf, Week 3 (17 Apr
2023)
Week 6 | Exercise 3: Personal Profile Page
(HTML)
Task Requirements
- profile page: include your name, a photo, a brief bio, and some personal interests.
- structure your content: use headings (h1, h2, etc.) and paragraphs (p) to make the content more readable.
- Add lists (ul or ol )to create a list of our favourite books, movies, or hobbies.
- Add links (a): social media profiles or to other websites that we find interesting.
- Include an image (img): a picture of ourself or something that represents your interests.
- publish it online using a free hosting service: GitHub Pages or Netlify.
Progressions
|
| Figure 1.9 - filing and naming of document, Week 6 (08 May 2023) |
|
| Figure 1.10 - visual studio code: project root folder, Week 6 (08 May 2023) |
Software: Visual Studio Code
I have applied most of the knowledge learned in the practical. For
instance, I have applied different headings, paragraph, bolded texts,
lists (order and unordered lists), links (external links) and hover text
on the image.
*view my personal profile page on Netlify (revised on Week 7)
|
|
|
Figure 1.12 - Final Exercise 3: Personal Profile Page_pdf, Week 6
(08 May 2023)
Week 8 ｜Exercise 4: Web Layout Exercise
Task Requirements
- Use CSS Grid or CSS Flexbox to create the grid layout.
- Implement media queries to ensure responsiveness across various screen sizes.
- Consider different link styles to enhance usability and aesthetics.
- Upon completion, upload the website to Netlify.
- Share the submission link for evaluation.
|
| Figure 1.13 - (images) layout content, Week 8 (22 May 2023) |
Figure 1.14 - (text) layout content, Week 8 (22 May 2023)
Progressions
 |
| Figure 1.15 - wireframe, Week 8 (22 May 2023) |
After reading the content given and think how the placement of images to enhance the reading experience, I decided to create a wireframe for me to focus on when coding it later.
|
|
|
Folders are created based on the date and exercise. Inside the folder, there are three main files, which are the index.html, style_content.css and images. This steps are very important as it might affect whether the final outcome can be uploaded to the Internet or not.
|
| Figure 1.17 - visual studio code: project root folder, Week 8 (22 May 2023) |
Software: Visual Studio Code
Using split screen, I have my CSS file on the left and HTML file on the right, then I use my iPad to have live update.
In this exercise, we adapt the previous skills and knowledge obtained then further explore the use of ID and class attributes to build our web page. By utilising these attributes effectively, we can manipulate and style different elements on our page with precision.
 |
| Figure 1.18 - interfaces in different devices, Week 8 (22 May 2023) |
*view my web design on Netlify
|
| Figure 1.19 - Final Exercise 4: Web Layout Exercise (desktop version)_jpg, Week 8 (22 May 2023) |
Figure 1.20 - Final Exercise 4: Web Layout Exercise (desktop version)_pdf, Week 8 (22 May 2023)
Feedback
Week 7
|
| Markup Validation Service |
There are total 49 errors found in my index. html folder.
after (right)
After fixing my HTML and CSS code, there show no error within it.
Card sorting in UX: What is it? (2022, July 25). UX Design
Institute. Retrieved May 8, 2023,
Reflection
*reflection are documented according to task.
Exercise 1
taught me the significance of being a UI/UX designer because it was so
distinct from all the websites I had previously seen. At first, it was
believed that UI/UX designers' only responsibility was to create
application interfaces that would help users purchase things, record
their work, etc. Personally, I love these two websites' color
combinations concepts, and transitions. The animation on the first
website I explore raises the bar for the industry; it makes it clear
what must be accomplished to work as a UI/UX designer. The effects
when scrolling through the website on the second mentioned website,
even though it was just a platform for booking museum tickets, make
the complete booking ticker journey great. In addition, I
appreciate how the call-to-action buttons respond when I click them.
(ps. my interaction on the websites are provided in Fig. 1.1).
Exercise 2 allows me to observe that creating a website for a landing page demands
a lot of planning and attention to detail is absolutely correct. It's
not just about having a pretty design, but also about making sure that
the website is user-friendly and represents the company's values.
Moreover, I had experienced that to become a web designer, it requires
focus on the details such as image size, typography, and spacing by
adhering to the five principles lectured by Mr. Shamsul as these
principles will highly affecting the users experience and brand
recognition.
Exercise 3 proved to be a fascinating challenge that allowed us to create a
web page from scratch. To those who are unfamiliar with this task, it
may seem like a waste of time when there are readily available options
like Google Docs or Microsoft Word. However, as a student in the field
of creative media, I believe it is crucial to be able to create a
website from scratch. The overall experience was delightful, as it gave
me a better understanding of how websites operate, minimally. However, I
was a bit disappointed with my outcome, as I was unable to implement the
CSS code to format my website in the way I had envisioned. Lastly, when
starting on this task, my hand was hard to follow my instructions as I
need to think of what elements and tags for each paragraph, links and
lists. Fortunately, this issues does not stops me to aim to do better in
the upcoming project.
Exercise 4 proved to be a compelling and engaging experience that allowed us to delve deeper into the intricacies of coding and transform it into a functional website. However, throughout these exercises, including Exercise 3, we encountered numerous obstacles and challenges that left me feeling overwhelmed, as the outcomes didn't always align with our initial plans. Furthermore, the lack of technical expertise, knowledge, and guidance from professionals made the learning experience unsatisfactory and led me to avoid it for days.
Setting aside these internal struggles, one important lesson I gleaned from these coding exercises was the significance of meticulous planning, particularly when it comes to designing the layout. It is highly beneficial to jot down the HTML and CSS code in separate columns as a point of reference and a helpful reminder to stay on track while building the website. Additionally, it is essential to assign specific names to sections or columns, especially when dealing with similar items in a list. By doing so, we can easily retrieve them in the future or identify errors more effectively.
Setting aside these internal struggles, one important lesson I gleaned from these coding exercises was the significance of meticulous planning, particularly when it comes to designing the layout. It is highly beneficial to jot down the HTML and CSS code in separate columns as a point of reference and a helpful reminder to stay on track while building the website. Additionally, it is essential to assign specific names to sections or columns, especially when dealing with similar items in a list. By doing so, we can easily retrieve them in the future or identify errors more effectively.
Further Reading
Lynch, P. J., & Horton, S. (n.d.). Site Structure. Web Style Guide.
Retrieved May 8, 2023, from
Lynch, P. J., Horton, S., & Nielsen, J. (n.d.). Presenting Information
Architecture. Web Style Guide.
Retrieved May 8, 2023, from
Notes on the basics of Information Architecture : r/UXDesign.
(2022, March 4). Reddit.
Retrieved May 8, 2023,
from
https://www.reddit.com/r/UXDesign/comments/t6d9fu/notes_on_the_basics_of_information_architecture/
What is Breadcrumb & How It Eases Navigation? (With Examples). (2023, March 23). VWO.
Retrieved May 8, 2023, from
https://vwo.com/blog/why-use-breadcrumbs/
Quick Links
Project 1:
Prototype Design
Project 2: Working Web Page
Final Project: Design, Exploration and Application
