Interactive Design - Project 1
Alya Rahima Zahra (0363588)
Interactive Design / Bachelor of Design (Hons) in Creative Media
Interactive Design
Interactive Design: Project 1
▸LECTURES:
What is Class Attribute?
- Identifies multiple elements as distinct from others.
- Allows for common styling of similar elements.
- Can be shared across multiple elements.
- Example of used (On physical class to color specific area on our table)
Note: Any HTML can carry a class attribute and We can identify several elements as being different from the other elements on the page.
What is ID Attribute?
- It is uniquely identifies HTML elements.
- It can be use for styling specific elements differently.
- Must be unique within a page.
Functions: Every HTML element can carry the ID attribute.
It is also used to uniquely identify the element from other elements on the page.
Important: No two elements have the same value for their ID attributes (otherwise the value is no longer unique).
Unique identity allows us to style it differently from any other instance of the same element on the page.
Fig 1. ID vs Class attribute from DataFlair
▸Project 1 - Prototype
Part 1 Prototype Design – Digital Resume/CV
Objectives: In this first part of the assignment, you
will focus on creating a UI design prototype for your digital resume or curriculum vitae (CV) using prototyping software such as Figma. The UI design prototype will showcase the layout, visual elements, and user interface interactions of your digital resume.
1. Content and Structure: Compile your resume content, including personal information, educational background, work history, skills, projects, and other pertinent sections. Arrange the sections in an order that reflects their significance and pertinence to your profile.
2. Layout and Visual Design: Utilize your selected prototyping tool to craft the digital resume's layout. Determine the arrangement of sections and their coherence. Employ consistent visual styling with chosen typography, colors, and spacing.
3. Sections and Organization: Segment your resume into clear sections like "Profile," "Education," "Experience," "Skills," "Projects," and "Contact," aligning them with the job you are applying for.
4. Visual Elements: Add relevant graphics, icons, or placeholders that correspond with the text and elevate your digital resume's visual impact.
5. Prototype Presentation: Updateyour e-portfolio to illustrate and display the task's methodology.
Evaluation Criteria: The UI design prototype will be assessed on the UI's clarity, layout, visual components, and the suitability of typography, color scheme, and graphics.
In this project, I've chosen a theme that is modern, formal, and simplistic. Mr. Shamsul has provided an example, but I conducted additional research online. Based on my findings, I've decided to adopt a futuristic yet formal style for my CV.
.jpg)
Fig 1.1 References
▸Process :
Before diving into my assignment, I decided to get acquainted with Figma, a software I hadn't used before. I started by watching tutorials on YouTube, which made it look straightforward. However, when I actually tried it, I realized it would take some time to adapt, especially since it's quite different from Adobe Photoshop which I'm more familiar with.
Once I got the hang of it, I began sketching out my CV. To get a clearer vision of the layout, I even used my phone to play around with the layers, helping me visualize the final look of my resume.
Fig. 1.2 Sketch
Once the sketch was complete, I started compiling elements for my resume. Recognizing that work experience is usually a common section, but yet it's not applicable in my case. I decided to highlight my involvement in organizations and extracurricular activities instead.
▸Creating the design in Figma :
Fig 1.3 Process documentation 1
Fig 1.3 Process documentation 2
▸Final Prototype Result :
Fig. Final Result (jpg.)
Fig. Final Result (figma.com)
Comments
Post a Comment