Assignment 02: Prototype

 

Jump Link: 

Week 5 

Week 6 

Week 7 

Week 8 

Final Product 

Assignment Brief:

Basically, we need to make a prototype and show animation references if we can't make it right now. We need to record a walkthrough video to present the prototype. 

Week 5

During this week, I have just submitted my task 1. I was looking for comment for my wireframe in class before I start to do prototype. So, I wasn't really doing anything for this task 2 for this week. I focus on other project that needed to be submitted first.

Week 6

Progress

I start on my prototype this week. The first thing I do is to recreate my vision from the wireframe I have done. I continue to use Figma to create my prototype. Besides that, my concept involve a lot of 3D objects and self-drawn drawing. So, I started to create those too. I try to find other way to create 3D object instead of using Blender because I know even though it will be nice, it will take a lot of time to do. I found out that we can create simple 3D object on Adobe Illustrator. So, I go for it. I create some 3D object, start by drawing the outline, then fill in the colour, then apply the 3D effect. I need to adjust the lighting and material properties to make it look like the material I want. It is very simple but I think it should be simple as it is not the only thing that user will focus on. 

Below are some of my 3D object progress:

Besides that, I also create some background, that I think will be suited for some of my pages, especially the patch designer page. 

I use these assets to start my prototype. I did not create any interaction yet which means the button is not working right now. This is just layout design. 

Product Page

Patch Designer

Consultation

I have a short consultation session with Mr. Shamsul. From his comment, my work currently does not have a nice composition. I need to reduce the size of some of the elements. Mr. Shamsul suggested that I can create my own button to make it looks more consistent. He think that I can use back my 3D style to create the button. I also need to use the correct button, arrow is not much of a button. I should create the correct back button. I shouldn't use too much font or texture as this does not make it consistent. For the patch designer, can take out the glowing circle. Overall, I need to do some refinements. 

Week 7

Progress

In this week, I start on my drawings. Drawings always take a lot of time, so it is better to start earlier. I use Adobe Illustrator too to create my drawings. I follow my storyline to create the drawings. I started with outline, then insert colour using gradient mesh, live paint bucket and also fill in colour one by one. It was harder for the first drawing as I was trying to find the correct art direction and create the character. I found some inspiration in Pinterest to help me with it. 

I add in texture and add an effect to ake it looks like a hand-drawn illustration, something like a crayon or colour pencil art. Because the theme is Secret Garden, it is a famous novel, I want to create an illustrated storybook. 

Below are my drawing progress:

Final outcome:

Next, I started to adjust the design from last week progress, which is the Product pages and Patch Designer pages. 

I did reduce the wording size and some of the assets' sizes. I also changes the background (actually the background is done in next week progress but I did not save the previous progress.) I take out the circle, I created my own 3D button and such. 

Comparizon:

Old (left), New (right)

Week 8

Progress

During this week, I continue on creating 3D objects, wordings and refine it. I also created background using my drawing. I use all these assets to continue on my prototype. 

First, I add my previous drawings into the prototype, in order to create the storybook pages. 

I also create the welcoming page and homepage with the assets I have. 

 

At this stage, I start to create interaction and animation, like hovering effect, click button effect, transition and such. 

 

Then, finally, the Our Story page. 

Consultation

I have an online consultation session with Mr. Shamsul in Friday. Again, my composition is still bad because some of my UI elements are too big. I later find out that, this might because of the viewing method. The prototype size (I use web frame in Figma) is not fit with my laptop version, so it always will look smaller as it situated in the middle, I did not let it fit the width of my laptop because it was hard to review the whole layout. But, this is a mistake, I should check it with it fit to the width or height. 

Mr.Shamsul gives me some website references to do visual research, I need to learn more about the composition and the proportion of the elements. I also need to make my UI design more uniform, professional and aesthetically pleasing. 

Unfortunately, it will be too late for me to do any major changes as today is the submission day. I will need to update the prototype and ask for comments during next week. 

Progress

Now, I need to compile the animation references and prepare to record for my walkthrough video. 

Examples of animation:

1. Moving cloud

https://pin.it/5WZXTwN09

2. Bouncy 3D words

https://pin.it/6xVpF2EK1

https://pin.it/5y4bLMfjP

 

3. Brush stroke dissolve effect (transition for storybook page)

https://pin.it/6tfTYZgNa

4. Open envelope animation

https://pin.it/6tfTYZgNa

 

5. Typing word animation

https://pin.it/2v0oo4p68

6. Interactive background

https://pin.it/33BKi3pKh

Final Product

Figma link: 

https://www.figma.com/design/4WFfu1PwAvedJvvuEA7kko/Dododots?node-id=83-66&t=3BHQAu4TpOdhUswo-1

Prototype Link: 

https://www.figma.com/proto/4WFfu1PwAvedJvvuEA7kko/Dododots?node-id=83-67&t=OX6tBXwL8nfEWS9Z-1&scaling=min-zoom&content-scaling=fixed&page-id=83%3A66&starting-point-node-id=83%3A67

Walkthrough Video:

Reflection

In this assignment, I learned a lot not only in website design but also technical skills in using Figma, Adobe Illustrator and such. I have so much more to learn in website design, my next progress will be focusing on learning the composition, UI design and more. I have fun in creating the interactive part in Figma, it gives me inspiration, let me express my creativity through it, I can imagine what kind of interaction outcome when I was creating it. I feel like the UI design is definitely not my strong point, and I was being way too playful with it, which makes the design looks bad. But, I will continue to learn and improve on it. 

Through this assignment, I understand that even though I have great vision for the design, but I don't necessarily have the skills and knowledge to create it. I reflect on my progress a little bit, and I can see that I was way too deep in my vision and did not realize that I was doing a bad job. First, I am not good in drawing, it takes me a lot of time to complete those simple drawing because I am just not familiar with it. Next, I am not familiar with creating 3D object in Illustrator, which cause the result looks unprofessional. What can I do about this? I would try to plan whether to create a whole new set of 3D objects in blender (which is risky, it takes time) or I create minimalist assets using Figma or Illustrator that is easy to create yet can provide good aesthetic results. 

Overall, I need to learn about composition, create new design and I need to do it fast as we are nearing our final project now. I would like to thank Mr. Shamsul and my fellow friends for the guidance too.