Most software projects have an established visual design: colors, layout, typography, etc. It’s typically one of the first things to be set up.
But the product is going to change and evolve. Maybe a new button needs to be added. Or a link, or a metric, or some other widget. While a designer often leads the initial design implementation, these smaller tweaks may not have their full attention.
So the developers are going to have to do it. Cue protests of, “Well, I’m not a designer, obviously…” Yeah, but…there’s just you. Go get it done.
Here are some pointers that I hope will make this situation less scary the next time you find yourself needing to do visual design work.
1. Steal
Most features are built on top of an (at least partially) existing product, so you’ll probably already have examples. When I try to decide what things should look like, I find that I can get 90 percent of the way there simply by stealing styling from things we’ve already built.
Here are a few things I look at:
- What fonts are being used for other similar widgets?
- Are there backgrounds or borders?
- Are there drop shadows, gradients, or rounded corners?
- What sizes and margins are being used?
- What should the disabled, active, and hover states look like?
- How are things aligned? Can you place your new item in line with something else horizontally or vertically?
Take whatever new widget or form you’re working on, and make those items match the rest of your app. Just getting those items in place will help keep the new feature from standing out like a sore thumb.
2. Understand that Finished Is More Important than Perfect
Shooting for perfection is often paralyzing. So… don’t. I usually frame the goal as, “What can I do here that will keep us from being embarrassed when we ship it?” That’s a much more achievable goal.
If you were building a house, you might not have an eye for the perfect painting to hang on the wall or know exactly how many inches up from the floor it should be. But it takes hardly any expertise to know that the drywall should be painted and not left raw with screw heads exposed.
Don’t make it look perfect. Just make it look like you didn’t forget to finish the job.
3. Start on Paper
When I’m not sure what a design should be, I like to step away from the computer. This helps me focus on what I want a design to look like and not worry so much about whether I know how to implement it. Getting away from the computer entirely helps me get around those limits and focus on defining the goal.
You might well end up with a design that you don’t know how to implement. That’s okay! Hopefully, you now have more specific questions like, “How do I vertically center things in CSS?” Those problems aren’t always easy, but they are well defined, and you can search Stack Overflow for an answer.
4. Just Try
Visual design is a muscle that gets better with exercise. It’s going to be awkward the first few times you try it, and probably for a few more after that. But as you get better at the implementation tools, you’ll be able to experiment much more quickly.
Keep at it. Try to spend an hour at the end of each user story to make things look a bit better. You’ll get more comfortable with it eventually.
5. Get Help
Your designers probably don’t have time to provide pixel-perfect mockups for every single thing the team builds. But if you make a mockup or implement the first-draft visual design, there is nearly always time to get a thumbs-up or thumbs-down from your designer or your product owner.
By handling the easy stuff yourself, you’ll free up capacity to tackle the hard things and help polish the pieces that really matter.
People Notice
Not everyone will be able to look at a half-finished product and tell you what has to be fixed. But afterward, almost anyone can look at the final product and know that it’s better—even if they can’t say why. People will notice the difference.
If you learn just enough to iterate a design quickly, use established styles, and put in a little bit of effort on every piece, you can dramatically increase the perceived product quality.