How a Single Front-End Engineer Can Replace a Team of Two

Thinking With Two Minds

Demand within the web design scene has changed over the past few years: designers with front-end skills, and front-end developers with design skills, are more and more in demand. Yes, you could argue that the jobs are completely different—and maybe you straight-up don’t like one of them—but truth be told, in my six years as a freelance web developer and twelve years as a designer, I’ve learned that it’s much harder to get by as just a web designer or just a front-end developer than as a front-end engineer that knows both roles.

Wearing both hats has a lot of advantages: from a professional perspective alone, you can find work more easily and charge a higher rate because you’re bringing more to the table.

But working as a hybrid front-end engineer also has a few disadvantages that you need to know about—and how to work around them. As a creative designer, you will use your “right brain”, the half responsible for visual, spatial, and perceptual information—in other words, all things pretty in web design. As a technical front-end developer you will use your “left brain”, the logical and analytical partner to your crazy artist on the right.

And, since you’re just one person, this means that you’re working two totally different jobs at the same time, with the same brain—and that can get downright confusing for your brain. If you can’t handle it, you will not produce quality work, or reach your full potential. And, if you’re a freelancer trying to live up to a hybrid front-end engineering job description, you’re probably competing against a team of two (developer and designer), so you’ll have to work under the same timeframe while retaining quality. (Of course, you can also get paid as if you were a team of two!)

Knowing which part of your brain to use and when to use it is the key to streamlining your processes and producing the best results with zero frustration and ample time to spare on your deadline. Regardless of where you’re lacking, on the left or the right, this post will help you understand the skills you need and the ways you can acquire them.

One Night Stand With Your Project

Ok, ready? Great! Let’s say that you’ve been asked to design the site for miniCloud, a budding startup offering custom VPS solutions. Where do you begin?

Before I start any “real” work on a project, I like to go to bed with it. This means doing thorough research about your client’s product, services, competition, etc. In short, Google the hell out of it. After that, think about the project all day: How will it look like when you’re done with it? Take it to dinner, and fall asleep with your new, sexy design in mind. During this stage, always have a pencil (or mobile phone) ready to write down ideas as they come to you. This kind of mind work usually helps define key aspects of your process.

Personal tip: I’ve found that oftentimes the “advice” I get from people not related to the client, project, or web design for that matter will give me the best worst advice. So when I hear their suggestions, I know exactly what not to do. It works for me!

Let Your Creative Juices Flow: The Design Process

Now that you have some ideas to build off, it’s time to begin the real design process. This consists of three steps: 1) sketch, 2) wireframe, and 3) graphics. This is the part where you let the artistic half of the brain do its thing and go nuts with pencil, paper, and Photoshop.

During this design stage, It’s crucial that you let your “developer” side keep you in check so that you don’t go crazy with some aspects of the website that will be next to impossible to quickly recreate using HTML, CSS, and jQuery. If you try to reinvent the browser, your front-end developer will hate you for it. And your front-end developer is you—remember?

So, be guided by the best practices of web design (and some common sense), because it’s highly unlikely that you will be breaking any new ground by redesigning your friend’s wedding dress website. This isn’t to say that you shouldn’t aim to create a fantastic and impressive design. But rather, come up with something you know is feasible. Projects that re-invent the web are usually done in your spare time with no deadline hanging over your head.

Personal tip: When I design, I like to tune out all of the outside interruptions and devote my undivided attention to the task at hand. That means no phone, no Facebook, no Twitter, no making sandwiches, etc. Just work! It helps me to listen to something that I’m not familiar with, something with lyrics that I don’t know (like Vocal Trance), otherwise my ADHD kicks in and I’m singing and dancing in no time. We don’t want that.

1. Sketch: I start off with a squared paper notebook and a couple of pencils. Squared paper is particularly great because you can use it for grid-based designs. You’ll have no problem later on when you translate your sketch into wireframes and, at the very end, onto a grid-based website. For miniCloud, our sketch might look something like this:Please note that additional details on the sketch, like snow, birds and clouds, are the product of my procrastination and are not mandatory in any part of your design process, but they look nice.

   Personal tip: There are some great resources online where you can download and print sketch sheets. One of my favorites is sneakPeekit. They also have sheets for mobile and tablet design.

2. Wireframe: Now that we have a basic idea of how our site will look, it’s time to create wireframes that we can show to the client. There are a lot of ways to get this done. In some cases, you can skip the step entirely if you feel there is no need. Personally, I use Photoshop to wireframe my idea since it’s the tool I’m most familiar with. There are a lot of free wireframe kits in .EPS or .PSD that get you started in seconds, so there is no need for you to create and draw all of your elements from scratch. There are a few online solutions as well if you want to avoid Photoshop, but I’m more of an offline kind of guy. Anyway, expanding off of our sketch, we might wireframe our website like this:
3. Graphics: This is my favorite part: transforming our wireframe into a beautiful website. But not everyone is me. If you’re primarily a developer and have slim-to-no talent for design, colors, typography, etc., I would suggest starting with other websites for design inspiration. There are a lot of them, and they’re covered in great ideas—who knows, maybe there is a designer in you just waiting to come out? I find it helpful to keep a bookmarks folder of websites that I find particularly good-looking or well designed. Picasso (?) did say, “Good artists copy but great artists steal”—that doesn’t mean you take someone elses design and put your sticker on it. Instead, get inspired by someone else’s work and add your own spin and approach to it.I do all of my designing in Photoshop. Ideally, your client will supply you with raw materials to work with, like photographs and copy text that you can use instead of placeholders. It looks much better when you send it to revisions.So, for step three, we take our wireframe and bring it to life:

Personal tip: If you don’t have clients materials, use stock photos and some text that isn’t Lorem ipsum, to avoid questions like “Will that text in Latin be there always?” and “Why are there grey blocks on our website?” If you do find yourself using Lorem ipsum, this generatorcan come in handy.

By the way: if you do end up using Photoshop, there are a lot of cool resources out there that will make your process a lot faster, like plug-ins and styles. I could write an entire post about them alone, so I will just point out a few that I use often.

1. CSS3Ps: Free cloud-based Photoshop plug-in that converts your layers to CSS3.
2. Divine Elemente: Creates WordPress themes directly from your PSDs. It’s great for quick starting your WordPress project. Although they say “No HTML Skills Required”, you will actually need some if you want to get awesome results.
3. Subtle Patterns: Collection of free patterns to use in your designs, usually as backgrounds. Details like these make all the difference when you’re trying to take your designs from good to awesome.

Personal tip: When designing in Photoshop, make sure you group and name your layers correctly, so that when you need to make changes later, you don’t need to search through dozens layers named “New layer 1 copy 01”. Trust me, when you have hundreds of layers, you will thank yourself. If you’re interested in fully utilizing your layers, check out this guide.

 


    
 
    


    
 
    


    
 
    


    
 
    


    
 
    


    
 
</div>

Also published on Medium.