{"authorId":"1","title":"Design Share","slug":"design-share","postDate":1231468779,"expiryDate":null,"enabled":"1","fields":{"2":"<p>I had the pleasure of being invited to <strong>Design Share<\/strong> at <a href=\"http:\/\/viget.com\/\">Viget Labs<\/a> Wednesday night. The idea of the event was that 6 presenters would each give a 5 minute presentation on design, and then there was a question and answer period. It was especially great since I am not really a designer. Always great to learn new things.<\/p>\n<!--more-->\n\n<h2><a href=\"http:\/\/www.brian-talbot.com\/\" class=\"inline\">Brian Talbot<\/a> National Geographic<\/h2>\n<p>Brian started the night off by discussing the process of bringing the National Geographic <a href=\"http:\/\/www.thegreenguide.com\/\">Green Guide<\/a> online. It was quite an undertaking since they were taking a print publication and creating a supporting website.<\/p>\n<p>Usually, something gets lost in translation going from print to the web. So, they wanted to still have these <strong>interesting layouts and help tie in the site to the printed collateral<\/strong>. They also wanted to get the community involved in providing information and commentary.<\/p>\n\n<p>I think a lot of the screenshots that he showed us are not in production yet, but they looked great. There were charts, information organization in a sensible manor, and nice simple layouts.<\/p>\n\n<h2><a href=\"http:\/\/www.thirstyinteractive.com\/\" class=\"inline\">Jay Moore<\/a> Thirsty Interactive<\/h2>\n<p>Next, Jay discussed his &ldquo;<strong>Papa Bear, Mama Bear, &amp; Baby Bear<\/strong>&rdquo; approach to mood boards. The example he used was from his experience in building the mood boards for the <a href=\"http:\/\/www.bered.com\/\">AOL Red<\/a> redesign.<\/p>\n\n<h3>Papa Bear Mood Board<\/h3>\n<p>This is the &ldquo;safety&rdquo; board. It&rsquo;s comfortable because it was similar to the previous design. They wanted to show that they incorporated elements to meet the goals of the project.<\/p>\n\n<h3>Mama Bear Mood Board<\/h3>\n<p>With this board, they do not expect it to be chosen. It&rsquo;s edgier and purposely a little bit too far over the top. The idea of this board is that it will help to generate thought and ideas.<\/p>\n\n<h3>Baby Bear Mood Board<\/h3>\n<p>This board is kind of the best of the Mama &amp; Papa bear boards. It is that happy medium. It has the familiar feel of the Papa bear board, but that edginess that will help to cater to the teen audience.<\/p>\n\n<p>Of course, the final decision was to use elements from each board.<\/p>\n\n<p>The most interesting part of this talk was that <strong>real design elements were actually worked into the mood boards<\/strong>. I haven&rsquo;t seen too many mood boards, but all of the ones I had seen were very abstract. This was a nice change.<\/p>\n\n<h2><a href=\"http:\/\/www.ericlohman.com\/\" class=\"inline\">Eric Lohman<\/a> AKQA<\/h2>\n<p>Eric had the opportunity to help re-brand and redesign the <a href=\"http:\/\/www.nhl.com\/\">NHL<\/a> website. Before his company was involved, the NHL had no real brand; they had all of these different banners with different treatments of their logo. They helped to standardize the logo and provide a simple system for expanding it.<\/p>\n\n<p><img src=\"http:\/\/trevordavis.net\/images\/content\/2009\/01\/nhl-team-logos.gif\" alt=\"NHL Team Logos\" width=\"220\" height=\"220\" class=\"leftSide pullLeft col4\" \/>So AKQA developed mood boards, and <strong>the entire design concept was inspired by one image: black ice<\/strong>. This is where the dark concept came from. It really gives the site a sleek look, and it makes the large action shots really pop.<\/p>\n\n<p>Another difficult task that they encountered was dealing with the teams logos. They were all odd shaped and nothing tied them all together. They decided to do some intense cropping to gain consistency between the logos.<\/p>\n\n<p>Finally, Eric talked about adding more interactivity to the site. You can see game highlights, watch games live, and even look through an enormous photo gallery. The new NHL site is a tremendous design success.<\/p>\n\n<h2><a href=\"http:\/\/caviarfrenchfries.tumblr.com\/\" class=\"inline\">Ari Kushimoto<\/a> CaviarFrenchFries <\/h2>\n<p>Ari was tasked with developing 3 mood boards for an intranet that had a Web 2.0 feel (yuck, I hate saying that). Of course she had a tight deadline. This is where she found that her bookmarking service really paid off. <strong>All of that time she spent bookmarking cool sites and ideas really paid off and saved time<\/strong>.<\/p>\n\n<p>She took screenshots, organized into different folders, and then got started on the mood boards. She setup a consistent grid for the boards, and this made it easier to swap things in and out.<\/p>\n\n<p>There was some good discussion afterward about good tools that help to organize screenshots: <a href=\"http:\/\/www.realmacsoftware.com\/littlesnapper\/\">LittleSnapper<\/a> and <a href=\"http:\/\/derailer.org\/paparazzi\/\">Paparazzi<\/a><\/p>\n\n<h2><a href=\"http:\/\/www.robsoule.com\/\" class=\"inline\">Rob Soul&eacute;<\/a> Viget Labs<\/h2>\n<p>Rob talked about the Viget design process. The project begins by sending a couple of surveys to the client. The surveys ask some abstract questions like &ldquo;What kind of car would your company be&rdquo; and &ldquo;What magazine(s) describe your company&rdquo;. These surveys help the client to focus on their thoughts of their brand and <strong>help to give the designers a better idea of what the client is looking for<\/strong>.<\/p>\n\n<p>Once a project is ready to be designed, a lead designer is assigned the project, and they sit down with 2 other designers. They discuss 3 directions that they want to go in and discuss elements that they want to include in the mood boards. While this is going on, the user experience designer is working on the wireframes.<\/p>\n\n<p>One thing that I thought was really interesting was that they discuss specific elements to add to the mood boards. So for example, a submit button for a form, a headline, and the navigation. While sometimes they also do abstract mood boards, I think <strong>it seems more useful to real elements<\/strong> that you would see on a site.<\/p>\n\n<h2><a href=\"http:\/\/sixtwothree.org\/\" class=\"inline\">Jason Garber<\/a> Mixx<\/h2>\n<p>When Jason used to work at AOL, he was involved in creating <a href=\"http:\/\/ficlets.com\/\">Ficlets<\/a> which is basically an online community for short story writers. It became popular relatively quickly, and they had a solid community. A few years later&hellip;Jason and the others who helped to create Ficlets no longer work at AOL, and suddenly, AOL decided they are going to shut down Ficlets.<\/p>\n<p>It is not really clear what the reasoning is, basically AOL just sucks. Well, Jason and the others who created it didn&rsquo;t want the site to go away. It was successful and had a solid community. So Jason and friends decided to basically recreate it.<\/p>\n<p>This is quite an opportunity for anyone creating a website. <strong>They were able to examine the way that users were using Ficlets and found some ways to improve it<\/strong>. They are facing some tough decisions trying to determine what to do with past Ficlets&rsquo; stories and the community. Somehow, they need to transport the community from Ficlets to <a href=\"http:\/\/ficly.com\/\">Ficly<\/a>, which will be the new home starting on January 15th.<\/p>\n\n<h2>Conclusion<\/h2>\n<p>It was very interesting to hear about the process and experience of so many talented people. I think the format of the 5 minute presentation also helped to focus the discussion. All in all, it was a good time.<\/p>","14":{"old_id":{}}}}