ia and branding process: session 7.2 sketches to wireframes to hi-fidelity designs erik swenson sr....
TRANSCRIPT
IA and Branding Process: Session 7.2Sketches to Wireframes to Hi-Fidelity Designs
Erik SwensonSr. Practice Consultant, EMC Consulting
About this Session
Anything is possible
Roles
Design processGathering Branding RequirementsCreate Sitemap & NavigationCreate WireframesCreate Visual Design
Tools for building the design
Implementation methods options
Additional guides/references
Q/A
100 Best SharePoint Websites http://www.wssdemo.com/Pages/topwebsites.aspx
Anything is possible
Anything is possible
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
FED
Design Process: 7 Steps
Step 7Begin
Programming of Site Design
Alpha Prototype:Incomplete
representation of
portal structure;usually home
pageplus key category/
user path to give a
preview of how site
will function
Beta Prototype:
100% completerepresentation
of site structure;
all contentrepresented on
site map completed
FED
Step 6Complete
Wireframes & Interface Designs
Review
IA D
Step 5Create
“Look-n-Feel” Interface Design
Full color designsof key
application navigation,
pages, and
interactions.
Review
D
Step 4Start
WireframeDevelopment
Wireframes range from high
levelb/w navigation
and page sketches
to detailedpage layouts.
Review
IA
Step 3Create
Site Map
Identify Key Areas
for IAWire Frame
Design
Review
IA
Step 2Prioritize KeyDevelopment
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 FED
Step 1Conduct
RequirementsGathering
Session 1
Session 2
…
IA 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 1Conduct
RequirementsGathering
Session 1
Session 2
…
IA 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 1Conduct
RequirementsGathering
Session 1
Session 2
…
IA 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 <style></style>)
Step 1Conduct
RequirementsGathering
Session 1
Session 2
…
IA D FED
Gathering Branding Requirements
Gathering Branding Requirements:Gather Pre-existing Designs and Style Guides
• Websites• Colors• Fonts• Imagery• Layout• Logos• Etc.
Step 1Conduct
RequirementsGathering
Session 1
Session 2
…
IA 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 1Conduct
RequirementsGathering
Session 1
Session 2
…
IA D FED
Why create a creative brief?
What is in a creative brief?Existing Brand/CreativeVision & ApproachVisual ComponentsAccessibility Features
Why create one?Provides written requirements about visual designAllows designer to get official sign off of visual design requirements.
Create Sitemap & Navigation
Creation of high level sitemap & navigationStep 3
Create Site Map
Identify Key Areas
for IAWire Frame
Design
Review
IA
Create Wireframes
Creation of WireframesStep 4
StartWireframe
Development
Wireframes range from high
levelb/w navigation
and page sketches
to detailedpage layouts.
Review
IA
Avoid pitfall of“Putting lipstick
on the pig”
Create Visual Design
Use Photo EditorTake Public website, reference websites, images, colors etc.Adapt brand into SharePoint constraintsTake known elements and re-useDraw guidesCreate Folders in the layers to keep them organizedName those layers!
Photoshop Cut and PasteSlice out elements and save as web ready filesUse existing images for support and size
Step 5Create
“Look-n-Feel” Interface Design
Full color designsof key
application navigation,
pages, and
interactions.
Review
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) BuildTools
Visual Studio & SharePoint Designer Build themes, Custom site definitions, master pages and templates for others to use.
SharePoint Designer Change Colors, Backgrounds, Fonts, Edit CSS files, Edit Master Pages, Page Templates and content.
Browser-Based Changes Change Site Logo, Themes, Web Parts
Com
ple
xit
y
IE Developers Toolbar
Download: Internet Explorer Developer Toolbar
Where to begin?
Main site areasTop BannerTitle area / SearchMain Navigation / ActionsQuick Launch areaBody areaWeb part headersFonts
Other AreasMy SiteTemplates –
Team SitesBlogsWiki’sMeeting WorkspacesMS Training Center
AdministrativeCentral Administration
Step 7Begin
Programming of Site Design
Alpha Prototype:Incomplete
representation of
portal structure;usually home
pageplus key category/
user path to give a
preview of how site
will function
Beta Prototype:
100% completerepresentation
of site structure;
all contentrepresented on
site map completed
FED
Implementation Method Options
Modify Core Server CSS File: Core.cssApplied to all sites, sub-sites, application pages, and My Sites.
Pros:Instant ResultsAll Sites/pages will be branded
Cons:All Sites/pages will be brandedRisk 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.masterDefault.master
Pros:Instant ResultsAll Sites/pages will be branded
Cons:All Sites/pages will be brandedRisk that service pack will override changes
Implementation Method Options
Custom Site Definitions and Ref. Alternate Stylesheet:Create Custom Site DefinitionsReference Custom CSS file in all Default.aspx pagesReference 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 UICreate custom Master page and store it in the Master Page and Page Layouts Gallery Reference to Custom CSS file on the server
Pros:Easily SupportedAbility to use library features (Check in/out, Versioning, Restore)
Cons:No system pages will be branded
Implementation Method Options
Custom ThemeCreate a custom theme and apply it to each site.
Pros:Easy to applyAbility to have multiple brands within environment
Cons:This approach is defined per siteCannot be pushed across all sitesIf modified theme needs to be removed and then reapplied
Implementation Method Options
Alternate Style SheetReference 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 PartUse <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
All Sites Method
Feature StapleCreate 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 Sheets1.) CALENDAR.CSS2.) CONTROLS.CSS3.) CORE.CSS (Main)4.) datepicker.css5.) EwrDefault.css6.) HELP.CSS7.) HtmlEditorCustomStyles.css8.) HtmlEditorTableFormats.css9.) MENU.CSS10.) OWSNOCR.CSS11.) PORTAL.CSS (Supporting)12.) RCA.CSS13.) SiteManagerCustomStyles.css
Image Folder Details1.) Size: 2.78 MB2.) Contains: 2,050 Files, 0 Folders
Folder Locations on ServerImagesC:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES
StylesC:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
