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.
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.
Oldest comments (45)
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 ;)
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.
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 ;)
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.
Material Design: fezvrasta.github.io/bootstrap-mate...
Fluent Design: fluentbootstrap.com/
Seriously, what am I missing?
I have answered in other comments.
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.
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 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
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.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.