Thursday, July 25th, 2013
LAYOUT: Home Page
A simplistic Home page design allows for dynamic messaging upon landing quicklu funneling users into the deeper content sections of the website
Home - 1
Home - 2
Team One WIP
Work-In-Progress from the Team One website redesign
View Project on GitHub or View Our Kitchen Sink
When viewing this page: Please keep in mind that this is all WORK-IN-PROGRESS and all creative, design and development will continue to be refined and improved upon as we move forward towards launch
Thursday, July 25th, 2013
LAYOUT UPDATE: Footer (Mobile)
Added a 'Get Directions' button
Home - 1
Thursday, July 18th, 2013
LAYOUT: Work Details - Grid Open
Details for secondary Work content display in desktop
Work - Grid Open - Default
Work - Grid Open - 2
Work - Grid Open - 3
Wednesday, July 17th, 2013
LAYOUT: Work Details
Updated design of desktop state for the Featured Case Study details page
Desktop Default
Desktop Annotations
Monday, July 15th, 2013
LAYOUT: Footer Design
Design of global footer elements for desktop and mobile states
Desktop Default - Closed
Desktop - Expanded
Mobile Default - Closed
Mobile - Expanded
Wednesday, July 10th, 2013
LAYOUT UPDATE: Contact Page
Layout for the new Contact page has been adjusted to align with 'hero image' visual approach placing the visually customized Google map full-width, at top, with contact info card overlayed on it. Mobile layout has been adjusted to reflect the revised content hierarchy and layout requirements.
Desktop Contact Page
Desktop Contact Page - HOVER
Mobile Contact Page
Monday, July 1st, 2013
LAYOUTS: The Team - MOBILE
When a guest selects any one of the 'Top 10' Featured Case Studies within the Work > Portfolio section, they will be directed to the corresponding project details page - below are the mobile layouts for that Project Detail page. Layouts will adjust based upon content (max-content layout shown here).
Basic Mobile Default
Mobile - Expanded States
Monday, July 1st, 2013
LAYOUTS: Work > Featured Case Study Details Page - MOBILE
When a guest selects any one of the 'Top 10' Featured Case Studies within the Work > Portfolio section, they will be directed to the corresponding project details page - below are the mobile layouts for that Project Detail page. Layouts will adjust based upon content (max-content layout shown here).
Basic Mobile Default
Mobile - Expanded States
Monday, July 1st, 2013
LAYOUTS: The Feed - Basic Content Layout and Breakpoints
Leveraging the grid layout, The Feed section will showcase a combination of T1-published News, Press and Thought Leadership pieces in addition to a mixture of Instagram and Twitter social content
Basic Default Layout
Tablet Layout
Mobile Layouts
Friday, June 28th, 2013
LAYOUTS: Updated 'The Team' Long Scroll Page
The team has determined that a long scroll page layout is more suitable for the design of the new Team One site so the Site Map document has been revised to reflect this sectioning of primary content rather than the creation of individual pages. This will allow for a more seamless experience, juxtaposing relevant supporting content with primary showcase elements.
The Team Default
Friday, June 28th, 2013
UPDATE: Revised Site Map
The team has determined that a long scroll page layout is more suitable for the design of the new Team One site so the Site Map document has been revised to reflect this sectioning of primary content rather than the creation of individual pages. This will allow for a more seamless experience, juxtaposing relevant supporting content with primary showcase elements.
Updated Site Map
Tuesday, June 25th, 2013
LAYOUTS: Work Section Landing Page
In-depth detailing of sort/filter functionality to be implemented in the Work, The Team & Feed website sections
Work Section Landing Page - DEFAULT:
Work Section Landing Page - ON SCROLL:
Sort/filter option headers disappear and controls are fixed top
Work Section Landing Page - DROPDOWNS OPEN:
Work Section Landing Page - FILTERED:
ANNOTATIONS: Featured Work Content
ANNOTATIONS: Sharing Curated Portfolio Content
Tuesday, June 25th, 2013
INTERACTION STUDY: Sort / Filter Controls
In-depth detailing of sort/filter functionality to be implemented in the Work, The Team & Feed website sections
Friday, June 21st, 2013
EXPLORATION: Sort / Filter Controls
Initial exploration of button, toggle and dropdown menu styling aimed toward solving the needs of Work and The Team sections
Friday, June 21st, 2013
FUNCTIONALITY: Full Screen Search
When a user selects the search button they will activate a full-screen search interaction pattern:
Animatic of the basic interaction functionality concept:
Layouts
Thursday, June 20th, 2013
UPDATED: Button Styles
After consulting with the creative team, these will be the new button styles:
Wednesday, June 19th, 2013
Leadership Page Update
LAYOUT: When a Leadership thumbnail image is hovered over, the displayed text will animate, moving upward to reveal the individual's title - this functionality is similar to that found in
FUNCTIONALITY: When a Leadership thumbnail image is hovered over, the displayed text will animate, moving upward to reveal the individual's title - this functionality is similar to that found in the new Myspace interface
Animation prototype:
As seen on the new Myspace:
Tuesday, June 18th, 2013
Exploration: Refining Button Styles
An exploration of CSS styling for primary buttons
Monday, June 17th, 2013
Specs: Hero Carousel for WORK > 'Featured Case Study' page
For the hero carousel unit on the new 'Featured Case Study' Work section page, we plan to leverage a similar carousel interaction pattern as that found on the new Apple.com landing page
Reference: Apple Landing Page Carousel
Thursday, June 13th, 2013
Exploration: Leadership Image Thumbnails - hover
A visual exploration of transitioning black and white photography to color upon user interaction with an element
(image size = 215 x 274 px)
Tuesday, June 11th, 2013
Exploration: Leadership Detail Page
A visual exploration leveraging large, full-bleed, black and white photographic style
Tuesday, June 11th, 2013
Motion: Basic Work Content Interaction Pattern
For 'basic' work content items, when selected, they will display inline, pushing other content downward in a drawer-style interaction pattern
Thursday, June 6th, 2013
Layouts: Contact Page
A basic conceptual wireframe of the content layout and design for the 'Contact' page in the new Team One website
Tuesday, June 4th, 2013
Layouts: Leadership Page
A basic conceptual wireframe of the content layout and design for the 'Leadership' page of 'The Team' section in the new Team One website
Monday, June 3rd, 2013
SELECTED: Navigation Styling
After reviewing with the team, we have selected this visual styling (below) for the primary and secondary navigation
Monday, June 3rd, 2013
EXPLORATION: Navigation Styling
Visual design exploration excercise for the primary and secondary navigation menus based on Team One branding and color guidelines
Thursday, May 30th, 2013
EXPLORATION: 'Case Study Details' Page Layout
High level exploration of content layout and hierarchy for the Work section's 'Featured Case Study' detail pages
Tuesday, May 28th, 2013
Kitchen Sink
As we are working, we have been putting together our own version of Foundation's 'Kitchen Sink' in order to establish a working style-tile of sorts
VIEW THE TEAM ONE KITCHEN SINK ›(below: screenshots)
Date info lorem ipsum
JUST A CONCEPT
High level concept for the landing page experience - EVERYTHING BELOW THE NAV IS SIMPLY FPO
Date info lorem ipsum
T1 Icon / HOME Nav Link - Hover
As a user hovers over the ‘T1 Icon’ in the primary navigation, the white ‘T’ will slide out of frame to show the ‘Home’ icon. This indicates to the user that selecting the link drives back to the global ‘Home’ page
Tuesday, May 21st, 2013
MOBILE NAVIGATION
This animation shows basic functionality for the navigation system when viewed on a mobile device
Date info lorem ipsum
MOBILE NAVIGATION DESIGNS
The 'Default', 'Open', and 'Secondary-Open' states of the mobile navigation
Alternative styling of the mobile navigation dropdown
Date info lorem ipsum
PRIMARY NAV DESIGN
The basic layout of primary navigation on mobile, tablet and destop devices.
Friday, May 24th, 2013
NAVIGATION BREAKPOINTS
This is a visualization of the responsive breakpoints we will be targeting for desktop/tablet
Thursday, May 23rd, 2013
Grid System
- Twelve (12) Column Grid
- Max-width: 1024px
Date info lorem ipsum
T1 PROPOSED SITE MAP
Work in progress architecture
Date info lorem ipsum
Sort & Filter with Isotope
This is an example of the functionality that we plan to implement for the sort/filter capabilities on
- User opens sort/filter options
- User selects sort/filter parameters
- Unrelated items disappear from view
- Remaining items reorganize to fill available area
Reference: Isotope on MetaFizzy
KICKING THINGS OFF
This will be a place where we post WIP (work-in-progress) content showcasing some of the design and development brainstorming, concepting, and, decision-making as we move forward. Although this is not a blog, like a blog, the newest content will always be found at the top of this page.
Reference: Isotope on MetaFizzy
