3rd October 2024 (Week 2) - 20th May 2024 (Week 5)
Insha Thahirah Rajab - 0360671
Interactive Design - Section 01
Bachelor's Degree in Creative Media (Honors) - Taylors University
Exercises
CONTENTS
Lectures
Instructions
Exercise 1
Exercise 2
Exercise 3
Reflection
LECTURES
Week 2: Usability: Designing Products for User Satisfaction
Usability: how effectively, efficiently, and successfully a
particular user can utilise a product or design in a certain situation. It
is a part of User Experience (UX) Design. It is the second level of UX
Design
Key Principle of Usability
- Consistency
- Simplicity
- Visibility
- Feedback
- Error Prevention
Common Usability Pitfalls and How to Avoid Them
- Complex interfaces
- Confusing navigation
- Poor feedback
- Inadequate error handling
Week 3: Understanding Website Structure
Website structure is the foundation of a user-friendly and accessible
website.
It affects user experience, SEO, and overall website performance.
A well-structured website helps users find information easily and keeps them
engaged.
Websites are typically divided into three key elements:
- Header
- Body
- Footer
Organizing Content
Content organization is key to a well-structured website.
Use headings (H1, H2, H3, etc.) to create a hierarchical structure.
Logical grouping of content and clear labeling of sections improve user
experience.
Navigation menus
Navigation menus help users move around the website.
Use clear and concise labels for menu items.
Consider using dropdown menus for complex sites.
Week 4: The Web
Structure of a web page
The HTML code is made up of characters that live inside angled brackets
<>
These are called HTML elements
Elements are usually made up of two tags: an opening tag and a closing tag
<element>Information</element>
Each element tells the browser something about the information that sits
between its opening and closing tags
Week 5: HTML & CSS
ID attribute
• Every HTML element can carry the ID attribute
• It is used to uniquely identify the element from other elements on the
page
• It is important that no two elements have the same value for their ID
attributes (otherwise the
value is no longer unique)
Class attribute
• Every HTML element can also carry a class attribute.
• Sometimes you will want a way to identify several elements as being
different from the other elements on the page
ID and Class attribute
• By default, using these attributes does not affect the presentation
of an element.
• It will only change their appearance if there is a CSS rule that
indicates it should be displayed
differently
Block elements
• Some elements will always appear to start on a new line in the
browser window
• It is know as block level elements
• Example: <h1>, <p>, <ul> and <li>
Inline elements
• Some elements will always appear to continue on the same line as
their neighbouring elements
• It is know as inline elements
• Example: <b>, <i>, <em>, <a> and <img>
Introducing CSS
• CSS allows you to create rules that specify how the content of an
element should appear
• Example, you can set the background of the page is cream, all
paragraphs should appear in gray using the Arial typeface, or that
all level header should be in a blue, italic, Helvetica typeface
CSS Style Rules with HTML
Elements
CSS works by associating rules with HTML elements. These rules
govern how the content of specified elements should be displayed.
A CSS rule contains two parts: a selector and a declaration
CSS Properties Affect how Elements are Displayed
CSS declaration sit inside curly brackets and each is made up of two
parts; a property and a value, separated by a colon.
You can specify several properties in one declarations each
separated by a semi-colon
Week 7: CSS Selector
CSS Selectors
Universal Selector: Selects all elements on the page. It's
represented by an asterisk (*). Use it with caution, as it can affect all
elements and lead to inefficient CSS.
* {
padding:0;
margin:0;
}
Element Selector: The simplest type of selector, it
targets HTML elements by their tag name.
p {
text-align:left;
}
ID Selector: Targets an element with a specific id attribute. IDs
must be unique within an HTML document. To select an element with a
specific ID, use a # symbol followed by the ID name.
#my-element {
display:inline;
}
Class Selector: Targets elements with a specific class
attribute. Multiple elements can share the same class. To select
elements with a specific class, use a . symbol followed by the class
name.
.my-class {
margin:auto;
}
Descendant Selector: Selects an element that is a descendant
of another element. You can specify a hierarchy of elements to
target. For example, to style all <a> elements inside a
<div> with class "container,"
.container a {
color:red;
text-decoration:none;
}
Attribute Selector: Selects elements with a specific
attribute value. It is used to styling elements based on their
attributes, such as form inputs.
Syntax: [attribute=value]
Example:
input[type="text"]
{
border: 1px solid blue;
}
Child Selector: Selects elements that are direct children
of another element. To select only the immediate <li>
children of an <ul>, you can use:
ul > li {
list-style:none;
}
Pseudo-class Selector: Selects elements based on their
state or position in relation to other elements. Common
pseudo-classes include :hover, :active, :visited, :link,
:focus, and :nth-child(n)
a:hover {
color: red;
}
Pseudo-element Selector: Selects parts of an element
rather than the element itself. Common pseudo-elements
include ::before and ::after, which are used to add content
before or after an element.
p::first-line {
font-weight: bold;
}
Adjacent Sibling Selector:
Syntax: element + adjacent.
Selects an element that is immediately preceded by a
specified element. Styling an element that directly
follows
another specific element.
Example:
h1 + p {
margin-top: 0;
}
General Sibling Selector:
Syntax: element ~ siblings. Selects all elements that
are
siblings of a specified element. Styling all sibling
elements that follow a specified element.
Example:
h1 ~ p {
color: blue;
}
Display Property: Display is CSS's most important property
for controlling layout. Every element has a default display value
depending on what type of element it is. The default for most elements
is usually block or inline.
Block-level element: <div> is the standard
block-level element. A block-level element starts on a new line and
stretches out to the left and right as far as it can.
Inline Element: <span> is the standard inline
element. An inline element can wrap some text inside a paragraph
<span> like this </span> without disrupting the flow of
that paragraph.
Box Model: Each box has three layers that surround its
content. The layers are, in order from inside to
outside, including Padding, Border, Margin.
Box Model in CSS
For example (CSS code):
1.
div {
background-color: red;
padding: 0;
border: 1px solid black;
margin: 0;
}
2.
p {
background-color: white;
padding: 1em;
border-width: 10px;
border-style: solid;
border-color: blue;
margin: 10px !important;
}
Week 9: The Box Model
INSTRUCTIONS
TASK
Exercise 1: Web Analysis
Choose TWO (2) websites from the link given. Review the website that
you've selected carefully, taking note of its
design, layout, content, and functionality. Identify the
strengths and weaknesses of the website, and consider how they
impact the user experience.
Write a brief report summarizing your findings and recommendations.
What To Have in The Analysis:
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)
: Research
I went through the 3 website links provided to us by our tutor. Each
link consists a collection of nominee/award-winning websites and links
to their respective sites:
I skimmed through each and found my favourite sites from the first
link:
https://www.csswinner.com/winners. I decided to choose this for my review review. Each website consists
of stark contrasts in order to dive into the individual styles and
features.
: Review
|
Figure 1.0 Federico Pian Homepage
on Light Mode
|
|
Figure 1.1 Federico Pian Homepage
on Dark Mode
|
Federico's website effectively showcases his work, achieving its
goal as a portfolio. The site is simple, with a homepage, a projects
section, and an "About" page (serving as a CV), keeping the content
relevant and easy to navigate. The focus remains on his work, with
project details easily accessible, and clients can contact him through
the "About" page, which includes links to his socials.
The site stands out for its typography and layout, enhanced by subtle
sound effects. A "clicking" sound accompanies each action, a "sifting"
sound plays when switching color modes, and the homepage button
triggers a distinct "beeping," offering clear audio cues. Smooth
scrolling further adds to the polished experience.
However, the homepage's scrolling can be distracting. A
thumbnail-sized shift of pages appears when lightly scrolling, which,
though aesthetically pleasing, can be unnecessary and unintelligible.
.PNG)
|
Figure 1.3 Homepage on Mobile Device
in Dark Mode
|
.PNG)
|
Figure 1.3 Homepage on Mobile Device
in Light Mode
|
On mobile, scrolling effects are minimal and slightly confusing. The
homepage offers arrows to navigate left to right, but users must
scroll downwards, contradicting the arrows and potentially misleading
users. This inconsistency doesn’t occur on the project pages. Despite
the absence of sound effects on mobile, the site retains attractive
gradients and minimal lag. The "About" page lacks Federico's photo,
which could be a drawback for clients.
Overall, this stunning website deserves more recognition. The
scrolling effects keep it interactive, and the portfolio is easy to
navigate. The loading effects beautifully transition from loading
number to project number, while the eye-catching color scheme and
elegant typography enhance the experience. The heavy use of "scroll"
interactions, along with gradient backgrounds that respond to the
cursor and move on mobile, further boost the site's visual appeal.
|
|
Figure 1.4 Don't Board Me Startup Page
|
|
|
Figure 1.5 Don't Board Me Homepage
|
Don't Board Me" is a fun, playful dog-sitting website whose design
mirrors its focus: dogs. What sets it apart is its bold
typography, beautiful color palette, and unique illustrations that
visually portray its services and branding. The site offers
seamless page transitions with smooth animations, including an
interactive start-up page that engages users by prompting them to
bounce a ball while the page loads.
The personalized illustrations and interactive scrolling not only
enhance branding but also guide users through the step-by-step
booking process and service options. Despite hosting a range of
information, the site maintains a clear focus on booking
dog-sitting services, frequently redirecting users to the booking
form. This consistency makes the site user-friendly and easy to
navigate.
While the site is aesthetically pleasing and easy to use, some
aspects feel redundant. Many key details—such as pricing and
services—are already available on the homepage, making certain
additional pages seem unnecessary. The contact page, for instance,
only contains two social media links and a contact form, which
could easily be confused with the booking form. Simplifying these
sections could improve clarity and usability.
.PNG)
|
Figure 1.6 Loading Page on Mobile Device
|
.PNG)
|
Figure 1.7 Homepage on Mobile Device
|
The interface feels fully customized to be compatible on mobile devices, with a different start-up page, slightly alternative animations, transitions, and no scrolling interactions. The interface is heavily simplified to organize compact content, using side menus and buttons, and overall feels equally as smooth as on desktop devices.
In conclusion, "Don't Board Me" excels with its charming, custom
illustrations and thoughtful design, ensuring a visually cohesive
and engaging user experience. Each element, from the color scheme
to the personalized illustrations, clearly reflects the brand's
message, creating a welcoming atmosphere. The smooth transitions
between pages, much like a presentation, add to the site’s
polished feel. While there are areas where content could be
streamlined, the playful design, easy navigation, and the added
touch of the blog in building a strong community make this site
stand out in the dog-sitting service landscape.
Exercise 2: Web Replication
Replicate TWO (2) existing main pages of the websites given in
the link below to gain a better understanding of their
structure. Choose any two from the link given. Follow the
dimensions of the existing website from the width and
height.
I decided to chose the first 2 links to replicate. We began this
tutorial in class, with sir demonstrating how to get started by
using Ocean Health Index as our first example. To get a full
screenshot, we had to right-click and hit inspect:
After clicking "Inspect", a sidebar filled with code pops up. We had
to hit the 3 dot hamburger menu, run the command, and type "Capture
full-size screenshot" as the following instructions show, to get
full-screen captures of the selected websites before recreating
them.
These are the two websites I chose and their
full-size screen capture:
.png)
I opened Adobe Illustrator and added these as a template. From there, I
used a variety of tools, and external images, and recreated the logo
design to fully replicate the screenshot with a similar aesthetic, yet
slightly different, as the exact fonts, pictures, and colours cannot be
fully duplicated as that would be nearly impossible.
I used some system fonts but got the pictures from
https://www.pexels.com/. I
chose images that felt closest to the original.
This is what my final site replication looked like. I felt that it
truly captured the aesthetics and style of the original, with only
minor elements feeling different.
Task 1 - Exercise 3: CV Page
Design and build a personal CV page using basic HTML and CSS. This
exercise will help you organize information into sections, practice
styling text, and create a clean, professional-looking page layout.
In Class Exercises: HTML
: week 3
In week 3, we learnt how to create a simple webpage. Using the
information on the slides and followin Mr. Samshul's instructions,
using notepad, we typed in the html code accordingly:
This is what the final webpage looks like:
: week 4
In week 4, we created a webpage using Adobe Dreamweaver. We learnt how
to combine html with css and create a functional website with design
elements, colours, paddings, and fonts from google fonts embedded onto
our site. This was Adobe Dreamweaver interface:
This is the HTML code:
I had to use a site provided by Mr Samshul, w3school, to create a contact
form at the end of the page.
This was how my final website turned out:
: week 9/10
This was an expansion of week 4, with more focus on styling and
advanced elements. This was the sample code provided by Mr Shamsul
of the exercise done in class:
This was the final webpage:
This was my attempted code:
This was my final result:
.PNG)
.PNG)
.PNG)
.PNG)
.png)
Comments
Post a Comment