← back to the writings

How to code your design portfolio

Posted on March 29th, 2015 in Articles by Graeme

This article looks at how a designer can get into code through creating their portfolio using a content management system.

What's the point?

When designing anything, it helps to know the constraints you’re working with to provide a clear goal, which can enable you to move forward quicker. Constraints don’t always limit creativity, but can enhance it. As an example, a fashion designer will know what constraints she faces when making clothing. She'll know all there is about different fabrics, colours and even machinery available to produce her design. Knowing her constraints can build focus, enabling her to produce a better end product. Therefore, if knowing your medium enables you to create better solutions, shouldn't a software designer know at least a bit about coding to design better software? If you're agreeing, read on.

Learn through a CMS

A good opportunity for a designer to get into coding can be by creating their portfolio, as all desingers need one of those. I'm not saying you should code from scratch as a designer wouldn't need the knowledge a developer would, just a good appreciation would be beneficial. A great way to do this is by utilising a content management system.  

Most designers are already familiar with using CMS’s such as WordPress - they’re straightforward to use, and enable designers to upload their work for everyone to see. I also see the CMS as a great starting point to learn how to code - the most I learned about coding actually came when I was poking around WordPress. 

The code within a CMS like WordPress seemed daunting though, just like whenever you stand on top of a bee’s nest - there’s so much going on inside, and that can be scary. The trick is to only focus on the bit you need to change, and ignore the rest. 

Learn from the top down

When building anything, there’s no point in reinventing the wheel. Oftentimes, the best way to learn something is to take it apart. If you made a watch from scratch, where would you start? If you had a watch to take apart, you can see what’s making it tick.

The great thing when learning to code through a CMS, is that you’re starting off from the highest level, and can visually see the changes you’re making. You can get an understanding of what it does, and gradually dig into how it does it. 

Layer by layer, starting by changing the font size or some colours through CSS. Then pretty quickly, you’re familiar with CSS. Next you’ll want to add a new section to the site - find out how to do that, and you’ve dug into the next layer.

The wall 

You don’t realise just how much you’re learning when you’re poking around and trying things out. There can be frustrating times where it seems like you’re banging your head against the wall. Those moments can be a nightmare at the time, but that’s also when you’re absorbing most information. If you remember that, it can (hopefully) take away some of the rage. 

Before you know it, you’re teaching others how you did little bits, whilst consolidating your own knowledge. Sooner or later, you’ll realise that you’ve learned a couple front end languages.

The great thing with learning with a CMS is that when you get stuck with a part of it, there’s a community of developers out there who can help you - a lot of whom are likely to have had similar problems to yourself, so many of the answers will already be out there. 

After all

Should you get deep enough, you may start looking at real programming languages, discovering useful functions whilst learning good coding practices since community experts have written the code. This whole process could be years, but you can learn slowly.

Even if you don’t go too far with the coding, this can be an invaluable process to get more of an appreciation for what a developer has to do, and a better understanding of the limitations of what can be done - thereby improving the quality of your design work. 

Have any thoughts?