If you watch a lot of science fiction, you might think that I’m talking about some sort of part-human, part-alien hybrid. What I’m really talking about is a hybrid of a web developer and web designer. For a long time, the two roles have been somewhat separate. Web designers often had a background in graphic design or art and focused on the front end look and feel of a web site. On the other hand, web developers had a background in computer science or software development and focused their skills on the backend development. Today’s web development market is so highly competitive that having additional skills can make you more marketable. A popular approach is for web developers to develop and learn design skills.
Having some basic design skills can make it much easier to land a web development job. If you’re a freelancer, it may make your business more profitable. Many web developers outsource the design portions of their projects. By being able to do the design yourself, you will earn higher profit margins on your jobs. So how does one go about becoming a designer. Here’s a few important things you’ll need:
1. A Design Vocabulary
Design is just like software engineering in that it has its own language. In software construction, we use design patterns as common and time-tested ways to solve frequently occurring problems. In design, there are similar patterns and systems that are used to understand design and to solve common design problems. Learning your design vocabulary isn’t difficult. There are many online tutorials on design as well as a number of excellent handbooks that you can buy or get through your local library. One of the earliest ones I found helpful was The Non-Designer’s Design Book by Robin Williams. This book gives some simple tips and tricks to help improve your designs without getting to in-depth on the technical side of design.
Another good starting place for improving your design skills and vocabulary is to learn to use the grid system. The grid system is a system of design that involves breaking the space up into a grid. The boxes of the grid have consistent widths and heights that help to establish design concepts like line-height or a baseline. As an added benefit, there are a number of well-designed CSS frameworks for use with the grid system such as BlueprintCSS. These frameworks will greatly simplify your CSS development while they allow you to learn the ins and outs of the grid system.
2. Basic Skills with Design Tools
When I first become to take a stab at designing my own sites, I found that I could often create a great sketch of a design and I could see a great looking site in my head. When it came time to get that design into pixels though, it never quite made the translation. Over the years, I realized that it wasn’t my design skill that were lacking. The problem was that I didn’t know how to use design tools to take my design from my mind’s eye and make it come alive on the screen. To really develop your skills as a hybrid developer-designer, you will need to learn to use tools like Adobe Photoshop and Adobe Illustrator. Fortunately, there are many high quality tutorials online from which you can learn a multitude of techniques. I’ve found the best way to really learn to use these tools is to copy looks and effects that you like. If online tutorials or books aren’t the best way for you to learn, you can always take a class. Also, many cities have Adobe User Groups that offer free meetings that include presentations, demos and tutorials.
3. Learn to Use Color
Learning to use color almost seems like it would be part of a basic design vocabulary. I’m including it separately though because there really is so much to using color effectively that it is a whole category by itself. Learning to build effective color schemes is often the difference between a web site design that is just “so-so” and one that really “pops”. There’s really two elements to learning to use color.
The first is to gain an understanding of color theory. Color theory is what many artists and designers study in school. It deals with understanding the relationships between colors. Color theory deals with the various ways that color can be combined into a color scheme. You can find books that teach color theory. There are also web based tutorials or you can take a painting class for a good introduction to color theory.
The other aspect of learning to use color deals with the psychology of color. Certain colors are known to invoke certain moods. Marketers and designers use their understanding of the psychological effect of colors to create designs that communicate feelings. Again, this can be learned through books or online content.
4. Sources of Inspiration
Successful designers know where to go when they need ideas. Many of them find their inspiration in other areas such as nature or architecture. Successful designers often keep a clip file into which they file pictures of designs done by others that they like. This clip file can be a source of inspiration when they are feeling stumped. Likewise, you should really take time to analyze web sites that you like. Think about why you like them. Look at how they use color. Try to mimic elements of the design. You will gain a better understanding of design through this process but you’ll also develop a list of links and sites that can inspire you when you’re brainstorming for a new design.
5. Feedback and Critique
It’s important for new designers to get feedback from more experienced designers. Getting feedback and a critique of your work will help you improve. It will also give you more insight into how designers think. There are lots of places where you can get this kind of feedback. Network with other designers so you can share ideas. There are a number of design web sites and networks online where you can see critiques of web sites. You can also follow other designers on Twitter or Facebook. I follow and am followed by a number of web designers and developers on Twitter. It is not uncommon for one of us to post a link and ask for feedback or advice. Designers generally are happy to critique one another.
Building some design skills can make a web developer more marketable and increase profits for a freelance developer. Have you become a hybrid? If so, how did you develop your design skills?