Sometimes it’s hard to find inspiration for a brand new website that re-invents your stake in the world. That being said, more often than not, imitation is seen as the sincerest form of flattery. The great masters of
the ancient art world copied the paintings of other masters before they became masters themselves.
For our newly renamed company, I began to look to other design blogs that I frequently visit for inspiration. After getting the juices flowing in my head I started sketching from memory the elements that had caught my eye to create an original wireframe for Apt 2 Labs.
Wireframes are a basic visual guide that shows layout, organizational structure, navigational concepts and content fields sans content and graphics. Basically, If you can build with Legos then you can use a wireframe; its all about making it easier to move around components to get the right design. We’ll get into why wireframes are beneficial in the beginning stages of a design in an upcoming post.
When beginning your wireframe, sketch from memory, and remove styling to have the most basic structure for your possible components. This allows for the components to be more original.
The best wireframe designs were then created in Illustrator in black and white. Some of the components in the layouts needed some minimal typographical and visual styling to get a better feel of how they worked together on the page.
Over 60 wireframe page components were printed and cut out into individual pieces so they could be easily moved around to create various web templates. This is another wireframe technique that allows you to physically move the components into a structure to your liking as opposed to virtually moving the components on the screen.
In the end, six templates were fully created in Illustrator, and then narrowed down to one. It is important to note that the design we chose was one that we didn’t love on paper.
Remember: Designs always look much different on paper and on screen.
