What are the most common design errors developers make?

Recorded May 31st 2020 – watch the full episode on YouTube.

What would you say are the most common design mistakes made by developers? They're not actively trying to screw things up, but just common errors they make.

Meng To: Sure: proportions, like font sizes. I've seen a lot of apps by developers where the font size is super big. And when I look at that, I'm like, “okay, this person probably came from the web or something” because on the web, as you know, the font sizes are just much bigger.

Colors – they don't know how to use colors. They see a designer using colors and they're like, okay, maybe I can use colors everywhere now. And they're like putting these purple background and then purple text on top a purple background. And it's not even readable.

Accessibility, a third thing – very, very hard to master, but should be done, especially nowadays. So contrast ratio, if you're a developer, I wouldn't use anything else than a white background, to be honest, because white background is the ultimate color for any app.

“So accessibility, a third thing, very, very hard to master, but should be done, especially nowadays.”

And it's very consistent. It's very easy to use. And then it can translate to dark mode very easily. If you're a designer, you have a lot more comfort with colors. You can definitely end up using off-white. You can end up using a dark blue for dark mode.

But if you're a developer and you're not comfortable with colors, go with the more safe route. And when I say safe, I don't necessarily mean you're not putting your skin in the game and you're not doing anything exciting. You can bring excitement in other things such as animation, such as the way that you can interact with the app, the new gestures that you can use.

If you look at some of the stuff that we're really used to now in term of like the pull to refresh, those are things that were invented by developers at the time.

And it's the kind of thing that I believe developers really excel at, if they knew the power that they hold over design. The problem that I see with a lot of developers that they don't believe that they have any power in design. But that's absolutely the opposite in my opinion, because if you look, if you work with any teams, and if you understand just enough design to be dangerous, such as some of the rules for typography, the colors that is already in the Apple, iOS guidelines, the adaptivity of the layout, the legibility of the text, Dynamic Type, accessibility, all of these things. If they knew just like 60% of it, they can be extremely dangerous.

And come the time that they have a meeting with designers, they can have a very strong opinion on how the app design should be moving forward. And not only will they improve the user experience, they improve the deadline in term of how long it's going to take to make the app.

“The problem that I see with a lot of developers that they don't believe that they have any power in design. But that's absolutely the opposite in my opinion.”

They can collaborate better with designers, but also they can really shift the vision of the company in big ways. Instead of saying, “hey, I want to make this car to be this way that the designer wanted.” You can say, “what if you do it this way? And what if we use another technique, giving even more flexibility to the design, or to the animation?” The designer doesn't even know about Dynamic Type.

And so what if you have this knowledge and you can pass it to the designer and convince them to use this technique, and it's going to save the deadline by two weeks, right? So that's the kind of power that developers hold.

Paul Hudson: Would you say that a developer could almost play it safe by sticking with a built-in Dynamic Type font styles or should they try to experiment?

Meng To: I think, the same way I look at this first time that someone would draw on pen and paper. They didn't learn how to draw – they would look at a drawing and they would put it on top of another paper and they would draw on top of it.

So at the very beginning, it's inevitable to mimic and to go with the safe route first as long as you are satisfied. And I think that's the key word to be satisfied with your design. And it does not have to be exactly like what Apple has, but definitely if you're using the same techniques, such as what you're saying, in terms of using large title, body text, caption text, and all of those things. Start with that. Once you get comfortable, then you can upgrade your skills. But always, always be satisfied with your design.

“Setting the right combination of title versus text. Setting the right spacing between the title and the text. And as we all know, like most apps are comprised of 80% text. So if you master text you can easily create beautiful apps already.”

You should never say, “hey, I tried a 50-point font size. I hate my design.” Well, maybe you should just use a large title, right? And mix that with another one that goes well with a large title and a good amount of spacing between the two. A good amount of characters per line, a good amount of line height. All of those, those three things, can make your design a hundred percent better.

Just by setting the right line height. Setting the right combination of title versus text. Setting the right spacing between the title and the text. And as we all know, like most apps are comprised of 80% text. So if you master text you can easily create beautiful apps already. If you look at the stocks app, for example, mostly texts and then charts.

So, are you able to draw a chart? I'm sure you can. Then you have your app: use navigation view, tab bar, and that's it. It's not very complex.

At the end of the day, you don't need to have everything custom made. You don't mean to have everything super exciting and crazy. You just need one or two or three things. And that really blows people away. Maybe the way you animate the charts, maybe it's the way that you do the loading screen. Maybe it's the way that you do the transition between one car to the full screen mode, whatever it is. It's usually just one thing.

If you look at, let's say the App Store app – most of the design is just basic design. It's not crazy stuff. But there's one thing that excites people, and that's the Today tab. People always refer to that design all the time, because they're so excited by it. It just sets the tone of why one thing can make such a huge difference in the way people perceive a design of something and the rest can just be very normal.

And that's the beauty of it: you can sort of contrast the two. It doesn't have to be 100% original. It can be maybe 5% original and 95% pretty normal, but still good.

“I think it's worth remembering that the Dynamic Type sizes like .title and largeTitle aren’t just the size of font and a weight of font – they include includes kerning and tracking and leading, and it's all carefully custom designed to fit with those fonts. Apple spends an enormous amount of time making those work well together.”

Paul Hudson: Certainly, you know, 13 months ago most developers I would think of would actually point to the Apps tab or the Games tab and say, “how the heck do they make that collection view?” Because they have this amazing collection with multiple different types of layouts, and this gorgeous, big picture scrolling, little tables of stuff, scrolling. And now of course we have compositional layouts ourselves, we're like, “aha! That's how they made the collection view!” I'm really glad I have myself now.

So yes, it certainly is interesting to see how folks see the App Store differently. With phones, particularly, I think it's worth remembering that the Dynamic Type sizes like .title and .largeTitle aren’t just the size of font and a weight of font – they include kerning and tracking and letting, and it's all carefully custom designed to fit with those fonts. Apple spends an enormous amount of time making those work well together.

And particularly with SwiftUI, when you think about Spacer, or the default behavior of stacks, where they have adaptive spacing by default, you don't specify a padding by default, you just say padding() and it applies the right amount. And that's important because of these font size that are perfectly constructed.

You know, we can add adaptive spacing around them as needed to give a bit more white space, a bit of negative space around them who just has a bit more breathing room on the screen. I suppose it sort of squeezing things aggressively together, which you might do if you've made your own custom font layouts and similar.

Sponsor Hacking with Swift and reach the world's largest Swift community!