You're a developer, not a designer. I get that. But to say you just "can't do front-end" is just plain wrong. Especially considering the tools that we have available to us today. I think you'll find if you learn to walk like a designer (and by that I mean learn your way around HTML, CSS and SCSS enough to produce quality work), you'll be pretty proud of what you can accomplish.
Stop the "I only do back-end" mentality
Let's make "full stack" development just part of the job
Improvement starts by not glorifying the fact that someone is a "full stack" developer. These days, most of us are not working on massively complicated systems. More often than not, we are working on products that are used directly by customers. As developers, why are we putting ourselves in a position to have to hand portions of a project off to someone who is "better at front-end" than us when, with just a little effort, we could take a feature to completion?
Instead of just handing over a Photoshop document, designers are now expected to know HTML, CSS and probably a css pre-processor like SCSS. Developers need to master these skills as well. It allows a knowledge overlap of the middle ground, which will increase efficiency of the team and ultimately, create better products.
Here's why this is awesome:
- You as a developer can take a feature to completion.
- Designers will not come to you the second they are done with Photoshop.
- If you want to work on a side project, you'll be able to do a decent job with it and won't need to hire a designer to make it look nice.
- You start thinking more about the customer. When working only on back-end code, the customer is the furthest thing from your mind. It's amazing how much better your work can be when you think of how a human will interact with it.
- It will make you more marketable, which can increase your salary, or allow you to start a consultancy.
Here a a few things you can do right now, to make yourself better at front end development:
Quick Hit #1: Learn the grid
Laying out on a grid is the foundation of a good design, and will help solve issues with whitespace or things feeling crammed together.
By far the easiest way to get started with laying out pages in grids is to use a framework like Bootstrap or Foundation. Paired with a browser plugin like Grid displayer, you can look at the grid for any Bootstrap or Foundation site. This will get you to start thinking in grids and see how other people have used them. Pay attention to how a grid automatically helps your content "breathe" and makes your layout uniform.
Quick Hit #2: Imitate good designs
Find a site or UI that you like and learn how to implement it. And don't just copy and paste, either. Take the time to learn how each piece fits together and why each line of HTML or CSS is there. See how it fits into a grid, and how it enhances the overall experience. Maybe they use a great responsive design and you like the experience on your phone. Or maybe there is a creative approach to navigation.
Once you do this a few times you'll learn all kinds of new techniques that you can immediately start applying to new work.
Quick Hit #3: Pair with someone who's better than you
Front-end development is extremely important. It's how your customer interacts with your product. Work out some of the quick hits I mentioned here and let me know how it goes! If you need someone to pair with, give me a shout.
Learned something new?
Get my best development advice (almost) every week, right in your inbox.Join Level Up