Topic: Behind the Scenes
YouTube Chromeless Video Player – jQuery Plugin
While building the PUMA Running site, I had the opportunity to work with the YouTube JavaScript Player API to build a custom video player. This was something that we had to reuse in various places, so I made a jQuery plugin out of it (with a little help from Doug Avery to be able to add multiple videos per page). The functionality is pretty simple: you get a play/pause button, a status bar, and a mute/unmute button; but this plugin gives you control over how those things look.
Continue reading "YouTube Chromeless Video Player – jQuery Plugin"
Behind the Scenes: DwellAgent
Design Dilemma
It's time to design. You have nothing to go by. No name. No identifying mark. No color palettes or type styles to get things going. All you know is that you have to design a web application. Where do you begin?
This is exactly the situation we found ourselves in when John Lynch and Edward Johnston came to us wanting to create something to make it easier for real estate agents to manage listings and market their services.
Time was limited and there was much ground to cover. So we started with some quick naming and identity exercises alongside site maps, user flows, and wireframes. Simultaneously, we tested the waters with some stylistic concepts we call mood boards before approaching compositional design. Here are the results of that work:
Give And Take: Rails Rumble 2009
Last Friday, I joined Tony, Patrick, and Rob in the conference room here at Viget for the kickoff of Rails Rumble 2009. It started a long (yet, very short) weekend of frantic coding, last-minute fixes, and awesome breakthroughs. The Rails Rumble rules (all files must be created within 48 hours) have an element of drama built in, and even while detached from the development process I had my share of terrible and great moments before the 8pm Sunday deadline.
In 2008, our team (with Nick Schlueter in place of Tony) took home second place with Qflip, a little Netflix app that still sees some action today. Qflip came out of the same set of parameters we used for this year's idea:
- No login/pass — Rumble judges and users need to go through 150+ apps, don't make them create logins to remember. Logins also add complexity — is there a "Remember me" checkbox? What if I lose/change my password? What if I enter my email wrong? Huge pain.
- Instant results — Don't make users wait until they've completed ten actions before the app starts to pay off. The first action a user takes should have value.
- No friends required — Some apps are at their best when your buddies are already using them. Rails Rumble is not a great place for these — users need to be able to enjoy RR apps without large, existing communities.
Out of these simple rules (and an idea from Pat) came Append, a way to create a content-rich blog through Twitter. Tweet @ppend, and we'll figure out if you tweeted a link, a quote, a picture, a video, etc, and do our best to make it into a cool post with comments, an RSS feed, a yourname.ppend.to address, the whole deal. It's a fast way to share cool stuff from anywhere at any time, without cluttering your Twitter stream or bothering with some new interface.
Rails Rumble voting starts tonight and ends Saturday, August 29, so if you're interested in checking out all the apps and voting, get started!
The biggest difference between Append and Qflip for me was the conceptual clarity (or lack thereof). Qflip is a simple idea that takes a few words to explain, and its potential use becomes immediately apparent. Append is more like Twitter itself - the first time you hear about it, it might take a minute or two before you can imagine what you actually want to do with it. In the end, this became a focal point of our post-launch discussion (and quick tutorial screencast Pat put together), which I will now share with you in the form of:
Can a Website Design Be Inspired by a Chair? This One Was
Inspiration can find a designer in many unique and wonderful ways. Often, web designers go out seeking inspiration, browsing galleries online and looking at other websites, but in the case of a site redesign for Choice Hotels Scandinavia, I found my inspiration in a chair.
Continue reading "Can a Website Design Be Inspired by a Chair? This One Was"
Design Share: Now With 100% More Website
Our very own event series, Design Share, now has a website of its own. We needed somewhere to advertise upcoming events in the series, as well as archive videos and photos from the past two Design Share events.
Over the summer I've been chipping away at the project with Tumblr. This was a great chance to try out Tumblr and see what it could do since a site for Design Share needed to be simple, as well as easy for anyone to use and update, but it needed to still handle lots of videos and photos.
While building Design Share's site I learned that there are some benefits to using Tumblr and a couple snags.
Breaking down the process: Designing LegalRiver.com
One of my favorite things about working at Viget is the opportunity to work with promising startups. Our recent engagement with Legal River is a great example of how a unique working relationship can make the most of small startup budgets. Viget helped establish a look and feel for their website, https://www.legalriver.com, a marketplace that helps connect small business owners with attorneys.
The guys at LegalRiver didn't have the budget for a blue-sky solution, but they did have the smarts to invest in the basics. What made this project unique is that I only designed one page. The Legal River team is using that design as a roadmap for the rest of the site. They also did all of the development in-house. While it would have been great to design more of the site, we were able to give them a solid foundation to work with.
Learn more about our process and check out the Before and After screenshots after the jump to see how well this approach worked.
Continue reading "Breaking down the process: Designing LegalRiver.com"
Designing a Custom Flash Player for Brightcove
ABOUT BRIGHTCOVE
Brightcove offers a wide range of players that will plug right into your site. Its players range from a video window with basic controls to players with tabbed navigation, playlists, related videos, and keyword search. These players are easy to build into your site and connect with videos you've uploaded to Brightcove.
Unlike most drop-in players, Brightcove offers a great deal of customization. You can style existing players using a video player editor where you primarily have control over colors. This goes a long way when you're trying to match the look of your player with the look of your site, but you can take this a step further with a proprietary markup language called BEML (Brightcove Experience Markup Language). Think of BEML as HTML for a media player. You add custom images to replace the Brightcove custom elements (like your play or mute button for example). You also have complete control over which Brightcove components you want for your players and even which buttons you want for your player controls (play button, mute button, etc.).
However, even with base color styling and more advanced BEML modifications, you may still run into styling and component limitations. If you want to really customize your player, Brightcove allows you to take things even further with their API. So, with said API, Adobe Flex, and custom UI and visual design up front, that's what Viget did ...
Continue reading "Designing a Custom Flash Player for Brightcove"
2010