IA and Branding Process: Session 7.2 Sketches to Wireframes to Hi-Fidelity Designs

1. IA and Branding Process: Session 7.2Sketches to Wireframes to Hi-Fidelity Designs Erik Swenson Sr. Practice Consultant, EMC Consulting

2. About this Session • Anything is possible • Roles • Design process • Gathering Branding Requirements • Create Sitemap & Navigation • Create Wireframes • Create Visual Design • Tools for building the design • Implementation methods options • Additional guides/references • Q/A

3. Anything is possible • 100 Best SharePoint Websites http://www.wssdemo.com/Pages/topwebsites.aspx

4. Anything is possible

5. Anything is possible

6. Roles • 3 key skills required: • Information Architecture –much of the interface navigation and page structure will be driven by the Information Architect. • Designer – Skill depends on several factors, if leveraging native features, skill is very dependent on knowledge of SharePoint. • SharePoint Front-End Development – MOSS-FED highly specialized skill set, especially if doing CSS-based changes. IA D FED

7. Design Process: 7 Steps IA IA IA IA IA D D D D FED FED FED Step 3 Create Site Map Step 4 StartWireframeDevelopment Step 5 Create“Look-n-Feel” Interface Design Step 6 Complete Wireframes & Interface Designs Step 7 Begin Programming of Site Design Step 1 Conduct Requirements Gathering Step 2 Prioritize KeyDevelopment Iterations Wireframes range from high level b/w navigation and page sketches to detailed page layouts. Full color designsof key application navigation, pages, and interactions. Alpha Prototype: Incomplete representation of portal structure; usually home page plus key category/ user path to give a preview of how site will function Beta Prototype: 100% complete representation of site structure; all content represented on site map completed START Requirement 1 Requirement 2 Requirement 3 Requirement 4 Requirement 5 Requirement 6 Requirement 7 Requirement 8 Requirement 9 Requirement 10 Requirement 11 Requirement 12 Requirement 13 Requirement 14 Requirement 15 … Session 1 Identify Key Areas for IAWire Frame Design Review Review Review Review Session 2 …

8. Gathering Branding Requirements IA D FED • Have Client/Marketing start to think about what they like • Identify Approvers: Business Users, Marketing, Board Members, Executives • Appropriate Design Treatments: Gradations or flat colors, Rounded corners, Transparencies, White Text on dark background, Tabbed navigation, Pixel lines for separation, Shadows • Branding Moods Extremes: Simple or Complex, Bold or Soft, Heavy Imagery or soft color transitions, Sharp square edges or soft rounded corners • Sites they like/Dislike: Identify existing sites that they like and why they like them. Same for sites they don’t like. Step 1 Conduct Requirements Gathering Session 1 Session 2 …

9. Gathering Branding Requirements IA D FED • Gathering Branding Requirements: • Define customization level? • Brand Adaptation: Apply logo, colors only, keep out of the box layout and tab styles • Custom brand: More design treatments, changes to lines, controls, tab styles.. stay within master page layout • Full custom design: Change layout of master page completely.. i.e. navigation may not be in tabs, etc Step 1 Conduct Requirements Gathering Session 1 Session 2 …

10. Gathering Branding Requirements IA D FED • Gathering Branding Requirements: • Understand the Scale • Full portal modification: All sites, My Sites, and Administration page • Sites only: Themes or alternate style sheets • Page Only: Alternate style sheets, Content editor web part <style></style>) Step 1 Conduct Requirements Gathering Session 1 Session 2 …

11. Gathering Branding Requirements IA D FED • Gathering Branding Requirements: • Gather Pre-existing Designs and Style Guides • Websites • Colors • Fonts • Imagery • Layout • Logos • Etc. Step 1 Conduct Requirements Gathering Session 1 Session 2 …

12. Gathering Branding Requirements IA D FED • Gathering Branding Requirements: • Browser Requirements • Site Function: Liquid versus Fix width • Width: Smallest Size before Scroll. (1024 X 768) • Browser Support: IE, Fire Fox, Safari, Opera, Google Chrome • Print: Custom style for printing from site • Mobile support: View and download content from PDA, Smartphone, Etc. Step 1 Conduct Requirements Gathering Session 1 Session 2 …

13. Why create a creative brief? • What is in a creative brief? • Existing Brand/Creative • Vision & Approach • Visual Components • Accessibility Features • Why create one? • Provides written requirements about visual design • Allows designer to get official sign off of visual design requirements.

14. Create Sitemap & Navigation IA • Creation of high level sitemap & navigation Step 3 Create Site Map Identify Key Areas for IAWire Frame Design Review

15. Create Wireframes IA • Creation of Wireframes Step 4 StartWireframeDevelopment Wireframes range from high level b/w navigation and page sketches to detailed page layouts. Review

16. Avoid pitfall of “Putting lipstick on the pig”

17. Create Visual Design D • Use Photo Editor • Take Public website, reference websites, images, colors etc. • Adapt brand into SharePoint constraints • Take known elements and re-use • Draw guides • Create Folders in the layers to keep them organized • Name those layers! • Photoshop Cut and Paste • Slice out elements and save as web ready files • Use existing images for support and size Step 5 Create“Look-n-Feel” Interface Design Full color designsof key application navigation, pages, and interactions. Review

18. ~35 modified out of 2,000… • Only a hand full of images are used to support the visual building block of the site. • ~ 35 out of 2,000+

19. Tools for building the design • Cascading Style Sheet (CSS) Build • Tools Complexity

20. IE Developers Toolbar • Download: Internet Explorer Developer Toolbar

21. Where to begin? FED • Other Areas • My Site • Templates – • Team Sites • Blogs • Wiki’s • Meeting Workspaces • MS Training Center • Administrative • Central Administration • Main site areas • Top Banner • Title area / Search • Main Navigation / Actions • Quick Launch area • Body area • Web part headers • Fonts Step 7 Begin Programming of Site Design Alpha Prototype: Incomplete representation of portal structure; usually home page plus key category/ user path to give a preview of how site will function Beta Prototype: 100% complete representation of site structure; all content represented on site map completed

22. Implementation Method Options • Modify Core Server CSS File: Core.css • Applied to all sites, sub-sites, application pages, and My Sites. • Pros: • Instant Results • All Sites/pages will be branded • Cons: • All Sites/pages will be branded • Risk that service pack will override changes

23. Implementation Method Options • Modify All Core Server Master Pages: • Adding a CSS Reference to all major master page files on the server. • Application.master • Default.master • Pros: • Instant Results • All Sites/pages will be branded • Cons: • All Sites/pages will be branded • Risk that service pack will override changes

24. Implementation Method Options • Custom Site Definitions and Ref. Alternate Stylesheet: • Create Custom Site Definitions • Reference Custom CSS file in all Default.aspx pages • Reference an alternate CSS file at the top level site collection. • Pros: • Branding only applied to those sites that use those templates • Cons: • The Alternate Style sheet will have to be applied to every top level site collection • Not all system pages will be branded

25. Implementation Method Options • Custom Master Page within UI • Create custom Master page and store it in the Master Page and Page Layouts Gallery • Reference to Custom CSS file on the server • Pros: • Easily Supported • Ability to use library features (Check in/out, Versioning, Restore) • Cons: • No system pages will be branded

26. Implementation Method Options • Custom Theme • Create a custom theme and apply it to each site. • Pros: • Easy to apply • Ability to have multiple brands within environment • Cons: • This approach is defined per site • Cannot be pushed across all sites • If modified theme needs to be removed and then reapplied

27. Implementation Method Options • Alternate Style Sheet • Reference the Alternate Stylesheet at the top level site collection. • Pros: • Quick way to make simple changes to site • Cons: • This approach does not get applied when a new site is created.

28. Implementation Method Options • Content Editor Web Part • Use <Style></Style> tag within the web part to override the CSS for that page. • Pros: • Flexible and can be used on any site • Cons: • This approach only effects the page and not the whole site/collection

29. All Sites Method • Feature Staple • Create a custom site definition that references a custom master page. • That master page references the custom CSS file. • Modify the Application.Master to reference the custom CSS file for all _layouts pages.

30. Server Files & Locations • External Style Sheets • 1.) CALENDAR.CSS • 2.) CONTROLS.CSS • 3.) CORE.CSS (Main) • 4.) datepicker.css • 5.) EwrDefault.css • 6.) HELP.CSS • 7.) HtmlEditorCustomStyles.css • 8.) HtmlEditorTableFormats.css • 9.) MENU.CSS • 10.) OWSNOCR.CSS • 11.) PORTAL.CSS (Supporting) • 12.) RCA.CSS • 13.) SiteManagerCustomStyles.css • Image Folder Details • 1.) Size: 2.78 MB • 2.) Contains: 2,050 Files, 0 Folders • Folder Locations on Server • Images • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES • Styles • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES

31. My Info & Q/A • My Blog: • http://erikswenson.blogspot.com • Contact Info: • Email: erik.swenson@emc.com