The most purposeful designs are informed in many aspects by their content; they are not simply adaptions of generic designs and layouts. Building upwards from general intentions to specific details is one way to ensure that a design is a good fit for the content it will contain. This bottom-up planning process can be ordered into three steps: defining purpose and style, arranging content structure, and building function and emphasis. The first steps provide context for decision making in later steps.
1. Purpose and Style
The first design step revolves around making big decisions about the purpose and goals of a design and the means of achieving those goals. If you are working for an existing company, these decisions may be thoroughly pre-defined; however, they are no less important as context for decisions in later steps. Three general decisions should be made during this step: what the functionality and personal or organizational goals of the page or site are, who the intended and expected audience is, and finally how the design presentation will look and feel. The purpose and functionality will indicate the scope of the content the design will contain – how many sections there may be, and how long each section is likely to be. The purpose of a design, including any brand image, along with its intended audience, is also essential information for choosing general design principles which determine the “feel” of a page or site. Will the design be primarily functional and practical, or will visual impact be most important? Should it look plain and conventional or more abstract and artsy? Are displaying detailed content, enabling user interaction, or both central focuses in the design? Answering these questions helps indicate the best choice for layout [link to layouts page] and the priority of applying various design principles. For instance, a product page will likely contain much more empty space between content than a news site, and a certain amount of asymmetry is more desirable on pages which should just display content than on those which should be functional and interactive.
2. Content Structure
This step focuses on placing and laying out content within the design. Once an information hierarchy has been established, specifying what is most important, what should be seen first, and what information is grouped together, design principles can be applied to present the content accordingly. More important clusters of information, such key points or primary navigation may be presented larger, more spread out, or earlier in the visual flow than less important clusters, such as sub menus or contact information. Information density and design detail should be chosen so as to present information and functionality central to a page’s goal without overwhelming or confusing a user looking over the page. This may mean spreading out content or hiding or deferring less important items within the design. Examples of this include a social media site spreading out content (relatively diverse, short items) more than a news site (long, continuous text content), or a product page presenting key features and images at the top of a page and deferring detailed information to the bottom of the page or another page entirely. Alignment, empty or negative space, balance and various other principles are used to emphasize elements and spatially organize the design in this step. Depending on the situation, it may be effective to iterate over various layouts, comparing their effectiveness in reflecting the desired hierarchy.
3. Function and Emphasis
The final step applies contrast, color, typography, texture, lines, and other tools to refine the style and visually conveyed information of a design. Consistency is particularly important in this step; choosing a color scheme and font set which reflect purpose and are applied consistently across a page is central to establishing a polished design feel. While the previous step creates a hierarchy, this step addresses differences in function among similarly ranked elements in the hierarchy. Framing elements or applying color highlights can isolate asides or indicate connections and associations. Drop shadows, transparency, and movement, in addition to interface icons, can be used to imply the potential for user interaction. These techniques can make elements more dynamic and three-dimensional, reflecting physical objects which can be manipulated – see Google’s material design guidelines. Alternatively, removing almost all the text and navigation from a visual design can indicate to the user that interaction, such as scrolling or clicking, is necessary to view the page content. This step is the most detail-oriented, so using guidelines for reference and other applications or websites for inspiration is nearly essential to learning how to polish a design and how to use techniques, such as lines and colors, in ways which are intuitive and familiar to users.