Upgrade This Skill To Be A Successful Frontend Dev
Everyone can code. It’s so easy that even kids are doing it. When you boil it down, code is just translating bits of logic into another format. Once you’ve got the general ideas down (loops, if-else, functions, classes, methods, modules, and general relationships), you can make almost anything you can dream up.
Code itself is not hard.
It’s the itty bitty side bits that make it hard.
For the frontend, there’s an additional visual layer. Art and programming is exactly an automatic connection for many, but if you want to excel as a frontend developer, you need to at least upgrade your aesthetic skills.
But what’s the difference between aesthetics vs artistic?
The difference between aesthetics vs. artistic
Artistic ability is the skill that allows you the recreate images from your imagination. It may be a direct translation of what you see. Or it may be a process of melting multiple images together inside your head.
Aesthetic skill is the ability to recognize visually pleasing patterns and recreate them as needed.
You don’t need to be an artist to have aesthetic skills.
You just need to have the ability to see the bits and pieces that makes a website, app, piece of software look good.
When it comes to aesthetics, you don’t have to create the thing from scratch. Rather, it’s about the ability to identify, locate, and put the thing in the right place.
When you break it down, aesthetics is more composition. Art, in contrast, leans more towards creation.
There are two sides to the concept of aesthetic — the experience and the style.
Both exist in a tightly coupled relationship where one influences the other. The style may evoke a particular experience, or the experience may be achieved through a particular style. Style is a collection of interrelated sub-parts that have a visual relationship with a time period, emotion, or genre association.
The point of aesthetic is to compose a visually pleasing space — whether it be in print, physical, or digital formats — using pre-existing parts. Aesthetics can be used to evoke a positive feeling when encountered and persuade the audience to a particular idea or mindset.
Art, in contrast, can be used as an aesthetics creation tool.
It’s the thing that helps create the parts needed.
However, as developers, we don’t always need to reinvent what already exists. We just need to know how to put things together in a way that is most effective for our requirements.
What’s your selling point beyond the code?
Aesthetics is something that’s often regulated over to the UX/UI space. But when it comes to being a frontend developer, UX/UI is the thing that will help distinguish you from the pool of everyone else that knows how to code.
That’s because frontend is more than just knowing how to connect up an API and state manage your data. It’s the ability to transform that JSON object into something that is visually accessible. That’s why it’s called a frontend.
You don’t need to be an artist.
However, understanding certain rules such as impact of alignment, general visual composition and patterns can help you create things that are intuitive to the user.
For digital products, understand user patterns and how they interact with certain visual cues can make you more effective in creating designs when there’s no graphics or digital designer on the team.
While it’s nice to have a structured approach towards building websites and apps, the designer + frontend dev + backend dev stack isn’t always guaranteed.
Smaller enterprises may be short-staffed or simply don’t have a budget for it. Or it might be a case where your designer comes up with some far fetch evolutionary revolutionary design that you know won’t work — having aesthetics abilities will let you communicate your thoughts and ideas much more effectively.
As a developer, you need to be able to sell something else other than the ability to code. Here are five ways you can upgrade your aesthetic skills:
- Practice copying what works. This will help internalize certain visual patterns and allow you to recreate them on the fly when needed. Start small at the component level and then work your way up to the composites.
- Practice assembling pieces. Once you’ve got some bits and pieces in your toolkit, make quick-fire layouts out of them. Don’t worry about the data connection and all that stuff. Just throw a form up, a login page, a simple cart design, and anything else that you can think of. The point is to figure out what works and what doesn’t.
- Practice in black and white, and then with color. Color is often more distracting than helpful. When you start with just black and white, you get to focus on form and page rhythm — you know, the spacing, the way things look, and the general flow of things. Once you’ve got that, then start playing with colors.
- Use better placeholder images. Images add to the general mood and feeling of how aesthetics is portrayed. If you’re going to use images as placeholders, use ones that is aligned with the mood and feeling you want to convey. Don’t use cats — unless it’s actually pretty looking cats.
- Learn CSS properly. CSS is easy to pick up, but it is also nuanced. Learn it properly and avoid overrides. Keep it short, simple, and organized. Learn to refactor into the different patterns such as DRY, atomic, and SMACSS. This is important because CSS is going to be part of your job, especially if you’re going down the frontend route.
Building an aesthetics library
Building an aesthetics library is one way to increase your visual toolbox that you can draw from quickly.
While there are alternatives like Bootstrap, having your own set can help you learn the finer details of translating aesthetic ideas. It also makes your visual components more transparent and moves you away from modding pre-existing UI elements through nested visual overrides.
A quick way to build an aesthetics library is through Storybook.
Storybook is an open-sourced UI component manager that sits in isolation from your various frontend development frameworks and libraries such as Angular, Vue, and React.
To create an aesthetics library that you can use in future projects with Storybook, you’ll need to create an empty project first. Why? Because the Storybook CLI isn’t made for empty folders — but you can attach it to an empty project.
You can use any framework or library you want, but for the purposes of this tutorial, I’m going to use Angular as an example.
Creating an aesthetics library with Angular + Storybook
Create an empty Angular project using the CLI:
ng new storybook-library
You can name your project whatever you want. storybook-library is just an example.
To install Storybook, go into your newly created Angular app and run the following command:
npx sb init
If npx isn't working for you, you'll need to upgrade your npm to 5.2+ and node should be 5.6 onwards. Then you'll need to install npx via npm i -g npx.
Once you have Storybook installed, you can run it using the following:
npm run storybook
And that’s basically it. For more details on how to write stories and use it, check out this link here — Storybook: writing stories.
Final thoughts
Going into how Storybook works is beyond the intended scope of this piece and perhaps soon I’ll go into it properly.
You don’t need to use Storybook as your main aesthetics library, but it’s a good tool to be aware of for managing large quantities of UI pieces.
To develop your aesthetic eye, you need to learn the patterns of design and practice them.
Practice copying what works.
Practice tweaking based on patterns.
Practice putting various components of a design together.
At some point, it’ll all make sense and you’ll have a seemingly natural knack of aesthetics.
It sounds a bit like art but it’s not. Aesthetics is a bunch of patterns that look good for the time and purpose it was assembled.
Knowing how to implement visually appealing frontends without the help of a designer can also leverage your portfolio, especially when the time comes to go job hunting.