Difference between revisions of "Professional development/Design thinking/Software prototyping and tools"

From CEED Wiki
Jump to navigation Jump to search
m
Line 64: Line 64:
  
 
===Tools===
 
===Tools===
Here is a list of tools for <u>UI and UX prototyping</u> that could be useful and are very easy to use: https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9 (Figma, Balsamiq and Adobe XD are suggested which are free or free for students). Ensure that when you design your UI for patients having accessibility needs, you take into considerations the colours you use. [http://colorsafe.co/ This website] based on the Web Content Accessibility Guidelines (WCAG) is a ''great'' resource that was suggested by a client who works in accessibility! [http://www.sussex.ac.uk/tel/resource/tel_website/accessiblecontrast/?q=FFFFFF~003b49~1d4289~94a596~e56db1~d3273e~00bfb2~d6d2c4~ffc845~dc582a~41b6e6~1b365d~be84a3~5d3754~7da1c4~f2c75c~d0d3d4~007a78~000000 This University of Sussex page] with a few pre-loaded colours can be a very useful tool for this as well. Notice how the [http://www.sussex.ac.uk/tel/resource/tel_website/accessiblecontrast/?q=8f001a~ffffff uOttawa official backdrop colour scores well with white text].
+
Here is a list of tools for <u>UI and UX prototyping</u> that could be useful and are very easy to use: https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9 (Figma, Balsamiq and Adobe XD are suggested which are free or free for students).  
 +
 
 +
Ensure that when you design your UI for clients having <u>accessibility needs</u>, you take into considerations the colours you use.  
 +
 
 +
* [http://colorsafe.co/ This website] based on the Web Content Accessibility Guidelines (WCAG) is a ''great'' resource that was suggested by a client who works in accessibility!  
 +
* [https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/ This website] also has great infographics for dos and don'ts on designing for different accessibility groups.
 +
* [http://www.sussex.ac.uk/tel/resource/tel_website/accessiblecontrast/?q=FFFFFF~003b49~1d4289~94a596~e56db1~d3273e~00bfb2~d6d2c4~ffc845~dc582a~41b6e6~1b365d~be84a3~5d3754~7da1c4~f2c75c~d0d3d4~007a78~000000 This University of Sussex page] with a few pre-loaded colours can be a very useful tool for this as well. Notice how the [http://www.sussex.ac.uk/tel/resource/tel_website/accessiblecontrast/?q=8f001a~ffffff uOttawa official backdrop colour scores well with white text].
  
 
Here is a list of platforms that require <u>minimal coding experience</u> to use:
 
Here is a list of platforms that require <u>minimal coding experience</u> to use:

Revision as of 20:07, 18 May 2021

Many of us (TAs/PMs and students) struggle with the concept of testing software or just how to prototype software. It is less concrete than physical prototyping and is harder to wrap your head around. You might say that you can’t test or can’t prototype something because it is software...think again!

We’ll compare it to a typical mechanical design cycle (not considering client involvement):

Design step Mechanical Software
Conceptual designs Hand/computer drawn sketches Hand/computer drawn sketches
Preliminary design Rough CAD assemblies Wireframe designs/flowchart
Detailed design Fully defined CAD High fidelity mockup/Initial coded software
Simulation/testing CAD force/fluid simulations UX simulation
Prototype 1 Manufactured part(s) Functional coded software
Refined testing Testing under load against metrics Sub functions to test behavior of specific features against metrics

In our GNG1103/2101 classes the cycle looks a little differently where you might have:

Design step Mechanical Software
Conceptual designs Hand drawn sketches Hand drawn sketches
Detailed design Detailed sketches of sub-assemblies with some analysis Wireframe designs/flowchart
Prototype 1 Cardboard prototype High fidelity mockup/Initial coded software
Simulation/testing Functional testing of prototype against metrics UX simulation against metrics
Prototype 2/3 Assembled and functional prototype Functional software

Sharing

When working in a team you will definitely want to share your files to work on things together. In mechanical GrabCad Workbench is a popular tool but in software GitHub is definitely an industry standard.

Here is an introduction to GitHub https://guides.github.com/activities/hello-world/

Tools

Here is a list of tools for UI and UX prototyping that could be useful and are very easy to use: https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9 (Figma, Balsamiq and Adobe XD are suggested which are free or free for students).

Ensure that when you design your UI for clients having accessibility needs, you take into considerations the colours you use.

Here is a list of platforms that require minimal coding experience to use:

Here is a list of useful websites with code syntax and libraries which can help you get started:

  • W3 Schools (HTML, CSS, JavaScript, SQL, PHP and more!)

Here is a list of other platforms for building apps or websites which you would need more coding experience to use: