Search

Bauhaus Ideology and the Future of Web Design

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Hello, I’m Simon, co-founder and creative director at Erskine Design.
    Today I am going to take a gamble, a bit of a leap of faith, and try and argue some points about Bauhaus, and modern web design.
    Okay, who has heard of Bauhaus?
    Who knows much about Bauhaus?
    Who knew much before they read that I’d be talking about it?
    Any obsessive Bauhaus nuts?
    Personally, I like to get ideas at conferences. I like to take something away with me, or if not, at least be challenged, or find some talking points. Also, at Future Of... events, I like to hear people talk a little about what we might expect. With that in mind, here I go.

    Okay, I only have 25 minutes or so, and I usually waffle over, so I need to dispense with detail, do a brief history lesson, and ask you to trust me here.

    Bauhaus were an English rock band formed in Northampton in 1978.
    With their dark and gloomy sound and image, Bauhaus are generally considered the first gothic rock group.
    The band was originally Bauhaus 1919...

    This book was one of probably only two or three creative books in the house when I grew up. Neither my Mum or Dad were creative in that sense, and they didn’t know where it came from - same argument for the “adult books” in Dad’s shed.. I put the Bauhaus book in my room and it fascinated me.
    Later, I went to art school, but I didn’t take any formal design schooling. I graduated in 1996. There wasn’t really any form of “internet” back then, so we didn’t consider it, nor any great focus on the new media we appreciate today.
    Yet, thinking back, I learned a huge amount about theory in art - the analytical, the scientific, the theoretical. I try to use much of this as background inspiration in my approach to web projects.
    We learned about Swiss design and Russian schools. We learned a great deal about not just visual art - painting - but sculpture, textiles, furniture and product design. We studied the “isms” - the phases of creativity in art and design. We read the manifestos. We studied modernism.
    I learned most of this indirectly, through the common elements of all - materials, form, light, space, colour. On occasion however, the impact was direct, such was the impression made on me by the Bauhaus.

    Walter Gropius, an architect, wanted to change the conditions he experienced after WW1
    A man who considered beauty a basic requirement of life. He wanted to build a whole school, despite resistance. He wanted to build a laboratory.
    He became the founder and original director of the Bauhaus.

    As I talk through this section, try to have web design in your mind, and think about how visionary the Bauhaus way of thinking was - how it looked directly into a more positive future.
    Bauhaus means “House of Building” or “Building School”.
    It was founded in order to create a “total work of art”, in which painting, sculpture, photography, product, furniture, industrial and graphic design - even performance, could be schooled with a basis in that which can be taught- handicrafts - with architecture playing an increasing role as the school blossomed.
    The school existed in three German cities, Weimar, Dessau and Berlin, with varying directors ensuring the focus, techniques and politics were constantly shifting around the core principles of founder walter Gropius. A year after it was founded, a similar school called Vhektumas was born in Russia. This in turn bred Constructivism, and the making of art and crafts more meaningful for society, proposing that “art” as end product might disappear. It would be more closely integrated into our society, with real purpose.

    To destroy separations between disciplines, creativity is one whole, and place emphasis on people’s character rather than talent, Gropius appointed painters with constructive, theoretical studies - a philosophy of space, colour, form: Klee (Swiss), Kandinsky (Russian).
    He thought that painters could bring new and varying - even conflicting - insight into architecture, product and graphic design.
    Mies Van Der Rohe (architect), and Maholy Nagy (painter and photographer). Influential, inspiring people.
    Two types of teachers - teachers for technique, and teachers for form. Theory and create. Design and develop.

    For example, the cantilever chair was born out of this activity - a perfect combination of form and function, explored and created through the holistic approach of the bauhaus. The influence on architecture was also significant.

    For example, the cantilever chair was born out of this activity - a perfect combination of form and function, explored and created through the holistic approach of the bauhaus. The influence on architecture was also significant.

    Materials and tools as a means to an end. Understand whole process via craftsmanship. Understanding light, colour, space, form. The science of design. The importance of the materials. Make models. Stop learning on paper - make stuff! Understand the process of industry.

    Typographical collage as experiment.
    The student would then grow as an individual by taking and interpreting the science.
    Destroy imitation! Build up the individual.

    Interestingly, it’s main forms of revenue in all this time were pottery and wallpaper designs.
    It was finally closed by the Nazis in 1933.

    Bauhaus used grotesque typefaces (19th century sans serif etc). Known in Germany as Akzidenz Grotesque (Akzidenz means everyday jobbing, commercial printing).

    Rejecting old-style and “fancy type”, Bayer sought to create an internationally valid and legible style of lettering with his “universal type”. No additional weights, very simple sans-serif. Abandoned uppercase. Contradiction. He believed that type must be an expression of our times, like cinema, architecture and machines. Made of as few geometric forms as possible.

    Much like the geometric simplicity of Bauhaus type, many of the Bauhaus key principles influencing the Swiss design language that found a firm foothold before and after WW2, and in turn influences much of graphic design today.
    Here, we see examples of type elements such as bullets used as ornament, and this was also common with bold lines.
    Swiss ethic also understood economy with type - function above form, and “truth to material”.

    Today’s responsible web

    The Machine Age. While human performance may be enhanced by a sense of well-being endowed by aesthetic pleasure, machines have no such need of beauty to perform their work tirelessly. Ornament becomes an unnecessary relic, or worse, an impediment to optimal engineering design and equipment maintenance.
    Our work would not exist without the machine - the computer, the mobile device.
    We have embraced the quirks and idiosyncracies of the machine, and recognised it as a moment in history where the computer device enables mass production of our ideas, our content, and how it encourages communities, sharing.
    Explored the machine, the computer, and acknowledge it. It’s limits, it’s problems, but also how we can exploit it further in web design.

    You’re ahead of me, right?
    Our industry grew at a fast rate, without a responsible attitude or serious governance.
    The rise of web standards by forward-thinking, worldly-wise individuals and groups has cemented our industry with an often unwritten law of best practice.
    The adoption of web standards.
    The importance of using conventions.
    The role of testing. Auditing. Iterating.

    Naturally we have sought to improve and iterate our tools, our languages, our end results.
    We have learned how to mix and match and combine our tools.
    In the spirit of the Bauhaus, we have brought together independent tools and learned to make them work together to solve problems.
    We learn from Flash and vice-versa.
    HTML & CSS & DOM - web standards - a perfect synthesis.
    AJAX is another perfect synthesis.
    Mash-ups, RSS, manipulating data from numerous sources.
    This will go on forever, and we’ve no ideas how this experimentation and synthesis will evolve.

    Look at our appreciation of web standards here. How we break our websites into layers of style, content, behaviour.
    Look at our processes. How we analyse the need, the function. We rarely build without purpose, without taking the time to understand the need, to do research, to analyse. We aim for a complete design solution where form follows function. We seek to make visual impact without diminishing the function, the role of the website.
    With this statement, we often find ornament and decoration is criticised. I’d argue that the statement that “ornament is crime” predates the bauhaus, and that Gropius believed in beauty, as did Mackintosh before him. We strive for beauty but not at the expense of function, and we know how carelessness with ornament can ruin the user experience. The flipside is that ornament can often enhance the experience, the function. As an industry we are managing the balance very well.
    Finally, we are an analytical industry. Like the modernists we are, we recognise the beauty in the industrial components of what we do. We admire grids, typographic rhythm, we salivate over code and markup. The modernists admired steel water towers, and we admire beautifully crafted JavaScript function for their simple integrity.

    The Don’t make me think! Make me do! attitude. Steve Krug’s book.
    Accessibility & Usability are at the centre of our decision-making.
    We aim to construct meaning with economy, without confusion.

    Accept perhaps that we are using binary and pixels on a machine.
    It is fun to experiment with handwritten type, boxes stuck on with pretend masking tape, pins stuck in things
    We at Erskine are culprits (Wallswaps), as will be many of us.
    I myself have laboured over getting fake stickers and tea stains to look right in Photoshop before bringing them to my pages with CSS.
    But, in all honesty, who has ever managed to get a cup of tea to stick to a vertical computer screen.
    This is not a reality. We’re creating a fake environment.
    Its not to say that fake ornament or this level of visual experimentation is wrong, but perhaps the future of web design will better reflect the materials we use, and honestly embrace them. Think perhaps more “computer-y” interfaces and design.
    Not a return to the Wargames green-screens, but more obvious use of pixels, grids, formulas, mathematics.
    Perhaps the imminent threat of thousands of unsuitable typefaces hitting the web will breed a period of over-decoration that we’ll rally against in a year or two, boiling back down to the basics, to the computer, the machine, and what it’s real purpose is.

    http://ecoki.com/
    be much smarter with our approach to “affordance”

    Tiffani Jones new site http://secondandpark.com/

    Bauhaus principles of combining the off-the-shelf with the new and creative.
    Modular systems were evident in architecture, and always attractive for print design and column layout.
    Kandinsky’s papers exploring compositional theory and Klee’s colour theory could be applied to more thoughtful painting and other disciplines.
    Arithmetical ratios always attractive to architects and graphic designers.
    Tools for assembling text and image and imagining a structure.

    Credit Mark’s “Designing For The Web”
    The “grid” as we might understand it was not a formal concept at Bauhaus, but the theory was taking us towards it, more formally grasped by the Swiss.
    So, today, we consider the grid in our web design. We think about rhythm in our typography and baseline grids.

    What is even more fun, is that we can be transparent about our systems, we can learn to reveal them.
    Importantly, we can begin to think about the “systems” we use as more holistic, made up of much more than just the mathematical foundations, but also the flexibility of colour systems, type families, extensible navigation. Our use of whitespace, light and shade, our attitudes to form and shape.
    As Andy Clarke said at @Media this year, we don’t design pages, we design “systems”.
    What we build is rarely finished. We build systems that flex and grow with the client, the business, the organisation, the community.
    Once we have systems we understand, we can then learn to break their rules and be truly creative..

    Yeah, I also hate words like holistic, and all that “Dao of” and Tao of” stuff. I also get mighty cross when religion gets thrown in but that’s another story.
    Embrace inspiration and theory from beyond just web design. Stop reading only Smashing Magazine and Tutorial Blog, or trawling CSS galleries.
    Learn from theory.
    Explore other areas of inspiration. Graphic design, art, cinema, music, packaging, walking, sleeping - anything.
    Find ways of building your systems, your designs, your methods of navigation.
    Clearleft build navigation out of paper.

    Mark Boulton “Designing For The Web”
    Learning from existing, long-standing theory.
    We have embraced a lot of print methodology, but we must ensure what we take is applicable to teh web.
    After all, a website is not a book, not a leaflet, not necessarily a poster.

    Mark Boulton “Designing For The Web”
    Learning from existing, long-standing theory.
    We have embraced a lot of print methodology, but we must ensure what we take is applicable to teh web.
    After all, a website is not a book, not a leaflet, not necessarily a poster.

    Jason Santa Maria is a designer who explores web design from a holistic viewpoint.
    “The screen brings with it different kinds of challenges for visual design, some of which occur exclusively in interactive media. It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday. These are the building blocks for our new design principles.”

    Encourage creativity and freedom of expression for designers and clients, amidst a web dominated by CMSs and templated systems, restrictive systems etc.

    Individuals bringing personality and expression to agency websites.
    We did this with our Greg Wood.

    Templated vs “art-directed” blog posts
    http://jasonsantamaria.com/articles/whats-golden/

    http://gregorywood.co.uk/
    We can at least begin to offer more manageable ways of arranging content for clients.
    Think about how best to let them illustrate their messages and meanings through templating choices that are sensitive to the data.

    can we think about light, space, colour, shape, form, science, expression etc. Build models. A utopian idea of the web?

    Are we contradicting the “honesty of construction, truth to materials” idea, or failing to embrace the machine by exploring these ideas?
    I don’t think so. We can learn to balance the real world with the machine environment?
    Think about affordance in design. The art of using real-world techniques such as buttons, behaviours, shadows etc to create usable, easily understood interfaces.

    We can also adapt to the world in terms of the way users and communities engage with the web. We currently know very little about where all of this is going, and if any one of us has a Utopian idea of what the web should be, or where it should take us, then we need to think about those dreams as possible realities.

    I wonder, have we forgotten to build upon the great leaps made by the plethora of crazy Flash experimental sites of the last decade?
    yugop.com / joshua davis.
    This is beautifully confusing example.
    Time, real time, computer time, mathematical, analytical, illustrative, pointless.

    yugop.com
    Using the rectangle in a real-world way here. Bouncing type off imaginary walls.
    2D is already an abstraction of the more possible 3D. can we think about the web as a 3D medium yet?
    Can we explore spaces within a 2D surface, within a rectangle.
    Three dimensions, break the rectangle. We already break the rectangle downward and sideways - the folds and the edges. We pop-up out of it and under it.

    Bridge the gap between HTML (5) and Flash?
    Is HTML5 and Canvas the answer?
    Can we further explore and encourage the flexible, liquid web?
    We have this unique medium of expanding and contracting rectangles, and devices of all screen sizes!
    We must begin to further identify best methods for making the most of our content within fluid rectangles.
    perhaps this way we might end up truly breaking the rectangle?!

    Here’s a snippet of Walter Gropius talking about his Utopian ideals after WW2.
    He sounds a bit like a German Bobby Robson.
    I hope that this brief run through the Bauhaus ideology and its possible influences on web design has been useful in some way. perhaps you’ll disagree with some of my conclusions. I’m happy with that.
    For me, its important to hold certain influences and beliefs and apply them to your own practice. In my opinion, much of what I love about the Bauhaus is applicable to what I’m doing now, and what I hope to be doing in the future.

    8 Favorites

    Bauhaus Ideology and the Future of Web Design - Presentation Transcript

    1. bauhaus ideology and the future of web design simon collison fowd tour 2009
    2. bauhaus ideology and the future of web design simon collison fowd tour 2009
    3. bauhaus ideology and the future of web design simon collison fowd tour 2009
    4. bauhaus ideology and the future of web design simon collison fowd tour 2009 Walter Gropius
    5. bauhaus ideology and the future of web design simon collison fowd tour 2009
    6. bauhaus ideology and the future of web design simon collison fowd tour 2009 Left to right: Josef Albers, Hinnerk Scheper, Georg Muche, László Moholy-Nagy, Herbert Bayer, Joost Schmidt, Walter Gropius, Marcel Breuer, Wassily Kandinsky, Paul Klee, Lyonel Feininger, Gunta Stölzl, Oskar Schlemmer
    7. bauhaus ideology and the future of web design simon collison fowd tour 2009 one of the main objectives of the bauhaus was to unify art, craft, and technology. the machine was considered a positive element, and therefore industrial and product design were important components.
    8. bauhaus ideology and the future of web design simon collison fowd tour 2009
    9. bauhaus ideology and the future of web design simon collison fowd tour 2009
    10. bauhaus ideology and the future of web design simon collison fowd tour 2009 Gropius called for a reform in artistic process, rather than a new style. He said that art cannot really be taught, so he declared that art should be led back to its fundament and prerequisite in handicraft, where it is possible to learn how to handle materials
    11. bauhaus ideology and the future of web design simon collison fowd tour 2009
    12. bauhaus ideology and the future of web design simon collison fowd tour 2009
    13. bauhaus ideology and the future of web design simon collison fowd tour 2009
    14. bauhaus ideology and the future of web design simon collison fowd tour 2009 • an environment of experimentation and synthesis • mass production is reconcilable with individual artistic spirit • honesty of construction, truth to materials • form follows function • simplified forms and clean lines • qualities of light & airiness • standardised production • architecture adapted to our world
    15. bauhaus ideology and the future of web design simon collison fowd tour 2009 what if web design had existed in the 1920s? have we learned anything from bauhaus principles? how might we move forward?
    16. bauhaus ideology and the future of web design simon collison fowd tour 2009 a bauhaus view of today’s web
    17. bauhaus ideology and the future of web design simon collison fowd tour 2009 1 acknowledge the machine
    18. bauhaus ideology and the future of web design simon collison fowd tour 2009 2 standardise production
    19. bauhaus ideology and the future of web design simon collison fowd tour 2009 3 encourage experimentation and synthesis
    20. bauhaus ideology and the future of web design simon collison fowd tour 2009 4 form follows function
    21. bauhaus ideology and the future of web design simon collison fowd tour 2009 5 economy and simplicity
    22. bauhaus ideology and the future of web design simon collison fowd tour 2009 a bauhaus view of tomorrow’s web
    23. bauhaus ideology and the future of web design simon collison fowd tour 2009 1 honesty of construction truth to materials
    24. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://www.ecoki.com/
    25. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://secondandpark.com/
    26. bauhaus ideology and the future of web design simon collison fowd tour 2009 2 develop systems
    27. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://fivesimplesteps.co.uk/
    28. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://sushiandrobots.com/
    29. bauhaus ideology and the future of web design simon collison fowd tour 2009 3 a holistic approach to web design
    30. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://flickr.com/photos/adactio//
    31. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://fivesimplesteps.co.uk/
    32. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://jasonsantamaria.com/articles/whats-golden/
    33. bauhaus ideology and the future of web design simon collison fowd tour 2009 4 mass production and individual expression
    34. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://squaredeye.com/ http://kissmeimpolish.com/
    35. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://jasonsantamaria.com/
    36. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://gregorywood.co.uk/
    37. bauhaus ideology and the future of web design simon collison fowd tour 2009 5 adapt and respond to our world
    38. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://www.yugop.com/
    39. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://www.yugop.com/
    40. bauhaus ideology and the future of web design simon collison fowd tour 2009 http://www.chromeexperiments.com/detail/browser-ball/
    41. bauhaus ideology and the future of web design simon collison fowd tour 2009 Excerpt from “On Utopianism”, spoken by Walter Gropius.
    42. bauhaus ideology and the future of web design simon collison fowd tour 2009 thanks simon collison fowd tour 2009 www.slideshare.net/collylogic erskinedesign.com colly.com @collylogic

    + Simon CollisonSimon Collison, 2 months ago

    custom

    1441 views, 8 favs, 4 embeds more stats

    The Bauhaus ethic applied principles such as "hones more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1441
      • 1378 on SlideShare
      • 63 from embeds
    • Comments 0
    • Favorites 8
    • Downloads 63
    Most viewed embeds
    • 56 views on http://erskinelabs.com
    • 4 views on http://discon1.blogspot.com
    • 2 views on http://www.erskinelabs.com
    • 1 views on http://www.discon1.blogspot.com

    more

    All embeds
    • 56 views on http://erskinelabs.com
    • 4 views on http://discon1.blogspot.com
    • 2 views on http://www.erskinelabs.com
    • 1 views on http://www.discon1.blogspot.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved