loading...

Case against premade CSS frameworks (and Design systems)

bitersen profile image Vladimir Jovanović Updated on ・3 min read

People tend to use premade CSS frameworks for everything today. They are easy to use and the documentation is extensive. CSS frameworks have became so widespread that some may think that this is the way everyone should make a web site.

Material design

WRONG!

If you are using these CSS frameworks, especially popular ones like Material design, you are practically stealing visual identity from the company it was made for. In this case, you are using Google’s design system, their brand colors and pretty much everything else with the exception of their logo.

When it comes to other popular frameworks like Bootstrap or Foundation, problem is that you are using same styles as hundreds of millions of other web sites! Try to grasp how big is that number and what does that do to uniqueness of those styles.

Why is this a bad thing for you (and a good thing for companies that made them)?

Most important problem - Your company don’t stand out in any way, it is not memorable and you are not creating brand awareness. If you want to create your own brand, especially as a startup, you must do it right from the start, because it is extremely hard to change user opinions or behaviors afterwards.

When you come to the point in your work where you have to make changes to your established design, probably because you want to make some improvements based on feedback or data, those changes are usually small and subtle. At that point, development of your own design system is very risky because it may alienate large portion of your current users who already got used to your site or app.

At the same time, your popular app based on Material Design, for example, is promoting only Google and Android. They get brand recognition, fame… all of it.

Try out this experiment - pick a few non-Google web sites or apps, from the same industry, made with Material design and place them next to each other. Take a look at them all. Try to remember as much as you can about them in a few minutes of using them. After a week, try to remember if there was anything specific about their design that stands out, that you can visually connect to that specific brand it was made for?

You will certainly have a hard time remembering. Imagine what effect would that same experience leave in average customers mind.

When it is ok to use premade CSS frameworks?

  • Prototyping
  • Creation of admin panels, that are not intended for large audience or public use

If you want to create some prototype extremely fast, like a mock-up of your future app, it is ok to use finished CSS frameworks. You can compare this part of the development process to creation of mock-ups during the design phase of your work. Finished design won’t remain the same as a mock-up, in the same manner as the finished app won’t remain the same as the UX prototype.

For the part of your apps, that are not made for public, like admin panels for example, it is not that important to have everything unique regarding styles. It would be nice to have, but it is usually not critical for business or brand awareness.

Take great care, because at this point you are getting your customer accustomed to these styles. If they tend to work in admin panel a lot, those styles will become very close to their liking and after some time they may ask you to design front-end in the same manner. Good luck explaining to them anything about brand and design at that point.

What is the solution?

If you don’t make a habit of creating and offering unique styles to customers, you are doing them disservice in the long run. Hire a web designer or UI designer & developer, and integrate them with your development team. It is not that hard. As a result, you will create more value for your customer in the long run and your company will become famous for delivering unique and quality solutions.

Take a look around and you will see that we desperately need designs that are different from Flat, Material, Bootstrap, Apple guidelines...

...

Author:
Vladimir Jovanović
Web designer and front-end developer since 1998.

LinkedIn

Posted on by:

bitersen profile

Vladimir Jovanović

@bitersen

Web designer & developer since early 00's #javascript, #scss and #webdesign

Discussion

markdown guide
 

What do you think about the idea that having visual consistency reduces cognitive dissonance in non-technical users, allowing them to focus on your content instead of the mechanics of navigating your app?

 

Maybe you misunderstood the point of this article.

I am in favor of creating your own design systems and frameworks with your own design style, instead of recycling visually identical solutions that everyone is using.

Again, this article is intended for professionals, not for end users who have no idea what design system or frameworks are. Professional web/ui designers and front-end developers are in charge of creating those new solutions. No one else.

Maybe I misunderstood you - are you proposing that everyone should use the same design in order to reduce cognitive load?

 

I think they mean to crank down the individualism a little, so as to not confuse less tech-savvy users. On one page the menu is at the top, on the other its on the bottom right, then on the next one its bouncing around on the website, one has a menu you navigate with clicks, one has a menu you can navigate with hovers, then colors have different meanings, on some pages buttons aren't even highlighted from the background, so people who're unaware don't even know they can be clicked, etc.

Sure, every website being cookie-cutter copies would also be bad, but I could let my Grandparents use the computer without being called every 20 seconds to explain how this or that website work. Some broad consistency across the web isn't all that bad.

Why did you get the impression that only people at Google or at Bootstrap are smart enough to create and develop a design system? That is a job description for all web/ui designers. If web designers don't know how to do that, then they are not web designers, correct?

I didn't. I'm pointing out that everyone doing their own things muddies the waters, tho. Just because they can develop a design system, doesn't mean that design system is something people will respond to. Just look at Snapchat.

 

It looks like @drrial did a great job addressing my original point - if you needlessly reinvent the wheel to justify your existence, people expecting a wheel will be frustrated.

I definitely agree that brands need to look like themselves. If your organization is being mistaken for Google because you look just like them, you've got a lot of problems.

It sounds like you're trying to leverage ^ that idea (which is perfectly reasonable and almost nobody would argue) as weight behind a less universal idea: that design frameworks aren't really useful for "real designers".

To draw a parallel with coding, I'm not going to re-implement bubble sort every time I need to sort an array. I'm not (always) going to invent a new web framework like Rails or Django when it's time to make apps for the web. Yes, it's our job to write code, and yes, we can do those things, but those aren't always the problems we're trying to solve. Not all of us need to be Massimo Vignelli inventing the NYC Metro design framework. It reads a bit like you're advocating throwing out the baby with the bathwater.

You are within your rights to agree with me or not, I won't even try to change your mind. Now I see that you are speaking from dev perspective.

For me, same design all over the Internet represents a problem. Google's material design was excellent when it appeared, same as Flat design before and Twitter Bootstrap design before that. They all brought something new to the table and people loved it, but... BUT if you think that reusing those design systems today is a good thing, than that is a problem for which you are not aware of.

And it shows, because you think that this is just a technical issue. It's not. Half of the problem is design/art related. When almost every design today is normalized to those designed styles and frameworks, then nothing is really unique, beautiful and new. Changing variables in Bootstrap is not really design. That is basic styling.

Throughout the art history there were different art movements that were dominant at some point, but that point has passed and something new replaced it. My goal was to point out to everyone that using same templates will get them nowhere, especially if they are in web/ui and UX design professions.

But who knows, maybe I expect too much from people.

p.s. When it comes to Material design especially, that system is made especially for Google. They give it to everyone because it spreads brand awareness for Google, not your own brand. No matter what you do with it, people will always see Google behind it.

This is digital equivalent of a promotional shirt with a company logo that you get for free. You may wear it to the gym, but you would certainly not wear it to a jet-set cocktail party or a wedding. Unless you are a dork ;)

 

I understand completely what you're saying. Personally, I think you're wrong. I do, however, agree with some of your sentiments.

You say that by using a CSS framework, you are not doing the site properly, and are just creating another boring site that looks like the millions of others already out there, and (in Material Design's case) are advertising Google instead of your own site. You say that because of this, no site using the framework is original or memorable.

Before I say any more - don't get me wrong. I completely agree that people should attempt to create unique designs for their sites, rather than just making another site that looks almost exactly the same as the other million sites using that framework out on the web.

However, there is nothing wrong with using a CSS framework at all. It can save you painful hours, even days, of fiddling with line after line of CSS to try and just fix the positioning of element after element (no, this isn't laziness speaking - this is my personal experience).

My opinion is this: CSS frameworks are nothing but a starting point, a tool that many people misuse. They fix some positioning, and give elements a smoother starting look, but that's all - they shouldn't provide global templates to build the web from. They are (or at least imo should be) made to be customised.

Take, for example, my site. I built it using Bulma for basic positioning, them completely customising it. When I remove the custom CSS, it looks broken and boring. When I remove the CSS framework, it looks broken and has all sorts of weird positioning and sizing problems. Now, I could spend a few days fixing these. I happen not to have those few days, and so I use a framework that lets me develop the design idea I had for my site far more easily and quicker. It ends up looking the same either way.

Think of it this way - you keep a bunch of CSS snippets that you use a base for each of your projects. They seem to contribute nothing visible towards the final look, but without them everything seems distorted, positioned a bit oddly. Frameworks are, in a sense, an advanced version of this. A whole lot of snippets put together to form a whole that fixes positioning (and is quite possibly compatible with far more than your 5 minute solutions could sometimes be - although, yes, compatibility with older browsers is rarely a priority for me), but also adds a set of default looks for many elements that look quite ugly without any CSS.

To summarise my opinion: There is nothing wrong with CSS frameworks - they are simply a starting point made to be customised (but often wrongly used) that can save you hours of extra work.

 

Thank you Dragon ;)

Please don't get this wrong, but as a 14 year old developer, you have a long road ahead of you when it comes to learning CSS and positioning. I say this as someone who has more than 20 years of professional experience ;)

CSS is not that hard and it is the first thing you should master if you want to be web designer or front-end developer.

Take a look at this presentation from Morten Rand-Hendriksen. He is one of my favorite web designers. This one is about CSS Grid and a great new way to position elements on the page. You won't need any premade grids after this.

youtube.com/watch?v=7kVeCqQCxlk

 

Don't get this wrong, but as someone with 20 years of professional experience you should know that your time is valuable enough that you shouldn't be spending it reinventing the wheel every time you do something.

CSS is not that hard, and neither is Python, and as a good developer/designer you still use the best bits from existing libraries, frameworks, boilerplates, etc. to reduce the amount of work you need to do to reach your desired goal regardless of which you work with.

I sure don't want to rewrite a CSS reset every time I start a project. I also don't want to worry about the basic styling, positioning, responsive design etc. .. sure, you sacrifice a tiny amount of customizability for efficiency, but with a good framework and a experienced user that is indeed a very tiny amount, and the payback in terms of speed is massive.

Also you really don't seem to appreciate how annoying it is for users to have to figure out "what does a button look like on this site" every time they enter a new site. Because too many people already follow your way of thinking, "reinvent everything, reuse nothing", I regularly bump into websites where I don't understand the controls.

Those 20 years of experience give me a vantage point over this occupation that I am trying to show to everyone else. But, as it turns out on the Internet, those who comment, like you, are refusing to open their minds to new ideas. Instead, you project your own fears and insecurities to those new ideas, when in fact there is no place for concern.

Now don't you get this wrong, but you are seeing this problem from your perspective, without the whole picture.

Most of the problems you have mentioned, I never wrote or argued against.

Read it again carefully, go through comments and maybe you will figure it out. If not, then it will take time and a lot of personal experience for you to maybe come to the idea I wrote about.

Have a nice day.

Really sounds like you're the one who's failing to open their mind. There are lots of benefits to using existing templates, boilerplates, frameworks and such, and using them doesn't mean you're 100% copying some other company's style and don't look unique.

Thanks Duke.

It really does seem to me that you are the one not opening your mind, Vladimir. I may be a newbie with little experience - but maybe that's good. I'm able to look at things from a fresh perspective and, instead of listening to habits and opinions built up over the years, just look at something and ask myself "does this make sense or not?"

Nobody should ever use a number like that as an excuse. It's the typical "I'm older/younger than your, and have more/less experience than you, so you should take my opinion as fact that pushes your opinion out of the picture" view.

I don't mean to be rude, but - you have 20 years of experience? Great. You've been doing this for a while. You're not the only one with a brain. Everyone, experienced or not, should have their opinions equally valued and judged.

"Everyone, experienced or not, should have their opinions equally valued and judged."

Of course not, we don't live in communism. You have to earn that right, same as everyone else in their life. If that was not the case, professions and professionals woudln't be valued at all.

But then again, it is your right to disagree and to learn from your own mistakes. You need that in order to grow as a person. Everyone has been in that phase of life, especially in teen years. In a way I envy you because it is all new to you and you get a chance to discover it all on your own, but the things that are new to you with all of the positive and negative sides is something that I have established so long ago. You will get far since you have started so young, if you endure this calling and then start to create something new, that no one has done before.

You will need a lot of learning before you earn the right for a "fresh perspective".

My discussion ends here because internet arguments can go on forever.

I wish you all the best.

Ah. Thanks for the good wishes, but you've taken what I've said the wrong way. You probably won't reply to this, but I hope you at least read it carefully.

No, what I'm saying has nothing to do with communism. Context is important here.

I am saying that in a civilised argument, nobody should dismiss another's opinion simply because of a number. I'm not saying that experience should go out the window. I'm not saying that everyone is equal. Yes, you sometimes need to earn the right of being listened to. But no matter what, you should at least consider someone else's opinion. Get out of your comfort zone, try to understand what they're saying. Judge their opinion as harshly as you would your own opinion. Do your research. Take nothing at face value. Nobody, not even someone with decades of experience, is right all the time.

Professionals are valued because of their skill, not because of how long they have been doing that thing. Someone may have been doing something for 30 and still have no clue what they are doing - definitely not a professional. Someone may have been doing something for 5 or 6 years, yet understand it perfectly and be incredibly good at it, and so be called a professional.

By fresh perspective, I meant a perspective that actually is fresh. New. A blank slate. The perspective of someone who has no idea what's going on. I guess that no longer accurately applies to me, but you get the idea. If someone looks at something with the perspective of someone who's already learnt a lot about it, that's not exactly fresh, is it?

Well you're doing exactly the opposite of what you're preaching.

You're saying people should be open to new ideas, yet you stick to the ancient practices of doing everything yourself from scratch, instead of embracing the relatively new idea of CSS frameworks, and that they can be very beneficial also outside of prototypes and internal components.

You seem to assume I've not given a try to building styles from the scratch. I have, many times, before and after the popularity of CSS frameworks. When the first widespread CSS frameworks came out I agreed with what you're preaching now. They were not very good, and people ended up completely locking into someone else's style. Things are quite different nowadays.

Even now when I know I'm building something small and simple I build things with a smaller "micro-framework" (Pure.css, Flexbox Grid, etc.), or when I know I'm building something with specific performance constraints (e.g. animation heavy things for mobile web) I might be more careful with what I use, but when building a larger application without any obvious issues to keep in mind the power of a good CSS framework is absolutely the way to go. Just don't forget to also customize it to fit your style, and I don't just mean tweaking a few colors here and there.

Ah, looks like the poor comment reply pages made me confuse you with another person.

If I didn't appreciate a dialogue, I wouldn't have responded in the first place.

You didn't propose anything fresh ;) It takes experience to see what is old (these million times reused frameworks, for example) and then to propose an idea how to improve on it, for example to dare to create new design systems and personal CSS frameworks that could be expanded and improved.

You will understand it, give it some tome. Don't rush it, just enjoy your learning for now, because there is a long way ahead of you ;)

All best!

By fresh perspective, all I meant was perspective, a point of view based on nothing but the present, without much fore-knowledge of the topic. Not necessarily a fresh proposal or a new idea...

But yes, bloated old frameworks are in great need of improvement. That's no different to most bloated old code that needs reworking. Not all frameworks are old and bloated, however. Plus - old or not, all modern frameworks are (or at least, should be) built to be customised to your own design.

Anyway, I feel like we're now starting to go in circles.

 

Of course. I have plenty left to learn.

I'm not saying I'm unable to do it without a framework, though - some of what I'm currently using Bulma for I've done before, and what I haven't I've still checked to see how it's been done and it doesn't look complicated at all. I agree that frameworks are not always necessary. All I am saying is that there's nothing wrong with using them when people do decide to use them, if those people customise them properly.

 

One of the best ways to use any CSS framework is as a base to work with - they fix a lot of basic issues, taking care of a lot of the "boilerplate" for you.

If you take a good framework and then edit it to look more like your thing you'll still end up with a better looking site, faster, and with less headaches.

Most of them nowadays support LESS/SASS variables and extension rather easily, so it doesn't take a massive amount of effort to build your own custom style using one of the frameworks as a starting point.

 

This post and the comments that have ensued indicate that this is obviously quite a highly emotive subject and quite easily misunderstood.

One of the dangers that this points highlights, is that your organisation runs into the risk of creating "yet another framework" (YAF), and the trouble with YAF's are that they are things developers do to avoid doing any real work.

One can easily agree and disagree with each of the points raised and discussed. Yet at the end of the day, we all have very little say over what the most important point, is "What does the customer want".

I somewhat agree that UI may need to be distinctive from a "branding" perspective, but really true branding is in the usability of the product. There are some very simple slight nuances you can add to a UI that can have some really high impacts to user adoption.

Your product "Uniqueness" may never actually stem from the UI, but actually in how it helps your users solve a problem. How quickly they were able to learn your product to solve a problem. In most cases, they may not spend too many brainwaves on thinking "ooh this is nice".

From a start up perspective, of which I have considerable experience, the primary objective is always User Adoption. We don't measure how many liked the UI, we only measure how many adopt and start paying.

You will always have re-engineering of the Front-end, as you become more familiar with what your customer wants, and as your "solution" to "problem" evolves.

Using a pre-rolled UI framework i.e. Bootstrap, Material etc. Helps you to leverage what others have learned and provides your customers with an instant familiarity with your product, even though they may be coming in cold.

Personally I don't think there is a right or wrong answer.

You've raised a good points but really the answer lies in the consultant get out clause of "It Depends"

 

I agree and I have to add something - it is my mistake that I haven't explained it thoroughly, but would it made any difference considering how difficult is to reconcile designers and developers?

For some reason, most people here assumed that new design system and unique frameworks that support it are something bad that goes against all good principles of design, UX and development. This is typical dev perspective of looking at things and resistance to change.

How did you react first time you saw Bootstrap or Material?

Did you like it?

If you did, would you like to repeat that experience with something new? If it is so, then why so much resistance and negativity?

 

I don't think there is resistance to change. That is just not the developer mindset, developers are all about change, they're used to dealing with it, but they are also pragmatic about change.

I do get where you're coming from, in regards to innovation. But we also need to counter with we shouldn't just innovate for the sake of innovation, we have to focus innovating for the need.

If a new CSS is framework is only due to that it may aesthetically look pleasing and not actually provide anything more, then I would argue what is the point ?

I love the supposedly Henry Ford quote :

"If I asked the customers what they wanted, they would've asked for faster horses"

So the innovation here was to think out of the box. There is a world of difference between faster horses and motor vehicles.

is there really a need for new CSS framework ? or is there an opportunity to completely re-think or re-imagine the UI ?

Framework is technical representation of a design system. When we re-imagine design systems and how UI works, then we need to create new modular framework that will support it. Since CSS has advanced quite a bit, especially with CSS Grid, creation of unique frameworks for each new project is no longer an issue. Instead of focusing on learning how frameworks work, why not learn modern CSS?

There is a lot of overhead in code when you just re-style existing frameworks. It affects performance and code base becomes dirty and unreadable after some point.

 

Maybe the title of your post need to say "premade Design Systems" instead of "premade CSS frameworks": you can use a CSS framework changing the style and layouts with theming.

Also, you can use something like Material Design to have a known base and focus on imaginery, colors and spacing to differentiate your app.

In the end, I still agree with you that we need to work on create memorable design.

 

No, title is accurate. This is why:

Frameworks are developed based on design - their structure (html), styles (css) and interactivity (js). When you are changing predefined variables, you are limited by the initial boundaries of that adaptive design system. In that situation people usually don't even try to come up with another idea for UI, something that will solve UI problems differently. Forms still look the same, buttons as well, only colors are changed and maybe border radius for corners, just to name a few examples.

For example, Material design did something good - they changed the button behavior with unique visual effect that happens on click; forms look differently where label pops up on click etc. Those were all great examples of good design! But as I said, those great ideas are made for Google, not for your own brand. Same is with all other frameworks or design systems.

And it shows throughout the web, since almost every site looks the same. There is a reason for this situation, but this is a topic for another article. ;)

 

Frameworks are just tools, and normally they are just great foundation for web development. Of course, if you're using Material Design without change anything you'll get another Android clone.

But you can to work on CSS to show a different structure of your project besides base styles. If you think that every site looks the same it's not just because developers are using Bootstrap, it's also because they think that users are familiar with that structures, and works well. Every spoon looks the same and still...

 

I have seen the use of these frameworks increase over the recent years and it's important to stress the real reason that they are used in so many situations and it is most definitely NOT as they offer a uniform well developed approach to frontend development but rather that nowadays there seems to be a real decline in the true frontend developer, who, as mentioned in this post, is meant as per their job description to be able to work up a full template solution to suit the site/job at hand - it's what we do! The framework in many 'business' situations managed by backend project leads jump on frameworks largely as they seemingly offer a solution to removing a lot of development time and where they often don't seem to have particularly experienced frontend devs.

The other important aspect to consider is how well do we all assume these frameworks are built? I and many others have no time for the likes of Bootstrap or Foundation - to name but a few - we can generally write far better code suited to the project in hand without tons of legacy unused code or endless un-semantic classes, and which ultimately is far easier to maintain for other devs.

I currently have to fight a battle in largish company to dissuade them from going the bootstrap route in a major platform re-structure, Bootstrap wasn't a business decision just an assumption... so sad :(

 

Thank you Hugo, this was one of the reasons I wrote this article.

Sadly, you are correct.

Web design is forgotten occupation, but we used to create design systems and our own frameworks for each project.

Those who have inherited web design (UI and UX designers) no longer know how to code, while once large area of frontend development is today considered to be only javascript engineering. That has left a void when it comes to CSS since it is easier for everyone to use premade framework than to create something on their own.

It is troubling that most people see this part of the job as unnecessary and as "reinvention of the wheel". It only shows how huge this problem has become.

 

I share the same opinion. Big CSS Frameworks like Bootstrap offer a really good time boost if you wanna build a prototype or admin interface. But when it comes to implementing a custom web design, it doesn't give you any advantage. You have to mutate everything, color, padding, position, etc. And if the framework offers "configuration" through e.g. SASS variables, you can be sure that half of the stuff is not configurable or there will be a configuration file with hundreds of variables.

 

Lets not confuse 'standards' with 'Standards' Those of us that have attempted to remain faithful to the Standards over the decades are perhaps not those that support the rise of these frameworks, those frameworks may assume to set a standard of use but they are not part of the Standards.

 

Maybe I'm missing the point, I use Bootstrap for all my sites then overlay styling on top of that. If I can restyle everything in Bootstrap, what is the point in starting from scratch?

 

Can you make Google Material design or Microsoft's Fluent design system from Bootstrap base?

Of course not.

Creating your own design system is much more then styling an existing framework. It is a lot of work, especially today. Not everyone can do it, but that doesn't mean that it is not worth doing.

 
 

I would like to thank everyone for comments and questions!

All of this has showed me what examples I should use to explain this problem more clearly.

Thanks,
Vladimir

 

hypothetically speaking, if some company or developer knows that using certain front-end design/framework will help them in increasing their client-age then why would they design their own custom UI? Standards are good because they reduce the technical hassle both for devs as well as the users.

Though i agree with you when you mention that frameworks are good if you are working on prototype or MVP. Time matters a lot!

 

Developers are almost always oblivious about design and branding aspects of this work in a same way pure designers without technical background are oblivious to technical issues.

Once upon a time, we had a man in a middle who connected those professions in a unique way - web designers. Professionals who know to design AND to code.

Look at it from this perspective - if everyone is using the same design with slight variations, which one will stand out and be most memorable? Human brain remembers differences, something like Git ;)

 

What if the sole intention of using a CSS framework is that I want to save time, and i just cant be asked to design my app from scratch? But i do agree in a way, CSS frameworks should be used only for admin based web apps, for sure.