14th May - 28th May 2024 (Week 4 - Week 6)
I added a navigation bar at the top right to let the users enter another webpage that elaborate more about my work experience, my projects and my hobbies. The font I chose here is in futuristic style.
To differentiate the content and the navigation bar, I added a line using "<" and ">" because these are symbols used in html and I wished to become a web designer, so this digital resume will have a style of programming codes. I chose a color of lighter purple for this line to match the theme.
After that, I started to place the content like my name, personal details on it. To match with the fade-in to black part, I added my photo with fade out effect on the bottom. To do that, I created a rectangle fit to my photo and apply black color on it, and then one side with 100% opacity and another side with 0% opacity, then masked the rectangle with my photo.
The other content is added after the fade-out on black part. For the head of content, I used an orange color that is used in coding layout, and also with "<" and ">". I also place a straight line on the left of each group of content like software skills, work experience etc. to differentiate the sections. The font used for the content is also in coding style.
For the software skill, I used ">" and applied color on it to indicate the level of my skill on the particular software, it also has a meaning of improving and developing.
This marked the end of my content in this webpage, I added a line same with line I used to differentiate the content and the navigation bar above, now I use it because I want to add my contact information below.
Sin Jun Ming 0364638
Interactive Design / Bachelor of Design in Creative Media / Taylor's
University
Project 1 - Digital Resume/CV
INSTRUCTIONS
Project 1 - Digital Resume/CV
Part 1 - Prototype Design
In the first part of the assignment, we need to focus on creating a UI design prototype for our digital resume or curriculum vitae (CV) using prototyping software such as Adobe XD or Figma. The UI design prototype will showcase the layout, visual elements, and user interface interactions of our digital resume.
Requirements:
1. Content and Structure:
Prepare the content for your resume, including personal details, education, work experience, skills, projects, and other relevant sections. Decide on the order and hierarchy of sections based on their importance and relevance.
2. Layout and Visual Design:
Design the layout of your digital resume using the chosen prototyping software. Define the placement of different sections and how they will flow together. Apply a consistent visual design using typography, color palette, and appropriate spacing.
3. Sections and Organization:
Organize your resume into logical sections, such as "Profile," "Education," "Experience," "Skills," "Projects," and "Contact." Prioritize sections based on their relevance and significance to the position you're targeting.
4. Visual Elements:
Incorporate relevant images, icons, or placeholders that align with the content and enhance the visual appeal of your digital resume.
5. Prototype Presentation:
Update your e-portfolio explaining and showcasing the processes of the task.
Ideation
Mr. Shamsul provided some ideas of digital resume for us to better understanding the basic needs of a digital resume. The content and structures are quite the same for every digital resume, but the layout and visual elements can vary with our personalities and identity.
Some digital resume ideas:
- https://www.behance.net/gallery/68943555/My-resume?authuser=0
- https://www.behance.net/gallery/168450357/Portfolio-CV-Graphic-Design-Digital-Marketing?authuser=0
- https://www.behance.net/gallery/130539051/Resume?authuser=0
- https://www.behance.net/gallery/102461713/My-Resume?authuser=0
Design
I chose Figma to design my digital resume. for the background color of my resume, I chose a purple to black gradient and created a fade in and fade out effect on the black color. I wished to create a simple background and let the users focus on my content.
Fig 1.1 Background color
Fig 1.2 Navigation bar
To differentiate the content and the navigation bar, I added a line using "<" and ">" because these are symbols used in html and I wished to become a web designer, so this digital resume will have a style of programming codes. I chose a color of lighter purple for this line to match the theme.
Fig 1.3 Line
After that, I started to place the content like my name, personal details on it. To match with the fade-in to black part, I added my photo with fade out effect on the bottom. To do that, I created a rectangle fit to my photo and apply black color on it, and then one side with 100% opacity and another side with 0% opacity, then masked the rectangle with my photo.
To achieve consistency, only two different fonts are used here.
Fig 1.4 Personal details
The other content is added after the fade-out on black part. For the head of content, I used an orange color that is used in coding layout, and also with "<" and ">". I also place a straight line on the left of each group of content like software skills, work experience etc. to differentiate the sections. The font used for the content is also in coding style.
Fig 1.5 Content design
I continued to fill up my content using the same designs to achieve consistency.
Fig 1.6 Rest of the content
This marked the end of my content in this webpage, I added a line same with line I used to differentiate the content and the navigation bar above, now I use it because I want to add my contact information below.
After that, I added icons of my social media and linked them to the actual social media site using Figma prototype function.
Fig 1.7 Footer (social media icons)
Fig 1.8 Figma prototype interactions
Fig 1.9 Full UI design (PDF)
Figma prototype file:
Reflection
This project gave me an opportunity to discover a new tool, which is Figma to design an interface. It was very cool for Figma to have prototype functions that can simulate the browsing experience of website created by us. The lectures are useful as it guided me to create this interface by following rules like simplicity, consistency etc. I believe the Project 2 will be a lot harder as I will need to code it in HTML and CSS, so I better get prepared.
Comments
Post a Comment