Interactive Design - Exercises
28.08.2023 - 18.10.2023 (Week 1 - Week 8)
Sorcha Griselda / 0353056
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Exercises
Exercise 1 | Web Analysis
Week 1 / Introduction & Briefing
During this week, Mr. Shamsul went over the module information booklet and explained all our projects and assignments that we will be doing on this semester. He then instructed us to download Dreamweaver, register for Netifly, and complete the first assignment, which is to analyze a website from the provided link. Additionally, he added us to a WhatsApp group so that we could easily interact with one another if we had questions about the tasks.
Week 2 / Usability
Usability refers to the degree to which a digital product is user-friendly, efficient, and satisfying for its intended users. It is a critical aspect of design since it directly impacts the user's overall experience and can influence the success or failure of a product or service. Key components of usability include:
- Consistency: A consistent interface design maintains uniformity in layout, navigation, and visual elements throughout the application, making it more predictable and easier to use.
- Simplicity: Incorporating simplicity in designs will help the users to achieve their goal faster and more efficiently, while also having a great user experience.
- Visibility: The more visible an element is, the more likely users will know about them and how to use them. Users should know, just by looking through an interface, what their options are and how to access them.
- Feedback: Users should receive clear feedback about their actions, such as giving the user a signal that they have succeeded or failed at performing a task.
- Error Prevention: The interface should provide guidance on how to recover from errors.
Week 3 / Understanding Website Structure
Website structure matters as it directly impacts the user experience, search engine optimization (SEO), and the overall success of a website. The three key elements include:
- Header: The top section of a webpage which usually contains the website's logo, navigation menu, and contact information. It provides users with quick access to essential information and navigation.
- Body: The main content area of a webpage which usually contains text, images, videos, and other multimedia elements. Proper organization of content within the body is crucial for readability.
- Footer: It is located at the bottom of a webpage and typically includes copyright information, links to important pages, and contact details. The footer provides closure to the webpage and additional navigation options.
Organizing Content - use headings (H1, H2, H3) to create a hierarchical structure.
Navigation menu - It helps users move around the website. Use clear and concise labels for menu items while also considering using dropdown menus for complex sites.
Week 4 / The Web and Language
What are web standards?
- Web standards refer to a set of guidelines and specifications established by international organizations to ensure consistency, interoperability, and accessibility across the World Wide Web. These standards, often overseen by organizations like the World Wide Web Consortium (W3C) and the Internet Engineering Task Force (IETF), define the proper way to create and interpret web documents, including HTML, CSS, and JavaScript.
- Why?
- Future-Proofing: Following web standards ensures that websites and applications remain compatible with evolving technologies and updates. It reduces the likelihood of issues arising when browsers introduce new features or updates.
- Search Engine Optimization (SEO): Web standards contribute to the overall structure and clarity of web documents, positively influencing search engine rankings. Search engines favor well-structured, standards-compliant content.
- Efficiency in Development: Adhering to standards streamlines the development process. Developers can rely on established rules, reducing the need for workarounds and custom solutions for different browsers.
HTML Scripting
- HTML, or HyperText Markup Language, is the fundamental coding language used to create the structure and content of web pages. It serves as the backbone of the World Wide Web, allowing developers to define the various elements on a webpage, such as headings, paragraphs, links, images, forms, and more. HTML utilizes a system of tags, represented by angled brackets, to mark up and structure content.
- HTML Elements | <element>Information</element>
- <body>: You met the <body> element in the first example created. Everything inside this element is shown inside the main browser window.
- <head>: Before the <body> element, you will often see a <head> element. This contains information about the page. You will usually find a <title> element inside the <head> element.
- <title>: The contents of the <title> element are either shown at the top of the browser (tab bar).
- <p>: To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.
- <b>: By enclosing words in the tags <b> and </b> we can make characters appear bold.
- <i>: By enclosing words in the tags <i> and </i> we can make characters appear italic.
- <ol>: The ordered list is created with the <ol> element.
- <li>: Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item).
- <ul>: The unordered list is created with the <ul> element.
- <a>: Links are created using the <a> element which has an attribute called href. The value of the href attributes is the page that you want user to go to when they click on the link.
- <img>: The <img> HTML tag serves the purpose of incorporating images into a web page. In the context of web design, it's important to note that images are not physically inserted within a web page; instead, they are linked to it. The <img> tag essentially establishes a designated space for displaying the referenced image.
- src - this attribute specifies the path to the image
- alt - this attribute provides alternative text for the image, which is essential for accessibility
- Title - this attribute provides tool tip of the image in the browser
- HTML has 6 levels of headings:
- <h1> main heading
- <h2> subheading
- <h3> and so on
Tips on creating HTML:
- no uppercase, only lowercase
- always command + s (to save the file every time)
- if wanted to create another attribute, there needs to be a space in between before typing another attribute
Week 5 / HTML & CSS
- ID attribute
- The "id" attribute provides a unique identifier for a specific HTML element, ensuring that no two elements on the same page share the same identifier. This uniqueness is valuable for JavaScript functions or when applying specific styles to a particular element.
- Class attribute
- The "class" attribute is used to group HTML elements that share common styling or behavior. Multiple elements can share the same class, allowing developers to apply styles or scripts uniformly to these grouped elements. Unlike the "id" attribute, the "class" attribute is not unique on a page, enabling developers to apply the same styling to multiple elements.
- Introduction to CSS
- To specify the visual display and layout of HTML documents, web developers utilize Cascading Style Sheets (CSS), a style sheet language. CSS works by connecting HTML elements with styles, such as colors, fonts, spacing, and positioning. This encourages a more modular and maintainable approach to web development by enabling developers to separate the structure and content of a webpage from its design style.
- In CSS, methods are techniques or approaches used to apply styles and control the presentation of HTML elements. Some key methods employed in CSS include:
- Selector-Based Styling: Utilizes selectors to target HTML elements and apply styles. Selectors can range from simple, element-based selections (ex: <p> for paragraphs) to more complex combinations that target specific elements based on their attributes, classes, or IDs.
- Pseudo-Classes and Pseudo-Elements: Target specific states or parts of elements. For example, :hover targets elements when the user hovers over them, and ::before and ::after create pseudo-elements for additional styling.
- Transitions and Animations: CSS provides properties for creating smooth transitions and animations. Transitions allow for gradual changes in style, such as color or size, while animations enable the creation of more complex and dynamic visual effects.
Week 6 / CSS Selectors
CSS selectors are patterns used to select and style HTML elements on a
webpage. They define the criteria for selecting elements based on their
attributes, types, relationships with other elements, and more. Some
common CSS selectors include:
- Universal Selector: Selects all elements on the page
- * {
/* styles */
}
- Element Selector: Selects all elements of a specified type
- p {
/* styles */
}
- ID Selector: Selects a single element with a specified id attribute
- #uniqueElement {
/* styles */
}
- Class Selector: Selects all elements with a specified class attribute
- .example {
/* styles */
}
- Descendant Selector (' '): Selects an element that is a descendant of another specified element
- div p {
/* styles */
}
- Child Selector ('>'): Selects an element that is a direct child of another specified element
- div > p {
/* styles */
}
- Pseudo-class Selector: Select elements based on their state or position
- a:hover {
/* styles for hover state */
}
- Pseudo-element Selector: Select a specific part of an element
- p: :first-line {
/* styles for the first line of a paragraph*/
}
Week 7 / Box Model
The box model is a fundamental concept that defines the layout and
structure of elements on a web page. It describes how each HTML elements
is treated as a rectangular box with content, padding, border, and margin
areas. The box model is crucial for understanding and controlling the
layout of elements of a webpage.
- Block-level element: Starts on a new line and stretches out to the left and right as far as it can
- <div>
- Inline Element: Can wrap some text inside a paragraph, without disrupting the flow of the paragraph
- <span> </span>
The box model consists of the following components:
|
| Visual Representation of the Box Model |
- Content:
- The actual content of the box, such as images, text, or other media
- Padding:
- The space between the content and the border. It is transparent and does not have a background color by default
- Border:
- The border surrounding the padding. It can have a specified width, style, and color
- Margin:
- The space outside the border. It clears an area around the element, preventing it from coming too close to other elements
INSTRUCTION
Exercise 1 | Web Analysis
Instruction:
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 more 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)
Fig 1.1 Exercise 1 - Web Analysis by Sorcha Griselda 04/09/2023
Exercise 2 | Web Replication
Instruction:
Your task is to 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. 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. You can use any image from
the stock image or free stock icon. The image that you will be using
does not have to be an exact image from the original website. You may
replace it with a similar image. Focus on the layout, type style, and
color style. To find similar typefaces/fonts, you can download fonts
from Google Fonts. You may need to screen grab the website and can
begin to replicate the page.
For this exercise, I chose Morgan Stanley and Ocean Health Index as I found both websites to be interesting for me to
replicate using Adobe Illustrator.
|
| Fig 2.1 Outline View of Morgan Stanley Web Replication | 10/09/23 |
|
| Fig 2.2 Outline View of Ocean Health Index Web Replication 10/09/23 |
|
| Fig 2.3 Morgan Stanley Web Replication (left) & Screen Grab of Web Page (right) 09/09/23 |
|
| Fig 2.4 Ocean Health Index Web Replication (left) & Screen Grab of Web Page (right) 09/09/23 |
Class Activity | Create a Personal Profile Webpage
Instruction:
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 have learned.
During this class activity, Mr. Shamsul guide us on where to start as
well as explaining us about the use of the codes.
|
| Fig 3.1 Process of building HTML #1 | 11/09/2023 |
|
|
|
Final:
|
| Fig 3.3 Final Personal Profile Webpage | 11/09/2023 |
Web Link:
Exercise 3 | Creating a Recipe Card
Instruction:
In this exercise, you will create a recipe card using HTML and CSS.
The goal is to design a basic webpage that displays a recipe's
ingredients and instructions in a visually appealing format.
What to have in the recipe card:
- 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.
Before I started out with scripting the HTML and CSS, Mr. Shamsul
provided us with recipe links that we can freely choose to create. I
decided to make a recipe card on 'Blueberry Cinnammon Rolls'.
|
| Fig 4.1 Process of scripting HTML | 06/10/2023 |
|
| Fig 4.2 Process of scripting CSS | 06/10/2023 |
Final:
|
| Fig 4.3 Final Recipe Card Overview | 08/10/2023 |
| Fig 4.4 Final Recipe Card HTML | 08/09/2023 |
|
Fig 4.5 Final Recipe Card CSS | 08/09/2023 |
Recipe Web Link:
Exercise 4 | Layout
During this exercise, we learned on how to create a layout for a
recipe, which include the header, columns, interactive button, and
footer.
|
| Fig 5.1 Final Layout Exercise Outcome | 09/10/2023 |
| Fig 5.2 Final Layout Exercise Outcome HTML | 09/10/2023 |
| Fig 5.3 Final Layout Exercise Outcome CSS | 09/10/2023 |
Layout Web Link:
REFLECTION
This was the first time I used Adobe Dreamweaver, and it was like
unlocking a new language for digital expression as I dive into the
realms of HTML and CSS. At first, I was confused and lost on how to
start and what to do, but as I continue embarking on the journey, I came
to see how crucial it was to understand the intricate details of the
underlying code. To be honest, it was not an easy journey, and I did
experienced some challenging period. However, I do enjoy the process of
this journey as it enlarged my perspective and skills on creating
interactive design.
Comments
Post a Comment