User Interface Design Patterns

When taking the course “UI Design Patterns” I learnt the basic patterns used for interfaces design. At the same time, I’m learning how to build e-learning content with Articulate Storyline, so I thought it would be a good idea to merge the design theory with the practice of the authoring tool.

Interface patterns can be grouped in different categories, depending on their function: for organizing content, for navigating, for structure the page, for getting input from the user, etc.

I made a presentation with five patterns used for organizing content:

  • Two-panel selector
  • Navigation tabs
  • List inlay
  • Slideshows
  • Hub and spoke

Although they were originally designed for websites,
they can also be applied in Articulate’ slides.

Click on the image



I’m aware the aesthetics might be better (I’m still not expert ;)),

but I focused on each pattern’s implementation.

Hope you find this topic as interesting as I do.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s