Front-end or Web Design
“Wait a minute. Your last blog was about Front-end Development. Now you’re talking about Front-end Web Design. They’re the same, right?” Honestly, the correct answer is a confusing “maybe.” Last time I laid out the skill set and importance of the Front-end Developer and how they fit into the creation of an app or website. I also continued with the lovely house analogy of how to compare back-end development to front-end: back-end people design the blueprint while front-end people are the interior designers. If you want to go back and see what I wrote in more detail, you can do so here.
So what is the goal of this blog? It’s simple: to educate and share information to those that are just starting out in the field and are looking for some clarification. We’ll go over some common roles, skill sets and (further along) techniques that will hopefully help you in your education and career choice(s). I’ll begin to introduce you to some new concepts and roles that you probably aren’t familiar with. Make sure you check it out.
Ok, so I’ve confused you. You asked about the difference between Front-end Development and Front-end Design, or Web Design. Are they different or are they not? It seems like a very straightforward question that should have a simple answer. The problem is, different companies may classify these roles under different titles. So while Company X (a truly inspiring tech-giant) may define a Front-end Designer as someone who just does pure design using tools like Photoshop or Illustrator, Company Z (who dominates the market place) may state that their Web Designer needs to do design but also code using HTML, CSS and more. For the sake of this blog, I’m going to split them apart and just classify a Front-end or Web Designer as a pure designer. You’ll need to carefully read the job descriptions on your own to find out how this breakdown happens on a per-instance basis. If you are a pure Web Designer, you get to design the app or website down to the pixel. All graphics, images, fonts and even the empty space (very important) is up to you. When you start as a junior in this field, you’ll either be working on a team or following senior and lead designers designs. But as you work up the career ladder, you will have more and more control over the look and feel. It can be fun, but it can also be stressful, as clients love to constantly change their mind. My favorite maddening quote from the President of a Fortune 20 company (yes, this is real): “That’s what I said, but it’s not what I meant. It’s your job to read my mind.” I digress. Front-end or Web Design probably has the easiest definition of jobs and skill sets that we came across so far. If you can see it on the app or site, that is Front-end or Web Design. Notice that it’s similar to Front-end Development, but Design doesn’t get to play with the interaction or animation- it’s just pure design. However, you would be responsible for:
- Overall look and “feel”
- Marketing and branding appropriateness and reinforcement
- Accessibility and usability compliance
- Colors, fonts, layout, imagery and proper use of empty space
As with all of the other roles that I’ve talked about, Front-end or Web Designers cannot finish a project on their own. They have to work closely with UX and Front-end Developers to bring to life mockups, wireframes and rapid prototypes. Once the project goes into final implementation, the Designer typically shifts to either the next project or the next iteration of the current project. As with all parts of Development and Design, the more you know about the other roles the greater you can integrate all of the parts of the project for a stronger application or website. The more coding skills you know and the more you can blur that line between Front-end Designer and Front-end Developer, the more marketable you’ll be.
Front-end or Web Design Skill Sets
“So, no code?” Well, yes and no. As I’ve stated several times (including the sentence above), the more code you know, the more marketable you’ll be. You’ll need to have a proper foundation in design, particularly in the differences between vector and pixel, RGB vs CYMK and how to properly create the files. You’ll need to have a good visual eye and how to properly use space, color and shapes to create a pleasing site or app. It would probably help you to either work with a UX designer or understand what UX (User Experience) is all about. We may just talk about that in a future blog. Compared to other roles, the skill set isn’t nearly as technical. However, that makes the judgment of qualifications subjective and up to the whim of whomever is interviewing you:
You’ll need to have:
- Fluency in Photoshop
- Fluency in Illustrator
- A great online portfolio via Coroflot, Behance or something similar on your own
It’d be great if you have:
- UX understanding and experience
- Understanding of Color Theory and proper usage
- Understanding or experience of Human Behavior
So what does this mean?
The Front-end or Web Designer controls the look of the site, but not the “feel” as they typically (but not always) don’t control the animations or interactions. They need to have a great understanding of design in general and be willing to continue to change and improve their designs down to the level of a single pixel.
How does this tie in with the house analogy?
Ok, back to the house analogy for the third time. Front-end Developers are the interior designers. They take all of the tangible assets and put them in the house to make it livable and cozy. Back-end are the people that make the blueprints. They decide whether the house is a connected condo, a ten-bedroom mansion or a one-bedroom starter home. You still need both of those roles to work in cohesion with each other to make a truly great home. Front-end Designers or Web Designers are the people that not only tell the Back-end people what kind of blueprint it needs to be (in general terms), but they tell the Front-end Developers what kind assets the interior designers will have access to. Yes, you may get a couch and three chairs in your living room, but that room will have great natural sunlight, so you will get a brown and comfy leather couch that you don’t stick to you when you try and get up and chairs will be appropriately positioned around a coffee table for conversational purposes. Front-end Developers have the permission to rearrange if necessary, but they’ll use those pieces of furniture.
…that’s great, but why should I listen to you?
My name is John Maier and I have 16+ years of teaching and over 25 years experience in UI/UX and front-end development. I am the Head of Design for an international company that creates apps and websites for a variety of government roles in Europe and abroad. I’ve worked for fortune 15 companies in both entertainment and health care fields. One of the biggest issues I’ve always had with education and learning environments is that they teach with the assumption that everything will always work smoothly and with level headed people. This is rarely the case as often egos, politics and technical issues complicate matters. This blog will be honest and from my point of view- what I like to call “the real world.” As with any complicated topic, there can be 50 ways to do something differently than the way I suggest or discuss. You may not agree with my decisions or conclusions- to think otherwise would be vain. But that’s okay- I’m always willing to listen to other ideas as communication, discussion and yes, disagreements are how we learn and grow. Find out more about our Web Developer program.