Archive for the ‘Web Design’ Category 404 Error Page

July 31st, 2011

You may have heard about the recently launched food sharing app called Nosh where you can share what you eat with your friends and see what other people are enjoying. Alex Cornell played a large role in the app at Firespotter. Nosh recently pushed live an intriguing 404 error page for the app’s website—quite possibly one of the best I’ve seen in a long time.

Here is the description found on the page:

Periodically, pages go missing, assets get misplaced — you should not be concerned. This is a startup, this kind of thing happens. At Nosh, we are fortunate to have a relationship with several teams of ex-special forces operatives who help us track down these missing pages. When a page on this website goes rogue — and a code 404 arises — we dispatch one of our teams to bring it back. Ideally they are able to salvage the missing page, but sometimes, if the page is truly lost, they have to take it out (resulting in the subsequent code 500 when the page gets taken down).

Regarding the page you are currently looking for, one of our teams actually did find it, but it did not want to be found and a firefight ensued. This encounter is documented above.

We are very sorry we are not able to display the page you were looking for. Please go back home and we’ll do our best to ensure this kind of mix up is resolved peacefully in the future.

See the page in action: 404 or view the behind the scenes.

Why every website should have Keyboard Navigation

July 20th, 2011

After reviewing nearly 2000 portfolios this year, I came to the conclusion that there was one thing missing on most of them——keyboard navigation. After spending over a year working on a project and forging an experience that fully utilizes the keyboard, I started to seriously question why it hasn’t been used more. It truly should be used on nearly every site because it is a necessary feature for every interactive web experience. So why aren’t the majority of interactive designers and builders using it? Are they intimidated when dealing with the keyboard, perhaps are they unaware of its potential or maybe even so concerned about budget constraints that it gets left off? It could really be any of those things and I’m open to hear your thoughts.

To show where I’m coming from and the magnitude of websites lacking the use go to any website right now. Tap the keyboard or hit your arrow keys. Was the result just crickets or do you need further proof? Try searching “design portfolio” in Google. Not one of the sites on the first two pages of results use keyboard navigation in any form.

So why aren’t more people utilizing it?

Accounting for the why is tricky. Though if I were to guess based on experience in questioning developers and usability testing it would be because of a lack of time, effort and the concern that the keyboard would need to be used at some point. The truth behind the last part is that yes a user may need to use the keyboard, but only a very small percentage of the time. Two examples of those type of actions would be typing in a form or using shortcuts. The solution is to simply disable the keyboard nav while in form fields and not override necessary shortcuts (e.g.. cmd + c, cmd + z, etc).

When should it be used and why?

The answer I want to say is always. However, there are some circumstances where it might not be necessary—very slim. When you have sites that require you to click and drag to scroll or have pages and pages of content, why not give the user the ability to skip to each pane or project. If instead you require the user to perform a second action of clicking then you may be making things more difficult. Sure you want the drag to be part of the experience, but keep in mind that the more unnecessary friction you add to each interaction the higher their disinterest meter will go.

Designspiration is the perfect example of taking a “dead” keyboard and pumping it full of life. Short cuts on the site include a fully functional a-z and 0-9 live search function that can be activated by simply typing at any time. Equally as important is the ability to use the arrow keys in the way that they should be: smart pagination between result sets, smart paging within result sets and smart scroll viewing.

Other solid examples of the keyboard in use are The Bullitt Agency, Hugo & Marie and Thinking For a Living.

As we move forward with progressing our interactive experiences, we should be sitting down to really think about the feature sets needed to attain complete site usability. Also working out solutions for how the user uses keyboard events could mean a world of difference to their resulting experience. Your users are friends, be nice and easy on them.

More Perfect Typography

February 16th, 2011

Build is a small design conference where interesting, talented web practitioners from around the world come to share ideas, techniques and inspiration. Tim Brown was one of these practitioners to speak about perfecting typography. Tim is the Type Manager for Typekit—an easy to use font replacement tool.

In this talk, Tim talks about the experience of setting type, things to look for, and other various ways to perfect your type. He also presents tools to use that will ultimately better your web typography. One of which is a modular scale that provides harmonious ratios of font-sizing in css. Tim was kind enough to put his scale online at where you can choose between three different methods of scaling: the Golden Section, Musical Fifth and Musical Fourth.

At about 20 minutes in, Tim will explain how he chooses his font-family and his comfortable font-size, then chooses a column width from the scale. This is a strong point from this talk, however I believe the best and most important part is this:

We don’t have to remain strict to certain layouts just for the sake of filling them.

Via Swiss Miss


August 19th, 2010

Launchlist is a website built to check websites that you’re working on against a series of questions pre- launch to make sure you haven’t forgotten anything. This is the perfect tool for freelancers.

I know that on my next web project I’ll be using this. Although you really should send someone the url to your project link and have them check things off. That way you’re not checking things off that you’ll “do later” or “will get to eventually”. If you feel the need to add more questions, you can customize that at the bottom.


February 10th, 2010



If you need on the fly icons to serve in your wire-frames or maybe even icons for your design then Helveticons are your savior. These are are beautifully designed icons based on the Helvetica Bold typeface. This set includes 245 icons in a slew of different formats to suit your need. I’d definitely recommend using the preview icons on the website as inspiration to create your own or purchasing if you can stomach the $279 price tag.

As a side note I just have to say that the Helveticon’s website is nicely laid out. The typography and ‘Preview’ section is what pulls me in. As you click to preview the icons, the page slides up as a reveal for more content. The motion is very pleasant and leaves your mouse with an ‘x’ to click, close and show the main page. I haven’t seen a site done this well in a longtime. Not to mention one with such a beautiful grid.

Read Kyle Meyer’s thoughts on the website’s design.

FWA + Designspiration

February 9th, 2010





Nearly every week for the last year and a half I’ve been viewing websites on The FWA for inspiration and then saving to my bookmarks. In these screen shots I’m loving the navigation systems combined with fullscreen imagery or video. In one of my current projects (to be launched very soon), I’m working with navigational elements in a similar way to make the most sense of the interaction.

You can check out the sites below–all are beautifully designed sites in flash:

• Note: Not awarded an FWA, but shown for relevance

Its Your Turn

February 2nd, 2010

If you’re hiding down below in the rss feeds, could you come out for just a moment? I am looking for your suggestions to improve the blog or how the content is received. Do you see bad links, errors or areas for improvement? Whether or not your idea is a design change or not is up to you, its your opinion. Maybe it’s even a suggestion about content type or a new music player that plays song after song in a post. Put your suggestion out on the table and I’ll do my best to step into your shoes as a viewer.

What suggestions do you have that could improve this blog or its content?

Showcased Work: Shwood Website Design

January 26th, 2010

These are just a few of the web designs done late last year for Shwood Eyewear out of Portland, Oregon. The website itself was to be built in HTML/CSS with jquery components and a full-browser Flash video player. This project is one of many more to be included in the new portfolio the next few weeks.

Check this project out on Behance.