Interactive Design - Project 1

-

05.14.2024 - 05.28.2024  / week 4 - week 6

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Interactive Design

JUMPLINK:

1. LECTURE

Week 1 - F2F (Apr 23, 2024)

1. TASK BRIEFING

  • Prepare Figma
  • Prepare Netlify for projects 2 and 3
  • Prepare visual studio code

5 POST

Exercises

  • task 1 Web Analysis (2 websites)                                          (week 2)
  • task 2 replicates the given websites (4 websites) exactly      (week 3)

Project 1

  • Prototype Design – Digital Resume/CV

Project 2

  • Final Design - Creating a Digital Resume/CV;

Final Project

  • Single Page Lifestyle Microsite (music entertainment, music, fanpage of an artist (painter, musician), game)
  • needs to be RESPONSIVE (on laptop and mobile)

Final Complication


2. INSTRUCTION



Description

  • 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 Adobe XD or Figma. The UI design prototype will showcase the layout, visual elements, and user interface interactions of your 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

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.


3. Prototype Design – Digital Resume/CV

1. Research

these are the posts I was inspired by to make my resume. Besides the one that I did below I actually made one in A4, but through a friend turns out it needs to be in desktop format, my class did not get this information, so I need to redo it. 
Fig 3.1 Reference, Week 5 (21/05/2024)

Fig 3.2 Reference, Week 5 (21/05/2024)

Fig 3.3 Reference, Week 5 (21/05/2024)

Fig 3.4 Reference, Week 5 (21/05/2024)

The reason I chose these as inspiration is related to my plantation UIUX, I thought it would be cool to make the resume based on the website and tabs overlapping each other.

2. Progress

First I want to decide on the color palate and the typography. I decided on a green and grayish gradient, similar to my own blogger, and more rounded shapes as a foundation to give a calm and relaxed vibe.
Fig 3.5 Progress, Week 6 (28/05/2024)

Fig 3.6 Progress, Week 6 (28/05/2024)

then I arrange the blocks appropriately along with the information I want to fill in. But the blocks still looked messy so I didn't put more text and elements into it until I got it right. 

I added the drop shadow and try to make the layout more coherent and I may have overestimated my creative thinking on how to make a visually pleasing design. I don't like it, there's no clear hierarchy of information and despite the rounded corners, everything still looks too stiff and messy.

it's really hard to get the hang of the tools of Figma and have to make all this from scratch. But it is also my fault for being too ambitious (but this task is going to continue to project 2 and I can't let myself not be ambitious and I'm going to specialize in UI/UX) I got frustrated with this and was reluctant to touch this again.

Fig 3.7 Progress, Week 6 (28/05/2024)

I also don't have information to put into experience and projects. Mr told me to apply for a media position (poster, social media) position in clubs to get experience. Yes, Mr. I understand I'll put myself out there, it is the only way to get a job as a designer after all.

Mr also said that the rounded-edged needs to be the same "roundedness" to have some consistency and level in the experience and projects sections. Even after fixing it according to the feedback, I'm still disappointed with this one especially since I know I can do better if I dedicate more time and a clear mind to this.

Wish I had more time with this to explore and expand more, but it is what it is. I'll try to fix and improve this in Project 2.

3. Final Result

Fig 3.8 Final Result, Week 6 (28/05/2024)

4. Reflection

1. Experience

It's good fun to learn to analyze and make mock-up webs, I do have a little bit of coding background from high school, so it helps when I have a basic understanding of HTML and CSS. But never considered it with the design layout/ making it pretty. 

2. Observation

It's hard when you already have something in mind but don't have enough coding knowledge and skills. Making you compromise your vision with your lack of skill. When you have a good idea you want to implement in your web and it takes 1 hour to make it, it makes you question whether it's worth it to make the web according to the vision. Also in my experience, it's gonna take a long time to get used to the HTML language and it needs continuous practice and exercise to be able to use them effectively.

3. Findings

For me, it feels like my imagination is not vivid enough to base the web on, it's more like a mood board rather than a sketch. So I can't rely on it to compare ideas about what works and what does not and I need to write the code down and see it instead of sketching. Maybe it's because I'm not used to coding and when I'm fluent in it, it becomes easier than sketching.

Comments

Post a Comment

Popular posts from this blog

Information Design - Exercise 1&2

-
Image
03/02/2025 - 11/03/2025  / Week 1 - Week 5 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Information Design  JUMPLINK: Lecture Instruction Exercises Exercise 1: Quantifiable information Exercise 2: L.A.T.C.H infographic poster Feedback Reflection 1. LECTURE Week 1: Types of Infographics Infographics help people understand information faster by using visuals and text together. They make information clearer, more interesting, and easier to remember. There are different types of infographics, each with its own purpose: List Infographics – Organize information in a list format with pictures or icons, making it more visually appealing and easier to scan. Fig 1.1 List Infographics, Week 1 (04/02/2025) Statistical Infographics – Use charts, graphs, and numbers to present data in a way that is easy to understand at a glance. Fig 1.2 Statistical Infographics , Week 1 (04/02/2025) How-to Infographics – Show step-by-step guides using...
Read more

Advanced Interactive Design - Final Project

-
Image
19.11.2024 - 24.12.2024   / week 9 - week 14 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Advanced Interactive Design  JUMPLINK: Lecture Instruction Task 3 - Completed Thematic Interactive Website   Progress Final Submission Feedback Reflection 1. LECTURE 2. INSTRUCTION 3. Task 3 - Completed Thematic Interactive Website 1. Progress Loading screen This one is not too hard. I did have to change the middle white circle to the bottom so the anchor is on the bottom, allowing me to change the shape up and down, while the bottom bar stays in place. Then, it just took spacing in different keyframes and adding a shape tween for it. I also added the fade-in and fade-out for them. Fig 1.1  Loading Screen Animation , Week 13 (17/12/2024) Fig 1.2  Loading Screen Fade Out , Week 13 (17/12/2024) Video The beginning process of the web was, of course, putting the video in first and following the tutorial on YouTube, which worked just fi...
Read more

Advanced Interactive Design - Task 2

-
Image
22.9.2024 - 12.11.2024   / week 5 - week 8 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Advanced Interactive Design  JUMPLINK: Lecture Week 5  Week 6 Week 7 Week 9 Instruction Task 2 -  Interaction Design Planning and Prototype   Research Progress Finalizing Layout Planning Interactions Animating Final Submission Feedback Reflection 1. LECTURE Week 5-6 - F2F  (22-29 Oct, 2024) 1.  Button Animation Fig 1.1  Button Animation Progress , Week 5 (22/10/2024) Fig 1.2  Button Animation Result , Week 5 (22/10/2024) Week 7 - F2F  (5 Nov, 2024) 1.  Screen and Button Animation Fig 1.3 Screen and  Button Animation Progres , Week 7 (5/11/2024) Fig 1.4 Screen and  Button Animation Result , Week 7 (5/11/2024) Week 9 - F2F  (19 Nov, 2024) 1.  Transition Animation Fig 1.5 Transition  Animation Progress , Week 9 (19/11/2024) Fig 1.6  Transition  Animation Result , Week 9 (1...
Read more