![]() ![]() Use contrasting font sizes to denote hierarchy. Stick to a monochromatic palette of mostly white, black and grays with an accent color. Consider using flat areas of color rather than boxing everything and putting noisy borders adjacent to each other. Here are some design principles and techniques that help when doing minimalist wireframes. If we look closer at how that first wireframe is created above, we see how the shape control and some subtle use of color can go a long way in organizing elements and suggesting hierarchy. Think minimalistįlat design is a nice trend for people who do wireframes because our work has traditionally been devoid of surface decoration. Let's also select a different font from that menu, " Project > Font and Colors.". To do this, select the dedicated option from the Project menu, " Project > Style > Clean". We start by switching to the Clean style. Let's dig into how to create wireframes like this. ![]() The features in Balsamiq for non-sketchy aesthetics are easily accessible once you know what to look for. There's obviously a little bit of alignment, arrangement, hierarchy, and repetition there. They're mostly grayscale with an accent color. These examples eschew sketchiness and the hand drawn look. You can download all of these examples in this Project file. Let's start with a few examples of what you might do with wireframes and basic diagrams. If you're already steeped in design principles, it'd be hard to make a wireframe without that knowledge influencing where and how you place elements on the canvas. Just because you're working on wireframes and not visual design, doesn't mean you have to throw your design sensibilities out the window. We'll be working with Balsamiq Wireframes. ![]() So get comfortable with this phrase: "Disclaimer: This is a wireframe and is not meant to convey visual design." You may even put that in your wireframes. Overly "designed" wireframes may ultimately lead to having to provide disclaimers as you deliver them. Wireframing is not meant to be doing visual design, and this is why people make their wireframes as devoid of designed elements as possible. It bears repeating because people new to wireframes may not know this. I know, I may be preaching to the choir, but humor me. That's why we made the clean style, and its minimalist aesthetic is right for these occasions. Sometimes low-fi aesthetics gets in the way, whether it's due to the baggage of hand-drawn fonts or confusion over sketchy lines. There are valid reasons for not using sketchy wireframes. If making clean wireframes does cross your mind, we think you can do so successfully provided that you don't put aesthetics before the goals and purpose of wireframing. It's easy to get seduced by these creatively presented shots of user interface deliverables. Perhaps you think to yourself, "Maybe I should make my UI design look like that?" ![]() In some photos you see monitors shot at an angle with screens askew, receding into the distance, and a slight vignette burning away the edges. You land on one of those "12 examples of beautiful interface design" articles and admire the screens of polished wireframes. Here's how to balance aesthetics with the rapid iterative nature of wireframing. Sometimes you want or need to create minimalistic, polished wireframes. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |