Viget Inspire : The Design Lab

What To Expect When You’re Expecting CSS/HTML Handoff

2009-06-26T13:45:00Z

Picture this: You're a designer at Fancy Design Firm, charged with building out a design that another group will implement. You might never meet this group, you don't know how adept they are with buildout, and you're not entirely sure what they'll want to do with your CSS/HTML.

Even worse, maybe you're only delivering a sliver of the site, just one or two pages, and this team will need to finish out the other 90% of the markup. You'll be credited with the buildout or blamed for it, but the final results are out of your hands. What do you do?

Or, imagine that you're a client who's hired Fancy Design Firm to design the site, and you want your Stressed-Out Internal Team to develop it. You need to make sure that S.O.I.T. can correctly implement the stuff you get from F.D.F., and you even want them to expand on it, stretching the design into a full site with new styles.

The trouble? You don't know how F.D.F. codes or what to expect from them. Whatever you get from them will be final - you can't go running back every day until launch and asking them for stylesheet tweaks. You're not a CSS/HTML expert, so you're not sure you'll be able to tell what's good or not. What do you do?

A Bad Place To Be

Both parties are in a spot here: Designers are hoping their work doesn't get mangled, and clients are hoping their deliverable isn't crappy and inflexible, but neither party has a sure-fire way to get what they want.

I've been delivering buildout a lot recently, so I've been reflecting on what works best in this situation. In the interest of helping designers and clients agree on deliverables, I've written this little reference list. This is by no means a "client bill of rights," simply a set of topics clients and designers should discuss when expecting a CSS/HTML deliverable.

What To Expect from CSS/HTML/JS Deliverables

Reusability - Styles should be named and implemented with re-use in mind. Simple utility classes like "right", "left," "intro," and "hide" let clients quickly achieve design effects, and more specific classes like "feature-set" can be reused sitewide and modified to client needs. In contrast, "fall-2009-promos" is a dead class: a set of styles that the client will need to basically rewrite in order to copy.

Note about semantics: While classnames should be semantically meaningful whenever possible, clients will run into situations where their boss just asks them to float a photo to the right. Rather than making them add a ".secondaryPhotoArticle" class to the stylesheet, I'd rather give them something meaningful to THEM, like ".right."

Documentation - A designer's first instinct might be to leave comments in the code, but these tend to get ignored and bloat the filesize. Any buildout deliverable needs some kind of documentation of how the more complex elements interact, and offer ideas on how to reuse or change them.

Quick tip: Sometimes we hand off sites with an "element list" page, which has all the site's major components laid out on a single page with notes. Developers can mix and match elements as they please, instead of trying to copy pieces from finished designs.

Design Files - Nothing is final on the web, and the PSDs received from a designer should reflect this. At the very least, they should still have slices in place, but major images and sprites should be broken out into files that can be easily tweaked and Save-For-Webbed.

Quick tip: I've found that breaking elements into individual PSDs is a huge help during the buildout phase itself — it makes quick adjustments a snap.

Styles for Every Tag - Even if the design doesn't have a <dl> or <table>, for example, it needs to anticipate one with some simple styles.

Quick tip: I actually use a class of ".data" to style tables, just in case clients need to use a table for layout or import some existing tables. In a perfect world, clients wouldn't use tables for layout, but designers need to design for imperfect situations.

Validating Markup - The final markup validate, even if it won't be perfectly valid on the final site (due to outside plugins or requirements). This is a simple way to check for bad markup, as well as a way to tell if designers are working with web standards in mind.

Bugs - Everything should be built for flexibility, but between handoff and launch, there's always going to be something the design just didn't anticipate. If the client doesn't have the technical expertise to work on these bugs, they should consider keeping 10-20 hours of support time on the contract for help during the development phase. (Actually, put this time on the contract regardless!)

IE6 Support - Sorry designers, but clients should expect that you tested everything in IE6 and got it running. Clients, install something like MultipleIE to check this out for yourself.

What NOT To Expect

IE6 Perfection - Nothing should look broken in IE6, but it won't look exactly like the comp. There are some visual touches that are just too time-intensive to implement in IE6, and quite frankly not worth the time a client pays a design firm for.

Hyper-Changeable Design - There's no way around it - some things are just going to be a pain to change. Graphical navs and big backgrounds tend to be time-consuming to update, so if clients anticipate new nav items or color changes a month after launch, they should let the designer know early in the process.

"Our Internal Designer Will Finish It" - Javascript and CSS, while familiar to most designers, might not be a strength that a client's in-house designer has. If the designer needs to make major changes to complex pieces of the site (an image carousel, for example), make sure everyone knows up front, and make sure the internal designer talks to whoever's doing the buildout. This also goes for Photoshop effects: if a client expects to copy a designer's style month after month, they should ask for a tutorial on the style.

Happier Clients, Happier Designers

No one's off the hook here: In order to get a good, appropriate buildout deliverable, both parties need to set expectations and be ready to make compromises. These guidelines are just a starting point. So what do you think? Did I miss anything, or put something in that you absolutely disagree with? Let me know in the comments.

Designing a Custom Flash Player for Brightcove

2009-06-23T16:21:00Z

ABOUT BRIGHTCOVE

Brightcove offers a wide range of players that will plug right into your site. Its players range from a video window with basic controls to players with tabbed navigation, playlists, related videos, and keyword search. These players are easy to build into your site and connect with videos you've uploaded to Brightcove.

Unlike most drop-in players, Brightcove offers a great deal of customization. You can style existing players using a video player editor where you primarily have control over colors. This goes a long way when you're trying to match the look of your player with the look of your site, but you can take this a step further with a proprietary markup language called BEML (Brightcove Experience Markup Language). Think of BEML as HTML for a media player. You add custom images to replace the Brightcove custom elements (like your play or mute button for example). You also have complete control over which Brightcove components you want for your players and even which buttons you want for your player controls (play button, mute button, etc.).

However, even with base color styling and more advanced BEML modifications, you may still run into styling and component limitations. If you want to really customize your player, Brightcove allows you to take things even further with their API. So, with said API, Adobe Flex, and custom UI and visual design up front, that's what Viget did ...

WHAT THE CLIENT WANTED

Recently, a client who was using the Brightcove video hosting platform to house their comprehensive video library came to us with concerns. They were not completely satisfied with how the players looked and they wanted more functionality than what they were getting out of the existing player components.

The first and main concern was that the components (like tabbed views of custom lists of videos) were not making their videos visible enough. The second concern was that the look of the players weren't customizable enough and the client felt like they weren't getting the visual integration they needed with the rest of their site.

USER INTERFACE

The player we created consists of two views. In the first view, we needed to take into account the large number of videos, so the goal of the design addressed choice and selection. On the main video dashboard page, the user can see a truncated selection of videos in the "Featured Videos" and "Most Watched Videos" sections. Below that, the user gets a wider selection of videos via the "Recently Added", "Highest Rated", "Media Appearances", and "This Week" filters. Not counting the search, a user is only a few clicks away from about 350 videos in this view. This doesn't cover every single video, but it does make every category of video immediately visible.

In the second view, there are numerous video choices as well. However, since the user has selected a video to get here, we understand that the main focus should be the video itself and the videos related to it. Aside from the current video playing, there is a list of approximately 50 videos that relate to the chosen video.

To keep available video options accessible, this view offers an expandable view of the four main sections of video by clicking "View More Videos" at the bottom. Here is the wireframe of that view.

VISUAL DESIGN

With the UI nailed down, we were able to apply the font, colors, and styles needed to visually integrate the player with the client's site and brand.

View 1

View 2

IMPLEMENTATION

Ultimately we implemented two players. The first player is the large media console that has been shown, the second is a standalone player used for displaying single videos or embedding videos on other sites. All data was accessed with simple calls to the Brightcove media API. With the exception of the "Most Watched Videos" list (which is compiled by Brightcove video analytics), all video sets are being pulled in as existing playlists that have been set up within Brightcove.

CONCLUSION

We've been quite happy with the results, and we'll be eager to share the final product with you when the site goes live. We wanted to go ahead and share the find though, as we know (from experience) that the search for such solutions is an ongoing and often frustrating one. It seems that Brightcove is offering just what's needed to go anywhere you want with custom video players. From quick-and-easy, lightly-styled approaches to fully customized players, the options and flexibility are rather nice.

Take Something New and Make It Old

2009-06-15T13:47:00Z

A design exercise that has been making the rounds lately, one I can't get enough of and have to share with anyone who'll listen, is the re-imagining of modern video games, movies, albums, and so on as worn out, classic book and album covers. It takes a product completely out of its element and reinterprets what makes it memorable in the first place. The result being that oftentimes these "remixes" are more elegant and precise solutions than their original designs. They're also just plain fun. The craze seems to have started earlier this year with Olly Moss's series of video games as book covers inspired by Penguin Classics covers and Saul Bass illustration. Just to show a couple:

From there the idea spread to other designers, mostly through Flickr, and took on a life of its own. Soon more Penguin Classics versions of modern media popped up. The best of them all take a familiar piece of pop culture and embody it in the simplest, most memorable illustration possible. The classic, simple imagery of 60s and 70s book covers like Penguin's gives designers free reign to get abstract in their interpretations. The results not only present the content in a completely fresh way, but many of them are very clever and funny. One of my favorite examples is Mitch Ansara's I Can Read Movies series, covers for fake novelizations of famous movies. The covers are simple and graphic with iconic imagery, and often perfectly encapsulate the movie. Here are a couple typical examples:

M.S. Corley's redesigns for the Harry Potter series are another perfect example of making a cover that's both abstracted but instantly recognizable for Potter fans:

It's also fun to see how this anachronistic approach has evolved in the past few months. Designs based on classic album sleeves, rather than book covers, are becoming the latest trend. Most recently Logan Walters took rap album covers and redesigned them in the style Blue Note Records jazz covers:

The potential combinations of something new as something old become seemingly endless. These remixes also breathe new life into seemingly dated styles that before I've always taken for granted. As a design exercise it's a fun challenge that forces you to think of your favorite movie or album in a different context, but can also challenge you to see how much story you can convey with as simple an illustration as possible. Even though it is designing in an old style, it is a great exercise for approaching a problem in a new way.

More Remixes:

Six Snappy Snap Apps for Mac

2009-05-13T03:31:00Z

After much debating about purchasing the recent MacHeist 3 Bundle I broke down in the last 30 minutes of the promotion to order the bundle of software advertised as 14 Mac apps worth around $500 for $49. To be honest I didn't know much about MacHeist or many of the apps they were promoting but the thought of trying out Espresso among the mix of apps appealed greatly. To my delight, it wasn't Espresso that captivated me. Instead, an unassuming screen capturing utility called LittleSnapper caused me to forget the other 13 applications in the set.

There's also been a fair amount of buzz about Skitch lately. The combo of the two got me thinking about what else might be out there for capturing, editing, saving and sharing images. At the urging of Peyton Crump, our fearless Design Director from our Durham, NC office, I took to task comparing the two apps. Soon enough, I realized a comparison among a wider breadth of apps might be useful. Thus, this post was born, a comparison of six screen capturing utilities. From a bare minimum of features to some truly groundbreaking ones, these tools are listed by order of complexity (features not ease of use): Screengrab!, Paparazzi!, Web Snapper, Skitch, LittleSnapper, and Evernote

Please note this less of a comprehensive review of the products than it is a glance at some useful aspects of each.

Screengrab!

Copy/paste full page screen grabs with ease. http://screengrab.org/

I often revert to the simple keyboard shortcut shift+command+control+4 to activate the crosshairs built right into the Mac OS to copy screen selections directly to the clipboard. This is fine until I need a full screen capture of a web page without having to splice it together in Photoshop. That's where Screengrab! comes in. Its really nothing more that a screen grabbing utility for web pages but its power is in its ability to offer multiple ways to capture snaps including a full screen option. To my knowledge it is only available as a Firefox add-on.

Editing/Notation: no
Public Sharing: no
Personalization/Cataloging: no
Full Web Page Snaps: yes
iSight Integration: no
Companion iPhone App: no
Browser Plugin Available: Screengrab! is a Firefox Add-on
Cost: FREE, donations encouraged

Paparazzi!

Type a URL and click a button for full page snaps. http://derailer.org/paparazzi/

Unlike Screengrab!, Paparazzi! is not dependent on the Firefox browser. In fact, all you have to do in this stand-alone utility is type in a URL and it will load in the full web page for capture. Toggle the cut dimensions for custom-size images and save to your place of choice. Saving screen shots is its main function thus it has a limited feature set. Dragging a URL to the app is also a handy way to activate Paparazzi!

Editing/Notation: no
Public Sharing: no
Personalization/Cataloging: no
Full Web Page Snaps: yes
iSight Integration: no
Companion iPhone App: no
Browser Plugin Available: no, standalone utility
Cost: FREE, donations encouraged

Web Snapper

Export multiple pages to PDF with links included. http://www.tastyapps.com/

Web Snapper is where things start to get interesting. Like Paparazzi! simply drag a web page to the app or use the handy Safari plugin to capture pages and load them in the stand-alone utility. The magic of Web Snapper lies in its ability to bundle multiple web pages and bind them together with scalable vector graphics via PDF. What is even more magical is that the page links are automatically embedded into the PDF.

Editing/Notation: no
Public Sharing: no
Personalization/Cataloging: no
Full Web Page Snaps: yes
iSight Integration: no
Companion iPhone App: no
Browser Plugin Available: yes, Safari
Cost: $15 or 5 day FREE trial

Skitch

Quick and easy way to snap, add notation and share. http://skitch.com/

With Skitch, things really start to get interesting. The biggest downer about Skitch is that it doesn't capture full web pages. That's a small thing to ask for considering it does so much else. The main reason I would use Skitch would be to add quick annotation to screen grabs for sharing. Pat Reagan wrote a couple of great posts about how to sync your Skitches with TextMate for easy blog posting. I used his instructions to write this post. What's more, Skitch offers public sharing of images through Skitch.com, Flickr, MobileMe or FTP and the iSight integration can be very useful for capturing whiteboard notes when you don't have a camera handy.

Editing/Notation: yes
Public Sharing: yes, Skitch.com, Flickr, MobileMe, & FTP/SFTP
Personalization/Cataloging: yes, integrates with iPhoto
Full Web Page Snaps: no
iSight Integration: yes
Companion iPhone App: no, though you can email from iPhone to Skitch.com or Twitter
Browser Plugin Available: no, but menu bar and keyboard shortcuts are available
Cost: FREE

LittleSnapper

DOM-friendly snapping with built-in browser. http://www.realmacsoftware.com/littlesnapper/

LittleSnapper is the main inspiration for this post. I started using it as a way to catalog inspirational web sites according to my own personal likes. Like Skitch, I can hook it directly with my Flickr account for easy sharing and to post to our Viget Inspiration Group. LittleSnapper also hooks directly to QuickSnapper.com, their community web site for sharing screen shots. That is hardly all, this powerful app does so much more. It has a built-in browser for DOM friendly snapping and its tagging features allow for easy creation of smart collections. Annotate with elegant controls and use a blur filter if you want to obscure personal information. It helps that this application is as gorgeous as it is easy-to-use thus drawing comparisons to iPhoto. It's a little costly, but if you already make a habit of saving screens for future use you'll want to take a close look at LittleSnapper.

Editing/Notation: yes
Public Sharing: yes, via QuickSnapper.com, Flickr, MobileMe, & FTP/SFTP
Personalization/Cataloging: yes
Full Web Page Snaps: yes
iSight Integration: no
Companion iPhone App: yes
Browser Plugin Available: No, but menu bar and keyboard shortcuts are available
Cost: $39 or FREE up to 30 saved images

Evernote

Snap a picture with text and retrieve it via search. http://evernote.com/

More of a note-snapping tool than a page capturing tool but loaded with amazing features the most impressive being that it scans images for searchable text. A downside is that it captures web pages as text and images rather than a WYSIWYG image like the other apps. This is useful for searching and note taking but it makes Evernote less of a screen capturing tool. That being said, Skitch becomes a great companion to Evernote in that you can drag and drop screens into Evernote for tagging and organizing similar to LittleSnapper. Also, the ability to share publicly via Evernote is built seamlessly into the workflow.

Editing/Notation: notes not images
Public Sharing: yes, Evernote.com
Personalization/Cataloging: yes
Full Web Page Snaps: no
iSight Integration: yes
Companion iPhone App: yes
Browser Plugin Available: yes, Safari & FF plus menubar and keyboard shortcuts
Cost: $5/month or $45/year or FREE up to 40MB/month

All in all, each of these apps have their own unique and powerful usages. I'm partial to LittleSnapper due to it being a sexy application with a ton of useful features. The fact that I already own the license helps considerably. If you are looking to save a little coin, try using Skitch and discover the great feature set offered. Evernote will win over the inner-geek in you with its jaw-dropping capabilities. Regardless of which you choose, get snapping!

Advice, Trends, and Resources for People Entering Web Careers in 2009

2009-05-11T10:00:00Z

Many have us have spoken to people who will soon be entering careers in web design related fields this year, and this led us to have discussions with each other about what we thought was important for those people to know. Each of us had different advice to share based on each of our own unique perspectives, so we thought it would be helpful to put it into a blog post. Some of the questions we wanted to respond to were:

What trends have you noticed in the past year?
What advice do you have for people entering the field?
What are some resources to help people get started?

Brian Talbot

Advice: Don’t Grow Up Just Yet

Many of the students I’ve taught and worked with want to hit this field’s ground running, but tend to be confused and overwhelmed by all of the various titles, processes and disciplines involved in working on the web these days. If you’re feeling this way, remember that you don’t have to pick a definitive career path or niche in the web just yet (if ever)! Instead learn about and try all of these disciplines as your work allows. You can always dive deeper into those that really strike a chord. Until then, don’t sweat those fancy terms or titles too much. And here’s a secret, some of the strongest web professionals are “generalists” instead of “specialists” in a particular area.

Advice: Work Smarter

Find ways to automate repetitive tasks for yourself – its usually an enjoyable problem to solve for yourself and will reward you with more efficiency. Finding and tweaking a series of applications and services that help you achieve is crucial. Some of my favorite set-ups include:

LittleSnapper + Dropbox + A Dedicated Flickr Account = A quick and great way to organize (with tags) design inspiration across multiple computers and to share online.
TextMate + Some Awesome Bundles + Your own templates + TextMate Projects = The start to a lean and mean front-end development area (for extra points, dive into things like Shell Variables)
Delicious Subscriptions RSS + Delicious Network RSS + Flickr Design Inspiration Sets and Groups + select blog/site RSS Feeds all in Google Reader or Feedstitch = A good, portable start to having your ear to the ground on what’s happening around you (for extra points, you could add Twitter to this in EventBox.)

Doug Avery

Trend: Tuning Out

I’ve heard more and more designers this year talk about cutting back on blogs, Flickr feeds, and magazine subscriptions, in an attempt to to overcome the noise of “inspiration.” Sometimes, consuming design is a convenient excuse for procrastination, so be careful about how much you’re watching vs. how much you’re doing.

Advice: Try It

You can have a huge stack of Readymades and an RSS reader full of A List Apart articles, but if you’ve never built any of the stuff they’re talking about, you’re missing out. Take some time to play around with new ideas, techniques, or plugins whenever you can. It’s fun, it relieves stress, and you often learn more than you expected to.

Resources: Firebug & Designers Toolbox

For buildout, you should know about Firebug, the smart little tool that makes diagnosing layout woes a snap (and has the muscle to fix much bigger problems down the road). And in general, you should know about Designers Toolbox, a one-stop shop for print sizes, templates, web element PSDs…you name it.

Erik Olson

Advice: Focus.

I have seen many people try to master everything when they first get into web design. It’s ok to know lots of stuff but you run the risk of spreading yourself too thin. My advice is to focus on one area and do it really well. However, don’t limit yourself. Work on that one focus but always try and have at least a little knowledge in most areas of the web. Knowing something about design will come in handy even if you’re a developer.

Jackson Fox

Trend: Sketching

It’s odd, but when I switched from drawing comics in art class to making web pages in the computer lab I never thought I’d be coming back full circle. Sketching is cool in interaction design, very cool. Whether with good ole’ pen and paper, or sketching in code, designers are prototyping, exploring, and iterating faster.

Advice: Build It

You’re not going to succeed as an designer if you don’t know the medium. Learn HTML, learn CSS, learn Javascript, learn Ruby & Rails. Knowing how to build quick and dirty prototypes, or production ready build outs, will make you a more effective designer.

Resources: The Design of Everyday Things

Design on the web is as much about human behavior as it is about visual design. Read The Design of Everyday Things by Donald Norman and you'll begin to appreciate just what it means to design for human behavior.

Keith Muth

Trend: Don't Reinvent the Wheel

A big trend on the web is leveraging existing data instead of creating your own from scratch. Look into APIs and how you can use them. Pull bookmarks from Delicious, images from Flickr, short comments from Twitter, or even mash-up a list of your favorite blogs using Yahoo Pipes or FeedStitch.

Advice: Make It Easier On Yourself

Use applications or frameworks that can make your life easier. For example, if you want to start using JavaScript on your sites quickly, look at jQuery instead of writing it from scratch. Most of the time there are large communities constantly improving these frameworks and it is a great way to get involved and meet people.

Advice: The Learning Starts Now

Those of you who are graduating students, you probably didn’t learn what you needed to know from your classes in school and that is perfectly normal. I think most of us would agree that we didn’t actually learn anything until AFTER school when we were in real world situations. School was only meant to give you an introduction; it’s up to you to do the rest. Get a web host or setup a local server on your computer and play around with stuff on your own. Get involved in communities both online and in your city. Get a website up online to post your work and blog if you have ideas to share. This will all lead to networking with people with common interests, learning from the people you meet, and possibly scoring a job. I've learned the most from the jobs I've had and working with smart people.

Resources: Consume Everything

Delicious, Twitter, RSS feeds, and attend events or conferences that interest you.

Owen Shifflett

Advice: Go Crazy When You Concept

Don’t start a project by giving the client what you think they think they want. Cast your creative net far and wide. Reach for ideas and concepts that stretch your clients comfort-zone and encourage them to come along for the ride. Even if you have to pull back later your end results will be more creative than if you gave them the expected idea to begin with.

Advice: Be Fearless

Be ready to be wrong, but trust yourself and your instinct as a designer completely. Uncertainty breeds shoddy execution. Be prepared to fail. Be OK with that. Take ownership of your work and be prepared to explain your choices.

Advice: Be Design Agnostic

Be a well-rounded designer, try different types of design. Print, web, interactive, packaging, industrial, apparel. You will find that ideas and practices of each will bleed over, giving you an edge in any medium you work in.

Advice: Be An Artist

Be an artist. Be an illustrator. Be a drawer. Be an iconographer. Be a typographer. Be more than a designer. Take your creative passions and use them. Don’t let a challenge stifle or restrict your creativity or force you down a certain design route.

Advice: Take Restrictions And Own Them

Don’t let clients, deadlines, negative feedback and tight budgets get in the way of your passion and skill as a designer. Know your deadlines, know your restrictions, and then lock them away in a box and put them at a safe distance until it’s necessary to interact with them. Give your mind and body room to be creative and focused.

Peyton Crump

Advice/Resource:

Identify 5 places you’d love to work and follow them religiously. Study their work, read their blogs, find out as much as you can about their process and thinking. Don’t do it all with the intent of engaging them about a job. Do it because they’re awesome and because you aspire to do work at their level. If you engage them, start small and smart (simple, thought-out blog comments are great).

Advice/Resource:

Use LinkedIn if you’re not already. It’s not just for “business people” and its benefits are amazing. Explore the ‘Advanced Search’ feature. It’s eye-opening when used well.

Advice:

Understand that truly good web design is as much about what is invisible as what’s visible. Concern yourself with usability, semantics, accessibility, code validation, search engine optimization, load times, maintainability, and measure-ability (see Google Analytics). Be a super-creative designer AND be a super-smart designer. The best designers concern themselves with things that are below the surface, understanding that a lot of these elements create true value.

Rob Soulé

Advice: Surround yourself with the best.

Identify designers that you admire and do your best to surround yourself with them. Even if you can’t work with them, or for them, make every effort to seek advice and design criticism from these people. There are hundreds of forums out there brimming with bad advice. Be sure you examine who’s giving you feedback and why. Everyone has an opinion and motive. Learn to be wise about how you hear them. Seek honest, relevant and pointed feedback from people you admire, and trust.

Advice: Find your sandbox

Don’t ever stop learning, being creative, and stretching yourself. Creativity and inspiration are everywhere so when inspired be sure you have your own place to ‘play.’ This can be a personal web site, a painting studio, or a potter’s wheel. For me this is my own personal web site. Over the past two years I’ve redesigned it close to forty times. Most of these designs have never seen the light of day but for me, it’s my creative outlet. Every job and position has restrictions, that’s just part of life. So find your own sandbox where you can work without restrictions, go crazy, explore art, technology and feel creatively energized.

Trend: ‘inbox zero’

Learning to manage your virtual work spaces is nothing new but recently I’ve seen a big trend in keeping your your inbox at ‘zero.’ The idea here is to create folders to organize, sort and route your email. Moving important to-do’s, urgent replies, work requests, etc into appropriate folders. Managing your work flow and inbox can save you a lot of time and help you stay efficient.

Resources: Pattern Tap

Web galleries are a good resource but can sometimes influence us to copy an idea too literally. That’s why I particularly enjoy a site call PatternTap. It gives you little snippets of inspiration without being swayed by a full idea on concept.

Resources: Delicious

There is so much good information out there and you’ll never remember it. So use social bookmarking sites like delicious to store, tag and archive your web history. For me, this tool has been invaluable.

Samantha Warren

Trends:

Blogging. Check out the ALA survey: 70% of respondents to the survey have blogs. Its the #1 thing that shocks my intro design students: changing their perception so that blogs are a resource and a tool rather than just a form of entertainment. Information on blogging also is the #1 things students respond to in the feedback survey they send to me at the end of the class as being the most valuable thing they learned during class. Weird to read after busting my butt on type for 4 weeks…but thats the case.

Advice:

Blog, Network, & Never stop learning. Design is about people, connecting with people will give you a insight into who to design for. Blogging will help you to articulate design in a way that will give you practice for doing it with clients.

Resources:

I have a page of them here

Tom Osborne

Trend:

Speed. There seems to be a trend of “more for less” going around. That includes less money, less time, and less people. Customers are more and more used to getting things quickly and cheaply. Think taking your car in for service. It shouldn’t take long to fix your car, right? Wrong! There’s no magic formula for all the service you need. It takes time and labor to service your car appropriately. Though it’s not an apples to apples comparison design isn’t much different though compared to getting your car fix it can take MUCH longer. It takes people and it takes time to do an effective job.

Advice:

Related to that, expectations aren’t changing. If you can design high quality work faster you will be handsomely rewarded for it. Take time to learn keyboard shortcuts. Build a methodology for getting clients to open up and understand their brand personality early to avoid “I’ll know what I like when I see it” later on. Have your own personal library of inspiration to turn to for quick influence. Build a network that includes people who can help you do things you are not good at doing quickly or keep you in the loop of useful finds. Always be curious and work hard to learn more.

Resources:

Keyboard Shortcuts: Ants Magazine Cheatsheets
Eliminating Guesswork: A List Apart Article a great article about user goals and brand personality
Inspiration: Scrnshots one of a million places to start
Networking: Twitter as much as I hate to say it

Hopefully those of you entering a career on the web can find something in our advice useful. Those of you reading who are already in a web career, please share your thoughts in the comments.

Making Quicker Interface Decisions With Design Patterns

2009-05-08T12:53:00Z

A Brief Explanation of Design Patterns:

As web design matures and evolves, the collection of web design best practices grows with it. There are best practices for readability, markup, accessibility, usability, on and on and on. As designers, we look to keep our design approaches creative and fresh while at the same time knowing when not to screw with these established practices. These "practices," especially in the realm of user interface design, are often referred to as "design patterns."

A couple of the many definitions for a design pattern:

A generally repeatable solution to a commonly occurring problem.
An optimal solution to a common problem within a specific context.

Common user interface questions for which design patterns are well established:

When I want to filter content on a page, what are the most usable approaches I can take?
If I want to rotate through features, images, or news articles on a page, what are some proven solutions?
What are the most effective ways to include error messaging in my web forms?
What are the most common approaches to designing rating systems?

You get the idea. These, and hundreds of questions like them, have been hammered out, time-tested, and answered by many designers, developers, and ultimately, web users. They may get tweaked, and they will improve and evolve, but the most solid current solutions are well documented and readily (and visually) available for your perusing.

Solid Design Pattern Resources:

Fix It Fast: Rapid IE6 CSS Debugging

2009-05-07T20:45:00Z

IE6: We all hate it, and we all have to work with it (well, most of us). The most frustrating phase of buildout is often the final struggle with this Browser From Hell, but maybe (just maybe) we're struggling too much. When I help friends with IE6 bugs, I'm sometimes surprised at how long they've been stuck on a single problem, or how they've painted themselves into a corner with hacks and fixes. Then I remember that I used to be like that, grinding away for hours at simple float issues, or pulling my hair out over list spacing.

Why do we have so much trouble learning to debug for IE6?

We don't know! There are a lot of bugs out there, and it takes a while before you can intuitively spot them. If we can't identify a behavior, it's easy to throw up our hands and say "Augh, it's just BROKEN!"

We don't want help! Many a designer has spent hours on a problem simply because they didn't ask for help or Google it. With a language as straightforward as CSS, you can eventually solve most problems just by blindly changing stuff (over and over), but changing stuff doesn't mean you're learning.

We're not sure how to start! Debugging is a weird process: At any point, you could come across THE SOLUTION, which would be GREAT, and it always seems like it's JUST AROUND THE CORNER. This constant bait-and-switch means that we don't settle into a solid process for debugging, which, in the end, means debugging can take much longer than it should.

So, is there a way to shortcut through some of the hair-pulling and learn good debugging right from the start? MAYBE. The following is my cycle of preventing, catching, and fixing bugs in IE6. If I could, I would email it to myself in 2004, but until I figure out how to do that, posting it here will have to do:

Preventing Bugs

You can avoid a lot of IE6 bugs right out of the gate, by writing around some of the common stuff.

Planning the structure:

Avoid tight fits of floated elements. If you have four floats squeezed into an area, consider removing the pad/margins on the last and floating it right instead. Tight fits can lead to the "repeating content" bug in IE6.
Plan to put either a width or a padding on an element, but not both. Instead, place padded elements inside a fixed-width element. This way, you don't have to wrangle with IE6's box model issues.
Be aware of vertically short (~15px or less) elements, which might require some hacks later on.
Be aware of sized floats appearing in content areas, which might trigger float model.
Think about content that might expand past your box size. This might trip up IE, as it tries to expand the element to fit larger content.

Writing the markup:

Keep floated elements from being adjacent to absolutely-positioned elements, and thus avoiding the "peekaboo" bug.
Be careful to close every tag. Firefox sometimes closes tags for you while rendering, but IE6 will be less forgiving.

Writing the CSS:

Start off with a reset to clear out unwanted browser defaults.
Avoid #id.classname selectors...these have a tendency to break in IE6.
Avoid left and right margins on floats...this means fewer fixes to make later.
Be aware of using bottom: and right: when absolutely positioning. These might require some special IE6 attention later.

Defining Bugs

The key to quickly fixing bugs is to acquire a subtler understanding of what's actually happening when rendering goes wrong. There are a lot of questions to answer about the element that will give us a clearer picture of what's happening:

Is it the wrong size?
Has it expanded?
Has it disappeared?
Or, has it simply moved?
Is it being covered by another element?
Is it not stretching properly?
Is the background disappearing?
Is it happening in IE7 as well?

Sometimes you can't easily pick out what's happening, so it helps to add some borders:

div { border: 1px solid red !important; }

(Note: If this happens to magically FIX your problem, try using position:relative or zoom:1 on the element)

Once you've isolated the bug down to one or two elements, glance over the CSS and see if there are any unique or particularly troublesome properties on the element. This'll help you with the investigation. Once you have the browser, the effect, the element, and the css property in hand, it's time to investigate.

Investigate Bugs

Now that you know what your bug is, let's see what someone else thinks about it. PositionIsEverything has a good list of common bugs, but I usually go straight to Google.

A few recent, fruitful searches:
li ol number 1 ie7
float negative margins ie6 doubling
id class ie6 bug
ie7 not showing images

As I said in the last step, the clearer you are about what your bug is doing, the easier it is to narrow it to a single browser, element, or CSS property. 90% of the bugs you run into will be from the same small group of common issues, so searching with the right terms should turn up some good answers.

Fixing Bugs

Many rendering bugs are fixed with a few common techniques:

Properly clearing floats (with a clearing div or clearfix)
Trimming the left/right margin on a flow in half (to compensate for IE6 margin doubling)
Using word-wrap: break-word or overflow:hidden (to combat expanding boxes)
Applying position:relative to the element or its parent, or
Applying the "zoom: 1" property to the element

You should be able to find more specific issues, or true oddities, out there on the web somewhere.

Note that all fixes should be done in special stylesheets linked using conditional comments. This way, your fixes stay separate from the main stylesheet, easy to find and work with later (and, it keeps your main stylesheet valid). Writing comments about fixes (especially weird ones) is a great idea too, and it keeps the next designer on the project from needing to go through the same process.

The next time you're stuck on an IE6 bug, give this process a try - define, investigate, fix, and then think about how to avoid next time. If you're still having problems (it's pretty likely), keep at it, or leave a comment about what I missed.

Some Reference:

Design Share 2: More With Less

2009-05-04T14:32:00Z

Delivering on our promise to make the Design Share into a series we recently wrapped up the second event. We stuck with our original format… mostly. Each presenter was still tasked with a 5 minute limit on their presentations with just under 10 minutes slated for question and answer. In short, we rotated speakers every 15 minutes. Based on feedback from the previous event we reduced the number of presenters from 6 to 4 resulting in an hour worth of presentations. At the end of the hour we added a 20 minute, panel-style Q&A. All in all, making for a nice sampling of work in a single evening.

This time around we framed the talks with the theme "More With Less" -- a sign of the times. To the presenters, this could have meant anything from less money or less time to less people. Each speaker interpreted the theme in their own way. The talks ranged from what to do with a less than ideal logo to what to do when your budget gets slashed by a third in the middle of a project. The work featured projects for government, non-profits, or religious org web projects.

The Talks

Click the talk title to view in full on Vimeo.

Elliott Muñoz, Edge Media
"Turn that Frown Upside Down"
Crafting a professional, visually appropriate design from an unfortunate logo.
Ali Felski, Sunlight Foundation
"Redesigning the Government… 2 Weeks at a Time"
How exploratory design can help avoid the politics and bureaucracy of working with the government.
Dawn Sword, Serendipity Creative
"(Lemon)ade: Making the Most of a Freshly-Squeezed Budget"
Ways to work with your client besides just eating budget overruns.
Corey Greeneltch, Ironworks Consulting
"More Than A Logo"
Brand positioning and visual identity with zero customer input, minimal time.

So far we're seeing positive feedback and already have plans for a third event. Photos from DS2 coming soon.

Displaying Your FeedStitch JSON Feed Using jQuery

2009-04-15T15:38:00Z

In this post I'm going to show you how to display your FeedStitch feed on your site using a few simple lines of jQuery. FeedStitch is a site we made to allow users to aggregate feeds quickly and easily, and then offer various output options for the feeds users create. When FeedStitich first launched Mark Cornick wrote about parsing FeedStitch’s JSON feed with plain old JavaScript. As he pointed out, his example was just one way to do it and is less bulky than including the entire jQuery library, but it is a little more complex for people not accustomed to writing straight JavaScript. The designers here at Viget use the jQuery framework for most of our JavaScript needs so we usually have the library loading into most of our sites anyway. One of the great features in jQuery is that it can easily parse JSON feeds using the $.getJSON() function. This is something I have touched on before in my previous post about pulling your Flickr feed.

For this example, I made a FeedStitch feed with all the Viget blogs aggregated into single feed. If you go to a FeedStitch feed, you can grab the JSON feed at the very bottom of the page (next to the RSS feed icon). When looking at the raw JSON feed you'll probably see a mess of all kinds of variables and text, but here is what the beginning of the FeedStitch JSON feed looks like if we format it nicely:

({"group":
 {           
  "slug": "viget-feeds",
  "entries": [
  {              
   "unique_id": "tag:viget.com,2009:extend/4.1539",
   "title": "Look Out! It\u2019s Developer Day in DC!",
   "raw_content": "\r\n\r\n\r\n <p>That's right...",
   "url": "http://feedproxy.google.com/...",
   "raw_title": "Look Out! It\u2019s Developer Day...",
   "feed_id": 48,
   "content": "\r\n\r\n\r\n <p>That's right...",
   "published_at": "2009-04-15T10:05:00Z",
  },
  ...and the feed continues with 
  even more groups of "entries"

Each of those variables inside "entries" is something jQuery can latch onto so we just need to tell it how to find them. For this example we'll use the variables "title" and "url". Here is the jQuery to pull the ten latest posts from my FeedStitch feed:

$(document).ready(function(){
 
 //Tell the function where the feed is located
 $.getJSON("http://feedstitch.com/keith/viget-feeds.json?callback=?", function(data){
  
  //Grab each of the "entries"
  $.each(data.group.entries, function(i,item){
   
   //Only grab "entries" 10 times
   if(i < 10){
    
    //Create the links and throw them 
    //into the body of the page
    $("body").append("<p><a href='"+item.url+"'>"+item.title+"</a></p>");
   }
  });
 });        
});

Obviously making individual links inside paragraph tags probably isn't what you want to be doing; it is just an easy example. You can tailor what markup is being created depending on your needs. The great thing is that this can be applied to any of the FeedStitch JSON feeds, and understanding how this works will allow you to use jQuery to parse any JSON feed.

Here is a link to my example where I created links inside a list using jQuery, similar to what Mark had done in his article

So, you might be asking yourself "Why use FeedStitch when I can use Yahoo Pipes?" Good question, and I have gotten that question a lot. The answer is that you could do the exact same thing we made here with Yahoo Pipes since it offers a JSON feed as well. I actually think its an amazing service and I encourage everyone to try it out. Yahoo Pipes is great because it can do A LOT but for that reason it can be complicated for some people. FeedStitch was created to make it easy for anyone to do one thing: make a single aggregated feed of all their other feeds. Plus, you can share your FeedStitch feed with other people so it has more of a "community" feel to it. Try it out!

Cufón Font Replacement - The Good and The Bad

2009-04-13T20:30:00Z

As soon as designers got ahold of the web as a design medium (probably about 15 years ago), they were thinking about fonts, right? (It was at least in the top five on the "first things to think about" list). So, in an age where tens of thousands of fonts have been invented, why are we mostly still using the same six?

Techniques like image replacement and sIFR have done us well. They remain the strongholds until something better comes along -- which may have just happened: namely, I'm talking about Cufón by Simo Kinnunen.

Cufón (I'm pronouncing it "koo-fon") is a font-replacement technique that uses javascript and vector graphics to write fonts from a font file (TTF, OTF or PFB) to your browser. It's easier/safer to use than sIFR and lighter on size than image replacement, but has the same copyright issues as both.

What Does Cufón Do?

The way Cufón works is pretty smart and highly technical. A proprietary javascript rendering engine takes your font file and converts it to a vector form. From there, it's translated to VML (Vector Markup Language). The result? Essentially, the font outline is written as JSON and converted into lots of numbers that define every curve and angle of its shape. The html5 canvas element is used to display the font in most browsers while VML is used in Internet Explorer (kudos to IE who has supported VML since IE5.5. VML is a very fast way to display vector graphics).

What's Good About It?

Ease of Use. The process involves uploading your font file to the script generator and adding the resulting file to your page, then adding the rendering engine script to your page. The final step is calling Cufon.replace javascript method for the particular text you want to replace. Those of you who have experience with sIFR know that while it provides for any font you need, it's tough to set up. I think I had the Cufón set up in about 5 minutes with no problems (and I'm not that bright).

File Size. Once the rendering and compressing is all said and done, the font size is about 60-80 percent less than the original.

Fully Supported. It's not Flash, so there's no need for the plug-in. And it is fully compatible in all major browsers.

It's also light on the browser. Click here to turn on Cufón in this section.

What's Bad About It?

~~Not Selectable~~. When the font is displayed it's rendered as a bunch of elements broken up by word. This is a serious limitation because Cufón text is not selectable(try it if you converted the text above). Personally, I often find myself wanting to select many things that look like text but isn't like images and flash content that isn't properly enabled to be selectable(selectable content in Flash SHOULD be the default setting people!). This will be a consistent point of frustration.

UPDATE:Within minutes of publishing this post I was shown by a few people that it is possible to select Cufón text. The experience isn't optimal but I am able to select and copy text from, IE(6-8), Safari 4, Chrome and FF3. In all browsers but FF3 the actual Cufón text will be highlighted and you can only select by word, unfortunately. In FF3 you can still select text but you won't see it highlighted.

The Copyright Problem. This is the biggest issue. When generating your Cufón javascript file, you are given the option to restrict the use of your font to certain domains. I don't know whether or not this makes the font totally secure. What I do know is that it seems like it would be a tricky process, which will likely curb the majority of font stealers right there. sIFR has the same issues where it is possible to decompile the flash file and steal the font; however, people haven't been doing this. Since it hasn't been a problem with sIFR, I don't expect it to be a problem with Cufón.

Conclusion

When thinking about fonts on the web, what is the best case scenario for us? Probably the ability to embed any font directly into any browser using HTML/CSS, right? Cufón comes fairly close, but is still just a simpler hack. Cufón is certaintly not the final word on fonts on the web, but is -- at this point -- a little closer thanks to its simplicity and compactness.

Portfolio Reviewin’, Thoughts and Ideas for Design Students

2009-04-08T20:29:00Z

Deep in the heart of Georgetown lies the Center for Digital Imaging Arts (CDIA) an extension of Boston University's applied arts school. I was recently asked to participate in a portfolio review of some of the school's upcoming web design graduates along with representatives from a few other fine agencies in the DC area. Among other options the school offers a Graphic and Web Design Certificate to help get future designers a leg up in pursuing their passions. I've been really impressed with the school's outreach into the local community. They seem to 'get it' and the students are smart to have connected with the school to jump start their careers.

CDIA Student Portfolios:

Erin Feliciano: http://erinfeliciano.com
Pol Klein: http://polklein.com
Laura Heffelfinger: http://ldhcreative.com
Corey Clark: http://cclark1.cdiaweb.com
Daniel Dominguez: http://www.coldfrontdesigns.com
Jill Cockerham: http://www.jillcockerham.com
Ronit Rosenthal: http://ronitrosenthal.com
Theresa Stephens: http://tstephensmedia.com
Charlotte Vazquez: http://spellsoup.com
Amanda Kirby: http://amandakirbydesign.com/html/index.html

It's my understanding that the CDIA students literally cooked their portfolio's up in a matter of a couple of weeks leading up to the review. Quite impressive considering many just learned the foundations of web design. As reviewers we were tasked with critiquing portfolios as a whole more so than the work shown within. Looking through the portfolios I couldn't help but have some recurring thoughts. This advice would apply for anyone entering into the field of web design. I hope it comes across as more helpful than it does preachy.

Who are you?

Your work is a marriage of your own personality and style mixed with the requirements of the job at hand. If you don't have any client work yet, it's really important to let your work be an extension of who you are. Your portfolio will 'tell your story' to those reviewing your work. Those that like your story will want to hire you.

Where do you want to be?

If you want any part in trying to find a job that matches your passions try to cater your portfolio to your interests. Be it print, web, animation, or video, if you have a love, emphasize it in your portfolio and pursue companies that can help you get your foot in the door. You can show a variety of different media to show off your creative thinking, but give priority to the work you are most proud of and that will help to get you where you want to be.

Understand the Space

If there are companies that you will be targeting in your job search, understand the space they play in. That can mean a variety of things. My advice is to find patterns in how different companies within the same space represent themselves with their portfolios. Look at their client list and the type of work that is getting produced for those clients. Learn who the people are and what organizations they participate in within the local community. Understand and be inspired by the work of the companies you desire to work for and go meet those folks at events.

Be Creative

When given the opportunity to speak to your work, talk about the creative thinking behind it. Concepts are worth their weight in gold. Good ideas are not so esoteric that only you understand them. A good idea can be simple and should be driving force for every other thought that comes together for a design. Good ideas win awards as much -- if not more -- than good design will.

Be Aware

Do yourself a favor by using a good rss reader and subscribe to a selection of design feeds that match your interest. Doing so will give you a better understanding of design vocabulary, expose you to trends (for better or worse), and give you more opportunities to be inspired. Smashing Magazine is a great place to start due to its wide variety of quality references.

Be Cool

Be deliberate about meeting people and getting your foot in the door but be cool about it. Don't be a turn off by being over-eager. Be mindful that your future employer wants to help you but can be juggling an assortment of things at any given moment. Also, remember that if you use social media that you will be found. So be professional about what you say in public forums. Last, be courteous and use manners. A simple thank you and follow up email can go a long way to say that you've appreciated someone's time.

Typography, It's Alive

There are two things I see time after time in the typography of student portfolios: 1) Opportunities are often missed to let the choice of type enhance the feeling and expression of the design and 2) There's too much sameness in sizing and spacing. Let the type guide the priorities of the message and space things out. In other words, let it live, let it speak, and let it breathe. A good use of type is a sign of good design.

Go Deeper

There is a time and place for flat colors and good composition, but I see too much of it in the work of students. Take the work further. A good concept can offer the opportunity to use textures, gradients and color palettes that are not only richer but can enhance the overall meaning and tell a better story.

Don't Stop at Design

If web design is your passion, understand that there is more to it than design alone. Understand how HTML, CSS and JavaScript work so that you can use it to your benefit. You don't have to be a coder to do great web design but learning to appreciate it goes a loooooooooong way. Also, take a look at what your content looks like with style sheets turned off. This is what the search engines will see and what makes your web site accessible. Being able to speak to search engine friendliness will go a long way. The same can be said about print (something we discussed at the end of the portfolio review). A good print designer understands what it means to talk about offset printing and the printing process and more inventive designs come from those who do.

Owen wrote a great post back in December of '08 about Finding a Job in the Design Field. In it he identifies alternative places to post your work and places to find work. It's a must read for anyone trying to figure out where to start.

Also, Cindy talks more about Interview Expectations and etiquette over on our Four Labs blog. There are some great tips to make note of.

Those are my thoughts. I certainly encourage other web design veterans to add their thoughts on the matter. I wish only the best of luck to the graduating students of the CDIA programs and to all who pursue a career in web design. There will always be turbulence but soon you'll be flying high.

jQuery + Type + You.

2009-04-04T21:26:00Z

Once a month, two designers at Viget put together a presentation for the rest of the design team. Sometimes it's on finding inspiration, sometimes it's on new ideas or initiatives, and sometimes it's just a fun little knowledge-sharing presentation.

The following is one of the latter: A simple presentation I put together with some jQuery plugins to demonstrate the various ways jQuery can interact with type on the web.

You can view it here (click the headers to advance slides).

Topics Covered

Keeping a vertical rhythm
Removing "widows"
Ampersands, ligatures & special characters
Typographic animations
Font detection

Plugins & Links

Stop Driving Your Developers Crazy

2009-04-01T15:02:00Z

A few weeks ago, I had the pleasure of presenting at Refresh the Triangle with one of Viget's crazy talented web developers, David Eisinger. Our original plan was to get up there and talk about how designers and developers can collaborate effectively, but we're both pretty snarky so somewhere along the way our talk title became "10 Things Designers Do To Piss Developers Off (and vice versa)".

As we battled it out putting slides together and making long lists of things we hated about our web counterparts, I found myself becoming much more aware of my "designer quirks". A few of David's points rang especially true, much to my embarrassment. It's hard for a designer to admit they aren't perfection on a stick.

So what hit home the hardest? Well, for starters...

Designers Break Functionality

David's example was a form that worked but wasn't pretty. After the designer touched it, it was beautiful - and broken. We certainly don't mean to break things, but I know I've done this countless times without realizing it. Sometimes what feels like a simple change to me - like updating a class on an element or making a submit button an image - interferes with scripts that the developers have working behind the scenes.

Fixing it:

The best way around this is to test everything you do after styling, even if you think your change was minor. If you're working on something you know might have Javascript attached to it, communicate with the developers to make sure the changes you're applying won't affect their functionality.

Designer Version Control Is Whack

A sample image from David's slides:

Actual snapshot of a typical folder on my harddrive:

Yep, his example looks pretty familiar. I have tons of revised PSD files lingering on my hard drive taking up space. I even create a folder for each project called "old artwork" where I ferret away all the unused-but-not-useless old files I just can't let go of. My files are named in vague and inconsistent ways. God bless the poor soul that ever has to figure out my "system" should I disappear off the face of the earth one day.

Fixing it:

There's no great way to do version control with big binary files like PSDs. At least, not one that I know of - got any suggestions? Until someone solves that problem, being more consistent with naming would be a good first step. When working on front-end development, though, there are some great version control systems out there that we should embrace. I've been using Git on my latest buildout thanks to our developers, and I've become a believer in the usefulness of version control. Knowing I can always go back should I break something royally eliminates a lot of anxiety

Designers Change Specs Without Thinking

David made a great point with this one. It's something that isn't talked about all that often, at least in designer circles. (Devs are probably ranting amongst themselves plenty!) It's far too easy to add complex functionality to your design without even realizing it... much to the dismay of developers who have to implement your grand ideas. If the design comp has already been shown to a client, the problem is ten times worse.

His example was classic - a (non-Viget) designer created the following snippet in a comp:

The problem? The designer put an "Add to calendar" link in there, which looks harmless enough until you realize that the site does not have a calendar or any notion of a "user" to create a calendar for. That's a pretty big change to the specs for one little link.

Fixing it:

I've been especially aware of this one since hearing from David, and have caught myself doing it on several occasions. When we're designing, our job is to come up with the best possible solution for the client and the users. For this reason, I don't think we should be focusing too hard on implementation when designing a layout - especially considering we don't know what kind of magic the devs can come up with to make something work. What we should do is know the specs inside and out before we jump into Photoshop and start throwing down layers. Being clear on the specs will make it harder to accidentally add a bunch of bells and whistles. It's not wrong to add functionality if it makes sense (and fits the budget) - but knowing what you're asking for is important. That way you can be extra sweet when you show your layout to the developer and point out that "itsy-bitsy little change" you made.

And A Zillion Other Things

I'm pretty sure there are a few developers out there with notebooks full of complaints about designers... which is natural, considering how much differently we look at our work and the world. Designers have their own lists, of course. But a little tension between designers and developers isn't always a bad thing - it helps to push your work to the next level. And at the end of the day, we're all passionate about making a great product which means we do have some common ground.

Don't miss David's thoughts on the talk, and check out our slides on Slideshare to find out what other designer quirks you might want to be careful about. And if you're in the Triangle, be sure to come to our next Refresh meeting!

A Graphic Look at SXSWi 2009

2009-03-31T04:09:00Z

Sharing notes at this year's conference went beyond Twitter -- there were a few folks at the SXSW Interactive Conference who took sketchnotes. Sketchnotes are elaborate notes with handwritten lettering and sketchy drawings of what is happening during the talk. They are an artform; a combination of comic strip and information design. It takes a good listener and fast illustrator to get down a good sketchnote. The popularity of taking sketchnotes has grown and many people are now scanning in the pages of their moleskin and uploading them to flickr. I thought I would share with you a few of my favorites from this year's conference.

I have seen them online and at the conference before, but this year Mike Rohde's sketch really caught my eye when I saw he had been sitting in the audience of my panel, "Web Typography: Quit bitchin' and get your Glyph on." I personally really enjoy the irony in his fantastically crafted hand lettering inspired by a talk on Web Type. His work has been getting a lot of deserved publicity; he has a very extensive flickr set that covers many of the design related panels at the conference. I recommend you check them out.

Sketchnotes by Mike Rohde

Sketchnotes by Austin Kleon

Sketchnotes by Sunni Brown

Sketchnote by Varick Rosete

For more sketchnotes, check out these Flickr Sets

Visual Notes from SXSW 2009

Mike Rohde's Complete Collection

The Joy of Sketch- Adaptive Path

Photoshop World Orlando Sketchnotes

UX Week Sketchnotes

Know of any more? Post them in the comments!

Book Review: Building Websites With Expression Engine 1.6

2009-03-30T12:02:00Z

If you keep up with Inspire you've probably noticed that we use Expression Engine for many of our non-Rails sites. Viget.com and all 5 of our blogs are built on Expression Engine, as are client projects such as PBS Digital TV, Sodexo Esteem Pass and RollStream. Expression Engine is a very powerful content management system with a lot of great features and functionality, but it isn't the most intuitive CMS to jump into. When I first came to Viget I had no knowledge of EE and found it pretty confusing until I really wrapped my head around it. I learned the basics pretty quickly thanks to some great online tutorials from BoyInk and a lot of help from my fellow designers, but a beginner book would have been helpful. Web tutorials are great but I like to do lots of highlighting and underlining. I'm one of those tree-killers that still prints things out to take notes on.

Recently, Packt Publishing sent me a copy of Building Websites with ExpressionEngine 1.6 by Leonard Murphey. It's the only Expression Engine book on Amazon right now, perhaps because the EE user base is so much smaller than blog platforms like WordPress. I was really hoping it would help make sense of some bigger questions I have about EE, like sorting out the many different ways to organize and build your site structure. Unfortunately for me, neither Leonard nor the Expression Engine team offer much insight about that. Everyone seems to have their own way of doing it, and even here at Viget our strategies vary from site to site. While it didn't answer my theory-based questions, it offers a good introduction for a true beginner and showed me to quite a few capabilities I hadn't explored.

What I Liked:

The book takes an exercise-based approach, walking you through the steps you might take to build a full site in EE. The site you will build includes static pages, a blog, a calendar, a members-only area, and a simple store. Topics include installation, the templating system, using weblogs, and working with modules such as members, discussion forums, and simple e-commerce with PayPal. The exercises are very detailed and even walk you through adding CSS to style it - something I found distracting, but beginners might find helpful.

Despite the fact that it's written for absolute beginners, I did learn some new things. The in-depth member management information was useful, as was the explanation about how to build a calendar and a simple photo gallery. Lots of screenshots and example code make the 370+ pages less overwhelming than they look.

What I Didn't Like:

I wish it would have gone into more depth about Embeds and URL segments, as this is something incredibly important to understand if you're going to make good use of Expression Engine and it feels like they are glossed over. It could also use a diagram of some sort explaining the relationship between Weblogs, Templates, Template Groups and Field Groups. In fact, if anyone out there knows of one I'd hang it up over my desk as a reminder!

Takeaway:

If you know a little HTML/CSS but you are brand new to EE, this book will help get you started down the right path. If you've been using it for a while you probably won't get a ton of new info out of it - still, worth browsing if you can get your hands on it.

Check It Out Yourself

Wondering if it's for you? Packt Publishing was nice enough to provide a sample chapter for Inspire readers. So if you're interested in seeing what the book has to offer, download the PDF extract.

Refreshing Healthy Child: Managing Growing Content & Purpose

2009-03-26T15:09:00Z

Viget had the opportunity to design a new online home for Healthy Child Healthy World two years ago when they were in the middle of a big rebranding endeavor. The outcome was a success and we launched a site that reinforced/helped spread the HealthyChild.org message of understanding environmental health risks for children. We were fortunate to continue our relationship with HealthyChild and have had the opportunity to support the site since launch. But two years is a long time, especially on the web. In that 24 month period, online trends are guaranteed to change, user expectations are bound to grow, and client goals/dreams will expand as they get a footing in the opportunities their newly redesigned site offers them.

In that time we've made tweaks and small modifications here and there as our client (and their online audience) grew. Recently we had the opportunity to step back and see where we could improve on the formula. We found that some areas of the site (the Blog & Shopping Recommendations to name two) had become a much larger entity then we had previously expected. A few seams were also showing, including the ability to add new elements to the page without visually clogging the layout.

Re-targeting the Demographic & Pushing the Concept

We started by examining what was working. The blog really took off after launch and has become a hub of activity on the site. Our original intent was to allow the blog to be a supplement to larger sections focused on research and issues. In reality that relationship was swapped and the blog was becoming the focal point. We decided to simplify the homepage and blur the distinction between the blog/lifestyle headlines and recent research articles, allowing more accessible content to push users to the deeper, research-oriented sections of the site. It felt like a much more natural flow of content, in that if you care about a specific topic you might care about the research behind it but not vice-versa.

We also re-evaluated HealthyChild's demographic. After researching what content was winning on the site we drew conclusions that a majority of our clients users (and our target demo) were younger, first-time mothers. This helped to support the shift from a strictly research heavy homepage in favor of more issues/story based content. At the same time we rested on the visual concept by asking "What would HealthyChild look like if it was a hip magazine for young mothers?" Not a completely original concept by any stretch but one that helped us and our client quickly imagine the goals of the redesign while setting prescience of departure from where we currently were visually. We pulled together a variety of magazines off the rack as inspiration both for visual perspective as well as headline hierarchy.

We then jumped right into the comp phase, roughing in the areas of the homepage that would be the foundation of our new concept, namely the blog content. We took our lead from the various magazines we researched and lead off with 4 main callouts (basically our magazine headlines) and created a zone that would be eye catching and allow us to create fresh graphic content that would be large enough to visually change the look of the site (our magazine cover image) on a regular basis (1). The last thing we want is for users to glaze over content that doesn't look like it's changed for a year. Next we carved out a zone for regularly added blog posts and articles that will be the main hub of activity on the site (2). Lastly Kara and I sat down and restructured the main navigation and general site structure to mirror the new focus of the site. We brought the editorial & lifestyle aspects of "Live Healthy" to the front and center and let "Issues" and "Research" fall into a supporting role across the site.

Pushing the Brand

We also had the opportunity to visually push and expand the HealthyChild brand. Since our content was switching gears to a more lifestyle approach it was key that we present the refreshed site in a manner that mimicked it's content. First I dissected the logo and pulled elements that I thought would work on their own. For example the HealthyChild logo is really expressive on it's own, so it was easy to grab the paint swipes out and use them to really punch up the vibe and movement on the page. Other elements were inspired by traditional print design and pieces from the magazines we pulled for inspiration. Next was layering elements and brushing on a soft gloss that would help reinforce our magazine concept, bringing out the lifestyle and energized feel we hoped visitors would take away from their visit to the site.

That's A Wrap

Structurally HealthyChild is very much the same as it was before. All the content that previously lived on the site was left intact and the majority of the overhaul was done on the front-end. This allowed us to move quickly, adopt things that were working in the previous design, work in the framework that we currently had setup for the site in EE, and keep our costs down to give the greatest value to our client. By taking a few steps back we were able to better target the new needs of our client and in turn the needs of their users.

Below is a before (right before the refresh) and after shots.

Visit the site here.

Design Without Pictures, A Few Audio Podcasts Favorites

2009-03-23T16:54:00Z

Living and working in the DC area is a blessing in that there is much to see, and business in the Nation's Capital is seemingly bountiful. The curse is the commute for people (like me) who enjoy living in the burbs. I spend a minimum of 7.5 hours per week commuting to my office. That’s almost a full work day for normal people. Mind-numbing, isn’t it!? If any unexpected roadblocks occur, you can add to that figure.

That said, I don’t find a whole lot of time to do things like read blogs, even though it's probably being done by others on the road (not recommended). I do, however, try to use my commute time wisely. As I travel to work, I listen to at least one design or business podcast per day -- while sipping my first of several daily cups of coffee. Going home … that’s when I rock the tunes!

One of the things that I’ve learned is that a good audio podcast is generally anchored with an interview. News, updates, comments, and random banter can also fill the void, but it’s the interview that seems to be the necessary core component -- at least in my opinion. I’ve opted for the audio podcasts simply because I’d much rather make use of my commute time than stare at a video podcast on my laptop when I’m not driving. The temptations to multitask are just too high.

That is not to say that audio is a better format. It's just that it works better for me considering how I intake the media. There are plenty of good reasons for video podcasting, particularly when tutorials are involved. Alas, I’ve discovered several great audio podcasts related to design. Here are some of my favorites:

Boagworld

If there’s one podcast to listen to about web design, it's Paul Boag and Marcus Lillington’s Boagworld. Clocking in at one hour (usually), the co-hosted podcast has exactly the perfect ingredients needed for a useful-yet-entertaining show. It typically starts with intro banter, followed by some recent news, leading into a deeper dive on a particular topic, sometimes an interview, then some listener questions and answers, all climaxing with a final joke delivered by Lillington. You always kind of know what to expect, but it's still loaded with surprises since the self-deprecating Boag and Lillington consistently poke fun at each other and themselves. The show complements their regular responsibilities they fulfill during their day jobs at Headscape. They've build a strong following, and their podcasts appear on an almost weekly basis.

Adaptive Path Podcasts

San Francisco’s Adaptive Path is one of the best user experience research and strategy agencies around. Their podcasts are hosted by a variety of staffers, including Peter Merholz and Jesse James Garrett. The shows consist of a variety of UX topics, expert interviews, and good coverage of their UX Week and MX: Managing Experience events.

Design Matters

Many great designers are equally good writers, and, sometimes, they are amazing storytellers. Sterling Brand’s Debbie Millman is one of those designers who can write like a novelist -- her talented writing style comes across when she introduces every one of her interviews. She always seems to find a match for her personal life experiences and her diverse list of participants, which has included many design extraordinaires such as Chip Kidd, Ellen Lupton, Jeffrey Zeldman, and Vaughan Oliver.

CreativeXpert

Much like Debbie Millman, Alan Houser is a natural born podcast host. Whereas Millman’s interviews have included well-known figures, Houser’s podcasts focuses primarily on emerging designers and developers of the web industry -- including Jason Santa Maria, Michael Boyink, and Stamen Design, to name a few. It’s the natural charm and quick wit that make his one of my favorite design podcasts. To my knowledge, there hasn’t been a new podcast since the July ’08 interview with Santa Maria. Let’s hope that wasn’t the last.

SXSW Interactive

The South by Southwest Interactive conference is the Spring Break of web design. Web professionals from all over the globe gather in Austin, Texas for four full days of geekery. The topics are diverse, plentiful, and trends are known to accelerate here as did Twitter in 2007. For some reason the podcasts aren't as easy to find on iTunes as they used to be which is a shame for lazy people like me. If anyone can shed light on that let me know. For more on SXSWi '09 happenings see Jack's post.

http://www.sxsw.com/interactive/news/videos_and_podcasts

dConstruct

Pound-for-pound, dConstruct is another annual web design conference that packs a punch. The conference last year -- which was organized by the talented folks at Clearleft -- featured notables like Jeremy Keith, Tantek Çelik, Daniel Burka, and Joshua Porter. Access to UK conferences like this don’t come cheap for any of us Stateside admirers, so many thanks to the organizers for making these podcasts available.

http://2008.dconstruct.org/podcast/
iTunes

TED Talks

The TED conference was founded in part by designer Richard Saul Wurman in 1984. The graphic designer and architect has since left the conference, but, under the guidance of Chris Anderson, TED Talks have emerged. The talks have made some of the world’s greatest minds accessible and digestible, and they feature speakers like Al Gore, Bill Gates, and Bill Clinton. The talks are intentionally in the 20-minute range to allow for plenty of useful knowledge. The TED organizers have done a great job of promoting and syndicating this content for the good of all humankind.

http://www.ted.com/index.php/talks
iTunes

Searching “web design” in iTunes will offer several other options of popular audio podcasts, as well as some video options. Plenty of other people regularly follow Boxes and Arrows, You Suck At Web Design, the 101 Web Design Show, and The Rissington Podcast, yet there still seems to be room for more quality podcasts specific to web design. Are there others that we should tune into? Please share.

Ending the Great H1 Debate

2009-03-20T19:42:00Z

Most of us have seen the website The H1 Debate where people could vote on whether the H1 should only be used as a site's logo OR used as a the main heading on a page. The point being that you could only use one H1 on a page. This inspired Josh to blog about the extremely violent disputes we have had about the subject around the office. I've always thought it was fine to use multiple H1's on a page where appropriate and sparingly. However many people, such as SEO experts, have claimed that using multiple H1's on a page is frowned upon by the search engine gods (such as Google) since it could appear you were loading your site with dirty SEO tactics thus hurting your page ranking. Today Samantha sent me an interesting video from Google software engineer Matt Cutts on the Google Webmaster Central Channel that seems to quell the debate:

In the words of Brian Talbot, "Let there be peace among the semantic masses"

Viget Flash Mob: 1” Buttons

2009-03-09T14:03:00Z

On occasion, the designers at Viget reserve four hours out of their busy days and work feverishly to create a project that is outside of their daily web design routines. We call this excercise a "Design Flash Mob." We have a running list of ideas that we all contribute to, and everyone votes on a topic when the time aproaches. In the past, we have done desktop wallpapers and t-shirt designs. This time we tackled 1" buttons, a popular piece of flair amongst web nerds, design geeks, indie rock teeny-boppers, and your TGI Friday's waiter. Many of us turned to Stereohype for inspiration on designing for this tiny canvas.

Mindy

I've always had a fascination with things that are old, especially when they are reinvented and given a modern twist. My first set of 1" buttons was inspired by a collection of vintage and antique buttons I inherited from my great-grandmother. There are hundreds of buttons in the jar from every era you can imagine. After sorting through and scanning a few favorites, I layered them on top of one another in Photoshop to create interesting textures. Then I played around with the contrast and coloring to achieve a pop-art look.

My original (somewhat blurry) scan of the buttons can be found here.

My second collection came from bits of typography found in a 1905 Burr's Monthly Magazine. Having owned and restored a Victorian home, I have a great appreciation for the amount of consideration the Victorians put into ornamentation and design. I love their eclectic sensibility. Almost every ad in the magazine has hand-lettered text and an ornate illustration. It was hard to choose just a few samples to scan and crop for these buttons!

Rob

I decided to to take a more playful approach by creating a simple vector-based cartoon. It was a good opportunity for me to brush up on my illustrating skills while still having fun and being creative at the same time. Each button and subsequent quotations represent a mood (happy, hungry, and confused).

Jim

I've always been a bit envious of people who are able to grow a nice set of Mutton Chops or an elegant Franz Josef, so I thought a set of buttons dedicated to facial hair would be fun (and maybe the next best thing to being able to grow sweet facial hair). Apparently, I'm not alone in our design group (*cough* Owen *cough*). The inspiration for my button set came from Jon Dyer's excellent blog entry about his quest to grow different types of facial hair. I selected 15 of my favorites and based the model on a popular forum "not amused" icon.

Peyton

Looking to play around in Illustrator a wee bit (something I haven't done in a while), I decided to "buttonize" a few of the funnier pangrams I've come across. Given the time limit and the quirky nature of the pangrams, I decided to push the "offness" factor with some rudimentary illustrations and some of my favorite ugly fonts. Although tacky, I still wanted to create some level of cohesion between the pangram/idea, the illustration, and the font selection, which I think I did an ok job with. While these buttons are less than beautiful, I'd see them possibly adorning the bag of someone who might enjoy wearing one of these fun CNN t-shirts.

Samantha

I did not set out to create Viget branded buttons, but I liked the idea of having a series that expressed motivational words that designers can relate to. Realizing that each of our four labs have fantastic words to work around -- inspire, engage, extend, advance -- it seemed obvious to me to design my buttons around them. That way, if they ever get printed, they could be a collectors' set!

Erik

I took my inspiration from the winners page at StereoHype. I got the best vibe from the graphical buttons; however, I forgot I had no graphical ability on or off the web. From here, I decided to go in the buttons-that-looks-like-real-things direction. My first button was one of those spy holes you get in your front door at home. This causes a problem in that part of the understanding we had for this was to design a series of buttons that all have something in common. I switched my approach here to buttons. Not the buttons we were designing but real buttons you find on clothes or furniture. The buttons I found were a perfect display of vintage style and texture and brought me back to my youth when I swear each one of those types of buttons was represented somewhere in my home.

Tom

I'm not entirely sure where my head was at when I created these buttons. A sudden strange mood overcame me. They were partly inspired by Doug's passion for cute lovable animals like ponies, bunnies, and puppies -- and because he was unable to participate in our latest Design Mob. Secondarily, its social commentary on all the forgotten creatures not often seen in save the animals campaigns. We may as well cover all creatures big or small, weak or fierce, and even ugly or adorable. One for all, and all for one! Life, love, solidarity.

Owen

I am an avid fan of both mustaches and the CSA archive, so the most logical next step was to combine the two of them into a homage/poke at designer pop culture. In an age of over saturation in all avenues of media, I thought it was fitting to give these commercially iconic faces a little twist of satirical humor (and, in turn, also poking fun at myself for being part of this profession). At the same time, I also wanted to incorporate the question of repurposing art in the vain of Bansky and other artists who resuscitate tired works. When imagery reaches the breaking point of saturation and spill over into the tank of low-culture kitch, who really owns the art?

Keith

I went with a Viget brand for my buttons. After I had exhausted my own ideas, I took the logos from our four company blogs and threw them onto buttons to add to my theme.

Mrch Is Shrtct Mnth: Learning Web Design Shortcuts

2009-02-27T13:00:00Z

Like Mindy before me, I pledged I would speed up my workflow this year using keyboard shortcuts. Web design is an interface-intensive profession: we use 3+ programs at once and navigate between dozens of folders on an average project. When designing a comp, I use over 50 distinct commands in Photoshop alone (not counting the web browsing, email, and Illustrator commands). This is is a huge amount of time spent moving the mouse, which could be easily reduced by a couple shortcuts.

The trouble with shortcuts? There's just too many of them. It's hard to find a place to start tackling a list of key commands, and once you begin learning, it's harder still to commit those shortcuts to memory.

One Day At A Time

But together we shall overcome: Download the printable Viget shortcut calendar for March, and learn (really, truly learn) a new shortcut every day. Programs covered: Photoshop, OS X/Windows, Illustrator, Textmate, CSSedit, and the shell.

Every day, try to learn at least one shortcut from the day's list using the exercises shown. If you already know a day's shortcut when it comes up, don't just skip that day! Think about a common task that you use the mouse for, find the shortcut for it using Google, and complete the same exercises with it.

Daily Exercises

The following exercises are really good ways to get commands committed to memory:

Do the shortcut 20 times in a row. Seriously, just do it 20 times really fast.
Mix it in with two other tasks. For example, select-[shortcut]-move an object. Do this five times.
Start using it regularly. If you forget and complete the task normally, undo and use the shortcut.

Download the printable calendar (PDF)

(For PC users, most of the Cmd key commands use Ctrl instead, and Alt instead of Option)

Week 1: OS Basics.

2nd - Stop clicking on folders and apps!
Cmd-Spc - Find and launch files and applications with Spotlight.
Ctrl-Spc - Even better, do it with Quicksilver, or for Windows, Colibri.

3rd - Browsing in Finder
Cmd-Up/Down - Use this when opening files or moving around in Finder to jump down/up a folder. (In Windows, try Backspace and Enter)
Cmd-O - Open a file or application in Finder
Just type - Jump to a folder or file in a Finder list
(Mac OS tip: Browsing in column mode speeds things up even more, because you can use right and left arrows to jump into folders)

4th - The Menu Bar
Once you get fast with the keyboard, browsing the menu bar this way will be as easy as using the mouse.
Ctrl-F2 - Jump you to the menu in OSX, and Alt will in Windows.

5th - Multi-Tasking
Cmd-Tab - Switch between open programs superfast (Alt-Tab on Windows)
Cmd-` - (Below the tilde)- Switch between windows in a single program

6th - Quittin' Time
Cmd-W - Close a window or tab
Cmd-Q - Quit the program (Alt-F4 in Windows)
Cmd-H - Hide the current window

Week 2: Photoshop

9th - Colors
X - switch foregound/background colors
D - Reset foreground/background to black and white
These go great together: A quick D-X is the easiest way to set white as a foreground color
Opt-Del - Fill with foreground color

10th - Cuttin' and Pastin'
Shft-Cmd-C - Copy merged (copy a fully-flattened section of the image to the clipboard)
Shft-Cmd-C cut-paste to a new layer

11th - New Things
Cmd-N - New Document
Shft-Cmd-N - New Layer (asks you for the name)
Shft-Opt-Cmd-N - Immediate new layer

12th - Layers
Cmd-E - Merge with the layer below
Shft-Cmd-E Merge all layers
Cmd-G - Group layers

13th - Masking
Q - Switch to quick-mask. Hit Q again after you've painted some black to create a selection
Alt-Click the mask icon - Start with a black mask instead of a white one
Cmd-Click the mask itself - Set the mask area as your selection

Week 3: Other Programs

16th - Textmate
Ctrl-Shft-W - Wrap the selection with a tag (begin typing to specify the type of tag)
Ctrl-W - Select word
Shft-Ctrl-Cmd-L - Automatically Google the selected text and make a link to it
Shft-Opt-Drag - Select text using the crosshairs instead of a text tool

17th - Illustrator
Cmd-F - Paste an object in the exact same place
Cmd-U - Toggle Smart Guides on and off
Cmd-7 - Make a clipping mask using the top object

18th - CSSEdit
Cmd-/ - Comment out (This works in lots of editors)
Cmd-[ and ] - Shift a block of code left or right

19th - OS X
F9 - Quickly view all open windows
Ctrl-Cmd-Shft-4 - Grab a piece of the screen, load it into your clipboard
Ctrl-Opt-Cmd-8 really fast - Mac OS Lightswitch Rave

20th - Terminal
Tab - Complete a file or folder name
Cmd-T - New shell tab
Cmd-{ or } - Previous/next tab
Up arrow - Recall previous commands

Week 4: More Photoshop

23rd - The Brush
B - Brush tool
[ and ] - Change size of the brush
Shift + [ and ] - Change the softness of a brush
1-10 - Change the opacity of a brush

24th - Fast Fixin'
Cmd-T - Free Transform an object
Cmd-L - Levels
Cmd-U - Hue/Saturation

25th - Saving Down
Cmd-S - Save (Seriously, some people don't use this)
Cmd-Shft-S - Save As
Cmd-Opt-Shft-S - Save for Web

26th - Undo/Redo
Cmd-Z - Undo/Redo
Cmd-Opt-Z - Undo repeatedly (for jumping back 3 or 4 steps)
Cmd-Shft-Z - Redo repeatedly

27th - Image Properties
Opt-Cmd-I - Image Size
Opt-Cmd-C - Canvas Size

Week 4: Bonus Week!

30th - Browsing
Opt-Cmd-left/right - Switch Tabs (Firefox)
Opt-Cmd-[ or ] - Switch tabs (Safari
Ctrl-Tab - Next tab (Firefox and IE7)
Cmd-L - Jump to the URL bar

31st - Traversing Text
Cmd-arrow - Jump to the beginning/end of a line/text area.
Opt-arrow - Jump the next/previous word or paragraph
Shft-Cmd-arrow - Select to the beginning/end of the text
Opt-arrow - Select the next/previous word or paragraph

Download the printable calendar

Viget Inspire : The Design Lab

What To Expect When You’re Expecting CSS/HTML Handoff

A Bad Place To Be

What To Expect from CSS/HTML/JS Deliverables

What NOT To Expect

Happier Clients, Happier Designers

Designing a Custom Flash Player for Brightcove

ABOUT BRIGHTCOVE

WHAT THE CLIENT WANTED

USER INTERFACE

VISUAL DESIGN

View 1

View 2

IMPLEMENTATION

CONCLUSION

Take Something New and Make It Old

Six Snappy Snap Apps for Mac

Advice, Trends, and Resources for People Entering Web Careers in 2009

Advice: Don’t Grow Up Just Yet

Advice: Work Smarter

Trend: Tuning Out

Advice: Try It

Resources: Firebug & Designers Toolbox

Advice: Focus.

Trend: Sketching

Advice: Build It

Resources: The Design of Everyday Things

Trend: Don't Reinvent the Wheel

Advice: Make It Easier On Yourself

Advice: The Learning Starts Now

Resources: Consume Everything

Advice: Go Crazy When You Concept

Advice: Be Fearless

Advice: Be Design Agnostic

Advice: Be An Artist

Advice: Take Restrictions And Own Them

Advice/Resource:

Advice/Resource:

Advice:

Advice: Surround yourself with the best.

Advice: Find your sandbox

Trend: ‘inbox zero’

Resources: Pattern Tap

Resources: Delicious

Trends:

Advice:

Resources:

Trend:

Advice:

Resources:

Making Quicker Interface Decisions With Design Patterns

A Brief Explanation of Design Patterns:

Solid Design Pattern Resources:

Fix It Fast: Rapid IE6 CSS Debugging

Preventing Bugs

Defining Bugs

Investigate Bugs

Fixing Bugs

Some Reference:

Design Share 2: More With Less

The Talks

Displaying Your FeedStitch JSON Feed Using jQuery

Cufón Font Replacement - The Good and The Bad

What Does Cufón Do?

What's Good About It?

What's Bad About It?

Conclusion

Portfolio Reviewin’, Thoughts and Ideas for Design Students

Who are you?

Where do you want to be?

Understand the Space

Be Creative

Be Aware

Be Cool

Typography, It's Alive

Go Deeper

Don't Stop at Design

Related Posts

jQuery + Type + You.

Topics Covered