Interactive Design / Project 1 & Project 2

on
14.05.2024 - 11.06.2024 (Week 4-Week 8)
Ng Kar Yee / 0367743
Bachelor of Design (Honours) in Creative Media
Interactive Design / Project 1 & Project 2

INTRODUCTION


PROJECT 1

PART 1⇒ PROTOTYPE DESIGN (DIGITAL RESUME/CV)    

For our project 1 part 1, Mr Shamsul introduced Prototype Design to us, which we are needed to creating a UI design prototype for the 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 your digital resume.

For this task, we are required to,

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

6. Evaluation Criteria

  • Your UI design prototype assignment will be evaluated based on the following criteria:Clarity and effectiveness of the UI design, layout, and visual elements.
  • Appropriateness of the chosen typography, color palette, and imagery.

RESEARCH

To have a head start, I began to do some research to get a briefly idea on how should I design my resume.
Figure 1.0.0 Example Of Digital Resume From Pinterest

Figure 1.0.1 Example Of Digital Resume From Pinterest

Figure 1.0.2 Example Of Digital Resume From Pinterest

Figure 1.0.3 Example Of Digital Resume From Pinterest

SKETCH

After doing some research, I started sketching out my ideas.

Figure 1.0.4 Idea Sketch

DIGITIZATION

After sketching out my idea, I started digitizing using Figma. For the header of my digital resume, I designed a navigation bar and a search window to be there as I wanted to convenience user who browse the web page. I also added a the word Rainn as the logo for my digital resume web page. After that, I proceed to design the first section of the page which is my profile. I inserted a picture of my myself and wrote a brief introduction as well as my contact number.

Figure 1.0.5 Section 1

For the second section, I divided my space in two part. The first part is a progression bar of the languages level which I'm fluent in. While the second part is the skills and application that I'm skilled in. The icon for the application are found and downloaded online.

Figure 1.0.6 Section 2

For the third and fourth section, I designed it to show my working experiences, education level and achievements. To make them more clearly, I arranged the datas using mind map and bullet points. 

Figure 1.0.7 Section 3 and 4

For the last section, I used card UI to showcase past projects I was involved in. I also provide a brief introduction for each project below the cards.

Figure 1.0.8 Section 5

For the overall layout, I have divide them into 5 section. I have also use 5 colour for the colour palette for the overall layout. For the fonts, I have use DM Serif Display for the heading 1 and 2, while for the body, I have use Caudex Regular. 

Figure 1.0.9 Colour Palette

FINAL DIGITIZATION

Figure 1.1.0 Final Digitization

FINAL DIGITIZATION ON FIGMA

PROJECT 2

PART 2⇒ CREATING A DIGITAL RESUME (DIGITAL RESUME/CV)    

For our project 2, Mr Shamsul introduced creating a digital to us, which we are needed to build the UI design prototype created in part 1 to develop the final visual design of the digital resume or curriculum vitae (CV). We are advised to focus on refining the visual aesthetics, enhancing user intercase interactions and ensuring a polished user experience.

For this task, we are required to,

1. UI Design Prototype Review:

  • Review the feedback received on your UI design prototype from Part 1 and make necessary
  • improvements based on the feedback.

2. Visual Design Refinement:

  • Implement the final visual design elements, including typography, color palette, and imagery, that align with your personal brand and the tone of your resume.
  • Fine-tune design details to create a polished and cohesive look.

3. User Interface Interactions Enhancement:

  • Enhance user interface interactions based on the UI design prototype. Implement more advanced interactions such as animations, smooth transitions, and micro interactions.
  • Ensure that interactions enhance user engagement and contribute to a positive user experience.

4. Technical Implementation:

  • Develop the final visual design using HTML and CSS code that reflects the refined UI design.

5. Presentation and Documentation:

  • Update your e-portfolio explaining and showcase the processes of the task

Evaluation Criteria:

Your final design assignment will be evaluated based on the following criteria:

  • Visual coherence, professionalism, and refinement of the digital resume.
  • Advanced user interface interactions that contribute to an engaging user experience.
  • Responsive and seamless performance on different devices.
  • Thoughtful consideration of accessibility guidelines.
  • Quality of presentation and documentation explaining the design evolution.

WEBSITE VIEW

MOBILE VIEW

FINAL HDML STRUCTURE

FINAL CSS STRUCTURE 

FINAL LINK TO NETIFY

https://sprightly-crepe-163c66.netlify.app/


Comments

Post a Comment