I'm an enthusiast of early 20th century architecture schools like Art Deco, Prairie Style, Streamline Moderne, and Danish Modern (for furniture & housewares) because the clean lines and geometric shapes can function as a design philosophy in a variety of areas.
And obviously, web aesthetics like Material Design already reflect the ideas of Bauhaus and other schools.
But has anyone tried to replicate the "feel" of specific architectural approaches in their web design? For example, how would Frank Lloyd Wright design a website? Is it possible to incorporate more organic approaches like Art Nouveau without producing too much distracting visual clutter?
Put another way, what architectural/design movements could provide inspiration for the next evolution of web design?
And as further food for thought, wouldn't widespread use of AR/VR would serve to strengthen the link between architecture and human-computer interaction? Your personal computing environment could become an actual space - in the architectural sense - in which to do work. The first thing I'm going to do, of course, is replicate the Johnson Wax Factory's Great Workroom.
Architectural movements such as Brutalism are already making their way into web design - not in a good way, imho.
They’re distractions.
Web-design in my view should follow Swiss layout and typography which is widely considered to be the most objective, neutral, clear and universal theory of graphic design. Some parts of Swiss layout already permeate in everything we do - Grid system(Brockmann et al) for example. Or Helvetica and Univers in typography (Frutiger et al).
Everything else is decoration. Obviously, if you build a website for a music band, then all bets are off. My view is about common web design.
Decoration exists on a continuum, and I don't think it's bad as long as it's not overdone - which is a subjective judgment call, of course.
Decoration exists for comfort, beauty, and usability. I particularly like this fantastic essay that explains the rationale for decoration in architecture, and how the current design preferences for stark simplicity came to be.
An excerpt:
'A few obvious stylistic changes characterize postwar architecture. For one, what is (now somewhat derisively) called “ornament” disappeared. At the dawn of the 20th century, American architect Louis Sullivan proclaimed the famous maxim that “form follows function.” Even though Sullivan’s own buildings were often highly ornate, adorned with elaborate Art Nouveau ironwork and Celtic-inspired masonry, “form follows function” was instantly misinterpreted as a call for stark utilitarian simplicity. A few years later, architect and theorist Adolph Loos, in a 1908 essay called “Ornament and Crime,” dramatically declared that a lack of ornamentation was a “sign of spiritual strength.” These two ideas quickly became dogmas of the architectural profession. A generation of architects with both socialistic and fascistic political leanings saw ornament as a sign of bourgeois decadence and cultural indulgence, and began discarding every design element that could be considered “mere decoration.”'
I didn’t claim Decoration and creativity is bad and said that when it’s required for cultural, aesthetic or media appeal then it makes sense, for example a music band website.
But a web framework should adopt the most neutral stance and designers can modify as they see fit. In other words, decorative frameworks as proposed by the OP that are based on an Architectural movement are not appropriate for majority of the webpages on the internet. They distract. Decoration distracts. Doesn’t mean it has no place in society.
Also, Dieter Rams proved that design can be un-decorated, yet inviting, comfortable and human centric. As a direct legacy to Rams, just look at the success of Apple and it’s stance on design. Personally, I argue that Decoration is shallow and doesn’t solve the fundamental goal in design : to make products and services that interface with humans easy to interact, understand and use. Instead Decoration distracts, deludes and creates confusion. It steals clarity and intent in design. In some cases, Decoration is not honest. Can you imagine Casinos built by Tadao Ando?
> But a web framework should adopt the most neutral stance and designers can modify as they see fit. In other words, decorative frameworks as proposed by the OP that are based on an Architectural movement are not appropriate for majority of the webpages on the internet.
This is true. Not all web pages need high decoration. Think of art nouveau Google sheets. Hah, what a nightmare that would be. But I would say we make a mistake to say that most web pages are similar. That's how we get these design philosophies to end them all. What works for material design won't necessarily work for your design.
> Instead Decoration distracts, deludes and creates confusion. It steals clarity and intent in design. In some cases, Decoration is not honest.
You are describing ~BAD~ decoration and design. And I totally agree with you that bad decoration is the MOST detracting thing. But good decoration actually moves your eye, body, and intent towards better function. Art deco has many leading lines that guide people towards main entrances or even displays the ethos of the organization. Intuitively I know you think this is true because a web without any decoration would look like a terminal. Grids and layouts are decoration and if used improperly will distract users as well.
This is the principle that lead to the abhorrent and unusable flat design. Sometimes, lack of decoration distracts. Because it is this "decoration" that makes things look familiar. Without the decoration people have to stop and think and figure out things.
iOS 6 and below is an example of decoration making things more familiar and intuitive. As Steve Jobs designed it, the world inside the iPad screen was a seamless extension of the world outside the screen. When you went inside the iPad, everything looked familiar. But now we have a hard boundary at the device, and different rules apply inside that boundary. You have to learn and memorize new rules because the outside rules that you are already familiar with are of no help inside the screen.
I think you're confusing skeumorphism with decoration. Decoration is adding elements to design for the sake of aesthetic ornamentation. For example, Geocities websites had all kinds of blink tags and fireworks going on inside a webpage. That is decoration.
A save button icon that looks like a floppy disk is not decoration. It is a use of skeumorphic semiotics that takes advantage of historic familiarity - which is what you're referring to. I agree with you that it has its place in design. The original discussion of this thread is whether we should decorate websites with architectural motifs whether it is art-deco or brutalism.
As someone just getting into web development I've wondered the same thing. Web design frameworks seem to have all these wonderful designs but they're just not fulfilled of fleshed out as Art Nouveau or such ... but of course you can't just sort of copy and paste or you get all kinds of distracting elements.
Still there has to be a place / way this can be done. I've been trying to just use posters I like, starting with color patterns and such to get a feel for such things. I'm a noob so it's all elementary kinda attempts but there it feels like it should be doable.
1. I highly dislike material design as a programmer and as a consumer.
2. Google and others using “Material Design”, Polymer, etc is really annoying and can be confusing until the context is clear. It makes searching about EITHER physical material design or coding material design a painful experience.
I was searching for job openings around the SF Bay Area and the fact that they’ve made stuff like this and “product design engineer” very hard to filter through between hardware and software is just nonsense.
There’s a reason we define specific words and terms for specific fields and it’s totally understandable that different fields would accidentally mess this up before we had the internet and global connectivity. However, now we have no excuse to not make things clear and distinct. When I say “Polymer” you should thing “long noodly chain of repeating units, aka many mers” not “a web component library.”
When I search for “materials design/er” I should NOT see something programming related unless it’s computational materials design software (simulation, analysis, etc).
Still, barring the complete confusion created by this stuff, I don’t like Materials Design. It’s ugly and needs to go away. Amp can do that too. We need to keep Amp about current.
> When I say “Polymer” you should thing “long noodly chain of repeating units, aka many mers” not “a web component library.”
I'm sort of with you on some of your complaints (e.g. job titles), but this one doesn't stand. Do you want to ensure when we talk about amazon that we're talking about a river? That when we talk about googol we're talking about 10^100? Words are frequently reappropriated for company and product names, and that's fine.
TBH yes. I wish search engines had an "exclude branding" modifier to search terms. Too many products appropriate too many terms from other domains these days.
It isn't a good or a bad thing, it's just another design system, where you have some rules. We didn't like Material Design either, that's why we took it and made it more user-friendly. The basic idea is that you can take this UI Kit and start playing with some variables to change colors/shadows/typography and create something new, but you don't have to create the whole system from 0. It will save you a lot of time.
Sure, but a framework won't help if the output looks bad because the design system is just horrible UI/UX wise.
But great effort, apparently you are not wrong, since Material Design is so wide spread nowadays. But it's just _my_ personal opinion that the "design system" looks absolutely hideous.
I also find Material Design abhorrent. I've read the specs and feel that I understand and agree with Google's motivations for creating such a system, but the result is just plain ugly to me. Material Design has become the "Bootstrap 3" of this generation of websites/webapps, spreading like a virus in part because it's a simple, prepackaged way to quickly add a professional looking design framework to a site. But already now when I come across a Material Design-themed website I feel it's a bit dated, so "2015". Having said all that, I've used a couple Creative Tim bootstrap themes in the past and really liked them, so even if you don't like Material I suggest you look at their other offerings. No financial relationship.
I was looking at UI toolkits recently for a new side project and I consciously avoided Material Design because of the Google connection and also because I don't really think it looks that good.
Went with Grommet - perhaps for no good reason, but that's the joy of side projects.... (and liking it so far).
Hi. I came to say it would be great if it was only available in Figma or Sketch files. Perhaps you should add that in your comparison between the regular and pro.
I love that people make and share things, and I hate to pour water on announcements. I admire the effort that went into this.
That said, it makes me sad to see more fragmentation in the Material space. When Material launched, it was a set of design guidelines. A bunch of open source teams (like Material UI) stepped up and put together libraries that implemented those guidelines for specific view frameworks. This project looks like one of those efforts.
Since then, the Material Components for the Web project has formed. It's staffed by Google engineers who collaborate with the designers who write the Material Guidelines. They faithfully implement the Guidelines and makes updates as necessary to keep pace with design changes. The project is designed to be wrapped by other libraries to work with specific view frameworks.
I'd hope that any Material library for the web that's put together in 2019 would leverage that work. It will more faithfully follow the guidelines and be easier to maintain over time, because there's already a team of people responsible for maintaining the underlying framework.
If you haven't already, take a look at Material Components for the Web. You might have a better time if you back Material Kit with it.
A little off-topic, but I'm learning CSS and this seems like as good a place as any to ask: What are the alternatives to material design (which I think I understand is a certain aesthetic that incorporates shadows and textures)? Is flat design the only main alternative in modern web design, or are there others?
Secondly, the online course I am doing is using fluid grid but I understand that flexbox is another option. Am I better off focusing on one or the other? Thanks.
There are others like the HIG (Human Interface Guidelines) from Apple. The ones that are in the open are more like full design systems meant for internal use and prestige. You can find a list of systems on this page: https://adele.uxpin.com
To use shadows for the z-index and layers is quite common these days though, many systems use them. Flat could be just a step after "inset" and before "raised" within a system like that, something you use for normal backgrounds and stuff that are part of the background.
The most basic element in a design system is essentially just an empty frame/box that could hold a shape and color, and optionally a shadow on a shape. This frame could become anything.
The only alternative to flat design that will not get you mocked is ironic Geocities aesthetic. Designing something with accents that feel solid and dimensional yet balanced and thougtful is right out, and will probably be sneered at by other “designers”, unless you are designing a video game UI.
Whether or not end users will welcome this is an open question. Everything is boring and flat now, usually on a glaring white background, and maybe that means the field is ripe for a change. Personally I’m beginning to miss all the design accents that aggressive minimalists deride as “skeuomorphic”.
Using Material design always feels so sluggish. Is it the shadows? Can someone with more CSS knowledge speculate about what's causing the high latency?
Last time I paid attention drop shadows were extremely expensive to render, and using too many of them would severely reduce the framerate when scrolling and animating elements. I stopped using them partly because of that, and partly because I find them garish anyway and I haven't found a situation where they improved usability more than just using slightly different colors for foreground and background. I know material design uses them to indicate z-level and to differentiate UI elements from content, I just don't think it's the only way to do so.
This is yet more div soup judging by the examples in the Repo and the Wordpress theme.
I am struggling to find anything that is using HTML5, CSS Grid, CSS variables and other niceties of evergreen browsers the right way. It is almost as if web development has forked into two paths, one path being div soup bloat and the other being increasingly more complex build tools to arrive at the logical arrival of css in js.
I want the sensible features in modern evergreen browsers without these options of increasing div soup or increasing complexity. We can now have a true separation of content from styling and scripting with design being content first rather than visual mockups and placeholders.
The problem is that to start using the modern good stuff requires unlearning the bullshit that has gone on ever since the browser wars, nobody is giving up on the hacks, the frameworks and the complexity to do it properly with succinct content, succinct styling and straightforward scripts. Everyone is telling themselves they work on a team building products that are far too complex for any chance of going forward to more sensible document markup.
The days of div soup are not over - as exemplified by what we have here - but, once the good stuff has been discovered and the evergreen friendly stuff learned there is no going back to div soup and the working methods that go with it.
> It is almost as if web development has forked into two paths, one path being div soup bloat and the other being increasingly more complex build tools to arrive at the logical arrival of css in js.
css in js will not save you from div bloat.
Div bloat exists because CSS+HTML are horrendously bad at actual layout. For any sufficiently complex component you'll have div soup, and newer CSS features reduce the bloat only ever so slightly.
> nobody is giving up on the hacks
New frameworks have very few if any hacks leftover from the browser wars. The framework discussed here uses flexbox almost exclusively. It doesn't mean you don't need dozens of other hacks to display anything more complex that text.
> once the good stuff has been discovered and the evergreen friendly stuff learned there is no going back to div soup and the working methods that go with it.
Yeah, no. Div soup is here to stay, because it's literally the only foundational layout element of HTML.
I think that there is an alternative and the likes of Rachel Andrews are speaking my language when it comes to document structure, no div soup and CSS grid for the layout.
At school or university you have options regarding who you are going to copy to get that assignment done. You can spend hours plagiarising with a lot of work put into rephrasing things slightly so that your work will pass as your own. Or you can spend a lot of time second guessing what everyone else is doing and emulating what you think the solution is. Or you can actually ignore what everyone else is doing and roll your own solution, learning the fundamentals, copying nobody. Then when done you can have a look around and see what you missed in the other ways the problem has been solved. By going original in your thinking you might have missed a trick or two. Or got something wrong. But, with a foundation of original work you can confidently patch up what you have got to be best in class, all defects removed.
I think the web is like that. Sometimes you look for a simple aide-memoire on Stack Overflow where once upon a time all the answers were seemingly brilliant. But then you realise that you have moved on from that, your own code is better, you aren't just copying and imitating, you have this understanding thing going on that is lacking in some of the other answers.
Then there is the hamster wheel of forever having to learn the latest and greatest, that panic and fear of the unknown latest framework. So another round of copying and imitation goes on, the mountain top of confidence and knowledge never reached as there is always another extra thing to add in to the build chain to make it better.
But then you realise you are working on a second rate website to sell hair care products to care bears. And it doesn't need the latest trends in visual design or the convoluted ways of cooking up yet more div soup that nobody is ever going to notice.
I beg to differ on your attitudes towards your staple diet of div soup. Concise, content first actual content is not the same thing as bullshit written by people that can't spell force fed into some content blocks that rightfully should only ever contain the lorem ipsum text the visual mockups demanded of them. It is time people started with the raw manuscript and got the copy right without applying a single style. When this is done styling with CSS grid and lovely HTML5 elements works beautifully. This is no marginal gain in bloat, it is a whole new world of maintainability and awesomeness. If you ain't doing it right you are doing it wrong and some mastery of CSS grid is needed, it ain't just something you sprinkle in div soup like it is a fifty bucks Wordpress theme.
Content is king and there isn't any div soup needed. Maybe a div for holding that Google ReCaptcha button but I am struggling for bona fide instead of lazy ignorant uses thereafter. You have got to get the document structure right, accessible and good for modern CSS.
Of course this falls apart if you need to support 32 bit iPads or that person struggling along with Internet Explorer 6.
Yeah. If by content you mean text and images. And HTML + CSS can hardly handle that.
And here's what I said, and it's true as ever:
> For any sufficiently complex component you'll have div soup
> Div soup is here to stay, because it's literally the only foundational layout element of HTML.
No amount of grand words about hamster wheels and ad hominem attacks like "people who can't spell" will change the sad reality: the web has moved on beyond simple texts with images, CSS and HTML have not.
Here's an example of a component that puts content first. Developed with modern CSS with no hacks (each css class essentially represents a single CSS property, everything is flexbox etc.): https://tailwindcss.com/docs/examples/cards
Do enlighten me how you get rid of the div soup. I'm especially interested in the "lovely HTML5 element" called "a card capable of displaying an image and text".
Flexbox is old hat, use your favourite search engine to see how easily it is done with CSS Grid - grid not flexbox.
You can nit pick on any example tutorial but do the research and you will find it all works great with CSS grid, you just might have to learn how it works rather than copy and paste.
The class bloat is another problem with div soup, also sometimes you need to put aside the mentality that everything has to be sooo complex, simplicity is hard, anyone can make everything complex and buy into the myth that everything has to be complex.
There is always a better element than 'div', the exception to the rule is where you need something that would have been an 'object', e.g. a Google 'recaptcha' needs a 'div'.
The same goes for 'span', unless you really need to change the colour of the second letter of a word there is always a better way, e.g. psuedo elements.
@Flavius, our Material Kit React is built on top of Material-UI so it's basically the same thing at the core base, we just give more examples and people spend less time creating a page or a dashboard like this https://www.creative-tim.com/product/material-dashboard-reac....
Sorry to be rude, but simply no. I used both (inherited a Material Kit project and moved it to Material UI), and the quality of MUI is simply astonishing:
1. Releases are very thoroughly cut
2. The APIs are very well designed
3. The result is incredibly professional
Does the Material UI one have Sketch and Figma files so designers and coders are on the same page? That's a good added value of CreativeTim's offering.
Wow, such negative comments. Nobody cares that you don't like Material Design. /rant
This looks awesome! As a designer and engineer, it's always frustrating when I design something that turns out to be next to impossible to do with the component library we've chosen to use. Having such a comprehensive set of design platforms and web frameworks covered here solves that problem for us. Thank you for building this!
BTW, if you haven't tried Figma, you really should. It's cross platform and even runs perfectly smooth in your browser.
On that note, @axelut - it would be nice if there was a link to open the Figma UI Kit, so I could preview it in browser, rather than having to download it first.
Thank you for the feedback, glad that you see this useful. I agree that Figma is getting better and better, that's why we started to work with it. Please check this link: https://www.figma.com/file/bvQEB3MNOzDx5KrBWLZmmIre/Material... and let me know if it is fine.
This isn't following the latest Material spec. For example, see the text inputs; they went away with the underlined fields style (for some good reasons). I'd love to see that updated, then I might consider using it.
People could just import the individual Material web components, rather than trust any number of 3rd parties to keep their own remake of Material design up to date.
I came across the Vuetify dashboard the other day for a side project I'm spinning out (http://www.sweephq.com - may or may not open source, haven't decided yet).
There are some fantastic themes/UI components here. Great job.
Hi, thank you for the kind words and congrats for the product. If you do it open source we can let our users know about it, maybe somebody can use it. We should keep in touch as we are working on some email templates that will also be release under MIT license. Ping me at alex@creative-tim.com :D
Vuetify is so easy to work with. Sure some docs are missing and I don't like some of the default styling but it gives you the ability to write good SPAs with very little effort.
On the product pages, what's used to collect, store and display the customer reviews? e.g. https://www.creative-tim.com/product/vue-material-kit. Just curious as social proof like this is really useful when you're trying to sell products.
I'm an enthusiast of early 20th century architecture schools like Art Deco, Prairie Style, Streamline Moderne, and Danish Modern (for furniture & housewares) because the clean lines and geometric shapes can function as a design philosophy in a variety of areas.
And obviously, web aesthetics like Material Design already reflect the ideas of Bauhaus and other schools.
But has anyone tried to replicate the "feel" of specific architectural approaches in their web design? For example, how would Frank Lloyd Wright design a website? Is it possible to incorporate more organic approaches like Art Nouveau without producing too much distracting visual clutter?
Put another way, what architectural/design movements could provide inspiration for the next evolution of web design?
And as further food for thought, wouldn't widespread use of AR/VR would serve to strengthen the link between architecture and human-computer interaction? Your personal computing environment could become an actual space - in the architectural sense - in which to do work. The first thing I'm going to do, of course, is replicate the Johnson Wax Factory's Great Workroom.
https://goo.gl/PF665e
Architectural movements such as Brutalism are already making their way into web design - not in a good way, imho.
They’re distractions.
Web-design in my view should follow Swiss layout and typography which is widely considered to be the most objective, neutral, clear and universal theory of graphic design. Some parts of Swiss layout already permeate in everything we do - Grid system(Brockmann et al) for example. Or Helvetica and Univers in typography (Frutiger et al).
Everything else is decoration. Obviously, if you build a website for a music band, then all bets are off. My view is about common web design.
Why are "objective" and "neutral" desirable traits for most web pages?
To steal terms from Tufte: mostly data ink, minimum chartjunk.
Decoration exists on a continuum, and I don't think it's bad as long as it's not overdone - which is a subjective judgment call, of course.
Decoration exists for comfort, beauty, and usability. I particularly like this fantastic essay that explains the rationale for decoration in architecture, and how the current design preferences for stark simplicity came to be.
https://www.currentaffairs.org/2017/10/why-you-hate-contempo...
An excerpt: 'A few obvious stylistic changes characterize postwar architecture. For one, what is (now somewhat derisively) called “ornament” disappeared. At the dawn of the 20th century, American architect Louis Sullivan proclaimed the famous maxim that “form follows function.” Even though Sullivan’s own buildings were often highly ornate, adorned with elaborate Art Nouveau ironwork and Celtic-inspired masonry, “form follows function” was instantly misinterpreted as a call for stark utilitarian simplicity. A few years later, architect and theorist Adolph Loos, in a 1908 essay called “Ornament and Crime,” dramatically declared that a lack of ornamentation was a “sign of spiritual strength.” These two ideas quickly became dogmas of the architectural profession. A generation of architects with both socialistic and fascistic political leanings saw ornament as a sign of bourgeois decadence and cultural indulgence, and began discarding every design element that could be considered “mere decoration.”'
I didn’t claim Decoration and creativity is bad and said that when it’s required for cultural, aesthetic or media appeal then it makes sense, for example a music band website.
But a web framework should adopt the most neutral stance and designers can modify as they see fit. In other words, decorative frameworks as proposed by the OP that are based on an Architectural movement are not appropriate for majority of the webpages on the internet. They distract. Decoration distracts. Doesn’t mean it has no place in society.
Also, Dieter Rams proved that design can be un-decorated, yet inviting, comfortable and human centric. As a direct legacy to Rams, just look at the success of Apple and it’s stance on design. Personally, I argue that Decoration is shallow and doesn’t solve the fundamental goal in design : to make products and services that interface with humans easy to interact, understand and use. Instead Decoration distracts, deludes and creates confusion. It steals clarity and intent in design. In some cases, Decoration is not honest. Can you imagine Casinos built by Tadao Ando?
> But a web framework should adopt the most neutral stance and designers can modify as they see fit. In other words, decorative frameworks as proposed by the OP that are based on an Architectural movement are not appropriate for majority of the webpages on the internet.
This is true. Not all web pages need high decoration. Think of art nouveau Google sheets. Hah, what a nightmare that would be. But I would say we make a mistake to say that most web pages are similar. That's how we get these design philosophies to end them all. What works for material design won't necessarily work for your design.
> Instead Decoration distracts, deludes and creates confusion. It steals clarity and intent in design. In some cases, Decoration is not honest.
You are describing ~BAD~ decoration and design. And I totally agree with you that bad decoration is the MOST detracting thing. But good decoration actually moves your eye, body, and intent towards better function. Art deco has many leading lines that guide people towards main entrances or even displays the ethos of the organization. Intuitively I know you think this is true because a web without any decoration would look like a terminal. Grids and layouts are decoration and if used improperly will distract users as well.
>Decoration distracts.
This is the principle that lead to the abhorrent and unusable flat design. Sometimes, lack of decoration distracts. Because it is this "decoration" that makes things look familiar. Without the decoration people have to stop and think and figure out things.
iOS 6 and below is an example of decoration making things more familiar and intuitive. As Steve Jobs designed it, the world inside the iPad screen was a seamless extension of the world outside the screen. When you went inside the iPad, everything looked familiar. But now we have a hard boundary at the device, and different rules apply inside that boundary. You have to learn and memorize new rules because the outside rules that you are already familiar with are of no help inside the screen.
I think you're confusing skeumorphism with decoration. Decoration is adding elements to design for the sake of aesthetic ornamentation. For example, Geocities websites had all kinds of blink tags and fireworks going on inside a webpage. That is decoration.
A save button icon that looks like a floppy disk is not decoration. It is a use of skeumorphic semiotics that takes advantage of historic familiarity - which is what you're referring to. I agree with you that it has its place in design. The original discussion of this thread is whether we should decorate websites with architectural motifs whether it is art-deco or brutalism.
Brutalist buildings are awesome canvases for graffiti sprayers, they essentially just reclaim their environments by ornamentation.
Could you point to some examples?
Don’t design frameworks like bootstrap foundation and material design represent utility-first design?
As someone just getting into web development I've wondered the same thing. Web design frameworks seem to have all these wonderful designs but they're just not fulfilled of fleshed out as Art Nouveau or such ... but of course you can't just sort of copy and paste or you get all kinds of distracting elements.
Still there has to be a place / way this can be done. I've been trying to just use posters I like, starting with color patterns and such to get a feel for such things. I'm a noob so it's all elementary kinda attempts but there it feels like it should be doable.
https://www.youtube.com/watch?v=v1oWke0Qf1E ?
I still don't understand what's so good about Material Design, I absolutely hate it.
But props for the effort.
Materials Scientist/Engineer who also codes here:
1. I highly dislike material design as a programmer and as a consumer.
2. Google and others using “Material Design”, Polymer, etc is really annoying and can be confusing until the context is clear. It makes searching about EITHER physical material design or coding material design a painful experience.
I was searching for job openings around the SF Bay Area and the fact that they’ve made stuff like this and “product design engineer” very hard to filter through between hardware and software is just nonsense.
There’s a reason we define specific words and terms for specific fields and it’s totally understandable that different fields would accidentally mess this up before we had the internet and global connectivity. However, now we have no excuse to not make things clear and distinct. When I say “Polymer” you should thing “long noodly chain of repeating units, aka many mers” not “a web component library.”
When I search for “materials design/er” I should NOT see something programming related unless it’s computational materials design software (simulation, analysis, etc).
Still, barring the complete confusion created by this stuff, I don’t like Materials Design. It’s ugly and needs to go away. Amp can do that too. We need to keep Amp about current.
> When I say “Polymer” you should thing “long noodly chain of repeating units, aka many mers” not “a web component library.”
I'm sort of with you on some of your complaints (e.g. job titles), but this one doesn't stand. Do you want to ensure when we talk about amazon that we're talking about a river? That when we talk about googol we're talking about 10^100? Words are frequently reappropriated for company and product names, and that's fine.
TBH yes. I wish search engines had an "exclude branding" modifier to search terms. Too many products appropriate too many terms from other domains these days.
It isn't a good or a bad thing, it's just another design system, where you have some rules. We didn't like Material Design either, that's why we took it and made it more user-friendly. The basic idea is that you can take this UI Kit and start playing with some variables to change colors/shadows/typography and create something new, but you don't have to create the whole system from 0. It will save you a lot of time.
Sure, but a framework won't help if the output looks bad because the design system is just horrible UI/UX wise.
But great effort, apparently you are not wrong, since Material Design is so wide spread nowadays. But it's just _my_ personal opinion that the "design system" looks absolutely hideous.
I also find Material Design abhorrent. I've read the specs and feel that I understand and agree with Google's motivations for creating such a system, but the result is just plain ugly to me. Material Design has become the "Bootstrap 3" of this generation of websites/webapps, spreading like a virus in part because it's a simple, prepackaged way to quickly add a professional looking design framework to a site. But already now when I come across a Material Design-themed website I feel it's a bit dated, so "2015". Having said all that, I've used a couple Creative Tim bootstrap themes in the past and really liked them, so even if you don't like Material I suggest you look at their other offerings. No financial relationship.
I was looking at UI toolkits recently for a new side project and I consciously avoided Material Design because of the Google connection and also because I don't really think it looks that good.
Went with Grommet - perhaps for no good reason, but that's the joy of side projects.... (and liking it so far).
I've aired this opinion before on this site. Be careful or they will threaten to ban you.
Imagine if every person on the internet left a comment saying how much they personally like or dislike (or absolutely hate) a given thing?
A discussion is based around opinions and people expressing them.
Isn't that already happening?
Hey guys, the UI kit comes also in Figma, Sketch, Photoshop and Wordpress, you can check more about it here: https://demos.creative-tim.com/material-kit/presentation.htm...
You can use it for commercial or open source applications as it is released under MIT License.
If you have feedback please let us know.
This is an amazingly comprehensive project. What about your architecture lets your support so many frameworks?
Hi. I came to say it would be great if it was only available in Figma or Sketch files. Perhaps you should add that in your comparison between the regular and pro.
I love that people make and share things, and I hate to pour water on announcements. I admire the effort that went into this.
That said, it makes me sad to see more fragmentation in the Material space. When Material launched, it was a set of design guidelines. A bunch of open source teams (like Material UI) stepped up and put together libraries that implemented those guidelines for specific view frameworks. This project looks like one of those efforts.
Since then, the Material Components for the Web project has formed. It's staffed by Google engineers who collaborate with the designers who write the Material Guidelines. They faithfully implement the Guidelines and makes updates as necessary to keep pace with design changes. The project is designed to be wrapped by other libraries to work with specific view frameworks.
I'd hope that any Material library for the web that's put together in 2019 would leverage that work. It will more faithfully follow the guidelines and be easier to maintain over time, because there's already a team of people responsible for maintaining the underlying framework.
If you haven't already, take a look at Material Components for the Web. You might have a better time if you back Material Kit with it.
https://github.com/material-components/material-components-w...
A little off-topic, but I'm learning CSS and this seems like as good a place as any to ask: What are the alternatives to material design (which I think I understand is a certain aesthetic that incorporates shadows and textures)? Is flat design the only main alternative in modern web design, or are there others?
Secondly, the online course I am doing is using fluid grid but I understand that flexbox is another option. Am I better off focusing on one or the other? Thanks.
There are others like the HIG (Human Interface Guidelines) from Apple. The ones that are in the open are more like full design systems meant for internal use and prestige. You can find a list of systems on this page: https://adele.uxpin.com
To use shadows for the z-index and layers is quite common these days though, many systems use them. Flat could be just a step after "inset" and before "raised" within a system like that, something you use for normal backgrounds and stuff that are part of the background.
The most basic element in a design system is essentially just an empty frame/box that could hold a shape and color, and optionally a shadow on a shape. This frame could become anything.
The only alternative to flat design that will not get you mocked is ironic Geocities aesthetic. Designing something with accents that feel solid and dimensional yet balanced and thougtful is right out, and will probably be sneered at by other “designers”, unless you are designing a video game UI.
Whether or not end users will welcome this is an open question. Everything is boring and flat now, usually on a glaring white background, and maybe that means the field is ripe for a change. Personally I’m beginning to miss all the design accents that aggressive minimalists deride as “skeuomorphic”.
Using Material design always feels so sluggish. Is it the shadows? Can someone with more CSS knowledge speculate about what's causing the high latency?
It's the shadows and the unnecessary animations for every single interaction.
Last time I paid attention drop shadows were extremely expensive to render, and using too many of them would severely reduce the framerate when scrolling and animating elements. I stopped using them partly because of that, and partly because I find them garish anyway and I haven't found a situation where they improved usability more than just using slightly different colors for foreground and background. I know material design uses them to indicate z-level and to differentiate UI elements from content, I just don't think it's the only way to do so.
This is yet more div soup judging by the examples in the Repo and the Wordpress theme.
I am struggling to find anything that is using HTML5, CSS Grid, CSS variables and other niceties of evergreen browsers the right way. It is almost as if web development has forked into two paths, one path being div soup bloat and the other being increasingly more complex build tools to arrive at the logical arrival of css in js.
I want the sensible features in modern evergreen browsers without these options of increasing div soup or increasing complexity. We can now have a true separation of content from styling and scripting with design being content first rather than visual mockups and placeholders.
The problem is that to start using the modern good stuff requires unlearning the bullshit that has gone on ever since the browser wars, nobody is giving up on the hacks, the frameworks and the complexity to do it properly with succinct content, succinct styling and straightforward scripts. Everyone is telling themselves they work on a team building products that are far too complex for any chance of going forward to more sensible document markup.
The days of div soup are not over - as exemplified by what we have here - but, once the good stuff has been discovered and the evergreen friendly stuff learned there is no going back to div soup and the working methods that go with it.
> It is almost as if web development has forked into two paths, one path being div soup bloat and the other being increasingly more complex build tools to arrive at the logical arrival of css in js.
css in js will not save you from div bloat.
Div bloat exists because CSS+HTML are horrendously bad at actual layout. For any sufficiently complex component you'll have div soup, and newer CSS features reduce the bloat only ever so slightly.
> nobody is giving up on the hacks
New frameworks have very few if any hacks leftover from the browser wars. The framework discussed here uses flexbox almost exclusively. It doesn't mean you don't need dozens of other hacks to display anything more complex that text.
> once the good stuff has been discovered and the evergreen friendly stuff learned there is no going back to div soup and the working methods that go with it.
Yeah, no. Div soup is here to stay, because it's literally the only foundational layout element of HTML.
I think that there is an alternative and the likes of Rachel Andrews are speaking my language when it comes to document structure, no div soup and CSS grid for the layout.
At school or university you have options regarding who you are going to copy to get that assignment done. You can spend hours plagiarising with a lot of work put into rephrasing things slightly so that your work will pass as your own. Or you can spend a lot of time second guessing what everyone else is doing and emulating what you think the solution is. Or you can actually ignore what everyone else is doing and roll your own solution, learning the fundamentals, copying nobody. Then when done you can have a look around and see what you missed in the other ways the problem has been solved. By going original in your thinking you might have missed a trick or two. Or got something wrong. But, with a foundation of original work you can confidently patch up what you have got to be best in class, all defects removed.
I think the web is like that. Sometimes you look for a simple aide-memoire on Stack Overflow where once upon a time all the answers were seemingly brilliant. But then you realise that you have moved on from that, your own code is better, you aren't just copying and imitating, you have this understanding thing going on that is lacking in some of the other answers.
Then there is the hamster wheel of forever having to learn the latest and greatest, that panic and fear of the unknown latest framework. So another round of copying and imitation goes on, the mountain top of confidence and knowledge never reached as there is always another extra thing to add in to the build chain to make it better.
But then you realise you are working on a second rate website to sell hair care products to care bears. And it doesn't need the latest trends in visual design or the convoluted ways of cooking up yet more div soup that nobody is ever going to notice.
I beg to differ on your attitudes towards your staple diet of div soup. Concise, content first actual content is not the same thing as bullshit written by people that can't spell force fed into some content blocks that rightfully should only ever contain the lorem ipsum text the visual mockups demanded of them. It is time people started with the raw manuscript and got the copy right without applying a single style. When this is done styling with CSS grid and lovely HTML5 elements works beautifully. This is no marginal gain in bloat, it is a whole new world of maintainability and awesomeness. If you ain't doing it right you are doing it wrong and some mastery of CSS grid is needed, it ain't just something you sprinkle in div soup like it is a fifty bucks Wordpress theme.
Content is king and there isn't any div soup needed. Maybe a div for holding that Google ReCaptcha button but I am struggling for bona fide instead of lazy ignorant uses thereafter. You have got to get the document structure right, accessible and good for modern CSS.
Of course this falls apart if you need to support 32 bit iPads or that person struggling along with Internet Explorer 6.
> content, content, content
Yeah. If by content you mean text and images. And HTML + CSS can hardly handle that.
And here's what I said, and it's true as ever:
> For any sufficiently complex component you'll have div soup
> Div soup is here to stay, because it's literally the only foundational layout element of HTML.
No amount of grand words about hamster wheels and ad hominem attacks like "people who can't spell" will change the sad reality: the web has moved on beyond simple texts with images, CSS and HTML have not.
Here's an example of a component that puts content first. Developed with modern CSS with no hacks (each css class essentially represents a single CSS property, everything is flexbox etc.): https://tailwindcss.com/docs/examples/cards
Do enlighten me how you get rid of the div soup. I'm especially interested in the "lovely HTML5 element" called "a card capable of displaying an image and text".
Flexbox is old hat, use your favourite search engine to see how easily it is done with CSS Grid - grid not flexbox.
You can nit pick on any example tutorial but do the research and you will find it all works great with CSS grid, you just might have to learn how it works rather than copy and paste.
The class bloat is another problem with div soup, also sometimes you need to put aside the mentality that everything has to be sooo complex, simplicity is hard, anyone can make everything complex and buy into the myth that everything has to be complex.
There is always a better element than 'div', the exception to the rule is where you need something that would have been an 'object', e.g. a Google 'recaptcha' needs a 'div'.
The same goes for 'span', unless you really need to change the colour of the second letter of a word there is always a better way, e.g. psuedo elements.
> There is always a better element than 'div'
Please show me a better element for “a card to display an image and text”.
It would also be nice if that element used CSS grid.
I've found Spectre to be relatively palatable.
https://picturepan2.github.io/spectre/index.html
Seconded. Spectre is small, fast, rich, complete, accessible (I think) and works great on low resource machines.
Is this kit any better than https://material-ui.com/ when using React?
@Flavius, our Material Kit React is built on top of Material-UI so it's basically the same thing at the core base, we just give more examples and people spend less time creating a page or a dashboard like this https://www.creative-tim.com/product/material-dashboard-reac....
Sorry to be rude, but simply no. I used both (inherited a Material Kit project and moved it to Material UI), and the quality of MUI is simply astonishing:
1. Releases are very thoroughly cut 2. The APIs are very well designed 3. The result is incredibly professional
The React version of this Kit is built on top of MUI so I'm kind of confused about this comment.
Does the Material UI one have Sketch and Figma files so designers and coders are on the same page? That's a good added value of CreativeTim's offering.
Wow, such negative comments. Nobody cares that you don't like Material Design. /rant
This looks awesome! As a designer and engineer, it's always frustrating when I design something that turns out to be next to impossible to do with the component library we've chosen to use. Having such a comprehensive set of design platforms and web frameworks covered here solves that problem for us. Thank you for building this!
BTW, if you haven't tried Figma, you really should. It's cross platform and even runs perfectly smooth in your browser.
On that note, @axelut - it would be nice if there was a link to open the Figma UI Kit, so I could preview it in browser, rather than having to download it first.
Thank you for the feedback, glad that you see this useful. I agree that Figma is getting better and better, that's why we started to work with it. Please check this link: https://www.figma.com/file/bvQEB3MNOzDx5KrBWLZmmIre/Material... and let me know if it is fine.
This isn't following the latest Material spec. For example, see the text inputs; they went away with the underlined fields style (for some good reasons). I'd love to see that updated, then I might consider using it.
People could just import the individual Material web components, rather than trust any number of 3rd parties to keep their own remake of Material design up to date.
https://github.com/material-components/material-components-w...
I came across the Vuetify dashboard the other day for a side project I'm spinning out (http://www.sweephq.com - may or may not open source, haven't decided yet).
There are some fantastic themes/UI components here. Great job.
Hi, thank you for the kind words and congrats for the product. If you do it open source we can let our users know about it, maybe somebody can use it. We should keep in touch as we are working on some email templates that will also be release under MIT license. Ping me at alex@creative-tim.com :D
The e-mail templates also sound like a logical fit - will certainly drop you an e-mail if I decided to release OSS!
Vuetify is so easy to work with. Sure some docs are missing and I don't like some of the default styling but it gives you the ability to write good SPAs with very little effort.
Material Design ain't got that cosy feel to it.
On the product pages, what's used to collect, store and display the customer reviews? e.g. https://www.creative-tim.com/product/vue-material-kit. Just curious as social proof like this is really useful when you're trying to sell products.
So you have to upgrade to Pro to get documentation and SASS sources?
Feels really sluggish.
This looks really nice, thanks for building it.