Interactive Design - Project 1: Prototype Design

15/5/2024 - 29/5/2024 / Week 4 - Week 6
Cindy Clarissa Leslie / 0367677
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1: Prototype Design


INSTRUCTIONS

 


Research

Figure 1.1 Initial moodboard

Before I started on creating the prototype design, I created a moodboard to get a brief feeling on how my CV will look like. I chose a colour palette that consisted of colours I liked and collected some designs that I could take inspiration for. In this design, I am going for a minimalistic design that aims to communicate my skills and what not.


Planning/Prototype

Figure 2.1 Wireframing of layout using Figma

Using figma, I first designed the wireframing before starting the draft for my CV. My CV divided into 2 different sections, the first one being a personal and contact information as I deem it the most important especially for job searching when you want the recruiter to contact you. Then the 2nd section being my experiences. The hello world on the layout was a decorative choice as my specialization is UI/UX and will be relating to coding.

Figure 2.2 Wireframe as template in Adobe Illustrator

Since I wanted to create some of my graphics individually in detail, I decided to use Illustrator while following the layout that I made in Figma.  

Figure 2.3 Creating the design in Adobe Illustrator

I created the design based on the 2 different sections and decided the order according to the most important information. I included graphical assets especially the stars while making sure that it stays as minimalistic as possible for consistency.


Final Project 1: Prototype Design


 
Figure 3.1 Final design prototype jpg

 
Figure 3.2 Final design prototype pdf


REFLECTION

It was my first time using Figma for prototyping, which definitely took a bit to learn. I learned the importance of wireframing in this project, since user interfaces require cohesive layouts it would be good to prioritize this by placing shapes and texts as a foundation for positioning, to which the design came later. I want to improve my skills in prototype apps such as XD and Figma as not only will this help in designing UI however be able to work with others. If I could restart this project, I would definitely went out of my comfort zone and designed the whole prototype fully using Figma. I see myself using Figma or XD a lot more in the future therefore I need to start being able to adapt well and familiarize myself with these apps.

Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Task 3: Type Exploration and Application

Image
16/6/2024 - 22 /7/2024  / Week 9 - Week 14 Cindy Clarissa Leslie / 0367677 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 3: Type Exploration and Application LECTURES Link to  lectures 1 to 4 Link to lecture 5 INSTRUCTIONS In this task, we were required to propose specific problems and how we could design a font in order to solve them. These proposals were collected in slides format and proposed to the lecturer in order to decide which ones were good enough to do. Research Figure 1.1 Slides for proposal. Week 9, 16/6/2024 In the end, I chose to create an extension based on my old font and go with the final idea of creating a font for a band, I wanted to be able to present their metalcore music that showcases how different songs in the album is able to be loud and sharp, while some of their songs are on the softer side. Figure 1.2 Original logo/typeface for the band. Week 9, 16/6/2024 Setting the original typeface as a reference itself, I wanted to be ab...
Read more

Application Design - Final Project: High Fidelity App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES   PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
Read more

Advanced Typography - Final Compilation & Reflection

Image
22/4/2024 - 22/7/2023 / Week 1 - Week 14 Cindy Clarissa Leslie / 0367677 Advanced Typography / Bachelor of Design (Hons) in Creative Media Final Compilation & Reflection INSTRUCTIONS Task 1:  Exercises 1 & 2 Task 2:  Key Artwork Task 3:  Type Exploration and Application SUBMISSIONS Final Task 1: Exercise 1 - Typographic Systems 22/4/2024 -  13/5/2024  / Week 1 - Week 4 Figure 1.1 Final axial system, JPEG. Week 2, 29/4/2024 Figure 1.2 Final radial system, JPEG. Week 2, 29/4/2024 Figure 1.3 Final dilatational system, JPEG. Week 2, 29/4/2024 Figure 1.4 Final random system, JPEG. Week 2, 29/4/2024 Figure 1.5 Final grid system, JPEG. Week 2, 29/4/2024 Figure 1.6 Final transitional system, JPEG. Week 2, 29/4/2024 Figure 1.7 Final modular system, JPEG. Week 2, 29/4/2024 Figure 1.8 Final bilateral system, JPEG. Week 2, 29/4/2024 Figure 1.9 Final 8 typographic systems, PDF. Week 2, 29/4/2024 Figure 1.10 Final 8 typographic systems, PDF with guides. Week 2, 29/4/2...
Read more