App Design in Stages: Tips for Beginners

What I learned from my first stab at designing a web application from scratch.

First off, I just want to point out that I am not a trained designer. My expertise lies in front end development, and I am interested in getting involved with more UI/UX design.

These are lessons I learned designing my first app that I think could help the hobbyist/beginner save a lot of time and frustration when they’re first starting out.

Find Inspiration.

At first, I was thinking I could design my app from scratch without looking at examples or other applications to find inspiration. I was wrong. This left me staring at a blank canvas with no clue how to get started.

What helped me was taking a look at apps I use on a daily basis as well as researching other applications in similar domains and breaking them down into their individual components. From that, I was able to find enough inspiration to have a good idea of how I wanted the pieces of my application to look and feel.

I also was able to get a feel for layout/navigation/contrast/etc., which I was able to use in my own design. This made things significantly less overwhelming and stressful.

Design in Layers.

One of my biggest obstacles when I first got started was trying to figure out how the hell I am going to turn a blank screen into an interesting and engaging application. There’s so much to think about. From color palette, layout, UX, contrast, accessibility considerations — and the list goes on. All I could think about was the end result and completed project.

One piece of advice. DON’T DO THIS.

I found it extremely helpful to first start with planning out the individual pieces that will make up the application. Forget about layout, color palette, contrast, and all the rest.

Start with a list of components (buttons, text-fields, header, navigation menus, navigation buttons….the list goes on…). At this point, don’t worry about what they’re going to look like, it’s just important to get them down on paper.

After the components are established, write down every view. I used Trello to keep track of each item and also track their progress. This would be your home screen, login/signup screen, and whatever other views that your application requires.

You can also add notes with potential ideas, however, just having a list of items works well.

Component Design.

The next step was to begin actually designing the components. Again, don’t worry too much about layout just yet and don’t even think about the color palette. Just figure out look/feel of the ATOMIC components.

The design of these components may change over time so once you feel you’ve gotten something that’s good enough, move forward with the next piece. The next component you design may alter the one you were previously working on, and eventually, they will all be uniform.

Layout / View Design.

After your atomic components have been designed, choose a starting view and begin working on the layout. Again, don’t think about anything other than layout right now. Just assemble your atom components and worry about things like button placement, text placement, etc.

This may be where you begin to refine your atom components. Once you start implementing them in an actual view, there may be modifications that need to be made. You may begin to realize that you’d like dark header background with light text and a light main content background with dark text.

This leads me to the next step…

Add Contrast.

Even as soon as your first view is in place and the layout is complete, you may have already found a contrast pattern that you want to go with for the application. What I mean by this is which content areas might have light backgrounds and dark text, or vice versa.

Having this in place for one view lays it out for the rest of the application. At this point, designing the other views becomes a breeze, and you’re pretty much at a stage of just assembling components and making each new view cohesive with the rest of the application.

Implement Color Palette.

Once your contrast has been established, it’s easy to plug in your color palette. You now know where you want dark colors, light colors, and in between. At this point, it’s really just plugging in the colors you’ve defined to the components and views that you’ve already built.

If you haven’t determined a color palette, I found Adobe Kuler: Color wheel | Color schemes to be very useful.

Make Your Design as Complete as Possible.

As an experienced front end developer, I know how important it is to have complete designs. The more complete the design, the less time will be spent by the dev teams trying to pick up the pieces.

Having completed designs also helps the UI developers to plan out their architecture, making their code bases much more extensible and easy for new hires to jump in and hit the ground running.

It all starts with design — and the better the design, the better the code base, the less frustrated the devs will be, the less time and money spent on development, and the better the experience for the end user.

Just remember to take things slowly and break them down into layers/stages and do your research. This will speed up the process and produce a better result.