Apr 09
Viget Labs - The Blog Series
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 (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 (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 (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 (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?
Moodboards
Grid System
Greybox
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 Advance: Early comp of the Advance nav, without author photos.
Early Engage: A drearier version of Viget Engage, from the beginning phase.
Early Extend: The Viget Extend design before verbal sketching (writing out style changes in a text file)
Early 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: Viget.com pre-polishing. The layout went unchanged, but the homepage went through several style iterations.
Comp 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.
Engage 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 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 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.
Event: FITC Toronto 2008 Free MCTE Component Giveaways
Comments
There are 38 comments (+Add)
Post Your Comments
Loading ...
38 Min Thu http://www.flashmo.com
July 11th, 2008 at 11:45 pm
Great article, wish to see more like this, inspiring.
37 Bas Brand http://www.brandyourbrand.nl
July 2nd, 2008 at 7:40 am
Inspirational.
Let us know if this concept boosts blog visitors and business…
36 sanjay http://www.sanjayrout.com
June 25th, 2008 at 4:50 am
Welcome to Sanjayrout.com. The website is well known for its numerous invaluable work i.e. Website Design, SEO Analysis, Ecommerce Solution, Shipping Returns,Content Management Systems, Logo Design & 2d flash animation, what it provides its users/visitors. Through its various fortifying as well as par excellence services, Sanjayrout.com has been delighting its visitors that too with utmost zest. All the quintessential websites shown on Sanjayrout.com are a result of real life hardworking by Mr. Sanjay Rout.
For a long time, Mr. Sanjay Rout has been enriching their experience in the same field. Now, Mr. Sanjay has become an indubitable winner in the field and now, carving niche by touching new heights.
Additionally, Sanjayrout.com is aimed at providing most exhilarating Websites sharing experience at very economical prices. Sanjayrout.com incorporates humongous hi-tech enabled software that further enables the website to provide quintessential searching, Currency Converter etc
35 Markup Factory http://www.markupfactory.com
June 10th, 2008 at 4:47 pm
Ever since I met Rob from Viget at SXSW08, I’ve been an admirer of their work. Congrats on everything! Also, a very nice write up and interview.
34 Strike http://plixid.com
June 10th, 2008 at 8:13 am
Thats cool, was nice to visit the blogging site. I really think there design blog is amazing. Might help with some of my future work!
33 Community Sites http://www.gigaturn.com
June 1st, 2008 at 7:37 am
Useful tutorials for designers, who are working on community sites!
32 Patrick Algrim http://hellyeahdude.com
May 23rd, 2008 at 11:03 am
I am wondering why the grid is off. If you look at the “grid on” the menu “blog” doesn’t fit into the grid. Also, the gutter is suppose to be your “padding.” So there really shouldn’t be any space once you start a column — see the entire right side of the “grid on” image. I think this is border-line mis-use of the of the grid system. How do others feel about that?
31 Paintworkz Web Design http://www.paintworkzstudio.co.uk
May 12th, 2008 at 1:54 am
This is truly inspirational work. Their sites are too fresh and very unique. it is simple awesome
30 retratos http://www.retratex.com
May 9th, 2008 at 1:15 pm
Inspirational stuff no doubt, great company
29 Web Design Hobart http://www.kingsdesign.net
May 7th, 2008 at 4:32 am
Great write up and a good company too.