11-30-2018, 12:21 PM
Redesigning the Office app icons to embrace a new world of work
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work.jpg" width="2000" height="1125" title="" alt="" /></div><div><p><h2 id="9cd7" class="graf graf--h4 graf-after--h3 graf--subtitle"><em class="markup--em markup--h4-em">Design is becoming the heart and soul of Office. Learn how we evolved our visual identity to reflect the simple, powerful, and intelligent experiences of Office 365.</em></h2>
</p>
<div class="section-inner sectionLayout--fullWidth">
<figure id="cbeb" class="graf graf--figure graf--layoutFillWidth graf-after--h4">
<div class="aspectRatioPlaceholder is-locked"><img class="graf-image" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work.jpg" /></div>
</figure>
</div>
<div class="section-inner sectionLayout--insetColumn">
<p id="da41" class="graf graf--p graf-after--figure">Whoever said that nothing is more intimidating than the blank page probably never faced a redesign.</p>
<p id="739a" class="graf graf--p graf-after--p">The last time we updated the Microsoft Office icons was in 2013, when selfies were new enough to become Oxford Dictionaries’ Word of the Year and emojis were new enough to be considered buzzworthy.</p>
<p id="6ac1" class="graf graf--p graf-after--p">Clearly, a lot has changed since then — including how people get things done.</p>
<p id="cfa2" class="graf graf--p graf-after--p">Over 1 billion people from vastly different industries, geographies, and generations use Office. They work on different platforms and devices and in environments that are faster, more distracting, and more connected than ever before.</p>
<p id="1ff1" class="graf graf--p graf-after--p">To support this changing world of work, Office is transforming into a collaborative suite that lets you work together in real-time from almost any device. We’ve infused our tools with powerful AI: you can get insights from data with less effort, write a paper using your voice, or make your resume using LinkedIn insights. We’ve also added totally new apps to the suite like our AI-powered meetings and chat service, Microsoft Teams. In the end, it’s great design that makes these experiences fluid and seamless.</p>
<p id="64eb" class="graf graf--p graf-after--p">As a signal to our customers, we’ve evolved our Office icons to reflect these significant product changes. We’re thrilled to share the new icons for Office 365 with you today and tell the story behind their creation.</p>
<figure id="0893" class="graf graf--figure graf--iframe graf-after--p" />
<h4 id="9add" class="graf graf--h4 graf-after--figure">Carefully crafted designs that honor heritage and welcome the future</h4>
<figure id="b0b1" class="graf graf--figure graf-after--h4">
<div class="aspectRatioPlaceholder is-locked"><img class="graf-image" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work.png" /></div>
</figure>
<p id="4f12" class="graf graf--p graf-after--figure">From the get-go, we embraced Office’s rich history and used it to inform design decisions. Strong colors have always been at the core of the Office brand, and new icons are a chance to evolve our palette. Color differentiates apps and creates personality, and for the new icons we chose hues that are bolder, lighter and friendlier — a nod to how Office has evolved.</p>
<p id="b898" class="graf graf--p graf-after--p">We also used gestalt principles to further emphasize key product changes. Simplicity and harmony are key visual elements that reflect the seamless connectivity and intuitiveness of Office apps. While each icon has a unique and identifiable symbol, there are connections within each app’s symbol and the collective suite.</p>
<h4 id="2677" class="graf graf--h4 graf-after--p">Flexible visual systems that work across platforms, devices, and generations</h4>
<figure id="b115" class="graf graf--figure graf-after--h4">
<div class="aspectRatioPlaceholder is-locked"><img class="graf-image" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-1.png" /></div>
</figure>
<p id="c800" class="graf graf--p graf-after--figure">Today’s workforce includes five generations using Office on multiple platforms and devices and in environments spanning work, home, and on the go. We wanted a visual language that emotionally resonates across generations, works across platforms and devices, and echoes the kinetic nature of productivity today.</p>
<p id="ee89" class="graf graf--p graf-after--p">Our design solution was to decouple the letter and the symbol in the icons, essentially creating two panels (one for the letter and one for the symbol) that we can pair or separate. This allows us to maintain familiarity while still emphasizing simplicity inside the app.</p>
<p id="fdf0" class="graf graf--p graf-after--p">Separating these into two panels also adds depth, which sparks opportunities in 3D contexts. Through this flexible system, we keep tradition alive while gently pushing the envelope.</p>
<h4 id="d593" class="graf graf--h4 graf-after--p">Human-centered designs that emphasize content and reflect the speed of modern life</h4>
</div>
<div class="section-inner sectionLayout--outsetColumn">
<figure id="bc7f" class="graf graf--figure graf--layoutOutsetCenter graf-after--h4">
<div class="aspectRatioPlaceholder is-locked"><img class="graf-image" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-2.png" /></div>
</figure>
</div>
<div class="section-inner sectionLayout--insetColumn">
<p id="5f16" class="graf graf--p graf-after--figure">We all know modern life is faster and more connected: we’re living in it. Office supports this by making it fast and easy to express ideas, collaborate with others, and stay focused and in the flow. It’s why Office apps compose together, enabling users to open PowerPoint or Excel beside conversations in Teams or Outlook.</p>
<p id="e49b" class="graf graf--p graf-after--p">To reflect this in the icons, we removed a visual boundary: the traditional tool formatting. Whereas prior Office icons had a document outline for Microsoft Word and a spreadsheet outline for Excel, we now show lines of text for Word and individual cells for Excel. By focusing on the content rather than any specific format, these icons embody the collaborative nature of the apps they represent.</p>
</div>
<div class="section-inner sectionLayout--fullWidth">
<figure id="fbd6" class="graf graf--figure graf--layoutFillWidth graf-after--p">
<div class="aspectRatioPlaceholder is-locked"><img class="graf-image" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-1.jpg" /></div>
</figure>
</div>
<div class="section-inner sectionLayout--insetColumn">
<p id="bf2e" class="graf graf--p graf-after--figure">Similarly, we’ve changed the letter-to-symbol ratio. Traditionally, the letter occupied two-thirds of the icon, and the symbol took up one-third. We’ve changed this ratio to now emphasize the symbol because while the letter represents the tool itself, the symbol speaks more to people’s creations.</p>
<h4 id="eb02" class="graf graf--h4 graf-after--p">Being part of the design community</h4>
<p id="5b21" class="graf graf--p graf-after--h4 graf--trailing">Our new icons will begin rolling out across platforms in the coming months, starting with mobile and web. They are the result of many iterations, a lot of research and testing, and plenty of late nights and weekends. They’re also part of an ongoing journey. As designers, we love the creative community’s ability to inspire each other and create momentum, so don’t hesitate to leave a comment below.</p>
</div>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work.jpg" width="2000" height="1125" title="" alt="" /></div><div><p><h2 id="9cd7" class="graf graf--h4 graf-after--h3 graf--subtitle"><em class="markup--em markup--h4-em">Design is becoming the heart and soul of Office. Learn how we evolved our visual identity to reflect the simple, powerful, and intelligent experiences of Office 365.</em></h2>
</p>
<div class="section-inner sectionLayout--fullWidth">
<figure id="cbeb" class="graf graf--figure graf--layoutFillWidth graf-after--h4">
<div class="aspectRatioPlaceholder is-locked"><img class="graf-image" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work.jpg" /></div>
</figure>
</div>
<div class="section-inner sectionLayout--insetColumn">
<p id="da41" class="graf graf--p graf-after--figure">Whoever said that nothing is more intimidating than the blank page probably never faced a redesign.</p>
<p id="739a" class="graf graf--p graf-after--p">The last time we updated the Microsoft Office icons was in 2013, when selfies were new enough to become Oxford Dictionaries’ Word of the Year and emojis were new enough to be considered buzzworthy.</p>
<p id="6ac1" class="graf graf--p graf-after--p">Clearly, a lot has changed since then — including how people get things done.</p>
<p id="cfa2" class="graf graf--p graf-after--p">Over 1 billion people from vastly different industries, geographies, and generations use Office. They work on different platforms and devices and in environments that are faster, more distracting, and more connected than ever before.</p>
<p id="1ff1" class="graf graf--p graf-after--p">To support this changing world of work, Office is transforming into a collaborative suite that lets you work together in real-time from almost any device. We’ve infused our tools with powerful AI: you can get insights from data with less effort, write a paper using your voice, or make your resume using LinkedIn insights. We’ve also added totally new apps to the suite like our AI-powered meetings and chat service, Microsoft Teams. In the end, it’s great design that makes these experiences fluid and seamless.</p>
<p id="64eb" class="graf graf--p graf-after--p">As a signal to our customers, we’ve evolved our Office icons to reflect these significant product changes. We’re thrilled to share the new icons for Office 365 with you today and tell the story behind their creation.</p>
<figure id="0893" class="graf graf--figure graf--iframe graf-after--p" />
<h4 id="9add" class="graf graf--h4 graf-after--figure">Carefully crafted designs that honor heritage and welcome the future</h4>
<figure id="b0b1" class="graf graf--figure graf-after--h4">
<div class="aspectRatioPlaceholder is-locked"><img class="graf-image" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work.png" /></div>
</figure>
<p id="4f12" class="graf graf--p graf-after--figure">From the get-go, we embraced Office’s rich history and used it to inform design decisions. Strong colors have always been at the core of the Office brand, and new icons are a chance to evolve our palette. Color differentiates apps and creates personality, and for the new icons we chose hues that are bolder, lighter and friendlier — a nod to how Office has evolved.</p>
<p id="b898" class="graf graf--p graf-after--p">We also used gestalt principles to further emphasize key product changes. Simplicity and harmony are key visual elements that reflect the seamless connectivity and intuitiveness of Office apps. While each icon has a unique and identifiable symbol, there are connections within each app’s symbol and the collective suite.</p>
<h4 id="2677" class="graf graf--h4 graf-after--p">Flexible visual systems that work across platforms, devices, and generations</h4>
<figure id="b115" class="graf graf--figure graf-after--h4">
<div class="aspectRatioPlaceholder is-locked"><img class="graf-image" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-1.png" /></div>
</figure>
<p id="c800" class="graf graf--p graf-after--figure">Today’s workforce includes five generations using Office on multiple platforms and devices and in environments spanning work, home, and on the go. We wanted a visual language that emotionally resonates across generations, works across platforms and devices, and echoes the kinetic nature of productivity today.</p>
<p id="ee89" class="graf graf--p graf-after--p">Our design solution was to decouple the letter and the symbol in the icons, essentially creating two panels (one for the letter and one for the symbol) that we can pair or separate. This allows us to maintain familiarity while still emphasizing simplicity inside the app.</p>
<p id="fdf0" class="graf graf--p graf-after--p">Separating these into two panels also adds depth, which sparks opportunities in 3D contexts. Through this flexible system, we keep tradition alive while gently pushing the envelope.</p>
<h4 id="d593" class="graf graf--h4 graf-after--p">Human-centered designs that emphasize content and reflect the speed of modern life</h4>
</div>
<div class="section-inner sectionLayout--outsetColumn">
<figure id="bc7f" class="graf graf--figure graf--layoutOutsetCenter graf-after--h4">
<div class="aspectRatioPlaceholder is-locked"><img class="graf-image" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-2.png" /></div>
</figure>
</div>
<div class="section-inner sectionLayout--insetColumn">
<p id="5f16" class="graf graf--p graf-after--figure">We all know modern life is faster and more connected: we’re living in it. Office supports this by making it fast and easy to express ideas, collaborate with others, and stay focused and in the flow. It’s why Office apps compose together, enabling users to open PowerPoint or Excel beside conversations in Teams or Outlook.</p>
<p id="e49b" class="graf graf--p graf-after--p">To reflect this in the icons, we removed a visual boundary: the traditional tool formatting. Whereas prior Office icons had a document outline for Microsoft Word and a spreadsheet outline for Excel, we now show lines of text for Word and individual cells for Excel. By focusing on the content rather than any specific format, these icons embody the collaborative nature of the apps they represent.</p>
</div>
<div class="section-inner sectionLayout--fullWidth">
<figure id="fbd6" class="graf graf--figure graf--layoutFillWidth graf-after--p">
<div class="aspectRatioPlaceholder is-locked"><img class="graf-image" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-1.jpg" /></div>
</figure>
</div>
<div class="section-inner sectionLayout--insetColumn">
<p id="bf2e" class="graf graf--p graf-after--figure">Similarly, we’ve changed the letter-to-symbol ratio. Traditionally, the letter occupied two-thirds of the icon, and the symbol took up one-third. We’ve changed this ratio to now emphasize the symbol because while the letter represents the tool itself, the symbol speaks more to people’s creations.</p>
<h4 id="eb02" class="graf graf--h4 graf-after--p">Being part of the design community</h4>
<p id="5b21" class="graf graf--p graf-after--h4 graf--trailing">Our new icons will begin rolling out across platforms in the coming months, starting with mobile and web. They are the result of many iterations, a lot of research and testing, and plenty of late nights and weekends. They’re also part of an ongoing journey. As designers, we love the creative community’s ability to inspire each other and create momentum, so don’t hesitate to leave a comment below.</p>
</div>
</div>