The Ancient One

Nature-pack

For the 'It Gets Better' Foundation

One fine day last Spring my friend Megan sent me a facebook message, asking for help with a small project for charity. It turned out to be Men of the Stacks, and it sounded like too darn much fun to turn down. Saying ‘no’ isn’t my forte under the best of circumstances, and the project had no budget whatsoever. It was my pleasure to help them setup and configure the wordpress installation for menofthestacks.com. The original theme was done by Elegant Themes. I made some small CSS tweaks and whipped up a logo.

The calendar has gone totally viral. Here are some mentions around the interwebz:

David Carson bookcover redesign

Experiment with typography and Photoshop.

Adzerk’s facelift is here!

With the addition of our new UX Engineer Sarah, the Adzerk interface now has a brand new look and feel to brighten up the application! After some sweat, tears, and a few broken keyboard keys we introduce you to your new interface: (read more)

Version one with limited color palette.

For the alternate version I decided to use more color to highlight the text.

A collaborative article published on Pelfusion on October 4, 2010

The dark background is a design element frequently used as a stage to highlight content in the center of a page. Overused a bit in the past, they are starting to make a comeback, appearing in many more recent designs.

Some Strengths

In some instances a dark background allows the content to really shine and be the main focus. In others, it works in cooperation with all of the design elements to create a classy cohesive design. Studies have shown that dark colors are easier on the human eye than light ones on a computer screen.

What to look out for

When creating a design with a dark background, watch out for contrast. Too little contrast between light text and a dark background, and users may have difficulty reading content. The combination of light text on a dark background is usually by default more high contrast than the opposite. Add in the fact that web users commonly read only a fraction of the content presented on a page, and this means that typography really matters in a dark design.

Some Guidelines

To create the right balance of scan-ability and visual appeal, it’s a good rule of thumb to increase the spacing between letters as well as margins, and to use lighter-weight fonts (as opposed to bold). Subtle textures and patterns can help a monochrome color palette from feeling boring or flat, while small splashes of bright colors will have extra power for highlighting, guiding, and adding general visual appeal.

Read more →

Tutorial published on Webdesign tuts+ on April 15, 2011

As CSS3 becomes more robust and is more widely supported, the options for fun modern design elements that can be created without graphics are virtually limitless! For a recent project, I decided to see if I could create a centered ribbon banner with pure CSS3. This tutorial will walk you through how it was done.
As it turns out, it’s actually quite easy, using only simple, semantic HTML and some CSS3 trickery thanks to the magic of the the border-width property. The only caveat: As with all new CSS3 techniques, it can act a bit wonky in some IE browsers… we’ll address that at the end of the tutorial.

Here’s how →

A collaborative article published on Smashing Magazine on September 7, 2010

Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues.

If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Forcing visitors to use certain keystrokes to navigate, rather than what they’re used to, might be novel, but is that effective if you have to explain instructions prominently on your home page? Here are some examples for your reading pleasure.

A collaborative article published on Smashing Magazine on November 11, 2010

One of the main goals of having a website, whether it be a portfolio website or a business website, is to declare your presence on the Web. There are thousands upon thousands of websites out there; it’s pretty well established that you are competing for your audience’s interest and attention. To this end, it’s important to make those few seconds count when making a first impression.

There are many things happening in web design today. One of the interesting developments is the emergence of responsive web design, in which fluid grids, flexible images, and CSS media queries are used to create more adaptive layouts and hence more elegant user experiences. These designs can adapt to the browser’s viewport, completely changing the layout or the overall design of the page altogether, to fit the available space.
Read more →

A collaborative post on Smashing Magazine, published April 19, 2011

Good navigation is the main cornerstone of an effective website. In practice, however, it’s often a tough challenge to come up with a meaningful, unambiguous way to organize, arrange, and display content to users; and it’s often not much easier to find a visually interesting solution either. The wide adaption of JavaScript libraries like jQuery is making it increasingly easy to add various kinds of sleek animations to navigation design. For instance, many recent promo websites are essentially single page websites with an array of animation effects used to make navigation a smoother and richer user experience.

We need to be very careful and cautious when using these dynamic effects in our designs. A simple, calm navigation is usually much more user-friendly than an evolved, dynamic one. Users want to use the website, not be baffled by the weird and hardly usable navigation. But that’s not to say that a creative navigation should be avoided at all costs; in some contexts, an interactive menu does make sense, especially when it comes to promotional websites such as online campaigns, portfolios or advertising — on these sites, interactive navigation can lend some dynamics to an otherwise dull and boring experience.

Below we present some interesting examples of website navigation menus — they are not necessarily very usable, but they are certainly inspiring and original and thus you could build your designs upon the ideas presented below: use them, tweak them and improve upon them. We also discuss the potential usability problems of each of the techniques presented in this post. Before using a similar technique in your design, please make sure that it fits the context of your design. Test, validate and verify that the technique would actually make sense in your website. Approach these techniques with caution. Let’s take a look at some interesting ways to present navigation menus content for both smaller promotional pages and deep informational websites.
Read more →