Do Your Development Skills Hinder Your Design Work?

If you’re a freelance web designer, chances are good you do some web development as well. To be absolutely clear here, by “design” I mean the static layout of a website; by “development” I mean the actual HTML/CSS markup (and perhaps CMS implementation, like WordPress). We all know there is money to be made in development; the breadth of development companies in pretty much any city, large or small, is proof of that. Thus, many graphic designers add web design and development to their skill toolbox as a way of generating more work and a different clientele. However, design and development are two different kinds of beast, and your skills in one can affect the outcome of the other. With that in mind, I pose the question: are your development skills hindering your design work?

How Well Do You Really Know CSS & HTML?

The strength of your grasp of CSS/HTML can affect your design work, either consciously or subconsciously. There are a lot of CSS declarations out there; CSS3 and HTML5 are becoming more applicable and accepted; there are a lot of ways to push the boundaries of what browsers will render. It can be tough to keep on top of these advances, no doubt. However, not knowing what is possible using CSS & HTML means limiting the potential of your design work, or limiting the best practices of your design work.When I speak of best practices, I mean things like using live fonts instead of images; using CSS styling instead of Photoshop slices and so forth. For example, say you wanted to use a letterpress text effect for a new small business website you were contracted to design & develop. If you are not familiar – or confident in your ability to implement – the CSS text-shadow effect, then chances are you will either a) not use this effect at all, or b) use an image instead of live text. Both of these solutions are not optimal compared to the CSS text-shadow effect (assuming using the letterpress text effect is beneficial to the design). Thus, your development skills (or lack thereof) are hindering your design work/choices.

The text-shadow declaration is just one example. There are a large variety of CSS styling techniques that can be swapped out in this example.

Cutting Corners

Another potential situation where development skills can negatively affect design work comes about when time management and/or development speed comes into play. If you’ve taken on one too many projects and have a few stress-inducing deadlines looming, do you really think you’re going to be spending the time to really polish a design? Are you going to design that jQuery slider with love & attention to detail, knowing that by including the slider & all those details, you’ve effectively added an hour or more to your coding time?

Knowing you have to code the fine details of the design you’re creating can lead to justifying why you’re cutting corners. You can start telling yourself that the design doesn’t really benefit from that highlighted border edge, or floating 3D box and the like. Be aware of this; after all, the details are what separates good design from great – and the only way to develop a reputation as a great designer is to put out great work.

Designing for a Content Management System

Knowing that the design you’re working on will be implemented on the web using a CMS, such as WordPress, is another potential pitfall for quality design. Your comfort and understanding of the CMS you’re working with – the limitations of the software, as well as its strengths – can affect your design choices too. The biggest differences between designing for a static HTML/CSS site and designing for a CMS is that a) the content in a CMS is dynamic, and b) the client will be editing site content, potentially with little or no experience doing so. It is imperative that, as the designer, you understand these differences and take them into account.

For example, you’ll see many CMS powered sites that essentially have two layouts – a home page and a sub page. The sub page layout is applied to every single page other than the home page. Why is this? Well, perhaps it was determined that this sub page layout was the optimal layout for every single other page on the site – or, more likely, the fact that the content is dynamic affected the design choices. More layouts means more development time and a steeper learning curve for the client. Knowing that the design will be implemented using a CMS is good; making lazy design choices because of this is not.

Let’s use the jQuery slider & WordPress as another example. Implementing one of the many slider solutions out there on a static HTML/CSS build is simple enough. Implementing the same solution in a WordPress build is slightly more difficult. Implementing the same solution in a WordPress build so that the non-HTML-savvy client can update the images easily is even more difficult. If you’re the designer & the developer – and let’s say you’re a developer who isn’t comfortable proposing a client-editable jQuery slider in a WordPress build – what are the chances of you offering this solution to your client? Not very likely, or in the least, less likely than if you were more dev savvy. Perhaps you’ll even scrap the slider completely, despite knowing deep down that it’s the right solution for the build. That’s a slippery slope that leads to unsatisfied clients, and perhaps to your eventual exit out of the web design/development world.

The Solution(s)

We know now that your development skills can affect the quality your design work; the question now becomes how to combat that. If you’re anything like me, you identify with being a designer first, developer second. I want Paper Leaf to be synonymous with great design; letting my development skills hinder that is something I want to avoid. In order to avoid this, there are a couple of options: focus on bettering your development skills, or subcontract the development work.

Bettering your development skills depends on whether you have the time and desire to do so. There are an abundance of online courses and tutorials out there explaining how to do near anything web-development-wise. My suggestion? Every time you see an effect on a site that you like, Firebug it and figure out how they did it. Then see if you can find a better way to do the same thing. Perhaps have a bookmark folder in your browser for “Development Inspiration”; Google is your friend here.

Subcontracting the development is another option. Subcontracting allows you to focus on making the design as strong as possible, without the above-mentioned development issues you may encounter affecting your work. However, if you’re going to subcontract, it’s still beneficial to know the limitations of the web as well as the CMS you’re using for your clients. Make sure you find a good developer – more difficult than it may sound – and develop a relationship with him/her. Keep in mind that subcontracting will either raise your costs or cut into your margins, so make sure your business is positioned properly for that change. Finally, subcontracting means you still have to manage the project; you can’t just “set it and forget it”.

The most important bit to remember, however, is to always be pushing yourself. Don’t settle in your design work. Always strive to best your last design; always strive towards the best solution for the project. If you do that, the other concerns become moot.