Viewers will discover several ways to marry form and function using the principles and elements of design to create layouts that move beyond the flat web design trend.
- In this lesson we'll examine the element of form and how it relates to flat design. Influenced by Swiss design and mid-century minimalism the trend of flat app and web design began in the early to mid-2000s, became mainstream in the early 2010s and is now in the process of transforming into something new, though no one really seems to know yet what exactly that new is. Key features of flat design include flat color, flat color with shading, minimalism, stripped down icons and lots of white space used with sans-serif and slab serif fonts.
What you won't see with flat design are any features that look 3-D like photo-realism, gradients, bevels, and textures. While it's highly usable due to it's simplicity and great from a functionality perspective for UI elements, as a trend, it's overstayed it's welcome and the design world is well overdue for something new. So the question is, if not flat design, what? Where do we go from here? For the answer, I propose we consider good design.
Good design reflects the goals of a project while being visually appealing to a target audience. Good design is often filled with elements like rich gradients, bevels, textures, shadows and highlights. Now to be fair, web is different than print because it contains the added feature of interactivity. Even so, if every designer is doing the same thing, monotony ensues so we must collectively step out of the flat design box. To do that, return to the principles and elements of design for inspiration.
If form is the overall massive shapes within your design and how they relate to one another, and function relates to how something is used, we can look to the elements of design to find new ways of communicating both visually. For example, with texture we can play with the surface quality of an element in our design. Likewise, with gradation we can play with the size and direction of color and value to produce linear perspective while also adding visual interest and a sense of movement within a design.
We can consider the light source and play with shadows and highlights. We can also address three dimensionality through the use of bevels and extrusions. As long as you're not creating totally flat designs there are no rules other than to think about what you're designing, how visitors will likely interact with it and whether it communicates the goals of the project effectively. Anything goes. The benefits of moving even slightly beyond flat design are great. For one, you'll be forced to create more original works rather than derivative or trendy designs.
For another, it will give you the opportunity to think more about why you're designing so you can choose the best solution for the task at hand. As I mentioned before, good design will reflect the projects goals in a way that's also appealing to the target audience. Be bold and use whatever non-flat visuals like gradients, bevels, textures, shadows and highlights to help communicate these goals most effectively.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices