What it takes to be a modern web designer

By Geoff Muskett

Having worked as a web designer for a good ten years or more now, I don’t envy someone at the beginning of their journey into the profession. The amount of learning required seems overwhelming. From basic design principals like visual hierarchy, white space, layout and much more, to client side HTML, CSS and JavaScript, to server side PHP, Ruby, Python. I could go on, and within each of those headings there’s branches that someone could spend a career focusing on. But here’s the thing…

To be a web designer you don’t have to be master of everything. Be good at several things, notably design and front-end code, and know where turn when situations crop up that are outside of your skill-set.

The Generalist Web Designer

I’m talking about a freelancer, or perhaps the sole ‘web guy’ in a company. Someone who needs to be versatile, able to start jobs from scratch or pick up where another designer or developer left off, or take a job so far and send it to a backend developer to implementation, for example. For this kind of role you can have a best practise workflow, but it’s rare that a job will fit exactly into these guidelines so flexibility and a wide ranging skill set are important traits.

1. Web designers design in code

After initial research and wireframe sketching, my design process is 50% in illustrator / Photoshop, 50% in browser. Working this way means I can quickly get some ideas and visuals together. When I’m fairly happy with the visuals I’ll jump into HTML and CSS to continue the design in browser. I may jump back to Illustrator to visualise new sections or modules, but then as soon as I can it’s back into browser again.

What a client sees what a client gets

Working this way means all stakeholders can see exactly what they’re getting in their own browser, be that the latest version of Chrome, a ye-oldy IE browser, or even their phone or tablet. In my opinion this is much better than a potentially unrealistic static visual and can highlight issues at a very early design phase. A mockup in code allows for interaction, a canvas-less view and of course the ability to resize the browser to see how the site responds.

It looks like Adobe are trying to address the issue of fixed Photoshop style canvas sizes with a new product called Reflow. It looks interesting and could fill a gap in the market for comping together responsive designs. But someone who is a fast coder has the benefit of having done half the job by the time the project reaches the mockup stage, in terms of useable code. This of course has a knock-on benefit to the client regarding project cost and timescale.

Working in a browser also allows you to use web fonts that may not be available locally. Google Fonts allows you to download fonts to use locally in comp’s, which can be handy. However, TypeKit is the choice for quality and use of fonts from big foundries such as Adobe. Which is not surprising as it’s an Adobe company. It also feels good to pay, which may sound strange but if someone has done some good work they deserve to be paid for it.

Production quality HTML and CSS

Even when a design progresses to the later stages I’m tweeking elements here and there, in fact in my eyes even a published website is a live piece of work that can, and should, be iterated on regularly. So a web designer must know HTML and CSS to a production quality level. Some JavaScript skills are important too, but I think an in depth knowledge is simply a bonus. If you’re a full blown front-end developer then deep JavaScript skills are essential, but we’re talking about designers here. If a designer is good with CSS, jQuery is not a major leap, and if he/she knows even a little programming then conditional statements are easily within grasp. Before you know it, there’s some basic JavaScript going on.

Programming and designers

The generalist designer should know a little about programming, for example a working knowledge of PHP is essential for developing WordPress themes. It also helps when designing systems that need to be handed over to developers, knowing the possibilites can help make decisions that ensure a project runs smoothly for everyone involved. When working with developers, having some knowledge of programming means you can at least understand what it is you’re asking them to do, and take on board their suggestions for how best to achieve it. A designer doesn’t need to go far beyond this point otherwise more time will be spend developing than designing.

2. Willingness to learn

With so many aspects of web design, there’s great potential for learning. It’s one of the great things about the industry, but also one of the most difficult. It can be tough to justify taking time out of a busy schedule to learn new things, but it’s essential for modern web designers to embrace change. Whether it’s brushing up on languages, embracing new properties in HTML or CSS, or adjusting workflow, web designers have to continually evolve or risk becoming stale.

At a local gym I recently overheard a [retirement age] lady talking about Badminton. She said she couldn’t hit a ball the first time she played, even with a larger head tennis racquet. So she cleared a wall in her garden shed, got a racquet and shuttlecock and started practising hitting the ball against the wall. New she is able to have confident multi-shot rallies, using a Badminton racquet. A very inspiring person and proof that practise makes perfect. We can all learn new skills, it’s a case of setting aside time to do so.

3. Live creatively and make things

Web designers need to be creative individuals, and in more than just a visual sense. The generalist web designer needs to be able to design and organise systems to make a user journey simple and logical. He or she also needs to be creative in code. Quite often it takes a an unusual approach to display an element in a certain way. Problem solving is at the heart of any design principal, but especially web design because of its many faces.

The best way to become a good problem solver is to make things regularly. Side projects are a great thing, whether it’s a piece of print design, illustration, art, or something physical, there will always be challenges. I’m no neuroscientist, but it stands to reason that the mental process used in overcoming those challenges will be similar, and therefor exercising and growing that part of the brain. So when a web design challenge presents itself the brain is better equipped to tackle it successfully and quickly.

Quick plug here for my side projects: The Paint Room and Newquay Handball Club. The Paint Room is helping me find my roots and bring them back into my day-to-day. Often artistic people turn to graphic design, then from graphic design to web. This was my journey (via product design too), so it’s nice to revisit what got me being creative in the first place.

Ideas are precious, don’t loose them!

Carry a mini sketch book, use Evernote or take photographs. Choose a method for recording ideas when they strike. There’s nothing worse than having that light bulb moment and not being able to remember it later on!

4. Staying up to date

I feel guilty about not using time productively. For example when I’m driving I listen to web design podcasts. Particularly the Shop Talk Show, Boagworld, and The Big Web Show. There are lots more but these are my staple and help me stay current.

Twitter is another good place to stay up to date, but there can be a lot of noise. I prefer RSS, however after Google Reader ceases to exist I’m not sure there is a lot of future in RSS. Of course there’s email newsletters, .net and Treehouse always pack their newsletters with web goodness.

5. Empathy with users

Discovering the problem the user is looking to solve is key to a successful outcome. If it is an existing site one way this can be done is with surveys.

Google Forms are brilliant for detailed surveys but you may need an incentive to encourage users to fill them in. Whereas for getting very simple but targeted feedback Qualaroo is ideal. It’s basically a slide up panel that asks one simple question, it’s just as easy for the user to answer as it is to close the panel. Settings allow you to target returning visiters, users who entered through a search engine, users on their third page and loads more. This means you can avoid annoying everyone and target the users you really want feedback from. It is also possible to have a call-to-action on the success/thankyou screen on the Qualaroo panel. If you are running a more in-depth survey with Google Forms you can link to it from here. Everything ties in nicely.

Of course you can’t beat meeting users, or target users, in person. Invite people for a focus group or even better, go where they go. If it’s a site for a Gym, go to a gym and talk to people. This type of research is invaluable.

To state the obvious, websites are meant to be used by people. A site that the designer and client think is easy to use may not be to someone who is discovering the site for the first time. So user testing is important, a great tool for quick results is usertesting.com. However this should be done in conjunction with real life testing where you can have a conversation with the person. This type of testings leads to a deeper understanding of their thought process. The more a designer understands the better the solution will be.

Jack of all trades, master of some

Clearly the generalist web designer needs to be a master of many things and have a decent understanding of others. So there’s a lot to learn and the best way to do that is to make websites. All sites come with their own challenges, working through these and finding solutions is the best way to learn and remember. Even if it’s tough to recall the exact code, having achieved the solution in the past means gives a permanent reference point, and often the opportunity to reuse code.

Web Designers do however need to know their limits. It could be dangerous to attempt certain things without sufficient knowledge, insecure login scripts for example have the potential for injection attacks. It’s better to let the backend guys and gals worry about that, designers should concentrate on honing front end skills and creating beautiful and useable interfaces.

Comments

Fireworks is dead, web designers use Adobe Illustrator instead | Geoff Muskett
June 18, 2013

[...] you can have any number of different sized artboards. So if you’re comping static visuals (which isn’t necessarily the ideal workflow), you can set up one for large screens, one for medium screens and one for small screens and [...]

blog1 The History (Evolution) of Web Design | bubbles67
October 10, 2013

[…] http://geoffmuskett.com/what-it-takes-to-be-a-modern-web-designer/ […]

Jay
December 11, 2014

Great post. It can get overwhelming keeping up with new developments. Good to get some perspective.

Geoff Muskett
December 20, 2014

Thanks Jay! Chill out and learn at your own pace is my advice.

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.