Consider comparing the restricted shape of a desktop, tablet, or even mobile screen to a dinner plate. How easy is it to digest your web page content?
You can scroll down to view more in a web page, and likewise you can always find a larger plate. But how large of a plate is a comfortable size for just one meal?
As website trends give page design a backseat with a new focus on content, we look to classic examples of layout composition such as magazines, books, and print materials. Other than differences of dynamic web content, we should learn composition from the classics. Just because your medium is battery powered, doesn’t mean you don’t have a need to observe classic elements of design.
Here are some basic principles I found in this great article Mary Stribley, designschool.canva.com/blog/visual-design-composition
If everything is the focus, NOTHING is the focus.
Busy or harsh content separations will stop your eye from successfully making it to the bottom.
Literally step away from you monitor. Can you tell a hierarchy and make sense of your layout? DO THIS OFTEN.
Like it or not, responsive grids dominate today’s layout. But it is possible to still create beautiful responsive experiences.
Avoid using plenty of harsh color or photo edges that create stiff separate sections. Your page may end up looking like a bunch of bars stacked upon each other and that’s hard to digest.
Keep your type legible be using tasteful contrast. You can greatly effect the flow of your site using contrast.
Use patterns to create familiarity in your experience. If every page is a unique design, it will take the user much longer to understand the format and digest the content.
White space is NOT “empty space”! Use it as a strategic tool to create balance, focus, and a clean digestible layout! Isn’t it appropriate to eat your food one bite at a time?
Make sense of arrangement while also being creative and innovative. Magazines are GREAT at this!
Use this magic formula to keep your eyes moving!
Make sure to think through ALL responsive breakpoints. Include a maximum breakpoint for large screens and TVs. Don’t rely on fluid to be your responsive solution every time! Start your designs in a mobile size first.