Viget Labs, a web development firm based outside of Washington, have been in the industry since 1999. With a team of 30 people, Viget Labs sure has a lot to blog about. Instead of writing everything on one massive blog, they separate their blogs into four divisions: Advance, Inspire, Extend, and Engage. Each blog has unique topics and design theme that are nicely wrapped together. I like them so much that I featured all their blogs on Best Web Gallery. In this article, Viget Labs is going to share their internal design process of the blog series with us. Don’t miss the insider tips!

Nick: Could you tell us more about your company/team?

Viget: Viget Labs is a web firm based outside of Washington, DC. Since 1999, we’ve been building websites for start-ups (like Squidoo and Odeo) and offline businesses, doing work like UI, custom development, and online marketing. Viget’s evolved from a few people in a basement to a 30-person team with two offices (Falls Church, VA, and Durham, NC), and four major "labs": strategy, design, development, and marketing.

Nick: What are the purposes of the blog series, since there is a corporate blog already? Are they just for fun, or strictly for marketing purposes?

Viget: From the beginning, we’ve been very community-focused; our new office space was even built to handle local events like Barcamp and the DC Design Talks. The blogs are an extension of this thinking. We wanted our team to be able share their insights on specific topics with specific communities. The corporate blog was too general for heavy-duty stuff like Actionscript and analytics, so we split it up by lab. Now, the developers (for example) can blog about Rails plugins more fully knowing their audience is comprised mostly of other developers.

Nick: The blogs seem to have similar structure, but very unique design. Could you tell us about the concepts behind the series?

Viget: The project actually began with the idea that the marketing lab needed its own blog, but as the design team researched marketing-related sites, we started wondering if each lab could benefit from the same mentality. So, from there we tried to work with a loose metaphor on each blog and use style elements that might be more familiar to the unique audiences.

Advance

Advance (Strategy): Since "web strategy" is such broad and daunting category, we wanted the site to look like a coffee shop: a casual place where team members can sketch out high-level ideas and chat with the community.

Inspire

Inspire (Design): The visuals were influenced by favorites we found in CSS galleries. We wanted something with substantial white space, non-"2.0" elements, and elegent type. We settled on the sunrise/hikers illustration to convey an air of discovery.

Extend

Extend (Development): We wanted to give the dev team something fun to set it apart, so the "under-the-surface" metaphor (mole and all) seemed like a good fit. We also built in custom styles for code blocks, and a syntax highlighter for laying out more complex code.

Engage

Engage (Marketing): The marketing team is all about solid, measurable results, so the design incorporates scientific elements with a shinier, modern edge. We also wanted to highlight the four aspects of web marketing (discovery, evaluation, action, and return) so we designed little icons for the footer, which they’ve now begun using in presentations.

Nick: What was the design process like?

moodboardsMoodboards
Grid SystemGrid System
Greybox CompGreybox

Viget: We began by creating moodboards and logo ideas for a standalone marketing blog. Once the project expanded to four blogs, we went back and wrote directions for all four looks to ensure they were visually distinct but considerate of our goals in engaging and facilitating lab-area-specific discussions.

The designs were built structurally at first, in black-and-white comps with 16-column grids. An early "Advance" comp with Napoleon in the header (don’t ask) was scrapped, but a lot of elements went on to support the Viget.com design.

Once we got to a certain point with the blogs, we continued making "verbal sketches," which meant writing stylistic tweaks and notes in text files instead of just playing around in Photoshop. This helped us get the most bang for our Photoshop time and contributed to lots of the best details (the team illustrations on Inspire, the single-pixels stripes on Engage, the mole on Extend). We’d spend a few minutes casually looking at the comps, compiling and deleting some notes, and then make the changes once we were happy with the direction.

For the main site (viget.com), the process was more like working with a client. We put a lot of energy into the wireframes, trying to give a mix of information about the the clients we’ve worked with, the work we’ve done, and the blogs we contribute to. We put together two comps over a couple of days, chose one, and worked on designing and layout out interior pages simultaneously. A project manager volunteered to handle the awesome photos, and our flash guy put SayViget.com together so we could link to it from the About Page.

Early AdvanceEarly Advance: Early comp of the Advance nav, without author photos.

Early EngageEarly Engage: A drearier version of Viget Engage, from the beginning phase.

Early ExtendEarly Extend: The Viget Extend design before verbal sketching (writing out style changes in a text file)

Early InspireEarly Inspire: An alternate treatment of the Inspire header, somewhat inspired by ImaginaryFoundation. The designer preferred this version, but now realizes he was so, so wrong.

Comp 1Comp: Viget.com pre-polishing. The layout went unchanged, but the homepage went through several style iterations.

Comp 2Comp Greybox: The greybox (see link) for the comp we didn’t go with. This comp emphasized the designs well, but buried the Services info a little.

MoodboardsEngage Moodboards: The verrrrrry beginning, three moodboards for a standalone Viget Engage site. After the far left one was selected, we went back to the drawing board to produce all four blogs.

Engage NotesEngage Notes: A sample of the kind of style notes that moved the comps from these early versions to the final version at Viget.com.

Viget Extend GridViget Extend Grid: The Extend blog as it spent most of its time; in B&W with the grid on.

Nick: What platform does the site use?

Viget: The whole thing’s built on ExpressionEngine, which made it a snap to reuse pieces from the blogs, combine feeds from blogs into team pages, and make the work sortable by category, without needing to grab developers for help (although they still helped us with the big stuff, like the massive import…we love you, dev lab!).

We’ll be posting more tips on how the EE setup over at www.viget.com/inspire in the next couple of weeks, so if designers just getting into EE have any questions, we’d love to hear from them and help out.

Nick: Finally, thanks to Viget Labs for their valuable time.

70 Comments

1 2 3 4
  1. Advice SMS
    Aug 6, 2010 @ 6:59 am

    its really very nice and informative posting thanks for sharing this with us..

    Reply

  2. black celebs
    Aug 10, 2010 @ 1:39 pm

    Sign: wdpad Hello!!! nmrnw and 6899hgunnyuhss and 5142 : Sorry, what did you mean?? A??

    Reply

  3. cheap textbooks, user
    Nov 13, 2010 @ 11:50 am

    i really appreciate the way you high light some of the most important facts and figure on Viget Labs – The Blog Seriescheap textbooks is also following 2.0 standards.. i have used all the standards which i knew may be it is lacking some thing… can anyone suggest me what should i do to improve it more..
    thanks

    Reply

  4. Juno Mindoes
    Dec 23, 2010 @ 11:00 pm

    The white iphone 4 hardware design hasn’t changed from the one we already knew about. It uses the same materials as the prototype: Black glass and stainless steel rim.

    Reply

  5. Henry Peise
    Dec 24, 2010 @ 9:24 pm

    Moving on to a even worse conditions. I went inside a wardrobe and shot these photos from white iphone 4 during very poor lighting conditions.

    Reply

  6. altın çilek
    Feb 2, 2011 @ 7:15 am

    one word: amazing!!! thanks for sharing

    Reply

  7. complex 41
    Aug 4, 2011 @ 9:48 am

    These are really stunning, there are even some sites that are new to me. All the colour schemes complex 41are definatly brave but I really think they work to make the sites eye catching and engaging.

    Reply

  8. yemek tarifleri
    May 2, 2012 @ 1:05 pm

    one word: amazing!!! thanks for sharing

    Reply

  9. yates en Ibiza
    Jul 27, 2012 @ 12:41 pm

    The Blog Seriescheap textbooks is also following 2.0 standards.. i have used all the standards which i knew may be it is lacking some thing… can anyone suggest me what should i do to improve it more..

    Reply

  10. DymoLabels
    Jun 1, 2013 @ 9:02 am

    hi
    i really like this post
    thanks for sharing

    Reply

1 2 3 4

Leave a Reply