meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
ixc2024:tech:wfrontend:ideation [2024/05/27 15:40] – rubenhuygensixc2024:tech:wfrontend:ideation [2024/05/27 15:44] (current) – rubenhuygens
Line 24: Line 24:
  
 ==Detailed guide== ==Detailed guide==
- 
-Before jumping into implementation of your solution, you should first brainstorm and design how you would like your solution to look.  
- 
-How would its interface look like? 
- 
-So this part is call **Designing** or **Prototyping**.  
- 
 Prototypes can be of a different level of fidelity - Low, Medium and High.  Prototypes can be of a different level of fidelity - Low, Medium and High. 
 Low meaning that they are very basic and static, High that they are even functional, even clickable and with certain logic in them.  Low meaning that they are very basic and static, High that they are even functional, even clickable and with certain logic in them. 
  
-===Step 1 - Paper prototyping===+**Paper prototyping**
 Start first by drawing sketches on paper. Sit together around the table and put some initial ideas on paper together. Draw interfaces. Draw initial Tab positions and Tab names. Where would pictures be? Where should buttons be?  Start first by drawing sketches on paper. Sit together around the table and put some initial ideas on paper together. Draw interfaces. Draw initial Tab positions and Tab names. Where would pictures be? Where should buttons be? 
  
Line 40: Line 33:
 {{:ixc2024:team_1:paper-prototype-26122022.png?400|}} {{:ixc2024:team_1:paper-prototype-26122022.png?400|}}
  
-===Step 2 - Digital Prototyping=== +**Digital Prototyping** 
-After you are satisfied with how your initial design looks, you can proceed to using one of the online tools for creating digital tools.+After you are satisfied with how your initial design looks, you can proceed to use one of the online tools for creating digital tools. We suggest using [[https://balsamiq.com|Balsamiq]] or [[https://figma.com|Figma]]
  
-We suggest you using one of the following: +   * Balsamiq enables the creation of prototypes of low to medium levels of fidelity. The prototypes still give a sketch feeling and are easy to change and work with.
- +
-==Option 1: Balsamiq (https://balsamiq.com) ==  +
- +
-Balsamiq enables creation of prototypes of low to medium level of fidelity. The prototypes still give sketch feeling and are easy to change and work with.+
  
 {{:ixc2024:team_1:final_mockup.png?400|}} {{:ixc2024:team_1:final_mockup.png?400|}}
  
-==Option 2: Figma (https://figma.com) == +   * Figma enables the creation of prototypes from medium to high levels of fidelity. The power of Figma is that you can even make a clickable prototype. Meaning that you can show the flow of how your application would be working when fully implemented.  
-Figma enables creation of prototypes form medium to high level of fidelity. Power in Figma is that you can even make a clickable prototype. Meaning that you can show the flow of how your application would be working when fully implemented. +       * When you are done with design, you may try creating **Flows**. Flows enable your Figma prototype to become clickable and it lets you showcase how your application would be working when fully implemented.
  
 {{:ixc2024:team_1:screenshot_2024-05-21_at_15.14.02.png?400|}} {{:ixc2024:team_1:screenshot_2024-05-21_at_15.14.02.png?400|}}
 {{:ixc2024:team_1:screenshot_2024-05-21_at_15.14.08.png?400|}} {{:ixc2024:team_1:screenshot_2024-05-21_at_15.14.08.png?400|}}
- 
 {{:ixc2024:team_1:screenshot_2024-05-21_at_15.13.52.png?400|}} {{:ixc2024:team_1:screenshot_2024-05-21_at_15.13.52.png?400|}}
- 
- 
-When you are done with design, you may try creating **Flows**. Flows enable your Figma prototype to become clickable and it lets you showcase how your application would be working when fully implemented. 
- 
 {{:ixc2024:team_1:screenshot_2024-05-21_at_15.14.24.png?400|}} {{:ixc2024:team_1:screenshot_2024-05-21_at_15.14.24.png?400|}}
- 
 {{:ixc2024:team_1:untitled_drawing_10_.png?400|}} {{:ixc2024:team_1:untitled_drawing_10_.png?400|}}