It’s not common for someone to be a designer and a developer. Typically there is a designer and developer for each project. Two separate people with two separate roles.
A designer is someone who decides what a website will look like — color, fonts, layout—while a developer is someone who builds the website & makes it actually function. A designer creates mockups for a website and then the developer builds the interactive website based on those mockups.
I’ve always been a designer and developer, even before I knew what the distinction meant. When I graduated college, I thought people who “made websites” designed them and then built them. And at my first agency job that’s exactly what I did. I made the mockups for the website and then I built that website. It wasn’t until I went full-time freelancing that people started asking me if I was a designer or a developer. I felt like I had to choose between the two because almost everyone in the industry does.
I asked myself, would I rather design websites or build them? I slept on it and still couldn’t come up with a decision. I loved design and I loved to code, and I didn’t want that to change. Deciding to be a designer and developer made sense to me, and I think it also makes sense for many businesses that need help with a website.
Businesses typically either hire an agency that has in-house designers and developers or a business hires a freelance designer and a freelance developer to work together and create a website. However, hiring someone who’s a designer and developer provides benefits beyond only having to hire one person for the job.
1. Designing with Code in Mind
When I design mockups for a website, I know exactly how I will build it. Sometimes developers are handed the mockups to websites that were designed to look good but won’t, in reality, function well.
Factors such as page load times, flexibility of device-widths and cross-browser support are sometimes overlooked in design but need to be considered during development.
Then the developer has a challenging tightrope to walk. The developer wants to honor the mockups provided by the designer, but also knows some of the design decisions will affect the website’s performance.
The time it takes for a developer and designer to work through these issues of design vs. performance can eat up a lot of time.
When I design websites I’m thinking 10 steps ahead. I’m thinking about the unique challenges my design will create when I’m building the website.
Will a client be able to easily update this?
How will this feature look on Internet Explorer?
Will this page load quickly?
How will this absolute positioned SVG shape look when the device-width changes?
Many skilled designers these days learn enough about code and CMS frameworks to be able to make design decisions that look and function well. On some projects, I’m solely the developer and a project is always more enjoyable when I work with a designer that at least understands how a website comes together — from the website’s framework to it’s performance.
2. Integration of interaction and animation
Design mockups are typically created using static tools — Adobe Photoshop and Sketch — and it makes it difficult for animation, movement & interactivity to be considered and then communicated. Many times mockups only include animation notes for hyperlinks, buttons and menu items.
Prototyping tools like InVision allow designers to design complex animations, but I still think having experience as a developer helps when it comes to interactivity.
As a designer and developer, I design with interactivity in the forefront of my mind. I love to build animations with code and therefore I include it in my designs. I see a website with stunning animations, and it becomes a personal challenge to know how it was made. When a designer creates mockups with static tools it’s challenging to think critically and creatively about how the website will move. As a developer, you know interaction and animation intimately because you build it everyday.
I believe interaction is the perfect marriage of design and development. It’s best when it’s creative and functions well.
3. Making a custom website that a client can maintain
Today, a website not only has to look good and function well, many times it also needs to be easily managed & updated by clients.
For example, a publication site like Man Repeller needs to have a framework that allows any person in the office to easily post an article, gallery or blog post. And when any person hits publish, the finished product should look good every time.
Making a durable, flexible and attractive framework is a challenge, and it’s a challenge best suited for someone who has the mind of a designer and developer.
I approach these types of websites development first.
I first construct a framework that I know will work. All custom functionality needs to be tucked in the backend and the CMS should remain user-friendly. No HTML markup in the text editor.
The framework needs to be flexible. The design should look good if the article title is one word or ten words, or if the article has no images or twenty images.
Once you have a user-friendly and flexible framework, then you can add design details that make the website look more unique than an out-of-the-box Wordpress blog. These custom details should not intrude on any user-friendly features.
Being a designer and developer is an indispensable advantage when creating websites that need hands-off maintenance from the clients. I can make a custom, beautiful website that can be updated by any intern.
Conclusion
Being a designer and developer was an easy decision for me because it’s all I know. I have a natural eye for design, while loving the technical challenge of development. At first, I decided to be designer and developer because it felt natural to me, but I soon came to learn that it provides a unique advantage for my clients. My clients also benefit from someone who’s considering functionality, maintenance, performance and interaction from the beginning.
I design with a developer’s critical eye for functionality and I develop with a designer’s attention to beauty. I wouldn’t have it any other way.