How I Went from App Idea to App
You’ve got an app idea. What’s next? In this tutorial, I’ll walk you through the steps I took to go from app idea to actual app. We’ll discuss sketching, making mockups, design decisions, and much more.
The goal of this tutorial is to give you some hands-on steps you can put to use in your own app projects, and to help you discover what goes into building a real-world app.
We’ll spend plenty of time on bridging the gap between idea and app development, because much has been said about those things – but not about what goes in between…
Ready? Let’s go.
- Got An App Idea. Now What?
- Sketch It Out
- What Everyone Forgets
- Build Mockups Of Your App
- Make Design Decisions
- Further Reading
This is an article about my app Crest. In the series, I show you how I created this app from scratch. I’ll guide you through the tools I used, the decisions I took, the mistakes I made, and the insights I found. » See all articles
Got An App Idea. Now What?
The Crest app bridges the gap between long term goals and daily tasks. If you’ve got a goal you want to achieve, what steps do you need to take today to get there? Crest helps you answer that question.
In my latest article about Crest, my goal planning and journaling app, I’ve explained how I came up with the ideas for Crest. The first ideas were sparked by a Hacker News thread, that discussed how people plan their long term goals. You can read all about that ideation phase here, and how it lead to a tangible app idea, that solves a problem.
The next step is… what, exactly? How do you get from an initial idea to an actual app? That’s what we’re going to discuss in this tutorial.
Sketch It Out
You’ve got an app idea. The next step is sketching it out. After some of the ideas for Crest had crystalized, I took a pen and paper, and started sketching. Here are some of those initial sketches:
When I’m sketching, I try to keep a wide focus. I think about usability, product design, technical consequences, graphics and colors, and even about how to generate revenue with an app. All parts of an app affect each other, and it’s important to strike a balance.
I also make lists. I make lists of everything: features, groceries, colors, design approaches, things I mustn’t forget, UI screens, potential app names, promotion ideas – anything, really. Lists help me put my thoughts in order, and it’s a great way to keep track of stuff you come up with.
The trick to making good sketches – as with anything – is to make a lot of bad sketches first. Eventually the really great sketches will come out, all on their own.
Pick up a pen and paper, and get to work. Sketching helps you organize your thoughts and ideas, and it’s a great way to make something. Don’t spend your working hours inside your own head, but produce something on paper.
A good way to start is with a rectangle, about the size of an iPhone. Fill it with User Interface elements, like buttons, text labels, and icons. Continue working until you’ve got something that starts to look like an iPhone app. Keep sketching until you run out of ideas.
Pro tip: Don’t edit your work during this sketching phase. This kills your productivity, because you get focused on details. Keep an open mind, and if you don’t like what you made, just make something else. Don’t get into the nitty-gritty yet. If it helps, use a bigger piece of paper and a bigger pen. It’s impossible to get detailed with a fat Sharpie.
What Everyone Forgets
The trick of building something beautiful is to build a lot, and then to discard 99%. I find beauty in essentialism — in keeping what’s absolutely needed.
Back when I studied Human Computer Interaction, and interaction design, I worked with a design discipline called Contextual Design. The core of it is to go where your users go, to map out their contexts, and then to consolidate your findings.
I’ve always found it hard to “consolidate”. I mean, what does that even mean? It’s such a vague concept. “Tell me what to do!” I thought. So, let’s concretize! Bear with me – this is a lot of fun.
Consolidation means to “make solid or stronger”. The word “solid” is literally written within the word “consolidation”. The prefix -con, as found in construct and connect, means “with” or “together”. With a little bit of imagination, we see that consolidation can mean to make something solid, stronger, by putting things together.
Now, that we can do!
I’m taking my sketches, notes and ideas, and I start to put them together. I design the flow of the app; which screen follows which. I remove a lot of ideas, such as features that aren’t necessary. I use the app’s purpose for that — does an idea or feature or UI serve that goal? If not, can I remove it? This makes the final idea stronger and more pure.
The final sketch of the Crest app revolves around 3 central User Interfaces:
A core principle of Crest are goals, milestones and projects. They are consolidated into the Goals UI. The Today UI serves as the backdrop for today’s tasks, that are derived from your goals, milestones and projects — another core principle. And the third pillar, the Review UI, will help you look back on what you’ve accomplished.
Pro tip: Don’t skimp on the consolidation step. It makes your ideas so much stronger, and it gives you something to fall back on. Whenever you’re lost in the design or development process, you’ve got a solid, strong foundation to refer back to.
Build Mockups Of Your App
Now that I’ve got some consolidated, sketched User Interfaces (UIs), it’s time to build mockups. A mockup is essentially (another) rough sketch of an app’s UI, except it’s digital, and easy to transform and made interactive. Mockups are a perfect medium between paper sketch and pixel-perfect graphic design.
Here’s an example:
The cool thing about having already consolidated my sketches, is that building mockups is really easy. I don’t have to futz around with button and text label positions, I already know where everything goes. I replicate what I have on paper in Balsamiq Mockups (see screenshot).
Balsamiq Mockups has a graphics library with frequently used UI elements, such as an iPhone outline, an on-screen keyboard, dialogs and buttons. They help me focus on what’s important, as opposed to make the mockup look like an actual app. It doesn’t, and that’s exactly the point. Mockups are meant to look like a five-year-old drew them!
A great feature of Balsamiq is Linking. It’s as powerful as it is simple: it lets you link pages of your mockup to buttons. When you “run” the mockup interactively, you can click a button, and navigate to its respective page in the mockup. This essentially lets you build interactive mockups, which are pretty close to the real thing!
Another thing I do in Balsamiq, after having rebuilt my sketches into an interactive mockup, is adding lots of notes and annotations. It helps to put into words what a particular UI is for, and what it should do. This serves as my memory later on, when I’ve forgotten why I made the mockup like this.
You can also create Symbols in Balsamiq, which is pretty close to what we developers refer to as classes. An asset or UI element can serve as the blueprint for another. For example, you can create a symbol out of the base iPhone UI, and then add variations to it. When you update the symbol, all derived UIs change too. And that saves you from making some repetitive edits!
Pro tip: Build more mockups than you need. When you go through the motions of designing a User Interface, you often automatically develop guiding principles, or a design system. These guides can help you later on, when you want to expand the app with more features. Again, the trick is to make more, and discard, as opposed to getting it 100% right the first time.
Make Design Decisions
Before we call it quits, there are a few design decisions I want to talk about. If you’ve looked closely at the previous screenshots and sketches in this course, you’ve seen that I’ve created a few non-standard User Interface designs and elements. How did I create them?
First, the Goals-Today-Review bar at the top. This one:
I borrowed this idea from Android, and combined it with iOS’s tab bar. What I wanted, is that users can quickly flick back-and-forth between their goals overview, today’s tasks, and recent reviews.
What I ended up designing, is a tab-based set of 3 UIs that you can swipe between. Hopefully, this affordance keeps users focused on the 3 main UIs of the app, and by extension, the balance between their long-term goals and daily tasks.
Another thing I designed purposefully, are the to-do list items, and most importantly, the connected list of goals, milestones and projects. Here’s what that looks like as part of the mockup, and in the final graphics design:
I felt it was important to connect the milestones (gray headers) to the projects (white items) with a line and dots. It’s as if they’re waypoints along a bus route or train track, which is of course analogous to achieving one’s goals.
The last design decision I want to discuss, is to make every text item in the app directly editable. You can edit goals, milestones, projects and tasks directly by tapping on them.
If there’s one thing I hate in apps, it’s edit windows, dialogs or UIs that pop up when you want to change something. Editing should be done in-place, and a text-based UI should transform to accommodate editing.
This perspective on editing also prompted me to eliminate left-to-right navigation as much as possible in the app. You probably know the kind, with UINavigationController et al., allowing users to go deeper into a Detail UI from a List UI, for example.
What I don’t like about those, is that you quickly lose your place in an app. Say you tap a to-do list item to edit it, go into a Edit UI to change the task, and then go back to the to-do list overview. Now, imagine doing that a few times. Are you still focused on your tasks, or are you busy getting around an expansive User Interface?
To that end, I decided to work with these 3 UIs — Goals, Today, Review — and make every other sub-User Interface pop up, as “cards” or so-called pop-over controllers. These popovers must be transient and non-destructive, meaning you can open/close them with one action, and closing them has no permanent effect. You can always get back to the popover, without losing any data.
The bigger question is of course: how can you make these design decisions for your own app project? In my opinion, it comes down to practicing a lot, and making lots of flight hours.
A great start is reading through Apple’s Human Interface Guidelines. A lot of app indie developers don’t do this, but it’s a great way to learn more about iOS’s design. It’s free, well-organized, and perfect to bootstrap your sense of UI/UX design.
I also swear by the following 3 books, which will give you more insight into design, usability, UI/UX and interaction testing, than any other resource ever could.
- Universal Principles Of Design by Lidwell, Holden and Butler
- About Face 3 by Alan Cooper
- Don’t Make Me Think by Steve Krug
Pro tip: Recognizing design, and thinking about it, is addictive. I’m sure you’ve seen some UI at one time, and thought: “What where they thinking!?” Take it upon yourself to improve one such design, in your head, or on paper. It’s a great way to practice! (And to annoy your friends/family/partner…)
There you have it. How I went from idea to mockup to app, vis-à-vis the Crest app. My goal was to walk you through the steps I took, with the idea that it would help you do the same for your own app projects and ideas. I hope I’ve succeeded in doing that — and that you had fun along the way!
Want to learn more? Check out these resources:
Code Swift right in your browser!
Go to the Swift Sandbox