Interactive Design | Exercises
22/04/2024 - 23/07/2024 / Week 1 - Week 14
Eng Yan Ling
Bachelor's Degree in Creative Media (Hons) - (Taylor's University)
Interactive Design | Exercises
TABLE CONTENT
<span id="LIST"></span>
1. Instructions
2. Lectures
3. Exercises
3.2 Exercise 2 : Web Replication
3.3 Recipe Card
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1UkhqnbQ7tgLrsvt2G92NyKarGMaPcPJm/preview"
width="640" height="480" allow="autoplay"></iframe>
LECTURES
Week 1 - 23/04/2024
Briefing on expected outcomes of this module and understanding the basics of
usability in a website and principles applied to design a layout that ensures
user experience. We are required to conduct a web analysis of 2 websites to
understand the basics of designing a website.
Usability
According to Dr Don Norman, process of knowing what to do or what you should be doing on any product is important - ensure any product produced should be easy to use = user friendly
What is Usability?
-
steps relates to design thinking process = 6 steps in order to create a successful product
-
understanding user needs and context must take several process into consideration; an ongoing process in a cycle until the final product is achieved to desired outcome
- emphatize = how they should use the product?
- gathering data through interview, surveys, group observation to observe how they use a website etc
- identify problems through gathering data
- ideation/solution
- prototype
- testing the product
- revise whole process if there are any problems
- emphatize = how they should use the product?
-
should be able to use an interface easily without the help of the designer
-
manual created to use a website
Principles of Usability
- Consistency
- through colors, layout, typeface, navigation system, shape of button, micro interactions (hovering over a button) throughout website
- key factor to visual elements and functionality
- works harmoniously across different elements
- even CTA button needs to be consistent
- buttons functionality should be same throughout the web
- ex. button 1 does A function & button 2 does B function; shows inconsistency
- websites with good consistency - apple,
- Simplicity
- apple vs shopee
- apple too simple whereas shopee looks more clutered but less white space
- avoid making mistakes; achieving goals faster while enjoying UX
- apple vs shopee
- Visibility
- more visible > more likely user will know more about them and what to do, likewise for the opposite
- user should be able to know when they first see them and direct around web easily
- games - more complex interface, if button not obvious enough = can opt to create more micro interactions with the buttons
- Feedback
- notification that you have completed a task, ex online purchase - a notification received of purchase made = feedback
- opening heavy webs - takes time to load what you normally see is the progress bar - feedback of how much the page has load similarly to downloading files
- Error Prevention
- involves alerting user of error made
- subscribing to an acc, indication of strong and weak password through red text - weak/green - strong providing a feeling that youre not making a mistake
- retyping passwords are also error prevnetions
Prevent pitfalls
- avoid complex interface
- using noisy bg, constantly adding elements to fill white space
- confusing navigaitons
- changes of terms, deep navigations, not enough feedback, handling error is not sufficient for users
Week 2 - 30/04/2024
In Week 2, we formed groups in class to apply our knowledge learned in Week
1 to create an app prototype. My group was assigned with Scenario 1 where
users can easily browse and purchase clothing items online, with clear product descriptions and images, and a simple checkout process taking into account of consistency, simplicity, visibility and error prevention.
To start on our prototype ideas, we conducted research to understand and get a general idea of how shopping apps are designed through Uniqlo, motherchuckers, Shopee, Lazada, and many more. Then, we compile our ideas to create a practical, efficient and simple prototype to meet the user needs. Figure 1.1 is my contribution of idea to our prototype.
.jpeg)
Figure 1.1 Prototype Sketch (Week 2, 30/04/2024)
Figure 1.2 Final Prototype (Week 2, 30/04/2024)
Week 3 - 06/05/2024
The Anatomy of a Web Page : 14 Basic Elements
- foundation of a user friendly & accessible website
- understanding purpose & design of a website = a clear website
Accessibility
- accessed by everyone = not only regular people but people who has visual impact (ex. colorblind people);
- opt to change the colors of the background/layout, screenreader for the blind - website should vield the standard language html
SE0 - Search Engine 0ptimization - web is seo friendly, ex. google - search using meta keywords
3 key elements
1. Header2. Body
-
contents, hero section - huge headlines, cta button, attractive images; straightforward>complicated
-
cards, ex. individual product aligned with others etc; display & view content/product + cta button & directs to other sub page
-
breadcrumbs - allow user to locate where they are
-
context, images, videos, quiz, forms, etc
Organizing Contents
- certain level of info hierarchy; font size, colors
- ways of scanning pattern
- most common - F shape, left-right top-bottom
- always left aligned
- sufficient to have 4 levels, avoid having too many hierarchies
- H - only headings
Static vs Dynamic
Static - update web through source/html web
Dynamic - uses a system, content regularly updated, login/search button requires database
14 Basic Elements in a Web
1. Header- upper/top part of web
- element of strategic importance - site menus, expected to provide navigation = primary navigation
- elements - brand identity/logo, cta button, links of basic categories & social networks, basic contact (email, tele,etc), multilingual UI switch, search field, links to interaction with product (trial, download), navigation, languages, login
- important keys
- scanning pattern (top to bottom, reading - left to right)
- external consistency (power & habit - navigations in headers)
- design practices
- hamburger menu - hamburger button; hides set of links of different pages
- sticker header - doesnt hide & sticks to top when scrolling down; core navigation available at any point
- two-layer navigation - separates 2 different routes of navigation in headers
- encourage users to take a certain action; ex buy, contact, subscribe, etc
- passive = active user
- differs due to its engaging nature - catches attention/easily noticed & seen & responds immediately, stimulate to do required action
- above-the-fold, strong visual hook (image, slider, typography, video, etc) = attracts attention and conveys needed message - engage to scroll/click buttons to learn more, contact & info, social/product links, testimonials/badges, certification signs, subscription field/button
- bottom/lower of web = marks an end; complex - secondary navigation
- copyright info, brand identity/logo, FAQ, t&c, privacy policy, customer support, web creators credits
- common place to look for contact info, credits, sitemap; supports general usability & navigability = harmonic combo with other design solutions of web & general stylistic concept
- interactive slideshow/carousel = present product/service; popular in e-commerce
- +ve
- save space, user engagement, attractive visual hook
- -ve
- slider functionality = page speed < → influence seo
- several options displyed at once = hurt usability, distraction = hard to focus
- mobile adaption
- perceived as ads = skipped
- browse content according to search query = shows relevant content - shortcut to user needs
- saves time & effort, amplify usability & desirability = retain users, increase conversion rate
- box/bar
- priorities = navigation > search
- language barrier/difficulties, inconvenient to type
- core navigation presenting options of interaction
- ex. save, delete, buy, send / categories
- location - side, header, footer menus
- appearance/interaction - drop-down/up sliding menus
- organization - horizontal/vertical
- class horizontal - common & well-recognized; horizontal line in header, mentioned above
- sidebar menu - vertical list sticking to left/right
- dropdown - complex → content heavy web; additional drops from primary (drop up=same concept)
- megamenu - complex expendable; multiple choices in 2D dropdown
- hamburger - hamburger button; menu expands = save space (mobile web>)
- presents secondary navigation, increases web usability
- helpful for webs with multiple pages, complex hierarchy with multiple layers
- +ve
- increase finability - touchpoint to content & capture structure of web
-
clicks needed - jump according to hierarchy/previous step
- effective use of screen space - narrow horizontal line = less space
- no misinterpretation
- low bounce rate - <confidence in browsing, >chance of bouncing pages
- interactive - sending user info to system/server
- more options & functionality = smooth, clear, user-friendly
- intuitive navigation, minimum actions required, data input thought-out
- cards/tiles; arrange & visualize homogeneous data/content in scannable & wasy-to-use method
- organized in grid, combines different content about particular item
- attractive & informing quickly = tells a story presenting it strong, emotional, memorable
- +ve
- understanding product quick, set atmosphere, convey needed message, engage in trial services, demostration, share user feedback
- consider loading time, contrast issue, responsiveness, etc
- understanding current point of general volume of info/actions
- doesnt get lost, estimate time needed for reading/browsing
- supports in long & complex forms/processes; what has covered = confidence
- URL icon/bookmark
- quick visual connection, effective promotion, good recognizability of visual identity
- secondary navigation; found in blogs, web with homogeneous contents
- presented with keyword/phrase - jumps directly to items
- pieces of metadata providing quick access to specific content categories = content classification
Week 4 - 14/05/2024
Creating a HTML Web
Web Standards
- allow people to access in a variety of platforms = no standard size of screens
- mobile>desktop
Early 2000s - designing for both mac and windows
Hardware - comp & software - browser etc issues
Screen resolutions
- dense/clear; high resolution = dense/clear - more pixels within the screen
Content
- most important
- accessible = a standard markup languages - html, css
- before modern days - internet only for military and academic purposes until commercialize
Why Web Standard?
- without same language = issue accessing web - layout, etc
URL - domain name; uniform resource locator
web with more image, etc - takes more time to load
structure
web/pdf can be viewed from a translated language
- hovering etc
all web has a similar layout
html tags used to format web
- <element>Information</element>
- elements = tags
- made up of 2 tags - opening & closing
open - <p>
close - </p>
additional info needed for your “html tag” - attribute
ex explain language = +lang; separate attribute and tag with a space, multiple attribute can be included
HTML doc
- head
- body
- title
- main section sitting in the head
- 6 levels of heading
1. Break
<br> = break line
bold & italic
- an element between an element
- <b> / <strong> / <m> & <i>
2. List
ordered list
- steps
- appear in numbers
- <ol> and <li>
<0l>
<li>list</li>
<li>list</li>
</ol>
unordered list
- appear in bullets
- <ul> and <li>
<ul>
<li>list</li>
<li>list</li>
</ul>
3. Reference - A
<a href=“http://www.imdb.com”>IMDB</a>
https —— → external link
<a>
<a href = “”>Blog</a>
- blog - work highlighted to link to web
linking external link
only named in lowercase
creating html file on notepad
- images must be in the body section
2 Parts
name & value
- what separate it is the equal sign
- value must be types in “”
- open in different tab
- space target=”_blank”
- space title=”My Blog”
- act as tool tip when hovering over it a bubble pops out
Week 5 - 21/05/2024
Html
- space - used to separate multiple attributes
- 2 parts of an attribute - property & value
1. ID attribute
- when to include id attribute? - html tag needs special treatment
- special characteristic; changing the style of particular hmtl tag
- used to link to particular section within a page; jumplink in navigation
- ex. multiple headings - 1 to be different from others = use <ID=maintitle>
- numbers cannot be used- only alphabets
- space cannot be use - _ is used instead
- no elements in an ID cose can have the same name
- customization
2. Class attribute
used in css, html not recommended
- similar but allow to have the same name to several html elements at once
- ex. html elements that can use the same attribute - some images aligned to left & right
- give a class name for each element - class align left/right
- group html tag in the same class name
3. Html
- different way to display element - 2
- block element
- each new block created in a new line
- displayed from top to bottom
- ex. <h1> <p> <ul> <li>
- each has its width and height - default is set by browser
- inline element
- some that does not appear in new line; sits/live in a block element
- <b> <i> <em> <a> <img>
- can be changed to block
- to have 2 columns of text - use a class attribute
- with width and height set
- block element
Figure 1.3 Start of HTML (Week 5, 21/05/2024)
4. Codes
- start with doctype before html
- <!DOCTYPE html><html>
5. Dreamweaver
- orange/brown = correct
- green = error
- blue = value
define a site → create a folder for each project
- images and html code must be in the same file for image to be visible in the web
- must be in the same level (index, img folder, etc)
manage site
- new site → select destination without going in the folder → rename → save
6. Table
- tbody - table body
- tr - table row
- th - table heading; auto aligned to centre
border collapse
- shared/separate borders?
border-collapse: collapse;
border-collapse: separate;
- ex. <table width="600" border="1px" style="border-collapse: collapse" cellpadding="2" cellspacing="2">
rowspan attribute - vertical row
- applied within <td> <th>
- <th rowspan=”value”>Title</th>
colspan attribute - horizontal row
- applied within <th>
- <th colspan=”value”>Title</th>
7. Form
<form>
<input>
- <input type=”value1” value=”value2”>
- value 1 - type of function, checkbox, submit, etc
- value 2 - displayed text of function, submit, ok, etc
- values :
- text - single line text
- radio - radio button - slecting one of many choices
- checkbox - >0 selection
- submit - submit form
- <input type=”submit” value=”Submit”>
- button - clickable button
Week 6 - 28/05/2024
Introduction Cascading Style Sheet (CSS)
notes
- id name - send action to a phv page
- type can be change to desired text fill
- placeholder = create something within and box
- id name - send action to a phv page
- type can be change to desired text fill
- placeholder = create something within and box
CSS - cascading style sheet
- add different rule to html element
- setting page bg; bg properties
- css rule - 2 parts
- property and value
- 2 main part - selector → targets html element, declaration (property and value)
- label, input etc different style
- 3x. selector - p, targets all p to have the same typeface
- separate style and selector using curly braces/brackets { }
- : value
- ; another style character
- grouping selectors - selecting {h1, h2, h3}
- ex. {property:value;property:value;}
- specify css within opening tag - only affects the element tags and does not apply to similar elements
- <link>/external css style
- creating another css file and links back to original file
- placed in head section
- include style tag that happens in head section
- multiple css file can link to one
2 types of font - system font (come may not have the font), link fonts
<table width="600" border="1px"
style="border-collapse: collapse"
cellpadding="2" cellspacing="2">
element {font-family: whatever appears are the system fonts}
element {font-family: whatever appears are the system fonts}
div - block level element - general
- used to create layout
- set a dimension of the form
- #id attribute
Week 7 - 04/06/2023
CSS selector
“symbol” {
style
}
(code/name)
1. */universal selector
- usually used when you want to remove the whole padding and margin; padding and margin added individually in each elements
2. p/element selector
-
p {text-align:left;}
3. #/ID selector
-
target element with specific id attribute
- #element {
display:inline;
}
4. .class/class selector
- applying style to several elements at once
5. .container/descendent selector
- targeting & styling specific element in a div class container
- any element that lives with a parent uses descender selector; selecting parent and what’s inside
- ex. a
6. syntax [attribute=value]/attribute selector
-
selecting an attribute
-
ex. input [type=”text”], img src, altinput [type=”text”] {
border:1px solid blue;
}
7. ul>li/child selector
- mostly used in ul>li; targeting li
- applying style to a child element
- inherit - inherit whatever the parent element has
8. a:hover/psedo-class selector
- 5 different state
- nth child(n) - n - number, can add odd or even number
- can apply, :hover in any element but not not :active, :visited, :link, :focus
- only active, visited, link, focus is applied to an “a” element
- hover → focus - order to type in css
- ex. li:nth-child{
9. p::first-line/pseudo-element selector
- first letter in caps, increase size, first line bold, etc
- can be added before or after element
10. h1 + p/adjacent sibling selector
- anything that comes adjacent to the element
- styling an element that directly follows after another specific element
11. h1 ~ p/general sibling selector
- select all sibling elements in a specific elemtent
12. ul li:nth-child(odd) - nth child element
p:nth-of-type(2) - nth child of specific type among siblings
Why so many?
- better control, convenient and effective
- specificity
- structure with nested elements
- an element that nest within another element
- ex. li, etc
- attribute based selection
- pseudo-classes and pseudo-elements
- styling links (hover/ :hover, first letter/ ::first letter)
- responsive design
- in wide align, if narrow it may break the line - locked to remain its position
- stateful interactions
- cross-browser compatibility
- easy maintenance - change colors/style easily
- accessibility
----
adding a link to text, select text, link tab at the bottom to insert
any image - img[alt=”my picture”]
- applying style to all images listed as “my picture”
- <p><img src=”images/xx.jpg” width/height=”value”/>
img[alt=”img left”] {
border: 2px solid gray;
float:left;
margin-right:1:1;
}
border: 2px solid gray;
float:left;
margin-right:1:1;
}
a:hover
first letter
first child / last child of an element
first letter
first child / last child of an element
-----
Display
a) inline → block
- needs a lock property to lock the dimension
b) flex
- applied to paragraph
- width, displayflex - appears in one line
c) grids
- control alignment etc
d) box
- similar to display
- dimension can be added - height width
margin - outside of box; invincible space outside the element
box
padding - space within the box; increase size of box - grows the box
content
box
padding - space within the box; increase size of box - grows the box
content
EXERCISES
EXERCISE 1 - WEB ANALYSIS
Web 1 - DogStudio
Link : https://dogstudio.co/
.jpeg)
Figure 2.1 PC & Mobile View
Once I have entered the website, Figure 2.1 shows the overall layout of
what users will see.
Figure 2.2 Micro-Interactions
The overall color and tone is cool and dark in align with their concept and name.
The website also consists of interactive & 3D background which enhances overall User Experience. F
eatured artworks has customized wolve skin according to the theme of the project. Throughout the website, there is also a sync audio of the forest which allows users to feel immersed and a part of the website.PC View :
Figure 2.3 Compilation of Home Page themes - PC
Mobile View :
Figure 2.4 Home Page Project themes - Mobile
PC View :
Figure 2.5 Loading screen animation - PC
Mobile View :
.jpeg)
.jpeg)
Figure 2.6 Loading screen animation - Mobile
Figure 2.7 Body Text - PC
An issue I noticed throughout the website is the overlapping logo position and
text in PC view as I scroll down resulting in difficulty of reading certain
paragraphs of text. (Figure 2.8) Moreover, in DogStudio Past Cases tab, it was
confusing in terms of what the past project is related to, such as the
categories of web or 3D at first glance. Image are placed largely where focus
directs to it rather than the text/title because of the color and size of the
text that reduces its visibility. Therefore, the description of the past
project category is only visible if you examine the website closely. (Figure 2.9) However, the overall website has consistency in
its layout, typeface used and pt size used for different hierarchy of text.
Simplicity can also be seen throughout the layouts of text and element
allowing a clear and direct navigation throughout the website.
Figure 2.8 Overlapping text and images - PC
Figure 2.9 Past Cases Tab - PC
A section I find interesting among this layout is the different captions that gives people "reasons" to join the DogStudio team which has got me intrigued to want to know more of what other creative reasons they could include among the rotations of captions. The "reasons" consists of a progress bar which indicates how many reasons the user has gone through. The overall user experience throughout this website was entertaining and interactive which makes me want to explore and understand more through their website. (Figure 2.11)
Figure 2.10 Career Tab Micro-Interactions - PC
Figure 2.11 "Reasons" to join DogStudio Tab - PC
Feedback among the website that indicates error to process action due
to internet connection error feedback.
Figure 2.12 Feedback within website
As a user of the website, it achieves the goal of allowing users to learn the
background of DogStudio and its past projects in general through the
consistency and simplicity of the website. It also provide users a unique
experience at the same time through the immersive and interactive backgrounds,
audio and animations.
Web 2 - EPIC
Link : https://www.epic.net/
At first glance, the overall layout appears minimal, clean, and direct from
its soft pastel color theme and minimalist layout resulting in the application
of simplicity. The heading of the featured project is what stands out
most among the other elements due to the weight of the typeface.
Figure 2.13 PC & Mobile View
Figure 2.14 Compilation of consistency of typeface - Mobile
The top left of the heading contains a "random" that spins continuously allows
users to "customize" and explore other existing works by EPIC similarly to
DogStudio that has customized templates/theme for their featured projects.
There are a total of 6 different home page layouts to change between based on
each project theme. (Figure 2.15) In both PC and mobile view, they both have the same
transitions as users scroll down where the Introductory paragraphs "flies"
away for their slogan "Imagine, Build, Tell" comes together to the following
panel that allows users to customize their very own castle. This section
improves users experience whilst exploring the websites where it adds a bit
"fun" than just all text.
Figure 2.15 Compilation of Home Page Layouts
Figure 2.16 Compilation of text transitions in Home Page - PC & Mobile
.jpeg)
Figure 2.17 Final Customized Castles - PC & Mobile
The empty space around the layout creates simplicity where the
info/text are placed can be read easily. Text enter into view from left to
right gradually as users scroll down. Maintaining its consistency also
portrays a clear visual hierarchy using the typefaces and fonts used
throughout website. Based on my analysis, the website has about 2-4 main
columns with centered alignments where headings are mainly on the left and
descriptive text on the right. Throughout this website, it consist of a custom loading animation of their castle that represents their slogan "Imagine, Build, tell". (Figure 2.18) Menu tab transitions from top to bottom
displayed on a full scale, likewise when closing menu tab or transitions to
other tabs around the website. Similarly to Website 1, there are many
micro-interactions through this website. (Figure 2.20)
Figure 2.18 Loading Screen
Figure 2.19 Social Media & Newsletter Layout - PC & Mobile
Figure 2.20 Micro-Interactions
To open the newsletter subscription tab or social media directories, the
button turns from transparent to a filled navy blue indicating the tab users
will go to. Other than that, hovering over buttons highlights in opposing
color to indicate the selected section throughout different respective
layouts.
Figure 2.21 Newsletter Pop up Tab - PC & Mobile
Compared to Website 1, this website has its newsletter subscription pop up as
another tab overlapping the current page/tabs users are on.
Feedback are given to users who subscribe to their newsletter to
indicate the completion of subscription. Overall experience of this website is
convenient because of its simplicity and consistency in layout to direct
around the website with features such as "back to top", "next project" and
more.
Figure 2.22 Overlapping Elements
Comparison between Web 1 : Dog Studio vs. EPIC
Similarities
A similarity that can be seen between these 2 websites are the customized
loading animations
(Figure 2.5, Figure 2.6 & Figure 2.18) Apart from that, a similar layout and
placement of the elements on the top panel logo and menu panel icon (Figure 2.23) which maintains a simple and clean layout to navigate.
Figure 2.23 Website Top Panels
Apart from that, both these websites has various micro-interactions across
the websites improving user's usability and increase user engagement with
the website. (Figure 2.2 & Figure 2.20) Interactive elements
throughout the website also enhance user experience which both websites has.
It can be seen in the interactive 3D view and changeable wolve skins in
DogStudio website whereas users can customize their very own castles in EPIC
website. (Figure 2.3, Figure 2.17)
Differences
A major difference between both websites is the layout where EPIC is more
towards simplicity & minimal using single colored backgrounds and a
layout with more white space within while Dog Studio aims for its
interactive using its 3D textured background which appears to fill in the
white space allowing the overall layout to look complex in comparison to
EPIC. To add on, the comparison between the end of both websites shows a
difference where DogStudio contains more text than EPIC whereas EPIC
consists of more icons. The text layout in DogStudio is more compact than
in EPIC that is has a loose and spread out layout.
DogStudio
Figure 2.24 End of website layout - PC & Mobile
Different colors across different tabs.
EPIC
Figure 2.25 End of website layout - PC & Mobile
EXERCISE 2 - WEB REPLICATION
Before replicating each website, I look for similar fonts in the fonts by comparing the same text typed out in Google Fonts and the website. As a result, the first website contains a lot of info which has multiple fonts within. The fonts stated below are the ones that are most similar to the website.
Figure 2.26 Guidelines - Web 1 (Week 3, 07/05/2024)
Figure 2.27 Guidelines - Web 2 (Week 3, 07/05/2024)
Web 1 - Morgan Stanley
Fonts - Web 1:
Source - Google Fonts
1. Sarabun Regular - Brand Name (H1)
2. Cairo Bold & Regular - Sub-Heading (H2&H3)
3. Noto Sans KR
4. Work Sans Regular - Body text ; Medium - CTA Button
5. Asap Extra Light - Newsletter Text
Figure 2.28 Text Formatting (Week 3, 07/05/2024)
I format all of the text by placing each text box over the screen capture to adjust the letter spacing and paragraph spacing. With all the basic contents on my artboard, lines and boxes are added into the replicated website using the shape tool and pen tool. Thickness of the border of the box is adjusted by comparing side by side until it achieves the same thickness. Gradients with a certain amount of transparency is added to the top panel image which can be seen in the original website, a slightly darker shadow behind the article topic text.
Figure 2.29 Comparison of Footer Navigation Icon (Week 3, 07/05/2024)
Right - Original; Left - Replicated
Web 2 - Ocean Health Index (OHI)
Fonts - Web 2:
Source - Google Fonts
1. Inter Black - Brand Name (H1)
2. Almarai Bold - Sub-Heading (H2)
3. Roboto Regular - Body Text
4. Chivo Semi Bold - Top Panel
To start off the replication of Web 2, it consists of a more textured background where the top panel has a underwater coral background and the remaining section of the website has a star gradient background.
Figure 2.29 Gradient Bg (Week 3, 07/05/2024)
Once the base image is positioned, the top panel has a slightly transparent layer which tones down the intensity of the coral image as seen in the website whereas the remaining section has a slight transparent gradient marine blue to create the gradient effect as seen in the website. Similarly to Web 1, the text for Web 2 is formatted by putting the text box over the reference to adjust its letterspacing and paragraph spacing. Once all the text are formatted and positioned, the images are resized and crop to the size of the website reference and positioned along the horizontal guidelines. Each cards in the 2nd website consists of a slightly transparent marine blue text box which is also included in the replication of this website. With all the basic contents positioned, the lines and boxes are added using the shape tool and pen tool. The thickness of the borders is adjusted by comparing side by side of my reference until it achieves the same thickness. It is then followed by inserting the copyright and social media logos (Facebook & Twitter).
Figure 2.30 OHI Logo (Week 3, 07/05/2024)
Figure 2.31 OHI Logo in White (Week 3, 07/05/2024)
The logo for OCI is edited in Photoshop by masking the logo and using colored layers (marine blue & white) to create different tones to match the colors in the reference. To finish off the replication, the entire layout is aligned vertically with the reference to check the vertical alignments.
---
Image Sources :
1. Pexels
Figure 2.32 Compiled Images from Pexels (Week 3, 07/05/2024)
2. Google
Figure 2.33 Compiled Images from Google (Week 3, 07/05/2024)
3. Morgan Stanley
Figure 2.34 Compiled Images from Morgan Stanley (Week 3, 07/05/2024)
4. Ocean Health Index
Figure 2.35 Compiled Images from Ocean Health Index (Week 3, 07/05/2024)
5. Stock Icon
Figure 2.32 Compiled Icons from Stock Icon (Week 3, 07/05/2024)
FINAL WEB REPLICATION
Figure 2.30 Final Replication - Web 1 (07/05/2024)
Figure 2.32 Final Replication - Web 2 (07/05/2024)
EXERCISE 3 - RECIPE CARD
Week 7 - 04/06/2024
1. Planning Layout Page
Figure 3.1 Content Breakdown (Week 7, 04/06/2024)
Information extracted:
- Name
- Recipe description
- Number of serving
- Ingredients & measurements
- Step-by step process.
Figure 3.2 Recipe Card Layout Draft (Week 7, 04/06/2024)
2. Progress
Recipe & Images Chosen: Cottage Cheese Muffin
Font (Google Fonts):
h1, h2, h3, h4 (Headings) - Signika Negative
p (Text) - Crimson Text
Recipe Card Content Division :
All sections are divided by <hr>.
1. Description
2. Ingredients
3. Step-by-step Process
4. Form
Figure 3.3 Top Section (Week 7, 04/06/2024)
Title - h1
Description - h3
Text - p
Images - Float left and right with margins on top, left, and right adjusted to fit the page.
<hr> added to divide the sections within the recipe card.
Figure 3.4 Ingredient Table (Week 7, 04/06/2024)
Ingredients are divided into 3 categories mainly dairy, dry, and wet ingredients. A 2 column divided into its ingredients and measurement. Individual colors are applied to the heading, category and content of the table. In the css style, the style of the table content is added and center-aligned.
Recipe Procedure:
Recipe procedure consists of 3 parts of the step-by-step process to make this recipe. Each parts that connects to each other are color-coded in the same color. Images added within these cards applies "float left" and "float right".
Figure 3.5 Part 1 - Orange (Week 7, 04/06/2024)
Preparation steps before making the muffin mixture and important equipment needed for this step color coded in an orange card. Each card has shadow and padding to achieve a clean and visible layout of the recipe card with both ordered and unordered list used.
Figure 3.6 Part 2 - Pastel Green (Week 7, 04/06/2024)
Detailed breakdown of the muffin mixture step and repeated list of ingredients that are listed according to each step for users convenience. Cards in pastel green with ordered and unordered list used for Part 2.
Figure 3.7 Actual view of Image in Html Web (Week 7, 04/06/2024)
Figure 3.8 Part 3 - Yellow (Week 7, 04/06/2024)
Final step (Part 3) of this recipe is the baking process and final product. Since this part does not consist of any equipment nor ingredients needed, I added a side note for users to determine the doneness of the muffin as an additional tip. Cards in pastel orange and ordered list used for Part 3.
Figure 3.9 Form (Week 7, 04/06/2024)
I have also added an additional form (center-aligned) for users to submit their recipe request plus the description of the requested recipe. An additional comment section is also added to the form.
Final Recipe Card :
Background Color - Pastel Green.
Fullscreen Capture (Week 7, 04/06/2024)
Netlify Link : https://cottagecheesemuffinrc.netlify.app/
Comments
Post a Comment