DevGrow - Design, Develop, Grow.

From Developer to Designer: 5 Steps to Successful Design

One of the pitfalls many developers face is their inability to make a great design for the product they code, either for lack of time, ability or interest.  While design certainly isn’t everything, it is one of the bigger factors that can help make or break your business.  To be a successful, self-reliant and cost-effective developer, having a basic understanding of design will be a crucial asset.

“I’m not artistic!”

This is the biggest excuse I hear from my programmer colleagues.  As much as we’d like to think so, being artistic is not an intrinsic ability, it is a learned skill that people must develop with a lot of time and diligence.  While it may be easier to tell yourself you’re not artistic and offset the responsibility to a contractor or friend, understanding what looks good, why it looks good and how to apply that knowledge has multiple benefits:

• Quality Control – Screen the work you receive from contractors
• User Experience – As the developer of the product, you have an understanding of why people will want to use it – applying this logic to your design will create a great user experience
• Cost-Effectiveness – Even if you end up outsourcing the bulk of your design work, use your design skills to create your marketing material (banner ads), letterheads and business cards
• Self-Reliance – While it is absolutely necessary to depend on others at one point or another, being able to develop and design your own product just feels good and allows you to maintain full control

Convinced?  Achieving great design can be just as rewarding as programming, and just as beneficial for your product.  Follow these steps and learn how to create successful design:

1. Draw in Your Spare Time

Take out a blank sheet of paper, pick up a pencil or pen, and draw the first still object you lay your eyes on (or anything else you’d like).  While it’s true you don’t have to be able to draw to make a great looking website, drawing is the single fastest way to improve your overall artistic abilities with relative ease.  What you draw and how you well you draw doesn’t matter yet – your goal is to learn the art of observation and imitation.  Web design often relies on taking bits and pieces of what we see around the web and applying it to something with your own style.  Play with shading, realism, cartoons or whatever keeps your interest level high – remember the key is practice and persistence.

2. Absorb Inspiration

Find great design and learn from it.  A good place to start is an established CSS gallery or design blog, such as CSS Remix and Smashing Magazine.  Spend time looking through multiple sites and resources, take notes (mental or real) and try to find trends and similarities between the sites.  To be featured on a high profile site they must be doing something right, so try to learn as much as you can from their examples.  Your goal in this step is to understand what information the site is trying to deliver to you and what artistic and design trends they use to do so.

3. Learn From Tutorials

The Tuts+ network is a great resource and provides tutorials for everything from Photoshop to After Effects.  Take something you found to be very cool in one of the inspirational sites you’ve previously encountered and find a tutorial for making it (or something similar).  This will not only allow you to apply that technique to your own project but also teach you a multitude of other skills you’ll use in getting to the end result.

4. Practice What You Learn

Take a Photoshop tutorial and follow along with it in Photoshop, or even try to improve on the end result.  Find an incredible looking site and try to rebuild it in Photoshop, just to see if you can.  All good developers have one thing in common: experience, and this is what you’re trying to achieve with by practicing these design skills.  Start small by designing a button or logo, then move on to a complete mockup of a fake product (or your real one if you’d like).  Just like in programming you will undoubtedly go through multiple iterations of your work, hopefully improving on each one.

5. Apply Logic

Just like you would in programming, use your smarts when designing a website.  Keep in your mind the end goals, who your website is aimed at (target audience) and how to portray what you have to say in such a way that you engage your audience.  Web design can be fun and colorful but it can also be smart and targeted, and your goal is the latter of the two.

Conclusion

The point of this article is not for you to stop outsourcing your design work, or drop your designer cofounder in favor of doing it yourself.  Rather it is to help you better understand that you are capable and if you have time, take small steps to make yourself a better designer.  Follow the above steps, find more inspirational resources and keep practicing what you learn and you’ll be on your way to better design in no time.  Also, subscribe to our feed for more articles, resources and tutorials posted every week!