Posts Tagged ‘design’

2011 Web Trend: Creative Navigation

Monday, April 25th, 2011

Again and again I’ve run across experimental and creative ways to navigate a page. I’ve uncovered side-scrollers, one-page vertical scrollers, parallax scrolling, animation, story-telling, and even horizontal scrolling within horizontal scrolling (and the list goes on). These new types of navigation systems can give web sites an exciting and engaging way to captivate users, forcing them to interact differently with content, experiment, or be taken on a journey through your web site. But be careful, because something new and different can often confuse or scare users away.

More traditional styles of navigation are comfortable and expected to users, enabling them to easily guide themselves through your content. By steering your users in a non-traditional style, you can risk losing your audience. For this reason, it’s vital that your navigation remains effective. A non-traditional navigation needs to be smart, thoughtful, and content appropriate. An e-commerce site probably wouldn’t benefit from a single page scroller, because of it’s high-volume of information. But a smaller scaled portfolio or promotional site could potentially benefit from a more dynamic style of navigation. If you are in a specific design, illustration or web field, giving your users a new way to get around can be a great way to show off personal style, technique and skill.

Want to experience it for yourself? Check out these examples of creative navigation below:

Nike Better World
This site uses parallax scrolling to create a dynamic site with depth. Just scroll to explore and animate.

Jax Vineyards
This site uses a mixture of vertical and horizontal scrolling, for a clean, minimal look and feel. Constant top navigation is smart and let’s users interact easily with the site and side. Scrolling arrows are large and easy to maneuver.

Ben The Body Guard
This web site takes you on a journey, once you figure out about its vertical scrolling feature. Follow Ben along the dark streets to figure out all you need to know.

Youzee
This vertical scroller takes you step by step. Just click the button on the home screen to get started. Use the icon driven nav at the top or scroll on through each page.

crushlovely
With a constant navigation on the left, it’s easy to get around this vertical scrolling site. Each “page” is broken up vertically with a different color theme.

Polecat
This is a vertical stroller that allows you to jump between pages with a simple top navigation.


2011 Web Trend: The End of the Fold

Friday, February 25th, 2011

With new developments in screen sizes and devices, the fold has become practically outdated. In web design, the “fold” is known as the imaginary line on a screen that designates what content is visible to a viewer without scrolling. If you’re curious, the term, “fold” originated from the traditional newspaper, where the most important content and images were printed above the paper fold. This rule helped gain maximum attention from the reader and made sure essential information was always visible. The same goes for web design, you want to make sure a viewer has visual access to the key info on your site within the first five seconds of reaching the page.

For years, web designers could mostly rely on the fact that a visitor would have a screen resolution between 1024×768 or 1280×700, and web sites could be created accordingly. There have been debates on where the traditional fold fell on these screen resoutions, but in general, the rule has been, don’t put any essential information below 600 pixels. Today, this is not always the case. Viewers now have access to a variety of screens, from iPhones, to giant TV’s, and it’s getting more and more difficult to establish the ‘fold’ line on a specific device. You can’t possibly design for all outcomes, and so the “fold” is starting to become irrelevant. To add to the mayhem, users today also aren’t afraid of scrolling either, and devices like the iPhone, make this intuitive and essential to view important information. With this new openness to scroll, these invisible boundaries seem somewhat unnecessary.

Even though we are moving into an entire new use of space, it doesn’t mean we should totally ignore the idea of the fold. The most important messages should remain near the top. We still need to respect the importance of the initial visual hit a viewer gets when they reach a site. It’s a powerful tool and and can help to capture the attention of the audience and perhaps even keep them scrolling on down the page.


2011 Web Trend: Full Image Backgrounds

Wednesday, January 26th, 2011

Want a show-stopper? Then hop on trend with full image backgrounds. A large scale illustration or photo background instantly grabs your viewer’s attention, adding life and creating a more dynamic and engaging look and feel. These over-sized backgrounds are great, but should be used in the right setting. Sites that already have image galleries make great candidates, think photography studio, design agency, fashion designer, illustrator, or even a picturesque resort. Beware, the most common issue with large backgrounds it that they have to conform to many different screen resolutions, so make sure you test, test, test and use an image large enough to fit the width for the most commonly used screen resolutions. Check out these images below for this new trend in action.


ACDC vs Ironman 2

Wednesday, January 19th, 2011

I ran across this today while watching some skateboarding videos on my lunch hour and it totally blew me away. The idea is simple, project a video onto a giant surface — like the facade of a building. It doesn’t matter if the building is not a flat surface.

ACDC Vs Iron Man 2 – Architectural Projection Mapping on Rochester Castle from seeper on Vimeo.

It’s called Architectural Projection Mapping. This one is done by a Seeper, an interactive arts and technology collective, but there are many other companies doing similar projects. From what I have read, this is more popular in Europe but is now spreading to the U.S. Can’t wait to see one of these on a building near me! Lots of potential here.

Here are a few more examples:

3D Projection Mapping from anema on Vimeo.

The LightLine of Gotham from seeper on Vimeo.

KraftWork from seeper on Vimeo.


2011 Web Trend: Parallax Scrolling

Monday, January 10th, 2011

First seen in side scrolling video games from the 80′s, Parallax Scrolling is a special technique that gives an illusion of depth in a video game, or in today’s case, a web site. Parallax scrolling uses multiple layers to create the illusion of a 3D space, where background images move slower than foreground images. When used in web design, it can add a great sense of depth to the look of your site and is best used as a header, footer, or background. The effect can be created using CSS and some JQuery plugins (I’ll leave that up the the dev team). To experience this technique in action, check out Silver Back App. You’ll have to scale your screen width to get the full experience. Also, The Old Pulteney Row to the Pole web site uses a top down parallax that is super sweet. Be on the lookout for more designs like these popping up in 2011. For more info and how it can be done, check out Think Vitamin’s post on how to recreate the silverbacks parallax effect.


Where do you create?

Friday, January 7th, 2011

Paul Barbera is an Australian born photographer who travels the world taking on commercial assignments and ongoing projects. One of his side projects, titled “Where They Create” is a visually compelling documentation showing the workplaces of artists and creatives all over the world. It is a great site to find inspiration for your own workplace as well as view beautiful photographs of different places around the world. I love the way he captures each workplace by photographing the artists in their natural environment. If you really enjoy this site, there will be a Where They Create book available September 2011.

*Thanks to our fabulous intern, Kyle, for this post… *we heart him*


Great Gift Ideas for Designers

Wednesday, December 15th, 2010

Now’s the time for that last minute online gift shopping. December 17th, known as free shipping day, is only two days away. Every year on this day, more than 1,000 participating merchants will offer free shipping with delivery by Christmas Eve in the continental United States. If you have waited untill now to get those gifts, the 17th is your day! To help you on your way, I’ve uncovered a handful of holiday gift ideas for the designer or artist in your life.


Gift Idea #1: Monogrammed Mugs
At $6.00 a piece, these mugs make great stocking stuffer. They are great for the typography buff and are a wonderful way to personalize your gift.

Gift Idea #2: Winter Calligraphy Dessert Plates
With swirling wintry themes, this set of 4 plates are sketched by an artist’s hand
and will deck out any designers table.

Gift Idea #3: Vintage Marquee Letters
With a plethora of options avalable on Etsy or Ebay, you’re sure to find that perfect word or letter to make a statement on their wall.

Gift Idea #4: Photoshop Magnet Kit
These Photoshop-themed magnets are the best way to stick your photos to the fridge or to any other metal surface.

Gift Idea #5: Brass Vintage Letterpress Necklace
These were originally used on hand-cranked printing presses and are recycled into beautifully crafted jewelry.

Gift Idea #6: Number Jumble Artwork
If your special someone is a fan of type, this number jumble artwork will get their juices flowing!

Gift Idea #7: Color Etched Letters
A, B, C your way over to these ornate etched and painted metal letters, perfect for proudly displaying or any shelf or tabletop.

Gift Idea #8: Paint Brush Note Pad
Keep your favorite artist on track with this fun and creative notepad.

Gift Idea #9: Camera Pencil Sharpener
This camera-shaped hand-crank pencil sharpener has a hidden drawer for shavings. Great for any photography buff.


Pantone 2011 Color of the Year

Monday, December 13th, 2010

Pantone recently released its 2011 Color of the Year; Honeysuckle, a bright reddish pink. While I am personally not a huge fan of the color pink, I really like the spirit of the color. I like the idea that 2011 will be brave, confident and dynamic. I love the 2010 Color of the Year (PANTONE 15-5519 Turquoise) and am still dreaming of painting my bedroom with a nice pop of turquoise. However, I am looking forward to year that does not call for a color of escape but calls for a color that is lively, energetic and courageous.

Below is an excerpt from Pantone’s web site announcing their choice for the color to represent 2011. To read the full article click here. Enjoy and cheers to a bold, brave new year!

A Color for All Seasons
Courageous. Confident. Vital. A brave new color, for a brave new world. Let the bold spirit of Honeysuckle infuse you, lift you and carry you through the year. It’s a color for every day – with nothing “everyday” about it.

While the 2010 color of the year, PANTONE 15-5519 Turquoise, served as an escape for many, Honeysuckle emboldens us to face everyday troubles with verve and vigor. A dynamic reddish pink, Honeysuckle is encouraging and uplifting. It elevates our psyche beyond escape, instilling the confidence, courage and spirit to meet the exhaustive challenges that have become part of everyday life.

“In times of stress, we need something to lift our spirits. Honeysuckle is a captivating, stimulating color that gets the adrenaline going – perfect to ward off the blues,” explains Leatrice Eiseman, executive director of the Pantone Color Institute®. “Honeysuckle derives its positive qualities from a powerful bond to its mother color red, the most physical, viscerally alive hue in the spectrum.”

Eiseman continues, “The intensity of this festive reddish pink allures and engages. In fact, this color, not the sweet fragrance of the flower blossoms for which it was named, is what attracts hummingbirds to nectar. Honeysuckle may also bring a wave of nostalgia for its associated delicious scent reminiscent of the carefree days of spring and summer.”