Step 5. Wireframe: Website Development for Artists

by | Dec 29, 2017 | Website Planning, Development & Design

Once you have selected content for your website, it’s time to organize the website’s structure. Let’s continue with the home analogy. If you know the number of bedrooms, bathrooms, and other parts of your house then, before you start building, you would most likely want to have an architect to draw up plans right? This is what this article will cover: your website plan. In the world of website development this plan is called a wireframe.

In this article I will cover the basic of the wireframe: the elements included in the wireframe, how to use your desired content as a guide to creating a wireframe and some tools that can help you on the internet.

This is the fifth article in the digital guide series: Website Development for Artists: A Simple & Relatable Guide to the Basics of Websites. a guide designed for the artist who is ready to bring their presence to the web. By no means is this a comprehensive guide to planning your website content, I simply want to give you an overview of how to approach organizing your content into a wireframe for content delivery on your website.

THE 9-PAGE WIREFRAME

The components of a basic artist website wireframe.

wireframe
A wireframe is a graphic which displays the different parts of a website or webpage; it is typically used for planning a site’s structure and functionality. I usually draw my wireframes by hand. You can also use software to develop your wireframe. As an artist, when I first started making wireframes I made the mistake of going overboard as with everything right? So, keep it simple. Usually, I advise artists to make a wireframe for a 9-page website.

Pages:

  1. Home
  2. Blog
  3. About
  4. Portfolio
  5. Shop
  6. Contact
  7. Post Page
  8. Product Page
  9. Portfolio Page

 

The Parts of the WIREFRAME

The components of a basic artist website wireframe.

Before you look at any website for inspiration, draw these nine pages as you would like them to be and only the functional elements not the design.

A wireframe has the basic elements of a web page:

  1. Header
    • Menu
    • Contact Information
    • Social Media Links
    • Newsletter signup
    • Shop carts
    • Search box
  2. Footer
    • Menu
    • Copyright Information
    • Contact Information
    • Social Media Links
    • Newsletter signup
    • Shop carts
    • Search box
  3. Sidebar
  4. Page Content
    • Text
    • Images
    • Video
    • Sound
    • Downloads
    • Forms

CONTENT + STRUCTURE

You know what you want on your website, now decide how it will be organized into an application.

wireframe
Now that you have your content and a website layout structure for your 9-page website, you can organize that content into the structure of a website.  Using your content plan from step 4 and the wireframe you just completed, decide where you want the content to go. There are many resources that discuss the best uses of your website page space. You may want to spend some time looking at how artists in your field use their website header, footer, sidebar and main pages. Review other website pages but make sure that whatever you decide to make reflects you.

Ideally, by the time you complete this step you will have decided on a location for every piece of content that you selected for your website in Step 4.