MakerRepo Administrators, MakerRepo Staff
756
edits
Changes
Professional development/Design thinking/Software prototyping and tools (view source)
Revision as of 13:48, 10 February 2022
, 13:48, 10 February 2022no edit summary
|Functional software
|Functional software
|}
|}
Here are some metrics that might be useful for you https://www.nngroup.com/articles/usability-metrics/ and some UI tips https://lawsofux.com/.
===Sharing===
===Sharing===
Here is an introduction to GitHub https://guides.github.com/activities/hello-world/
Here is an introduction to GitHub https://guides.github.com/activities/hello-world/
=== 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)
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). [https://app.diagrams.net/ Draw.io] is also useful for <u>flowcharts</u>.
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] and [https://webaim.org/resources/contrastchecker/ 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].
*[https://www.color-blindness.com/coblis-color-blindness-simulator/ This website] allows you to upload a picture and see it though the eyes of someone with color blindness.
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:
* [https://appinventor.mit.edu/ MIT app inventor] (android apps only)
*[https://appinventor.mit.edu/ MIT app inventor] (android apps only)
* [https://thunkable.com/#/ Thunkable] (android and iOS apps)
*[https://thunkable.com/#/ Thunkable] (android and iOS apps)
* [https://www.wix.com/ Wix] (website)
*[https://www.adalo.com/ Adalo] (android and iOS apps, more limited then thunkable)
*[https://www.wix.com/ Wix] (website)
*[https://powerapps.microsoft.com/en-us/ Microsoft Power Apps] (android, iOS and windows)
Here is a list of useful <u>websites with code syntax and libraries</u> which can help you get started:
Here is a list of useful <u>websites with code syntax and libraries</u> which can help you get started:
* [https://www.w3schools.com/ W3 Schools] (HTML, CSS, JavaScript, SQL, PHP and more!)
*[https://www.w3schools.com/ 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 <u>more coding experience</u> to use:
*[https://developer.android.com/studio Android studio]
*[https://developers.google.com/apis-explorer Google API]
===Apple development===
It is more complicated to develop apps for iPhone or Mac then for Android or Windows. You can get an [https://developer.apple.com/programs/ Apple developer account] which allows you to publish to the Apple store or to Test Flight however it costs 99$ USD/year. Publishing to these platforms also entails rigorous testing and must abide by Apple's high standards which does not usually make it a very feasible choice for a semester-long project.
It is recommended to make [https://en.wikipedia.org/wiki/Progressive_web_application progressive web apps](PWA) when developing for Apple devices. These websites are able to be 'installed' on phones as if they were apps and there is a lot of documentation on it. Here are a few resources to get you started:
*What are PWA's: https://www.youtube.com/watch?v=4XT23X0Fjfk
*Codebase for building PWAs:
**[https://angular.io/ Angular] PWA guide- https://angular.io/guide/service-worker-getting-started
**[https://reactjs.org/ React] PWA guide- https://create-react-app.dev/docs/making-a-progressive-web-app/
**[https://nextjs.org/ Next] PWA guide- https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app
**HTML and javascript PWA tutorials
***https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605
***https://dzone.com/articles/how-to-build-a-progressive-web-app-pwa-with-javasc
***https://web.dev/progressive-web-apps/
*One option is AWS (Amazon web services) as the framework for hosting the PWA
**Create an [https://aws.amazon.com/s3/pricing/ S3 bucket] for each project -> free, almost, might cost a couple of cents a month
**[https://aws.amazon.com/route53/pricing/ Route 53] to create the subdomains -> free
**[https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html#domain-register-procedure Domains] -> to buy the domain for the class, might be $15 a year (not necessary for GNG)
**[https://aws.amazon.com/certificate-manager/ Certificates] -> free to get the ssl certificate
**[https://github.com/pricing GIthub] for hosting code and publishing to S3-> Free
*Tools for building PWA's:
**Convert web application to PWA: https://www.creativebloq.com/how-to/build-a-progressive-web-app
**Convert wix site to PWA: https://wappaa.com/wappstore/wix-site-to-app/
**https://techbeacon.com/app-dev-testing/5-best-tools-building-progressive-web-apps-fast
**https://developers.google.com/web/updates/2015/12/getting-started-pwa
**https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
*
*