Designing Atop Ballmer Peak

Baller Peak is defined by Urban Dictionary as “The theory that computer programmers obtain quasi-magical, superhuman coding ability when they have a blood alcohol concentration percentage between 0.129% and 0.138%.” The origins of Baller Peak are unclear but it’s safe to say they have existed since the dot com boom of the 2000s. My initial ascent to this legendary crescent was the summer before my senior year of college. I had been designing an app icon butt o no avail. After hours of getting nowhere, I took a breather, cracked open a bottle of beer and sat back down at my computer. By the time the bottle was empty I was in a state of flow. I grabbed another sample of that sweet elixir from the fridge and kept on rolling. The result was truly astonishing. “Look what I have created” I said to myself. It was a masterpiece – at least for a programmer, in actuality it was probably on par with the doodle’s of an artistic prepubescent. Nonetheless, the fables were true. Ballmer’s Peak does exist.

I’ve visited Ballmer’s Peak many times since that day. I practically studied abroad there in college. But times have changed and now I only visit it from time to time, like catching up with an old childhood friend or Vegas. As a result, I was forced to do some real introspection and figure out why Ballmer’s Peak is such an effective tool.

What follows is my design process. I can’t guarantee it to be “quasi-magical” or “superhuman”, but for me, it is the only thing that works at the base of the mountain. If you’re having trouble designing a website or an app’s UI or even just an icon, I invite you to try these 4 simple steps.

Inspiration

First things first, start by getting some inspiration. My gotos are Dribbble, Pinterest, and Bēhance. If you’ve never heard of these before, just imagine GitHub but instead of nerds it’s filled with artists. Search for “mobile app UI” or “calendar UI” or whatever you can think of. As you scroll, I highly recommend saving the images in a folder so it’s easy to revisit.

When you’re looking at all these cool UIs, keep in mind not to go too crazy. There’s plenty of results that look really cool, but won’t exactly fit the medium of your app. For example if you are creating an iPhone app, but in the design only has custom controls, not only is this a ton of work, but it will be an unfamiliar and ultimately an unpleasant experience for your users. I like to take bits and pieces of designs where they make sense – colors, button styles, iconography, etc. And if you feel like you’re just copying everyone, don’t stress, by the time you are done, the result will evolve into something unique.

Wireframe

Next up, grab some paper and a pen. By this point you should already have written down the features or your app and after gathering some inspiration, you probably have an idea of what you want each screen to look like. So start drawing them. For now, forget about specific icons or strings of text and just draw simple boxes with a squiggle or an x through it.

As you work your way through the app, think about the user experience. How will the user navigate from screen to screen? What details should each screen display? Is it worth splitting one screen into two? When you’ve got all that figured out and you’re satisfied with the way things are laid out, write down the details that each screen should consist of – high level things like “username” or “calendar” next to each screen.

Simple Mock-up

Next step is where things start to get real. Now we are going to take those drawing and render them in a UI design platform. I’ve only used Sketch but some alternatives are Figma, Affinity Designer and Adobe XD. The goal here is to focus on nailing key design principles like alignment, proportion, hierarchy, whitespace, etc. For that reason, ignore using any colors and constrain yourself to only using shades of black and white. At this stage in the process, we are still developing the user experience and adding color is much easier once you have a solid UX foundation. This step is likely going to take more time than the previous one. Stay patient and if you feel yourself becoming overwhelmed, take a break of revisit your inspiration folder.

Detailed Mock-up

Finally, let’s add some color. This step is where the app starts to come alive. For me, this is by far the most challenging step. I thought color was easy, I mean there’s only like 7 colors in a rainbow, so how hard could it be? Hard. The answer is hard. Each color has different shades, and hues, and saturations, and brightnesses. They have complicated relationships with each other, like your friends from high school, some of them are lifelong friendships and others are better off apart. They can even pull Jedi Mind tricks on you instilling different emotions like trust, safety, passion, and excitement. For this reason, I keep things super simple.

Pick primary color and a secondary color. Your primary color is the color of your buttons, app icon, and maybe even a header here and there. It might help to look of the psychology of different colors to help you pick. When you have a color in mind, you’ll want to decide on a specific hex value. To do this, it can help to either go back to step one and looks at more inspiration or go to an online color generator like coolers.co and browse different palettes with that color. Once you have your primary color repeat this step for a secondary color.

Make sure the color you pick is just that – secondary. Your secondary color assumes the role of a wingman. It’s there to make the primary color look good and maybe chime in every now and then to keep things fresh. When adding in color, make sure not to go overboard. Think of adding color as another step to user’s experience. Don’t add color that doesn’t serve a purpose.

Hopefully by the end of these 4 steps you’ll have something to be proud of – like I was after my first ascent to Ballmer Peak. If I still have your attention then I’d like to offer a couple more tips that may prove useful.

First, don’t overthink things. Honestly, the less I think the better. Instead of thinking about how a design change might look, just do it. Chances are that it will spark a different idea and lead you to something great.

Second don’t worry about coming up with something that’s breath-taking or awe-inspiring. The end goal is make an app that people love to use. The UI isn’t there just to look at, it’s there to interact with and as long as your app is useable then I think that’s a success. And if all else fails, grab a six pack and find your Ballmer’s Peak. But that could also get me into some legal trouble so remember, buzzed designing is drunk designing so drink responsibly.