INTERACTIVE DESIGN ✿ EXERCISES ✿
INTERACTIVE DESIGN ✿ EXERCISES ✿
28.08.23 - 14.07.23
week 1 - week 15
✿ TAN JIA JIA 0350577 ✿
Bachelor of Design (Honours) in Creative Media
✿ LECTURES ✿
Week 1
This week, Mr Shamsul briefed us about this module and the assignments that w
are going to do this semester. The software we are going to use is Adobe
DreamWeaver.
Week 2
Design Process
- Five steps - empathize, define, ideate, prototype, and test.
- Improve user experience
Usability
Refer to how effectively, efficiently, and successfully a particular user
can utilize a product of design in a certain situation.
An interface with high usability guides users through its easiest route to
achieve its goal.
Key Principle of Usability
1. Consistency
- Same color, same layout, same typeface
- Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars, and navigation bars.
- Example: Apple.com, SimeDarby.com.my, 153joobas.com
2. Simplicity
- The principle is that user interfaces should be “simple” for users.
- Minimize the number of steps involved in a process.
3. Visibility
- The basic principle is that the more visible an element is.
- User should know, just by looking at an interface, what their options are and how to access them.
4. Feedback
- Through sound, color changes.
- Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.
5. Error Prevention
- It involves alerting a user when they’re making an error
Week 3
SEO
SEO means Search Engine Optimization and is the process used to optimize a web
site's link popularity so its pages can become easily findable, more relevant
and popular for user search queries.
The Three Key Elements
1. Header
- The top section of a webpage.
- It usually contains the website's logo, navigation menu, and contact information.
- Provides users with quick access to essential information and navigation.
2. Body
- The main content area of a webpage.
- It contains text, images, videos, and other multimedia elements.
- Proper organization of content within the body is crucial for readability.
3. Footer
- Located at the bottom of a webpage.
- Typically includes copyright information, links to important pages, and contact details.
- Provides closure to the webpage and additional navigation options.
Organizing Content
- Content organization is key to a well-structured website.
- Use headings (h1, h2, h3, etc) to create a hierarchical structure.
Figure 1.1 Example of Heading
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
This week, we have started to learn some basic coding.
Header: <h1><h2><h3><h4><h5><h6><h7>
Paragraph: <p></p>
List: <ul> <ol> <li>
Add Link: <a href="..." target="_blank"> </a>
Add Image: <img src="..." width="100px" height="100px" alt="alternative
text" title=" alternative text">
Week 5
In Week 5, Mr Shamsul had introduced to us about the CSS.
Cascading Style Sheets (CSS)
is a web development language used to control the presentation and formatting
of HTML documents. It separates content from design, allowing developers to
define styles such as fonts, colors, spacing, and layout for web pages. CSS
employs selectors to target specific HTML elements and supports the concept of
cascading, where rules can override each other based on specificity and order.
It promotes responsive design, animation, and the creation of visually
appealing and user-friendly websites.
Week 6
CSS (Cascading Style Sheets) selectors are patterns used to select and style
HTML elements on a web page. Selectors target specific elements or groups of
elements to apply CSS rules and define their visual appearance. Here are some
commonly used CSS selectors:
Element Selector: Selects all elements of a specific type. For example,
p selects all paragraph elements, and h1 selects all level 1 headers.
Example:
p {
/* CSS rules for paragraphs */
}
h1 {
/* CSS rules for level 1 headers */
}
Class Selector: Selects elements with a specific class attribute. It begins
with a dot . followed by the class name. For example, .button selects all
elements with the class "button."
Example:
.button {
/* CSS rules for elements with class "button" */
}
ID Selector: Selects a single element with a specific ID attribute. It
begins with a hash # followed by the ID name. For example, #header selects the
element with the ID "header."
Example:
#header {
/* CSS rules for the element with ID "header" */
}
Descendant Selector: Selects elements that are descendants of another
element. It uses whitespace to indicate the relationship. For example, ul li
selects all list items (li) within unordered lists (ul).
Example:
ul li {
/* CSS rules for list items within unordered lists */
}
Child Selector: Selects elements that are direct children of another
element. It uses the > symbol. For example, ul > li selects only the
immediate children (li) of unordered lists (ul).
Example:
ul > li {
/* CSS rules for immediate list items of unordered lists
*/
}
Attribute Selector: Selects elements with a specific attribute and
attribute value. For example, [type="text"] selects all elements with the
attribute type set to "text."
Example:
[type="text"] {
/* CSS rules for elements with type="text" attribute */
}
Pseudo-classes and Pseudo-elements: These are used to select elements
in specific states or parts of an element. For example,: hover selects
elements when the mouse is over them, and:: before selects an element's
content before its actual content.
Example:
a: hover {
/* CSS rules for links on hover */
}
p::before {
/* CSS rules for inserting content before paragraphs */
}
Week 7
Block-lever 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:
The following illustration shows the various layers in the box model:
Figure 1.2 Box Model
The size of each of the layers in the box model can be specified using the
usual CSS units of measure (em, %, and px).
Example:
Figure 1.3 Example of Box Model
Week 8
Independent Learning Week
Week 9
In Week 9, Mr. Shamsul provided us with a comprehensive briefing on the Final Project. During this session, he likely outlined the specific requirements, and expectations, and perhaps offered guidance on the approach to be taken in developing the single-page microsite centered around the lifestyle theme. The briefing might have covered key elements such as content structuring, visual design considerations, user interface interactions, and technical implementation using HTML, and CSS. It's common for instructors to clarify evaluation criteria and emphasize the importance of presenting a well-thought-out and visually appealing final product.
Week 10
In Week 10, Mr. Shamsul directed us to initiate the thought process regarding the topic for the Final Project. This step likely involved considering the theme or subject matter that we would center our single-page microsite around. Additionally, he instructed us to update and confirm the name of the artist or team for whom we would be creating the website. This stage is crucial for setting the direction and focus of the project, ensuring that our final website aligns with a well-defined theme or lifestyle concept related to the chosen artist or team.
Week 11
During this week, Mr. Shamsul provided instructions on editing and integrating a gallery into the website dedicated to the artist or team of our choice. The tutorial likely covered aspects such as selecting and optimizing images for the gallery, implementing the necessary HTML and CSS code, and ensuring a visually appealing and user-friendly layout for the gallery section. Understanding how to effectively showcase visual content, such as images or artwork, is essential in creating an engaging and aesthetically pleasing website.
Week 12
Public Holiday (Deepavali Celebration)
Week 13
In Week 13, Mr. Shamsul instructed us on the process of removing the background from a logo, likely using image editing tools or techniques. This skill is crucial for creating a professional and polished appearance when incorporating logos into a website. By eliminating the background, the logo can seamlessly integrate into the overall design, enhancing the visual appeal of the website.
How to add Favicon to your Website:
1. Create the icon in Adobe Photoshop/Illustrator (document size 200 px x 200px)
2. Make the icon as simple as possible
3. Export the image as. PNG (Make sure you checked 'Use artboard')
4. Save it as favicon.png
5. Add this code <link rel="shortcut icon" type="image/png" href="images/favicon.png">
✿ INSTRUCTION ✿
Figure 2.1 MIB of Interactive Design
✿ EXERCISES ✿
Exercise 1: Web Analysis
In the first week, Mr. Shamsul provided a link to select two websites for
review. The objective of this assignment is to assess the design, layout,
content, and functionality of the chosen websites, identifying their
strengths and weaknesses and considering how these aspects affect the
overall user experience. This report summarizes the findings and provides
recommendations for improvement.
What To Have in The Analysis:
- Purpose and goals (effectively communicated to the user).
- Visual Design and layout (the use of color, typography, and imagery).
- Functionality and usability (navigation, form, and interactive elements).
- Quality and relevance (accuracy, clarity, and organization).
- Website performance (load times, responsiveness, and compatibility with different devices and browsers).
Figure 3.1 Web Analysis Google slide
Exercise 2: Web Replication
In exercise 2, our task is to replicate 2 existing main pages of the website
as given by Mr. Shamsul. We are allowed to replace the image by using a
similar image.
.png)
Figure 4.1 Original website of
Bandit Running
Figure 4.2 Web Replication of Bandit Running in JPEG
Figure 4.3 Web Replication of Bandit Running in PDF
Figure 4.4 Original Web of
Morgan Stanley
Figure 4.5 Web replication of Morgan Stanley in JPEG
Figure 4.6 Web replication of Morgan Stanley in PDF
Exercise 3: Create a Proposal Profile Webpage
Description: In this task, you will create a personal profile webpage that
includes basic information about yourselves. This exercise will require
them to apply the HTML skills they've learned.
Things required:
1. Page Title "My Profile"
2. Header Section <h1> with your name, <2> with a brief
tagline
3. About Me <h3>
4. My Interests <p> and List
5. Contact Information
6. Testing and Validation
7. Publish Your Web
Figure 5.1 Screenshot of the web I created
Link to the Page: My Profile
Exercise 4: Creating a Recipe Card
This exercise involves creating a recipe card using HTML and CSS. The
objective is to design a simple webpage that presents a recipe's
ingredients and instructions in an attractive and organized manner.
Requirement:
1. Create an "index.html" file.
2. Design a section with:
- Recipe title
- Appropriate images
- List of ingredients
- Step-by-step cooking instructions
3. Create an external "style.css" file.
4. Apply CSS rules using selectors like elements (e.g., body, h1, ul),
classes (e.g., .recipe-title, .ingredient-list), and IDs (e.g.,
#instructions) to style various elements of the recipe card.
Before I begin writing the code for my recipe card, I find it helpful to
first, go online and search for the specific recipe I want to feature on
my webpage. This preliminary step allows me to gather all the necessary
details, such as the recipe title, images, list of ingredients, and
step-by-step cooking instructions.
Figure 6.1 Recipe from ChatGPT
Once I had finalized the chocolate cake recipe, I embarked on the next
phase of my culinary adventure: finding the perfect image to complement
the recipe.
Figure 6.2 Reference image for chocolate cake
With everything confirmed and the recipe in hand, I transitioned to the
next phase of my project. Armed with the image reference and a vision of
the final outcome, I began the process of translating it into a digital
format. For this, I turned to Dreamweaver, a powerful web development
tool.
Besides that, I added a class to all the headers so that I could
easily edit their styles in the CSS file.
Figure 6.3 HTML file
After completing the HTML, I proceeded to code the CSS for my HTML
project. This task took some time as there were no face-to-face tutorials
scheduled for the week. Instead, we had to rely on recorded tutorials to
learn and understand the CSS concepts.
Figure 6.4 CSS file
I decided to change the font family for all the headers to ensure they are
clearly distinguishable from the paragraphs. I opted for the 'Young Serif'
font from Google Fonts.
Final Outcome
Figure 6.5 Screenshot of the page I created
✿ REFLECTION ✿
Engaging in the exercises has proven to be quite enjoyable for me, given
my prior experience with HTML during my foundational learning phase. The
familiarity with HTML in my foundation has made handling the exercises
involving simple HTML and CSS a breeze. I find a sense of fulfillment and
enjoyment in the tasks, particularly because I can apply various tricks
and techniques that I learned during my foundational HTML course. This
hands-on experience not only reinforces my understanding of the concepts
but also allows me to experiment with and expand upon the knowledge I
gained previously. As I navigate through these exercises, I am continually
building upon the foundation I established earlier, providing a solid
basis for further exploration and learning in web development.
Comments
Post a Comment