Wikia

Community Central

Comments55

The Wikia Grid layout

Eric! September 26, 2012 User blog:Eric!

Hello!

I'm Eric, an Interactive Designer and member of the design team here at Wikia. First, I want to say thanks! Ongoing feedback from our Wikia community helps steer us in the right direction. And second, I wanted to share some additional information about upcoming design changes that will affect each community on Wikia: The Wikia Grid.

The Grid

Here at Wikia, we have a lot of ideas; we do our very best to develop and deliver new features and improve existing tools. Our designers, developers and product team are all working together, but on different initiatives, and because we have so many different teams working on products here, we need a system to help keep things in order. These systems aid our teams in creating new modules, pages, and sections for all wikis while helping keep our design cohesive and flexible.

One of the systems we utilize is a "grid" for page design. The grid a pre-defined layout system used to form balance and consistency in the structural and visual presentation of content. We use a grid system for 3 fundamental reasons:

  • It enhances the user experience by presenting content in an aesthetically pleasing and cohesive way across the Wikia network of communities
  • It aids the design team by helping keep a consistent and harmonious layout for all site design projects
  • It helps our engineering team work more efficiently by providing a predefined page structure system for building new wiki features

Here's a visual of the base layer of our grid system:

01-grid-base

This grid system has 6 columns, each with an identical width, which make up the basic structure of each page on Wikia. Doing so creates an ideal spacial relationship for multiple page layout configurations, all with an inherent visual similarity.

03-grid-mixed-width
04-grid-mixed-width
02-grid-3col-basic

To the right are some of our layout options based on this grid.

Many websites use a grid based system to maintain a visual and structural balance. Some grids are much more complex than our 6 column grid; there are many grid systems which focus on both vertical and horizontal spacial relationships, and with more columns. For now, we feel our lean and mean (and flexible) 6 column grid will serve us quite well.

Why these dimensions?

We saw a benefit in making both the right rail and the main content area larger. Future site features and improvements will benefit from a little extra space in both content areas. In developing this grid, we weighed the pros and cons of other dimensions and concluded that going to 1030px wide would be ideal for both short and long-term site changes with the goal of improving the user experience across the network. And, we wanted to deliver these improvements sooner rather than later; so we struck a balance between user experience and length of time to implementation. So, rather than gradually introducing this grid system as we updated features we choose to completely move to the grid system at once. This also helps you as you are working on your community's layout and design - you'll only need to make changes once rather than multiple times as individual features are moved to the grid.

We understand these changes are impactful and require some work for the community. Rest assured these decisions were made with the community in mind. We'll be here to help with this transition.

Around Wikia's network

Random Wiki