Mixing Artistic Ideas into your Web Design Workflow

by Jake Rocheleau
on July 29, 2014

There is a broad spectrum of designers who have never studied art yet still have the skills to create brilliant websites. Whether consciously or not, designers borrow a lot of aesthetic principles from the art world. Before digital interfaces old-world artisans would design objects like clothes, furniture, decorations, and these would follow very similar ideas.

art easel pastels colors photo

So what is the line between art and design, and is it possible they work together? How can you incorporate artistic ideas into a website or mobile app interface? In this post I want to cover a few different topics related to artistic design and how you might apply them to future project work.

Drafting Stages

When working on any project big or small take the time to draft a few concepts. This can be done by hand using pencil & paper, or you might try creating wireframes or light mockups using digital software. This could be compared to an artist sketching a few different versions of a character or logo before creating a more polished version.

The drafting stage is crucial because this is where you flesh out ideas. This is where you think about a few different styles of navigation. A homepage really needs to catch attention while keeping people curious enough to dive a bit deeper into the webpage. How can you expect this level of detail on your very first attempt?

website sketch wireframe basic thumbnail design

Hand-drawn wireframing seems like a nuisance until you understand why it’s done. Again I’d compare this process to a character designer who might sketch out 3 or 4 different versions of a character before settling on the best one. Drafting is a very loose stage where you come up with a whole bunch of ideas, good and bad(and okay). Combine the best ones together and fit these ideas into a loose template which you can recreate in Photoshop with pristine detail.

Color Theory

No artist could get to the professional level without an understanding of color. Now the choice of color in a painting will vary wildly compared to a website or icon design. But the principles behind color and which choices look good together will always remain the same.

Beyond just matching color schemes you also want to think about which colors evoke a certain feeling or mood. Should the layout be mostly lighter or darker? Monotone or tritone? These are important choices which do affect the emotional feeling of a digital interface. Try reading some posts and searching in Google for related information.

You don’t need to be a master in color theory to understand how it works. Gaining some confidence in your color picking ability will help in every one of your design projects.

Custom-Made Icons

Aside from paper drawing there are tools in Photoshop and Illustrator to create icon designs manually. These are typically built using the pen tool either tracing a sketch or imagining how the icon should look.

If you have confidence in your drawing abilities all the better! I think of icon sets like Captain Icon which have that distinct hand-drawn feeling. But even if your icons are more basic it’s still a very useful skill to have. Most great icon designers understand at least the basics of spacial distortion such as perspective. This will help you create more realistic icons and pick colors based on shadows or highlights from a light source.

My suggestion here would be to just get comfortable using the pen tool. It’s a beast at first and you will probably hate it. But don’t let it get the best of you – practice always makes perfect and this tool is no different. Even just a couple months of practice will show incredible strides in progress. From there you can push into more advanced techniques building shapes and smart objects for almost anything.

Composition & Gestalt

This may be one of the most important concepts to understand regarding art and design. Composition is the term used to describe “the bigger picture”. When you put together everything from colors, typography, grids, etc… how does it look? Same with the phrase gestalt which refers to a design in the context of holism(seen as a whole).

While this is very important it’s also one of the toughest concepts to fully grasp. Understanding what makes a beautiful web design takes knowledge of all the underlying principles. You must know how to put elements together on a page so they naturally flow and keep people’s attention.

gestalt composition the artist painting from life

To practice this idea spend a bit of time going through websites already online. Try to see which homepage designs look “good” versus others that don’t look so good. Think critically about why some pages look better than others. How could you rearrange those pages to make them look better? Are things too cluttered or spaced apart too far? Is text hard to read or too big? There very well may be more than one answer.

If you continue to think of digital design as a field of art you’ll grasp these concepts with patience and practice. Rome wasn’t built in a day or even a month. You have to be consistent and never falter from the goal of learning as much as possible. The more you can dissect professionally-designed websites, the more you’ll come to understand overall composition and general design theory.

There is truly no better option than studying the fundamentals and trying to absorb as much as possible. But remember that study is only half the battle. Practice is the application of what you have learned, and practice is where you make the mistakes to help you learn faster. Keep these ideas in mind and always continue to practice. Eventually the concepts of design will become like second nature and you’ll be pushing yourself beyond boundaries you could have never imagined.

About Jake Rocheleau

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design and web development techniques. You can check out his work on Dribbble and follow his tweets @jakerocheleau.

Top