6 Web Design Tips from Leonardo da Vinci
Leonardo Da Vinci was one of the greatest artists of the Renaissance, leaving behind a legacy that continues to inspire artists, scientists and others. Here are six things we can learn from him about web design.
1. Be curious
One of the most remarkable things about Leonardo is his insatiable curiosity. Besides being a master painter, here are some of his other interests…
- Botany
- Music
- Human and animal anatomy
- Fluid dynamics (before there was a name for this branch of science)
- Writing great poetry
- Platonic philosophy
- Designing remarkable inventions, including flying machines and a sort of pre-industrial tank
Many of these interests show themselves in his artistic work. Anatomy is obvious, but have you ever compared the ringlets of hair in his paintings to his drawings of water flow? Or thought of how rhythm, which is so essential to music and poetry, also shows up in painting and drawing?
The point is that being curious and learning about many things that are apparently unrelated to web design ultimately gives you more tools with which to design well.
2. Look beneath the surface
I’ve already mentioned Leonardo’s interest in anatomy. His study of what lies beneath the surface gave him an understanding which enabled him to draw and paint his subjects remarkably well. Something similar applies in web design.
For the graphic designer, it might be studying the structure of HTML & CSS. For the front-end coder, it might be understanding the workings of a content management system. I don’t know what the appropriate analogy would be for a back-end coder. Any suggestions?
3. Build on the work of others
Despite his genius, most of Leonardo’s achievements didn’t spring fully formed from his mind like Athena from the head of Zeus. He was building on the works of others who were his contemporaries and predecessors. He studied under the Florentine master Verrocchio, from whom he learned the techniques and tradition of previous Renaissance art.
What does this mean for web design? Don’t reinvent the wheel. Do your customers need to be able to manage their own site? Maybe all they really need is a little customization for Wordpress.
Building on the work of others is also the philosophy behind programming frameworks like Ruby on Rails, Django, and CakePHP. Instead of writing everything from scratch, much of the work is already done for a standard web application.
And, of course, you can also use a CSS framework like Blueprint to supply some good basic layout and typography settings before adding some customization.
4. Do quick studies
Before beginning work on a painting, Leonardo would often draw several studies of it, experimenting with different compositions and learning how the various aspects of the painting would interact with each other, all without having to start over from scratch if the first idea didn’t turn out well.
This can be done in web design too. Have an idea for a layout? Sketch it on paper. Building a web app? Sketch out a use process. If it looks good, go for it. If not, try again.
5. Iterate
Leonardo didn’t just iterate his studies. He also completely repainted (iterated) The Virgin of the Rocks.
But with web design we have it easier. If we want to redo our work and make it better, we don’t have to start from scratch again. We can make continuous incremental improvements.
6. Be careful of experimental techniques
The final lesson we can learn from Leonardo is a warning. During his painting of the Last Supper, he employed an experimental technique for mixing his paint. While all seemed well at first, soon afterward cracks appeared in the painting, and since that time it has continued to deteriorate, leaving his masterpiece in ruins.
Web designers take note. While experimental technology is wonderful, be very careful about deploying it directly to a crucial system/site, otherwise it could leave you, like Leonardo, trying to mend the cracks.
Popularity: 100% [?]
If you're new here, you may want to subscribe to my RSS feed or subscribe via email. Thanks for visiting!
[…] 6 Web Design Tips from Leonardo da Vinci […]
This is a brilliant post, Josh! (And beautiful, too!)
Glad you like it!
[…] Over time, of course, I find other sources of flow, but whenever possible I try to synthesize them with previous interests. At the moment, web design and blogging has become a sort of “central hub” for my interests, because their broad nature can benefit from just about any sort of input. […]
This is a great post, it’s nice to see a site where different art perspectives are applied to fields outside the normal context. In fact that gives me an idea…
[…] Joshua Clanton is a freelance web designer who blogs about productivity, creativity, and web design. If you liked this post, you might also appreciate 6 Web Design Tips from Leonardo Da Vinci. […]
Glad you liked the entry, Stephen. I think a lot of people don’t realize how much we can still learn from old masters by adapting their techniques to modern situations.
[…] my previous post on 6 Web Design Tips from Leonardo Da Vinci was so popular, I decided to follow it up with another one, this time from Michelangelo. I’m […]
[…] 6 Web Design Tips from Leonardo da Vinci Related StuffNiche GalleriesHow to ruin your website in 10 easy stepsWhat type of designer are you? : Alicia Harper DesignQuestions to Ask Yourself When a Design is Coming Up Short of Your Expectations | Vandelay Website Design99 Graphic Design Resources12 Steps to Creating a Professional Web Design | Professional Web Design BlogWeb Design: From Good to Great in 25 Links ~ Ten Thousand Things101 Five-Minute Fixes to Incrementally Improve Your Web Site11 Factors to Consider When Designing Your Blog ThemeThe Evolution of Websites: How 10 Popular Websites Have (And Have Not) Changed […]
Love the post. Comparing techniques, which Da Vinci himself used to web design practices is what the general public needs in order to see web design for what it is. A new form of design, a new form of art.
Regarding :
“For the graphic designer, it might be studying the structure of HTML & CSS. For the front-end coder, it might be understanding the workings of a content management system. I don’t know what the appropriate analogy would be for a back-end coder. Any suggestions?”
Perhaps a back-end coder is like a Surgeon who learns about life drawing. I have heard a lot of Doctors actually do this so they can understand the body better. I think a back-end coder who expresses interest in typography or javascript becomes all the more well-rounded. Not only do they appreciate the job-functions of their peers they can interact with them better to achieve more comprehensive big-picture results.
I enjoyed this creative post and completely agree with your point stated above.
@Bedrich: Helping people to see that the web is a realm of aesthetics as well as function and commerce is a very good thing.
@Samantha: Excellent analogy! One of my former coworkers was a back-end coder, and I think we did a pretty good job of educating each other about various aspects of our tasks. I know I benefited from it, and I think he did as well.
Great Post, must read!
@Nemesis: Thanks!
Hahah this is a great title! It totally caught my eye
The title also caught my eye and the accompanying illustrations are nice but to not include even a single web design example? Unforgivable.
@Steph: Glad you like the title.
@Dennison: I assume you mean failing to include an example of web design as an illustration, since I did include web design examples in the text. For me, it was a question of focus. And the focus I wanted was on illustrating the principle in Da Vinci’s works. Thanks for your feedback!
Nice comparison…
I enjoyed reading this. Well done.
@Ivan & JD: Thanks!
[…] y errores también pueden ser adaptados al diseño web, así lo hace Joshua Clanton en su blog con 6 consejos basados en Leonardo da Vinci que nos servirán en nuestros días para la actividad de crear sitios web. Aquí los adaptaré […]
[…] 6 Web Design Tips From Leonardo Da Vinci […]
“For the graphic designer, it might be studying the structure of HTML & CSS. For the front-end coder, it might be understanding the workings of a content management system. I don’t know what the appropriate analogy would be for a back-end coder. Any suggestions?”
I’d say ‘looking beneath the surface’ helps to gain a more comprehensive understanding of the subject, because you see more layers of the subject; as a back-end coder works at the opposite end of the surface, it should be useful for him/her to try ‘looking above the surface’. Atleast study interaction design and usability, so as to connect the very technical back-end development to the subjectivity of the humans using it.
@isandro: That’s an excellent observation. Looking “above the surface” of one’s work can be just as useful as looking below the surface in many fields.
[…] Web: 6 Web Design Tips from Leonardo da Vinci [ENG] […]
[…] 6 Web Design Tips from Leonardo da Vinci […]
[…] Diseñar paginas es una ardua tarea, sobre todo por el hecho de la necesitad de una visión al mas estilo de un artista haciendo su obra. Leonardo da Vinci fue el mas grande artista del renacimiento, en la actualidad es comparable con el diseño web, así lo creyó Joshua Clanton al hacer una lista de 6 consejos para diseñar basados en Leonardo da Vinci. […]
[…] by Da Vinci’s Vitruvian Man, the idea of balance and proportion is built into the structure itself. The columns […]
Every time I read about Leonardo, I’m inspired all over again! This is a great, nicely written post. Thanks!
@ Hamilton: Leonardo is definitely an inspiring person. If you haven’t read it already, I suggest a neat little book called How to Think Like Leonardo Da Vinci
.
Very nice post! Made a translation into German:
http://mrweb.bplaced.net/uncategorized/6-web-design-tipps-von-da-vinci/
@Joshua can you write that there is a translation at the End or the beginning of the post, would be very kind
[…] Originaler Artikel: 6 Web Design Tips from Leonardo da Vinci […]
[…] or two about the basics of color. Still in doubt of the fine arts applicability to web design? Read 6 Web Design Tips From Leonardo da Vinci, an amazing article by Joshua […]
[…] como lo señalo Joshua Clanton en su blog, 6 consejos para diseñar, basados en da Vinci, que nos puede servir en estos días para crear diseños […]
[…] y errores también pueden ser adaptados al diseño web, así lo hace Joshua Clanton en su blog con 6 consejos basados en Leonardo da Vinci que nos servirán en nuestros días para la actividad de crear sitios web. Aquí los adaptaré […]
[…] Diseñar paginas es una ardua tarea, sobre todo por el hecho de la necesitad de una visión al mas estilo de un artista haciendo su obra. Leonardo da Vinci fue el mas grande artista del renacimiento, en la actualidad es comparable con el diseño web, así lo creyó Joshua Clanton al hacer una lista de 6 consejos para diseñar basados en Leonardo da Vinci. […]