50 Shades of #FAFAFA
A moderately inappropriate look at silly things designers do and don’t do
Us designers take our work pretty seriously. This article does not.
1. Use a UI framework. I know you want to make this design your own. I tell you what, come up with a design system even 10% as beautiful and extensible as Material Design and then we’ll talk. Devs can build faster, you can save yourself time, and your users won’t have as much work figuring out new usage conventions.
2. Stop creating your own typography rules. I know the fancy style guides look gorgeous on Dribbble. But do you really have it in you to explain the nuances of your kerning rules to development for the next 6 months?
4. Make your grays darker. Nobody can read that text. (But seriously, I agree it looks nice. So I leave it in your designs and let dev fix it later 😄).
5. Symmetry really isn’t that important. Maybe it’s just me, but I spend an inordinate amount of time getting everything symmetrical, until I zone out into a design coma. My design partner has to wake me back up with smelling salts.
6. Find all the thin/lightweight fonts in your design and bump them up one weight. Then open Font Book and delete all your thin/lightweight fonts. You won’t need them in the Promised Land.
7. Your design isn’t an art piece. Look, I know that YOU are a unique flower. But your design is a tool that someone is using to accomplish a task. Ain’t nobody streamlining their digital marketing workflow with a Rembrandt or Jackson Pollock. That doesn’t mean it can’t be beautiful! It should be! Just don’t get yourself caught in the pixel weeds and end up losing sight of the ultimate value of the product. Make it visual, but keep it valuable.
8. Monitors are getting huge, but you don’t need to use all that space. This is how hoarding starts.
9. Also, whitespace can’t be “wasted.” Let it breathe! Now you breathe.
10. Oh and also, (ALSO!), the “fold” isn’t a thing that exists in apps. The next time your PM asks you to “bump up some of those graphs above the fold and stop wasting whitespace,” just…well…I have no advice. Let me know if you have a better response than “users have trackpads and mice that scroll,” because that sometimes falls flat.
11. Stop giving your charts shadows. Or making them float off the screen. Or really spending any time at all on them. There are three deliberate steps you should take when creating charts for your product designs: 1) Choose the right chart type, 2) Design it to be easily understandable, and 3) Fill it with compelling data. Note: There is no 4) Animate your data points to the tune of “Teach Me How to Dougie.”
12. Dribbble “likes” don’t pay the bills. Yes, they make you feel great about yourself, but just remember if your design can’t be built, then your custom Mid-Century Modern home on a cliff can’t be built either.
13. Innovate on the whiteboard, not in [your design app]. Your idea should be rock solid before you sit down at your computer. It’s not magically going to appear out of the ether and manifest itself in glistening pixels.
14. Use a f_cking icon set! There is no shame in that game. Try Nucleo, or Nova. They’re great and usually pretty versatile. And if you are even thinking of adding commenting to say, “Well I actually work with a fantastic visual designer who is amazing at icons,” then just keep that to yourself, you lucky bastard.
15. Nobody loves your design more than you do. Except for your mom, probably. But look, we fall in love with our work. We fall in love with other designers’ work (when we’re not talking sh_t behind their backs). But your users ultimately don’t really care (to the extent that you do). And your stakeholders won’t care, as long as it satisfies the user’s goals.
16. Your design should be rooted in value, not art. We’ve already established you aren’t Rembrandt or Pollock. But beyond that, the way you present your work, either on Dribbble, to a client, or your PM and developers should always always always reflect business and user value. I know us UX designers don’t always get to do all the cool stuff. But we get paiiiiid, right? I think that’s what matters. Oh, and the user. Yeah, the user.
17. Worry about component-level details during development sprints. I’m not discounting the importance of things like dropdowns and focus states and overflow states and line-wrapping, but these discussions are much longer and drawn out during conceptual phases and much shorter and effective during development.
18. Every misplaced pixel is like a typo in a novel. Take pride in the presentation and layout. Every single pixel will be scrutinized more than your tour bus locker room talk.
It was the best of times, it was the wrost of times.
19. You know that one screen that has a button label misaligned? The one that your design team pointed out immediately in your design review? Yeah…that one. That’s the one marketing will put on the website 😑
20. Name your layers. “Tom.” “Batman.” Whatever. Just give them a name.
21. Use a grid. I’m not talking about the grids that show how your logo was designed with 713 circles, ellipses, and rectangles. Just a basic, white bread, no-bells-and-whistles columned grid. For extra bonus points, use the one your devs are going to use!
22. You know how dev will “get” what you mean? They won’t. Tell them. Not in an email. Not on Slack. Tell them with your words coming out of your mouth voice. To their faces. If they still don’t get it after that, just throw your hands up exasperated and mutter something like “Jony Ive doesn’t have to put up with this shit.”
23. Mila Kunis doesn’t use your marketing app. Neither does Obama, Charlie Sheen, Taylor Swift, or The Weeknd. Use pictures of human beings you’d see walking on the street, or awkwardly staring at you while you write this Medium article in booth at Denny’s.
24. Don’t try to make your next UI “Brutalist.” I promise, you don’t really know what that means. I certainly don’t and I have read like TWO whole articles about it. There’s even a gallery of brutalist sites and it doesn’t really help. So just…don’t?
25. Maybe your PM doesn’t “get” your genius. Or maybe you’re not a genius and you should take their advice. A great PM is one who gets product shipped, but also is kind of a pain in the ass. That’s because they say things you really wish they wouldn’t say (because they’re usually right), and then you get defensive to avoid fixing your design 🙄.
26. Cut down your time spent animating your UI design by not animating your UI design. Yep. I hear you. You really think motion design is the cats pajamas. Just figure out which feature you want to cut out of your product to make it happen. And then write a medium article about how your startup saw hockey-stick growth because you read an article about using Disney animation principles in UI design.
Once you convince the CEO that your dropdown should fly in from the right side of the screen on a camel on a flying carpet, then be sure to to send a nice animated .gif to your customers explaining why that flying carpet was better than the feature they asked for (PS. Don’t forget to send them your Dribbble link. They’ll probably give you more likes, which will surely pay the salaries of your employees. Right?).
(PS. Animation is fantastic when used correctly. Just don’t overdo it. Most users won’t care.)
27-a. If you can’t think of a reason why you did something when you’re presenting, make something up. Like “oh, that’s just something Im experimenting with.” Or “My Invision file isn’t syncing.”
27-b. And if the client notices your InVision file IS in fact fully-synced, simply tell them they’re just not seeing the big picture.
28. Lobster is the new Comic Sans. There, I said it. You may disagree but you can’t un-see this message, and it will haunt you the next time you try to use it.
29. If Proxima Nova was a constellation, it would be the Big Dipper. Everyone can see it but nobody really cares. Ok, I’m done ripping on fonts for now. Proxima Nova is great, but it’s kind of like jogger pants. Now that everyone is wearing them, are you really all that trendy anymore?
30. Stop talking about your rejected designs. They were rejected. They’re in the past, like that awful hairdo you used to have. Remove them from your portfolio, and show off the designs that got built, but don’t lose sight of what you learned from those older iterations; this is key.
“You should see what I REALLY wanted to do before [PM/dev/the client] told me to change it. They were next level and they just didn’t get it!”
I’ve never won this game, so help me out if you have any tips.
31. Set up hot keys. I don’t want to stand behind you and watch you slowly hand craft your artisanal UI like an 1800’s Quaker whittling soap. Use your tools to their full potential. If you don’t know where to start, we wrote a helpful article on this that relatively nobody read 🤓.
Note from the author: This article was written with the Sketch application in mind, but these tips will apply to any…medium.com
32. Teach developers to fish. Don’t give them fish. And by “fish” I mean every edge case imagine able or every possible browser width a user might encounter with their LG, double-wide, 34" monitor. When you start doing that, they will always expect it. They’ll love you for doing it, but your product will probably suffer as you gradually descend into insanity.
33. You know that horrible panicky feeling you get when you realize your design might not be great? Me neither!
34. No but seriously. That sinking feeling that you overlooked something big? And you have to figure out how to fix it without your developers keying your car? We all have that happen. The good news is, that “thing” you miss gets smaller and smaller as you get more experienced and your own standards go up. Work with your team, and you will minimize these moments.
35. Don’t fall back on defending your design with data. Conventions change and users will always surprise you. And frankly, if you set that precedent, you will eventually run into a developer that will dig up an article discrediting your claims. Instead, embrace the uncertainty of design and be honest about it with your team.
36. Speaking of which, remember hamburger menus? That was a weird time. You’re not still using that in your native mobile apps are you?
37. If you wrote more than one paragraph explaining a single screen, then you should probably handle this in person. Or for extra bonus points, maybe redo the design.
38. Thinking about trying a cool gradient? Watch out! It’s like a fanny pack. Tough to pull off. And even if you do, you’ll probably just wonder whether you really needed it at all. That said, two toned images and gradients are dope.
39. Are you a “full stack designer?” I’m a half-stack designer. And my coworker is a quarter-stack developer. And we both like stacks of pancakes.
40. Let’s leave coding to the experts. Hey look, we’ve all coded a little bit. A little CSS. A little “inspect element” here and there. Hell, I even got a little weird with React.js one time after a party. But the fact is, there are people trained in this, and are much faster. Spend time honing and perfecting your core skills. Keep learning, but recognize your best skills.
So I guess I don’t have fifty in me but then the title wouldn’t work. Focus on the big picture (how design-y does that sound, haha). If you feel in any way offended by anything here, just remember that I only know these things because I’ve done or still do all of them.