This is a great option if you need to display and store details of several employees. 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. There are a few ways you can create an employee directory with JustinmindвЂ™s Office UI Fabric kit. Place these vertically down the left-hand side of the canvas.

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. 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). 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). 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.

Navigation should be coherent and consistent so that readers will digest and act on your business message, according to the experts over at Kissmetrics. The first thing your homepage needs is a solid navigation system. Add the following expression in the expression builder:

Then, add a condition to the Event by clicking вЂadd conditionвЂ™ on the left of the event.

Go back to the first screen and add an вЂOn ClickвЂ™ + вЂLink ToвЂ™ event to the вЂLoginвЂ™ button.

LetвЂ™s bring it to life with JustinmindвЂ™s interactive Events and Conditions.

YouвЂ™ve just created the layout of your login form.

Make sure itвЂ™s clear to the user that they have logged in successfully, by using FabricвЂ™s Dialog or Success MessageBar for instance.

Customize the second screen of your prototype as preferred.

It should be a primary button because itвЂ™s your main Call to Action (CTA).

Add a Primary Button from the Fabric kit to the bottom of your login form and rename it вЂLoginвЂ™.

Tip: change the Type in the Properties tab to вЂpasswordвЂ™ so that when the user inputs their password, it will be encrypted.

This will allow you to add a label to the text boxes so users know what to input. We suggest using the text box with a placeholder. In the Fabric framework, the TextField component enables a user to type text into an app. 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.Дesigners 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. These models are rich with visual input and customizable UI elements as well as interaction when combined with JustinmindвЂ™s Events system. 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:Д«y prototyping these experiences with Justinmind, designers produce mock user interfaces. 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.

Justinmind tile grid