The Browser is Dead

Well, maybe not dead. Disappearing perhaps?

In a recent Buzzfeed post entitled "Remember The Browser Wars?", author John Herrman points out that not only are the browser wars over, but that as browsers increase in simplicity, then begin to disappear entirely. He writes, "The next versions of the operating systems will write the discreet 'browser' out of existance."

So I wondered. What would that look like?

I took the latest version of Google's Chrome UI (thank you Todd) and made it essentially disappear. In the same vain as Apple's minimalist QuickTime 10 design, Chrome's navigation elements, tabs, and address bar only appear when you need them and vanish when you don't.

Interface elements appear as the user mouses towards the top of the page and disappear as the user mouses away. It presents the user with the cleanest possible slate to interact with, focusing on content and eliminating clutter.

Google, I'll be expecting my offer letter in gmail.

Boston's WBZ Makeover Enters a Cold Sea of Blue

Boston's local channel 4 news station, WBZ recently underwent a $750,000 makeover that includes a new set design and revised logo, reports the Boston Globe. The changes were made in an effort to better compete in a market where other stations are gaining viewership. In addition, the station is continuing to solidify their brand evolution from NBC to CBS in an affiliate change in 1995.

WBZ general manager Ed Piette says, "How do you contemporize a legacy television station? What we have here is no different than Cadillac, which was born in the 1920s, which is still very 21st century. Our look and our feel was getting a little long in the tooth."

At first glance, the set's new look – a slick, blue, purple, and metallic grey palette feels clean and contemporary. The logo, which looks to be the same art, just converted to a one color semi-transparent white knockout treatment, compliments the set nicely and pops off the dark blue backgrounds. All in all, a fine execution.

But after looking at the sea of blue competitive landscape, it begs one to ask, why change from a warm, inviting color palette to an undifferentiated cold metallic look. The set may have needed some updating, e.g. the dated wood veneer, riveted paneling, and lighting, but this feels like a change for change's sake, as Piette says, it "…was getting a little long in the tooth."

What set WBZ apart (visually) from competitors, is it's friendly and bright color palette including a vibrant yellow and cyan. The same warm tones were also reflected in the set that used wood accents and warm lighting. And although becoming a bit dated, the old set felt more inviting and human while this new set feels more like a 21st century version of the game battleship or a scene from the next Bourne flic – cold and mechanical. And what looks like an effort to "contemporize" the station ends up feeling like a half-step back in time, just with better technology.

I would have loved to see the same technological steps taken to update the set, i.e. the HD monitors and smart lighting, but with the bright color palette. Here's to hopes that viewers enjoy the new set, and don't jump ship just because of the look and feel.

Wikipedia Redesign

Although Wikipedia was not officially looking to redesign their site, a social search web startup, Greplin, was. Greplin hosted a Wikipedia redesign contest in an effort to get designers and devs to help them design their own search functionality. The goal - rethink Wikipedia's search results with an interactive visual solution. Here was my submission.


Check out the full project on my website here.

YouTube Player PSD

UPDATE: Download my new 2013 YouTube Player here

Download the 2012 YouTube Player Photoshop file (1.8MB)

Hello my fellow intertubers. In many of the designs I create, I often have to show an embedded YouTube player. For each project, I end up going to YouTube, screenshotting the player, then crudely chopping it up in Photoshop to fit the video size I want. Welp, I've HAD it. So I took some time and recreated the player from scratch and I'm making it available in cyberspace.

I chose the 640 x 385 size, but the file is easily scalable since all of the objects are vectors within Photoshop. I've included a couple nice extras like the large play button overlay, a pause button, and the reduced progress bar.

Hope this helps. Enjoy!

How to Eliminate Gradient Banding in Photoshop CS5

Ever create a large gradient in Photoshop and notice the banding as it transitions from one color to the next? This is a common occurrence when you have a very large area that you're covering like a desktop background or TV frame in 1080p. Since it's so large, the eye begins to detect each step of gradation in single color bands.



By default if you're using the Gradient Tool in a layer or using the Shape Tool and applying a Gradient Overlay Layer Effect, Photoshop will not prevent any gradient banding. There are a few ways to eliminate banding, but the quickest that I've found is by making sure Dither is checked while using the Gradient Tool. Voilà! This will add noise to the gradient, undetectable to the eye, that eliminates the those distinct banding lines.

The obvious drawback to this technique is that it's not easily editable. Once you've created that gradient, it's set in stone. Adobe does not give us the Dither option in the Gradient Overlay Layer Effect. Very unfortunate for when you just want to tweak the gradient by a value or two. The best option may be just saving a Gradient Preset in the Gradient Editor and making changes from there.

Happy dithering.

The Photoshop Etiquette for Web Designers

One of the best guidelines for web designers and art directors I've seen out there. Dan Rose did a great job with a simple "Do this, don't do this" way of presenting the many ways designers can execute their artwork and get it ready for handoff to dev teams. Cheers Dan, art directors across the globe thank you.

InDesign Object Effect Shortcut - No Drop Shadow

Ever apply an effect in InDesign like a drop shadow, inner shadow, or glow by using a keyboard shortcut? Well, then you're probably familiar with this common problem Adobe has never addressed in any version of InDesign, even before CS1!

For some reason, the default shortcut for an object effect is the Drop Shadow property by hitting command option M. Did Adobe assume that everyone would want drop shadows on everything therefore making it the default? Or was it that engineer's life long dream to force drop shadows upon every designer who's just looking for quick access to an effect menu? Or is it just simply that the drop shadow effect is the most popular and therefore deserves the default setting?

The answer is none of the above. The problem with the current state of the shortcut is that it automatically applies the drop shadow effect to the object. If the user wants any other effect, they have to first turn off the drop shadow, then turn on the desired effect. It's always a two step process (god forbid we have 1 extra click right?).

But what happens when you want a different effect than a drop shadow, and still want to use a shortcut? Well, if you were to change the shortcut, Adobe gives you a list of effects to choose from, in turn, just changing your default effect to let's say an outer glow instead of a drop shadow, but still automatically applying the effect. Obviously, this doesn't change the root issue.

The solution is a shortcut that opens up the Effects dialog box without automatically applying any effect at all. In a perfect world, it would be a button or menu item that opens up the dialog box, e.g. "Effects…". This solution would provide the user with all the effect options without forcing automatic application. Adobe does not provide this for the user.

But there is a workaround!

For the Effects dialog box to appear without automatically applying any effects to the object, assign the keyboard shortcut to the top item, Transparency. This will allow the user to choose which effect they desire and it eliminates the turn off, turn on process. So there you go! Of course you can customize this shortcut to whatever you want, it doesn't have to be the command option M, hell, you could keep the default drop shadow shortcut and just add your own to the transparency setting, go nuts.

Hope this helps anyone in their quest for InDesign keyboard shortcut domination. Enjoy!

We're in Boston!

Forge has made the move to beanville from Waltham! (Nevermind the windex and moving bins). Big changes going on that's for sure. Good tings, good tings. The space is pretty sick, thanks to the people who were here before us who put a ton of cash into making it look amazing - nevermind putting in a massive bar including kegerator. The creative room's pretty tight, but cozy (I think). Joined the gym downstairs and I'm hoping to bike into the office once we unbury ourselves from 1000 ft. of snow. My commute has gone from 12 minutes to 45, but I can't complain (except for the MBTA's shotty service). Overall I'm pumped for the space and everyone here at Forge. Stop by for a beer on the house.

Rounded Rectangles in Photoshop

Ah, the rounded rectangle. Beloved by designers loathed by developers. This is not a post to delve into that age old debate, but an informational guide to understanding the how and why.

The rounded rectangle tool in photoshop is one of the most heavily used tools in a digital designers toolbox. Many designs require this tool to produce call-to-action buttons, content buckets, navigation elements, the list goes on. True that rounded rectangles may soon be replaced by CSS3 to achieve this effect in the browser and eliminate the need for images to construct them, but designers will always need the tool for visual comps and final pixel perfect designs.



Before I go into how these are constructed, I want to answer the why first (skip this if you know the answer). In many cases, rounded elements in digital design represent buttons. Designers create buttons with rounded corners to mirror the real life physical objects that we have come to know: buttons on vending machines, dashboards in cars, kitchen appliances, remote controls, etc. This is also the reason designers often use gradients, highlights, and reflections to show dimension. If industrial designers created most of those physical buttons with hard corners, you'd see that correlation in visual design. Rounded corners also allow users to differentiate elements on the page. Content blocks can be treated with hard corners and buttons with rounded corners to clearly communicate to the user "look, this element is a button, it looks like a real button, and it has an action, click it!"

So how does Photoshop construct these manipulatable miniature marvels of bitmapped beauty? Photoshop's Rounded Rectangle Tool uses the Radius setting to determine how "rounded" your rectangle will be. The amount can be defined by pixels, inches, centimeters, millimeters, points, or picas. If you're a digital designer you'd be using pixels mostly likely. Adobe uses their proprietary software to calculate the proper anti-aliasing (extra pixels with varying levels of transparency to show soft edges) for each corner radius setting.

Below is an example of the differences between a 1 pixel to a 6 pixel corner radius zoomed in at 1200% and at actual size (72ppi). You can see how photoshop uses anti-aliasing to create the rounded corner. The radius setting (distance from the center of an imaginary circle in this case) is the amount of anti-aliased pixels it takes for the corner to get to the first solid pixel (including that solid pixel). Of course, you can enter in any radius number you choose, but if the number is larger than half the height of your rectangle, the ends will become circular. If the radius is equal to the half the height of your rectangle it will be a pill shaped element (often, a desired effect).



A Note About Pixel Perfect Design & Aligning to the Pixel Grid
In each of these examples, the rounded rectangle was created while aligning to the pixel grid. More specifically, snapping to a 1px x 1px grid with the grid visible. This will guarantee that each of the rectangles will have straight hard edges on the top, bottom, left, and right. This is a technique used in Pixel Perfect Design, a topic that I'll cover in detail in a later post. It ensures that the artwork being created eliminates "loose pixels", basically unwanted anti-aliasing that Photoshop often includes when designers don't align to the pixel grid.

In addition, here is an example showing the rectangle with a stroke layer style in the various corner radius sizes. There are 3 options for positioning the stroke; inside, center, and outside. Photoshop uses the outside position and at a size of 3px as the default. In this example I'm showing the stroke size at 1px. The inside position places the stroke on the inside of the rectangle, obviously, and doesn't change the original dimensions of the rectangle (ideal in many cases). As you can see, the center position causes the stroke to not align to the grid, there is unwanted anti-aliasing, and the dimensions have increased by a visual half pixel. The outside stroke position adds 1px all around and changes the final dimensions to be 2 pixels wider and taller, in this case, 27px x 27px. Keeping this in mind is helpful when designing to a pixel perfect wireframe, e.g. if a button needs to be exactly 40px x 20px, then adding a stroke to the outside (default) would make the button 42px x 22px thus breaking the bounds of the design.



I hope this helps anyone in their quest for pixel perfect rounded rectangle creation. If you have corrections or additions to my post, please feel free to comment below.

Number 10 Envelope USPS Guidelines

Click the image for enlarged view

Finding specifications for such a common of a thing as a #10 envelope (normal letter size envelope) is harder than you think. I was able to track down the guidelines after visiting multiple sites and piecemealing the specs together to help me draw the guidelines you see above. Google was not good at finding relevant results either. As soon as you type in "envelope" you get thousands of results from printing vendors. Sorting though the results for the information I needed was taxing to say the least. So, I created this simple graphic to help anyone in their quest for number 10 envelope answers.

A couple things to note: The Barcode Clear Zone is exactly that, a clear zone. No text or graphics can be in this 4.75" by 0.625" area. Also, in the OCR Read Area, OCR stands for Optical Character Recognition, a machine operated sorting process. Robots score another point against the humans. Nothing but essential addressee information should appear in this area.

In addition, the US Postal Service has a website with all of it's guidelines, but the user interface and information architecture is down right atrocious. It's close to impossible to find anything especially if you don't speak "mail". Most everything has a specific term so nothing is easily searchable. How would someone guess that this information is in the "DMM 102 Elements on the Face of a Mailpiece" page? Their "Postal Explorer" needs a much overdue major overhaul. Good luck to the people who take on that task.

iTunes 10 Icon Design

Well, the uproar from the design community regarding Apple's redesigned logo for the new version of iTunes has inspired me to do one of my own. Also, Wired Magazine was running a photoshop contest on their Gadget Lab Blog and I could use a new iPod Shuffle. I've seen the outpour of self proclaimed designers take their stab at their own iTunes 10 logo, and most are mediocre at best. Why? It's because most designers don't or can't produce the level of sophistication that Apple does. Apple creates things at a high level of reality and detail which requires more time than the average designer will put into a project.

Now, I wasn't going to spend more than an hour on this, so I'll call out myself on being hypocritical, but wanted to throw my hat in the ring to see if I had what it took to be an Apple icon designer or at least have this hold up against the icons in the family. And for the record, I happen to like the icon and don't see why players gotta hate (here's a Forbes article to back me up). I take issue with the typographical treatments on the website more than anything, but that's another convo.

I first started with what I thought iTunes was in the first place, and therein lied the challenge: iTunes no longer exclusively represents music (and hasn't for quite some time). With music, movies, tv shows, books, podcasts, radio, and of course apps, even the iTunes name doesn't make much sense anymore, let alone the icon with an eighth note over a CD (see below).

Before and After

My attempt was to focus on iTunes' and media consumption in general's most basic function, the play button. I used Apple's signature OSX Aqua Human Interface Guidelines, the photo-illustrative style, as the foundation for the design by incorporating bevels, gradients, reflectivity, translucency, and bright color. Added a beveled play button, a burst effect in the center for some pop, a slight drop shadown, and viola! Hey, it's no cyberduck icon that's for sure, but I like it, maybe I'll hack into my system and use it who knows. And some may still scoff at the practice of the gloss, glass, and gradients of the Aqua style, but you must admit, it's worked just fine for Apple.

Creating an Icon Set

Here is a small group of icons that I'm currently developing for a software client. Although I've created hundreds of icons in my days as a designer, I've never really done a full fledged icon set for a client. The client gave us the choice to either just purchase a series of icons that would work with their existing site design, or create them from scratch. Instead of rushing to open a new tab in istock, I opted to push some pixels around, get my fingers dirty, and do them myself.

Note: I typically do this for any artwork, I never buy stock web graphics, EVER.

As you can see they all follow a similar look and feel; the reflections, the gradients, the rounded corners, color palette, etc.* They match the aesthetic of the dark themed website quite well. Of course I also made sure to fit all graphics to the grid and have pixel perfect lines whenever possible. What do you think?

*(Disclaimer: I don't condone excessive use of reflections, the web 2.0 look, etc., I was just following the preexisting site design haha.)

Dragon Billboard

So I drove past a billboard I designed here in the Boston area, and in my 7 or 8 years of designing, it's my first billboard! Well, there's actually 30 of them around Boston with 4 different variations. Obviously not a mind blowing concept or design, and I would've been happy with the copy being short enough to read in 3 seconds, but hey, it is what it is and I'm proud of it. These are the smaller "eco posters", short for economical (not ecological). I did one of the larger ones you'd see on the highway, it's up somewhere, and the software box breaks the top boundary of the billboard, no big deal. Just one more billboard and I'll achieve total design consciousness.

Email Signature Guidelines for the Peoples on Intertubes

Yes, it's been a while since I've posted (again), but I was designing two websites and whatever.

Email signatures
Email signatures are an issue, straight up. Most signatures cause some serious problems across the intertubes and the ever passive aggressive world of corporate america. So here are some do's and don't's, some best practices, and a quick guideline to making the best friggin email signature EVER!

Number 1 - No images, seriously
Yeah sorry, nope, no images. That means no image of your actual hand written signature, no company logos, no kitten pics, and no animated gifs (which I do love and are hilarious, but only in IM's). There are several reasons for this. First and foremost, you run the risk of having your email blocked by spam filters. Spam filters are just not that great and they see an image and freakout and will put your address on the junk list which is the modern day equivalent of being blacklisted. You don't want that. Second, images take up tons of space over time. A 2K image sent one time is no biggie, but thousands of times by thousands of employees can equal up to 2 gigs a day of transferred information, almost a terabyte a year just because of that little image.

Number 2 - K.I.S.S. (Keep it simple stupid)
Since now you can't have any images, all you're left with is text and special characters to style your signature. Don't take this an an opportunity to use a hundred asterisks to separate your name from everything else or taste the rainbow and OD on color to the max. Ideally you probably shouldn't use color at all. Any links you have may show up underlined in blue and if your name is in red, bam, you're halfway over the rainbow (not good in this case). Stick to using black and shades of grey to help establish visual hierarchy. And don't use more than one font. The typeface you use in the body should be the typeface used in the signature. Use bold or all caps to give weight, stay away from italics, they're bad, berry berry bad *finger pointing*.

Number 3 - Keep it short (stupid)
Eliminate every extraneous item of information that you can. If you don't fax things anymore, get rid of your fax number. If someone REALLY needs to fax you, they can call or email you. Get rid of your networking links, nobody cares really, and if they do, they'll ask. So that means your twitter account, linkedin profile, facebook url, skype name, aim name, etc. Quotes, delete those immediately, it's embarrassing just mentioning quotes, ewgh *shivers*. Really keep it to your name, title, company name, address, number(s), the url, and THAT'S IT. If you need certain information that pertinent to your profession like your twitter account cuz your're a social media expert (which is a fake job btw - UPDATE - ok, not a fake job, just a very new one ok?) then fine add it, but only if you really need to.

Number 4 - Follow the rules
If your company has specific instructions for how to create and use your signature, FOLLOW THEM. This is not your big chance to stick out in the world and make a stand against the unjust evils of corporate slavery. If the company signature is black, don't make yours blue. Don't bold your name if it's not supposed to be. Don't grey out your title, even if it IS Waste Allocation Technician (pretty sure garbage men don't have emails, nevermind). Just stick to the damn rules, even if it means that the email signature is long and has an image, there's plenty of time to showcase your unique and delicate personality in passive aggressive emails about refilling ice trays. More important that you and your company show consistency. It communicates that you're an organized, collaborative, responsible company that would never put their clients on mute in a conference call to bad mouth them.

Example of a great email signature

Other little tip nugglers:
Don't use a VCard, that's just lame, nobody does that anyway. HTML, don't do it, half the time it won't be read and you don't want your emails to look like 100 lines of code. Use web safe fonts. You really only have the choice of these fonts: Arial, Georgia, Lucida, Tahoma, Times, Trebuchet, and Verdana. Don't use Times, it looks like crap, and don't even joke about Comic Sans, he'll git cha.

So, if you follow these guidelines it'll make for probably the most BORING email signature in the world, but if you're using an email signature to express really anything, you've got much bigger problems. Hopefully this helped you create your email signature, and if in the future, if we're allowed to have supertastic swirling video exploding email signatures while avoiding seizures and spam filters, then nevermind.

P.S. If you've got extra time, read the email in the image above, I wrote it, pretty sweet crazy cat lady story imo.

Setting up a "real" subdomain with Go Daddy

If you've searched online for this, you won't really find a clear answer. At least that was my experience. After a few days of searching and speaking with 4 different techs at Go Daddy, I was finally able to get my subdomain up and running.

Disclaimer: I'm not a developer and some of this info may be a little off, take it with a grain of salt haha. Plus, this is more helpful if you have both your domain and your hosting with Go Daddy.

How Go Daddy treats subdomains:

If you go into your hosting manager on Go Daddy, and Add a Subdomain, this really doesn't create, what I refer to, as a "real subdomain". It's really a faux subdomain that just forwards users to a folder of your main site, e.g. www.mobile.example.com will take you to www.example.com/mobile, not keep you at www.mobile.example.com. Technically, I guess it's a subdomain, but this is not what I wanted.

Go Daddy's help pages on setting up your subdomain don't really tell you this. They say, go to your hosting control center, click domain management, choose your domain, click Add Subdomain, and you're done, hooray!

Not really. At least not if you want people to stay on that particular subdomain, like www.mobile.example.com. If you're fine with having it forward to the /mobile folder of your main site, then fine, you're good. I wanted to track my subdomain as it's own unique url or domain. Plus, I wanted a dedicated google analytics page set up for this domain (which I'm sure I could set up a condition on there to track). This was more just a personal preference thing. I wanted people to stay at the subdomain address.

Go Daddy can't do this with an ECONOMY plan, you must have a DELUXE hosting plan. It took 4 of their techs to realize why my subdomain wasn't working right. One of their more knowledgeable guys finally found the problem and walked me through, setting up a "real subdomain".

Setting up your "real subdomain" with Go Daddy:

• First, make sure you have deluxe hosting account. Even though they say that you can have up to 25 subdomains with a economy plan, those are the "faux" ones I'm talking about. According to them, I wanted "multiple web sites" on the same hosting account and I needed to have the deluxe plan for that. Cost me $20 more a year and they gave me 20% discount.
• Go to your Hosting Control Center. Click Domain Managment, click Add Domain, enter the address (without the http://www), e.g. mobile.example.com and the folder name, e.g. /mobile, click Ok.
• After that's set-up, go back to the Go Daddy account homepage, click Domain Manager, click your domain, then click Total DNS Control in the lower center column.
• Here you'll set up a new A Record for your subdomain. Click the Add New A Record button in the top right.
• Under Host Name, enter in the name you want for your subdomain, e.g. for www.mobile.example.com, just enter, mobile.
• Under Points to IP Address, enter the same IP address you have for your main site.
• Bam, your done! Now just wait 4-6 hours (possibly up to 24 hrs) to propagate, and you should be live.

Another dumb thing I couldn't find online either was:

Where do I put the html, css, and image files for my subdomain?!

And what do I call the html pages?

• Create a sub folder on your root level of your site.
• Name it the same name as your subdomain, e.g. /mobile
• Put an index.html file in this folder, that will be your "homepage" for the subdomain.
• Create a images folder within this folder hold your images for the subdomain.
• Create a stylesheets folder as well if you'd like to put your css there too.

So, now when someone visits your subdomain, they'll STAY at that address, it'll look for the files in your e.g. /mobile folder, and they should see your site! I hope this helped you. If anyone has corrections to my post, please, by all means put it in the comments. Good luck.