DEV Community

Cover image for From Idea to Design for Non-Designers

From Idea to Design for Non-Designers

Abbey Perini on May 16, 2023

You learned to code and want to start applying for jobs, but don't want anyone to look at your portfolio. Your app functions well, but you're prett...
Collapse
 
thegrumpyenby profile image
Kai Katschthaler (they/them)

Abbey, this is excellent! Thank you! This might actually save me a few headaches the next time I foolishly decide I want to redo my website. Because that day will definitely come. But this time I'll be armed to the teeth with despair-busting tricks. ๐Ÿ˜Š

Collapse
 
abbeyperini profile image
Abbey Perini

Glad to hear it! ๐Ÿ’™ No despair in our designs!

Collapse
 
ben profile image
Ben Halpern

Great post

Collapse
 
abbeyperini profile image
Abbey Perini

Thanks, Ben!

Collapse
 
killersupreme profile image
killersupreme

Congratulations, this post help me a lot.

Collapse
 
michaella23 profile image
Micha Rodriguez

So many amazing tips here! Thanks Abbey!

Collapse
 
mezieb profile image
Okoro chimezie bright

Thanks for sharing๐Ÿ‘๐Ÿ‘๐Ÿ‘

Collapse
 
jarvisscript profile image
Chris Jarvis

Nice post Abbey. Good typography can make a site.

Collapse
 
constobidullah profile image
Obidullah bin Masud

wonderful

Collapse
 
nerajno profile image
Nerando Johnson

Nice

Collapse
 
finnporter profile image
Finn Porter

This is super helpful! As a mostly back-end dev who recognises and gets annoyed by bad design but doesn't know how to make it better, this is an excellent first step to learning exactly that! Thanks!

Collapse
 
volodyslav profile image
Volodyslav

Oh it's very useful thanks ๐Ÿ˜

Collapse
 
shahid_hussain_7a399e19ef profile image
Saheed hussain

Nice article, another point that can be added is: for components one can use css frameworks like - bootstrap, talwindcss etc which gives out nice customisable components.

Collapse
 
abbeyperini profile image
Abbey Perini • Edited

I purposefully didn't mention CSS frameworks for multiple reasons:

  • They may be easy to add initially, but you still hit a steep learning curve when you go to customize.
  • You have to check the styles and customize immediately because they are often not accessible.
  • A class per declaration quickly becomes a lot to replicate on every element. A big point I'm making is that you want to reuse one clearly named class that is easy to understand when you come back to the project in 6 months.
  • I personally find the inline styling harder to read.
  • I don't have any advice for using them because I don't use them.
  • I didn't want to debate CSS framework fans in the comments of this blog.
Collapse
 
abbeyperini profile image
Abbey Perini

Now that I've worked in both Tailwind and Bootstrap, I have updated the blog with the reasons why I'm not recommending CSS frameworks.

Collapse
 
iamhectorsosa profile image
Info Comment hidden by post author - thread only accessible via permalink
Hector Sosa

Nice blog post! Design is a common pain-point for developers! A small suggestion, framing your screenshots here would've been chef's kiss. We've built an OSS tool to help with this. Check it out and let us know what you think: github.com/ekqt/screenshot

We'd appreciate giving it a star on GitHub if you find it helpful! Cheers!

Collapse
 
fruntend profile image
fruntend

ะกongratulations ๐Ÿฅณ! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up ๐Ÿ‘

Collapse
 
rachelfazio profile image
Info Comment hidden by post author - thread only accessible via permalink
Rachel Fazio

This is super cool! You can also tag this as #design next time to have it show up more for folks looking for it!

Some comments have been hidden by the post's author - find out more