Line 31: |
Line 31: |
| |Sub functions to test behavior of specific features against metrics | | |Sub functions to test behavior of specific features against metrics |
| |} | | |} |
− | Here is a list of tools for software prototyping that could be useful: https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9
| |
− |
| |
| In our GNG1103/2101 classes the cycle looks a little differently where you might have: | | In our GNG1103/2101 classes the cycle looks a little differently where you might have: |
| {| class="wikitable" | | {| class="wikitable" |
Line 59: |
Line 57: |
| |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=== |
| When working in a team you will definitely want to share your files to work on things together. In mechanical [https://grabcad.com/workbench GrabCad Workbench] is a popular tool but in software [https://github.com/ GitHub] is definitely an industry standard. | | When working in a team you will definitely want to share your files to work on things together. In mechanical [https://grabcad.com/workbench GrabCad Workbench] is a popular tool but in software [https://github.com/ GitHub] is definitely an industry standard. |
| | | |
| 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=== |
| + | 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: |
| + | |
| + | *[https://appinventor.mit.edu/ MIT app inventor] (android apps only) |
| + | *[https://thunkable.com/#/ Thunkable] (android and iOS apps) |
| + | *[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: |
| + | |
| + | *[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 |
| + | |
| + | * |