21.05.2024 - 28.05.2024 | Week 5 - Week 6
Maisarah binti Mohd Sufian | 0358458
Interactive Design | Bachelor of Design (Hons) in Creative Media
Project 1 | Prototype Design
___________________________________________________________________________________
LECTURES
Week 5
Extra Markup
ID attribute
Every HTML element can carry the ID attribute.
- used to uniquely identify the element from other elements on the page
- important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique)
- giving an element a unique identity allows it to be styled differently from any other instance of the same element on the page (e.g. you might want to assign one paragraph within the page a different style from all of the other paragraphs)
Class attribute
Every HTML element can also carry a class attribute.
- sometimes there is a need to identify several elements as being different from the
other elements on the page (e.g. you might have some paragraphs that contain information that is more
important than others and want to distinguish between these elements)
- the class attribute on any elements can share the same value or name
ID and Class attribute
By default, using these attributes does not affect the presentation of an element.
- the appearance will only change if there is a CSS rule that indicates it should be displayed differently
Block elements
Elements will always appear to start on a new line in the browser window.
- example: <h1>, <p>, <ul> and <li>
Inline elements
Some elements will always appear to continue on the same line as their neighbouring elements.
- example: <b>, <i>, <em>, <a> and <img>
Week 6
Introduction to 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.
- they govern how the content of specified elements should be displayed
- contains two parts: a selector and a declaration
CSS Style Rules with HTML Elements
SELECTOR
p {
font-family:Arial;
} DECLARATION
This rule indicates that all <p> elements should be shown in the Arial typeface.
Selectors
- indicate which element the rule applies to
- the same rule can apply to more than one element if the element names are seperated with commas
Declarations
- indicate how the elements referred to in the selector should be styled
- sit inside curly brackets
- split into two parts (a property and a value) and are separated by a colon
CSS Properties Affect How Elements are Displayed
h1, h2, h3 {
PROPERTY- font-family:Arial;
color: yellow; -VALUE
}
This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in a yellow color.
Property
- indicate the aspects of the element to change
- example: color, font, width, height and border
Value
- specify the settings to use for the chosen property
- example: to specify a color property, the value is the color that you want it to be for the elements
Method to Employ CSS
The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page.
- it is an empty element and it lives inside the <head> element
- it should use three attributes:
1. href; to specify the path to the CSS file
2. type; specifies the type of document being linked to, the value should be text/css
3. rel; specifies the relationship between the HTML page and the file linked to, the value should be stylesheet when linking to a CSS file
___________________________________________________________________________________
PROJECT 1 - Prototype Design
Instructions
For this exercise, we are required to create a digital resume/cv using Figma/Adobe XD. The UI design prototype should be evaluated by content and structure, layout and visual design, sections and organisation, visual elements and presentation.
1. Ideation and Content
First, I made notes and listed out the content of what to inlcude in my digital cv:
Experience
- Logo Design
- Graphic Design
- Advertising Design
Education
Primary:
- SK Damansara Jaya 2011-2012
- SK Nong Chik 2013-2016
Secondary:
- Heaton Manor School (Jesmond Park Academy) 2016-2017
- SMK Ibrahim 2018-2021
Tertiary
- Taylor's College 2022-2023
- Taylor's University from 2023
Skills
- Adobe Photoshop
- Adobe Illustrator
- Adobe Premier Pro
- Adobe After Effects
- Adobe Indesign
- Adobe Dreamweaver
- Figma
- HTML
2. Using Figma
I decided to use Figma to create my prototype. I honestly didn't have much of a direction or plan on how to the layout, and just went with the flow. I organised my hierarchy by placing the most important information first referencing my notes. The colour palette came from eyedropping the background of my portrait to be used as a complimentary colour alongside off-black. I used white, and grey as the main colours as I thought they were most suitable.
I went back into Figma and created a new frame using the desktop preset, and elongated it so that my resume is about 2 screens long. I copied elements from my previous layout with a few alterations to suit the new dimension. I used the asset presets to add a header and footer.
I just went with what I thought would look best, and use third-party icons I found online to add extra elements.
___________________________________________________________________________________
FEEDBACK
Week 5
No feedback given
Week 6
My layout is very clean, and it works for a printed resume. However, as a digital CV my content should be arranged in a scroll down fashion. I also used the wrong file size, it should be Desktop instead of A4.
___________________________________________________________________________________
REFLECTION
Experience
The structured approach to learning HTML and CSS in class provided a solid foundation for understanding how websites are built. Through hands-on practice and detailed explanations, I was able to grasp the fundamental concepts and apply them to my own html coding.
Observation
Figma and Dreamweaver were overall quite simple to use, and HTML or CSS was not as complicated as I thought. It only gets a bit confusing if the coding is not structured, Dreamweaver's intuitive interface and built-in code editor made it easier to write and visualize my code. I appreciated the real-time feedback and the ability to see changes instantly.
Findings
One of the most valuable findings from this project was the realization of how crucial it is to have a well-structured and semantic HTML foundation. It not only makes the website more accessible but also easier to style and maintain.
Comments
Post a Comment