Coding Hacks for Designers: Skills and Qualities to Become a Better Coder

Being a good designer and developer both take separate hard work and dedication. Today more and more designers and asking the same question, “Do I need to know how to code?” The answer? Well.. It’s not clear-cut.

While I was a student at design school, I was pleased to see more and more assignments were code-oriented. In this day and age, without a solid understanding of the concepts of coding, you’re not a designer, you’re an illustrator. This doesn’t mean you need to be writing production-worthy code, but you should at least know the basics—it empowers you to make smarter decisions about your design.

Today I want to share with you a few easy coding hacks that I’ve picked up over the years that have really helped me to become the successful designers and developer I am today. It’s not all about knowing the complex stuff, sometimes just knowing the basics is all it takes, while sometimes the shortcuts make more sense for the end result. There’s two major ways you can cut down on the finicky stuff: frameworks and preprocessors.

Bootstrap:       
Bootstrap is by far the most common CSS framework used on the web today. With its pre-designed UI components (Buttons, Sliders, Menus, Font-colors, etc), Bootstrap can take a lot of work out of your UI wireframing and initial setup. Bootstrap is supported on all devices and is built around a grid concept which means you can easily control how your site looks on different sized devices.

Bootstrap is built for any size project, big or small, and is developed and used by the team at Twitter.

A lot like Bootstrap, these frameworks provide easy integration for responsive, pre-designed and pre-built components for your sites. They handle all the messy stuff such as media queries and flexibility and the latest versions even tend to include type classes! Making your whole site production-worthy through pre-built classes!

It’s really a personal choice with which Framework is the better. They all proved their own unique styling and each is built with different aspects in mind.

If you’re new to coding and really struggle with CSS and responsive design, then I strongly recommend learning a framework.

Jade:       
I learned Jade a few months ago and haven’t looked back. Pre-Compiled code is the future of Front-end development and Jade and SASS are the leaders of the pack!

Basically, Jade is a shorthand alternative for HTML. It’s an elegant templating language focused on enabling quick HTML coding. No more XML setups and percent prefixes for tags. It is HTML templating how it should be.

Because Jade is preprocessed, you can set variables and manipulate content and classes very easily. Instead of using annoying tags, Jade groups its content via nesting rules which make a very readable code! Any parameters of the component can be put in parentheses next to the tag, like this:

Wow! Pretty!

Once installing CodeKit (My favorite, but any alternative will do), Jade can be written in any IDE and when saved, CodeKit will automatically turn your jade into HTML! How awesome is that!? There are many more tools and tricks but you get the gist! Highly recommended!

Jade is the alternative to HTML, and SASS, SCSS and LESS are the alternatives for CSS. My favorite is SASS and if you’ve downloaded CodeKit then you already support it! SASS is a lot like Jade in the way it uses nesting rules. SASS and SCSS are very similar, except the main difference is that SASS doesn’t require those pesky semicolons!

When targeting an element’s child, instead of retargeting the parent, you can nest the child under its parent. This results in a tidier and more readable code. SASS also supports variables and mixins which are great!

I think as designers, coding is the lesser of your requirements. However, even learning the basics can be tricky if you’re new to the coding world. With these small coding hacks, you’ll be able to produce production worthy code with little or basic knowledge of HTML and CSS.

      
If you’re looking for more website design tips, then you’re in the right place. We’ve got a great creative design team that are predominantly based in New Zealand, but we are looking to expand our design services in India. If you like what you see, we have new designer jobs in kolkata worth looking at.