Interactive Design: Exercises
23/4/2024 - 2024 (Week 1 - Week )
Lim Yu Xuen / 0359676
Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University
Project 1: Prototype Design
TABLE OF CONTENTS
✿ Lectures
Website 1: SCRIB3
Website 2: ROOTFOOD
✿ Exercise 2: Replicate a website
INSTRUCTIONS
Exercises: HTML Document Development & HTML, CSS Document
Development, CSS Layout Model (20%)
Class Exercises. To show competencies in understanding web development
through prototyping and development processes. Students will be provided
with basic knowledge of creating and developing Websites. Assessment is done
on weekly basis. Exercises includes:
- Week 2 — Web Analysis (To analyse an existing website and identify areas for improvement. This exercise will help you develop your critical thinking skills and gain insights into web design best practices)
- Week 3 — Replicate a website (To replicate an existing website to gain a better understanding of its structure. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices)
- Week 5 — HTML and CSS Document Development
- Week 8 — CSS Layout
Marking Criteria:
- All exercises are complete
- Students exhibits understanding of the paper use of tags, attributes and HTML/CSS properties in the outcomes of the various exercises; use of proper formatting, understanding of grid, website goals
- Information is organised properly
- Weekly self-directed coding practice
Learning Goals:
- Technical and digital media competencies — Demonstrate creative use of software, and effective use of digital media skills to promote or communicate design concepts or solutions
Timeframe: 7 Weeks (Week 1 - Week 8)
Deadline: Week 8
Find out other information about this module below
Figure 1.1 Module Information
LECTURES
Week 1 — Introduction and Briefing
Mr Shamsul gave us a brief on all our projects that will be included in
this module. Besides that, he tasked us to join the Google Classroom and
fill in the google sheet with our designated blogger link and short
information about ourselves. Throughout the class, he gave us a few student
examples for our upcoming projects, and giving us tips and tutorials on how
to analyse a website (exercise 1 due week 2).
Week 1 — Lecture
Usability: Designing Products for User Satisfaction
Usability refers to how effective and efficiently a user can use a product,
it is part of UX design as well. When users first encounter an interface,
they should be able to find their way about easily enough to achieve
objective without relying on expert knowledge. An interface with high
usability guides users through its easiest route to achieve its goal.
Key Principle of Usability: Consistency, Simplicity, Visibility, Feedback,
and Error Prevention
Figure 2.1 Lecture 1 Slides
Week 2 — Class Activity
In today's practical class activity, we have to design a new interface to
address specific problems or user needs. We were grouped with the people in
the same table and we discussed on scenario 1. Some of the information
provided are listed below.
Task: Design a new e-commerce app for a local clothing store
User Need: Users want to be able to easily browse and purchase clothing
items online, with clear product descriptions and images, and a simple
checkout process.
Usability principles to consider: Consistency, Simplicity, Visibility,
Error prevention
Figure 2.2 Outcome of Designed Interface
Week 3 — Lecture
Understanding Website Structure
Mr Shamus lectured us about website structure. Website Structure affects
user experience, SEO, and overall website performance. A well-structured
website helps users find information easily and keeps them engaged.
Three key elements:
- Header - which provides users with the main navigation and important information
- Body - contains the main contents but needs to be organised properly to ensure readability
- Footer - provides closure to the webpage and additional navigation options
Figure 2.3.1 Lecture 3 Slides
Figure 2.3.2 Anatomy of landing page
Week 4 — Lecture
The Web and Language
Web Standards covers the timeline of web evolution and how the softwares/
hardwares of website works. We briefly went through the structure of a
webpage. We learnt the universal web language which is HTML. Some of the
basics of HTML we learnt to create is: headings, paragraphs, bold texts,
italic texts, ordered and unordered lists, inserting images. We applied the
knowledge in TextEdit, and saved the progress file as index.html and
published it on Netlify.
Published web through Netlify:
My First Encounter of HTML
Figure 2.4.1 Screenshot of HTML code
Figure 2.4.2 Final HTML File
HTML & CSS
In this class, we have learnt to create tables and forms. We spent the rest
of the day in class, practicing on creating tables and forms.
Figure 2.5 Lecture 5 Slides
Figure 2.5.1 Table
Figure 2.5.2 Form
Week 6 — Lecture
HTML & CSS
Learning CSS Style Rules with HTML Elements: We're using internal CSS to
style our websites by placing the CSS rules inside a <style>
element, which usually sits inside the <head> element of the page. I
learnt to change the font, colour, and different styles.
The photos of the outcome are attached above: Figure 2.5.1 Table &
Figure 2.5.2 Form.
Week 7 — Lecture
CSS Selector
We revised and learnt more about CSS Selectors. In this lesson, we learnt
how to do float. We were tasked to add photos and apply float, so the texts
wrap around the 2 photos.
Figure 2.6 Lecture 7 Slides
Figure 2.6.1 Float
EXERCISE 1: WEB ANALYSIS
Task Requirements
- We were tasked to choose TWO (2) Websites from the links given. Review the website and identify the areas for improvement. Take note of the website's design, layout, content, functionality, and consider how they impact the user experience.
- Write a brief report summarizing your findings and recommendations.
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
- Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
- Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
- Write a brief report summarizing in not less than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)
WEBSITE 1
: SCRIB3
Figure 3.1.1 Screen Capture of SCRIB3 Homepage, Source:
link
Purpose & Goals
SCRIB3 is the cutting-edge marketing studio serving crypto and web3
companies.
Their services mainly consists of social and content, public
relations, growth and analytics, community, business development, and
graphic design.
While scrolling through the Homepage of SCRIB3, the animations
captured my attention. They featured the companies they work with and
also have examples of the projects they have completed. This builds
the trust and catches the viewer's attention, increasing the number of
potential customers.
SCRIB3 identifies themselves as a Crypto Native Team, and their
purpose is to create work that guides and empowers those
pioneering permission-less technology. SCRIB3's goal is to
build an on-chain future.
Figure 3.1.2 Who SCRIB3 Worked with & Past Work Examples
Visual Design & Layout
Overall, the visuals on this website is neat and easy to
understand.
:COLOUR
SCRIB3 uses a consistent colour contrast of 2-3 colours for the
entire page, which draws the eye in naturally while creating
harmony. Two colours were used, the difference between the brightest
luminance and the darkest luminance. Colours like white and black
are used to make a statement, which was mixed with bold contrast of
cool colours such as blue, green, and pink.
Figure 3.1.3 Colour Palette of SCRIB3
Figure 3.1.4 Contrasting Colours
:TYPOGRAPHY
On the homepage of SCRIB3, it can be seen that there were 3
different fonts being used for the entire website. These varying
font types are in different colours and sizes, determining the
readability of text displayed on digital devices. This keeps the
site professional and creates a dynamic visual hierarchy,
stimulating powerful emotions effectively. Designing headlines in
different sizes also contributes to how a viewer perceives the
information, and invests more time on reading the content
provided.
:: FONT 1
Eklipse by Neder
Figure 3.1.5 Eklipse Font, Source:
link
:: FONT 2
Galix Mono Medium by Eclectotype
Figure 3.1.6 Galix Mono Medium Font, Source:
link
:: FONT 3
Neue Helvetica 53 Extended by Linotype
Figure 3.1.7 Neue Helvetica 53 Extended Font, Source:
link
Figure 3.1.8 Varying Font Type and Sizes
:IMAGERY
The images that can be found through SCRIB3's website always
remains in the same concept and style. The images placed are
edited in contrasting colours, and the style is dotted well like
an illusion which is very unique and stands out from other
websites.
Clear images were provided in the example of past works. This
helps customers to visualise the potential outcomes they may
expect while working with SCRIB3.
Figure 3.1.9 Dotted Illusion Style Images
Figure 3.1.10 Images and Links to Past Works
However, I noticed the site needs to have more examples of previous
works for the Graphic Design department. In the page where SCRIB3
featured their work with Axelar Network, there weren't many images
provided. This confuses viewers and limits the expectations of
having potential customers.
Figure 3.1.11 Images in Axelar X SCRIB3 Work Showcase
:LAYOUT
The layout of SCRIB3 was well organised and easy to read. The use
of bold typography and different font sizes made the website
attractive to the audiences. The sections are divided clearly, and
there's just enough white space to split the titles and borders,
which makes each section easier to read and understand.
Figure 3.1.12 White Space of SCRIB3 Website
Functionality & Usability
The website's navigation and usability is simple and
user-friendly, featuring clearly labelled categories and jump
links to specific sections, which enhances user
experiences.
Figure 3.1.13 Sticky Bottom Navigation Bar
SCRIB3 placed a bottom navigation bar that is sticky when scrolling
around the website. This makes it easier for users to use the jump
links and easily access certain sections.
Figure 3.1.14 Press Section
However, on the home page with the PRESS section, when you hover
onto the specific title, it shows 2CTA buttons of the same usage
which navigates to the YAHOO FINANCE press page. With these
buttons putting close to one another, it confuses users on whether
to press on 'view article' or 'the arrow button', as it may
perform the same functions. It is advised to put 1 clear button so
the efficiency would not be interrupted.
Figure 3.1.15 Interactive Elements
Furthermore, this website has many interactive elements such as
animations, elastic type from mouse interaction, service totem
and so much more. The attachment above shows a elastic type of
interactive element, when the mouse hovers and clicks onto the
object, the element bounces and stretches.
Figure 3.1.16 Service totem
SCRIB3's homepage consists of a service totem section, where
the arrows are interactive and the tower in the background
switches its 'service role' along with the information of the
service provided.
All these elements work hand in hand to engage users, provide
navigation and add visual feedbacks, providing information and
interesting interactive elements that adds uniqueness to the
website.
Content
SCRIB3's website content aligns with its purpose, it offers
information about their crypto and design services while
providing examples of their past works which increases the
possibility of work offers. The information is
well-structured, east to comprehend, and organised, aiding
users in navigating the site effectively.
The content in SCRIB3's case study and overview page
provides in-depth details about the services they have done,
the impact of growth for the analytics. But, the pricing of
services and also availability remains uncertain, as they
would want potential clients to chat with SCRIB3's team to
reveal the price of their services. Regularly reviewing and
updating the content in SCRIB3's website is advisable to
increase the website's credibility and provide users with
precise up-to-date information.
Performance
LOAD TIME:
SCRIB3's website loading speed is generally quick, enabling
users to access the content promptly. However, load times may
vary depending on factors like internet connection speed and
device capabilities. To test the SCRIB3's load times, I ran a
test via SolarWinds Pingdom. Results of the test is attached
below.
Figure 3.1.18 Results of SCRIB3's load times
According to the results, the performance grade is a B, some
of the improvements can be made are listed below:
- compress components with gzip
- make fewer HTTP requests
- add expires headers
- avoid empty src or href
- put javascript at the bottom
- reduce the number of DOM elements
- make favicon small and cacheable
RESPONSIVENESS & COMPATIBILITY:
Figure 3.1.19 Desktop/Laptop View
Figure 3.1.20 Smartphone View
Figure 3.1.21 Tablet View
Strengths & Weaknesses
To conclude, there are notable strengths and weaknesses to
SCRIB3.
Strengths:
- Navigation — Sticky navigation bar gives users a smooth journey as it is easy to move from sections to sections.
- Interactive elements — User friendly interactive elements provides users an engaging experience, keeping users entertained throughout their stay in the website.
- Content — The content is effectively communicated with detailed information and serves the website's purpose. Information is well structured and organised.
- Visual Appeal — The website comes with contrasting colours, and users are given a choice to change the colours.
Weaknesses:
- Images — Not enough examples are provided for the past works & case study sections.
- Testimonials — Not provided which might affect and decrease the number of potential customers, as there is not enough credibility.
- Services — lacks clarity, not all information about SCRIB3's services are provided in the website.
- Not optimised mobile features — most interactive elements are missing, too much white space, decreases user experience.
WEBSITE 2
: ROOTFOOD
Figure 3.2.1 Screen Capture of ROOTFOOD Homepage,
Source:
link
Purpose & Goals
Purpose of the website:
Rootfood is a personalised nutritional advisor and
private chef service aimed at helping users explore
the infinite possibilities of a delicious, well
balanced, carefully evaluated diet. The main purpose
of this website is to offer services such as Nutrition
Advisor and Private Chef Service.
In the website, Rootfood stated that their private
chef services provides a unique style of nutritional
consultancy nurtured by care and attention. Together,
they will develop a continuous and trust-based
feedback system that regards the gastronomic
preferences as well as the organoleptic qualities of
natural and high quality food ingredients. Besides
that, they follow the latest rends and discoveries in
the field of science to design diets according to the
body composition of each special client.
Rootfood's nutritional assessments combines
traditional techniques with state of the art
experimental technologies such as genetic testing,
different types of microbiome analysis, saliva hormone
testing, and more.
Goals of the website:
It aims to transform the satisfaction of a basic human
need into a complex form of art. In another way of
saying this, Rootfood would like to stimulate flavour
receptors that can inspire and sustain change in all
aspects of life, no matter the health status, age,
level of physical activity or profession.
Summary:
In sum, the website is designed for the users to know
more about the services provided by Rootfood, and ways
to connect with them about their services.
Visual Design & Layout
:COLOUR
ROOTFOOD uses soft pastel colours, mostly more to
autumn tones. It appeasrs to be minimalistic and
gentle at the same time. Autumn palette is warm, rich,
earthy, and vibrant, making the website look aesthetic
and expensive. Contrasting colours were used for the
background and the titles to catch user's attention
and enhance visual appeal and readability.
Figure 3.2.2 Colour Palette of ROOTFOOD
Figure 3.2.1 Contrasting Colours
The choice of the font for the website creates a
sense of old money, making the site look vintage
which fits with the imagery theme given. There are
a total of 3 fonts being used for the website
design which has high readability, increasing the
quality of user experience. However, I feel that
the font 3, BD Megalona Extra Light by Balibilly
Design, should be replaced by Bold Typeface
weight, to increase the readability, as the
colours being used with the font are pastel, which
makes it hard to view the text. Another way to fix
this, is to adjust the size of the paragraphs to a
slighter bigger font size. I like how the website
uses different sizes for the titles and body
paragraphs, this helps the viewer to differentiate
the important and less important information. The
website also made use of Italic, and Standard for
the body paragraphs. This highlights the important
details in the text which creates a higher impact
compared to putting all the words in the same
size.
:: FONT 1
Stigsa Display by Seniors Studio
Figure 3.2.2 Stigsa Display Font, Source:
link
:: FONT 2
Nimbus Sans Novus Std T Medium SC by
URW Type Foundry
Figure 3.2.3 Nimbus Sans Novus
Std T Medium SC Font, Source:
link
:: FONT 3
BD Megalona Extra Light by
Balibilly Design
Figure 3.2.4 BD Megalona Extra
Light, Source:
link
Figure 3.2.5 Varying Font Type
and Sizes
:IMAGERY
Effective use of imagery including
images, icon, and captivating images
of their food. The images are all in
the same colour graded style, which
fits the theme of the website.
Figure 3.2.6 Image gallery for
past food works
In the Figure attachment above,
ROOTFOOD included an image gallery
for users to view the food they
have created visually. Besides
that these elements are
interactive, which can be hovered
over, to view the ingredients used
for the food. Interactive elements
can engage users, and keeps
descriptive information hidden
neatly. The overall imagery
results in a harmony and well
balanced look.
Figure 3.2.7 Image gallery
after expanded
In the Figure attachment above, it
can be seen that it is the view of
the image gallery after clicking
onto the button on the bottom
left: CLICK TO EXPAND. In this
view, there are clear images of
all the food produced by FOODROOT,
along with a short description at
the bottom. Besides that, it can
be seen that the vertical bar on
the right of the expanded image
gallery includes all the photos
that can be looked through in the
gallery. I like how it features
the current viewed image in RGB,
well the others are in B&W.
This allows viewers to easily know
which photo they are viewing, out
of all the images in the image
gallery.
:LAYOUT
This website layout is
straightforward, it includes all
of its content in one horizontal
and vertical column. Users would
automatically scroll down for
more information. The scroll
direction is unique as it is
viewed and scrolled sideways
instead of downwards. Besides
that, the white space being used
in this website is minimal and
well organised. The sections are
divided accordingly to the
titles and sections.
Figure 3.2.8 Organised
sections
Figure 3.2.9 Good
organised elements
Functionality &
Usability
The website features a
simple and clear
navigation side bar. Users
can scroll to have access
to the general content.
Besides that, they are
allowed to use the CTA
buttons to be brought to
specific content which is
linked accordingly to
its title. This
enhances user
experience.
Figure 3.2.10
Navigation Side bar
with jump links
Figure 3.2.11
Sticky Navigation
Bar
In the figure attached
above, it can be seen
that the navigation
bar is sticky when
scrolling around, this
keeps the navigation
bar accessible anytime
throughout, which
users can use to
easily access certain
sections in a fast
pace.
Figure 3.2.12
Cursor and
Underline
Figure 3.2.13
Side bar hovered
with images
In the figure
attached above, the
cursor changes and
the CTA buttons are
underlined after it
is hovered above.
This enhances user
visibility and
navigation
efficiency. Besides
that, the other
figure above shows
images popped up
when a specific
section of the
navigation bar is
being hovered onto.
This example helps
users understand
what to expect in
certain sections, by
providing examples
that are related to
the section.
Content
ROOTFOOD's website
content aligns with
its purpose, it
offers information
about the founder
(chef), past works
of their food,
introduction to
ROOTFOOD, and also
their socials to
connect with them.
The information is
well-provided, and
up-to-date.
Figure 3.2.14
Content
Pages
In the figure on the
left, it can be seen
that the information
to connect with
ROOTFOOD is
provided. It has
their contact
number, mail, and
links to their
socials. However, I
noticed that the
information for
other sections are
very limited. In the
figure attached on
the right, the
"What" page, only
consists of a short
description of
ROOTFOOD. Instead,
it is recommended to
include services and
their price list so
that it is more
transparent to users
and helps them with
deciding on a
certain service.
This also speeds up
the process for both
parties to get
straight to the
point during call
meetings.
Performance
:LOAD
TIME
ROOTFOOD's website
loading is
considered above
average but it takes
a longer time to
load into the
website at first
click. To test the
load time, I ran a
test via SolarWinds
Pingdom. Results of
the test is attached
below.
Figure 3.2.15
Results of
ROOTFOOD's load
times
According to the
results, the
performance grade is a
, some of the
improvements can be
made are listed below:
- add expires headers
- compress components with gzip
- make fewer HTTP requests
- avoid empty src or href
- put JavaScript at bottom
- reduce the number of DOM elements
- avoid AlphaImageLoader filter
:RESPONSIVENESS
&
COMPATIBILITY
Figure 3.2.16
Desktop/Laptop
View
Figure 3.2.17
Smartphone View
Figure 3.2.18
Tablet View
ROOTFOOD's website
is compatible in 3
different
resolutions as
seen in the
figures above.
This includes
MacBook
2880x1800px, iPad
Air 1366x1024px
and iPhone 15 Pro
Max 1290x2796px.
However the layout
may appear to be
different when
viewed on
smartphone to
accommodate the
smaller screen
size. The user
experience on
Desktop/Laptop and
Tablet view is
quite similar, but
it is better to
view the website
on Desktop/Laptop,
as the scroll
direction is to
the right. On
mobile devices, it
is required to
scroll in
one-direction,
from top to
bottom, it might
take awhile to
reach to certain
sections, hence
this might affect
user
engagement.
Strengths
&
Weaknesses
To conclude, there
are notable
strengths and
weaknesses to
ROOTFOOD.
Strengths:
- Navigation — Sticky side bar with image, helps users understands each category easier with jump links that are accessible anytime.
- Interactive elements — User-friendly interactive elements boosts the experience of using the website. This makes the website stand out from others.
Weaknesses:
- Content — Not enough information are provided, there should be link to more works, articles, and helpful information to help users understand the services provided and what outcome they might get.
- Testimonials — There are no credibility, which may affect the number of clients as most prefer actual reviews from other clients, and builds trust.
- Not optimised mobile features — most interactive elements are missing, too much white space, decreases user experience.
EXERCISE 2: WEB REPLICATION
Task
Requirements
- We were tasked to replicate TWO(2) existing main pages of the website links provided.
- Follow the dimensions of the existing website from the width and height.
- This exercise will help develop your design skills using softwares such as Photoshop and Illustrator, and gain insights into web design best practices.
- Any image from stock or free stock icon can be used.
- Images does not have to be exact image from the original website, can be replaced by similar images.
- Focus on the layout, type style, and colour style.
- To find similar typefaces/ fonts, download fonts from Google Fonts.
Websites
Chosen:
:WEBSITE
#1
Morgan Stanley
I started it off by
taking a screen grab
of the entire website,
and started
replicating it in
Adobe
Illustrator.
Figure 4.1.1
Screengrab of Morgan
Stanley
The structure of this
website is clear, and
concise. Sections are
divided using coloured
borders on the side,
while the background
is white, which
enhances the
readability of all the
photos and texts. I
began by replicating
from top to bottom,
including all the
lines and boxes, as
well as replacing all
the images with
suitable graphics
found online.
Attached figures below
consists of the
original screengrab of
the website (on the
left), and my
replicated version of
the website (on the
right).
Fonts
I screen grab the
texts in the website
and used a font
recogniser generator
to look for similar
fonts to replace them.
I decided on using
Myraid Pro for the
Morgan Stanley text,
while all body texts
are in the font Arial
and Calibri.
Header
Texts — I duplicated
all the texts
Images — For the
umbrella, I used one
that still has
umbrellas in it, but
in different angles.
Besides that, to make
it have a slight
vignette, I used a box
with black & white
gradient and lowered
the opacity of the box
to 20%.
Figure 4.1.2 Header
Body #1
Texts — I duplicated
the texts in similar
size, leading, font,
and position.
Images — For the
background, I
searched up
skyscraper
backgrounds on
Pinterest. The
person on the right
is a PNG that was
first imported in
Photoshop to remove
the
background.
Figure 4.1.3 Body 1
Body #2
Texts — All texts
are using the same
font style, sizes
are adjusted to
replicate the
original screen grab
of the
website.
Images — The same
photo from the
header is used to
replace the photo in
this part of the
body.
Body #3
Texts — Calibri font is
used to create all the
texts in this section.
Elements — I made good
use of the shape tools
to create the rounded
rectangles.
Figure 4.1.5 Body 3
Texts — The title on the top is
in the font Arial, while the
rest is all in the font Calibri.
I adjusted certain texts'
kerning so that it enhances it's
readability.
Images — All images are searched
through Pinterest and cropped to
the same size as the original
screen grab. I made sure all the
images are somewhat similar and
represents the same meaning as
the original images.
Figure 4.1.6 Body 4
Footer
Texts — The replicated texts are
in the font Arial.
Icons — The icons are images
searched from online, and then
turned into PNG using tools from
Photoshop. It was then recoloured
to the same shade of grey as the
original screen grab.
Figure 4.1.7 Footer
Final Replicated Website 1:
Morgan Stanley
Figure 4.1.8 Final Replicated
Website 1 (JPEG)
Figure 4.1.9 Final Replicated
Website 2 (PDF)
:WEBSITE #2
Ocean Health's Index
I started it off by taking a
screen grab of the entire website,
and started replicating it in
Adobe Illustrator.
Figure 4.2.1 Screengrab of Ocean
Health's Index
I began by replicating from top
to bottom, including all the
lines and boxes, as well as
replacing all the images with
suitable graphics found
online.
Attached figures below consists
of the original screengrab of
the website (on the left), and
my replicated version of the
website (on the right).
Fonts
After inspecting the font of the
website through Chrome, I decided
to use Arial, Calibri, and Acumin
Variable Concept, for all the
texts seen in the original
website.
Figure 4.2.2 Screengrab of Font
Inspection of Original Website
Header
Texts — Arial was used to type out
the logo of Ocean Health's Index.
The top words for navigation are
in the font Calibri. Other than
that, everything else is using the
font Acumin Variable Concept in
Black Font Style for the header,
and Medium Font Style for the
description underneath it.
Image — The background is replaced
by a similar photo that was found
on Pinterest.
Figure 4.2.3 Header
Body #1
Texts — All the texts from headers
to body texts in this section is
in the font Acumin Variable
Concept.
Graphics — Using the pen tool I
created paths and shapes to
replicate the original. Besides
that, the boxes are made using
shape tool.
Gradient — To replicate the
gradient, I used the colour picker
and gradient tool. Adjust it to
blend well.
Figure 4.2.4 Body 1
Texts — The texts is in the font
Arial
Images — I replaced the images with
similar stock photos, as well as
free vectors found online.
Figure 4.2.5 Body 2
Footer
Texts — The texts at the bottom is
in Calibri, the logo text is in
Arial.
Icons — The icons are free vectors
found online.
Figure 4.2.6 Footer
Final Replicated Website 2: Ocean Health's Index
Figure 4.2.7 Final Replicated
Website 2 (JPEG)
Figure 4.2.8 Final Replicated Website
2 (PDF)
EXERCISE 3: CSS LAYOUT
Task Requirements
- We were tasked to create a recipe card using the recipes provided in this cookbook link provided by Mr Shamsul
- Design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format
Task Criteria
- Create an HTML file named "index.html"
- Create a section that displays the following information
- Recipe title
- Include necessary images for the page
- List of ingredients
- Step-by-step cooking instructions
- Create an external CSS file named "style.css"
- Apply CSS rules to style your recipe card
- 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 style different parts of the card
- Use your creativity to make the page look appealing and interesting
I looked through the cookbook
link and there were many
recipes. The first section I was
interested in is the baking
recipes. As a person who bakes a
lot, I am more familiar to the
process, which helps smoothen
the journey of completing this
exercises. The recipe that I am
interested to feature is the
gingerbread cookies.
Figure 5.1.1 Gingerbread
Cookies Recipe
Recipe Card Draft
To make things easier, I
planned out and drafted my
recipe card. I included
sketches of my ideal recipe
card, as long as a document
with the list of ingredients
and step by step cooking
instructions.
Figure 5.1.2 Document
Dreamweaver Process
I started coding by importing
a new site into Adobe
Dreamweaver. The code that I
will be using is HTML and
external CSS to style the
webpage. This allows me to
view the HTML and CSS code
separately. The figure below
is the process.
Figure 5.1.3 Process
Figure 5.1.4 Screenshot Part
of the Process HTML
Figure 5.1.5 Screenshot
Part of the Process CSS
HTML & CSS Code
I have turned my code into a PDF for a clear view of the process.
Figure 5.1.6 HTML (PDF)
Figure 5.1.7 CSS (PDF)
Figure 5.1.8 Mobile View
Figure 5.1.9 Desktop View
REFLECTIONS
These exercises were enjoyable to complete, especially exercise 3, CSS recipe card project. As this was very new to me and I get to challenge myself to learn something new. Besides that, I was able to unleash my creativity by designing the page up to my liking. For this project, it took the longest out of all 3 exercises. But I enjoyed the time taken into learning new knowledge, and brush up old skills like Photoshop and Illustrator.
FURTHER READING
Week 2
top
project 1