Design Office UI Fabric prototypes for Microsoft Office and Office 365 with Justinmind. It’s super easy and totally code-free.
Justinmind’s UI library for Microsoft’s Office UI Fabric kit is our mobile-first, front-end framework for prototyping Office and Office 365 web experiences. Giving you full access to the complete Office UI Fabric user interface kit, our UI library makes it easy to create rich Office UI Fabric experiences for Microsoft Office apps, with no coding necessary.
Get the UI Fabric kit and start prototyping for Office now!
Designed by the OneDrive and SharePoint Design Studio, the Office UI Fabric framework enables development communities to create Office Add-ins and Office 365 web apps that integrate seamlessly with Office. It’s like Bootstrap for Office.
But for the designers out there looking to create web and mobile experiences around Office and Office 365, Justinmind offers a code-free solution. The first step is a prototype. In this post, take a tour of Justinmind’s Office Fabric UI kit and learn how to create a Microsoft SharePoint Intranet using the UI library.
Before getting started, make sure you’ve got Justinmind prototyping tool downloaded. Try it for free here.
What is the Fabric framework?
Microsoft Office UI Fabric is Microsoft’s official UI framework for creating front-end experiences that complement Office and Office 365.
“Fabric React is a responsive, mobile-first collection of robust components designed to make it quick and simple for you to create web experiences using the Office Design Language.” NPM
Many React UI components are used in Office web products to improve brand alignment, maintain consistent functionality across browsers and provide a point of reference for the evolving Office and Office 365 products.
What’s in Justinmind’s Office UI Fabric kit?
Justinmind’s Office UI Fabric kit is based on the design and layout of the robust, up-to-date components of the Office UI Fabric framework. Take a look below to see the building blocks available in Justinmind’s UI Fabric library- including inputs containers such as the Button, TextField and Checkboxes, layout elements like the CommandBar, Dialog, ContextualMenu, Callout, and Panel widgets, and navigational elements such as Breadcrumb, Dropdown and Slider features – that all take on Office styles and functionality.
Here’s a list of the full range of visual and interactive components available in Justinmind’s UI Fabric kit:
Justinmind’s library also contains Fabric themes so designers can maintain styles in their Office prototypes. Users can build both web prototypes for simulation in web browsers, Windows and Mac desktops, as well as mobile devices including iOS on iPad.
Take a tour of the full UI library here.
What can designers make with Office UI Fabric?
Office Fabric helps designers speed up the design process and maintain design consistency when building Office products with an extensive collection of pre-built UI and navigation components. Designers can use Office UI Fabric to create compelling apps and sites that are usable, useful and have delightful UX for any of the following Microsoft products:
- Office 365
- Office Mix
- Microsoft Dynamics
- Visual Studio Online
By prototyping these experiences with Justinmind, designers produce mock user interfaces. These models are rich with visual input and customizable UI elements as well as interaction when combined with Justinmind’s Events system. Justinmind’s Office UI Fabric kit allows designers to reproduce the look, feel and behavior of Office products quickly and easily and test them in real-time.
Designers can create the form of their Office low-fidelity wireframes with the Office UI Fabric kit and build them up into clickable, high-fidelity prototypes with realistic behavior using the drag-and-drop interactive components.
Get the UI Fabric kit and start prototyping for Office now!
Justinmind’s Office UI Fabric kit for web and mobile prototypes: getting started
It’s super easy to integrate the Office UI Fabric kit into your Justinmind web and mobile prototypes. You can prototype any of the above Office and Office 365 products with Justinmind’s UI Fabric library.
Get started now and prototype mobile-first web and mobile experiences for Office:
1: First, download Justinmind and start your free 30 day trial.
2: Next, download the UI kit from our widgets page.
3: Then, import the UI kit into the prototyping tool. You’ll see the widgets within the Widgets panel on the left-hand side.
Up next: prototyping a SharePoint intranet experience with Justinmind’s Fabric framework.
How to prototype a SharePoint intranet for web and mobile
The Microsoft SharePoint platform is primarily used by developers to create intranets with branded landing pages, custom content and navigation, and training materials. It can also be used as a content management system (CMS), team collaboration system, or business intelligence (BI) platform. Baked with Office Fabric, SharePoint’s navigation features and layout help employees stay up to date with company news, events and documentation.
As intranet portals often provide enterprise information and resources such as learning materials, UX designers need to ensure that the portals are accessible and easy to interact with. By leveraging Justinmind’s UI Fabric library, you can prototype a SharePoint intranet that is visually pleasing and easy to navigate.
In this section of our post, we’re going to show you how you can design a SharePoint intranet within a Justinmind prototype using UI Fabric components and styles. Have no fear, designers, this needs no coding experience 😉
Designing your intranet portal’s login page with Office UI Fabric elements
In our example, we will create an intranet portal login page, homepage with scroll effects and a employee directory area with interactive options.
Let’s start with the login page. Note that a landing page, such as the login page, is an essential cog in the onboarding wheel and designing it requires some attention to detail. This is why prototyping really helps to get ideas off paper and into an interactive tool like Justinmind.
- To get started, open Justinmind and create a new Web prototype with the predefined specs. Create a second screen – this will be the home screen that the user will arrive on once they’ve logged in. Name the first screen ‘Login’ and the second ‘Homepage’.
- From the Fabric Widget Library, add TextField widgets for the Username and Password input fields to the first screen.
In the Fabric framework, the TextField component enables a user to type text into an app. We suggest using the text box with a placeholder. This will allow you to add a label to the text boxes so users know what to input.
- Tip: change the Type in the Properties tab to ‘password’ so that when the user inputs their password, it will be encrypted.
- Add a Primary Button from the Fabric kit to the bottom of your login form and rename it ‘Login’. It should be a primary button because it’s your main Call to Action (CTA).
“Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.” Dev.office
- Customize the second screen of your prototype as preferred. Make sure it’s clear to the user that they have logged in successfully, by using Fabric’s Dialog or Success MessageBar for instance.
- You’ve just created the layout of your login form. Let’s bring it to life with Justinmind’s interactive Events and Conditions.
- Go back to the first screen and add an ‘On Click’ + ‘Link To’ event to the ‘Login’ button. Link it to the second screen.
- Then, add a condition to the Event by clicking ‘add condition’ on the left of the event. Add the following expression in the expression builder:
Now when the user clicks on the button, they will navigate to the homepage.
Bonus: add a ProgressIndicator or Spinner widget to show the completion status of the login operation if it’s likely to last more than 2 seconds.
Prototyping your Intranet’s homepage with the Office UI Fabric kit
Office UI Fabric navigation patterns
The first thing your homepage needs is a solid navigation system. Navigation should be coherent and consistent so that readers will digest and act on your business message, according to the experts over at Kissmetrics.
Luckily, the UI Fabric kit has a complete set of pre-built navigation elements to make sure you can make the most of navigation in your intranet prototype. The navigation elements to choose from include a drop down menu, breadcrumb (indicating the current page’s location within a hierarchy), search box, checkbox (allowing users to switch between two mutually exclusive options), pivot (for navigation frequently accessed pages), and a Command Bar (typically used in Microsoft Office Excel, Outlook and Word).
In our intranet homepage, we’re going to add a vertical dropdown menu (a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button). From the UI Fabric kit, drag the Basic dropdown widget to the canvas – add the equivalent of these widgets to the total number of main menu options on your homepage. Place these vertically down the left-hand side of the canvas.
In our example, we’ve got 6 main menu options (news & publications, employee resources, departments, safety & quality, templates/forms and our company), so we have used 6 of these widgets. Customize your dropdown menu as preferred.
You will need to add a new screen for each target page from the drop down and add linking events to connect your pages together. You can use transition effects to make your menu even more interactive. Remember to keep your navigation consistent by making your navigation accessible from any point on site with a fixed menu (below).
Find out more about prototyping a dropdown menu here.
Tip: According to the Nielsen Norman Group, people prefer role-based personalization over company-wide portals. This means designing for different personas: managers, employees, C-level etc. Consider this when designing your prototype, and remember that your Office UI Fabric library is totally customizable exactly for this purpose!
Fixed-position menu scrolling with Justinmind
Now we’re going to make our menu sticky so that the user can see and interact with it no matter how far down the page they are.
From Justinmind’s Parallax elements UI library (available by default in the Widgets tab), drag the ‘Pinned layer’ to the canvas. Rearrange the drop down menu items so that they are within the pinned layer element. The scrolling interaction is pre-defined within the parallax element. However, if you’d like to customize this, you can do so by reading this tutorial.
Find out more about prototyping scrolling functionality with Justinmind here.
Custom styles to align branding with the Fabric React framework
Personalizing the visual components of your Justinmind prototype is really easy thanks to the Fabric framework:
- All the image UI elements are labelled by size and alignment so positioning them on the canvas and measuring white space is easy.
- For your homepage, you’ll want to include a logo and possibly an image, such as a Hero image, as a header or background element.
- Choose colors from the Fabric Theme widget to keep your branding on fleek.
Designing your Employee directory
Next we’re going to create an employee directory for our Employee Resources area. This area will display department contact information.
There are a few ways you can create an employee directory with Justinmind’s Office UI Fabric kit. You could use the PeoplePicker, typically used to select one or more entities, such as people or groups, along with the Persona feature to render an individual’s avatar and presence. This is a great option if you need to display and store details of several employees.
However, if you have a small number of contacts, you may prefer to use the grid structure. The grid is a great way to display contacts visually, breaking items down and creating additional pages for them automatically.
Drag the grid to the canvas and customize it with contact avatars and their information. Place it within a dynamic panel and add additional panels for each new contact. Then, add ‘On Click’ + ‘Set Active Panel’ events, choosing the relevant panel each time, so that the relevant contact is displayed when the user clicks on their avatar.
If you’d like to customize your list with options such as editing, favoriting or sharing contact information, read this tutorial.