DEV Community

Cover image for Beginner tips for developers with no design background.

Beginner tips for developers with no design background.

Ellen Macpherson on August 13, 2019

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 proj...
Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn • Edited

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.

Collapse
 
ellen_dev profile image
Ellen Macpherson

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!

Collapse
 
acomito profile image
acomito

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

Collapse
 
appurist profile image
Paul / Appurist • Edited

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

Collapse
 
ellen_dev profile image
Ellen Macpherson

Great recommendations!

Collapse
 
simonebogni profile image
simonebogni

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).

Collapse
 
ellen_dev profile image
Ellen Macpherson

Ohh this is a great tip! Thanks for sharing!

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

I love Montserrat! Probably because I'm so much more developer then designer these days so all my designs fail.

Collapse
 
ellen_dev profile image
Ellen Macpherson

I know how you feel! It's definitely my fallback font for when nothing else seems to look right.

Collapse
 
juanbosnic profile image
juanbosnic

Thank you both for appreciating such a fine typeface, from the core of Buenos Aires' oldest neighborhoods (called Montserrat by the way :P)

Thread Thread
 
adam_cyclones profile image
Adam Crockett 🌀

This is why I like the font. 🏝️

Collapse
 
amatiasq profile image
A. Matías Quezada

"Think you've got enough whitespace? Double it!"

Double of 0 is still 0 :)

Collapse
 
ellen_dev profile image
Ellen Macpherson

Haha good point! Lesson learned - don’t be clever with subheadings 😉

Collapse
 
ryzorbent profile image
Thabo

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.

Collapse
 
ellen_dev profile image
Ellen Macpherson

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!