Blog

Go Back Back
The Surprising Relationship Between Web Design & Painting

There are more similarities to the processes of painting and web design than you would imagine. Each can be broken out into five steps.

  1. Vision
  2. Persona/Site mapping/User Flow
  3. Wireframing
  4. Prototype
  5. Design

Vision

Before you pick up a brush and start painting or put your hands on the keyboard designing a website, you have a vision. There’s something lacking definite shape or direction—a vision must become clear. You have a theme or idea that the product will live around, but you aren’t sure how it’s going to be laid out yet. You may already have something to work from, but odds are it doesn’t fully realize your vision or leaves something to be desired.

Persona

When you have a vision ready to be transferred to an actual design, the first thing you should be considering is your target audience. Who are you trying to reach and why? How do they think and operate? What habits do they have? How will they take in, interact with and engage with your design? These questions are very similar to the thought processes around creating a painting. Asking these questions and defining the answer is how you create a persona.

 

It’s important to define your persona prior to site mapping, because your persona will influence how your sitemap is structured. Is your persona someone who wants the information displayed immediately and in the most direct form, or is your persona someone who enjoys a visual journey in learning the details behind the product they’re using and how it came to be? The answers will determine how information is laid out and dictate how many pages, clicks, menu items and other design features you utilize.

Site Mapping

Just as you wouldn’t plan out a painting without knowing its dimensions, material or type of paint, you shouldn’t start to design a website without a sitemap. Sitemaps are basically an organized table of content detailing the title of the pages you want your site to have and in what order you’d like them to live in the site navigation menus. The arrangement of this content illustrates the path for your user flow. Your user flow is the direction someone takes secondarily to landing on your site and where and how they get to other places within the site. Just like how you guide your audience visually into a painting’s focal point, your user flow should guide users to a specific action. By placing key pages over others into the nav bar and by having specific call to action buttons, this flow can be methodically designed to meet the goals of the site. Site mapping and user flow are both precursor information needed to begin the wireframing process.

Wireframing

Wireframes are essentially digital thumbnails that are key in laying out different ways your product could look and function. Just like a blueprint functions for the layout of your house, a wireframe serves to define the need and structure of your website. Similarly, it wouldn’t make sense to paint a house while it’s undergoing construction, design does not happen in the wireframing process. In order to ensure that when design does take place, It’s crucial at this step to organize what information lives in the foreground and what lives in the background of your site.

 

Like a painting, deciding where to place certain pieces of information will affect the order in which your target audience digests content on your page. It’s important to have a hierarchy of some form to ease the target audience in and out of areas you would like them to focus on.

 

There are a number of different ways to achieve hierarchies in design and art, whether it be through a grid system or through a technique called the golden ratio. Either way, hierarchies are all about balance in relation to other elements. Too much information whether visual or contextual at once will drive people away, and too little will leave them unsure. Just like thumbnails are to paintings, wireframes exist as a low-fidelity way to visually organize and represent the foundations of which your website rests on.

 

After your foundation is set, you’re almost ready to start painting. You know what pieces of information live where, but you haven’t established in detail how those elements interact and relate with each other, or what techniques you’re going to utilize to create your vision.

 

So, you start to prioritize. In this stage you’re connecting your wireframe pages together, placing in finalized content and determining what sections transition and call out to each other. In web design, this process is done through a prototyping software such as Adobe XD, Figma or Sketch.

 

Additionally, you’re testing your ideas along the way to determine if they’re the most effective in achieving your desired end result. If you’re painting for example, you would want to go ahead and test out the brushes you’re planning on using on a separate piece of canvas rather than testing it out the first time on the canvas you’re going to be presenting your final product on.

 

After a series of proofing, edits and user tests it’s time to design. Similar to when you blend and pick out a color palate to paint with, this is where selected brand assets such as logos, colors, photography and typography finally come into play to design your product.

 

Just as you would touch up or dust a painting periodically, this process is reiterative. As technology continues to evolve alongside life, your product will need to grow to keep pace for your target audience to stay interested and engaged.

 

In a rapidly growing technological age, how do you find yourself preparing for a digital project or art piece?