DEVELOP THE FRAMEWORK – Holly Foster Media

DEVELOP THE FRAMEWORK

Art by Nature is a collaboration of two artists. Together they create decorative wall art that uses thin slices of tree branches and other natural products attached to a cork background. The variations in the grain of the wood slices combined with the other ingredients create a myriad of interesting patterns. It is also known as “tree cookie art.”

To expand their marketing efforts, the artists wanted to take their product online.

A wireframe is a black and white layout, or template, that shows the client where elements of their website will be placed on each type of page. It’s a blueprint that is invaluable in the planning process.

Wireframes give you the ability to adjust your design to the content instead of trying to fit content in a premade design. This ensures that the content of every page is coherent and has a natural flow throughout the entire site.

(Mrozek, 2019)

In his blog post, Carl Duffield provides a primer on what makes wireframes unique. Here’s a “cheat sheet” bullet point list that will give you a quick lowdown on how to read one (Duffield, 2011).

  • Logos are usually represented as a box with an “X” through it, although a grayscale image can also be used.
  • Most color elements are shown in black and white, unless it’s an important link.
  • Headings show the hierarchy, or importance of the content.
  • Links are usually shown with blue text.
  • Text copy can be real or placeholder text.

Art by Nature has a simple site map structure, which lends itself to having the ability to reuse layouts for multiple page levels. To understand how a wireframe translates into the actual screen, I’ve placed the mobile site images side by side.

Here are the desktop layouts — the wireframe at the top with the full color version just below it.

For a full overview of Art by Nature’s website design journey, check out my blog post The Design Process.

until nxt time …

References

Duffield, C. (2011, July 12). How to read a wireframe. Retrieved from : https://fuzzymath.com/blog/how-to-read-a-wireframe/

Mrozek, K. K. (2019, January 4). Why sitemaps & wireframes matter for web design. Retrieved from: https://www.windmilldesign.com/sitemaps-wireframes

Written by

0 thoughts on “DEVELOP THE FRAMEWORK

  1. Pingback: THE DESIGN PROCESS

Leave a Reply

Your email address will not be published. Required fields are marked *