Guide to Wireframing

A guide to the use and creation of wireframes

https://www.dropbox.com/s/ne4r6qslwpbnwz3/uxpin_the_guide_to_wireframing.pdf?dl=0

Boxes to Interactions

Suggestions for turning your low-fi wireframes into interactive prototypes

https://www.dropbox.com/s/zwz3weybvcy8671/uxpin_boxes_to_interactions_complete_wireframing_process.pdf?dl=0

Wireframes aren’t dead: they’re just changing
UXPin’s Jerry Cao explains the latest thinking on using wireframes in the UX design process.
http://www.creativebloq.com/web-design/wireframes-arent-dead-theyre-just-changing-51514940

Link to Phone Mockup/Wireframe sheets
https://d17oy1vhnax1f7.cloudfront.net/items/0e113G451y0d221j0G45/iPhone6_iPhone6Plus.pdf

Presentation:

https://docs.google.com/presentation/d/1PBo_b2ywVDulSrvSfm4n9yKnkI9YFcHhLLY5k4jfoyA/edit?usp=sharing

UI vs. UX

If you’ve done any kind of research about software design, you’ve probably heard of the terms “UI” and “UX”. But what separates UI from UX?

https://blog.marvelapp.com/crash-course-ui-design/?utm_source=weekly-newsletter&utm_medium=email&utm_campaign=marvel-newsletter-2017-10-24&utm_term=

Apple Design Site
https://developer.apple.com/design/

Apple Human Interface Guidelines
Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.

https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

Google Material Design
Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

https://material.io/

Material Design Guidelines
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

https://material.io/guidelines/

The link takes you to a zip file on dropbox that allows you to download about 200 MBs of wireframing and Mockup kits

https://www.dropbox.com/s/703vwyqvrsgeygn/Wireframing-UI%20Kits.zip?dl=0

Front-End Developer Handbook 2018

Written by Cody Lindley

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2018.

https://frontendmasters.com/books/front-end-handbook/2018/

10 Great Sites for UI Design Patterns

You don’t want to spend your whole life redesigning the wheel do you? No, neither do we. If you are looking for a design that solves a problem that has been solved inside a different application before; then the template for your wheel is probably already out there. That’s a design pattern to you and me.

https://www.interaction-design.org/literature/article/10-great-sites-for-ui-design-patterns?utm_source=facebook&utm_medium=sm

Remember for Presentation 1 you only have to worry about the content up until the Customer Journey Map

The first presentation is approaching.

The presentation should be a wrap up of all of the research from the initial client meeting to the Customer Journey Map.

Some things to include:

• COMPETITOR RESEARCH  – What are similar products to your own, What are they like, do users like them?, what are some of their weaknesses?
• USER RESEARCH – Who are your likely users? What do they like? What do they do? What are their general attitudes towards products such as yours?
  • Personas – How you show the audience you understand the users and help them understand the users.
  • Scenarios – How you show the audience that you have an idea of how your users (the personas) will use your app, why they use it, and when they use it.
  • Customer Journey Map – Demonstrates to the audience that you have at least begun to map out how a user will actually navigate/use your application. Think of it as a map to what the customer is doing and seeing while trying to use your app. What does the user see?/What do they do? become What does the user see next?/What does the user do next?