One of the things I like most about office and desktop designs is how their organic nature makes it so easy to create rich and flexible layouts without having to worry about pixel-perfect alignment. No one expects sticky notes or tacked paper to follow strict grid lines.
So unlike last week’s minimalist, flat approach, we’re going to rough things up this week with textures, drop shadows, page curls, stickers, notepaper, Polaroids, tape, push-pins, and dozens of visual elements you’d expect to find on and around someone’s desk.
Office and desktop designs visually reflect our attempts to tame real-life’s entropy: organized clutter, rich textures, and non-linear layouts. Let’s take a look at an example:
This office design theme was created for executive assistants. The non-linear layouts allowed me to vary my content holders (paper, note cards, sticky notes) to accommodate text-heavy slides.
I created a dozen or more layouts for that project. But everything was designed around a single background comprised of three elements:
Simple, right? The trick is to balance the background graphics and content holders so they don’t compete with your content. That’s why desks, folders, cork boards, cube walls are great background objects. Then use elements like paper, picture frames, sticky notes, and note cards for content holders.
Challenge of the week
Now it’s your turn! Show the community your desktop- or office-themed designs:
- Objective: Create an office or desktop course template. Include at least three different content slides, and more if you’d like. Your slides can be static or built out as working interactions. The objective is to show how us how your design will carry across your project.
- Tools: You can use Articulate Storyline, Articulate Studio, or PowerPoint to create your examples.
Tom posted a bucketful of office and desktop templates. We also have binders of inspiring Screenrs and templates you can use to create your designs:
Office, paper, and desktop theme examples:
- 50+ Beautiful Website Designs Using Office Stationery
- 30 Desktop and Office Themed Website Designs
- 20 Website Designs with a Desktop Motif
Last week’s challenge
The examples shared in last week’s flat design challenge can be summarized in one word, three syllables: Amazing. Not only did you make it our biggest challenge ever, the examples were some of the most creative we’ve seen. One of the biggest takeaways for me was that even the simple examples generated tons of ideas.
Thinking about jumping into the challenge but not sure how to start? Check out what your fellow community members shared over the past week:
- Dana Dutiel kicked off the challenge with a wonderful example for coaching employees. Dana’s template features a creative menu, objectives, and scenario feedback slides.
- Andrzej Rudnik found inspiration from an existing template and a post by our very own Nicole Legault to create his flat design interaction. Be sure to download his free Storyline template.
- Artur Kowalski followed up with his own interactive flat example created in Articulate Storyline. Nice job, Artur!
- Gabi Cahalon shared a fun example designed around office security. Lots of neat ideas going on in this example.
- Sarah Ednay shared a hybrid example featuring flat and non-flat design elements. If you’re thinking of trying a flat style with more conservative clients, this project is one you should see.
- Mayra Aixa Villar really captured the essence of flat in her interactive quiz example.
- Gina Heumann captured the big, flat button styles common in flat designs in this fun demo featuring California wines.
- Ari Avivi shared a trivia game theme featuring flat buttons.
- Ian Minderman shared a simple yet flat example. Great job with the contrasting background colors and large icons. You totally captured the flat elements, Ian!
- Montse Anderson shared a flat square example featuring a menu screen and feedback layers.
Have a great week, E-Learning Heroes!