Check this animated explanation here

What is Creative Front-End Development and how important is it ?

As a founder of the first (and the only, as far as I know) Creative Front-End Agency, SliceCrowd, in the past almost-5 years, I had to split my time between being a senior UI/UX and Interaction Designer and also managing dozens of developers and observing them very closely.

This made me think a lot about how these two processes are related, what’s important, what’s critical, and what it takes to create one of those awesome websites we all see in Awwwards.

Let me share with you what I’ve learned. :)

How did it all start, and where did it come from?

In order to understand what a Creative Front-End Development is, we’ll have to go back in time and see how it was born in the first place.

Flash … What a time it was ….

Have you guys played with Flash? No, not now. I’m talking back in the days when there were no fancy JS libraries and CSS3 transitions and stuff, when the web was boring, mostly based on pure HTML tables.

Back then, Flash was the only way to bring life into the web, to move things, transition them, etc. It was awesome . . . till it became clear we should all stop using Flash because of various reasons, the biggest one being Google cannot index it. See, Flash has no search engine optimization, SEO.

Then it all became static and boring. Not all, of course. There are always awesome agencies that push the limits and blow everyone’s minds away. But here, I’m focusing on the “regular” designers, developers, and agencies.

In this “static” era, the most important things to consider when hiring Front-End developers were the following: (1) a well-structured SEO-friendly code and (2) the ability to “slice” pixel-perfect. Slicing pixel-perfect isn’t rocket science - you just need to zoom in enough in the PSD, to be patient, and to do cross-browser testing. That’s it.

Suddenly, something happened. Well, it wasn’t that sudden, actually, but it all began with the birth of the first smartphones from the new generation — with the first iPhone, then with the evolution of iOS and Android.

Everyone started seeing nice-looking effects and transitions. You tap on something, it expands, and you see content fading in. You slide left and right, click on the sandwich icon, and see a beautiful menu appearing on the screen. Pure awesomeness.

It was more than clear that the web was going to get inspiration from the mobile. And this is exactly what happened. Transitions and animations not only brought life to the web but also improved it in general. It looks better, and it attracts users more — this is pretty much clear, no doubt. But it also improves the UX of the website. A nicely created transition helps the user better understand the flow of information and guides him easily through the website.

Maybe this is the right moment to say, “Thank you, Google, for giving us material design!” It was a major moment for the Creative Front-End development. After its introduction, designers started paying more attention on animating their works.

Websites started to become fancy again; they were no longer static and boring. “Flash” was reborn (or at least this is how I felt it).

So what is a CREATIVE Front-End Development ?

I’m sure you’ve figured out where I’m heading with this definition.

Please don’t mistake “Creative Front-End Developer” with “Creative Developer.” A Creative Developer (as you can read in this nice article from Benjamin Farrell, “Front Enders vs Creative Developers”) is something totally different. For now, let’s just say that “Creative Front-End developer” is another kind of “Front-End Developer.”

A Creative Front-End Developer is a guy who can develop beauties like these:

Presentation for Drive” by Aurélien Salomon
Zero” by Ben Mingo for Ueno
Fluent Design Attempt” by Leo Leung

*Here, www.CreativeFrontEnd.io is a gallery where you can check awesome handpicked examples of great development and design.

So what should a “regular” Front-End Developer have in order to be considered a Creative Front-End Developer? Here are the answers to this question.

1st — Of course, you need to be a great “regular” Front-End Developer in the first place.

Needless to say, no matter how awesome the transition was that you were able to code, it’s worthless if it’s full of bugs, if it freezes, and if it can run only on 2–3 browsers.

If customers encounter run-time errors, HTML problems, broken graphics, and other issues, they are not likely to return to the website. So if your code sucks, the UI, UX, interaction designs, transitions, and illustrations are all useless.

A lot is written out there about what takes to be a good Front-End Developer. Check out this nice article by Rebecca Murphy, “A Baseline for Front-End Developers.”

2nd — You need to put the word “CREATIVE” in front.

There are 2 ways to go about this: (a) be a UI & Interaction Designer and a Front-End Developer at the same time or (b) have a designer sitting next to you.

A — Be a UI&Interaction Designer and a Front-End Developer at the same time.

This is a very delicate topic, I know. :D My opinion is that a designer should design and not code (but should know a lot about coding) and a coder should code and not design (but should know basic design principles).

Let me give you an example from architecture (I have an MD in Architecture ) Architects are not engineers, meaning whatever happens to the building — say, it’s going to collapse — has nothing to do with them. Architects “just” draw, paint, and model the space and everything, but they are not responsible for the exact way the building is going to be built; the different kinds of engineers are.

But the architects are taught about engineering basics. They know the beam can easily handle, for example, 6 m of supporting distance but will struggle (note: not impossible) to handle 12 m.

In the same way a designer should know that playing around with the iOS design elements and changing them completely is not impossible to code but it’s extremely hard to. Or that a mobile design breakpoint should not be created in a 700px wide container …

But there are always exceptions. For example, Santiago Calatrava, one of the greatest architects, is also a structural engineer. There are also some good developers who are good designers as well, such as Admir Hadzic, …. /need to put couple more names here/

Anyways, I went off-topic with that :D

So if you’re a great Front-End Developer who’s also an awesome UI & Interaction designer, well, that’s more than awesome! But most people are not. They just suck in one of the two, and that’s the truth. Therefore, it’s more likely you’re not both.

B — Have a designer sitting next to you.

Now this is what’s more likely to happen. :)

This is also the reason why you’re more likely to see a website with creative front-end coming out of a big Creative Agency such as Locomotive Agency, Build In Amsterdam, Rezo-Zero, Burocratik, etc., because they have their developers working next to their designers.

The reason for that is exactly because of the word CREATIVE in “Creative Front-End Developer,” and the people who are usually creative are the designers. Being creative in this sense means the following:

  • Having very strong sense of motion. You should be able to note very small differences from looking just once.
  • Having deep knowledge about Motion Design, how to keep things consistent, and how to do them the right way. A good read about this is the Motion Design guideline by Google.
  • Knowing all the trends about motion and interaction design. This simply means you should be browsing the badass websites on a daily basis and looking for inspiration everywhere.

This is also the reason why here in SliceCrowd we managed to become a successful Creative Front-End Development Agency - simply and only because I’m a designer sitting next to the developers.

By working closely with developers, my understanding of development has increased a lot as well. I remain a UI/UX and Interaction Designer, but my knowledge in development has increased. This helps me better understand what’s possible and impossible (hard) to build and, most importantly, what will be fast and what will take weeks.

By the way, there’s an awesome article from Paul Boag published in Smashing Magazine titled “Why You Should Include Your Developer in the Design Process.” This shows the other side of the coin, or why the designer should have a developer sitting next to him. :)

Here’s an excerpt from the article:

“This is the problem when developers are not involved in design. It can be disastrous. It can lead to designs that are impossible to build, designs that introduce unnecessary technical complications, endless back and forth between the designer and developer as they struggle to fix problems created by the designer, wasted days of revision and iteration — all because the developer wasn’t consulted”

So if I have to summarize :

“A Creative Front-End Development is the type of development where Motion, Interaction and User Interface Design are all seamlessly integrated and matched.

And a Creative Front-End Developer is the type of developer who has the skills and the sense to make it happen”

How important is Creative Front-End Development ?

First, it depends on the website and its purpose, of course. There are some types of websites where Creative Front-End Development is not a priority. Imagine your online banking website: you don’t need that much motion in there. Of course, a couple of nice transitions will make everything feel softer and nicer, but it’s definitely not crucial for the business.

But if you’re presenting your product, the company, the application, etc., if you want to stand out with an award-winning website, you might need someone more Creative to handle your Front-End Development :)

Second, it depends on the designer.

As stated above, the designer is the one who should take the lead in the project and direct the interactions and motions (except in the case where the developer is also an awesome designer).If the designer is incapable of handling and giving directions to all these, then it will be very hard to achieve this “Creative Front-End Development” result.

In general, if the purpose of your website allows this Creative type of Front-End Development and you have an awesome designer to take the lead, your project will surely take off.

The question “How important is Creative Front-End Development” can simply be explained by answering the question “How important is Motion Design for web?”

“Use motion to improve user experience

Yet animation can not only give personality to our digital product it can also improve usability. It provides affordance and connects all the states in the app (even extreme states) while providing context.” *

*A quote from “Why is motion design so important to user experience?” by Elisa Goyeneche .

Lastly, let me add that a Creative Front-End Developer should always experiment with new technologies, libraries, and whatever catches his eye.

Here in SliceCrowd, in our free time, we play around with whatever we can. It can be just an interesting shot from Dribbble that we want to bring to life or just an idea. We’ve just started a place where we’ll be putting all our experiments, and it’s called SliceCrowd Labs.

But of course, the best place for Creative Front-End Development inspiration is Codrops. This exactly embodies the experiments and development I’ve talked about :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store