How I approach web development as a graphic designer

Published March 16, 2019
.* :☆゚

I work at a small studio with two other people, and more often than not, I work on projects where design and development cross paths.

I’ve built a lot of sites on my own, inherited a lot of sites, worked on sites other designers have designed, worked on my own boilerplate code, finished half-finished sites done by other studios, interpreted designs on the fly (especially designs with no mobile versions) and worked on sites collaboratively with other developers.

I’ve been able to learn a lot doing digital design/development professionally over the past three+ years, and it’s been interesting to see how much these two disciplines have evolved. For me when I began this journey on the web, practicing both design AND development wasn’t very common. The term ‘digital designer’ didn’t even exist in job ads, even though websites and apps had been around for years. You were either a designer doing visual graphically stuff with maybe some admin or marketing work thrown in, or a developer for web. Working in the in-between was few and very far between.

In a small and isolated city like mine, it was hard to find a designer who also had my same amount of interest in the web. In fact in my graduating year, literally no one in my class knew how websites worked, so I was tasked with building our website and organising the content since I’d been building websites since I was a teenager. UI/UX was barely touched on, and my course hardly had any digital content in it either. The one web unit we had was actually quite good in teaching the fundamentals of how a website is constructed, but the fact remained, I don’t think anyone in my class was actually interested in the digital side of things at all. Lest I remind you, this was only three+ years ago.

The general consensus among my design peers, teachers, and industry leaders was that if you were a designer, you were going to be designing either brands or collateral for print. If you did both design and development you were considered a ‘jack of all trades’, master of none. This is why for many years I felt a bit lost as to what I should have studied, because I knew I wanted to do both design and development in the future.

After all, I grew up maintaining several blogs and websites, and whilst I loved branding and layouts and packaging in design school, my passion has always been digital. I’ve always felt confident in my style and abilities, but getting to that point of combining both design and development professionally was really hard for me because digital design was only just emerging as a legitimate role when I finished studies.

These are some of the things I’ve learnt along the way.


You don’t need to know code to design for the web…but it helps a lot

I know many designers who tried getting into development for more employability. I also know many people who think it’s actually better to not know any code at all when designing for digital mediums because it means you have fewer known constraints. So who do you want to please?

Only you know what you are good at, so only you can decide what to focus on.

This is probably beating around the already dead bush, but if you don’t actually have an interest in coding, don’t code for the sake of it. The web industry is fickle and hard to keep up with, and what was trending a year ago may be redundant in the next. If you want your design and code to be resilient, you really do need to have a solid understanding of what makes a good website. Adding development research on top of design news and trends can quickly become a chore if code just doesn’t interest you.

If you decide you do want to explore the development side of things, you don’t need to go all in and immediately start producing apps and plugins. It is much easier to start small and solve a small problem, than to try to dive headfirst into something which you have no knowledge in. Know what you can do, and what you want to do, and go from there.

There is nothing wrong in using something like Wix or WordPress to learn the basics. Whichever way you want to learn code, knowing how a page is structured and styled is always useful to know when designing for web. Hacking themes and constantly trying new things has worked for me so far.

Learn how to research effectively

I’ve produced a lot of websites based on designs coming from other designers, and some of the experiences have been painful. I’ve even written a custom manual at work to send to designers on things to consider when designing for the web.

Research is an integral part of any design process, digital or not. If you can’t research examples of responsive menus, understand how a website can collapse for mobile, export images for web, or consider typographic hierarchy that makes visual sense then I question your ability as a designer to start with. If you don’t know something, google is always available.

Things I’ve shockingly had to explain includes how a browser resizes, the importance of outlines around elements, the visual hierarchy of headings, how responsive menus should work, how to export images for the web, how font licensing works etc. I don’t claim to know it all, but it doesn’t take a genius to work out you need a separate license to use a font like Gotham on the web. I would expect a designer to know this, even if they don’t design for the web!

Ask a lot of questions, even if you think they sound dumb

Asking questions is the only way to improve and learn, and if you are attempting to self-teach yourself, this is even more important. There is no such thing as a silly question. If you feel like the person you are asking is judging you, then they aren’t someone worth asking for help again.

There are so many options online like stackoverflow, reddit, or various slack communities. Google is literally a click away. Most of my code is guided by simply Google searching the best way to do something.

The most valuable resource is definitely someone you can converse with one on one though, so if you know a developer personally, it’s 100% worth picking their brain to see where to start development-wise, and what to focus on.

Listen to the client

This is where design overlaps with development for me, because successfully meeting a brief often means putting aside ego and what you want to do stylistically and according to your own preferences.

To me, a good designer or developer is someone who is able to listen to the client, receive critique and apply it to their work, sell their work and suggestions, make inclusive design a top priority, and be open minded about new ways of thinking to solve problems. Both disciplines often require some degree of abstraction, as well as the creativity, communication, and problem-solving skills.

Clients know their audience and what they want to achieve. Listen to their feedback and don’t automatically dismiss their perspective because of your own bias.

Always ask why

If you’re designing or coding, always ask why, especially when you feel like there could be a better way of doing something. Ideally, this should happen before the development process starts, when you’re running through the initial design. This is an important step, because oftentimes there’ll be awkward things to code along the way that can take a long time to undo/refactor. This is why I feel it is important to understand how the entire website should operate before coding anything. Knowing how the pieces will fit together in the end can greatly inform you on how to lay out the foundation of the site, which arguably is the most important part of the process. Inevitably, designs often change along the way but it is good to know about any important functionality before starting the development phase.

It’s the little things

Whether you are designing for web, or trying to code and design, it pays to focus on the little details. The small but perfectly timed interactions. The way menus can slide in and out of the screen. The way text is set against some images. These are all things people notice, especially on mobile devices where screen real estate is less. It might take a bit longer to create these things but the payoff and user experience is worth it. The key is knowing when to reign it in.

Read from a lot of sources and form your own point of view

To keep up to date with development and design news, I use sites like Twitter and Invision’s Muzli extension. I also subscribe to lists of blogs I follow such as CSS Tricks, Smashing Magazine, TypeWolf, Web Tools Weekly, Dense Discovery, Clark from Invision and sidebar.io. You don’t necessarily have to agree with everything these blogs say. It’s just useful to read up on different techniques and tutorials, see how other people are working, and decide the techniques and methods you want to use for your own everyday work.