Week 10

 PROJECT PROGRESS | 08-10 March 2021


This week, I have done some research on types of the prototype before I started doing the prototype. Website prototypes are often used to gather feedback from the user in the early stage of the project, before going into the final development. Website prototype can be anything from a paper sketch to a clickable prototype. People usually use an interactive prototype to allows users to navigate from page to page and for functionality use such as a drop-down menu. The advantages of website prototyping are that it allows the stakeholders to see what the final product would look like in the early stage. Website prototype would normally go through a few rounds of usability testing where it would be constantly refined until the project is confirmed and can progress to the next step of the development.

Types of the prototype:
Low-Fidelity user prototype
-  Interactive test workflow
- Simulates process to identify usability issues
- Interactive wireframe
(paper prototype, digital prototype, and whiteboard prototype)

High-Fidelity user prototype
- Realistic, work simulation
- Communication propose the product 
- Used in defensive user testing, to learn if user have any problem in using the product 
(Computer-based prototype, and usually allows realistic (mouse-keyboard) user interactions)
(The 4 different types of product prototypes, 2021)

Low-fidelity prototype 
For the first prototype, I would be working on a low-fidelity prototype using Adobe XD to create an interactive wireframe. While working on the website prototype there are things that are needed to be careful of, the flexibility layout of the website and also the type system. I would need to apply the type system to my wireframe to help present my design and content clearly and efficiently. 

Type System
This is an example of a type scale that uses typefaces for all headlines, subtitles, captions, and body. It is to create a cohesive typography experience. 


(Material Design, 2021)



Wireframe







When I was working on the wireframe I noticed that I have trouble learning how to create a hover effect in XD. In the end, I manage to create the effects step by steps. 


Video on how I create the hover effects:




Linking wireframe 
While I was linking the wireframe, I noticed that there are lots of time I would miss out on some parts that I didn't manage to link. I would need some time to link and recheck the overall link so that there is no error in it. 

Pages to link:
- Homepage
- Colourblind page x3
- Colour palette page x3
- VR game info page 
- VR game page
- Contact page

Homepage linking

Colourblind page linking

Colourblind page 2 linking

VR Game linking


Reference
Reforge.com. 2021. The 4 different types of product prototypes. [online] Available at: <https://www.reforge.com/brief/the-4-different-types-of-product-prototypes#yWytQaUGrJPsuoFGflGFPw> [Accessed 19 March 2021].

Experience UX. 2021. What is a website prototype | Experience UX. [online] Available at: <https://www.experienceux.co.uk/faqs/what-is-a-website-prototype/> [Accessed 19 March 2021].

Material Design. 2021. Material Design. [online] Available at: <https://material.io/design/typography/the-type-system.html#type-scale> [Accessed 19 March 2021].

Comments

Post a Comment

Popular posts from this blog

Week 17

Image
  PROJECT PROGRESS   | 26-28 April 2021 This week, I had complete prototype 02 and also started to do the presentation slides. After that, I have also completed the project prototype documentation. There, I have listed out what I have learned throughout the prototype that I had created.  Project Prototype Documentation I have also done the documentation of the prototype, the documentation is for documenting the prototype process that I had done. This, I had also documented the things that I learned from the prototype that I created.  3029MAPA CW1 Prototype Documentation by ABBY LIEW MAY XING on Scribd Presentation Slide Presentation slides that I had prepared. Final Presentation Slides_ABBY LIEW_002T4120 by ABBY LIEW MAY XING on Scribd
Read more

Week 14

Image
  PROJECT PROGRESS   | 05-07 April 2021 This week, I would be continuing working on the VR Game and also sketches of the character storyboard. In the progress of building the food festival, I have noticed that the environment is a bit empty. Therefore, I have started placing tree from the free asset store. It is to make the environment closer to nature. The food festival will be held in a park where people from all around the world would enjoy a sunny day with a clean environment. Why is it a park? It is because the park has lots of tree and grass surrounding the environment and when in the colour blind world the colour of green and red would appear as yellow and blue. This would allow the players to experience what it looks like in a world without green and red.   VR Working Progress Image 01 Image 02 Image 03 To solve the lighting on the right of the food stalls, I have decided to lower down the wall and also work on the entry of the food festival.  Image 04 ...
Read more

Week 16

Image
   PROJECT PROGRESS   | 19-21 April 2021 This week, I will be working on the VR Game progress, high fidelity prototype 01, high fidelity prototype 02, character bubble speech and button design. I have researched the button design before started on designing the button. Moving on, I have also done some experimenting on the bubble speech to let the audience have the mood to play the game. To add the character story inside, I have done some character animation at the beginning of the VR Game to create excitement for the audience.  VR Working Progress Character Button / Speech bubble  Game Button Research by ABBY LIEW MAY XING on Scribd High Fidelity Prototype 01 High Fidelity Prototype 02                   
Read more