- Steps for organizing how an App product should function
- 5 FREE downloadable kickstarter templates for App products
- List of Prototyping apps and tools with rating scale
- To easily preview your work, you must first download the XD app to your phone. Save your work making sure the “Save to Cloud Documents” option is selected. Then select “Share for Review” under the Share Button in the right-hand corner of the menu bar. Copy the URL address that is created for you and email it to yourself. On your phone open the XD app to view the prototype. To see any changes you make to the design you must click the “update” button from “Share for Review”.
- Animate prototypes in XD
- Fixed Elements in XD
- To make specific objects you wish to remain visible or fixed in position and not scroll, select the element, or grouped elements, while in the prototype mode and click the “fix position when scrolling” box.
- Scrollable Artboards in XD
- To access the scrollable option, click the NAME of the artboard in Design mode
- Expand the artboard/window to accommodate all of the height of the image you wish to scroll. Expand or stretch it down until you see the little blue = sign on the bottom left of the window
- Change the option to VERTICAL in the scrollable options box from the Prototype mode
Prototyping tool for just about anything, free trial version available
Before you begin it is important to fully understand the following concepts:
An App is a tool. Like a hammer or screwdriver if used properly, it should do one job (and one job only) very well. As the designer you decide what that one job should be.
An App is also a form of UX design. This means that you, the designer, must try to anticipate or guess all the possible ways that a person will select the choices you present to them—in what order/sequence, how often, for what purpose, etc.
A successful App is the result of the collaboration between the design team and the Engineering team. The engineers focus on the “back end”of the project—making things work efficiently, seamlessly, economically, without technical glitches, etc. The designers focus on the “front end” work—the look, the user experience, the target audience, the client needs, staying on brand, etc. This assignment is meant to show your ability to apply your design knowledge and skill to the front end requirements of an app. Typical workflow would require approval of the designer’s prototype which would then be passed along to the engineers to make it a functioning reality on the internet.
PROCESS
- Decide what or who the app will be used for
- Sketch Your App Idea
Every app starts with an idea. What do you want your App to do? What is it’s purpose?
Sketch out your app idea with pencil and paper. The goal is to make the idea tangible. You define how your app works and what its features are, before you start developing the app. It’s as simple as that! What is a logical sequence? What are questions a user would have and how would they use the App to get answers to those questions? What will that look like? Start sketching, make a list of features, and see if the idea comes to life on paper.
In this case, sketching means to create a design “tree” with the primary purpose of diagraming the links between pages or other graphic elements (images, icons, buttons, graphics, etc.) A comparison could be a storyboard to a finished animation, a maquette to a final sculpture or a dummy to a finished book.
Separate the features of the app into two groups: Must Haves and Nice To Haves. The Must Haves are features that your app can’t do without to be able to serve the basic purpose of the App and the Nice To Haves are features that are great but not crucial.
When you make an app, you want the app to be as lean and mean as possible. That’s called a Minimum Viable Product (MVP), and it’s the first, simplest version of your app. When you focus on what matters most, you speed up your app development process and make your app more resilient against setbacks.
A few questions you can ask yourself:
- What features can you leave out?
- Which feature is a unique selling point or money-maker?
- Are there any features that make your app bloated, or slow building it down?
A good app does one thing well. Some examples:
- A note-taking app like Bear is superb for taking notes
- A transportation app like Uber helps people go from A to B – the other features are secondary
- A game app like Two Dots is great at entertaining people – it shouldn’t try to do more
It’s tempting to make an app with a lot of features. This only obscures the one thing your app is good at. Make sure your app does one thing only, and does it well.
Don’t overestimate the importance of ideas. Your app’s success is determined by “idea x execution”. Making an app that works well is more important than finding an idea that is perfect.
To completely develop working apps you will need to do some market research. In this assignment where we are simply making a prototype, you will not to do the same amount of research. You will, however need to look generally at what apps for competing or similar products/services/companies look like and how they function. Then ask yourself what is missing from them? and How can yours be better?
Market research is often skipped by app developers, even though it’s an important part of making an app. You can save yourself time and effort down the line by doing research up front.
Before you make an app, you want to know if your app idea is viable. You’re asking questions like:
- What are alternative apps and competitors in the marketplace?
- What do potential customers want? What are their needs and desires?
- How much should I charge for my app? What’s a good business model?
Doing market research before you make your app can save you from making a lot of mistakes early on. You validate assumptions and assess the needs of potential customers.
Two types of market research are especially helpful:
- Finding out what mistakes your competitors are making
- Finding out if people are looking for an app like yours
Try using Google Trends and Keyword Planner to measure demand for a simple to-do list app.
Finding insights also serves another purpose. You want to walk in the shoes of your customers, so to speak. Instead of assessing needs and desires while sitting safely in front of your computer, you want to get out there and talk to people.
Who is your app for? What are they like? How does your app impact a particular problem that users are struggling with? How are they currently solving that problem? What change do you, with your app, seek to make?
Based on your research you can clearly define the problem your app solves, and who you solve that problem for. You use these insights to make an app that serves its users better.
Sometimes you just want to make an app for yourself. And that’s alright! You can do research for the fun of it, and to practice your craft, and make your app however you see fit. Don’t underestimate the importance of preparation, research and insight, though!
Create a Mockup/Prototype Of Your App
It’s best to make mockups before you start to build the app. A mockup is a rough sketch of your app’s layout, user interfaces (UIs) and flow. In this assignment we will be using Adobe XD to create a working prototype.
Mockups don’t include:
- Fine-grained UI elements
- Exact positioning of UI elements
- Complex color schemes and effects
A mockup shows you what an app looks like, without distracting you with unnecessary details. It’s a functional as well as an aesthetic approach to your app’s design.
A mockup should also describe the flow and interactions of your app. What happens when you tap on that button? How do you get from screen A to screen B? What is navigation flow of your app?
When you’re making an app for a client or employer, creating a mockup is a good opportunity to show them the end result before building the app. You can guide them through the UI, by using the mockups, and help them see and imagine the complete app. I always use mockups in sales meetingswith clients.
It’s also a great idea to create a functional-technical design next to your mockup. You describe what the app does in simple words. You can create annotations in your mockup software, or just create a text document that explains how the app works.
Don’t skimp on making mockups. A mockup helps you fix basic UI/UX problems early on, and it’s a great way to enroll your team, client or employer in your app project.
Make Your App’s Design or graphic look
The design for your app. Your app’s design can include pixel-perfect visual details, graphic effects, image assets, and sometimes even animations and motion design.
Always be aware of copyright and licensing when using someone else’s original work. Copyright law is real and universal. You can’t just copy and use stuff you find on the internet. When a usage license isn’t explicitly provided, assume that you can’t use the work in your own projects.
The end result (or “deliverable”) you aim for, is a set of images and assets you can import into Xcode. You use the graphics files as the basis for your work in Interface Builder or with SwiftUI (see below).
You can’t import a Sketch or Photoshop design directly, but you can copy and paste. In addition you could recreate it in Interface Builder and/or Xcode to build your app. You lay out views in Interface Builder, import image assets, and set up Auto Layout constraints, to bring the UI of your app to life.
Don’t forget to check out the Human Interface Guidelines. They are exceptionally helpful for understanding how iOS design works, so you can take advantage of the design of iOS when making your app. In fact, Apple’s documentation is a treasure trove of insights into app development..
As an app developer you want to create a connection between you and a prospect customer, to let a conversation happen. Such a conversation can then lead to a user trying out your app or becoming a customer.
Your app’s page needs to include the following components:
- A clear headline at the top of the page
- A brief introductory paragraph or explainer video
- An app screenshot or iPhone mockup
- A call to action, i.e. to sign up or install the app
- A breakdown of app features and benefits
- A story about the app’s creators, or an “About Us” section
You can play around with the exact order of these elements. It’s best to put the headline and call to action above the “fold” of the page. But it’s not uncommon to put a story or “About Us” section high up on the page, to make that personal connection with people.
The page serves as a central point that you can lead people to, if they are interested in learning more about your app. And when you’re still building your app, you don’t have an app page in the App Store yet, so you’ll need something else to attract potential customers.
Make a list of potential improvements, and fix the items in these two categories:
- Fix things that are obvious mistakes
- Fix things that are easy to fix
Don’t make it too complicated, it’s not rocket science! Improve the things that need to be improved, and quickly launch a new version of your app.
The key to working with user feedback is experimenting with actions and results. No one knows what works best until you’ve tested it, and measured the results. The quicker your turn-around time on experiments and their improvements, the faster your app improves.
5. Sharing Your Design
When you are ready to share your design with other designers or for feedback/review, do the following:
- Choose SHARE, from the top menu
- On the right hand side, decide who will have priviliges (Normally pick the “Anyone with the Link” option)
- Generate a link
- Copy the Embed Code Link by clicking the </> icon
- Click the person+ icon that is just to the right of the Link Access option
- Type in the email address of the person you wish to share your design.
(my email address is: bdeboer@pacific.edu)