A letter to a future front-end designer

I had this very nice person contact me a while ago and ask for an advice: what to consider, study and learn when starting a career in front-end design. How did I end up where I am now and do I still enjoy my work? How is my typical work day like? What kind of challenges I face daily? Where I see this field going in the future?

Phew, there is so much I can think is relevant to this profession. I may have left out bits and pieces about say, the difference between UI and UX design, as I see those two often overlapping and tend to be involved in both. So anyway, with her kind permission I’m publishing my answer (with just a bit of editing for clarity), hope it’s of any use to someone considering a career in front-end design:

“Hi, nice to meet you!

I’m glad you’ve found something interesting to work on, and of course happy to tell you anything I can to get you forward. Sorry if this came up as a full novel :D

So why did I choose this career:

I actually started on websites quite early on. I think I was 13 or so when the Internet went “mainstream” and it fascinated me how easy it was to publish your own content. That’s when I got the spark and it’s still there :) Obviously building sites is much much more complicated these days, so I can only imagine how it feels to start now compared to then.

After high school I went to study Media Engineering, but disliked all the math and physics (in which I basically suck). After a year I got enough and moved to Tampere to study Bachelor’s in Interaction design. Later on, I did my Master’s in Media Production and got interested in Lean UX (a buzzword of 2015) and agile workflows.

In the beginning I worked as a full-stack designer/programmer in a product house for a few years and learned a lot about building complex UIs with basic JS. I realised I wanted to pursue a career in UI design the most, so I switched to an UX agency. It was pretty easy to get the job, since UI programming is not something UX designers usually do, yet it was (and still is) in high value.

I did mostly prototyping for a few years, but since programming was in too high a value, I never got to the designing part (since I could’ve done the designers’ job, yet they couldn’t stretch to my area). The most interesting tasks here were mobile prototypes (built in HTML/CSS), where more creative interactions are possible (and very fun to implement). I also learned a lot from the great in-house designers while working there. When implementing other people’s designs you actually have to take a close look and think about what works and what doesn’t.

The next job I took in a small IT company, and here I still am. I value the freedom of being one of just a few designers (I actually get to design), yet I can go as deep (or shallow) to technical side I like. The support from the tech team is invaluable, so I don’t need to use time to understand every technical tool and learn every command line row.

What’s my typical day like?

That would depend a lot on the situation, the project I’m working on and my role in the team. In an UX agency I got the layouts from the UX or graphic designer and pretty much copied it to code. That’s a somewhat old-fashioned way of doing stuff. In an agile environment I tend to communicate with the team and the client a lot, creating the ideas for concepts and interactions together.

For example I: facilitate workshops and co-design meetings, go through the new design or implementation with the team and client, create new layouts and concepts, build components and style guides or just work on the production UI, testing and fixing the codebase. Depending on the role, the actual coding or drawing is sometimes a minority of the work, collaboration, negotiation, co-creation etc. taking up so much time.

I love concept projects with little limitations, but that’s mostly agency work. I think most of the UX concepts I’ve been involved with have been discarded altogether or implemented very differently in the end, which is not very rewarding, yet seems to be quite common with agency handovers. Working in a full-stack house is a bit different, because things are actually built for production.

Currently I’m working on a large, responsive application and would consider myself as a R&D designer, working on actual limitations and restrictions of a production system. In detail, I’m working on a prototype and a living style guide, which is also the UI and feature documentation for the programmers. The living style guide also offers the CSS for the production code. It’s sometimes a bit boring (to work on the same components for years) and also very rewarding (to create something very complex and detailed for real people to use).

And where is this field going?

It’s quite interesting how things have changed in just a few years. Front-end used to be built by media agencies and “non-coders”, and traditional IT houses mainly thought it to be the necessary evil. After the rise of UX profession (demand for more complex UIs) and the rapid development of browsers, the “real” programmers started working on front-end and suddenly it went from a few lines of JQuery to really complex architectures and development environments.

To be honest, I’ve pretty much stuck to HTML/CSS and cared less about all the JS frameworks that have come and gone in recent years (Knockout, Angular, Polymer, React, …you name it). These libraries will continue to evolve, and I’ve yet to see a complete solution.

I tend to use JQuery for most of the UI prototyping, because it only affects the UI and I don’t need to think about the data architecture at all. Knockout is great for more complex prototypes because it’s pretty simple and works with Jade. We also use it in production for our own product. Otherwise React and Clojure seem to pretty much be the thing right now.

On the graphical side, SVG assets and vectors are now all over the place being responsive and all. Icon fonts are slowly losing popularity. No-one should use pixels or fixed breakpoints in design anymore with all the different pixel densities and screen sizes, except for photography of course.

Responsive and mobile-friendly sites will continue to gain popularity and there will probably be a counter effect for JS libraries growing in complexity. Heavyweight browser apps will continue to utilise large JS frameworks.

AI will design most of the simplest webpages quite soon and growing cloud hosting services (think Squarespace etc) will eat man-hours from the most repetitive tasks on the front-end field (basic CSS/HTML websites). Service design domain is growing though.

New options like CSS blend modes will become available soon, that will give more design options now after animations have become mainstream.

React Native is a promising tool for creating native apps with web technologies.

Lean workflows and marketing analytics and testing will slowly become part of the design work. Business intelligence, big data etc will have some effect on the UX field. VR and augmented reality skills will be in demand in a few years.

So what to study?

I think there are (at least) two kinds of front-ends, you can either be a bit on the technical side, or on the artsy side. I’m definitely more interested on how things look, whereas programmers better than me are interested on how things work under the hood, are they performing well, is the codebase easily maintained etc. This is why I love building prototypes and concepts, I have to care less about the quality of the code and architecture, and concentrate on the look-and-feel.

Depending on where you want to position yourself, you should dig deeper into front-end programming or UI design and graphic design. I’d recommend choosing a distinct vertical skill (JS programming/architecture, UI design/prototyping, graphic design/asset creation etc.) that you can use to sell your talent in the beginning. From there you can start building your horizontal skill set.

I tried for a long time to be great at every skill (and you could do that before), but things are evolving so quickly that you just can’t be awesome in everything at the same time. If you’re able to learn the basics of tech side and yet create beautiful interfaces from scratch, you’ll be in a very good position employment-wise.

And the resources?

I don’t think I’ve much used any books or apps or such to learn, Google is a great tool for finding an endless supply of resources. I do follow some quality publications, such as Smashing Magazine to keep track on new trends. Mostly I follow sites for UI inspiration, Dribbble, Behance and Awwwards almost daily. I also follow browser development quite closely, to see which CSS properties will become the next big thing.

What you should definitely learn (in my opinion:) is preprocessing languages such as Jade (HTML), Stylus/SaSS (CSS) and maybe CoffeeScript (JS). These will speed up your workflow immensely and you can keep your codebase cleaner with variables etc. Also get to know CSS naming conventions, such as BEM (which I tend to use).

To learn CSS, the best way is to practise and build different kinds of things, and to read the very boring specs :) Avoid using ready-made grids and frameworks, but try to build from the ground up and really understand how the browser renders everything. CSS frameworks can be used to understand how to make your own, though. I’ve interviewed a lot of front-end designers lately, and when someone says they can do HTML/CSS, it often means they can copy and paste lines from Bootstrap. Creating an actual custom product requires much more than that.

I think the most important thing for building front-end code is to grasp the basics of vanilla Javascript (probably ES6 at the moment). That gives the tools to quickly learn any JS library when necessary. Even to have said that, knowing the pros and cons and basics of each popular library doesn’t hurt. Also to understand the model behind the architecture (MVC etc) helps to quickly get new tools. I wouldn’t dig too deep into these though, since they will change.

I’ve found it very handy to understand a bit about Node.js (even more if you’re interested in the backend side) and dev tools like Bower, Grunt (these are probably legacy by now, there is a new and shiny favourite tool every week), but I tend to leave tinkering with these to programmers who actually like it. If I do something just by myself, I use a GUI tool, CodeKit nowadays to build the assets. Understanding version management and knowing Git could be an advantage.

If you’re applying for front-end positions, I’d advice publishing to Github/Bitbucket for a code portfolio and if on the graphical side, Behance or Dribbble and adding these to your CV. Also I think your previous experience could be an interesting asset for UX/service design skills which you can add to your front-end design knowledge. Cross-functional skills are all the rage now :)

So that’s it, I hope you got something useful out of this flow of thoughts, and that I even remotely answered any of your questions :D

Wish you the very best on your career of choice,
Krista”

How would you advice a future front-end design superstar? I’d love to hear your thoughts: did I miss something important or do you disagree with me? Or if you’re a beginner, was this of any help to you?

Show your support

Clapping shows how much you appreciated Krista Jouhtimäki’s story.