INFO 200: Intellectual Foundations in Informatics UX Tools, Resources and Readings

Hey There,

Now that you have learnt more about User Experience design in lecture and completed your rapid prototyping lab, it is time to start ideating and design your information solution for your final project. Below we have compiled together a list of UX tools, resources and readings to help you give you a kickstart.

All the best !!!

Ux Tools

After we create low fidelity paper prototypes, we use digital UX tools to make high fidelity prototypes which will act as true representation of what the conceptualized solution will look like.

Here are some UX tools we think will really help you with creating your first high fidelity prototype. There are many tools which exist, so do not feel constrained to exploring the one’s mentioned below. To read an entire list of UX tools which exist you can visit: https://uxtools.co/blog/all-the-ux-prototyping-tools-ever

Figma | Figma.Com

Figma is the first collaborative interface design tool based in the browser, making it easier for teams to create software. Never upload, download, or worry about versions again.

• Free for 2 collaborators

• Browser Based / Windows / Mac

• Figma Video Tutorials: https://www.youtube.com/watch?v=RFi7wQHUP0c&list=PLXDU_eVOJTx4HJKh8tQkQRtIe5YlP5smB

InVision | invisionapp.Com

inVision is a professional prototyping, collaboration & workflow platform which allows designers to convert their designs into interactive prototypes which they can showcase on their devices.

• Free for Education

• Browser Based / Windows / Mac

• inVision Video Tutotrials: https://www.youtube.com/watch?v=qpTNy-hu3pg&list=PLeWHfyz6lrQXHKy01OlALt3xZRZCPi89V

Adobe Experience Design | adobe.Com/products/xd.Html

Adobe XD, is an all-in-one UX/UI solution for designing websites, mobile apps, and more. With smooth, powerful performance, it's easy to deliver experiences that work and feel as good as they look on any screen.

• Free Trial of 7 days | Monthly Paid Education Plan available, approx $10 / month

• Runs on both Mac and Windows

• Adobe XD Video Tutorials: https://helpx.adobe.com/xd/tutorials.html

Sketch

Sketch is a robust digital design toolkit which is used in the industry for UX projects.

• Educational Pricing Available: Approx $50

• Only Mac

• Sketch Video Tutorials: switchtosketchapp.com | http://video.sketchtalk.io/

Software for creating high fidelity interactive animated prototypes

If you really like prototyping and wish to explore the realm of creating really cool interactive prototypes do check out:

• Framer: it allows you to code out your interactions and animations

• Principle: a drag and drop software for creating complex animated interactions

• Flinto: a simple easy to learn software which helps you create semi complex interactions

Mockuuups Studio | https://mockuuups.studio

Mockuuups is a free software which helps you put your screens onto devices being used in different locations to help you create images which represent how the app will be used and look in the real world.

• Partially Free

• Mac and Windows

• Similar Tools:

  • Mockuphone.com

  • Mockupsjar.com

  • http://mockdrop.io/

  • http://magicmockups.com/

UX Resources

UX Assets

• Resourcecards.com: find all types of free resources you will need as a beginner designer

• http://facebook.design/toolsandresources/

Free Photos

• Unsplash.com : free high quality HD photos which will make your mockups look amazing.

• https://madewith.unsplash.com/

• https://www.pexels.com/ : free photos to use similar to unsplash

• https://deathtothestockphoto.com/ : a newsletter which delivers HD photos to your email

• Uifaces.com: profile pictures of people who have explicitly given their permission for their photos to be used in mockups

• https://www.splitshire.com/

We have put together a few folders of commonly required photos for UX design mockups:

• Faces / Humans / Profile Photos

• Nature

• Places

• Food

• Cities

• College

• Activities

Free Icons

• Icons8.com: A downloadable software with an extensive icon library for iOS and Android

• https://iconstore.co/

• https://www.swifticons.com/freebie-v3

• https://illustrio.com/?ref=producthunt

Great Colors

• http://www.flatuicolorpicker.com/category/green

• https://www.webdesignrankings.com/resources/lolcolors/

• https://material.io/color/#!/?view.left=0&view.right=0 : Google’s color tool which helps ensure you make amazing color combinations on which text is legible and easy to read

Free Fonts

• Fonts.google.com

• https://www.fontsquirrel.com/

Figma and Sketch Assets:

• Sketchappsources.com - a great library of resources you can use with Figma and Sketch

• https://www.xdguru.com/free-xd-ui-kits/

• https://ui8.net/categories/freebies

Adobe XD Assets:

• freebiesupply.com/free-adobe-xd/

We have put together some commonly required design assets which you can checkout here:

• Adobe XD UI Kits

• Sketch and Figma Kits

UI Heuristics and Patterns

• ui-patterns.com/patterns

• Mobile-patterns.com

• https://pttrns.com/

• http://mobiledesign.com/

• Goodui.org

• material.io/guidelines/ : Android Material Design Guidelines

• https://developer.apple.com/ios/human-interface-guidelines/ : iOS Design Guidelines

UX Project CheckLists

• https://uxchecklist.github.io/

• https://uxdesign.cc/wireframes-flows-personas-and-beautifully-crafted-ux-deliverables-for-your-inspiration-bb7a8d99af62

• https://codeburst.io/the-front-end-checklist-8b2292fdda44

Shortcut Keys

• http://shortcuts.design/

UX Readings

These are completely optional and you can read them for reference and exploration purposes.

Books:

• https://uxtools.co/library : An extensive library of every UX book you will ever need

• Don’t Make Me Think : The best starter book for User Interface designers

• Design of Everyday Things : The best starter book for User Experience designers

• Sketching User Experiences

• A Project Guide to UX Design

• Hooked: How to Build Habit-Forming Design

• Designing for Emotions

• Design for Real Life

• Design is a Job