GigaOM
January 2012 – Ongoing
www.gigaom.com
Summary
The current GigaOM news website has typographic inconsistencies and contradictions across its various sections. The current structure of the site also does not allow for variation within the visual design that can be tailored for each section. For this reason, I thought a granular grid system should be introduced so that a) variation can be introduced into new sections and b) common elements can be grouped and shared across different sections.
I established a grid system to provide visual and functional coherency across the GigaOM news websites. According to traffic logs, users seldom arrive directly to GigaOM's homepage. Users rather go directly to specific stories linked from social media sources or from search engines. I chose to use the article template page as the basis for the construction of the grid because of its high engagement from SEO and social media referrals.
Objectives
1. Introduce visual tags to emphasize the section that the user is currently is on.
2. Introduce common widgets that promote new content discovery.
3. Standardize typography.
4. Redesign the interaction of the author / post date / # of comments tab bar in order to provide deeper and personalized author related content.
Requirements and constraints
1. The template should accommodate a minimum screen resolution of 1024x768 pixels with a live area of ~ 960 x 650.
2. The structure of the page must accommodate an IAB standard 300x250 ad unit.
3. The completed design should reflect the objective and transparent tone of GigaOM.
Sketches
Grid system
Typographic scale
Widget behavior
High fidelity mock
Thoughts
Implementing this grid system will allow GigaOM to reuse and share common elements. Implementing such a structured design will also streamline the design and development for new features. The CSS will also be simplified, thus leading to a decreased page load time.
www.gigaom.com
Summary
The current GigaOM news website has typographic inconsistencies and contradictions across its various sections. The current structure of the site also does not allow for variation within the visual design that can be tailored for each section. For this reason, I thought a granular grid system should be introduced so that a) variation can be introduced into new sections and b) common elements can be grouped and shared across different sections.
I established a grid system to provide visual and functional coherency across the GigaOM news websites. According to traffic logs, users seldom arrive directly to GigaOM's homepage. Users rather go directly to specific stories linked from social media sources or from search engines. I chose to use the article template page as the basis for the construction of the grid because of its high engagement from SEO and social media referrals.
Objectives
1. Introduce visual tags to emphasize the section that the user is currently is on.
2. Introduce common widgets that promote new content discovery.
3. Standardize typography.
4. Redesign the interaction of the author / post date / # of comments tab bar in order to provide deeper and personalized author related content.
Requirements and constraints
1. The template should accommodate a minimum screen resolution of 1024x768 pixels with a live area of ~ 960 x 650.
2. The structure of the page must accommodate an IAB standard 300x250 ad unit.
3. The completed design should reflect the objective and transparent tone of GigaOM.
Sketches
Grid system
Typographic scale
Widget behavior
High fidelity mock
Thoughts
Implementing this grid system will allow GigaOM to reuse and share common elements. Implementing such a structured design will also streamline the design and development for new features. The CSS will also be simplified, thus leading to a decreased page load time.