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.
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.
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?
Knowing HTML doesn’t make you a developer… HTML IS NOT A PROGRAMMING LANGUAGE!
— Timothy Cole (@ModestTim) August 15, 2015
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.
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? Let us know in the poll below and leave a comment in the comment section!
This article was brought to you by Usersnap – a visual bug reporting software.
How to become a front-end developer!
Recently, some people approached me asking for advice on how to get started as a front-end developer. With its ever changing technologies and frameworks, it can be quite difficult and overwhelming starting out in the field of front-end development. In this blog post, you can find 10 tips on how to become a front-end developer!
10 powerful things you didn’t know about CSS3
Cascading Style Sheets, the next level. CSS3. With an array of increased creative opportunities, CSS3 is much better than its predecessor CSS2, and gives developers that much-desired control on a web page’s look and feel. We took a closer look at CSS3 and want to show you 10 things you might not know about CSS3.
Fundamentals on setting up your bug reporting workflow
With all these emerging new devices – from mobile devices, to wearables, to VR, to smart devices – having a proper bug reporting workflow in place becomes quite a challenge. Building web applications in particular might seem quite painful due to the different screen sizes of the used devices. It can even be worse than…
A beginner’s guide to deploying static sites with versioning and rollbacks using Flightplan
With the rise of cheap VPS (Virtual Private Server) services and the increase of complexity in the architecture of new web applications, deployment processes are becoming a very important topic and a skill to master to some extent. Long gone the days when we just needed a cheap hosting service and an FTP access to…
Get website feedback. Keep clients happy. Repeat.
Let clients draw directly in the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.