Interactive Design Project 1 - Digital Resume
Week 5 -
Marcus Leong Ka Shing 0363643
Interactive Design / BA
of Design (HONS) in Creative Media / Taylor's University
Project 1 -
Digital Resume
LECTURES
Web Standards
Web standards ensure websites work across devices and configurations.
W3C (World Wide Web Consortium) sets and maintains web standards.
Standards include HTML and CSS.
Following standards simplifies development, improves compatibility, and aids accessibility.
How the Web Works
Web servers host websites worldwide.
DNS servers map domain names to IP addresses.
A unique IP address identifies each device on the web.
Web servers send requested pages to web browsers.
Structure of a Web Page
Structure helps users understand and navigate a web page.
HTML tags provide structure.
Elements have opening and closing tags.
Elements can have attributes (name and value).
Headings
HTML provides six levels of headings: <h1> to <h6>.
Headings create content hierarchy.
Use headings for structure and readability.
Paragraphs
Paragraphs are created with <p> tags.
Good for separating text into coherent sections.
Bold & Italic
<b> and <i> tags make text bold and italic.
<b> doesn't imply extra meaning, while <i> may indicate a different way of saying something.
Lists
HTML has ordered (<ol>) and unordered (<ul>) lists.
List items are enclosed in <li> tags.
Lists provide structure for items in a specific order.
Nested Lists
You can nest lists within other lists.
Nested lists are indented for readability.
Useful for organizing content hierarchically.
Links
Links are created with <a> tags.
Use the href attribute to specify the destination URL.
Text between opening and closing <a> tags is clickable.
Links can be internal or external, opening in the same or a new browser window/tab.
Adding Images
Images are added with the <img> tag.
Use the src attribute to specify the image source.
The alt attribute provides alternative text for accessibility.
The title attribute adds a tooltip to the image.
Week 5:
HTML: ID and Class Attributes ID attributes uniquely identify elements. No two elements should have the same ID. ID can be used to style elements differently. Class attributes identify groups of elements. Multiple elements can share the same class.HTML: Block and Inline Elements
Block elements start on a new line (e.g., <h1>, <p>).
Inline elements continue on the same line (e.g., <b>, <a>).
CSS Basics
CSS styles elements in HTML.
A CSS rule has a selector and declarations.
Selectors indicate elements to style.
Declarations specify styling properties.
Properties (e.g., font, color) and values (e.g., Arial, yellow).
Linking CSS
Use <link> to link external CSS.
<link> resides in <head> with href, type, rel attributes.
Multiple CSS files for different purposes can be linked.
Internal CSS
Use <style> within <head> to add CSS.
Type attribute should be text/css.
Suitable for small projects or specific styles.
CSS: Color
Set text, background, and border colors.
Use properties like color, background-color.
CSS: Background
Set background color, image, repeat, attachment.
Shorthand property simplifies background settings.CSS: Text Formatting
Style text color, alignment, decoration.
Transform text (uppercase, lowercase, capitalize).
Adjust spacing with text-indent, letter-spacing, and word-spacing.
Apply text shadow for visual effects.
CSS: Fonts
Use web-safe fonts (Arial, Verdana, etc.).
Add custom fonts with Google Fonts. Week 6: CSS Selectors
Universal SelectorSelects all elements using '*'.
Use with caution as it can affect all elements.
Element SelectorTargets HTML elements by their tag name.
e.g., p targets all <p> elements.
ID SelectorTargets an element with a specific ID attribute.
Use # followed by the ID name, like #my-element.
Class SelectorTargets elements with a specific class attribute.
Use . followed by the class name, like .my-class.
Descendant SelectorSelects an element inside another element.
e.g., .container a styles all <a> elements inside a <div> with class "container".
Child SelectorSelects direct children of an element.
e.g., ul > li styles immediate <li> children of a <ul>.
Pseudo-class SelectorSelects elements based on state or position.
Common pseudo-classes: :hover, :active, :visited, :link, :focus, :nth-child(n).
Pseudo-element SelectorSelects parts of an element.
Common pseudo-elements: ::before, ::after.
Reasons for Multiple Selectors:
Reasons for Multiple Selectors:
Specificity: Different levels of specificity are needed for various situations.
Structure: Complex web structures require precise targeting of elements within contexts.
Attribute-Based Selection: Target elements based on attributes or attribute values.
Pseudo-Classes and Pseudo-Elements: Style elements based on state or position.
Responsive Design: Media queries adapt styles based on device characteristics.
Stateful Interactions: Style elements based on user interactions.
Cross-Browser Compatibility: Different browsers may interpret CSS rules differently.
Ease of Maintenance: Certain selectors simplify consistent style updates.
Accessibility: Target elements to enhance readability and usability for individuals with disabilities.
INSTRUCTIONS
Project 1
For this project, we were tasked with creating a digital resume with our own
experiences and skills using software such as Figma or Adobe XD. I decided to
go with Figma as I have experience using it.
|
| Fig 1.0 Digital Sketch |
This was the wireframe I made at the start, to have a slight direction in
my resume.
|
| Fig 1.1 Adding Content |
Moving on, I added more details and information.
|
| Fig 1.2 Adding Color |
I felt that having just normal boxes like these can seem a little dull even with the color. I brainstormed and came out with an idea to have a little splash of uniqueness.
|
| Fig 1.3 Adding Elements |
I created these puzzle like shapes and connected the boxes together.
|
| Fig 1.4 Adding Elements |
Final Digital Resume
|
| Fig 1.5 Final Prototype |
Feedback:
no feedback
Reflection
While working on this project, I made some interesting observations. Opting
for Figma, a tool I was familiar with, proved beneficial, ensuring a smoother
workflow. Creating the wireframe in Fig 1.0 underscored the importance of
having a preliminary plan to guide the resume's overall direction. As I added
content in Fig 1.1, I recognized the need to strike a balance between
information and visual appeal. The pivotal moment came with Fig 1.2, where I
realized that even with colors, the design could lack vibrancy. This prompted
me to introduce puzzle-like shapes in Fig 1.3, unveiling how small creative
touches could enhance the overall aesthetic. Completing the final digital
resume in Fig 1.4 reinforced the impact of these decisions, emphasizing the
significance of thoughtful design in making a resume both informative and
visually engaging. This experience highlighted the value of planning, finding
the right balance, and how seemingly minor design elements can significantly
elevate the presentation of one's digital profile.
Comments
Post a Comment