A wireframe is much easier to understand than an abstract concept. How hard is it to explain what you have in mind and get your stakeholders' approval using only words? With a wireframe, you can quickly visualize abstract ideas. It is much easier and faster to communicate and get feedback with wireframes. Once again it is the idea of showing rather than telling.
But like any project at the point of conception, the first question you might be asking yourself is “Where do I start?” You can start with pen and paper, but if you are looking to craft a more professional looking presentation, you might want to approach wireframes with a bit more precision and style. It’s true that wireframes are not supposed to be too visual, but let’s be honest: people are visual; it helps to splash a little bit of style to your ideas to move it forward. That’s why we have carefully built the Poppy Wireframe Kit for you.
Typography
Creating a type system across your designs can be daunting. From sizing to tracking and leading, it takes quite a bit of effort to get things right. There are many tools to help you create type scales, but numbers are only half the story. We would like to take a step further so it’s easier for you to enjoy the benefits of good typography.
For wireframes, it’s especially important to establish a clear typographic hierarchy to help you illustrate the importance and priority of information. With a single typeface, we explored various weights and capitalization rules to enhance visual contrast and clarity. To keep type content as clean and neat as possible, we have defined type sizes with a base unit and line heights with a 4-point grid. That helped the system to communicate enough of Poppy’s boldness and energy in a streamlined fashion, and also allowed us to keep visual interests subtly in the background.
In this kit, we’ve established a harmonious system for the various typographic elements from headers down to body copy and labels for you. Feel free to use these text styles directly for a functioning typographic hierarchy.
Image / visual
Unless you’re planning on type-only layouts, chances are that you’ll want to include images or visuals. In a wireframe, you can use a simple rectangle to represent an area the image or the visual will cover, but that might not give you enough information about the “weight” of that visual. That’s why we think it might be helpful for the image elements to carry a bit more style to truthfully communicate how visually important they could really be.
To create a cleaner look, you’ll want to establish a clear rhythm where elements feel cohesive. For your placeholder image elements, it might be worth considering unifying their aspect ratio where necessary. That way you can easily have a clear visual flow built-in and rest assured that your comp will have a smaller chance of appearing “off”.
Whether you want to indicate the use of thumbnails or pictures, in this kit you’ll find placeholder elements ready for you. We’ve also built these elements with a few popular aspect ratios, so you can easily keep all of your imagery placeholders visually consistent across screens.
__________
This is how we connect to the design community, and we hope you enjoy using this kit as much as we have enjoyed creating it. Stay tuned for more updates and additional resources to come. Happy wireframing and much success!
