You all know the new Office 365 icons, right? But have you seen an animated version of those icons yet? I haven’t, so I decided to create a few concepts on my own. My source for the designs are from the official Microsoft article which you can find here. So let’s give you an overview of the designs I created:

• Word
• Outlook
• SharePoint
• Yammer
• Excel
• OneDrive
• PowerPoint
• OneNote
• Skype
• Microsoft Teams

But first, the following animated designs are only a concept from me and I am not a designer by any means. As you might know, I’m a tech guy but I love design, I like to bring a smile to your faces and maybe, just maybe help you to learn a thing or two about Microsoft technology. If you want to retweet or share them, do that! I would love to see them floating around in that internet 🙂 I would also appreciate if you follow me on my social media channels (Twitter, Facebook &YouTube) and let me know what you think about the concepts! Now, let’s check them out…

Word

Word

The original not animated version or Microsoft Word looks like this:

My animated concept of Microsoft Word is looking like this:

Intention: I know, not everybody is writing from left to write, but most do. As Microsoft Word is mainly a tool to write, the animation shows a writing action from left to write and from top to bottom.

Outlook

Outlook

The original not animated version of Outlook looks like this:

My animated concept of Outlook is looking like this:

Intention: I think this animation doesn’t need much explanation, right? The animation shows simply a new email arriving in your inbox in Microsoft Outlook.

SharePoint

SharePoint

The original not animated version of SharePoint looks like this:

My animated concept of SharePoint is looking like this:

Intention: As SharePoint often starts with only a “small” bubble, the animation shows how a small idea can grow into something bigger and start different “bubbles” in your SharePoint-World.

Yammer

Yammer

The original not animated version of Yammer looks like this:

My animated concept of Yammer is looking like this:

Intention: Also quite similar to SharePoint, Yammer often starts with only a few people using it. The animation shows how a small group of “Yamming” people can help pushing it into something used by many different groups in your company and how the conversations become more and more.

Excel

Excel

The original not animated version of Excel looks like this:

My animated concept of Excel is looking like this:

Intention: What would we do without Excel, right? As Excel has many tables, rows, columns and cells (No, it has nothing to do with Dragonball) 🙂 the animation shows working on different cells inside a spreadsheet.

OneDrive

OneDrive

The original not animated version of OneDrive looks like this:

My animated concept of OneDrive is looking like this:

Intention: 3, 2, OneDrive. Kind of the intention, I had in mind. You know, it is almost impossible to upload or download something without a little time you have to wait. This is the animation, the blinking OneDrive icon 🙂 I is representing the uploading / downloading time of your data.

PowerPoint

PowerPoint

The original not animated version of PowerPoint looks like this:

My animated concept of PowerPoint is looking like this:

Intention: For me, PowerPoint is one of my favorite tools. I know, I am a tech-guy, but I hope you also see that design and ideas etc. is important to me. Therefore, this animation simply shows you what is key to a PowerPoint presentation. Different animations and ideas of presenting the content.

OneNote

OneNote

The original not animated version of OneNote looks like this:

My animated concept of OneNote is looking like this:

Intention: OneNote is one of my most used applications in the entire Office family, simply because I can build such an easy structure and especially now with the great integration of Office 365 is becomes even more useful to me. The animation shows the creation of new sections in OneNote and builds you perfectly structured notebook.

Skype

Skype

The original not animated version of Skype looks like this:

My animated concept of Skype is looking like this:

Intention: To be honest, I didn’t even think about how to animate the Skype icon. It was that clear to me. The animation shows the “going online” process of Skype, first loading Skype (360°), then the going online (blinking). To me, the right one looks really like an official icon from Microsoft 🙂

MicrosoftTeams

Microsoft Teams

The original not animated version of Microsoft Teams looks like this:

My animated concept of Microsoft Teams is looking like this:

Intention: Most likely, Microsoft Teams is started by just one person, but it can grow pretty fast and the single person invites one or more into the newly created team. That’s what the animation shows, pretty simply, but also pretty accurate from my opinion

Thank you all for you kind words on my social media channels such as Twitter, Facebook or via mail. I’m super happy that most of you enjoyed the animated design concepts. For all the others who disliked or commented that they don’t like them, sorry, but maybe you guys can share your design concepts so I can learn from you.

Until the next time, don’t be afraIT