Presentation given at SharePoint Saturday Ottawa. Presentation go over basic design concepts and how to apply them to new designs and concepts in SharePoint

1. Design your Modern Intranet using PnP
Design Assets
D ’ a r c e H e s s , M V P , P S M
S P S O t t a w a 2 0 1 9

2. Agenda
Let’s Build It Summary
Introductions Understanding Design
What is PnP and Why Contribute

3. dhess@dhconsulting.me
https://darcehessllc.com
@darcehess
https://www.linkedin.com/in/darcehess
AboutMe

4. Understanding Design

5. “Ease of use may be invisible, but its absence sure isn’t.”
— IBM
“Like all forms of design, visual design is about problem-
solving, not about personal preference or unsupported
opinion.” — Bob Baxley
“If you think good design is expensive, you should look at
the cost of bad design.” Dr. Ralf Speth
“Some people think design means how it looks. But of
course, if you dig deeper, it’s really how it works.” — Steve
Jobs
WhyShouldWe Care?

6. What appeals to your visitor?
What draw’s your visitors attention?
What personal desires do your visitors
have?
How can you get your visitors
emotionally engaged?
What kind of content are your visitors
looking for?
What specific content are people looking
for?
How do they look for that content?
Where do your visitors expect to find
certain content?
In what situations do people visit your
site?
Where are they when they visit your site?
Are their motives and goals for visiting
your site affected by their whereabouts?
What do they do while visiting your site?
Who are your users?
What are your users like?
What goals do people have when they
visit your site?.
Pillars ofDesign

7. ProjectDefinition
Project summary
Goals
Target audiences
ProjectScope
What functionality is needed
Use Cases
Timelines
PM Methodology (SCRUM, Agile)
Wireframes& SiteArchitecture
Sitemap
Wireframes
Navigation
Identification of Consistent Content
Visual Design
Mock Ups
Colors
Imagery
Launch
Feedback Incorporation
Links Work
Change Mgmt.
Training
Testing
Positive/Negative Test Cases
Define Test Group
Usability
Technical Testing
Development
HTML/CSS/SPFx
Content Creation
Refine old content
7 Phases of Design

8. • Match between the system and the real world – Use
phrases and terms users are familiar with and in a
logical order
• User back Door – Users click on the wrong thing and
make a mistake; how do they exit?
• Consistency and Standards – User should not wonder if
different words or situations mean the same thing.
• Error Prevention – Have confirmations to help prevent
users from making a bad choice without understanding
consequences.
• Flexibility and Efficiency of Use – Functionality should
be intuitive to beginners and experts alike.
• Aesthetic and Minimalistic Design: Dialogue should not
contain information that is irrelevant and not needed
• Help users recognize and diagnose and recover from
errors – Validation should tell them how to fix the issue
or what is missing.

9. SharePoint PnP Design
Assets

10. Mock Ups
Wireframes
Examples
Design Guidance
PnP Design Assets are an open-source,
community-driven repository for anything
design related to help people make better
design decisions regarding design and custom
functionality in SharePoint and soon-to-be
Teams.
https://github.com/pnp/sp-design-assets

12. Communication Site Template
Team Site Template
Web part properties panel
Document Library
Hero Web Part
Highlighted Content
Image Gallery
List Web Part
Events
News
People
Quick Links
Yammer
Office UI Fabric Icons
More releases coming soon

13. Let’s Get Building

14. News
Links
Events
Navigation
Yammer
Custom Web Parts
What’s in your
intranet?

15. Summary

16. YouCanDoIt!
Design is not just the colors on the page or the fonts that you’re
using. It is how we interact with our world and our content.
Everyone has the ability to create experiences for users, just
remember that with great power comes great responsibility.

17. Thank You!
dhess@dhconsulting.me
https://darcehessllc.com
@darcehess
https://www.linkedin.com/in/darcehess