You could say that we design to communicate, and that we seek emotive responses. It sounds straightforward, and it can be, but leaving it to chance isn’t wise. Many wander into web design without formal training, and whilst that certainly isn’t essential, we owe it to ourselves to draw on wider influences, learn from the past, and think smarter.
What knowledge can we ourselves explore in order to become better designers? In addition, how can we take this knowledge, investigate it through our unique discipline, and in turn speak more eloquently about what we do on the web? Below, I outline a number of things that I personally believe all designers should be using and exploring collectively.
Taking stock
Where we’re at is good. Finding clarity through web standards, we’ve ended up quite modernist in our approach, pursuing function, elegance and reduction. However, we’re not great at articulating our own design processes and principles to outsiders. Equally, we rely heavily on our instincts when deciding if something is or isn’t good. That’s fine, but we can better understand why things are the way they are by looking a little deeper, thereby helping us articulate what goes on in our design brains to our peers, our clients and to normal humans.
As designers we use ideas, concepts, text and images. We apply our ideas and experience, imposing order and structure to content, hoping to ease the communication of an idea to the largest possible audience or to a specific audience. We consciously manipulate most of what is available to us, but not all. There is something else we can use. I often think that brilliant work demands a keen understanding of the magical visual language that informs design.
Embracing an established visual language
This is a language whose alphabet is shapes, structures, colours, lines and rhythms. When effective, it is somewhat invisible, subliminally enforcing messages and evoking meaning, using methods solidly rooted in a grammar perceptible in virtually all extraordinary creative work. The syntax for art, architecture, film, and furniture, industrial and graphic design (think Bauhaus and the Swiss style perhaps), this language urges us to become fluent if we aim for a more powerful dialogue with our audience.
Figure 1: Structures (clockwise from top-left): Informal; Formal; Active; Visible.
The greatest creative minds our world has produced could understand some or all of this language. Line and point, form and shape. Abstract objects. Formal and informal structures. Visual distribution. Balance, composition and the multitudinous approaches to symmetry. Patterns and texture. Movement and paths. Repetition, rhythm and frequency. Colour theory. Whitespace and the pause. The list goes on.
The genius we perceive in our creative heroes is often a composite of experience, trial and error, conviction, intuition – even accident – but rarely does great work arise without an initial understanding of the nuts and bolts that help communicate an idea or emotion.
Our world of interactivity
As web designers, our connection with this language is most evident in graphic design. With more technological ease and power comes the responsibility to understand, wisely use, and be able to justify many of our decisions. We have moved beyond the scope of print into a world of interactivity, but we shouldn’t let go of any established principles without good reason.
Figure 2: Understanding movement of objects in any direction along a defined path.
For example, immersion in this visual language can improve our implementation of CSS3 and JavaScript behaviour. With CSS3, we’ve seen a resurgence in CSS experimentation, some of which has been wonderful, but much of it has appeared clumsy. In the race to make something spin, twist, flip or fly from one corner to another, the designer sometimes fails to think about the true movement they seek to emulate. What forces are supposedly affecting this movement? What is the expected path of this transition and is it being respected?
Stopping to think about what is really supposed to be happening on the page compels us to use complex animations, diagrams and rotations more carefully. It helps us to better understand paths and movement.
Figure 3: Repetition can occur through variations in colour, shape, direction, and so on.
It can only be of greater benefit to be mindful of symmetries, depth, affordance, juxtaposition, balance, economy and reduction. A deeper understanding of basic structures can help us to say more with sketches, wireframes, layouts and composition. We’ve all experimented with grids and rhythm but, to truly benefit from these long-established principles, we are duty-bound to understand their possibilities more than we will by simply leveraging a free framework or borrowing some CSS.
Design is not a science, but…
Threading through all of this is what we have learned from science, and what it teaches us of the human brain. This visual language matters because technology changes but, for the most part, people don’t. For centuries, we humans have received and interpreted information in much the same way. Understanding more of how we perceive meaning can help designers make smarter decisions, and call on visual language to underpin these decisions. It is our responsibility as designers to be aware of mental models, mapping, semiotics, sensory experience and human emotion.
Design itself is not a science, but the appropriate use of visual language and scientific understanding exposes the line between effective and awkward, between communicative and mute. By strengthening our mental and analytical approach to what is often done arbitrarily or “because it feels right”, we simply become better designers.
A visual language for the web
So, I’ve outlined numerous starting points and areas worthy of deeper investigation, and hopefully you’re eager to do some research. However, I’ve mostly discussed established ideas and principles that we as web designers can learn from. It’s my belief that our community has a shared responsibility to expand this visual language as it applies to the ebb and flow of the web. Indulge me as I conclude with a related tangent.
In defining a visual language specifically for the web, we must continue to mature. The old powerfully influences the new, but we must intelligently expand the visual language of masterful work and articulate what is uniquely ours.
For example, phrases like Ethan Marcotte’s Responsive Web Design aren’t merely elegant, they describe a new way of thinking and working, of communicating about designs and interaction patterns. These phrases broaden our vocabulary and are immediately adopted by designers worldwide, in both conversation and execution.
Our legacy
Our new definitions should flex and not be tied to specific devices or methods which fade away or morph with time. Our legacy is perhaps more about robust and flexible patterns and systems than it is about specific devices or programming languages.
Figure 4: As web designers, we should think about systems, not pages.
The established principles we adopt and whatever new ways of thinking we define should slip neatly into a wider philosophy about our approach to web design. We’re called, as a community, to define what is distinctive about the visual language of the web, create this vocabulary, this dialect that resonates with us and moves us forward as we tackle each day’s work. Let’s give it some thought.
Further reading
This is my immediate “go-to” list of books that I bullishly believe all web designers should own, but there is so much more out there to read. Sadly, many great texts relating to this stuff are often out of print. Feel free to share your recommendations.
- Don Norman, The Design of Everyday Things
- Christian Leborg, Visual Grammar
- Scott McCloud, Understanding Comics
- David Crow, Visible Signs
- William Lidwell and Katrina Holden, Universal Principles of Design
Comments
Got something to add? You can just leave a comment.
16/12/2010
Great article, I like how you’re putting the focus on more perennial matters, rather than transient technical details.
Also, thanks for the reminder that I need to read Understanding Comics!
16/12/2010
Great article, whilst reading it all I was thinking was “I really need to get started on the book I bought at the design museum a few weeks back”, got to the bottom and realised it’s one of your suggestions – Universal Principles of Design. I’ve only read about 5 pages of it and I’m already loving it.
Going to stick all of the others in my “to read” folder and get through it.
Thanks for the suggestions and a great article :-).
16/12/2010
Fantastic article Simon, has given me lots to think about and research to take my designs to the next level.
And now my reading list gets longer…. :D
16/12/2010
Excellent article.
When I first started practising web design I thought that my Graphic Design degree wasn’t much use. At the time the technology was leading my development and not my training.
5 years on and I’m glad I have a traditional design degree behind me. It’s allowed me to use some of the traditional design language in your article to communicate ideas with not only the guys @Newism but also sell design concepts to clients. I’ve found that if you can rationalise your design then you will be more confident presenting it to peers and clients.
Our industry is clearly maturing. Nice work 24ways for contributing such valuable dialog.
16/12/2010
I find that years of thinking one way due to environmental constraints make it difficult to shed what is in fact ‘wrong’ behaviour.
10 years ago, graphic designers used to hand me web site designs with Next Page and Last Page links in the navigation, just like a Powerpoint presentation (which was how many of them saw web sites).
5 years ago, many of them believed that the rise of CSS mainstream support meant they could finally have pixel-perfect renderings of their designs on screen and web design would finally be just the same as print design.
Now I find it’s me trying to break free of the idea that web sites are made of pages. We finally have the freedom to think of these sites as systems, not pages of hypertext, and my brain is trying to resist that idea.
Thank you for the reminder. I am sure when my copy of the 24ways book arrives, this essay will be one I return to frequently.
16/12/2010
Inspirational read
16/12/2010
Wearing many hats can be tough, even for those of us who love to learn new things. As a web designer/developer/writer/blah/blah, I want to spend the time to learn it all, but usually certain areas get neglected while I focus on new areas of curiosity and challenge. I’ve been thinking about that neglect more recently as 2010 wraps up, and I’ve realized that design is one area that I need to give more focus.
Therefore, I agree with Sebastian. This was an inspirational article, Simon. Thanks for sharing your ideas as well as your recommendations for further reading.
By the way, while adding your books to my Amazon wishlist I discovered a newer edition of one of Universal Principles of Design:
http://www.amazon.com/Universal-Principles-Design-Revised-Updated/dp/1592535879
16/12/2010
I liked your quote about systems.
I tell my students our job is actually closer to the architect’s than to, say, printed-graphic designers. Our focus is not about decoration nor illustration; it is about building experiences around data access, by designing systems, just like architects and urban planners do when they create a house, a park: they think about purpose and meaning and transcribe them into volumes, circulation, space, atmosphere and flows (air, water, electricity, pedestrians).
Our job is very similar to that: a website is an environment. As you say: a system.
16/12/2010
Leevi: I thought it might resonate with you. I think your design knowhow is apparent in the decisions you make in your interfaces.
Alan: I agree. Sounds like we have similar experiences. We find ourselves constantly shifting our philosophies as we learn more. Your comment put the whole “do websites have to look the same in every browser” question in my mind. We learned that the answer is of course “no”.
Alexandre: I really like your correlation with architecture; beautifully explained. I like the idea of the website as “environment” a lot. Also, I agree that decoration and illustration is not our primary focus, but I do feel such “delight’ can improve the user experience, or assist in telling a story perhaps, especially if produced thoughtfully and in line with much of what I’ve outlined today.
16/12/2010
I think it is a natural evolution for a web-designer to start thinking of a web-site as a system and not just a set of pages — because we’re always assessing and building these systems around the user and helping them better navigate these faux environments.
My biggest challenge at the moment is getting approvals from the client in basis that the website is created for their clients and not for them (the client) specifically.
I try to use the analogy of building a house for oneself, where one can organize rooms and place sofas at will – without the regard for the occasional visitors. However, a web-site is created specifically for these visitors who we help navigate throughout these systematic environments with a specific goal in mind.
My quest is to explore more of this as a mosey along.
Thanks Simon for pushing forward with these insights.
Cheers to that.
16/12/2010
Thanks for your excellent ideas. I too have felt the need for a deeper understanding of communication in our industry (both in how our designs communicate and how we ourselves communicate).
I’ve found blogging to be a really great way to practice articulating my ideas. Writing my ideas out first forces me to be thorough and coherent, and I am that much more prepared when I speak to people about web design.
17/12/2010
Thanks for mentioning semiotics. It’s one of my life endeavors to bring semiotic awareness to web design (and designers).
18/12/2010
Awesome, Simon.
I think talking about this stuff is as important as learning. Helps us learn, even. It’s like practice. I think we need to be more open with one another about critique, and try using terms like these in that context.
Dribbble, for instance, is a great forum for such critique. We should make a bigger deal of folks who offer, and receive well, constructive and educated critique.
18/12/2010
Really great read.
I am from a design background but have been spending the last 5 years learning HTML, CSS & javascript I have been very much bogged down in thinking that I am becoming more of a developer and that I need to continue to broaden my knowledge and understanding of programming languages in order to use it as a tool just to get a point across.
Reading this has reminded me that in order to convey a truly meaningful message in this industry it is important to understand the visual language and that knowledge rather than one of a developer is vital.
Happy Christmas!
18/12/2010
Tim: Thanks my friend. Thought I’d add and extend my replies from our Twitter conversation here for others.
I think we need to push this in every possible way, using every avenue, private and public, in our heads, in our work. Especially as a community, so debate/forums, intelligent conference topics etc. We educate and explore. Also, we continue to create, sketch, try, do, fail, win, then make sure we write/blog about our findings and share.
Collectively we investigate all of this, but not try to force it. Terms and definitions for what is uniquely ours will evolve naturally or when relevant, like “Responsive Web Design” did once Ethan identified the pattern or specific rules of the interactions.
I think we need to continue to find clarity, but not look to produce a dictionary of terms or “manual”.
Dribbble doesn’t feel like the best outlet, but it is a place where we talk about our ideas and output, so yeah, maybe that is one place where we try to spot shared interactions and talk about them eloquently in the threads and look for outcomes.
Perhaps above all, it is our daily work where we find true outcomes. I think we make our best discoveries in our work, which is purposeful, and whole. By meeting challenges we find answers.
As Frank Chimero said in our Twitter conversation, interaction design is where the pieces fit together, and therefore where we discover the patterns and systems that really matters to us as web designers.
18/12/2010
Gareth: I totally agree. I did a talk about this stuff to a mostly developer audience at an ExpressionEngine conference in Summer, and feared it might not go down too well. Thankfully, many totally understood this need to now marry their development prowess with a better understanding of what is really happening in their interfaces. This made me very happy indeed. So, whilst I might be addressing designers in this article, I’m really aiming this at everyone.
18/12/2010
I’m glad that you listed Christian Leborg’s book under Further Reading. The figures that you used look like recreations of the figures in his book “Visual Grammar.” I wonder if you re-created them, or if you scanned them from another book? Either way, I think it would be fair of you to give more explicit citations next to your diagrams.
19/12/2010
Sally: Yep, the Christian Leborg book has partly influenced my thinking for a couple of years now, and three of the four examples in this article are my own recreations of his illustrations.
In terms of being “fair”, I take your point. That said, I’ve listed the book in my Further Reading again here, as I have on other articles I’ve written relating to the subject, and I’ve verbally recommended the book and referenced the source of some diagrams in all relevant presentations, or listed it in closing slides. I hope through all of that I’ve helped shift a few more copies from Amazon.
21/12/2010
Thanks for your response Simon. For those of us who are already familiar with Leborg’s work, it lends you and this publication more credibility to give more explicit citations. Including him in Further Reading is not the same as citing him under his recreated diagrams. If this were a printed publication, you would be held to more stringent guidelines, so I think it’s a shame if we shrug that off because this is “just” the web.
Thanks for responding, I think readers will benefit from our back-and-forth.
22/12/2010
Sally: Agreed. The credibility you refer to is important, as are the appropriate citations. I don’t have access to edit the article myself, so I’ve just asked the 24 Ways team to add the citations when they get a chance.
23/12/2010
Simon, you are great! I totally appreciate your responsiveness. I want you to know, I don’t troll the internet looking to complain about such things. I’m a fan of your work, your ideas and thinking, so thanks again for being so responsive! Cheers!
23/12/2010
Simon — thanks for the most thought-provoking read of this year’s 24 ways. All the articles have been good, but yours continues to resonate and inspire.
Commenting is closed for this article.