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

Nowadays, design and development are more intertwined and more designers find themselves stuck in an awkward position. In this article, I share with you a few easy tricks that I’ve picked up over the years, which helped me to become a successful designer and developer.

Being a good designer takes hard work and dedication, while so does being a good developer. 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.

coding hacks for designers

Being a good designer is rear and there is always positions in the market for a good designer. However, being a good designer who can code is ultimately the top of the top.

Sadly there was a time where design didn’t have its place on the internet, where all anyone cared about was usability and efficiency. Nowadays, design and development have become more intertwined, and more and more designers are finding themselves stuck in a position that in order to win over clients, they need to have at least a basic understanding of HTML & CSS.

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, your 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 about it. Knowing about code 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.

Knowing the basics is a must, but to an extent, that’s all a designer will need. With the ability to integrate frameworks such as Bootstrap, Foundation, and Skeleton, knowing how to make structured, responsive websites have become a lot easier!

“A framework is a standardized set of concepts, practices, and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.”

There are also a lot of modern languages such as Jade, SASS, SCSS and LESS which really help with getting tasks done! LEARN JADE & SASS!

Frameworks

Bootstrap:
Bootstrap is by far the most common 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 on Twitter.

Foundation & Skeleton:
A lot like bootstrap, they 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 greater. 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! However, you should still learn CSS!

Preprocessors

Jade:
Amazing…

I learned Jade a few months ago and haven’t looked back. A 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. Jade is an elegant templating language focused on enabling quick HTML coding. No more XML situps 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 such.

Example:

jade vs html

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 jist! Highly recommended!

SASS/SCSS/LESS:

Jade being the alternative to HTML – SASS, SCSS and LESS are the alternatives for CSS. My Favourite 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 semi-colons!
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!

Example:

css vs sass

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.

 
Written by:
Reade is a passionate developer, designer, and researcher who's passion lies with all things, technology and development. Reade is currently a part of the research and development team here at CodeClouds and works full time while studying design at University.
 

Comments