Interface design is rapidly shifting towards a resolution-independent model. As mobile devices, and screens of all sizes continue to increase pixel density we can no longer rely on 72 pixels per inch (ppi) as an interface design standard for the web. Retina displays pack up to 326 ppi, which render legacy web graphics fuzzy and pixelated. It’s not a good idea to simply “up-res” raster graphics because higher resolution raster graphics generate too much overhead causing slower load times, even for users with high speed internet. Luckily, different vector-based solutions are making it easier to implement resolution-agnostic interfaces.
Unicode symbols were among the frist web graphics to be vectorized, which evolved into dingbat fonts, which paved the way for the now mainstream icon fonts. Icon fonts are great for certain interface graphics, but doesn’t promise to be a perfect solution for every graphical need. You still have to deal with font-smoothing and anti-aliasing issues for different browsers, causing icons to render slightly different depending on which browser is rendering the font face. SVG offers a more robust solution over icon fonts for a number of reasons, but icon fonts are still a good alternative for most interface icons and pictograms.
It’s no doubt that resolution independence has become a key factor in creating responsive web designs. Tools and technical standards will always evolve, but great design is timeless. It’s a delicate challenge to gracefully adapt to emerging technologies while also remaining focused on using design to communicating effectively.
Here are a few of my favorite fonts and vector resources for resolution responsive icons:
Responsive design is all the rage these days, and it’s no surprise the term “responsive” has become an automatic score on most buzzword bingo games. It’s been exciting to see responsive design practices emerge beyond a niche philosophy and become an expected barrier to entry for nearly every website moving forward. Growing volumes of people are viewing web content primarily on mobile devices and have grown to expect immersive experiences on even the smallest screens. It’s widely expected to see all aspects of a website’s interface adapt gracefully for a sundry of screen sizes, including buttons, text, images, video and navigation.
Fortunately, there’s a growing community of responsive design enthusiasts openly sharing various tools and techniques for others to discover and re-purpose. I certainly encourage people to create custom tailored solutions that are content-specific, but you can influence your approach by exploring many of the pre-baked tools that help solve common responsive design challenges. Here’s a collection of the responsive design guides that I find useful and inspirational.
These snapshots capture moments leading up to various destinations in my recent journeys. Perhaps the “doing” can seem more significant than the destination simply because the present-tense is constantly shifting. I appreciate the time we have to stop and smell the roses, but still we have no digital means to clone a taste nor aroma. For now, I’m thankful for eyes and hands so I’m able to snap photos of my transit through space.
Email can be messy. I see a fair amount of poor email etiquette on a daily basis from professionals that rely on email as their primary communication channel. I’m not referring to typos and grammatical glitches. Typos and abbreviations have become an expected fallacy in today’s fast-paced, mobile workplace, so you can drop the “please excuse typos” from your email signature. Try using spellcheck or auto-correct instead of broadcasting to your readers that you’re just as much a sloppy typer as a lazy reader. I’d rather read a message comprised of ebonics, short-hand and emoticons rather than be expected to automatically forgive a poorly crafted email just because it includes a handicap disclaimer. Typos are forgivable, but slapping a warning label on every email is a cop-out and unprofessional at best. Include a literacy disclaimer if you must, but don’t blatantly disregard the recipient’s need for clarity.
Typo-disclaimers are nearly as annoying as those overly legal email footers riddled with confidentiality clauses proclaiming “this message is meant for your eyes only”. Disclaiming that this email is “top secret” provides little accountability to actually keep the content private, and offers zero protection from someone accidentally clicking “forward to everyone“. If a message is truly confidential then you should consider a more secure delivery method.
The only etiquette more annoying than lofty content disclaimers, are bloated email signatures.
An email signature is not an effective platform to promote your brand’s visual identity or legion of social networks. Your company’s logo is better suited for your website, business card, letterhead or other collateral. Cute font treatments and funky color schemes rarely compensate for a desire to express your true personality, so don’t bother. Keep it simple. Your signature should communicate that you are concise, credible and approachable. Extra frills just add unnecessary noise and confusion. Many inboxes are already cluttered archives, so be responsible by providing more signal and less noise. Above all, remember that the main function of an email signature is for readers to see who you are and how to get in touch.
In general, it’s a bad practice to use graphics in your email signature. It’s especially bad to rely solely on images to display contact info. A lot of companies do it, but it’s much more effective to craft a simple text-based signature. Here are some reasons that illustrate my point:
- Text is easier to revise when you need to update minor details on the fly.
- Text is more accessible on all devices. Names, numbers, and addresses are almost useless displayed as an image.
- Email images transfer as “attachments”. It makes it difficult find “real attachments” if every message has at least one.
- Email clients can ignore nested graphics within a conversation thread, and will only show a file-name in place of your company’s precious logo. (ie. image003.jpg)
- Unnecessary graphics add extra file size, bloat inboxes and slow down the delivery of each message.
- Graphics get compressed by email clients and often look pixelated on different screens. Alternately, text-based content appears crisp and legible at any size.
Most of my observations on email etiquette are widely accepted and should be required reading for anyone that uses email to conduct business.
Outside of business communication, email behavior has very few boundaries. I fully expect my personal email accounts will continue attracting awkward social e-blasts, pseudo-tweets from people that haven’t embraced twitter yet, random youtube links to cat videos, reminders to read blog entries from authors I already follow, offensive chain letters with religious undertones, and crass political jokes that are likely to get me flagged on a terrorist watch-list.
Holistically speaking, email etiquette is completely subjective and requires a greater threshold for noise and chaos than I’m always capable of enduring. It’s a good idea to frequently exercise patience and compassion for the bad habits of others, and politely encourage better practices when the opportunity presents itself. I’m often guilty of breaking the rules and defying protocol, but my heart is usually in the right place. Just remember that everything is recorded, nothing is private, and everyone is judging you.
love,
Mason
“The creation of a thousand forests is in one acorn.”
- Ralph Waldo Emerson
The best advice usually comes from good listeners that know when to probe and when to preach. Good advice feels like someone handing you a puzzle piece that you’ve been seeking. A wise puzzle master will first acknowledge the big picture, examine the totality of pieces involved, and only attempt to connect the pieces after everything is facing up.
Recently I’ve pitched some ambitious business models to a few peers and I’ve received varying levels of support, confusion and advice. My vision is more easily demystified by sharing the success stories of companies that inspire me to create elegant solutions to complex puzzles. Below I highlight some innovative companies that not only embrace progressive business models, but also provide seamless tools for others to re-purpose and prosper.
AT&T sponsored a Mobile App Hackathon here in Atlanta lasting for only 8 hours during Saturday, September 10th, 2011. I’m fortunate to be able to participate and collaborate with a talented team on a fun app idea. We explored several different concepts before deciding which one to build. We brainstormed 10 or more different app ideas before deciding on a direction. We even seriously considered building a multi-user, location-aware, social gaming app involving zombies, but ended up settling on something a little more feasible to accomplish in less than 8 hours. We wanted to make something fun that would also leverage our unique strengths. We eventually settled on one of our first concepts which is a mobile web app for people to report potholes, poorly timed traffic lights, and other road problems. We called this app Road Rage. Similar concepts already exist, such as Pothole Scout and Waze, but what makes our approach different as a web app is our emphasis on convenience and accessibility. We want users to have a simple and convenient way to share input without involving too many steps. We also believe that publishing our concept as web app instead of a native app is the best way to reach a wider audience, while also allowing us to deploy a single code-base that works well on every mobile device. This article provides a little background on our concept and shares some insights into our experience competing in the Atlanta Mobile App Hackathon.
The team started out as four people and dwindled down as things progressed. We already knew going into the competition that Jason and myself would have to depart a few hours before the completion deadline because of prior commitments. Phil ended up missing the event day completely due to a death in the family, but was able to contribute ahead of time conceptually in addition to some R&D efforts. We had to adapt our team dynamic to accommodate these changes and ended up functioning similar to a relay race, where each team member hands off their work for the next person to run with. Unfortunately, Manny was left sprinting the last lap to the finnish line alone. I feel pretty bad for deserting him in the final stages, especially because he had no interest in presenting our app in front of a room full of strangers. Considering the circumstances I feel we adapted pretty well and were all able to benefit from the experience as a whole.
(from left to right)
Mason Brown (me) : designer
Phil Huffsticlker : front-end developer
Manny Blum : front-end developer
Jason Ardell : back-end developer
Tag road hazards, detours and bad traffic lights. Allow users to ‘vote-up’ potholes to higher priority to increase an area’s priority. A dashboard can track popular tags, life-span of each incident, display how it was fixed, show hazard density per capita, show top trending tag results, and share the results online to promote greater awareness.
Our team met early in the morning at Starbucks to pre-game and organize our thoughts before walking across the street one hour later to the ATDC on Georgia Tech’s campus. When we arrived at the hackathon event space we were greeted at the welcome-table by one of the event organizers who was busy troubleshooting the facility’s wifi connection problems. The room was already full when the event began but no-one had internet access. Luckily Jason from our team brought his personal wifi router from home and was able to connect us to the internet long before the event organizers were able to provide another solution. Apparently they had to buy 7 new cisco routers in the middle of the event so we could have a suitable network for nearly 80 developers to hack all day. A little later on they were able to provide us with 4G hotspots, which were actually pretty cool. Despite having several wifi options mid-way into the hackathon, we still experienced miserable connection problems. It turns out that not having reliable internet access can slow you down when you’re depending heavily on api’s hosted in the cloud. We were able to get by with periodic access to Google’s mapping api and shared github repo. The internet latency felt similar to having to wave your wet hands a bunch of times in front of a paper towel dispenser before it actually gives you one. Apparently the ATDC building is well known for having unreliable wifi, which is ironic since they’re supposed to be a prestigious technology power-house. Fortunately our team and event sponsors were resilient so we all survived.
A few speakers presented different mobile frameworks and api’s. Unfortunately I was only able to catch fragments from each presentation because I was trying to stay focused on creating our wireframes and design interface assets so we’d actually have a chance of finishing on time. By 11:30am our app’s development was well under way, but a lot of other participants in the room hadn’t started hacking anything yet and several people were still just trying to join a team. Our team was furiously hacking away, sharing incremental progress, and pushing changes to github. Every five minutes someone else in the room would swing by our table and distract us in different ways. Most of the people checking in with us were curious what we were hacking and just wanted to network. Given the aggressive time-crunch I wasn’t very interested in networking, so I tried to keep my headphones on and politely ignore the constant distractions. I was able to speak with a few nice people, swap some ideas and share contact info, but I wish I had more time to embrace the social aspects of this event a little more. There were a lot of talented developers, entrepreneurs and evangelists in attendance, but I forced myself to stay heads-down for most of the event and missed out on some idea share.
While I was designing the app’s graphics, Manny quickly built the scaffolding for the initial views, and Jason setup the server and wrote the backend application logic. We used Google’s api for map data as well as fonts. Our front-end was built using jquery-mobile, sitting on top of Ruby on Rails with a sqlite database, and deployed on Heroku. Jason and Manny would do a much better job of explaining the technical architecture than I would, but I can convey my insights on the presentation-layer side of our framework.
We all worked with jquery-mobile before and knew it could help us get our interface up and running with minimal effort. While I agree it’s a good out-of-the-box solution for prototyping web apps, as a designer I find it cumbersome to customize and not very rewarding for the amount of time I spent hacking together a simple custom look. Sure, some interface elements are easy to skin, such as colors and dimensions, but other elements are painful to modify and can be more effort than it’s worth to change. I spent more time removing default styles than I did creating a custom ones. It’s frustrating when you’re running short on time and realize you have to reverse-engineer a theme’s stylesheet just to tweak a few positions, margins and borders. I was able to customize our skin enough to not look exactly like a default jquery-mobile theme, but overall I’m disappointed with how much time I wasted overwriting styles compared to how noticeable the impact was in the end result. I feel I could have skinned a more impressive looking interface from scratch with the amount of time I spent modding their default css and would certainly take a different approach in the future. I would like to re-visit jquery-mobile, on a less time-sensitive project, and possibly customize a boilerplate theme that’s more easily skinnable for designer/hybrids like me.
Road Rage App: http://roadrage.heroku.com
Since everyone on our team dipped out before the end of the event I don’t think our finished app even got shared with the other hackathon participants. Either way, I’m glad to see the Four Corners game won the competition, and know that the developers @cyu, @lorennorman, @blakebyrnes and @dsims certainly deserve the recognition (and prizes too!) The other hackathon apps I saw were pretty cool as well and think everyone had some great ideas overall. Although our team didn’t complete all of our app’s goals for the day, we certainly achieved the most important goal which was to have fun jamming out with like-minded peeps creating a web app that has potential for greatness. I’m really thankful for the opportunity to work with my team and contribute to Atlanta’s mobile app community. Hopefully we’ll be able to continue collaborating on our concept and eventually publish a more feature-rich app in the future. In the meantime, check out what we were able to accomplish in a single Saturday by visiting Road Rage from your web-enabled device. Feel free to share any constructive feedback.
There are several new tools to make the experience sketching and note-taking on digital devices more rewarding. Almost every pen gadget boasts an army of features but I haven’t yet found one that compares to the simplicity and comfort of a traditional pencil and paper approach. I think we’re moving in the right direction with some of the latest software that allows cloud-syncing and remote collaboration but the hardware is far too cumbersome for most of my illustration and brainstorming sessions. I already have enough gadget accessories to lug around when I travel and it’s rare that any of them are as agile and portable as my notepad. I imagine someone will eventually discover a holy-grail drawing technology that not only fits in my back pocket but also doesn’t rely on electricity. I’m sure mankind will look back decades from now and realize most of our writing and drawing gadgets were clumsy toy prototypes that led to more ambient solutions. It’s amazing how far mankind has evolved drawing and word processing tools in the past centuries, yet the fundamental mechanics of sketching graphite on an analog slab hasn’t changed that much since our neanderthal cave painting days.
Here’s a round-up of some writing and sketching tools that are nice, but won’t replace my analog sketchpad anytime soon:
Wacom Inkling:
Wacom Bamboo Paper & Stylus for iPad:
Adonit Jot:
PhatPad for iPad:
Livescribe + Pencasts:
I’ve learned a few things since I recently started freelancing. Here are some takeaways from my experience so far.
The moment I changed my status on LinkedIn from ‘full-time’ to ‘freelance’ my inbox became flooded with opportunities I didn’t know existed. I enjoy getting random phone calls in the middle of the day from strangers pitching new gigs. Networking is a lot easier now that I’m mobile and not tied down to a single agency. I spend the majority of my working hours in my home studio, so when I venture out to work on-site I genuinely cherish the interactions I have with colleagues. I continue to meet a wider range of talented professionals as a result of freelancing than I ever did working full-time. I love seeing different studio spaces, meeting new people, and getting a broader scope of industry dynamics. It’s great to learn how different teams do things in their own special way. One networking goal I’ve set is to keep a record of notable people I’ve worked with, including skill sets, rates and contact info. I want to be able to re-connect with talent for future opportunities without having to hunt around my address book and various social networks.
Although I make my own schedule, it heavily depends on others. For most weeks, this just means that I take a normal weekend like everyone else, but sometimes clients will spend the middle of the week gathering details for a project to start by the end of the week. In agency life, there’s usually not a great “overtime” policy even though long nights and weekends are routine. As a freelancer, it’s nice getting fairly compensated when I do sacrifice the occasional weekend or late night. I’ve learned to take advantage of downtime between projects, approvals, and feedback cycles. If you’ve got time to lean, you’ve got time to clean… my desk, dishes, laundry, teeth… the list goes on. House chores are easier to wrangle when I work from home, and rarely interfere with my productivity on client work. I’ve been able to balance personal priorities with client obligations better now that I spend more time at home. One of the main reasons I started freelancing is so I can focus more on personal projects. However, my time is mostly consumed with client work. It’s becoming harder to justify experimenting on random projects if there’s not a direct monetary payoff. One of my goals moving forward is to dedicate more of my “free-time” towards personal projects and not let work overshadow personal ambitions.
The money game is intriguing to me. There are infinite ways to slice a pie and everyone wants a bigger share. However, no matter how you dish it out, all income can be digested into an hourly rate. This is true for salary, commission, fixed-fee or pro-bono work alike. Most of my work is invoiced at an agreed upon hourly rate, which varies depending on task. I usually know exactly how much time is allotted and always try to deliver ahead of schedule and under budget. I try to go the extra mile to ensure a little breathing room for everyone. (To be early is to be on-time, and to be on-time is to be late.) However, it’s extremely rare that any of my clients return payments with as much urgency as I delivered their goods. Usually I wait anywhere from one week (best case) to 45 days from the invoice date. Luckily, my billing software tracks my payment schedule. Usually a polite email reminder is sufficient to recoup late payments. I’m well aware of industry-standard billing cycles, and how everyone depends on everyone to get paid. Somewhere in the past people decided it was acceptable to wait a month or more to get paid for services rendered. Personally, I think it should function more like the restaurant industry. It would be ideal for a client to visit my site, browse a menu of services priced accordingly, and get handed a bill after a satisfactory experience is delivered, and pays immediately thereafter.
I use Billings for invoicing and time tracking, which is great for most projects, but I still have to manually submit invoices and follow up via email. Harvest is a nice web-based service that integrates project tracking, invoicing and online payments, but costs a monthly fee. Solo is another web service that does invoicing and project tracking, which also costs a monthly fee and there is no online payment feature. Both Harvest & Solo are cool interfaces, but paying monthly fees can be counterproductive for a tool that’s supposed to help me make money. For now, it makes sense to continue using software that I own for life that isn’t dependent on the cloud.
There are a lot of way to improve my payment delivery schedule. A few ideas that I’ve yet to implement are requesting down-payments, automating direct deposits, enforcing late-fees, and offering discounts for early payment. Because it’s not realistic to expect giant agencies to make significant exceptions to their current payroll system, it’s pretty important to know how to play by their rules, which usually includes being patient. Meanwhile, I will continue my quest for a perfect system that makes payments easier for everyone involved.
Contracts differ from client to client. On one extreme, you may receive 20-pages of legal jargon that takes longer to translate than to just do the work. On the other extreme you may get a simple 2-liner stating the project summary and cost. Either way, I’ve found that the initial contract sets the tone for the entire engagement, and if you failed to sign a contract then be prepared to give away work for free. Some companies initiate a new contract for every new project, some retain an open contract, while others set an expiration date for a given period. I’m usually willing to adapt to whatever is most comfortable for my client, but I’m weary of clients with cumbersome renewal procedures and extra hoops to jump through. Make it easy for me to work with you and I’m more likely to stick around and make it worth your while. When I negotiate contract terms I usually aim for the following criteria:
Aside from the many skills necessary to do great work, agility is one skill that’s necessary to thrive. It’s important to be able to crank-out great work fast. There’s a lot of switching gears at short-notice to pick up an incoming project. I don’t have the luxury of a resourcing manager (aka. traffic-cop) to plan my schedule, and project me from random curveballs. A hollywood-style agent would be nice, but I’m wary of adding an additional middle-man into my process. Rush jobs come with the territory of contract work since a lot of agencies/clients will only reach out to me when they need extra hands on deck. It’s analogous to kayaking a river. Sometimes you float along easily and sometimes you paddle double-time, but you must always be ready for a surprise just around the bend.
I’m fortunate enough to have a solid foundation of agency contacts that supply me with fairly steady work. I rarely have to hunt down new gigs. I tend to perpetuate existing client relationships because it’s the path of least resistance. I keep a list of shops and agencies I want to work with, but I rarely have time to pursue new relationships because I’m too busy keeping my current ones happy. Sometimes I feel like putting a hold on all current clients and starting fresh with a new client-base. This would mean saying “NO” more often. This is sometimes hard because I have an aversion to flaking on commitments and pissing off people. I need to find an elegant way to bring closure to awkward client relationships. It’s difficult to avoid feeling the sting of a “break up” when walking away from any client.
I’ve noticed a consistent pattern that roughly two/thirds of project-leads materialize on-time, or even at all. I talk to recruiters daily about possible projects and opportunities all over the country. The one question everyone always asks first is “What is your availability?” I’ve learned to always be available to explore new gigs because even if my schedule appears booked for the foreseeable future, I know that something will inevitably disappear or get delayed. I’ve taken on a number of contracts where the hiring manager professed they have tons of work lined up and will keep me busy for the foreseeable future. This never turns out to be true. For steady projects there’s always downtime due to review cycles, approvals, and general bureaucracy slowness. For new and/or potential clients there’s always the fact that they are also talking to other candidates for the same position, by which availability is merely a barrier to entry.
Most new job leads have already seen my portfolio before they contact me, but commonly make their final decision based on cost. People are usually kind enough to let me know if they’ve gone with a different candidate, but only after stringing me along for a couple weeks while they shop around. In one recent case, I went as far as negotiating a trial-period rate, signed their 10-page contract, and showed up to start work on-time. I met the art director in the lobby, and before we could even exchange greetings we were approached by a resourcing manager notifying us both that the budget just got “un-approved” and sent me home. No hard feelings. It wasn’t meant to be. This incident just goes to prove that a contract can die at any point, so it’s wise to have a backup-plan for your backup-plan to back up your backup-plan.
Potential clients often ask about my process. It’s a fair question, but my answer is never the same. I try not to over or under explain anything. When it comes to process, people have vastly different artistic and technical literacy. Proper syntax and phrasing is necessary to trigger certain responses from your audience. It’s always good to start with some common ground and build from there. I attempt to summarize, not teach. Clients want to know if your talents can help their business, and rarely appreciate getting schooled on facts that are irrelevant to their immediate goals.
It helps to pick just one part of the process to discuss so you can establish a concrete example of your logic. If you’re still on the same page then you can dig deeper. Initially, they just want to get a sense of your “way of thinking”, and are not as interested in the actual mechanics of doing work. Do you have a scientific method, or do you improvise? Do you like small-talk or are you strictly-business? Truth is that most creative projects strike a balance of chaos and structure. If you’re trying to be innovative then you don’t always have an iron-clad process for everything. Even when solving similar challenges I force myself to not clone a previous process that may have worked well before. It’s a good practice to routinely question your process to prevent bad habits and develop better ones. Process should evolve with every new project, but the “approach” should be inspired based on experience, insight, and values. Approach has to do more with your focus and mindset, whereas “process” is merely a collection of steps involved.
Networking:
Keep a talent log of people I work with to help decide who I engage for future opportunties.
Time-Management:
Dedicate more of my free-time towards personal projects.
Money:
Adopt a more streamlined system that allows me to get paid faster.
Contracts:
Revise my standard contract terms to better protect myself against problem-clients. Consult a good lawyer to provide additional advice for contracts and negotiations.
Agility:
Remain agile by taking on a balanced workload.
Client Retention:
Pursue professional and respectful ways to bring closure to unwanted client relationships. Seek new clients whose values align closer to my own. Find better ways to praise my favorite clients.
Process:
Visually convey my process for different projects in order to become more transparent when attracting new gigs.
It really grinds my gears when I jump back in forth to different Adobe design apps and all the tools seem to operate differently. There are numerous inconsistencies across the Adobe suite regarding usability and interface design and it’s about time that Adobe cleans house. While they have made some progress integrating interface elements across the Creative Suite since Adobe acquired Macromedia back in 2005 (nearly six years ago), there are still far too many conflicting interface metaphors. One of Adobe’s longest reigning UI mechanisms is the tool panel, which has remained relatively unchanged since it’s inception, despite the various tools that have come and gone.
There are several interface elements that have been grandfathered in from previous versions, but it’s past due for Adobe to re-evaluate the user experience across the Creative Suite and provide a consistent experience that is more pleasant to use. If I select the gradient tool then I expect all of it’s relevant options to become visible, but not in a way that invades my workspace too much. Adobe’s gradient tool highlights how inconsistent the user experience can be from app to app.
It’s clear that each app in Adobe’s Creative Suite is targeted for different a different purpose, but that’s hardly an excuse why the gradient tool functions so differently in every single application. There all share just enough similarities to trick you. The inconsistencies in usability are laughable, and continue to baffle me. If I were king for a day I would mandate that gradients should work the same in every Adobe app. The following examples compare the gradient tool in six Adobe apps. The inconsistencies are staggering.
Pros: Color options are abundant.
Cons: Opening two pop-up windows is intrusive and unnecessary.
Pros: None; this is the worst user experience in the entire Creative Suite.
Cons: Opening three windows is ridiculous. Nuff said.
Pros: The gradient properties and color options float near the object of focus.
Cons: The color options are segmented into different views. It would be better if all color options were visible in the same view. Also, there is still a separate panel for gradient options in addition to the overlay panel. It seems like they should be unified.
Pros: The color selection panel is non-intrusive.
Cons: The color selection options are embedded inside the properties panel instead of being accessible directly from the object (like Illustrator).
Pros: The gradient’s shape and angle are easily editable on the object of focus. (Flash has my favorite gradient tool in the Creative Suite.)
Cons: The color selection window(s) should be more unified.
Pros: The gradient panel is minimal.
Cons: The gradient panel is TOO minimal. It should include color selection within the gradient panel (like Illustrator). Color selection requires both the gradient panel and using the color picker from the menu bar, which launches a new window.
Offering unified functionality across all apps would significantly help designers be more efficient when performing even simple tasks. I would like to see all Adobe apps adopt a hybrid of the gradient tools in Flash and Illustrators. It’s ironic that the industry’s leading design tools have so many usability flaws. In a perfect world, there will just be one single app that does everything currently offered across 15+ different Adobe design tools. One app to rule them all! I’m not actually holding my breath waiting for the universal design tool. For now I would happily settle for a consistent gradient tool.
Have a killer idea, but not quite ready for primetime? Better plant your flag in the ground and discourage others from stealing your dream. Plenty of startups are cloning the “launching soon” model in order to attract an early user base. This model is loosely based on offering interested parties early beta access in exchange for your email address, a few of your friends, and are typically invite only. By this point you probably can’t decide whether this is genius or terrible. While this attraction tactic seems virtually harmless, it’s effectiveness will likely diminish as more startups continue to abuse it.
Sure, it’s enticing to feel like an early adopter and earn your rank amongst the elites, but many startups easily trick people into signing up for a product before they even have anything to offer. A prime example is Hipster, which was able to get ten thousand signups in two days without revealing what it does. When the site finally revealed its purpose, anxious followers just found a glorified news feed. Would they have gotten nearly as many signups if potential users could see behind the veil? Probably not. Visual.ly is another site that recently grabbed a lot of attention without having a real product to offer, just an idea. Their idea promises to unify the data design community, but it could very likely just end up being another tumblog or found feed.
I do encourage entrepreneurs to find creative ways to generate hype, but I also can see how a crafty launch strategy could backfire. Think about throwing a party, that’s invite only, but attendees must RSVP to request an invite. What kind of people are you trying to attract?
Here are 10 startups that invite you to stay interested:
The human element proves to be a source of endless intrigue. Here are a few portrait projects that offer a refreshing perspective on the human experience.
The project Created Equal juxtaposes citizens from different classes and cultural backgrounds. The message is that no matter how different we may be, we are all individuals that deserve dignity. Symmetrical Portraits highlights the subtle facial dynamics by mirroring the human face to reveal significant variances in our two hemispheres. Back To The Future is almost comical, but has a sincere goal to show how people would look if their nostalgic childhood photos were reenacted as adults. Lastly, the Crayon Portraits takes old photographs from the Great Depression and reconstructs them by stacking hundreds of differently colored crayons to give them back the lost color of their time.
I just wanted to chime in on the open dialog about how technology affects the way we communicate, which seems to be a common topic of conversation in many circles lately.
I’ve read a few recent articles that resonate a similar tone. “There’s too much noise and not enough signal.” Hearing the battles-cries of smart people like Swissmiss and my dad help make my journey through the digital ecosystem seem a little more sane.
Communication is difficult enough without technology. Managing all your devices, channels, portals, and priorities can sometimes feel like juggling chainsaws. It’s easy for an automated system to become more difficult than the manual alternative. It’s our nature to recognize patterns, isolate flaws, and revise a system until it’s efficient enough to manage our tasks at hand. But as soon as we grasp a certain threshold we are forced to adapt to greater expectations. It’s true that in order to keep up you have to constantly unlearn and relearn. I suppose that’s true of life in general. Adapt or wither. Control or be controlled.
The kinetics of communication is merely to Send and Receive. That’s it. The technology we employ to send and receive is merely a vessel. Sometimes the vessel distorts the signal or breaks altogether. Regardless of you vessel, it’s up to the communicators to decide what to broadcast and what to consume.
Technology is just a tool to get you from point-A to point-B faster than relying on just the human body. When my dad taught me to ride a bike it seemed like a very complex device with a lot of rules. A few gears, spokes and pedals seemed like a jet engine at the time. I had to fall down a few times in order to understand the fundamentals, but once I found my balance everything else was easy. After gaining more confidence I immediately wanted to upgrade to a more advanced bike.
Upgrades are a necessary aspect of survival. Starting fresh with a new system is sometimes the best way to clean out the trash and eliminate bad habits. Sorting, merging and re-gathering lost contacts, bookmarks, passwords, etc. is stressful for anyone, but also allows you an honest chance to assess what and who is truly important. Clutter kills. I’ve moved several times in the past few years, and each move has a cleansing affect on my life. I continue to migrate boxes of books, DVD’s and CD’s from place to place. I can’t remember the last time I’ve used most of them, but it’s hard to let go. Lately I’ve had an overwhelming urge to digitize everything I can so I can “keep it on file” while also eliminating the physical burden on my bookshelves and gain back a few pixels of real estate in my life. The only thing holding me back from ditching the Mearriam-Webster’s dictionary (that I’ve had since freshmen year at college) is the thought of enduring a global system crash and I need to look up a word. Seriously, I have zillions of dictionaries at my fingertips, yet I haven’t burned that bridge yet? ( Fahrenheit 451 anyone?)
I don’t advocate burning books, but I do like the idea of simplifying my library. Most of my important information is synced and accessible from the cloud independent of any single device. However, my comfortable little system will eventually expire and is ultimately fragile on a long enough timeline. Incremental adjustments are easier to process than monumental leaps, but shit happens. Sometimes you drop your phone in the toilet, software crashes, or a solar flare knocks out all power on Earth. Then what? Even the best back-up recovery solution has a weakness. Every system has a breaking point. You have to prepare for the worst and striving for the best. (easier said than done.)
Regarding the affects of technology on our social life… well, I still don’t have that one figured out, and maybe never will. I think humanity is still figuring that one out together. There are so many languages, channels, protocols, networks, and ideas rapidly evolving every day. It’s not healthy (nor possible) to keep up with all of them. You have to filter out a ton of noise in order to make meaningful connections. Otherwise you will get bogged down in the minutia.
I’ll admit that I’m intimidated by what future generations will impose on my communication systems worry how well I’ll adapt as I grow older. Hopefully new technologies will continue to enhance my life and not over-complicate it. My fear of keeping up with technology is easily trumped by my innate fear of depending on technology too much. Is technology enabling or crippling? I say both.
Great video footage, sound production, and brilliant thinking is enough to stimulate most of your senses. Here’s several of my recent fave’s that will surely make you smile, scratch your head or poop your pants. Maybe not in that order, but hopefully you won’t be disappointed. Be sure to check out my Vimeo likes if you’re into this kind of stuff.
Before you read this rant you should know that it’s motivated by a cumulative pattern that I’ve noticed in my day-to-day work, and is in no way directed towards anyone or any specific event. Perhaps you can relate, or maybe not.
Why do so many clients set deadlines for the first of the month? Or better yet, the first of the year? It seems like a reasonable request at the time, but you later discover that it’s just a side effect of poor planning. I’ve revisited this concept several times in my head, so instead of just tweeting a snarky one-liner, I thought I’d take a moment to reflect a little deeper.
So why is the first of the month a common launch date?
Some people choose the first of the month because they think it’s easier to monitor performance. Some may like it because it mirrors their existing billing cycles, and others just innocently pick a date that they can remember. However, a “new month” provides a superficial sense of renewal and can easily misguide one’s judgement if used as a benchmark for completion. Sure, much of the business world shares a common rhythm, but it doesn’t always make sense to synchronize a project’s delivery schedule with the flip of a calendar page. Milestones should be calculated based on a project’s scope, not by a calendar’s symmetry.
Too many people start a project with a deadline before most of the critical questions are answered. It’s not wise to set a deadline for any goal that hasn’t been clearly defined. If you calculate the actual time it takes the design and build a product then it’s doubtful that it gets done by the first day of any month. If you want a site to launch on a specific date, no matter if it’s the 1st or the 21st, you really need complete everything much sooner so you have time to perform all the necessary tasks of testing, polishing and revising to ensure it’s truly ready for prime-time. Rushing through a project often leads to missteps and re-work. Who gets excited about a soft-launch of a buggy beta version that really just needs more time to improve?
It’s either ready or it’s not.
The notion of “under-promise and over-deliver” is misleading and encourages poor planning. The outcome is more successful if you set expectations based on actual facts and honest assumptions. The hard truth about project planning is that it always takes as long as you allow. If you give someone a month to complete a project then it will take at least a month to deliver. If you try to compensate for this “law” by setting an overly aggressive deadline then you’re just setting your team up for failure. Instead, establish shorter, incremental milestones that allows for more frequent status updates and aligns client expectations with reality. You will notice that deadlines can be easily adjusted, even if that means delivering after the first of the month.
When you dine at a restaurant you don’t tell the server to deliver your meal at the top of the hour, especially not before you’ve ordered or even know what you want. You certainly shouldn’t expect to receive undivided attention if you dine at peak hours. If you have 5 client’s that want to be served at the exact same time then it will be much more difficult to deliver a quality experience when compared to a staggered approach. It’s better to set milestones on days somewhere in the middle of the month to avoid conflicts with other project deadlines. Intentionally being out-of-sync with the masses can help you gain control of the pace, delivery and the quality of the finished product.
I have a fond appreciation for well-designed studio spaces, as evident in my collection of inspirational office spaces and music studios. Since working almost exclusively from home, my focus has shifted away from collaborative office environments to more isolated home offices. The home office contrasts the agency office in many ways, but most notably is the crucial relationship with other functions of your home. Domestic priorities can easily trump client demands, so it’s important to establish professional boundaries that balance with personal boundaries. In my line of work I’m usually free to roam to the nearest coffee shop, patio or couch as long as I have my laptop and a decent internet connection. However, there’s a certain comfort in having a dedicated home-base you can depend on to stay focused and feel comfortable. A great workspace is designed to facilitate both creativity and efficiency. Lighting, room color and architecture can really shape your mood and affect the quality of the work your produce. Here are a few home studios that reflect an ambient balance both of function and form.
The information renaissance is an exciting time to be alive. The rapid evolution of technology combined with a heightened capacity for creative expression is shaping nearly every aspect of human culture. One aspect that is increasingly pervasive in my line of work is the elevated demand for skilled hybrids. More agencies, boutique shops and startups are seeking people that specialize in bridging the gap between the traditional roles of a designer and developer. In order to keep pace with the high expectations of the digital marketplace, apps have become insanely complex systems that require an advanced level of both form AND function. Consumer expectations increase every moment and there’s no turning back.
It’s no longer acceptable to craft a pretty interface without having a robust back-end. Inversely, you can no longer justify having an ugly interface just because you have a powerful engine. Design firms, ad agencies, and software companies are waking up to the fact that traditional collaboration models and waterfall processes don’t produce desired results. Creative and technology directors are realizing they have gaps in their workflow that didn’t exist before. Specialists are spread too thin and generalists are no longer effective.
There will always be the need for specialized disciplines. A programmer is most valuable when programming, just like a designer is most valuable when designing. Too often, programmers are distracted by having to manipulate design assets, and a graphic designers are forced to dilute their artwork by focusing on technical issues. A new role is bridging the gap between these creative and technical disciplines. The title ‘hybrid’ has been re-invented to mean much more than it did five years ago. Here’s how I interpret the modern day hybrid:
Hybrid (ˈhīˌbrid)
A craftsman experienced in dual disciplines of design and development, specializing in translating creative vision into usable assets optimized for application programmers.
A hybrid cares mostly about interface interactions, information hierarchy, state transitions and user experience. A hybrid is constantly thinking “outside the box”, but also has an intense focus on the formal process. A hybrid understands that any digital product worth making requires iteration and should be easily updatable. The hybrid helps ensure an optimal balance between the graphical and programatic aspects of an app. The easier an app is to update the greater the chances are to elevate the creativity and improve upon the overall user experience. In essence, a hybrid is concerned with the the combined priorities of both creative and technical disciplines. If the final product fails at either form OR function then the entire product is deemed a failure in the eyes of the hybrid. (This perspective also tends to align with user expectations.)
Hybrid types used to be regarded as swiss-army-knife hacks that were capable of mediocre design and sloppy programming. Although that may have been the case in the past, the modern hybrid role has be re-invented to fill a void between the roles of creative and technology. Today’s hybrid is a specialized role that fits within an existing team of disciplined creative theorists, graphic designers and technologists alike. The old hybrid was a jack of all trades, master of none. The new hybrid bridges the gap.
Today it’s more common to find talent that is versed in multiple disciplines, such as design, code, animation, etc. Typically, hybrids are not satisfied with picking a single craft, only to be pigeon-holed into a formula suited for antiquated business models.
The problem with a hybrid in the traditional agency formula is that skill-sets are often misunderstood. Project planners often fail at knowing where someone’s talent begins and where others end. It’s easy to place mis-guided expectations on people if you don’t know their capabilities, strengths and weaknesses. You can’t develop accurate project plans and resourcing requirements based on deprecated workflows from last decade. Agency directors didn’t even know where to sit hybrids in their bi-polar floorplans of yesteryear’s agency model.
“Are you a designer or a coder? Both?” *head explodes*
The old formula depended on a designer and a developer meeting in the middle. The designer’s role was to make things look pretty, but wasn’t responsible for knowing how things work. The developer’s role was to make it work, but wasn’t involved in the design process. There’s too much room for error when you have two specialists that don’t understand each other’s process. A few misunderstandings between a designer and programmer can compromise a project’s quality, schedule, and budget. Before you can fully accept the role of a hybrid in your process, you must first acknowledge the true value of your best designers and developers.
A developer’s role has become seemingly more standardized over the years. Although syntax, frameworks and platforms continue to evolve, there’s usually one best way to achieve a desired result. A developer’s job can be made significantly easier when a designer delivers clearly organized design assets that reflect an app’s functional requirements. Programmers no longer have the time or patience to dissect clumsy photoshop files. No one wins if a programmer has to make assumptions about how artwork should be interpreted as interface elements.
Designers should understand the platform they design for. This concept applies to everything from digital interfaces, product packaging, fashion, cars, and architecture. A web designer probably won’t know how to query a database, but should definitely know how a database works. Part of the designer’s role is to translate raw data into a clear message, using art to communicate and evoke emotional reactions. Humans want to interact with information, not UI. Knobs and buttons are just a medium to access and manipulate data. A button should be an elegant trigger to send and receive decisions, and get out of the way when it’s no longer needed. Designers have a better chance of achieving harmony if they understand the purpose and logic of the system.
There’s a growing family of tools to help streamline the designer / developer workflow ( Flash Catalyst, Expression Blend, etc. ) However, most of these tools are still in their infancy stages, and require a holistic approach that transcends the tools. Your mental toolbox if far more important than the software used to execute an idea. In other words, you can’t rely on software to bridge the gap. Each new project requires a different approach, and it’s up to the creators to decide which approach is best for each situation.
Although it’s a prerequisite that hybrids are well-rounded, the new hybrid is a specialist that’s comfortable working in the realm between design and development. The hybrid role allows other specialists to focus on the intricacies of their craft, while making fewer compromises and becoming more efficient. Personally, I enjoy the beauty of design and the power of code. That’s how my brain works. I continue to fulfill my potential by striving to create a harmonious relationship between two separate disciplines, and have embraced this new discipline as a result. Although this mindset may appear experimental to some, leaders like John Maeda have been challenging the traditional roles of artists and scientists for years.
(read this and watch this)
There’s an enormous demand for left-brain / right-brain thinkers now more than ever. This gradual paradigm shift started years ago and is finally reaching a critical mass. Higher education is making strides to develop cross-disciplined approaches to prepare aspiring artists and engineers for the future age. Some curriculums are more enlightened than others. It seems that students have a better chance for success in a progressive program that favors innovation over status-quo.
(See Hyper Island)
The digital realm is still too young to permanently accept rules and process based on last year’s results. Realistically, we have several more decades of digital evolution before we should accept a reliable, standardized process to guide interface and interaction design. We must continue to adjust our process and motives at every turn, while questioning the pre-conceived methods defined by previous generations. Our society has merely scratched the surface of the information renaissance taking place. We have a unique opportunity and obligation to set the bar high for future generations of creators and consumers.
A good music video is bound to brighten your mood. The delivery channels for music videos have evolved over the years, but the recipe for success has mostly stayed the same. Tell an interesting story using a great song juxtaposed by stunning visuals. Artists and musicians are able to create ever expanding generes of these musical mini-films by using experimental techniques in cinematography, animation, illustration, lighting, scenery, sound design and a little bit of soul. There’s no limit to the possibilities. Here are a few fun music videos that that inspire me.
I’m reaching a threshold of epic proportions. In recent weeks I’ve gotten a lot accomplished, multiplied my opportunities and maintained an optimistic worldview. Much of this can be attributed to following the trifecta of change. When I was much younger, my father introduced me to a harmonious relationship between attitude, actions and results. Having tested his theories in a variety of academic, recreational and professional pursuits, I feel humbled by the profound impact possible by harnessing all 3 forces.
So here’s how it works:
Attitude Drives Action ★ Actions Create Results ★ Results Affect Attitude
Attitude sets the tone for human behavior. Positive and negative energies are all around, shaping your perception and affecting your mood. As emotionally intelligent beings, we choose to control the strings of our mental puppets. Attitude designers can dial hot to cold, light to dark, and loud to soft. We can never fully control our environment or our genetic makeup, but we can alter the levels of optimism and pessimism released into our consciousness. Usually life requires a delicate balance of hope and caution. For me, the best attitudes have an equal blend of positive emotion and unbiased logic.
Action is behavior. Inputs from internal and external forces affect behavior. Even forcing a simple smile on your face is a well known tactic that not only broadcasts a positive vibe outwards, but also alters your brain chemistry. Some actions have a very predictable and tangible result and others cause an unpredictable butterfly effect . The mechanics of behavior are defined by cause and effect. So if every action has a reaction then you might as well aim for desired results.
Results are the measurable output produced by activity. The more active you become, the more results will be generated. This is not to say that all actions will have a desired outcome . Some actions result in touchdowns and others cause turnovers. Achieving a goal boosts attitude levels and encourages more actions that lead to more desired results, thus maintaining a positive outlook. Experiencing a negative result often discourages repeating harmful actions. A simple attitude adjustment can often lead to different results.
This three step cycle can enpower positive changes in your happiness and productivity. I prefer to generate results that make me feel good about my world. Life is full of highs and lows, and I will be the first to admit that maintaining a winning streak is a fulltime commitment, and doesn’t always work out as planned. It’s easy to get derailed with all of life’s distractions, but don’t use past results as an excuse stall progress. When you need a jump start, just remember that the easiest and most effective force you can change is your attitude.
Rinse. Repeat. Reduce. Reuse. Recycle.
Data visualizations are all the rage these days and they won’t be going away anytime soon. Well designed data visualizations are not only delicious eye candy, but also provide meaningful ways to navigate, calculate and rationalize a body of data. There are many channels to find inspirational data vis projects, but what separates the good ones from the great ones are found in the details. Great visualizations achieve a harmonious balance of information, granularity, motion and audio. Great visualizations possess an ambient simplicity that transcends time and will remain memorable for years to come. I put together a short montage to showcase a few of my favorite data visualizations from the past few years. Some are interactive, some experimental, and some purely fictional. Watch below:
Credits, in order of appearance:
Own Your Own C
Nike ACG Sweetspots
Barcode Plantage
Uniqlo Try
Synoptic
Mark Coleran
Radiohead – Build Your Own Rainbow
BMW Efficient Dynamics
Radiohead – House Of Cards
Flight 404 – Solar with Lyrics
Synchronous Objects
MK12 – Stranger than Fiction
Porogue – Iron Man
IBM & Motion Theory
My goal as a freelance-agent-of-awesome is to primarily work from home and travel only when necessary. Honestly, I wish the rest of the free world would do the same. Still, I strongly believe that the most effective collaboration occurs when talented people are in the same room together. With that said, over-sharing can be counter-productive, and I would rather focus in solitude for the majority of my work. There are plenty enough effective communication tools in this digital age that we should all strive to exploit our mobility, be more efficient, and spend more time at home. After all, why earn wages to afford a home that you only get to enjoy on the weekends?
I like the idea of being compensated more when I produce more. Most all salary jobs pay the same whether you work 40 hours or 60 hours a week. Yes, some bosses will reward extra effort with cash or gifts, but it always feels more like a bandaid to heal a wound rather than an incentive to do it again. The incentives for hard work for the average employee is merely a carrot dangle. Some wish to climb higher in rank, some hope to get an annual pay bump, and some only work hard to keep from getting fired. Possibly the greatest incentive, and certainly the most intangible one, is the satisfaction of strengthening your craft. This progress can be achieved regardless of freelance or a fulltime employment, but it’s easier to measure your growth if you take ownership of your work.
I want to gain more control of how my time is spent. In my average work-week, there are many times where I feel like I just man my station because I get paid to be seen at a desk from 9 to 6. Sometimes there’s downtime between review cycles, or you have to wait on someone, or you finnish your task earlier than expected. Mostly this downtime gets filled with web surfing (aka “research”), senseless chit chat, gratuitous coffee breaks, or worse, pretending to look busy which is more exhausting than actually being busy. Review cycles and wait periods are unavoidable, but I would prefer the freedom to crank out 50 push-ups or play a guitar solo without receiving funny looks from co-workers. I want the freedom to leave my workstation for a random excursion without having to prepare an excuse. Most of the time all that matters is that you get the job done well and on time. So let me judge how and where my time is best spent.
I want to have more control over the projects I work on. Shops with better projects attract better talent. Everyone wants to work on awesome projects all the time, but the problem is that it’s rare for even the best agencies to keep a constant stream of sexy projects, and are often forced to do some unpleasant work to keep the bills paid. If you have no decision power on the work brought in then your are powerless to accept whatever work your boss assigns to you. As a contractor, you can refuse a project up-front if doesn’t seem worth while.
I like to work with different teams. There’s a lot to learn from so many talented people. Each shop has different dynamics, strengths and weaknesses. At the moment, it’s more attractive for me work with different teams to gain exposure of a broader range of workflows, processes, and cultures. You might compare this desire with a musician that would rather tour different clubs rather than be the house-band at only a single club.
My home-office is a controlled environment with significantly fewer distractions than a typical office complex. Any given work day in a shared office you are forced to defend yourself against a myriad of ringing phones, peripheral conversations, weekend updates, people standing over your shoulder, loud shoes, bad music, coughing, sneezing, bless you, thank you, random laughter, junk food peddling, strange smells, pets, lunch campaigns, complaining, and contagious negative attitudes. Some days are better than others, but not even the best headphones can protect you from an anxious group of co-workers on a Friday before a holiday. I admit that I’ve been guilty of all of the above at some point, but I’m just saying that I wish to be part of the solution instead of part of the problem.
One of the most uncomfortable aspects of any workplace for me are the communal facilities. From the moment you arrive in the parking lot you’re forced to play parking games to get a decent spot. Once you’re inside it seems like it’s a constant battle to maintain the perfect temperature for everyone. It either feels like an icebox or an oven, and all of the people can’t be comfortable all of the time. Lighting preference is an equally amusing struggle that ranges from flickering floods to dim dungeons. Shared kitchens are germ pits stuffed with dirty dishes, nasty microwaves, gross coffee and little accountability for tidiness or sanitation. Office bathrooms are low budget closets where you make multiple, awkward pit stops throughout the day, hoping no one accidentally walks in on you. I’m not a fan of empty towel bins, over-flowed trashcans and single-ply toilet paper. Also, I never understood why people replace the TP roll backwards. Is it preference to put in on backwards or do they even know the difference? Noxious odor bombs are sickening and inconsiderate. I’m not saying my shit doesn’t stink, but nothing beats a private facility.
I want to spend more time at home, earn more money, have more free time, refuse bad projects, work with different teams, eliminate distractions, and have more privacy. Seems logical, right. I do acknowledge that going freelance will present an entirely new set of challenges and I’m totally willing to accept the struggles along with the benefits. There’s never been a better time in my career to make this transition. I strive to remain humble and appreciative all of the opportunities that I’ve been fortunate enough to experience. I am thankful for all the inspirations, mentors and friendships that have supported my growth in this journey.
“If a man does not keep pace with his companions, perhaps it is because he hears a different drummer. Let him step to the music which he hears, however measured or far away.”
- Henry David Thoreau
It’s rare that a multitouch app truly excites me beyond mere novelty. GREG WERK has concepted and designed the next generation DJ interface using a multitouch light table. The light table DJ setup is controlled by sophisticated hand gestures to produce a simplified DJ experience. Aside from the well designed interface, I also admire the idea of standardizing club DJ systems to use multitouch gear instead of clumsy setups riddled with cables and heavy equipment. No more hauling turntable coffins, crates of records, cases of cds, laptops or mixers. All you need to jockey a light table is a jump drive. I can also envision integrating online music libraries to eliminate the need for DJ’s to carry any gear at all. Just prep your set list at your home studio (or anywhere) and show up to a gig with nothing more than your birthday suit. Watch this video for a more detailed explanation of the concept and interface.
Also, be sure to check out the concept sketches to see a little of the process behind the interface and interaction design. view process »
It’s true, I’m a sucker for good quotes. I recently read the inspirational book Four Hour Work Week by Tim Ferris, which was pleasantly enriched with many of the quotes listed below. For more inspirational antidotes you can also graze my previous post Words of Wisdom or check out a few of my favorite programming related quotes.
By working faithfully eight hours a day, you may eventually get to be a boss and work twelve hours a day.
- robert frost
It is far better for a man to go wrong in freedom than to go right in chains.
- thomas h. Huxley
Liberty means responsibility. That is why most men dread it.
- george bernard shaw
All courses of action are risky, so prudence is not in avoiding danger, but calculating risk and acting decisively. Make mistakes of ambition and not mistakes of sloth. Develop the strength to do bold things, not the strength to suffer.
- niccolo machiavelli
The factory of the future will have only two employees, a man and a dog. The man will be there to feed the dog. The dog will be there to keep the man from touching the equipment.
- warren g. Bennis
Whenever you find yourself on the side of the majority, it is time to pause and reflect.
- mark twain
Anyone who lives within their means suffers from a lack of imagination.
- oscar wilde
An expert is a person who has made all the mistakes that can be made in a very narrow field.
- Niels bohr
Ordinarily he was insane, but he had lucid moments when he was merely stupid.
- heinrich heine
Reality is merely an illusion, albeit a very persistent one.
- albert einstein
The first principle is that you must not fool yourself, and you are the easiest person to fool.
- richard p. Feynman
I can’t give you a surefire formula for success, but i can give you a formula for failure: try to please everybody all the time.
- herbert bayard swope
Many false step was made by standing still.
- fortune cookie
Named must your fear be before banished it you can.
- Yoda
Action may not always bring happiness, but there is no happiness without action.
- benjamin disrael
I am an old man and have known a great many troubles, but most of them never happened.
- mark twain
The reasonable man adapts himself to the world; the unreasonable one persists in trying to adapt the world to himself. Therefore all progress depends on the unreasonable man.
- george bernard shaw
The existential vacuum manifests itself mainly in a state of boredom.
- viktor frankl
One does not accumulate but eliminate. It is not daily increase but daily decrease. The height of cultivation always runs to simplicity.
- bruce lee
Perfection is not when there is no more to add, but no more to take away.
- antoine de saint-exupery
What gets measured gets managed.
- peter drucker
What information consumes is rather obvious: it consumes the attention if its recipients. Hence, a wealth of information creates a poverty of attention and a need to allocate that attention efficiently among the over abundance of information sources that might consume it.
- herbert simon
Reading, after a certain age, diverts the mind too much from its creative pursuits. Any man who reads too much and uses his own brain too little falls into lazy habits if thinking.
- albert einstein
There are many things of which a wise man might wish to be ignorant.
- ralph waldo emerson
Learning to ignore things is one of the great paths to inner peace.
- Robert j. Sawyer
Do your own thinking independently. Be the chess player, not the chess piece.
- ralph charell
Meetings are an addictive, self-indulgent activity that agencies habitually engage in only because they cannot actually masturbate.
- dave barry
A man is rich in proportion to the number of things he can afford to let alone.
- henry david thoreau
Nobody can give you freedom. Nobody can give you equality or justice or anything. If you’re a man, you take it.
- malcom x
The first rule of technology in business is that automation applied to an efficient operation will magnify the efficiency. The second is that automation applied to an inefficient operation will magnify the inefficiency.
- bill gates
The man who grasps principles can successfully select his own methods. The man who tries methods ignoring principles is sure to have trouble.
- ralph wlado Emerson
Genius is only a superior power of seeing.
- john ruskin
I not only use all the brains that i have, but all the brains i can borrow.
- woodrow wilson
Creation is a better means of self expression than possession; it is through creating, not possessing, that life is revealed.
- vida d. Scudder
This is the very perfection of man to find his own imperfection.
- st. Augustine
To be free, to be happy and fruitful, can only be attained through sacrifice of many common but overestimated things.
- robert henri
If you don’t make mistakes, you’re not working on hard enough problems. And that’s a big mistake.
- frank wilczek
Being busy is a form of laziness-lazy thinking and indiscriminate action.
- Timothy Ferriss
Understanding what users want to do, what they actually do and how they feel about using a system defines the effectiveness of any digital experience. Function and interface are the core ingredients for most digital projects, but there are many more intangible elements that help dictate a user’s actions and perceptions. An awesome user experience is much more than data, pictures and buttons. It’s the transition between views, how a button animates, knowing when to emphasize the interface and when to hide it. Ultimately, all of these ingredients add up to form an emotional reaction that determines the product’s overall success.
There are endless approaches to planning digital experiences. Some teams place these decisions on various designers, developers, researchers and directors. Sometimes the user experience is drafted in a silo by information architects months in advance of any design work, and sometimes it’s improvised in the middle of a project’s creation. I can say there’s no single formula that works for every project. The best projects seem to achieve a delicate balance of planning, reflection and iteration. Predicting human behavior is arguably the most powerful skill you can have as an interaction designer, architect, engineer (insert title here). You can draft a 300 page functional spec document, with use-case flows, personas, and wireframes annotating every detail of every view, but if the final outcome doesn’t result in a positive emotional reaction then all you’re piles of strategy will be perceived as a failure.
It’s the balance of dreaming big and being pragmatic that that will help you reach meaningful goals. Big dreams tend to incur big production costs, and pragmatism often limits creativity. So it’s important to have a reliable set of tools that helps you to not only dream big, but also get the job done fast.
Here are a few resources to add to your UX toolbox to help you draft, sketch, research, revise and execute ideas faster.
Smashing Magazine is pretty much a no-brainer for web designers and developers looking for round-ups. Here is a great round-up of printable sketching, wireframing and story boarding templates.
Balsamiq is an Air app that allows for easy drag-n-drop interface wireframing. It provides a robust asset library, generates xml, and also has a pretty nice presentation mode.
UX Magazine is a community of gurus from around the world that publish articles on the psychology of users and much more.
UX Booth showcases tips and ideas dedicated to user experience professionals.
UI Patterns hosts a collection of categorized interface components that not only lists different ways of solving common design problems, but also rationalizing about how, when, and why such solutions should be used.
Slideshare has a plethora of presentations from other industry professionals on user experience.
If you’re like me then WordPress is your publishing engine of choice. There are many reasons to love WordPress and many resources to help pimp your WordPress site (WordPress.org first and foremost). However, every time I install a new WordPress site I find myself searching the same old resources like Smashing Magazine, InstantShift and Tutorial 9 to quickly grab a decent theme. I love scrolling through those articles, but after jumping through the same hoops to end up at the same boring broken themes, I finally started keeping a log of other independent sites dedicated to designing and distributing hi-end themes. Some for free and some for pay. So here’s my latest collection of WP theme galleries if you need a quality theme fast or if you’re simply just looking for inspiration.
I started collecting words of wisdom in my journey to become a wise man. Perhaps I would be further along in my journey if I would have written down all of my father’s advice throughout my life. I hear and forget, I see and remember, I do and understand. It’s often that you hear a quip stream of syntax but don’t know how it applies to your current goals. It was difficult for me to know the importance of my father’s advice the first time he told me “if you don’t know where you’re going any road will do“. Over time it seems like everything “father-Confucius” once told me has become useful. Perhaps we are unable to appreciate good advice until we’ve experienced a wrong decision. Maybe one day I will be able to pass on my collection of advice and help someone else make a wise decision before a wrong one is experienced.
Here are a few words of wisdom that I try to follow:
- If you’re not proud of it, don’t serve it.
- Know your strengths and your weaknesses.
- Be aware of what is not obvious.
- Don’t do anything useless.
- Find the simplest way it can possibly work.
- Never ask anyone to do anything you are not willing to do yourself.
- Don’t talk about what you’re going to do. Show what you’ve already done.
- There is an answer for everything if you ask the right questions.
The Evoluce One is probably the best multitouch display surface I’ve seen. It’s hi-def LCD screen supports unlimited touch points and gesture controls that can be detected from up to half a meter away. That’s one step close to minority report! (And Steve Jobs thinks we have no need for hover-states on multitouch interfaces.) Evoluce makes a strong case that sometimes it’s better to NOT touch the screen simply because it’s more sanitary. Do you want to touch your expensive screen when your hands are messy in the kitchen, in surgery, in the gym, in a restaurant, etc. I also really like that it supports apps built in Flash, Silverlight, HTML as well as OS-specific gestures.
read more: Evoluce One product description
If you’re like me then you enjoy the freedom of creating web apps rather than device-specific native apps. There are tons of devices and platforms to juggle, but you should certainly ramp up on Apple’s Safari mobile platform if you haven’t already. If you want your website to look sexy on the iPadz then you need to get on-board. It’s an exciting time to start creating mobile web apps. There’s a lot of momentum behind a “better web” and light-weight mobile web-apps are paving the way. Several different groups are really pushing the needle by requiring strict semantic web markup to take advantage of Webkit and help define a new era in “web standards”. The truth is that it’s not all that hard to optimize your website for an elegant mobile experience. If you already write standards-compliant markup then it’s just a matter of expanding your vocabulary a little. Look at all the big players that made “iPad ready” websites in such a short time:
There’s a lot of documentation to dig through if you’re trying to target web apps on mobile devices, so it’s important that you choose a good starting point so you know what’s possible and don’t waste time doing things the hard way. To speed up your research visit the following resources in this order to learn how to get started creating web apps today:
Designing for iPad: Reality Check
iPhone Web Dev on Google Groups
Well Placed Pixels
29 Sexy iPhone App Designs
25 Great Examples of iPhone Optimized Sites from Abduzeedo
38 iPhone Sites from Web Designer Wall
CSS iPhone
This Flash animation by Renaud Hallée showcases the rhythmic beauty of music.
When you’re done searching Pitchfork, Alarm, iTunes or Last.fm for legitimate music, where do you go for good music? I try to keep my eyes and ears to the ground, but quality downloads can be hard to find. Luckily there are a few sites that share quality tunes for free. Gotta love free music. Especially when it rox!
I begin teaching at The Creative Circus part time here in Atlanta, starting April 5th. I will be joining the Interactive Development program to teach an intro class discussing web standards, html, css, js & more. This is an exciting time to explore front-end web development because there’s a mass convergence of adopted “best practices” along with an entirely new set of standards for both current and emerging platforms. I will have 10 weeks to convert Padawan into Jedi, and prepare eager students for their long journey towards greatness. I look forward to sharing our progress and stories.
There has certainly been a recent surge in twitter-related data visualization. People love to aggregate all the online chatter into visualizations that are easy to digest. This a good way to identify trending topics and popular thought. Tweetlection, built by Sense Internet, is a interesting new online tool that harvests and analyzes thousands of tweets each day so that you can see what Tweeters have been saying about the three main political parties in the past 7 days. They use interactive graphs to let you explore how twitter users have reacted to the events of the last week. You can drag and select a particular time period, use key words to focus on a particular topics and see how Tweet volumes for this topic have varied over time.
Kid Cudi, DJ Green Lantern & Broke Mogul – How To Make It In America: The Mixed Tape
Meshuggah – Alive, ObZen, Destroy Erase Improve, Nothing
Omar Rodriguez Lopez – Xenophanes
The Souljazz Orchestra – Rising Sun
Ellie Goulding – Lights
Cubesato – Sounds
Bear In Heaven + Cymbals Eat Guitars – March 11th @ The Earl
The Morning Benders – March 13th @ Drunken Unicorn
The Mercury Program – March 18th @ The Earl
Toro Y Moi – March 22nd @ Drunken Unicorn
Yeasayer – April 6th @ Masquerade
Red Sparowes – April 9th @ The Earl
I’ve been called a lot of names in my life and I’ve also had many different titles in my short career of making websites. My general attitude has been that titles are bullshit. What matters more to me is how meaningful the work can be, how much personal time I’m allowed, and how much I get paid. Defining a niche skill set has always been important, but has it’s taken a few years for me to be able to clearly articulate my craft as a simple title that makes sense. Generally speaking, I’m an analytical driver that isn’t afraid to rock the boat. My social behavior style influences how I work, and has often stretched the boundaries of any given title.
Often, titles are either overly generic, too verbose, or altogether misleading. I’ve come to accept the fact that names and titles are as interchangeable as jersey numbers on a basketball team. I’ve never been satisfied being the hands for other visionaries, playing songs in a cover band, or riding-bitch in a clown car. I’ve always had a desire to collaborate on original projects that sit at the intersection of art and science. Some people don’t believe that anyone can truly be successful unless you focus all your energy into one single craft. You’ve probably heard people say “Do one thing well”. Well my response asks why not do many things well? It’s a matter of individual potential I suppose. The same people that preach “Do only one thing well” often perceive a multi-tasker as a Jack of all trades, master of none. While, I do see value in being focused, I also believe that when your only tool is a hammer you will perceive all your problems as nails. Why not strive to be a Renaissance-Man if it’s in your nature? What kind of world would we be living in if Leonardo da Vinci didn’t paint the Mona Lisa and invent the helicopter? What kind of world would this be if Benjamin Franklin didn’t create the lightening rod in addition to co-authoring the Declaration of Independence? (Discuss amongst yourselves) The point I’m trying to make is that life is not a series of forks in the road where you are forced to choose between the red pill or blue pill. For me, life is more dynamic.
We live in a world that needs multifunctional smart-phones, swiss-army knives, 6-speed motorcycles, and athletes that have just as good of a short-game as a long-game. My professional path includes many disciplines including design, development, animation, leadership, fellowship, speaking, listening, instructing, and above all, learning. Today, if asked “what is my tile?”, I would respond that I’m an “Interface Designer“. What does that mean to me?
The planning and execution of digital interactions through words, sounds, graphics and motion to deliver compelling user experiences.
Here are a few other titles that I’ve had the awkward pleasure to be called in my modest career:
Designer
This term is too broad for me. The core meaning of “design” is to “plan” with intention and purpose. Design can be applied to any craft (fashion, music, food, graphics, architecture, etc.) Any task that has purpose requires some degree of planning and thus some degree of design. “If you fail to plan then you must plan to fail.”
Interactive Designer
This title has historically been synonymous with “Web Designer” or “Interface Designer”, but more recently has evolved to describe the role of a user experience architect that applies behavioral sciences to the use of device interaction. Read more here »
Web Designer
Ok. Duh. This is the skill of presenting information for the internet. This title is becoming more diluted in a digital age where not every information system is connected to the internet at all times. I think the title Web Designer should be left to spiders.
Media Designer
Media is a trendy term used by art schools to classify a curriculum that involves the “digital” arts. In the “real world” media can mean Print Media, News Media, Media Buying, Disc Media, Mass Media, and rarely relates to what someone learned in Art School Confidential.
Technical Designer
I’ve heard people use this title in a desperate attempt to describe the function of someone that understands programming but also has a keen eye for design. The problem I have with this title is that it’s redundant. To be a designer, you have to be technical. To me, the word “technical” implies “precision” more than “code”, and who wants a designer that isn’t precise?
Creative Technologist
While I do like this title, it’s not for me. To me, a Creative Technologist is someone that combines a robust mix of technologies to deliver custom IT solutions. This person is an engineer, a leader and a visionary.
Front End Developer
This title has been given to people that make sure that the data coming from the back-end gets displayed in the browser in an elegant manner. They make sure it looks as close as possible to the design comps and that users can navigate effectively. This title scares me because
project-manager types often pigeon-hole you as a “coder” if the word “Developer” is in your title.
Presentation Layer Developer
The Presentation Layer is the 6th layer of the OSI model and is a misleading title for anyone that’s not a network engineer. This term is one of the most widely misused and misunderstood titles applied to people that write html, css and javascript.
Hybrid
This title is intended for anyone that has both design and development skills. Executives may think this sounds good at first because they can pay one person for the price of two roles. This title confuses project planners and can sometimes sets expectations too high for one person to accomplish miracles in a short amount of time. Let’s face it; even hybrid cars will eventually die out when innovators manufacture a more efficient machine.
In conclusion —
My hopes are to continue influencing industry leaders to understand and accept the function of the Interface Designer. I want to help grow this discipline into a role that every team can embrace. I want people to feel comfortable knowing what to expect from each team player. As the digital age continues to evolve so will the roles, skills and titles of future knowledge workers. My title is a moving target that works for me today.
Graffiti Analysis is an extensive ongoing study in the motion of graffiti. Custom software designed for graffiti writers creates visualizations of the often unseen motion involved in the creation of a tag. Motion data is recorded, analyzed and archived in a free and open database, 000000book.com, where writers can share analytical representations of their hand styles. All tags created in Graffiti Analysis are saved as Graffiti Markup Language (GML) files, a new digital standard used by other popular graffiti applications.
I’ve been with IQ Interactive since August, 2007 and it has come time to say goodbye and say hello to my new home at Iconologic. I’ve enjoyed working with such an amazing cast of characters at IQ and will dearly miss this great team.
Iconologic is a brand-design agency in Atlanta that does some excellent work for Coke, André Benjamin, and the Olympics to name a few. Their shop is located just a short bike ride away from my house. I will join this team on February 22 and will be working closely with a tight-knit team of designers and developers. My role as Interactive Designer will help bridge the gap between vision and execution for all things digital. I’m excited to start this new chapter in my life and make some magic happen with my new family.
Dear City of Atlanta,
Please pave Bellemeade Avenue. This high-traffic, two-lane bus route connects Howell Mill to Northside Drive and is in dire need of paving. This road is riddled with broken asphalt, puddles and potholes. Let’s be honest, there are better roads in Afghanistan. There have been many futile efforts by the city to patch the bad spots, but this road seems to get worse every day. It’s time to put some tax money to work and pave this highly used 1/2 mile stretch of road. Unfortunately, there’s no easy method to submit roads to get re-paved on the City of Atlanta’s website. The Report a Pothole service is inadequate at best. Nevertheless, I’m sure that Atlanta’s high-paid team of diligent researches will find my plea and resolve this issue in a timely manner.
As the digital landscape continues to evolve so does the modern home page. While there are vast differences in website interfaces for the desktop, mobile and beyond, a trend that reins king is the One-Pager. The one-page hero product concept has been around for quite some time, but only recently has it been established as a standard design practice popularized by legions of iPhone app websites. You’ve seen them: giant buttons, glossy graphics, rounded corners and pixel-perfect views of the featured app wrapped snug inside a life-sized iPhone. All the facts and features can easily be summarized into a single bite-size webpage that caters to our limited attention span.
Here are some of my favorites:
These days my home studio is a minimal setup including only a laptop, an acoustic guitar and a stool. However, I’ve had the pleasure of visiting several different home and professional recording studios over the years and I’ve always been amazed at how each space is unique and inspiring in their own light. If you like drooling over beautiful studio spaces as much as me then be sure to check out the full studio collection of CheeWee Ong. – view here »
I work at a digital advertising agency in Atlanta GA that is currently renovating a new office space which should be finished by March 1st. I’ve been privileged enough to provide feedback regarding floorplan arrangements, furniture, display visualizations and overall atmosphere. In doing a little research it’s easy to find a lot of really inspirational office spaces that facilitate great people doing great work. Here of some of my favorites:
I finally got a chance to comb through all the session topics posted on the Mix10 Session Calendar and here are the ones that interest me the most. These topics include design / user experience / animation / multitouch / workflow & collaboration.
Total Experience Design
Media Processing Workflow
Great user Experiences: Seamlessly Blending Technology and Design
Total Experience – A Design Methodology for Agencies
Syncing Audio, Video and Animations in Silverlight Applications
Great user Experiences: Seamlessly Blending Technology and Design
From Comp to Code: A Design Communion
Flash Skills Applied to Silverlight Design and Development
Developing Natural User Interfaces with Silverlight and WPF 4 Touch
Creating Effective Info Viz in Silverlight
Multi-touch Interaction Desin for Kiosks and Architectural Experiences
Prototyping Rich Microsoft Silverlight 4 Applications with Expression SketchFlow
Dynamic Layout and Transitions for Microsoft Silverlight 4 with Microsoft Expression Blend
Creating Great Experiences Through Collaboration
This flamenco inspired tune is short and sweet. I recorded four different guitar tracks on my laptop’s built-in microphone using GarageBand. I managed to have fun with this session despite my choppy rhythm.
Like winning prizes? If yes, then you should know about several Silverlight contests you can enter to win big. You could win a few MIX10 passes, t-shirts and even $50,000 cash. It seems like new Silverlight contests keep popping up every day. I like seeing more crowd-sourced pitch competitions. If you have the skills and the bandwidth to spare then the reward might be worth your risk. Check out the links below for more details –
My session topic has been entered into a ballot for the 2010 MIX Conference.
Please vote for me!
Session Abstract:
Discuss how to create innovative interface designs using Blend for Silverlight. See how to convert artwork to components with ease. Explore custom skinning, state transitions and fluid animation. Apply behaviors to change states and properties to dial in elegant interactions. This session might be your bag if you enjoy interface design, animation, xaml and no serious coding.
Vote here:
http://visitmix.com/opencallvote/Entry?entryId=LIGHTI011
IMPORTANT: You must select 5 entries for your vote to count.
Please vote for my man Roger Peters too:
http://visitmix.com/opencallvote/Entry?entryId=DEVELO061
As the healthcare industry begins to adopt electronic tools, the tracking of health and wellness information is still largely fragmented and often paper-based. Microsoft wanted to change this paradigm by empowering consumers to store, track and manage their own health information in a single, easily accessible, online location. The talented team at iQ Interactive answered the call with
My Health Info, a dashboard-based health management resource that offers users simple views of their personal health information through customizable dashboards and widgets. Built on Silverlight, My Health Info also allows for third-party widget development and licensed dashboard integration. The dashboard is still in beta and the full release is scheduled for February 2010.
The video below demos the dashboard and HealthVault connection, presented by Microsoft’s David Cerino at the Health 2.0 conference in San Francisco.
I had the pleasure of having lunch today with a few of the fine people at
W. Scott Chester Photography. Among other things, we discussed cool photography portfolio websites and thought I’d share some of my favorites here.
Natasja Fourie
http://www.natasjamariafourie.com/
Seo Hiroshi
http://www.seohiroshi.com/
Jeremy Cowart
http://jeremycowart.com/
Ciril Jazbec
http://www.ciriljazbec.com/
Andrew G Hobbs
http://www.andrewghobbs.com/
Joshua Sterns
http://www.joshuastearns.com/
Simon Mark Whitten
http://www.smwphotography.co.uk/
Franziska Krieck
http://www.foob.de/
Henri Derudder
http://www.digitalic.org/portfolio/
Robin Skjoldborg
http://www.robinskjoldborg.com/
Erik Reis
http://www.erikreis.com/
Martin Chichov
http://www.chichov.com/
Saso Kos
http://www.sasokos.com/
Janis Breslin
http://www.janisbreslin.com/
Cristof Echard
http://www.cristof-echard.fr/
Fabio Lana
http://www.fabiolana.com/
Emmanuel Rouzic
http://www.emmanuelrouzic.com/
Cake Factory
http://www.cake-factory.com
Sean Kennedy Santos
http://www.sksantos.net
Vault 49
http://www.vault49.com/
Alexandra Hager
http://www.alexandrahager.com/
Rafael Assef
http://fillphotographic.com/
Jonh Wright
http://www.johnwrightphoto.com/
Timothy Hogan
http://www.timothy-hogan.com/
rw2 Studios
http://www.rw2studios.com/
In this brief tutorial I will show how you can create your own custom accordion menu from scratch. We will be using Behaviors so that you won’t need to program a single line of code. Please be aware that there are many ways to create custom controls depending your desired end result, and this particular solution may not be perfect for every situation. However, the purpose of this tutorial is to help encourage you to think outside the box and create your own UI without the fear of “re-inventing the wheel”.
When people hear the term “custom control” or “custom component” they usually assume that extra time and cost are involved in creating something custom. Well, this is not always true. In fact, you may actually save time by making your own UI that fits your exact need without the extra overhead. The accordion control is a good example of a UI element where you may want to create one from scratch instead of using the default control as a starting point. Out of the box, the accordion control does what you would expect, but skinning can be cumbersome and frustrating for designers. You may spend a lot of time removing and replacing default skin elements, and you don’t always see all of your content at design time, which can cause some guess work. The accordion menu is actually pretty easy to deconstruct and emulate using states and behaviors.
So here’s how I did it:
1. In Blend, design the look and feel of your accordion menu. Make sure you are happy with the first item in your menu before continuing further. We will clone this first menu item to generate the others, so it’s better to get it right the first time. Add graphics, text, and whatever else you want. After you are happy with your look and feel, add a button on a layer above your artwork and text. You can easily make this an invisible button by editing it’s template and adjusting the alpha to 0%. The reason we added an invisible button is so that we will be able to apply mouse events to our menu item. Group all of these assets into a Grid.
2. You can now create each additional menu items based on your first item. Duplicate your first Grid and position each duplicate Grid below the previous. Repeat this as many times necessary until you have reached the total number of menu items.
3. Create a state for each view of the accordion menu using the visual state manager (VSM). Create states for each expanded position for each menu item. Add some animation between states. After all, one of the main reasons you chose Silverlight is to provide a “rich” user experience.
4. Using behaviors, you can add the expand & collapse functionality to your menu. Add the “GoToStateAction” to each button by dragging the behavior from the Assets panel onto each button. If you now select this behavior in the Objects-and-Timeline panel you can edit its properties. Modify the behavior properties to define your mouse events and state targets. I chose the “MouseEnter” event, but feel free to select from any of the event types. Assign a target name to the user-control (which is the top-most parent container) and assign a state-name that the button should trigger. For example, button1 will trigger state1, button2 will trigger state2, etc.
5. Now that you’ve created your menu states and added behaviors you can publish your custom accordion and preview in the browser. Good luck!
This a good question with many different answers. First, always remember the basic rule of “garbage in, garbage out“. With that said, the first place to start is with a clean and organized PSD. That means naming layers appropriately, deleting unnecessary and hidden layers, flattening complex layers, and most importantly, good design. For beginners, the best approach I’ve found is to import your PSD or AI files into a “test” project and consolidate your assets into grids, canvases, stack-panels, etc. After you have clean xaml then it’s safe to port assets over to your real project. Please be aware that many of Photoshop’s filters (shadows, glows, etc.) get converted to data paths in xaml, and can be tricky to work with in Blend. I’ve found that it makes life easier if you are able to use your imported artwork as a locked guide layer and re-create as much of the artwork as possible in Blend. This may sound tedious, but it will make your xaml easier to work with in the long run. Another thing to note is that masks in Photoshop do not translate to Blend. It is best to flatten layers using masks in Photoshop before importing to Blend. You may also run into frustrations when trying to apply custom styles to user controls. The best approach that I’ve found is to “edit a copy” of the default template and manually edit each part of the user-control one at a time. Simple UI elements are easy to convert to controls, such as buttons, but more complex controls such as the scroll-viewer require a more manual approach to customize.
I will be the first to admit that it takes some trial-and-error to optimize your process and technique. Patience is required, so don’t give up too soon.
If you want to see and example of a Photoshop design converted to a usable project in Expression Blend then take a look at this demo, presented for the Atlanta Silverlight Firestarter:
Thanks to Information Aesthetics, I stumbled upon the recent FIFA Earth visualization, showcasing more than 2 million daily soccer video games. This visualization easily demonstrates how big soccer is. I am impressed with how smooth the interface moves with such a large dataset. Here’s what Andrew Vande Moere has to day:
Fifa Earth [easports.com] visualizes data from about 2 million FIFA 10 EA Sports football / soccer games played each day. The online “data visualizer” consists of 3 distinct live and interactive elements. “Fifa Buzz” shows recent Twitter messages that contain key words or hash-tags such as ‘Goals’, ‘Fussbal’, or ‘Soccer’, or any other number of searches such as players ‘Rooney’, ‘Benzema’, or ‘Xavi’ that relate to FIFA or football. These tweets are geo-located and time-coded and placed in real-time on a 3D football-shaped globe. “Live Competition” lists the total number of games played around the world (38 million and rising), number of goals, wins, losses, and draws, while it can also display the complete match history of every game played to date. Clicking through the “History” link of each team conveys a bar graph of past performance data. In “The World Plays”, countries are ranked accordingly to the play data.
The potential size of the visualized dataset is immense. With over 2 billion (!) video game matches played last year, resulting in about 40 millions goals scored, it brings the competitiveness of players together.
Pico is an interesting animation by visual artist Takafumi Tsuchiya featururing the Samurai Jazz Quintet (SJQ), an experimental Japanese glitch jazz group.
Adobe just released beta 2 of Flash Catalyst with lots of new stuff and improvement. It will be interesting to compare the release candidate of Flash Catalyst with Expression Blend. I think both have their strengths and weakness, but I’m pretty anxious for Adobe to release Catalyst so that I can make a fair analysis.
In other exciting news…Adobe annoucned an intersting work-around for iPhone development using Flash.
Flash Professional CS5 will enable you to build applications for iPhone and iPod touch using ActionScript 3. These applications can be delivered to iPhone and iPod touch users through the Apple App Store. A public beta of Flash Professional CS5 with prerelease support for building applications for iPhone is planned for later this year.
Diego Stocco came up with a quadruple-neck experimental instrument called “Experibass”. To play it he uses cello and double bass bows, a device built with fishing line and hose clamps, a paintbrush, a fork, spoons, a kick drum pedal and a drum stick. Very cool!
While reading the October issue of Wired magazine I noticed that more and more advertisements are using 2D barcode tags to enrich different ad campaigns. My eye is immediately drawn to the digital tags at the bottom right corner of the page, skipping over the enticing headlines and sexy photography, hoping to interact with the cryptic little shape that could unlock hidden secrets to the universe – or in most cases just launch a website with more advertising. Digital tagging is essentially the evolution of primitive barcode technology from the 1950′s. However, consumers today’s are able to interact with 2D barcodes using mobile phones in ways never thought of before. I see the potential value of this technology in our daily lives, but I’m also skeptical. Digital tags are a trendy new trick for advertisers, but will they evolve into something more useful in the near future? Imagine a marketplace where you can locate, research, scan and purchase all of your groceries with your cell phone. I’m sure the legions of iPhone developers are already building apps that do just that. There are hundreds of potential applications of digital tagging that can add convenience to the marketplace. It will also be interesting to see all the different experimental application of digital tagging, such as tagging in gallery installations, street graffiti, and kiosks.
Two of the leading 2D barcode technolgies are Microsoft Tags and JAGTAG.
Microsoft Tags are high capacity color barcode that serve websites at the snap of a photo, but you have to download the app to your phone first. JAGTAG is a competing 2D barcode technology that does not require you to download an application prior to requesting tag’s related content. See examples below:
Check out this animation from Google Japan demonstrating How Google Earth Works. I like how well they are able to translate something so technical into such an easy-to-follow process.
The contemporary art museum, Fondation Cartier is currently exhibiting Grafitti Taxonomy: Paris 2009.
The project contains a repository of about 2,400 graffiti tags found in Paris France. Each tag can be explored to discover calligraphic-like similarities between individual text characters. The 10 most commonly used letters were identified for further study (i.e. A,E,I,K,N,O,R,S,T and U). From each letter grouping, 18 tags were isolated to represent the diversity and range of that specific character.
I just saw this behind-the-scenes footage today, but it has been up for about 3 months. What you’re seeing is two typographers, Pierre & Damien, and a pro race pilot, Stef van Campenhoudt, collaborating to design a font with a car. The car movements were tracked using a custom software, designed by interactive artist Zachary Lieberman.
Here is a demo of a little song I wrote called “Paco Rouge”. This song is a latin-inspired acoustic jam. It’s helpful for me to record a few trial demos to really get a song down before setting up a formal studio session. This demo only includes a few layered acoustic guitar tracks. It needs a few electric guitars laser beams with some funky jazz riffs accompanied by some percussion and spicy piano licks.
Paco Rouge original:
Paco Rouge
Also, for fun, I mashed up a few additional sample tracks to experiment with different soundscapes. Featured artists include Yeasayer, Young Jeezy, Bower Birds, Fleet Foxes, Grizzly Bear, Animal Collective, A R Rahman, Of Montreal, and Radiohead.
Paco Rouge remix:
Paco Remix
I’ve been using Expression Blend for a couple months now and have been collecting a wish list of feature requests and UI updates that would help make Blend become a more competitive design tool. Blend has a lot of potential, but it’s still a long way off from becoming the tool of choice for most interactive designers. You can review my wish list below. I apologize for the brevity of most of these items. It would probably be more clear if I provided you detailed user-scenarios with before-and-after screenshots for each item, but I hope my humble list can suffice for now. Please let me know if you have any feedback or if any of my wishes have already been granted.
- Create a version of Blend that can be installed on OS X.
- The ability to use tracking & kerning in typography.
- Allow a way to enable anti-aliasing through the interface (not just with xaml).
- Some sort of “Paste in Place” feature so I can paste an item into a grid without it inheriting its same margins from before. Instead it would past into a place that is visually the same as where it was. Meaning that the margins would have to auto calculate themselves to their new values.
- Allow users to drag project assets from any directory to any other directory inside the projects panel. I can do this in Visual Studio but not in Blend.
- Allow the ability to export different file types from blend (jpg, png, wmv, mp4, etc.)
- Allow the 3D rotate tool to be manipulatable on objects on the stage instead of only the tiny orb icon in the 3D rotate panel.
- When creating custom styles Blend should promote using Resource Dictionaries by default to help generate cleaner and more maintainable xaml.
- When deleting items from an xaml control that uses a resource dictionary for it’s style, Blend should prompt a dialog asking “Do you also want to delete related style in resource dictionary?” This will help reduce the amount of unnecessary generated xaml.
- Support for expanding and collapsing XAML nodes in the Blend code editor (Similar to Visual Studio).
- Set default border and stroke thickness to “0″ instead of “1″. (Why assume I want to have strokes by default?)
- It would be nice to have a “yes to all” option when re-loading files edited outside of Blend. (It’s not very fun having to click the “yes” button 20 times everytime I do a svn update).
- Allow users to create their own keyboard shortcuts.
- Rectangles and Ellipses should not be organized with Controls. They should be treated as “Shapes”.
- Combine Find and Replace into the same display window.
- Allow Find & Replace support for fonts, colors, and bitmaps. (not just text).
- Show total number of occurrences for find-and-replace when executing “replace all”.
- Add the ability for Shift+F3 to find previous result.
- Have a “wrap search” option for find and replace instead of only “Up” and “Down”.
- Allow negative values for text Line Height (currently throws a catastrophic failure).
- When drawing a line allow the user to hold the shift key and draw a perfect horizontal or vertical line.
- Be able to click and drag to select multiple keyframe on the animation timeline (like After Effects). It’s not very fun to select 20 keyframes by having to shift+click 20 times.
- Enable proportional scaling on shapes and objects when holding the shift key.
Ability to lock units to whole numbers (not having a zillion decimal places).- Combine the “Translate Transform” and “Center Point” tabs into the same panel. They serve a very similar purpose, and it’s currently confusing that these features are separated.
- Show a visual indicator on the stage for the Transform property “center of rotation”.
- In the Objects and Timeline panel, allow the ability to select/deselect multiple eyeball or lock icons in a single mouse stroke. (like Photoshop, Illustrator, Flash, InDesign, After Effects, etc.)
- Be able to select and copy text from the results panel.
- The ability to double click a control to navigate into it’s template.
- Display a ruler so i can measure things in Blend.
- Add the ability to display guides so that I can visually align elements easier.
- Be able to show and hide the date picker user control in Blend.
The Atlanta Silverlight community came together to share tools, tips, and tricks of the trade for the 1st Annual Firestarter. In addition to several notable local Atlanta presenters, we were also lucky to have the support of Tim Heuer from Arizona and Rob Zelt from North Carolina. This was my first debut on the Microsoft circuit and my first time presenting an Expression Blend lesson. I shared a session with Smarty Pants presenting “Lighting Up the UI”, which explores skinning custom interfaces, designer-developer workflows, animation techniques, and the visual state manager.
Lighting up the UI demo links:
Virtual gravity is an interface between digital and analog world. Virtual data can be transported from a loading screen to an analog scale. Search terms can be weighed physically and compared. Digital data get an actual physical existence and become a sensually tangible experience.
Here is a short little film that I helped create recently for the Atlanta 24 Hour Film Race.
This was truly an honor to get to work with such a great group of people.
Team:
Zach Cowan: Director, Camera Op, Video Editor
Edgardo Santiago: Executive Producer, Audio Design
Holly Simpson: Writer
Art Director: Marisa Riojas
Jaimie Moore: Acting
Charles Barbour: Acting
Barry Bond: Composer
Stefan Sokal: Motion Design
Mason Brown: Lighting, Acting, Motion Design
There has been a decent bit of chatter on the interwebs lately about the advantages and disadvantages to the rival platforms of Adobe’s Flash & Flex versus Microsoft’s Silverlight. There are many strong feelings, mostly from coders, on both sides of the debate with valid points supporting their standpoint. I view this level of competition against rival rich-media platforms is a good thing for designers and developers. While I agree that Microsoft has a lot to learn from Adobe from a standpoint of a designer friendly workflow, I also see that Adobe is able to adopt features and best-practices established by Microsoft’s vast experience in enterprise development. After all, I think the collective goal of designers and developers is to “make cool shit faster”, so who-ever is able to meet this criteria will ultimately be king of the hill.
Here are a few quotes to further illustrate some of the passionate oppositions recently published from both Flash and Silverlight platform advocates:
Flash platform advocate: published by: Jan Ozer
“…Microsoft needs Silverlight to succeed far more than most companies need Silverlight. From a marketing perspective, that’s like pushing the back end of a rope in the hopes that you’ll drive the front end in the target direction. It almost never happens.”
“If Microsoft dropped Silverlight tomorrow, most web site owners and ‘Netizens’ wouldn’t even notice, or care if they did.”
“Flash caught on because it provided design functionality that HTML couldn’t match and solved problems that no other technology could. It succeeded because website designers, developers and owners wanted it, not because Adobe needed it.”
Silverlight platform advocate: published by Alex Vanderberg
“The cost of delivering complex business functionality with Silverlight is likely to be significantly less than doing so with Flash/Flex.”
“Actionscript 3, as an object oriented language it lacks many features Java or .NET developers will take for granted.”
“Flash/Flex developers have years of experience of making good looking applications, but they don’t always write solid maintainable code. This is understandable, given the lack of enterprise Flex projects there have been to this point.”
For a more unbiased comparison read the article Flash vs. Silverlight: What Suits Your Needs Best? from Smashing Magazine.
The visual pattern 555 KUBIK is an expression of geometry and aesthetics through graphics and movement. This particular street projection is a perfect example of how motion graphics projected onto cityscapes can be powerful and engaging. I only wished that I could have seen this one in person.
Production: Urbanscreen
Art Direction: Daniel Rossa
I’ve been working in Expression Blend for a couple months, and I can definitely say that I’ve
“seen the light“. Sure, there are a few bugs for Microsoft to iron out, but I can certainly say the same thing for Adobe’s Flash. I’m not necessarily trading teams over to Microsoft, but I do enjoy the excitement of learning a new tools. The 3D animations and states are pretty nice and is very similar to what Adobe is doing with Flash Catalyst. While I still actively pursue flash-based rich media projects, it is an exciting time to explore Silverlight because of the large opportunity to take over market. Silverlight and Blend are so new that many interactive designers are reluctant to take the leap. Hopefully, more designers will start exploring Silverlight.
I’ve recently teamed up with the Atlanta Silverlight community, organized primarily by Corey Schuman, in hopes to get more people involved. We just recently launched SilverlightAtlanta.net, the online presence for the Atlanta Silverlight User Group. (The site’s theme is designed by yours truly.) This user group is an informal blend of developers and designers in the Atlanta metropolitan area interested in learning more about the Silverlight platform and its relative tools. The Atlanta Silverlight Meetup Group is free to join, and typically meets on the 3rd Thursday of every month. Check out the Meetup.com page to find out full event details.
If you have interest in becoming a part of The Atlanta Silverlight Meetup Group, or have any questions about the group, please visit our forums or consider coming out to the next scheduled meetup – we would love to see you there!
This animated infographic movie highlights the increasing tendency of food importation, and how this phenomenon influences the economy, the environment and our neighborhoods. The message is mainly meant for Canadians, but certainly applies universally.
Aaron Koblin is a data visualization artist most widely known for such projects as Radiohead’s House of Cards, New York Talk Exchange, The Sheep Market, and Flight Patterns. The video interview above gives insight to Aaron’s experience as a data visualization designer and his perspective of the creative landscape as disciplines continue to merge.
Synethesia is defined as:
A neurologically based phenomenon in which stimulation of one sensory or cognitive pathway leads to automatic, involuntary experiences in a second sensory or cognitive pathway.
This sensation is beautifully conceived in the short film Synethesia created by the directing duo Ian Kibbey and Corey Creasey, known collectively as Teri Timely. This short film is an incredible sensory mix-up of hearing colors, tasting words and reading sounds.
This article takes the position that although technical skills are important, emotional intelligence is essential for effective leadership. What is emotional intelligence? According to Daniel Goleman, it’s made up of five components–self-awareness, self-regulation, motivation, empathy, and social skill.
Click here to read the article summary by Matt Snow
The graphics above display the adoption of Flash player versions 6 through 10, as well as it’s feature adoption over time. Flash 10, along with rich-media competitor Silverlight V.2, were released in October of 2008. Flash 10 already has an adoption at roughly 75% of all internet users, while Microsoft’s Silverlight is still under 20% adoption.
This $14k system ($3k for each DVJ-1000 “turntable” and $8k for the SVM-1000 Mixer) allows you to mix DVD content, live camera feeds, set cue-points, and integrate beat-sensitive visuals effects in real-time. The mixer supports up to 4 av channels and the touchscreen gives you the instant power to manipulate video and audio with ease. This gear would have been a nice addition to my rig during my VJ & Light Jockey days at Capital City.
Reuben Margolin creates totally singular techno-kinetic wave sculptures using everything from wood to cardboard to found and salvaged objects. Focusing on natural elements like a discrete water movements, his work is elegant and hypnotic. You can see more wave sculptures at his site.
When I’m not rocking out to the instrumental scores of Mastodon‘s recent album Crack the Skye, I keep the groove fueled with the help of the fine fellows over at Disco Dust. Other gems that have been inspirational of these past several weeks is Dan Deacon, Sin Fang Bous, The Dodos, and The Season Standard. If you like that kind of stuff then you should check out what the guys at Black Cab Sessions are up to. This site serves up over 50 rad one-take cab recording sessions from a few pretty outstanding groups. I am excited to see more channels for good music such as the Black Cab Session as well as the Take Away Shows, which also spontaneously records bands in parks, streets, and elevators. I like the spirit of curating rare moments of musical bliss. I have hope for the future of the modern musical landscape. Good will overcome evil in the battle against sharing and spreading music thanks to everyone who makes it more accessible for the rest of us.
Keep up the good work and keep the tunes coming!
Check out this hawt showreel for the SprintCam HD made by i-MOVIX. These shots capture video at 1000FPS, and are mostly recorded in Stade de France, Paris.
Jesse Warden, seasoned developer and Atlanta native, shares his interesting perspective on the current climate for Flash and Flex work in the 2009 marketplace. Among many factors, shifting budgets have led to false starts on projects and result in devs having to look for new work to fill the void. His metrics include job offers during the month of March as well as the ratio of employers asking for candidates vs. the amount of candidates asking for opportunities. Although it is no surprise that these are tough times for even seasoned veterans, he ends on this positive note of encouragement:
“If you do Flash or Flex work, keep your chin up. While slow, things are pretty decent all things considered.”
In addition, I am optimistic that the future will unfold a creative revolution fueled by the marriage of great ideas and solid execution. Volatility in the marketplace presents challenges as well as opportunities and 2009 will be the year that defines a decade by setting an important benchmark for the next generation of an eager industry.
The short film World Builder is about a man who builds a world for the woman he loves with a sophisticated set of holographic tools. This movie, by Bruce Branit, was shot in a single day followed by 2 years of post production.
Hello Monday is a boutique design show located in Denmark that does some hot print and web work. I love the approach to displaying their work as stacked strips of images. I also like that they display a radial color pallet for each project.
New York based shop, The Egg Republic, promotes their work with this slick new site. The parallaxed interface, 3D transitions, and hot motion reel are a few of the site’s impressive features.
Flickr Clock [flickr.com] created by Stamen is a visual browser for the videos that people have recently started uploading to the site. The videos are arranged chronologically, and drawn from videos that people have posted to the flickrclock group on flickr.
The bottom of the interface allows users to scroll back and forth in time, so one can get a broader sense of what the community has recently been posting.
Microsoft Surface Financial Services application is a joint development between Microsoft and Razorfish. It is an innovative and engaging solution to present banking products to customers within a rich multi-touch experience.
It is the first application to receive the official Surface certification and is now available on the Surface partner community site.
Lee Brimelow, from Adobe, has been promoting Adobe’s Creative Suite-4 by arranging scavenger hunts all over the world called “dead drops”. The idea behind the dead-drop is that Lee plants a series of clues to lead people to where he has planted a copy of the CS4 Master Collection (valued at $2,499). The latest dead-drop has targeted London. The first clue is revealed by clicking on a hidden link on the last period in his announcement. This link loads a wav file, which is just a bunch of noise. So to inspect further I opened the wav file in Soundbooth and analyzed the spectral frequency display (shown above). This display mode allows you to see a visual message inside of the audio wavform. The message is simply a URL along with a username and password. After browsing to the URL and entering the username and password to authenticate the website provides GPS coordinates and says “Get a coffee and look out the window.” The site also has input fields with a submit button, so I imagine that there’s another clue visible through the window of a London coffee shop that’s supposed to be entered into the web page….and then more clues? I don’t know how far you have to chase clues to get to the treasure at the end of the rainbow, but clever scavenger hunt so far. I am certainly impressed with the “audio painting” to deliver his first clue. Apparently audio painting can be done using a program to convert pictures into sound. This process translates each pixel color and position into an audio frequency. Talk about a cryptic data visualization.
General Electric’s “Ecomagination” campaign just released a new site – Plug Into the Smart Grid. This interactive experience is a seamless mix of 3D graphics, animations, data visualizations and educational content. To add to the already rich and interesting content, the site also uses some augmented reality techniques to allow users another way to interact with the site.
here are some screenshots of the site’s data visualizations :
pie chart
preloaders
interactive map
bar chart
Universe in ’09 celebrates curiosity and creativity with a dynamic look at the very best ideas that give us reason for optimism in 2009.
You may also get a kick out of the ascii art if you view-source
The LightScraper is a custom built aluminum structure, fabricated with a layer or semi translucent mesh. The structure can be easily erected in various compositions in an outdoor or indoor setting.
A single computer and two projectors are used to bring the sculptures visuals to life. The LightScraper also acts as a giant musical instrument, people’s location influence the melodies emitting form the sculpture.
Visitors position are tracked via an Infrared camera mounted at the peak of the structure, and transposed into musical notes, the result is ever-changing melodies and visual delight.
Synoptic is a 3D interactive infographic based on a meteorological data set from Augsburg, Germany. Users can select environmental attributes to explore, alter time-spans, and detect patterns over time on a three-dimensional line graph landscape.
site by: We Ain’t Plastic
This demo was built with the FLARToolkit by Japanese developer Saqoosha. The shape recognition library is used in conjunction with the video camera to create a very unique interactive experience.
2008 has finally come to an end I feel very lucky to have seen so many good concerts this year. The music gods have certainly been generous in providing such good tours, line-ups, venues and new releases to bring joy to my ears and eyes all year long. Some of the most memorable concerts were Russian Circles at the Drunken Unicorn, Radiohead at Lakewood, Fleet Foxes at Millennium Park, Of Montreal at the Tabernacle and the stellar grand-finale with Eskmo, Welder, Telepath, and Bonobo at the Masquerade on my birthday/New Years Eve. The shows already look pretty bleak for 2009 so I may be forced to save more money this year. However, if I could wish to see any artists that I didn’t get to see this year it would be awesome to catch Sigur Ros, The Foals, Tracer AMC, or God is An Astronaut. Until then I’ll continue checking out new tunes on Last FM, MySpace, Pitchfork, Disco Dust, and Big Stereo.
So here’s my 2008 concert round-up. Other than maybe one or two opening acts, this should be a pretty comprehensive list:
A Hawk and a Hacksaw
All Night Drug Prowling Wolves
Atlas Sound
Boban and Marko Marchovic Orchestra
Bonobo
Deer Hunter
Dubconcious
Early Day Miners
Eskmo
Explosions in the Sky
Fleet Foxes
Future Ape Tapes
Gentleman Jesse and His Men
Headcases
Icy Demons
Les Claypool
Mars Volta
Mogwai
Morning Benders
Of Montreal
Ra Ra Riot
Radiohead
Russian Circles
Secret Chiefs
Sorry No Ferrari
Telepath
The Most Serene Republic
TV on the Radio
Walter Meego
Welder
Yeasayer
Having a wonderful time at Zach’s Mountain house in North Carolina. Eat drink and be merry is the flow of things here. The mountain air is fresh and the food is plentiful. Dish-washing champions Emily, Elisa & Courtney tackle dishes with the greatest of ease.
The 2008 IQ Interactive holiday site is live! We had a lot of fun making this site and are proud of the results. The Merry Match game got 560 unique visits during the first day it went live, and it hasn’t yet been emailed out to our clients and mailing lists. In fact, we noticed such a unexpected spike in traffic that we had to deploy the site on a CDN at the last minute. Be sure to check out all of the custom holiday tunes in the sound menu. There are 12 total songs and 4 categories to toggle through.
[edit] The e-blast was emailed out Monday December 8 and got over 900 unique visits before 10 AM!!
Japanese TV station WOWOW has a feature on their site that lets you mix a video of a live Radiohead performance from the Saitama Super Stadium leg of their 2008 Japanese tour. This online music video mix tool is accompanied by an interesting set of data visualizations.
The video interface allows you to choose from 12 color-coded cameras to record your own “rainbow” (the song 15 Step is the opening track from Radiohead’s In Rainbows album). You can then play back your edit by clicking and dragging the playhead in the timeline, or view charts of the most popular shots.
This fun infographic video takes a look at powering batteries with sugar.
Nice work by Apollo Pony
FEED is a Digital Consumer Behavior Study, which documents the results of a 2008 survey that Razorfish conducted of more than 1,000 “connected” consumers. The study includes essays that examine the ways consumers interact with digital media while also explaining why games and data visualizations are effective tools for marketers and consumers alike.
Photographer Lyndon Wade not only has some hawt post-production skills, but also has some big name clients. His portfolio has some interesting subject matter along with complete narratives within each image . The site navigation is simple and intuitive. I like that each photograph is deep-linkable so that I can send a single shot to a friend.
Sprint’s widget mosaic attempts to document the “now” . The interface resembles the iGoogle portal concept with a flash face-lift. The data is visualized with tiny bar charts, live camera feeds, data counters and various iconography presenting topics ranging from “Top words being used online”, “World energy consumption” to “Money being spent online” and “People stuck in elevators”.
The UNIQLO TRY experiment gathers video responses from a couple hundred Japanese women about bra size, makeup, and shopping and put it into a 3D world of short video clips. Questions appear at the top, you get a few random video responses, and then the animation zooms out to show you the rundown. The result is a mind-blowing interactive data visualization. It appears they are also producing another visualization soon with the results of the Heat Tech experiment.
Nice agency site… Located in Montreal and Amsterdam, Sid Lee is a multidisciplinary creative advertising agency specializing in branding. Their online presence offers an approachable experience that effectively reflects the company’s ideals and process. The site also does a nice job of condensing all of their areas of expertise into a cohesive central product offering. Professional yet fun.