DEVELOP THE FRAMEWORK

Jul, 21, 2019
Web Design
No Comment

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.