Designer Diary: How I Use Layouts to Build Content Pages
I’m an instructional designer working with Creator+ to build content at D2L. In this series, I’ll share some of the tips, tricks, and hidden gems of the Creator+ suite.
Instructional designers know that content craves structure. One of the challenges in learning design is arranging text and multimedia into an elegant, organized state. It takes a lot of skill to break an unwieldy piece of source content into a manageable learning experience.
That’s why Layouts is a game-changer. My content pages are no longer limited to one design, and I can easily keep things fresh by blending in panels of content. Furthermore, I don’t have to use tables with invisible borders to style text and images, which makes my pages more accessible to screen readers.
So, let’s look at Layouts. In this article, I’ll briefly explain Layouts and discuss how I use this tool to structure my content pages.
What are Layouts?
Layouts is a Creator+ feature that is used to structure content on an HTML page. They are a great way to align text with images, videos, or even Creator+ Elements.
There are three types of Layouts available: two equally-sized panels, two unequally-sized panels, and three equally-sized panels.
The following examples demonstrate each Creator+ Layout.
If you want to see Layouts in action, I recommend checking out the Layouts module in our Instructional Design Best Practices course.
Building with Layouts
The beauty of Layouts is their ease of use. Just select the “Other Insert Options” button, choose Layouts, and start adding content. But before you add a Layout, you should consider a few things. Here are my three recommendations when building with Layouts.
Be Purposeful
Layouts are an effective way to break up content. They should be used when appropriate and should rarely ever take up an entire content page. A two-panel Layout will work to parallelize smaller chunks of information, but for longer plain text sections, a single column is preferable.
That’s why it is important to be purposeful when inserting Layouts. Learners may get overwhelmed with an abundance of columns, so you should always be designing Layouts that fit your content, not forcing content into a Layout that won’t work.
This brings me to my second recommendation...
Be Aware of Whitespace
What do you notice about the image beside this text? It probably stands out for its abundance of white space and looks disjointed from the rest of the page. This can happen when Layout panels aren't aligned in their display of content. A better approach would be to change the size of the panels so they have a closer resemblance.
That's more like it! The image beside this paragraph is more aligned with the text, creating less white space. The same applies to Creator+ Layouts, where it’s best practice to keep both panels as balanced as possible. This could mean choosing content that take up a similar amount of space or changing up your Layout to a “Two-Third" or "One-Third” style (by hovering over the Layout and selecting a different style.)
Be Creative
Did I mention that you can add Elements to Layouts? This opens up a whole new avenue of possibilities, from a Carousel next to informational text, a Stylized Quote next to an image, or an Accordion next to another Accordion! I encourage Creator+ users to have fun and see how combining Layouts and Elements can make your pages more valuable to learners.
Just remember: a Layout may not always be the best option. If you find yourself straining to understand the structure, scrolling too much, or just find a particular Layout too busy, it may be best to remove the Layout.
For more examples of Elements inside Layouts, check out this page in our Instructional Design Best Practices course: Elements in Layouts.
Do you have a question about Layouts? Ask your question in the comment section below and we’ll help you out.
Comments
-
Great call-out on being able to insert elements into a layout, this was not intuitive even for someone like me who knows the product fairly well!
