The Fold
The fold is a concept that came from newspapers, and was applied to websites heavily when there used to be (briefly) a common monitor size. With mobile and HD aspect ratios, that concept is obliterated. People expect to scroll web pages, and "the fold" is no longer the barrier it was to your content. So make web pages that scroll vertically, but make it obvious that they do. Some designers will say the fold is an outdated concept, but this is not true. Many people will still be fooled by a web page that appears to contain all of its information in a neat manner above the fold. If you need proof, perform some user testing, or use Google Analytics, which provides information on what your viewers are seeing and clicking.Horizontal Scrolling
Horizontal scrolling is still one of the web’s 7 deadly sins. Mobile, not so bad, it just has to be extremely evident that you can scroll horizontally. 'Nuff said.White Space
This is in an age old battle between content delivery practitioners and layout designers. Most people will want to pack "everything important" above the fold. Good design with white space is best for getting your main message out. Use it to entice your audience to look into more details, or perform your content goals. Prioritized, arranged in a pleasing manner, and free of distraction, white space will make visitors pay attention to your message.Wireframes
Wireframes are an indispensable part of efficiently creating well structured web and mobile media. One of my favorite tools for this is Balsamiq. It does a great favor to your layout designers by keeping the layout visibly unfinished, indicating a work in progress. However, Blasamiq has an option that allows you to clean up your layouts by turning all of those drawn lines into straight lines. Instant polish for those times when you need it. The interface is very easy to use, and very capable of filling most of your web and mobile needs.Mock-ups
Simply coloring in the wireframe boxes, slapping in some icons, and calling it a day is a mistake. As a layout designer, you may think your job has been done for you when delivered a wireframe, or after creating one yourself. Your true task is to now go beyond the wireframe. Think beyond the boxes, while living within the guidelines. Add some real design to the product. This is your time to shine, discover what you can add to the process, add some life and appeal.Prototype
A favorite tool of mine for prototyping is Justinmind. It allows functional mobile and web wireframes in higher polish without being too complex, and without letting design details get in the way. Justinmind is a great way to test out your UX flow with both your team and outside testers. I recommend creating in this stage without adding color or full design details. That’s a process that can be done concurrently in the Mock-up process.Warning 1: You could create your wireframes in Justinmind to shorten the entire process from wireframe to prototype. However, the UI of Justinmind is not intuitive at times, and sometimes performs opposite your expectations. Since a lot of iteration can occur during the wireframe phase, I still recommend Balsamiq, due to ease of use.
Warning 2: Prototypes are best when "thrown away" after approval. Creating a prototype in your final language (HTML, C++, JavaScript, Java, etc.) is the best way to ensure that bad code gets introduced into your final product before it’s even started. Often prototypes are rushed and not a lot of forethought goes into the code that creates them (as it shouldn't). Justinmind removes the risk of bad code becoming the groundwork for your project.
Justify and break the rules
Some of these concepts are abstract to describe, even if we know and live them by heart. In the field, we often have to justify our decisions. Weenudge is an interesting site to help you formulate your reasoning for your design decisions. Experience will show us that every rule has a time to be broken, but we must know those rules first, and then break them responsibly.Do you know of any other great tools for these purposes? Are there other rules in new media that people are abusing or not using? Let me know in the comments!
