Improving Design Skills for Programmers: Tips, Resources, and Best Practices

Develop Your Aesthetic Sense

… My favorite sites for design inspiration are:

awwwards.com – browse daily and monthly featured sites

unmatchedstyle.com – useful commentary

dribbble.com

patterntap.com

Spend More Time

I allocate as much time to design as I do to coding. Good design needs time to refine.

When a project starts I usually have a rough layout idea. I design and code simultaneously, iterating thousands of times directly in the browser. This may not be the most efficient workflow, but it lets me make rapid, small improvements.

Steal

“The secret of creation is knowing how to hide the source of information – Einstein” “Good artists copy, great artists steal.” – Pablo Picasso

This isn’t new advice, but it’s perhaps the most important. When you’re just starting you lack the skill to create attractive designs, so you need to emulate well‑known designers or let their work influence you.

My process: I search for web apps that match my basic idea and have great design. I identify useful visual elements, then recreate them in my own app—never copying HTML or CSS directly. I study the visuals and implement them with my own code. As experience grows, I begin to create original designs.

Forget Photoshop

If you, like me, don’t know Photoshop, design directly in the browser with code. I only use Photoshop for tweaking icons and taking app screenshots. (Note: Sketch is now popular among designers.)

Master CSS

Designing in the browser requires strong CSS skills. Here are some resources:

MDN – Mozilla Developer Network, useful for more than just CSS

Less – http://lesscss.org/

Sass – http://sass-lang.com/

Front‑End Frameworks Are Your Friends

Building a site or app from scratch is hard, especially for beginners. I use front‑end frameworks such as Foundation, Bootstrap, Pure, and Polymer.

Foundation – my favorite framework

Bootstrap – the most popular

Pure – never used but looks cool

Polymer – part of Google’s Material Design implementation

Icons Are Surprisingly Important

Icons greatly improve navigation, add color, and convey meaning. Bad icons can ruin a design.

Depending on the project I use icon fonts or SVG icons. Icon fonts are handy because you can change size and color just like text.

Some icon resources I like:

Themify Icons – http://themify.me/themify-icons

IcoMoon – http://icomoon.io/

Freepik – http://www.flaticon.com/authors/freepik

Glyphicons – http://glyphicons.com/

Iterate – It’s Crucial

Trying and failing is valuable. Many attempts may look off, but each failure teaches you. I iterated thousands of times before finalizing the design for my app Duet.

Focus on Usability and Ease of Use

Good design isn’t just about looks; it’s also about functionality and ease of use. Even without formal training, simple usability checks can greatly improve an app.

Make sure you actually use the app you’re building. Regularly use it, notice annoyances, and fix them. If a flow feels unclear or a feature is hard to find, you’ll notice it during everyday use.

Typography Matters More Than You Think

Choose the Right Images and Photo Libraries

Here are some high‑quality free image libraries:

Im Creator – http://www.imcreator.com/free

Pic Jumbo – http://picjumbo.com/

Gratisography – http://www.gratisography.com/

Super Famous – http://superfamous.com/

Unsplash – http://unsplash.com/

Value Feedback

I admit I’ve been poor at gathering feedback, but I now rely on resources like:

Criticue – http://criticue.com/

Reddit Design Critiques – http://www.reddit.com/r/design_critiques/

The Final Tip

If you don’t know what to do, keep it simple: plenty of whitespace, subtle shadows, etc. Mastering design is a long process that consumes time, but once you grasp it, you’ll see noticeable improvement.