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.
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 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.”'
Don’t design frameworks like bootstrap foundation and material design represent utility-first design?
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.
But props for the effort.
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.
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...
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.
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.
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”.
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.
1. Releases are very thoroughly cut 2. The APIs are very well designed 3. The result is incredibly professional
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.
https://github.com/material-components/material-components-w...
There are some fantastic themes/UI components here. Great job.
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.
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.
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.
Went with Grommet - perhaps for no good reason, but that's the joy of side projects.... (and liking it so far).
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.
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.
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?
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.
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.
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".
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.
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.