Working with shapes and tables in Articulate Storyline 360 gives you precise control over layout, visual hierarchy, and data presentation. These features help you build clean, interactive slides where information is easy to scan and understand.
Use this reference table to quickly compare shape capabilities, table configurations, and workflow steps for common design tasks.
| Element | Purpose | Design Tips | Best Practices |
|---|---|---|---|
| Rectangle Shape | Create buttons and containers | Rounded corners for softer look | Consistent padding for touch targets |
| Callout Shape | Highlight key content | Point direction toward focal object | Limit line length for readability |
| Table for Data | Present comparisons and lists | Use header row for context | Alternate row colors for clarity |
| Merged Cells | Create section titles within tables | Keep text concise | Maintain column width consistency |
| Table Borders | Define structure and separation | Thin lines for modern look | Remove borders for minimalist design |
Draw and Format Shapes
Articulate Storyline 360 includes a robust set of built-in shapes that work like building blocks for your interface. You can combine basic rectangles, rounded rectangles, and callouts to frame content and guide learners.
Use the Format tab to adjust fill, outline, and effects consistently. Apply a theme-aware gradient to buttons so they remain visually aligned across different slides. Maintain uniform corner radii for cohesive design language.
Shape States for Interactions
Leverage custom states to change the appearance of shapes based on learner actions. For example, modify the Fill color and add a checkmark to a button when selected. This visual feedback reinforces correct choices and improves usability.
Insert and Configure Tables
Tables in Storyline 360 help you organize comparisons, timelines, and specifications in a structured grid. You can quickly add or remove rows and columns to match your data structure.
Use the Table Tools ribbon to fine-tune cell padding, alignment, and borders. Keep text concise and ensure that headers clearly describe the content of each column. Consistent spacing makes tables easier to read on different devices.
Table Accessibility Best Practices
Design tables with accessibility in mind. Use header cells for row and column labels so screen readers can interpret relationships correctly. Avoid merging cells unless absolutely necessary, as complex layouts can confuse assistive technologies.
Responsive Tables and Formatted Layouts
When working with responsive projects, ensure tables adapt gracefully to different screen sizes. Adjust column widths for smaller breakpoints and consider stacking critical data in a vertical list on mobile layouts.
Combine shapes and tables to build custom interactions, such as clickable menus or data dashboards. Shape buttons can trigger layer displays that present table-based content in a focused view, reducing clutter on the main slide.
Design Efficient Workflows with Shapes and Tables
Mastering these tools lets you build polished, consistent interactions that support clear communication and better learner engagement.
- Use a standard set of shape styles for buttons, highlights, and containers
- Define table styles for headers, data rows, and alternating bands
- Plan responsive behavior before building complex layouts
- Test interactions on different devices to verify usability
- Keep text concise and ensure strong contrast for accessibility
FAQ
Reader questions
How do I align shapes consistently across a slide?
Use the Align menu under the Format tab to distribute objects evenly and center them relative to the slide or a selected reference shape. Grouping related shapes before aligning ensures they move together during layout adjustments.
Can I import a table from Excel and keep formatting in Storyline 360?
Yes, paste your Excel table directly into a Storyline grid and choose to keep source formatting. You can then refine column widths, row heights, and cell styles inside the player for consistent visual treatment.
What is the best way to create interactive buttons using shapes?
Draw a rectangle or rounded rectangle, add text, and create multiple states for Normal, Hover, and Down. Adjust the fill and outline for each state so learners receive clear visual cues when they interact with the button.
How can I improve screen reader support for tables?
Assign proper header row and header column labels in the table editor, and avoid using merged cells for data rows. Keep the reading order logical so assistive technologies present information in a predictable sequence.