DEV Community

Design for Non-Designers (Part 1)

Tracy Osborn on April 22, 2019

Even if you’re not a designer, I’d bet that at some point in your career you’ll need to do something visual, whether it’s making a landing page for...
Collapse
 
emmabostian profile image
Emma Bostian ✨

Hey Tracy! Nice article :) I fully agree we should reduce clutter! You should also mention accessibility when it comes to color palettes though :) The gray on green in your sign up modal probably doesn't meet W3C color contrast and we love our sites to be usable by all! :)

Collapse
 
tracymakes profile image
Tracy Osborn

That's a great point, even more reasons why it's a bad choice!

Collapse
 
ermengolbota profile image
Ermengol • Edited

Nice article,
I also think that CRAP design principles are also very useful (as the use of whitespace you did) when teaching, in very few hours, design to non designers students.
Btw, interesting web references, thanks

Collapse
 
katieadamsdev profile image
Katie Adams • Edited

As somebody looking to freelance in web development work, this is great advice. I've definitely not got the head for design as much as I do development.
To build on your mockup point, NinjaMock is a fantastic website for designing wireframes for a website. Used simply, it can help provide clarity in transferring the ideas in your head onto paper. Used properly, it's an insanely powerful piece of kit that can plan out multiple aspects of a site - including mobile sites!

EDIT: also FontSquirrel is another site I use interchangeably with GoogleFonts

Collapse
 
jrc86 profile image
Jonas

This is exactly what I need.

Collapse
 
tareefdev profile image
Tareef Mando

Hey Tracy, in the article you mentioned that the Hello Web Design ebook price starts at 14.95$. I opened the link and found the price is 24.95$. Is there something I missed?

Collapse
 
tracymakes profile image
Tracy Osborn

Ack, thanks for catching that. I raised the prices since I published the article (cross-posted to dev.to recently but the article was originally published on my website awhile ago.)

I'll fix the article here, and in the meanwhile, send me an email tracy@hellowebbooks.com and I'll send you a discount code to bring it back to the originally posted price.

Collapse
 
tareefdev profile image
Tareef Mando

oh, thanks, done!

Collapse
 
sdq121 profile image
Oyebola Sodiq

Very nice.
I wish I had read this article a long time ago.
Very educating.

Collapse
 
claudiobernasconi profile image
Claudio Bernasconi

Spacing, Fonts, Layout. Three (when mastered) somewhat simple yet massively useful tools to declutter user interfaces.

I would by no mean consider myself a user interface expert, but getting the basics right has helped me out a lot.

Who hasn't had the countless conversations where a new feature should be discussed, but the discussion derailed to a user interface conversation? I've been there, done that.

Applying some basic rules helps not only avoiding discussions like these, but it also makes a better impression of our work as developers. We don't need to be designers, but some basics help a lot.

Thank you very much, Tracy, for sharing this information with us and for taking the time to write this article.

Collapse
 
bigschatz profile image
bigschatz

Wonderful article Tracy!

Thank you for taking the time to write it. I am so on board with the idea of reducing clutter, this principle can be applied to other facets of your life.. pretty much every facet. Ha!

Collapse
 
ndiecodes profile image
Ndifreke Friday

My favourite article on here, bless you!

Collapse
 
tracymakes profile image
Tracy Osborn

Yay! That's awesome to hear. :D

Collapse
 
scrabill profile image
Shannon Crabill

Great read! As someone who has a design background, I wish I had clearer tips like this when it came to designing for the web.

Collapse
 
mccurcio profile image
Matt Curcio

Thank you, those were simple and practical ideas that made sense.

Collapse
 
gabrielsimas profile image
Gabriel Simas

Thank you mrs Osborn! Greate Article!
Regards from Rio de Janeiro...Brazil!

Collapse
 
psav20 profile image
Avitus Pereira

Thanks for this lovely post and all the references in it