Web design skills and experience musts

Diversify or die (from Web Standards Killed the HTML Star by Jeff Croft) is actually awesome career advice for anyone in web design. The whole point of the post is that HTML and CSS aren't much of a skillset on their own anymore. Look at architecture, you need to know CAD to start drawing up plans and blueprints. It's a baseline assumption that if you are in the field, that tool is what's going to get things done. You can build on that competency with 3D modeling, etc. but CAD is your bread and butter. It's the same with HTML and CSS in web design. They are building blocks for building things on the internet.

Croft suggests web designers (front-end developers, really) learn Node or AngularJS to keep their skills in demand and to stay relevant. And those technologies are absolutely in demand and marketable. But HTML, CSS and JavaScript are still the backbone of web design and front-end development, so let's look at what skills, technologies, tools and frameworks will keep you in demand in web design and doing something you really enjoy.

Nail down and get comfortable with a CMS

If you have a great understanding of a marketable content management system, you're primed to deliver a flexible, maintainable site to someone who needs it. You should learn the CMS's templating engine, get familiar with how to create custom themes, customize WYSIWYG editors with specific styles and actions, manage permissions and have a core understanding of what plugins or modules exist so you can take advantage of the stock pile of features the open source community has already made available to you.

It's also worth mentioning the likes of Perch and Kirby, which offer simpler solutions that just offer the core need of a CMS, adding and editing (e.g. managing) content.

Master responsive

Responsive design, otherwise known as fluid grids, flexible images and media queries, is an intricate dance between design and execution. Know the ins-and-outs. Know what to look for when reviewing early stage wireframes to make sure you don't start off in a hole (i.e. website goals, source order, come up with a performance budget). Know how to create and use visibility classes and push/pull classes to reflow your layout for different screen sizes. Know how to properly serve up flexible images and media (don't forget embedded objects, like iframes) based on different contexts, and when to create tweakpoints based on the content to give the design that squish. Getting comfortable with your workflow is the best way hammer home the basics and ultimately develop great instincts for what to do when building for the continuum of devices that are out there.

Cultivate a design sense

Image from Colossal

If you are at the mercy of a UI designer or creative director dictating every design decision to you, it's going to be tough to develop your own flavor. Find places you can create interactions, style what's unstyled, internalize the direction of the design and flesh it out even more. Talk to the person who created the look and feel and collaborate your heads off until you've solutioned a better narrative or a more compelling call to action. While some people may be predisposed to being more creative or having more artistic talent than others, design is the rendering of intent. It's about communicating a message, not just stimulating the eye, so your design sense relies on strategy as much as it relies on aesthetics.

Demonsrate programmatic thinking on the front-end

Tim Hettler, @timhettler

One of the biggest advantages of a more programmatic CSS using a CSS preprocessor like Sass or LESS, is you can internalize a designer's gut feeling into a repeatable pattern. What used to be a tangled mess of CSS can now be much organized and reusable. Over the years and especially with the evolution of responsive, front-end architecture has become its own beast and approaching it with a programmer's mentality can pay off. The more meticulously you make decisions, the better results you'll see in terms of maintainability, scalability and performance.

Get the hang of front-end frameworks

I know. To have full control of a design that you're building from scratch is ideal, but there are times when Bootstrap, Zurb Foundation or Skeleton can give you a useful scaffold to build around. Treehouse even has a full course teaching designers the basics and a fundamental approach to using CSS frameworks. Even if you don't buy-in to the Bootstrap or Foundation-mentality, how often are you actually opening up a blank document in Sublime Text and building an application from scratch? Useful and established tools like HTML5 Boilerplate, Normalize.css and Modernizr (for feature-detection) are commonplace for web designers because you don't have to reinvent the wheel with technology on every project. I used to have a manager who just asked that on every new project to try one new thing. That's something I've carried through since I entered this field. When you're constantly building, you would be amazed at how much you learn when you force yourself to keep learning all the time.

Find the right balance of tools to speed up your workflow

A lot of designers and developers swear by some tools that they can't live without. I'm always fascinated hearing about another designer who is really excited about something that they're using. The trick is not to bombard yourself with too much because that's when the tools start to work against you and become a time suck rather than an effciency. If using Bower, Grunt or Gulp, and Handlebars on every project makes you a more efficient designer or developer, by all means use what's available to you. As long as you don't get swallowed up by the new hotness and you focus on the task at hand; building a great website experience.

Approach every new skill as something you know you can learn

It's important not to get intimidated by a technology. If you build on common element that ties into a core understanding you already have, learning new things begins to fall into place. If you're really confident with your JavaScript and/or jQuery skills, you might feel more comfortable diving into a JavaScript MVC framework. It's equally important to admit to what you don't know:

We are not going to know all of the things, nor are we going to know them immediately. No, in fact, I haven’t tried out that JavaScript framework yet (stop looking incredulous). I didn’t see that one guy’s tweet about that memory leak thing. But I do know quite a bit about Sass placeholders now. Isn’t it fun to learn? — Lyza Danger Gardne

I've found the only time I really learn is when I try to use something on a project. I didn't learn Python taking a few Codeacademy courses because I wasn't building anything with it, I was just playing around. But I sure as hell learned powerful features in Sass when I used it on a project everyday for three months.

Generalists, communication and intangibles

You should want to be great at your job and you need to know a lot about a little to figure out when to use the right tools. There's a new conference, Blend Conf, dedicated to generalists (to user experience, design and web development) and it underscores how these disciplines work best together. Technical skills are just the tip of the iceberg, people with successful web design careers are capable of a lot more:

  • Collaboration is a superpower, if you can work well with a team, you are able to do your best thinking with others and come to much stronger conclusions
  • Estimating work accurately, being able to understand the effort that goes into a project and outline the assumptions that need to stick for the work to happen
  • Training, documenting and anticipating questions for those involved on a project
  • Putting users first, advocating for the audience and making decisions that put their interests in mind

Building on what you know

It's funny how controversial and how much debate advice like "diversify or die" can spark. In the end, the most important thing is to recognize your strengths and build off of them. The web is an exciting industry and it's one that is full of talented people (why else do you think there's so much emphasis on building a great culture so people will want to stay at your company? And so many ping pong tables and happy hours?) — if you want to develop web design superpowers, work you ass off and never stop learning.