SlideShare a Scribd company logo

Design your Modern Intranet using SharePoint PnP Design Assets

•Download as PPTX, PDF•
•
D'arce Hess
D'arce Hess

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 of 17
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
Agenda Let’s Build It Summary Introductions Understanding Design What is PnP and Why Contribute
dhess@dhconsulting.me https://darcehessllc.com @darcehess https://www.linkedin.com/in/darcehess AboutMe
Understanding Design
“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?
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
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
• 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.
SharePoint PnP Design Assets
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
Design your Modern Intranet using SharePoint PnP Design Assets
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
Let’s Get Building
News Links Events Navigation Yammer Custom Web Parts What’s in your intranet?
Summary
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.
Thank You! dhess@dhconsulting.me https://darcehessllc.com @darcehess https://www.linkedin.com/in/darcehess

More Related Content

Design your Modern Intranet using SharePoint PnP Design Assets

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