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:38] – rubenhuygensixc2024:tech:wfrontend:ideation [2024/05/27 15:44] (current) – rubenhuygens
Line 3: Line 3:
 Put yourself in the shoes of your target audience. What are their needs? What problems are they facing? This will not only help you think of the appropriate use cases, but it will also help you get on the same page as your teammates. Put yourself in the shoes of your target audience. What are their needs? What problems are they facing? This will not only help you think of the appropriate use cases, but it will also help you get on the same page as your teammates.
  
-==Keep It Simple==+===Keep It Simple===
 Start with a minimum viable product (MVP). Focus on the core features that solve the primary problem. Additional features can be added later if time allows. Start with a minimum viable product (MVP). Focus on the core features that solve the primary problem. Additional features can be added later if time allows.
  
-==Create user stories==+===Create user stories===
 User stories are documented features, described from the perspective of users. They should be formulated in the structure below. User stories are documented features, described from the perspective of users. They should be formulated in the structure below.
  
-==Prioritize==+===Prioritize===
 The most efficient and standardized way to formulate user stories is with the MoSCoW method. MoSCoW stands for //m//ust, //s//hould, //c//ould, //w//ould. Each category reflects a larger importance, such that //must// features should be implemented long before //could// features. The most efficient and standardized way to formulate user stories is with the MoSCoW method. MoSCoW stands for //m//ust, //s//hould, //c//ould, //w//ould. Each category reflects a larger importance, such that //must// features should be implemented long before //could// features.
  
Line 17: Line 17:
 {{:ixc2024:tech:wfrontend:project_planning:user-story-examples-word-doc.png?400|}} {{:ixc2024:tech:wfrontend:project_planning:user-story-examples-word-doc.png?400|}}
  
-==Wireframing== +===Wireframing=== 
-**TL;DR**:\\ +==TL;DR== 
-   - **Start with creating Low-Fidelity Wireframes:** Use pen and paper or simple online tools to sketch basic layouts. Focus on the //flow and structure// rather than details. +Start with creating Low-Fidelity Wireframes. Use pen and paper or simple online tools to sketch basic layouts. Focus on the //flow and structure// rather than details.\\ 
-   - **Iterate Quickly:** Share your wireframes with teammates and get feedback. Make quick adjustments based on input. +Iterate Quickly. Share your wireframes with teammates and get feedback. Make quick adjustments based on input.\\ 
-   - **Move to High-Fidelity Designs:** Once the structure is finalized, use tools like [[https://www.figma.com/|Figma]] or [[https://helpx.adobe.com/support/xd.html|Adobe XD]] to create detailed designs with actual UI components.+Move to High-Fidelity Designs. Once the structure is finalized, use tools like [[https://www.figma.com/|Figma]] or [[https://helpx.adobe.com/support/xd.html|Adobe XD]] to create detailed designs with actual UI components.
  
-See [[ixc2024:tech:wfrontend:project_planning:wireframing|Wireframing]] for more information+==Detailed guide== 
 +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.  
 + 
 +**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?  
 + 
 +{{:ixc2024:team_1:sketch-your-ideas-directly-on-paper.jpg?400|}} 
 +{{:ixc2024:team_1:paper-prototype-26122022.png?400|}} 
 + 
 +**Digital Prototyping** 
 +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]] 
 + 
 +   * 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. 
 + 
 +{{:ixc2024:team_1:final_mockup.png?400|}} 
 + 
 +   * 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.  
 +       * 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.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.14.24.png?400|}} 
 +{{:ixc2024:team_1:untitled_drawing_10_.png?400|}}