1616-03-24

HTML & CSS are design tools. Not a programming language.

html and css are design tools

Pretty bold statement right? Well, let’s face it. The web has evolved to a visual place where HTML and CSS have become the essential design tool kit.

In today’s blog post I’d like to show you why HTML & CSS are a must-have for UI / UX designers in 2016.

HTML & CSS, still relevant for designers.

As Leon Barnard stated in his blog post, HTML and CSS will still be relevant for web designers in 2016.

I would even say that HTML & CSS are design tools and therefore a must-have for designers in 2016.

Here’s why.

HTML & CSS are the foundation.

If you’re a web designer starting out, you probably learn a lot on how to use Photoshop, Sketch or other more traditional design tools. That is absolutely fine.

However, web design doesn’t end with a pixel-perfect Photoshop draft. It’s just the beginning of the design journey.

html css design tools

In one of my earlier articles on how to get started in web development, I highlighted the importance of learning the basics of HTML & CSS. And I really meant it that way.

No matter if you’re a designer trying to get into web development or a developer starting out.

Learning the basics of HTML & CSS is an absolute must-have. There are great resources and online courses available on learning the basics.

HTML & CSS aren’t programming languages.

There’s an ongoing discussion in various developer communities that deals with the question if HTML & CSS are programming languages or not.

So, should someone call himself a programmer when only using HTML & CSS?

Well, I don’t think so. But maybe more interestingly: I do not care.

I think those ongoing discussions are a more personal matter than anything else.

Here are some facts instead:

  • HTML and CSS don’t compile anything.
  • HTML and CSS describe presentation, whereas programming languages describe function
  • There are no if-then statements inside HTML
  • HTML and CSS are rules and describe rules for styling and structuring content
  • HTML is a markup language (as its name suggests ;))

So from a objective point of view:
HTML is not a programming language. HTML stands for Hypertext Markup Language. A programming language allows you to describe some sort of process of doing something, whereas HTML is a way of adding context and structure to text.

Designing inside the browser with HTML & CSS

Instead of going to Photoshop, the concept of designing inside browser suggests to start prototyping and designing inside your browser, using HTML and CSS as your primary design tools.

The big advantage of going straight to your browser, lays in the effectiveness and speed of your design and development workflow. With existing frameworks such as Bootstrap the workflow becomes even faster.

Further benefits and advantages of going straight to the browser can also be found in this blog post.

Interactive user stories vs static files

Static mockups are becoming less useful and designers have to find new workflows and tools which help them produce designs that are more accessible and interactive across all those devices we use.

One of the biggest advantage of designing in the browser, is the interactiveness of its medium. With Photoshop you can only produce static files, whereas HTML and CSS enable you to create real prototypes and mockups which make it easy for colleagues to actually grasp user stories.

Knowing CSS will make your web designer life a lot easier.

If you’re a web designer chances are pretty high that you’ll be working with other web developers on new websites or web applications.

Knowing how to use CSS and HTML as a designer will give you an easy time, collaborating with your developer colleagues.

It will not only strengthen your position within those project teams, but also enables you to get deeply involved in the development stage of a project. Adjusting styles or customizing a prototype is an easy game if you know CSS and HTML.

Prototyping tools for the win.

We believe that the current web design experience will evolve to a more user-centric and more interactive design experience than it is today.

Prototyping tools – such as Silver Flows, recently acquired by InVision – will add a new design approach to design collaboration. Shifting from file-based design drafts, to user flows and stories. Even Adobe recently joined the trend of prototyping tools in releasing their own prototyping tool Adobe Experience Design CC.

The web is way more interactive than you think.

With the current web development trends of Motion UI or the increasing power of computer vision, HTML and CSS become more and more important tool for designers.

Having great HTML and CSS skills will not only make a designer’s life easier, but also enables them to create well-thought out user experiences.

Over to you. Do you think a web designer needs to be an HTML & CSS expert? 

This article was brought to you by Usersnap – the #1 customer feedback solution for your SaaS company

Resolve issues faster with visual bug reporting.

Visual bug tracking by Usersnap

Simplify and reduce issue & bug reporting efforts with screen recordings, screenshots, and annotations.

And if you’re ready to try out a visual bug tracking and feedback solution, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.