How to Design an App Yourself: 6 Decisions, Not 40 Screens

Most advice about designing an app assumes you are already a designer. Research your users, map the flows, sketch wireframes, move to high fidelity, hand off to engineering. That is a real process and it is the right one for a design team.

It is not an answer for someone who has an app project, a budget, and no design background.

The question underneath is simpler. Can you design your own app, or do you need to pay someone? Both answers are defensible. What follows is what each one costs, and what the design work actually consists of once you remove the parts a system can handle for you.

Here is what is left of the design work once the system takes its share. Six decisions. You can make all of them in an afternoon, and you can change any of them later without redoing the app.

1. What goes in the app

Your sections, and their order. A content decision before it is a design one, and the one that most determines whether the app feels right. Five sections that each earn their place beat fifteen that do not.

Start from what people will open the app to do. Everything else is secondary navigation.

2. How people move through it

A tab bar at the bottom, a side menu, or a mix. This is the single most visible decision on a mobile app, and the one users feel before they notice anything else.

The rule of thumb: a tab bar for three to five destinations people switch between constantly, a menu for everything that gets visited occasionally.

3. What a list looks like

This is the decision that does the most work, and the one people underestimate.

Most of a content app is lists. Article lists, product grids, episode lists, event lists. Choose how a list is presented and you have chosen what most of your app looks like: image on the left or full width, one column or two, title above or below, how much text shows before it cuts.

GoodBarber ships more than 100 pre-built layouts, and you pick one per section. A magazine grid for your features, a compact list for news, a large-image carousel for your homepage. Same content, three different apps depending on what you pick.

4. Color

You choose four colors, not thirty.

A GoodBarber theme defines four semantic color roles, applied consistently everywhere. Semantic means each color has a job rather than a position: one is the color of your actions, another the color of your surfaces. Change the role and every screen that uses it follows.

If picking four colors that work together is exactly the part you were dreading, Genius Palette is an in-house AI trained specifically on readable app color. And if you know exactly what you want, you can override any color individually, down to item-by-item mapping.

5. Type

One typeface, or two if you want headlines to contrast with body text.

You are not choosing sizes. GoodBarber's typography is a system of 18 semantic levels, from display headings down to badges, each calibrated per device for phone, tablet and desktop, with a 1.2 line height. You pick the typeface. The scale is already built.

6. Your icon and your splash screen

The two images no system can decide for you, because they carry your identity rather than your interface.

The icon is the hardest thing in this list, and the one worth spending real time or real money on. It has to work at 60 pixels, next to Instagram, on someone's home screen. Simple shape, few colors, no text, recognizable at a glance.

Everything below is handled by the system, on every screen, without a setting to learn.

Spacing. A gutter system scales by device from a base value: 16px on mobile, 20px on tablet and desktop, with half and double tiers and vertical steps. One configuration produces correct spacing on every form factor.

Typographic hierarchy. The 18 levels keep their relationships to each other whatever typeface you pick.

Readability. Palettes are built with contrast in mind, and every control keeps a comfortable tap area even when the element looks small.

Shapes, shadows, borders and states. Defined once as atoms and reused everywhere, so a button behaves like a button across the whole app.

Consistency between screens. This is the one that separates an app that looks designed from one that looks assembled, and it is also the one a human designer has to maintain by hand. Here it holds by construction.

You design once. One configuration produces three outputs: a native iOS app, a native Android app, and a progressive web app.

What differs between them belongs to the platforms rather than to you. Both stores have their own conventions, and the system respects them. You do not maintain three designs, and you do not choose between an app that looks right on iPhone and one that looks right on Android.

One thing to plan for: adding a feature or changing your design means rebuilding, and that applies to all three outputs, the web app included. It is one action, but it is not instant.