agentr13 / SharePointWireframes

PowerPoint templates to get you started with your next SharePoint wireframes

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SharePoint Wireframes

PowerPoint templates to get you started with your next SharePoint wireframes.

The components

Here are the elements you can use for now:

The Communication Site master

Communication site master

There is also a read-only version of the communication site if you want to show what the experience looks like for visitors:

Communication site read-only

Guided layouts

If you choose a slide master, you can pick a layout to help you place your web parts on the page.

1 column guide

2 column guide

3 column guide

Simply place your web parts so that they fit within the gray area. Once you're done moving the web parts, select the No guide version, which hides all the guides.

Hero web part

Hero web part

(I had a lot of fun drawing the placeholder pictures. Very therapeutic.)

News web part

News web part

Events web part

Events

Documents web part

Documents web part

People web part

People web part

Generic grid layout web part

If you want to write your web part with the grid layout and would like to mock them up in your wireframes, you can use the Generic Grid Layout Web Part. It comes in 1/3 column, 2/3 columns, and full-width variations.

Generic Grid Layout Web Part -- Full width

Generic Grid Layout Web Part -- 2/3 columns

Generic Grid Layout Web Part -- 1/3 column

Generic filmstrip layout web part

If you want to write your web part with the filmstrip layout and would like to mock them up in your wireframes, you can use the Generic Filmstrip Layout Web Part. It comes in 1/3 column, 2/3 columns, and full-width variations.

Generic Filmstrip Layout Web Part -- Full width

Generic Filmstrip Layout Web Part -- 2/3 columns

Generic Filmstrip Layout Web Part -- 1/3 column

Generic carousel layout web part

If you want to design a custom web part that uses the carousel layout, use this template. Like the other generic web parts, it comes in 3 flavours: ** Full-Width**, 2/3 columns and 1/3 column.

Generic Carousel Web Part -- Full Width

Generic Carousel Web Part -- 2/3 columns

Generic Carousel Web Part -- 1/3 column

Generic list layout web part

I couldn't do the other generic layouts and omit the list layout! This one is also available in Full Width, 2/3 columns and 1/3 column.

Generic List Web Part -- Full Width

Generic List Web Part -- 2/3 columns

Generic List Web Part -- 1/3 column

Color palettes

Although many believe that low-fidelity wireframes should use grayscale and contrast instead of colors, sometimes I like to include colors. It really depends on my mood (and the audience).

Whether you're in the "no-colors" camp or in the "with colors" camp, every slide includes the SharePoint color palettes on the right of the page -- outside of the viewable area.

SharePoint color palettes

When you're editing your pages, you can pick the Eyedropper tool to pick the colors you need from the palette. Eyedropper tool

Don't worry: because they are outside of the viewable area, the color palettes won't show up while you're presenting or when you print.

Color palettes won't print

If you need to find out more about what each color is, there is a section at the end of the PowerPoint template that explains the SharePoint colors.

SharePoint Colors Slide

Other stuff

There is also some token lorem ipsum placeholder text in case you need it, but I try to avoid it.

Also, there are sticky notes to help annotate your wireframes.

Sticky notes and wireframes

What else would you like to see? Let me know in the comments.

Using the template

Here are simple tips to use the template:

  • The template uses an 11"x17" page template. It may seem big, but it prevents you from having to deal with 4pt fonts. Don't worry, it presents well on a screen, and prints great posters for your team project room walls.
  • It uses the new sketchy line styles. It may not work in the web version of PowerPoint or if you don't have the Office Insider edition of PowerPoint. Let me know if you need a non-sketchy version and I'll try to oblige. If you get an error opening it in the web browser, try opening it on your desktop Error message with PowerPoint
  • To emphasize on the "work in progress" look, I used the Segoe Print font because I found that it was available on most workstations that I use. If you don't have this font, feel free to use any font you like. Ink Draft and Segoe Marker work well too. Just resist the urge to use Comic sans !
  • For now, every slide uses the communication site layout (and the read-only variation). I'll add the team site layout if I get requests to do so
  • The title of the slide is the site title Site title is the slide title
  • Every site element is grouped to make it easier to move them around. Feel free to un-group them and edit them as you need Grouping within the slide
  • I used some theme colors, but feel free to make the designs monochromatic if you want
  • If you need to edit the navigation, feel free to copy the navigation elements (called Site Navigation ) from the master slide and paste the customized navigation on your slide. It already has a white background to hide the navigation from the master slide Site Navigation

To edit site navigation

To edit the site navigation, follow these steps:

  1. From your PowerPoint slide, go to View then select Slide Master in the Master Views group Slide Master from the View ribbon
  2. PowerPoint should automatically take you to the master slide called Communication site. Select the site navigation by clicking on the site icon and click Copy. Copy site navigation
  3. From the Slide Master menu, select Close Master View to go back to your slide Close Master View
  4. Paste the navigation on top of the existing navigation. The white background behind the site navigation you just copied should hide the existing one from the master slide.
  5. Edit the navigation and site icon as you wish

To create your own wireframe

Although I have a sample wireframe in my template, you can create your own using these simple steps:

  1. In PowerPoint, insert a new slide in your presentation by going to New Slide and select the layout you want New Slide Menu You can pick from the Communication Site -- Edit Mode to show what an author would see, or Communication Site -- Read-only Mode to show what a visitor would see.
  2. Try to start with one of the guides. You can choose from 1 column guide, 2 column guide or 3 column guide.
  3. From the Web Part Templates section, find the web parts you want from the other slides in the PowerPoint template, copy them and paste them onto your new slide.
  4. Make sure to place the web parts within the gray areas on the guides.
  5. Edit the web part elements (like web part title and content). It may help to ungroup them first.
  6. Once you're done placing your web parts, go to Layout and pick the No guide version of whatever master you chose. It will remove the background guides, but will not affect where you placed your web parts. Layouts

Contributing

If you'd like to contribute to this PowerPoint template, feel free to submit a pull request.

If you find issues, or have any comments or questions, go ahead and submit an issue.

About

PowerPoint templates to get you started with your next SharePoint wireframes

License:MIT License