Interactive Design Project 1: Prototype Design
13.5.2024 - 28.5.2024 ( Week4 - Week 6)
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Interactive Design
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Interactive Design
Project 1: Prototype Design
Jump Link
1. Lecture1.1. Week 4: The Web
1.2. Week 5: HTML and CSS
1.3. Week 7: CSS Key
3. Reflection
Lectures
Week 4: The WebFig4.1 THE WEB PDF
Interactive Design and Web Standards
Web Standards
- Initially, the Web was accessed via keyboard, mouse, and monitor. Nowadays, access is through various devices including phones, tablets, and audible interfaces.
- People use diverse browsers (e.g., Internet Explorer, Firefox, Chrome, Safari) and operating systems (Windows, Mac OS, Linux) with different screen resolutions.
- Ensuring websites are accessible across all devices requires adherence to web standards, which are maintained by the World Wide Web Consortium (W3C). Standards include HTML and CSS.
- Following web standards simplifies development and ensures consistent website display across browsers.
- Accessing a website involves a browser connecting to a DNS server to resolve the domain name to an IP address, allowing the browser to contact the web server hosting the site.
- Web pages are structured similarly to print documents, with headings, subheadings, and paragraphs helping readers navigate and understand the content.
- HTML (Hypertext Markup Language) describes the structure of web pages using elements and tags.
- HTML elements are defined by tags within angled brackets, usually consisting of an opening tag and a closing tag.
- Attributes provide additional information about elements and appear in the opening tag.
- Key elements include <body>, <head>, and <title> for structuring the page content and metadata.
- HTML has six levels of headings (<h1> to <h6>), each indicating a different level of importance.
- Paragraphs are created with <p> tags, and text can be styled as bold (<b>) or italic (<i>).
- HTML supports ordered (<ol>) and unordered lists (<ul>), with each list item defined by <li> tags.
- Nested lists can be created for more complex structures.
- Links (<a>) are essential for navigation, created using the href attribute to specify the target URL.
- Images (<img>) are incorporated using the src attribute for the image path and the alt attribute for alternative text, enhancing accessibility.
Week 5: HTML and CSS
Introduction to CSS
Why Many Selectors Exist
In this section, we learned CSS, focusing on adjusting fonts and colors.
The font should be sourced externally, downloaded from Google Fonts, and
embedded into the project. Specific elements should be differentiated
and styled using class and ID attributes. In the style section, IDs are
identified using # and classes are identified using . at the
beginning.
At first, I chose this natural color scheme because it looked more cohesive and comfortable. However, when I tried to integrate it into my CV, I realized that it blended in too much, making the whole thing look bland and lacking eye-catching elements. It seemed inconsistent with the characteristics of a CV. Therefore, I decided to look for another color palette.
I gathered some color palettes and CVs to reference for content and layout. Then, I considered what content I could include. I divided it into several sections: Profile, About Me, Languages, Hobbies, Education, Working Experiences, and Projects.
I wrote a brief self-introduction in the About Me section, then added Languages and Hobbies. The left area is mostly about personal attributes. The right area includes Working Experiences, Education, and Projects, which are meant to be displayed to others. To keep the resume from becoming too visually complex, I used only black and white for the Projects section. Overall, to simplify coding, I avoided adding too many complex elements, ensuring it remained within my capabilities.
Fig4.2 HTML AND CSS PDF
Interactive Design
ID and Class Attributes
- ID Attribute: Unique identifier for HTML elements. Ensures no two elements share the same ID. Useful for uniquely styling an element.
- Class Attribute: Used to identify multiple elements with the same characteristics. Allows for styling multiple elements differently from others.
- Block Elements: Always start on a new line (e.g., <h1>, <p>, <ul>, <li>).
- Inline Elements: Appear on the same line as their neighboring elements (e.g., <b>, <i>, <em>, <a>, <img>).
Introduction to CSS
Cascading Style Sheets (CSS)
- Purpose: Defines how HTML elements should be displayed.
- CSS Rule Structure: Consists of a selector and a declaration. The selector identifies the HTML element, while the declaration specifies the style.
- Properties and Values: CSS declarations have properties (e.g., color, font) and values (e.g., yellow, Arial) to style elements.
- External CSS: Using the <link> element within the <head> to reference a CSS file. This keeps styles separate from content and allows for consistent styling across multiple pages.
- Internal CSS: Placing CSS rules within a <style> element in the HTML document, typically inside the <head>.
- Text and Background Colors: Set background color, text color, border color.
- Background Images: Set background images, control repetition, attachment, and shorthand properties.
- Properties: Includes text color, alignment, decoration, transformation, spacing (indentation, letter-spacing, word-spacing), and shadow effects.
- Web Safe Fonts: Recommended fonts for web use include Arial, Verdana, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT.
- Adding Fonts: Using services like Google Fonts to add custom fonts to a website.
Week 7: CSS Key
Fig4.3 CSS key PDF
CSS Selectors Overview
Types of CSS Selectors
- Target and style HTML elements on a web page.
- Define which elements receive specific styles.
- Crucial for controlling web page presentation and layout.
Types of CSS Selectors
- Universal Selector (*): Targets all elements.
- Element Selector: Targets elements by tag name.
- ID Selector (#): Targets elements with a specific ID.
- Class Selector (.): Targets elements with a specific class.
- Descendant Selector: Targets elements within a specific hierarchy.
- Attribute Selector ([attribute=value]): Targets elements with specific attributes.
- Child Selector (>): Targets direct children of an element.
- Pseudo-class Selector (:): Targets elements based on state or position.
- Pseudo-element Selector (::): Targets parts of an element.
- Adjacent Sibling Selector (+): Targets elements immediately preceded by a specified element.
- General Sibling Selector (~): Targets all sibling elements following a specified element.
- Complex Selectors (n): Targets nth child or nth child of a specific type.
- Specificity: Different levels of specificity for precise targeting.
- Structure: Target elements within complex, nested structures.
- Attribute-Based Selection: Style elements based on attributes.
- Pseudo-Classes and Pseudo-Elements: Style elements based on state or document position.
- Responsive Design: Use media queries for device-specific styles.
- Stateful Interactions: Style elements based on user interactions.
- Cross-Browser Compatibility: Ensure consistent styling across browsers.
- Ease of Maintenance: Simplify updates and maintenance.
- Accessibility: Improve readability and usability for disabled individuals.
Instructions
MIB for Interactive Design
Week 4 and Week 5 Exercise
|
| Fig4.3 Table and Form |
In this section, create tables and forms, using your own schedule for
the medication, and modify them to integrate seamlessly with the
overall design.
|
| Fig4.4 Style |
Prototype CV
In this Assignment 1, we need to use Figma or Adobe XD to design a prototype of a resume or CV. This design will be implemented with coding in Assignment 2, so the complexity depends on our skill level. The content part should include personal details, education, work experience, skills, projects, and other relevant information, ensuring proper order and hierarchy.
For layout and visual design, we need to define the placement and flow of sections, and apply a consistent design, including typography, color palette, and spacing. We should incorporate relevant images and icons to enhance visual appeal.
|
| Fig1.1 Natural Color Palatte |
At first, I chose this natural color scheme because it looked more cohesive and comfortable. However, when I tried to integrate it into my CV, I realized that it blended in too much, making the whole thing look bland and lacking eye-catching elements. It seemed inconsistent with the characteristics of a CV. Therefore, I decided to look for another color palette.
Next, I decided to use a color scheme of gold and gray-blue, adding gradients to enhance the richness and comfort of the layers.
|
| Fig1.2 References |
I gathered some color palettes and CVs to reference for content and layout. Then, I considered what content I could include. I divided it into several sections: Profile, About Me, Languages, Hobbies, Education, Working Experiences, and Projects.
|
| Fig1.3 Final CV |
I wrote a brief self-introduction in the About Me section, then added Languages and Hobbies. The left area is mostly about personal attributes. The right area includes Working Experiences, Education, and Projects, which are meant to be displayed to others. To keep the resume from becoming too visually complex, I used only black and white for the Projects section. Overall, to simplify coding, I avoided adding too many complex elements, ensuring it remained within my capabilities.
Fig1.4 Final CV PDF
Fig1.5 Figma Link of CV
Reflections
When designing a CV, many possibilities need to be considered.
Although there are many beautiful designs online, it becomes quite
challenging when considering the next task of coding the designed CV
prototype using HTML and CSS. After some thought, I came up with this
design. I feel that the biggest challenge is the background and the
timeline-like elements.
After some consideration, I thought that if I couldn't create these
two elements, I could export them as images and insert them. Then, I
would only need to figure out how to align the other content.
Comments
Post a Comment