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

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

100 Best SharePoint Websites Anything is possible

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 D FED

Design Process: 7 Steps Step 7 Begin Programming of Site Design 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 FED Step 6 Complete Wireframes & Interface Designs Step 6 Complete Wireframes & Interface Designs Review IA D D Step 5 Create “Look-n-Feel” Interface Design Step 5 Create “Look-n-Feel” Interface Design Full color designs of key application navigation, pages, and interactions. Review D D Step 4 Start Wireframe Development Step 4 Start Wireframe Development Wireframes range from high level b/w navigation and page sketches to detailed page layouts. Review IA Step 3 Create Site Map Step 3 Create Site Map Identify Key Areas for IA Wire Frame Design Review IA Step 2 Prioritize Key Development Iterations Step 2 Prioritize Key Development Iterations 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 … IA D D FED Step 1 Conduct Requirements Gathering Step 1 Conduct Requirements Gathering Session 1 Session 2 … IA D D FED

Gathering Branding Requirements 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 Step 1 Conduct Requirements Gathering Session 1 Session 2 … IA D D FED

Gathering Branding Requirements 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 Step 1 Conduct Requirements Gathering Session 1 Session 2 … IA D D FED

Gathering Branding Requirements 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 ) Step 1 Conduct Requirements Gathering Step 1 Conduct Requirements Gathering Session 1 Session 2 … IA D D FED

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

Gathering Branding Requirements 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 Step 1 Conduct Requirements Gathering Session 1 Session 2 … IA D D FED

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.

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

Create Wireframes Creation of Wireframes Step 4 Start Wireframe Development Step 4 Start Wireframe Development Wireframes range from high level b/w navigation and page sketches to detailed page layouts. Review IA

Avoid pitfall of “Putting lipstick on the pig”

Create Visual Design 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 Step 5 Create “Look-n-Feel” Interface Design Full color designs of key application navigation, pages, and interactions. Review D D

~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+

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

IE Developers Toolbar Download: Internet Explorer Developer ToolbarInternet Explorer Developer Toolbar

Where to begin? Main site areas Top Banner Title area / Search Main Navigation / Actions Quick Launch area Body area Web part headers Fonts Other Areas My Site Templates – Team Sites Blogs Wiki’s Meeting Workspaces MS Training Center Administrative Central Administration Step 7 Begin Programming of Site Design 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 FED

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

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

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

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

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

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.

Implementation Method Options Content Editor Web Part Use 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

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.

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

My Info & Q/A My Blog: Contact Info: