Design is important, and it doesn’t have to be hard. It’s what can make or break your next big thing. Even though your idea or functionality may be great… without a proper experience in place – everything could go to waste.
It’s all about following a couple of simple principles and about being smart. In this post I will walk you through a couple of key points that comes into play when designing good experiences. Much of this will be generic to good design, but some points will be especially for Office add-ins.
Use Office UI Fabric
You’re essentially building an experience within the world of Office 365. So creating something that is familiar to Office 365 users will only serve you well.
You don’t have to reinvent the wheel, because we are giving you the tools we are using when building our own Office 365 experiences. It’s an open source, responsive, front-end UI toolkit named Office UI Fabric: http://dev.office.com/fabric
It will help you to apply the Office design language through styling. It includes everything you can think of in terms of visuals; typography, colors, icons, components, layouts, animations and more.
You can download the framework from the link above, or simply reference the CSS files via the CDN:
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
In addition to the styling, it includes a set of commonly used components (i.e. buttons, drop-down menus, dialogs, search boxes, complex pickers, etc.).
Looking at the HTML code (grabbed from http://dev.office.com/fabric/components/dialog) of the above dialog you can tell that it’s all about using the styles (classes) defined for you in the Office UI Fabric.
<div class="ms-Dialog ms-Dialog--lgHeader">
All emails together now
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
<button class="ms-Dialog-action ms-Button ms-Button--primary">
<button class="ms-Dialog-action ms-Button">
<span class="ms-Button-label">Got it</span>
Create harmony in your add-ins, be consistent. Make sure that your users can familiarize with your different views and navigation. This applies to everything, as tiny as margins and offsets to larger elements such as headers, buttons and entire dialogs.
By being consistent, you will establish your own UI brand much faster – as your users will be exposed to the same experience throughout your solution.
It may seem as almost nothing – but an odd offset of a couple of pixels may not instantly look incorrect… but may give the sense of something being simply wrong (without knowing what’s bothering the senses).. Keep your padding, margins, alignments and positioning in harmony with an invisible grid system – this makes for a more organized and peaceful feeling when viewing your experience.
If you’re using the Office UI Fabric toolkit, it’s easy – just use the built in classes for styling your elements. If you are not using it or simply require additional adjustments – share your CSS files as much as possible between your pages. This helps to avoid confusion and enables maintainability. In example, Visual Studio creates both a global CSS file (App.css) for your shared CSS files and specific ones for your pages – this is good practice.
Think about what your text fields symbolize. For instance; if it’s a page header, it will certainly be the first element that a user will see – what do you want to convey right away? If it’s a section header it’s something that users might look for – make it visible, make it easy for the eye to find.
Again, be consistent. If you’re creating the styles on your own – define global styles for your headers and general purpose text areas (and your other elements, share styles frequently). In Office UI Fabric there’s a bunch of pre-defined styles that you can apply to your elements by referencing the class names (http://dev.office.com/fabric/styles).
Use colors to brighten up your experience. Be aware though, make sure to think about what they may represent. For instance. a red color usually symbolizes an error or something that went wrong. So if the red color isn’t clearly a part of your color profile – this could be confusing for your users if displayed at the wrong place (like a button or text field).
Pick a couple of theme colors for your color profile and use them consistently where it makes sense throughout your add-in (headers, buttons, breadcrumbs, etc.). Be careful not to create a color circus – such can be tricky to bring harmony into.
Depending on the type of add-in you’re building, it will be living within different dimensions. Mail add-ins can either be wide or tall (much like task pane add-ins). Content add-ins can usually be resized by your users to any extent.
For some of these cases, you can request your add-in to be launched in certain dimensions. You can define this in the manifest file: https://msdn.microsoft.com/en-us/library/office/fp161044.aspx
If your add-in is wider than taller, it may be wise to flow (scroll) your content horizontally. While placing everything vertically if the add-in is taller than wider. If your add-in supports both of the flows (for instance mail add-ins launched via add-in commands), you could use CSS media queries (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp) to switch between the different flow directions.
The Office design language is much about simplicity, great typography and modern usage of logos. Try to fit in, try to make something that looks like it belongs in the Office 365 space.
If you have a look at the icons in Office UI Fabric and the Office 365 services, it’s much about flat design. We’re not saying that having a three-dimensional logo with shadows and glow effects doesn’t belong in this space, only that something like that may be much trickier to make it fit in.
Your logo is important, this is your first impression (especially in the Office Store) – so make sure it’s good!
This is something pretty simple, let your content breathe! Your add-in can run in multiple places, usually they are framed in some way depending on the host application and environment.
Bringing some padding around your add-in can be a simple trick to distance your own UI brand profile from merging with the Office frame. Padding does wonders!
Your add-ins can run in many places, this is the philosophy of Office add-ins. Office runs wherever people are to get things done, and so will your add-ins. So make sure to try out your experiences in the different flavors of Office; Web, Windows desktop, iOS (if you choose to be available for iOS), etc…
Because everything is built using web technologies, we know that things may look and behave differently in different browsers and web views. In addition, your (mail/task pane) add-ins can be resized in the Windows desktop version of the Office applications, so design responsively. Testing is key in this case!
Great design is much about iterations. Get feedback from people and look for inspiration around the Office 365 universe. There are great examples in the Office Store of add-ins delivering good user experiences. Design for Office but also for your own brand – merge the two worlds and create something beautiful!