I'll be honest - the world of design intimidated me when I first started developing websites. I stuck to clean minimalism for most of my early projects, because I became too afraid to do anything bolder.
We can't all be graphic design experts. However, as front end developers, it's important that we can at least recognise good design. Today I'll be sharing some of my favourite design hacks and insights that are easy to remember and implement. I'm hoping some of you will also share your own!
Have a good understanding of UX fundamentals.
If I were to pick one thing from this list to drill into everyone's brain, it would be this one. Aesthetically beautiful design means nothing if it's difficult for your user to interact with.
Firstly, your organisation will hopefully (but - and I can't stress this enough - not always) have a team of UX designers and researchers to handle most of the big design decisions. So why should you learn it?
It makes communication with designers and researchers easier, gives you a better understanding of the design architecture decisions, and helps you keep your end user in mind at all times when you're developing the product.
Do you need to be able to create beautiful prototypes? No, of course not. But an understanding of low-fi prototyping (i.e. sketching things out on paper) will get you further than you think. It will help you work through why you're placing elements in a certain way.
This might seem like common sense, but I've worked with plenty of developers, scrum masters and product owners who don't know the value of good UX, and it shows.
For a quick crash course, I'd recommend heading to YouTube or Google Developers.
Think you've got enough whitespace? Double it!
There is nothing that will make a page more aesthetically pleasing and easy-to-read than whitespace.
It doesn't just make a site look pretty, either. It makes for better navigation, increased legibility, more meaningful content engagement, and more obvious calls-to-action. It's not all about padding and margin, either. Have you ever been working with a really nice font, but it just didn't look right? Try adjusting the line height or letter spacing to give a bit of breathing room.
One of the best design tips I ever received is not to think of adding whitespace; get into the habit of thinking that every element you add to your site removes it. This will help you make conscious decisions about your layout and use of components.
Choose a font pairing and stick to it.
Websites shouldn't have inconsistent fonts - that means sticking to two or three that work well together. And yet, the world of typography is vast and can be deeply overwhelming, even if you're only looking at Google Fonts.
The most important thing to remember is readability. Is your font choice easy to read? More importantly, can someone who is time-poor skim read a long paragraph and still get the necessary details? You've picked well.
If it sounds like I'm talking about accessibility issues here, I am. The easiest way to ensure your site works visually is to choose an easy-to-read font and space it well. All those things I was saying in the above whitespace section about increased legibility and more meaningful content engagement? They apply to font, too.
Luckily, there are places to turn to if you feel out of your depth. Typing 'font pairings' into Google will give you lots of articles, generators and design guides. Depending on what you're creating, you might want to look into different sites.
For text-heavy sites and blogs, I like to head to Fontpair, which has a lot of great font combinations, optimised for readability. The Canva ultimate guide to font pairing is another great resource. It has a list of suggestions to cover everything from sports websites to resumes. If you're interested in tips on how to make your font accessible, check out Four features of accessible typography on the Fathom UX blog.
And remember, if all else fails: Montserrat.
Use a colour palette.
Unless you've done an art or design degree, colour harmony doesn't come naturally to most of us. Sticking to a can really elevate a website or app.
When I first began to design websites, someone gave me the advice that using a colour generator meant I would always have a great looking website. There's obviously more to it than that, but it's a good start. As is the case with font pairings, there are plenty of places you can turn to for help. My personal favourite is Coolors which gives you seemingly endless options.
Over time, you'll develop your own preferences and learn to recognise which colours just look right together.
Don't be afraid to explore depth.
The feud between flat design and material design rages on in designer corners. If you aren't aware of the difference between the two, first of all, I don't blame you. Essentially, flat design (used most famously by Apple) makes a conscious decision to avoid 3D rendering. Things like such as gradients, drop shadows or textures aren't Apple's style. Material design on the other hand, makes interaction a little more obvious, with edges, shadows, and seams that seem more tangible, mimicking non-digital products.
The difference that this makes to user experience design might seem minimal, but there's an important point to be made here:
Flat design is great for users who are highly attuned to digital interaction, while material has more of a reactive response to a user’s action. Material design brings the design a step further in its ability to communicate. (Source)
While it may be tempting to default straight to flat design (it's easier to do and faster to load, after all), consider who your user is before you jump in.
Material design was invented with the intent to represent the expected response to a user’s action. Therefore, it's more intuitive for users who aren't as attuned to digital devices. A small box-shadow, for instance, is an easy way to draw someone's attention to a button.
If you're new to CSS, things like gradients and box-shadows can be a little tricky to get your head around. But current popular 'semi-flat' design styles might be the better choice for your user, depending on your product. So it could be worth taking the time to look at Google's Material Design documentation to understand it a little better. That way you can make the right choice for your users.
Research often and learn from others
The world of design is ever-changing. If you can, spend some time every month doing some research on what's out there on Codepen, Dribble, and in individual designer portfolios.
Before we go any further, I'd like to take a second to say I really don't advocate the theft of designs.
But there is something to looking at what others have done before you and taking inspiration from it. If something's good, why break it? Well created designs often aren't totally unique. If Material Design works for your project, use it. It doesn't matter that plenty of other apps use it: it's a foolproof way to get a design out quickly.
My favourite way to start a project is to take a look at what's already out there in a similar field. This helps understand the general conventions of particular websites and apps (which helps ensure a better user experience), but it also might give you some good UI ideas.
If you like the look of something on a site, open the dev tools and see how they implemented a design trick. If you want to learn more about the ethos behind a site's design, get in contact with the developer or designer who produced it! Keep in mind that if you borrow something directly from another developer, you must credit them. But if it's a widely-used animation or a font you're after, make a note of it for later use. Put your own twist on it, and people will soon be looking at your projects for inspiration.
On that note, don't forget to steal from yourself! There will be parts of every project you like. Look back through your code and reuse/recycle them.
Share your tips and tricks in the comments.
I'd love to hear what your foolproof tricks and resources are. What have you picked up throughout your career? Share below!
Top comments (15)
On the note of colors, make a point to pay attention to the contrast ratios. There's no point in having an amazing vibrant color palette if nobody can read anything or differentiate UI controls. This should factor into design beyond just choosing colors in the first place. Some places should be high contrast (for example, text), but others should actually be lower contrast (see for example the color difference between the card elements and the background here on DEV in the default or night themes, high contrast there would actually be rather distracting).
Also, just because a color palette is popular doesn't mean it's a good one. For example, Bootstrap 4's default color scheme looks nice, but it's actually got pretty bad contrast in a number of cases, and borders on unusable for people who are colorblind.
Absolutely - that's a great point. There are plenty of tools out there to test colour contrast as well. No more excuses white on pale grey!
The #1 best thing you can do is read Refactoring UI. Hands down. No questions asked. Period. Once you're done checkout Steve Schoger's youtube channel.
youtube.com/watch?v=7Z9rrryIOC4
Agreed, but a clarification: that's actually a video in the "Web Conferences Amsterdam" channel. Steve's YouTube channel (e.g. for subscribers) is here:
youtube.com/channel/UCxqiDtkXtOCNJ...
His Twitter is:
twitter.com/steveschoger
Great recommendations!
Speaking of UX, when you are developing a product that uses a right to left writing direction (e.g. in Hebrew), remember to switch also the direction of the element flow (e.g. the logo/homepage link will now be on the right side of the navbar and not on the left).
Ohh this is a great tip! Thanks for sharing!
I love Montserrat! Probably because I'm so much more developer then designer these days so all my designs fail.
I know how you feel! It's definitely my fallback font for when nothing else seems to look right.
Thank you both for appreciating such a fine typeface, from the core of Buenos Aires' oldest neighborhoods (called Montserrat by the way :P)
This is why I like the font. 🏝️
"Think you've got enough whitespace? Double it!"
Double of 0 is still 0 :)
Haha good point! Lesson learned - don’t be clever with subheadings 😉
Hi, Thank you for the article, but i think the link on " here's a great article that explains the difference. " is doing a circular referencing.
Hey, thanks for picking this up! I had an external Medium article linked but it didn't seem to be working. I think post works well enough without it so I've removed the link.
Thanks for reading!