Viget Inspire

Sometimes you need to get a bunch of ideas in a short amount of time. Its not always easy for one person alone (though easier for some than others). Collaboration is key whether it be collectively or individually within a working group of people. Team design is one of the benefits of working in an agency or inhouse studio.

In borrowing from an idea that originally began in partnership with some of my former colleagues, the design team at Viget recently embarked on our first Design Flash Mob (DFM). You may have heard the term 'flash mob' to describe wacky collaborative events such as massive pillow fights where a large group of people gather in a single place, fight each other with pillows and leave with a pile of feathers on the ground as a residual reference to the event. The basic steps of these events are as follows:

1. Plan and promote in advance of the event. What do you hope to accomplish? When and where should this take place?
2. Gather at the designated time and place.
3. Act upon on what you set out to do.
4. Disperse and reflect on the madness.

In the spirit of design synergy we can take these steps and use them to collaborate quickly on things like logo designs, t-shirt ideas or rethinking user experience problems. Plan to do something about a week out. Think ahead about what you might want to create. When the time comes you'll be ready to jump in and start designing in a rapid but refined way. Take a morning or afternoon to hold the event. At the end, take time to talk about it and share different perspectives on working under pressure.

Another important aspect of a design flash mob is that it should not be treated as a competition. Even if one design is to be chosen it should be a democratic effort including those who played a part in the event. Benefiting the greater good should be the goal. In effect, the whole is greater than the sum of the parts.

One great place to start with a DFM is to have several people participate in designing desktop wallpapers. They're simple to design in a short period of time and have no production costs associated with them. This is where we started on our first Viget DFM. The assignment was simple. Take an afternoon (roughly 4 hours) to assemble one or more desktop wallpapers within the given time and include the Viget brand no matter how big or how small. Everything else was left up to the designer's discretion. Planning ahead was ok but no one was allowed to begin until the start of the event. Additionally, you didn't have to be a designer to participate. Our design team consists of UX designers, visual designers and production specialists with a wide range of talents and skills. How you work within the guidelines is all that matters.

Continue reading "How to Create Design Concepts in Rapid Fashion"

Leave a comment ( 14 )

Feeds are the easiest way to view updated content, whether it's through a feed reader or outputted onto a web site. There are many different types of feeds, such as RSS or Atom, and many different ways display them on your site, such as using MagpieRSS to parse an RSS feed in PHP. However, you can also display feeds on your site using JavaScript, so in this post I'm going to be talking about a feed format called JSON and how you can use JavaScript to parse it out and display it.

JSON (JavaScript Object Notation) is a data format that is easy to read and language-independent, meaning you can parse it using any programming language. Both Yahoo! and Google have been offering data from their sites in JSON format for the past couple years. A good example of this is Flickr. Anyone with a Flickr account can access a JSON feed of their photos.

Finding Your Feed

If we go to the Viget Inspire collection on Flickr, we can click on the feed (orange button, bottom of the page) and bring up a RSS 2.0 feed of all the images in our pool. Flickr's API has many other feed formats, so I suggest going to their site to read up on it because there are a lot of things you can do. If you want the JSON version of the feed, change "format=rss_200" at the end of the query string to "format=json" so that your URL looks like this:

Continue reading "Pulling Your Flickr Feed with jQuery"

Leave a comment ( 30 )

Working with HTML emails can be tough with all the various email clients out there. Just ask Jim Basio, who wrote a great post on our blog with some really useful resources. Recently I was working on an HTML email that had a lot of images, and for some reason Hotmail displayed the images with weird spacing. Let's pretend the picture below is actually three separate images in an email viewed in Hotmail:

As you can see, there is a gap between the images. We can fix this with one simple addition to the image style with CSS:

<img src="image.jpg" alt="Viget Logo" style="display: block;" />

And that's it. Just put "display: block" on any image in your HTML. I put it inline because there are still issues with email clients reading the <style> element (for example, Hotmail). Your images should now be in the right place:

The good news is that it doesn't affect the way images are displayed in other email clients. If you have other useful tips for HTML emails let us know!

UPDATE: This problem only seems to happens in Hotmail when using Firefox (although I feel like I saw it in IE before...). Another good tip, from a reader named Jurre-Jan Smit, was that you can just put the code in the <style> element in the <head> (for Live Hotmail) and <body> (for old school Hotmail) so that you don't need to put it inside every image. I just tend to use inline styles in emails because they're more specific. I've found Campaign Monitor's guide on CSS support in emails very useful for answering compatibility questions. Keep the useful tips coming!

Leave a comment ( 13 )

I'm a huge jQuery fan; there's no hiding that. For me, a designer, there is no easier JavaScript library to use and learn. I've been leaning on jQuery to do my heavy lifting for a while now, and it continues to blow me away almost every time. With each passing release, the library just gets better.

In jQuery's 1.2 release, we saw a big update to animate() function. Previous to 1.2, you could only animate absolutely positioned elements, but now the function supports most anything you could need. This includes padding, margin, font-size, relatively positioned elements, width, height, and borders. Since 1.2, I've been tinkering with numerous different examples. Below are three of my most recent. I hope you find them informative and/or helpful.

• A Tab!
• Awesome Tab 2
• Tabulicious Tab 3

+ See Code

var navDuration = 150; //time in miliseconds
      var navJumpHeight = "0.45em";

      $('#nav1 li').hover(function() {
          $(this).animate({ top : "-="+navJumpHeight }, navDuration);            
      }, function() {
          $(this).animate({ top : "15px" }, navDuration);
      });

• You need a mac
• Do it
• I really like football and the redskins

(Click a link!)

+ See Code

$('#nav_move').css({ 
        width: $('#nav2 li:first a').width()+20, 
        height: $('#nav2 li:first a').height()+20 
      });
      $('#nav2 li:first a').addClass('cur');
      
      $('#nav2 a').click(function() {
        var offset = $(this).offset();
        var offsetBody = $('#content').offset(); //find the offset of the wrapping div    
        $('#nav_move').animate(
          { 
            width: $(this).width()+20, 
            height: $(this).height()+20, 
            left: (offset.left - offsetBody.left) 
          }, 
          { duration: 350, easing: 'easeInOutCirc' }
        );
        $('.cur').removeClass('cur');
        $(this).addClass('cur');
        return false;
      });

• Some info
• Go buy a mac
• You won't regret it

+ See Code

var fadeDuration = 150; //time in milliseconds
      
      $('#list1 li a').hover(function() {
        $(this).animate({ paddingLeft: '30px' }, fadeDuration);
        $(this).children('span').show().animate({ left: -5 }, fadeDuration);
      }, function() {
        $(this).animate({ paddingLeft: '15px' }, fadeDuration);
        $(this).children('span').animate({ left: -35 }, fadeDuration).fadeOut(fadeDuration);          
      });

For any further reading on jQuery, check out:

• Learning jQuery
• jQuery Crash Course
• jQuery for Designers
• jQuery Tutorials for Designers

Leave a comment ( 21 )

According to appleinsider.com, “Adobe has started development of a Flash player suitable for use on Apple Inc.’s iPhone.” The reason for the delay, according to CEO Steve Jobs, was technological limitations. Jobs said the Flash player is “too slow to be useful” on the iPhone and that Adobe’s Flash Lite is “not capable of being used with the Web.” While Flash Lite is very limited compared to the power of the desktop Flash Player, Jobs’ statement can be interpreted as something other than underhanded. Should we just accept it at face value, though? I’m not so sure.

Continue reading "Flash Player (Still) in the Works for Apple’s iPhone"

Leave a comment ( 8 )

Viget works with a wide variety of clients with varying depths of web knowledge. Some simply have a business plan based on a strong idea, while others have designed, built, or maintained sites themselves. Regardless of this level of understanding, there’s one thing we all “opinionate” and iterate on — the look of the site. Aesthetic is typically unique in that all of the stakeholders in the project can and want to have input. After all, if we can see, we tend to have preferences for colors, layout, photo selection, font styles, etc. So the visual design of sites is typically an iterative dance between the subjective opinions of those involved, the established goals of the site, and the more objective “rules” of good web design.

Hopefully, the client is involved in or aware of all of the planning (sitemapping, wireframing, defining of audiences and actions) before the look is ever approached. Occasionally, even when they are involved in the planning, clients lean toward an unproductive and over-iterative focus on aesthetic. Many times, this is simply because we as designers allow the client to see visual decisions as a separate “phase” of the project, and they unconsciously become detached from the rest of the site goals for a short time.

So, a simple suggestion to keep a healthy, balanced perspective toward aesthetic — at the beginning of any visual evaluation (competitor site reviews, mood boards, comps), simply take two minutes to clarify with the client that visual design is much more than preferences/decisions on color, photos, and layout. Remind her that visual direction must always be evaluated in the light of:

Users/Actions

How will intended users perceive this design? Are the actions they’re meant to take apparent?

Aesthetic

How does it look? What feeling does it evoke? Are colors/fonts used appropriately? How is the brand being used/reflected?

Content/Data

What information are we offering through this design? What are we collecting? Are the content areas being given proper design attention and priority?

Functionality

Is the content/data/technology that we have available being leveraged to create appropriate and interesting features?

Usability

How easy or hard is it to use the page/site? Is the content visually prioritized, is it easy to find, and is the user effortlessly able to take intended actions? Is usability suffering because of other poor decisions?

These simple ground rules for evaluating the look of a site tend to get everyone more healthily engaged in making design decisions. Decrease subjectivity and iterations, increase objectivity and communication, and maintain focus on the larger site goals.

Leave a comment ( 5 )