[et_pb_section admin_label=”section” background_color=”rgba(0,0,0,0.65)” inner_shadow=”off” parallax=”on” background_image=”http:\/\/exciteddesigns.com\/wp-content\/uploads\/2016\/08\/SQMHero.jpg” transparent_background=”off” allow_player_pause=”off” parallax_method=”on” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off” custom_padding_last_edited=”off|desktop”][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” padding_mobile=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” column_padding_mobile=”on”][et_pb_column type=”4_4″][et_pb_divider admin_label=”Divider” color=”#ffffff” show_divider=”off” height=”200″ divider_style=”solid” divider_position=”top” hide_on_mobile=”on”] [\/et_pb_divider][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=”section” background_color=”#3399ff” inner_shadow=”off” parallax=”on” transparent_background=”off” allow_player_pause=”off” parallax_method=”off” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off” custom_padding_last_edited=”off|desktop”][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” padding_mobile=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” column_padding_mobile=”on” custom_padding=”0px|||”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”dark” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=”section” fullwidth=”off” specialty=”off” inner_shadow=”off” parallax=”off”][et_pb_row admin_label=”row”][et_pb_column type=”1_2″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
At this point I had been working with the Services Business Desk and their affiliated groups for the better part of 3 years. My goal was simple;\u00a0staying\u00a0within Microsoft’s stringent guidelines, make the Services Quality & Me site stand out. But I also needed to take into account the other groups that would come under the umbrella that was Services Quality & Me.<\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
With all of that in mind I started out with a goal to simplify the navigation to the main areas visitors ventured to. For this I decided on\u00a0a right hand column\u00a0to be used as a secondary navigation while also serving up key information\/links to calendars and resources. This left 2\/3 of the page to be used as main content. Working within the brand guidelines and the constraints of SharePoint Online I got to work designing.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=”Section” fullwidth=”off” specialty=”off” transparent_background=”off” background_color=”#3399ff” allow_player_pause=”off” inner_shadow=”off” parallax=”off” parallax_method=”off” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off”][et_pb_row admin_label=”Row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”dark” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
The key to staying withing guidelines while\u00a0working with some features SharePoint does very well was keeping the design clear of clutter.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=”Section” fullwidth=”off” specialty=”off” transparent_background=”off” background_color=”rgba(51,153,255,0)” allow_player_pause=”off” inner_shadow=”off” parallax=”off” parallax_method=”off” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off”][et_pb_row admin_label=”Row”][et_pb_column type=”2_3″][et_pb_image admin_label=”Image” src=”http:\/\/exciteddesigns.com\/wp-content\/uploads\/2016\/08\/SQM2013-1024×694.png” alt=”SQM Landing Page” title_text=”SQM Landing Page” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [\/et_pb_image][\/et_pb_column][et_pb_column type=”1_3″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
The landing page sets the stage for the rest of the site. Large real estate for content on the left, and a simple structure on the right. The right-hand column always starts with sub-navigation, flowing into content related to the current page.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Row”][et_pb_column type=”1_3″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
Here I leverage the out of box calendar webpart (webparts make up most SharePoint web pages). Using this feature lets the teams keep calendars that are visible online and can easily be synced with their Outlook Calendars as well.<\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_3″][et_pb_image admin_label=”Image” src=”http:\/\/exciteddesigns.com\/wp-content\/uploads\/2016\/08\/calendars2013.png” alt=”SQM Team Calendars” title_text=”SQM Team Calendars” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”right” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Row”][et_pb_column type=”2_3″][et_pb_image admin_label=”Image” src=”http:\/\/exciteddesigns.com\/wp-content\/uploads\/2016\/08\/Team-Sites2013.png” alt=”SQM Team Sites” title_text=”SQM Team Sites” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [\/et_pb_image][\/et_pb_column][et_pb_column type=”1_3″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
The events below leverage SharePoint 2013’s new Blog Site Template with some tweaks to make them more visually appealing.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=”Section” fullwidth=”off” specialty=”off” transparent_background=”off” background_color=”#3399ff” allow_player_pause=”off” inner_shadow=”off” parallax=”off” parallax_method=”off” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off”][et_pb_row admin_label=”Row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”dark” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
Once the first few pages were complete the rest of the design started to fall into place.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row”][et_pb_column type=”1_3″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
This is a\u00a0fairly heavily used form. The key here was to format the form in a way that was intuitive but didn’t use up too much vertical real estate. I wanted to make sure the results could be seen below the form on submit.<\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_3″][et_pb_image admin_label=”Image” src=”http:\/\/exciteddesigns.com\/wp-content\/uploads\/2016\/08\/ESAPOnline2013_wizard.png” alt=”ESAPOnline Wizard” title_text=”ESAPOnline Wizard” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”right” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Row”][et_pb_column type=”2_3″][et_pb_image admin_label=”Image” src=”http:\/\/exciteddesigns.com\/wp-content\/uploads\/2016\/08\/SBD_HUB_Documents2013.png” alt=”The HUB” title_text=”The HUB” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [\/et_pb_image][\/et_pb_column][et_pb_column type=”1_3″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
The HUB is a repository of all the knowledge across all of the regions of the world (according to the Services Business Desk). The navigation was key here as it dives users into all the documents and templates they may need to find for day to day tasks.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=”Section” fullwidth=”off” specialty=”off” transparent_background=”off” background_color=”#3399ff” allow_player_pause=”off” inner_shadow=”off” parallax=”off” parallax_method=”off” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off”][et_pb_row admin_label=”Row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”dark” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n
The best\u00a0web designs start with\u00a0solid plans.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=”Section” fullwidth=”off” specialty=”off” transparent_background=”off” background_color=”rgba(51,153,255,0)” allow_player_pause=”off” inner_shadow=”off” parallax=”off” parallax_method=”off” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off”][et_pb_row admin_label=”Row”][et_pb_column type=”1_2″][et_pb_image admin_label=”Image” src=”http:\/\/exciteddesigns.com\/wp-content\/uploads\/2016\/08\/sqm-home.png” alt=”SQM Landing Page Wireframe” title_text=”SQM Landing Page Wireframe” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″][et_pb_image admin_label=”Image” src=”http:\/\/exciteddesigns.com\/wp-content\/uploads\/2016\/08\/esaponline-wizard.png” alt=”ESAPOnline Team Page Wireframe” title_text=”ESAPOnline Team Page Wireframe” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”right” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=”section” fullwidth=”off” specialty=”off” background_color=”#f7f7f7″ inner_shadow=”off” parallax=”off”][et_pb_row admin_label=”row”][et_pb_column type=”4_4″][et_pb_cta admin_label=”Call To Action” title=”Do you need a more cohesive brand and site?” button_url=”mailto:chris@exciteddesigns.com” button_text=”Get In Touch” use_background_color=”off” background_color=”#2ea3f2″ background_layout=”light” text_orientation=”center” url_new_window=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_button=”off” button_letter_spacing=”0″ button_use_icon=”default” button_icon_placement=”right” button_on_hover=”on” button_letter_spacing_hover=”0″] [\/et_pb_cta][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
[et_pb_section admin_label=”section” background_color=”rgba(0,0,0,0.65)” inner_shadow=”off” parallax=”on” background_image=”http:\/\/exciteddesigns.com\/wp-content\/uploads\/2016\/08\/SQMHero.jpg” transparent_background=”off” allow_player_pause=”off” parallax_method=”on” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off” custom_padding_last_edited=”off|desktop”][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” padding_mobile=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” column_padding_mobile=”on”][et_pb_column type=”4_4″][et_pb_divider admin_label=”Divider” color=”#ffffff” show_divider=”off” height=”200″ divider_style=”solid” divider_position=”top” hide_on_mobile=”on”] [\/et_pb_divider][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section admin_label=”section” background_color=”#3399ff” inner_shadow=”off” parallax=”on” transparent_background=”off” allow_player_pause=”off” parallax_method=”off” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” make_equal=”off” use_custom_gutter=”off” custom_padding_last_edited=”off|desktop”][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” […]<\/p>\n","protected":false},"author":1,"featured_media":26688,"comment_status":"open","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"project_category":[6],"project_tag":[18,17],"class_list":["post-26677","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-web-design","project_tag-color-exploration","project_tag-hi-fidelity-mockups"],"_links":{"self":[{"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=\/wp\/v2\/project\/26677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=\/wp\/v2\/project"}],"about":[{"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26677"}],"version-history":[{"count":15,"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=\/wp\/v2\/project\/26677\/revisions"}],"predecessor-version":[{"id":26765,"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=\/wp\/v2\/project\/26677\/revisions\/26765"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=\/wp\/v2\/media\/26688"}],"wp:attachment":[{"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26677"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=%2Fwp%2Fv2%2Fproject_category&post=26677"},{"taxonomy":"project_tag","embeddable":true,"href":"http:\/\/exciteddesigns.com\/index.php?rest_route=%2Fwp%2Fv2%2Fproject_tag&post=26677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}