CodeClouds Color Logo

FRONTEND, BLOG | 27 October 2016

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

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

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.

coding hacks for designers

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.

Frameworks

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.

Foundation & Skeleton:

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.

Preprocessors

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:

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

SASS/SCSS/LESS:

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!

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.

designer jobs in kolkata
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.

Originally written October 27, 2016. Last updated June 1st, 2020

 Views

Written by Jacob Clancy

Jacob has a bachelor's degree in web development, and his interests and experience go beyond just coding.

  • facebook
  • twitter
  • linkedin
  • pinterest
  • whatsup

Related Articles

Shared Servers, Virtual Private Servers, and Serverless Computing Explained

BLOG | 22 June 2020

Shared Servers, Virtual Private Servers, and Serverless Computing Explained

Today we’re going over three types of servers- Shared Servers, Virtual Private Servers, and Serverless Computing.

Practical Development: Can a Programmer Be Emotional?

TIP OF THE DAY, BLOG | 11 June 2020

Practical Development: Can a Programmer Be Emotional?

One of the most important skills an engineer can develop is being able to keep a clear head when everything is falling apart. Today we’re talking about techniques that can help you be a practical and effective developer.