Mobile & Web app for pipeline monitoring service 3

img admin

Let’s do something a little different here. If you’re reading this, you’ve likely read my design hacks, perhaps my take on color theory, maybe even my 3,000 word article in which I design a single button. Today, I want to get even more in the weeds (what is WITH this guy?).

We’re going to take an awful design and make it look good. At each step, I’m going to explain exactly why I’m doing what I’m doing. I’m going to give you techniques you can put into your design toolkit.

The Before: from a homework assignment submitted by a student in Learn UI Design, my course on user interface design. With all due respect, it’s pretty nasty (the design, jury’s out on the course).
The After: What we’re going to build today.
Ready? Let’s dive right in.

To answer the question some of you might be asking: why on Earth are you designing on an iPhone SE-sized screen!? I get it. iPhone X is huuuuge compared to the 320×568 screen here. But that’s exactly the point. It’s harder to make everything fit on a smaller screen, therefore, we’re going to start designing on a smaller screen. Scaling it up is easy, and scaling it down? Well, we don’t have to.

Better, but not by all that much. So while fixing the colors is simple, fixing the typography is… not so simple. We’re going to need a little more work here.

Now when I’m redesigning something like this, I’m going to be doing some analysis of the text styles in my head. But I’ll make it explicit for you. Watch what happens when I replace each piece of text with a description of its style.