BlogmyQuery – BMQ

Surely I’m late to the game with this (as usual these days), but this is possibly the greatest music video ever conceived. Speaking as a former marching band geek of course. (Hat tip Hannah Donovan)

By Robert Bowen

For years now, whenever designers have been asked about their go-to program for image editing and creation, one of the top answers that comes back, is Adobe Photoshop. Its generations of evolution has centered around the growth of any number of digital imaging professionals and has made this software giant a staple in the graphic design community. Since so many of us find this tool in our design arsenals, we thought we would put together a post that would have you get the most out of this dynamic imaging program.

Below is a collection of invaluable Photoshop resources from the online community that runs the proverbial gamut of available PS content. From toolkits full of templates, shapes, gradients, brushes, and so much more, to individual resource downloads of informative PDFs, usable PSDs, and other content galore, this post has everything you will need to amp up your Photoshop toolbox. So if you are a Photoshop devotee, or even just a newb getting started with the program, take a moment to browse down through these useful downloads that we have amassed.

Websites

The websites that have been gathered below are the first place that you should go when you are setting out on a path of beefing up your proverbial toolbox of Photoshop resources. From the new updates that are still coming, to all of their past archives these sites provide a constant stream of tools.

Web Designer’s Toolkit is a valuable resource for Photoshoppers indeed. From buttons, to form elements and even a collection of free Photoshop templates for professional layouts (including browser screens) this toolkit’s depths are packed with design goodies for many occasions and needs.

Free4Photoshop is another great place to head for all those resource hunters out there looking to score a wide variety of Photoshop freebies. This virtual vault of tools includes shapes, textures, brushes, gradients, patterns, and so much more. If you are serious about Photoshop then you need to check this site out to get your toolbox started.

Photoshop Essentials is another website that you should definitely be checking out if you are looking for in-depth, fully explained Photoshop tutorials which are written by Adobe Certified Experts. From beginners to seasoned vets, their tutorials are put together with any and everyone in mind. Photoshop made easy.

Psdtuts+, speaking of approachable tutorials for taking your Photoshop game to the next level, this site is another go-to resource for many in the design world. So if you are looking for more ways to tackle your design projects by employing techniques that you need explained a bit better before you proceed, then you might want to just head over to the pasture of tuts.

Photoshop Ninja is another popular site to check into for Photoshop downloads, tutorials and more that is geared towards the more experienced users. As you build your arsenal and level up your experience points towards a more PS ninja-like status, or if you are already on ninja par expertise-wise, then you should stop on by and check out all they have to offer.

Photoshop Lady might be another site that you want to keep bookmarked and handy for all your Photoshop wants and needs. They scour the archives of the web and gather the finest Photoshop tutorials for you and bring them all to one easy to find location. With most of the guesswork taken out of the equation, the site is definitely worth a look.

Photoshop Tutorials is a site whose name slightly undersells the place. When you are constructing your virtual Photoshop toolkit keep this helpful site in mind because they not only cover tutorials, but they also focus on inspiration and a variety of useful downloads for a range of users and expertise levels.

Photoshop Roadmap is one more bookmarkable Photoshop super center for users of all levels and needs. They have a selection of downloads from brushes to text and photo effects, and they even have a section dedicated to Photoshop related books and more. And to complete the Roadmap’s journey they even have PS tutorials as well.

Photoshop Toolbox Reference is a Photoshop users best friend! This site is a comprehensive cheat-sheet on all things Photoshop. The perfect addition to your PS toolbox, PTR has you covered from keyboard shortcuts to specific tool tutorials at the click of a tool name. Add a touch of convenience to your Photoshop workings, just follow the link.

Photoshop Gurus Community Forum is another invaluable resource for you to keep close as you strive for a more Photoshop savvy status. This is a very large and active forum of Photoshop users which is always a wonderful tool to have at your disposal. Take time to become a part of the forums and when you need help, you can always get a little help from your friends.

My Photoshop Brushes is another website whose name is deceptively underselling of the range and bevvy of Photoshop resources users can expect to find there. Beyond just a variety of Photoshop brushes, they also have a large collection of patterns, shapes, styles, and gradients to boot. Not to mention they even have some tutorials on hand.

PS Galaxy is the final multi-purpose site that we are going to feature, and if ever the saying last but not least applied, it applies here. The Galaxy is a dynamic resource hub that packs a titanic collection of tools for Photoshop users from PSD files to actions, and from shapes to gradients. With web buttons and templates also in their ranks, the galaxy certainly is vast.

Brushes

Now we start to refine our focus a bit, and move into a more narrow area of tool gathering. Brushes. They are one of the more popular Photoshop resource downloads that are made and shared around the online design community, and they are also the next stop in our toolbox building journey. Below are some brush specific sites and some individual brush packs.

Brusheezy is a site that any Photoshop brush enthusiast should keep readily on hand. Not only is it a hub for thousands of available PS brushes from around the world wide web, but the site is also a great place to go to share your thoughts and opinions on the design communities collected brushes.

PSBrushes is another site whose focus falls specifically in the Photoshop brush arena, and should certainly be added to the designers list of go-to places on their resource hunts. With hundreds of free downloadable brush packs to offer, the site will definitely keep you busy for a while as you build up your toolbox.

Brush King is also a fantastic site to turn to when you are looking for sources for high quality Photoshop brushes. Brush King is near a necessity as far as bookmark additions go, as all of their downloads are free for use in all of your website and graphic design related projects. So the next time you need a brush, browse through their fine selection.

QBrushes is one more for the bookmarks indeed. This is a Photoshop brush focused hub that pulls in all of the free quality PS brushes that are released into the cyberspace aether. They pull in brushes from all around so that you do not have to do the proverbial footwork yourself. This site is regularly updated so be sure that you check back often.

BlendFu is another Photoshop brush carrier that has a bit of a twist from the others that we have featured thus far. BlendFu is actually a membership based resource site, wherein the members can log and track all of their favorite brush packs that they have found within the websites deep database.

iDesign Brushes is a daily updated Photoshop brush specific site, that is a submission based brush resource hub. They take in brushes that the community has sent in and pour over them, combing through with a fine tooth comb to find the best and the brightest brushes among the bunch to present to their readers each day.

1000+ Free High Resolution Photoshop Brush Sets is a useful collection from Smashing’s sister site with hundreds to thousands of incredible Adobe Photoshop brush sets from all around the web. If you are on a quick path for brushes without having the time to browse through the masses that the online design community has to offer, then let Noupe do the hard sorting for you. Just stop in on this post and load up your arsenal.

Over 550 Photoshop Brush Packs Free for Commercial Use is just what the title says it is. A post that has ammassed a huge collection of Photoshop brushes that are all free for both commercial and personal design projects. Another bonus is that the post is also kept up to date and current, updated about once a month.

25 Original And FREE Abstract Smoke Brushes from 1st Web Designer is a great collection of free high quality Photoshop brushes. The is a pack of fairly unique resources, all smokey in nature, including sharp edges and smooth gradients to complete the vapor-esque appearance of the set.

8 Free Fantastic Fractal Photoshop Brushes is another unique set of from the far reaches of the web over at Design Shard, that we wanted to feature for you here rather than making you go in search of them yourself. These high quality fractal based brushes are useful for achieving very abstract and astral like effects for the design projects that you include them in.

Hi-Res Splatter Photoshop Brush Set is another set that we have set aside to feature specifically so that you have them ready and loaded into your arsenal without having to look very far. This pack of 17 high resolution paint splatter based Photoshop brushes is a clean and crisp set that are ideal for both web and print centered projects.

High Res Mixed Brushes Pack for Photoshop is a set of grunge styled brush resources that include a variety of strokes, ranging in thickness and weight to cover all of your bases and needs. If you are looking for a quick way to add a bit of a distressed appearance to your designs, no matter their scale, then these awesomely detailed brushes should certainly get the job done.

Spray Paint Pack (Hi-Res Textures & Brushes) is the final brush pack that we are singling out in this toolbox building trek. Crafted using actual spray paint and textured paper, these Photoshop brushes are a wonderful way of adding bits of texture to your work. Which is actually said to have been the designer’s main intention when putting them together.

PDFs

As we continue with our focus refined, we come to the next section in our search for Photoshop tools to add to your arsenal of skills, the PDFs. Not to be confused with the upcoming PSDs. This section includes several useful downloads that will provide hours worth of study time.

Adobe Photoshop CS – Tips and Tricks from the Experts is an interesting instruction manual of sorts that you can download and check out from wePapers. This PDf is a helpful look for beginners, and those looking for a refresher, at a variety of techniques that you can employ thorugh Photoshop on any of your creations and designs.

25 ESSENTIAL Photoshop Moves is an extremely useful learning tool, in a full color downloadable PDF, for users at both a professional and at a beginner level. With a varied collection of information ranging from tools to tutorials, from trechniques to helpful tips for getting the most out of your PS works, this lesson book focuses on 25 tasks that are essential for growing your Photoshop skillsets.

Worth 1000 Photoshop Tricks is a downloadable PDF of massive proportions that consists of links to one thousand useful Photoshop tutorials. Taking most of the time consuming web search out of the equation for you, this comprehensive shortcut places a huge amount of tuts right at the click of a mouse for you.

Photoshop Quick Reference Card is another handy download to keep in your design arsenal. This comprehensive PDF is a virtual Photoshop two page cheat sheet that can prove a useful tool as you dive into this in-depth and fully loaded program. It never hurts to have a sheet that you can quickly reference at a glance, and with this little cheat, now you can.

Photoshop Tips, Tricks, and Basics is another very useful, must-have download especially if you are just beginning to work in Photoshop. This PDF is somewhat of an introduction into the very basics of this creative tool to assist you in laying down a solid foundation of knowledge on which to build and grow. The tips and tricks may also offer somewhat of a shortcut or new approach for some of the more experienced Photoshoppers.

PSDs

Now we come to the PSD section of this tool gathering post, and below are a handful of places on the web where you should definitely steer if you are wanting to get your hands on some .psd files that contain all of the original layers, masks, etc. then scroll down and get going.

Free PSD is a website that any serious psd explorer should have readily available. This site gathers together a massive collection of usable web based PSD templates that are ready for you to dive right into and get started.

Official PSDs is a bit of a different sort of a stop along our PSD collecting path. This site is actually a community focused endeavor that is kept alive and thriving by the users who make the site a invaluable place to come and share their favorite resources. PSDs of all varities await you, so it is definitely worth a look.

JackRebel PSD Files is a section of the JackRebel site that strictly covers Photoshop downloads. This is essentially a variety of PSDs all brought together to assist the design community with a lot of their shopped needs. Especially for those looking to design with a focus on electronics, this collection of files is the direction you should head.

50+ High Quality .PSD Files and Tutorials is another helpful Photoshop post from over at Smashing’s sister site. Want to get started on your next PS project, but do not really know where to start, or worse, don’t have the desire to start from scratch, then let this post of more than 50 high quality Photoshop .PSD files be your starting point from which to find design gold.

500+ Free Download High Quality Photoshop PSD Files For Designers is another fantastic post where most of the work has already been done for you. The hunting and gathering has mostly been done for you, now all you have to do is make your way over to this expansive PSD resource collection and you can get a quick overview of what is considered to be some of the best free PS downloads available.

Download Free PSD Design Template from Lava360 is a free downloadable design template that is simple and easy to use to get started. Don’t want to have to scour through the numerous entries from some of the other featured sites to find a PSD to get your design project underway, then check out this free offering to see if it will fit the bill.

DVD and Business Card PSD File is another place to turn if you are looking to get started on a business card design or a DVD label, but you do not feel like taking the time to sort through the massive collections, then metamags.com may just have the PSD file that you have been waiting for.

11+ Stunning Objects PSD Templates is a fabulous little collection of PSD files that will assist you with your web design layouts and so forth. Since so many of us design strictly for the web, we wanted to offer another more web geared set of PSD resources, and this post from The Design Work is it. If the web is where your design eye tends to fall, then you might just want to give these elements your attention.

Music Player UI is a bit of a different PSD file as to most of the others that we have featured, where as it is specifically focused on the user interface of a music player. The UI file is another that was separated out from the rest given its unique flavor, and should help you add a bit of bite your interface.

Everything Else

In this final section of the post, we come to somewhat of a grab bag of downloads that range from gradients to patterns and shapes, and from actions to plugins and filters. As you are finishing off your toolbox, be sure you do not overlook these final additions that could really make a difference in your Photoshop designs.

600+ Photoshop Gradients to Download is a wonderful place to turn whenever you are looking for that perfect gradient to complete your design. Not only does the post have a huge bevvy of downloadable gradient goodies for you, but it also includes a useful tutorial which gives you an in-depth look at the gradient tool in Photoshop and how to get the most out of it with an easy to follow by step breakdown.

Designerpie Freebies has a collection of thousands Photoshop design downloads for the whole community that anyone looking to expand their proverbial PS toolkit should certainly make note of. With an array of patterns, gradients, swatches and styles this freebie collection is sure to put a smile on the face of any resource hunting Shopper.

Free Photoshop Patterns is a website which focuses completely on one aspect of PS. The patterns. So you can bet that they are going to have an enormous selection to choose from, and that they certainly do. With thousands of patterns to choose from, you are nearly quaranteed that they can satisfy any of your PS pattern needs.

124+ Free Photoshop Actions to Boost Your Designs is a post of amassed actions that we felt you should most definitely have on your radar. What better way to take so many of the steps out of some of the repetitive processes that come with the design territory than by having an arsenal of actions ready and waiting to take the edge off and even shave some time off of the tasks for you as well.

400+ Time Saving Photoshop Actions is another time saving collection that we could not exclude from this ultimate resource post. When it comes to Photoshop actions, the more that you have at your disposal, the more repetitive tasks you can avoid in your work which makes for a happier designer. So for more downloadable time turners, stop by and see what all this post has to offer.

Richard Rosenman Filters and Plugins is a page that continues to grow and expand, featuring personally coded PS plugins and filters that range in their use for 3D productions, 2D design, and even reseach purposes. Unfortunately, due to a compiler limitation, the filters are not Mac compatible. They only work in Windows.

That About Does It!

That wraps up the toolkit building on this end of things. Now the rest is up to you. With so many resources and hubs to check out, you should have your hands full for the time being. Feel free to hit us up in the comments and let us know what you think of the collection. Whether we left something crucial out, or whether we turned you on to a new source for PS elements, we want to hear what you have to say below.

Consider Some of Our Previous Articles

• The Ultimate Collection of Photoshop Custom Shapes is a post from Smashing’s past that contains a plethora of shapes for your Photoshop arsenal.
• Splatter and Watercolour Brushes for Photoshop is another Smashing post from before where you can load up on some brushes to add to your Photoshop collection.

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.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Made by Water

A JavaScript-Powered Vertical Fun

The large bold headings and modern color palette on Made by Water feel fresh and fun. The grid layout is nice and clear, while the background texture is subtle but interesting. The icons at the top are visually appealing, and the animation makes them fun to click. It’s not immediately apparent what they are for, though. Some text would help to clarify that they are for navigation.

Vertical navigation buttons with icons.

The other problem with the navigation is the yellow “up” arrow that is displayed in the footer of the page. One would expect it to bring you back to the top of the page, but it leaves you more in the middle. The circle of stripes that follows you down as you scroll doesn’t match the background pattern, but we can’t tell if it’s part of the navigation. At any rate, we clicked it to no effect.

Finally, while the text at the top is fun and exciting, finding the “Who am I” section is a bit hard. It’s not immediately clear what the website is about.

Made in Haus

Horizontal Slideshow as Navigation

The large page keeps Made in Haus from feeling unoriginal, and the smooth motion is a bit different from many of the sliders we’ve seen. Bumping the accompanying text up into the body of each slide is a good way to keep it above the fold and visible as the user flips through the slides. The sliders on the sub-pages are also effective, being an easy way to skim through a fair amount of content. Also, nice hover-effects under the slideshow look attractive and give an insight into the work of the agency.

Bold horizontal navigation.

One drawback is that the triangle on the far right of the upper navigation menu is a bit confusing. It appears to link to the home page, as a logo would, but we’re not quite sure why. Also, the arrow on the right side of the slideshow may be a bit too tiny, making it a bit difficult for users to navigate the slideshow. We’ve seen a similar navigation earlier, on Weightshift which is a nice example of an alternative implementation of this technique.

Foundation Six

Animated Text Scrolls Down With the User

Foundation Six features a few big bold screenshots at the center of the page, giving us the impression that they were interactive in some way. The first thing that we did was try to click on the screenshots, but nothing happened (except for the central one which links to the description of the project featured in the center of the page), which was a little frustrating.

Text moves instead of images.

The headings are large and very clear, and the type is handled nicely throughout. The color palette is very soft and clean, and it nicely matches the atmosphere of the site. The call-to-actions buttons are large and easy to find, read and click. The subtle hover effects in the upper navigation enhance the user experience, making it smooth. Additionally, the contact form tracks well and is nicely laid out, while the map is a nice touch. The company scores bonus points for linking to Bring Down IE6.

On the projects page, the way the explanatory text slides down instead of the images is original. But being so unexpected, it could be a little disorienting, which may or may not be a good thing: is explanatory text really the best place to make a statement with moving parts?

Word Refuge

Textual Content in a Horizontal Slider

Word Refuge features an old-fashioned bookish vibe. Because it is a copywriting service, this seems appropriate. The contact form is prominent, easy to find and easy to use. The logo is also nicely done, and the color palette is rich and regal.

Various arguments for the company are organized into slides.

One small point is that the tag lines in the main navigation are effective under some of the menu items but not under others. Some of them feel redundant, as if they’re there only to balance things out. As a rule, if text doesn’t add any explanation, it shouldn’t be there. That said, the text throughout the website is nicely kerned, and while the page is wordy, the text is easy to skim through and read.

Relogik

Animated Horizontal Slideshow Navigation

Relogik is another example of minimalism done well. The logo is understated and sophisticated. Most design elements are semi-transparent and appear on hover. The close-up images are bold and make the content the focal point of the page. The code is clean and well-structured and uses a solid grid layout with pulls to keep everything squared up.

Sliding horizontal navigation.

The classic numeric navigation makes it easy to navigate the slideshow. One weakness is that the contact information has a very low contrast against the background. A darker color would help to highlight it. The project detail pages do a good job of showing rather than telling and of displaying each piece in a real-world context.

Drexler

Horizontal Navigation… If the User Follows Instructions

The horizontal navigation on Drexler works both with the arrow keys and mouse clicks. On the first glance, it’s not clear how to navigate the site: you need to either read the hint in the upper area of the site (“User your arrows”) or experiment with the design to figure it out. To browse blog posts, users need to click on the illustration of the post or use keyboard arrows. The design itself is visually appealing, but the navigation scheme isn’t straightforward.

“Use your arrows” to navigate.

The retro color palette and big bold fonts make the website colorful and energetic, but they also might be a little overpowering. The “t” for Twitter in the upper right is an interesting break from the usual little bird, but the downside of breaking with convention is that you might lose clarity. We didn’t know what the icon was for until we clicked it, and we probably wouldn’t have clicked it if we were merely visiting the website as a normal user. The contact button is amazing indeed, as it claims. The multi-column contact form is an interesting take on the email form. It seems effective, and it tracks very well. This is a design that needs to be explored to be understood — but maybe it was the intention of the designer in the first place?

The logo is simple and clean, but again, it adds a note of confusion. The yellow underline on mouse-over feels unbalanced, because the rest of the logo isn’t highlighted. One other thing to note is that the page changes color to match the project being displayed. This is an unusual take on the portfolio. Usually, projects are displayed uniformly, sometimes to the point of being indistinguishable. This approach makes the projects stand out, in a good way.

Komrade

Vertical Navigation With a Twist

This page allows users to forge their own path through the website. Komrade features original illustrations, a fresh color palette and an original “Choose Your Own Adventure”-style navigation scheme. The navigation has the following cracks in it, though:

1. The light blue text looks like it’s hyperlinked. One of the first things a user sees upon loading the page is the blue “Who’s Komrade” heading. The first thing we did was click it, but nothing happened. This started the user experience off on the wrong foot. With this unusual scrolling navigation, distinguishing the clickable from the unclickable is extremely important.
2. The numbered navigation for Komrade’s past work does not stand out enough. The red circles look like yet more flowers, which caused us to pass over them several times before figuring out that they were the navigation. This goes back to the clickable/unclickable issue. Well-placed labels would go a long way here.

“Choose Your Own Adventure”-style navigation.

All For Design

Scrolling Navigation and “Shelf”-Navigation

All For Design feels light and airy, with its crisp woodcut headings and subtle effects such as the Twitter icon that flies on hover. The design os single projects pages is especially nice, making clear exactly what was involved in each project. The section “some inspiration” nicely puts books, useful websites and articles on a “shelf” and has subtle shadow- and hover-effects. The only problem is that the title-attribute is displayed on hover together with the screenshot which makes it a bit difficult to focus on one of them.

“Shelf”-navigation.

Calendar next to the contact form.

The calendar next to the contact form is also a great idea: it sets expectations and makes it easy for potential clients to plot a timeline. While the font is scannable, it still feels a bit too wordy overall, although the shadow effects, subtle borders and custom icons keep the eye flowing down the page.

Digital Labs

Horizontal or Vertical Navigation?

With the prominent screenshots on this website, one would think the page would have horizontal navigation; in fact, the page is static. Digital Labs uses a wide layout, with a nice textured background. The dark colors make it feel spacious without being too spacey. One issue, though, is that the orange ribbon on the right looks like it should be clickable, but it isn’t. The text-based social media widget, which responds to mouse-over, is an interesting touch. The web design scene is full of social media icons, so a text-based widget stands out.

The static screenshots above look like a slideshow.

The other issue is that the “Are you ready to get started?” link at the bottom is a mailto: link, rather than a link to a contact form. This is acceptable, but a drop-down form in that space would really kick things up a notch.

Calobee Doodles

Classic Thumbnail and Lightbox Combination

Calobee Doodles, an illustration-based portfolio website, has fun details, such as the objects and people falling from the sky. The cloud menu items could be clearer, though. At first, we were not sure what “Custom” stands for (it stands for custom design and illustration work). However, the menu benefits from descriptive tooltips and appear on hover. Still, a different wording, for instance “Work”, would have been clearer.

The website uses the classic thumbnail and lightbox navigation.

A thumbnail gallery is a common way to display work, but in this case illustration thumbnails are a bit too small, and they are linked to images. A lightbox may work better in this context. The bottom-up-navigation may be useful for some readers, and the footer is truly remarkable. Also, it would be nice to remove dotted lines appearing on click in the navigation menu. A simple outline: none; for links with proper styles for :focus and :active states would suffice.

Build

Classic Top-Level Navigation

While the overall layout of Build is clean and modern, the content could stand to be more easily scannable, for two reasons for this. A look at that code suggests that the margins and padding are a bit arbitrary. The padding for the main body conforms to a design pattern, but the major content elements do not. Maybe it would be a good idea to use multiples of a set base number for the margins, padding and borders, so that there is a consistent ratio throughout.

Classic top-level navigation.

Secondly, the contrast of the text in the content sections has some problems. The contrast between strong white and strong grey background is very striking, and maybe a bit too strong. The second part of the page looks a bit busy and a bit difficult to scan, probably because the colors of the headings and descriptions are very similar. Maybe if the headings were kept as a serif, the content blocks could be distinguished a bit by making the text lighter and using a sans-serif font. Some textual variation or typographic work might add visual interest as well. Subtle hover effects for links are attractive and fun to click on: nice touch!

We liked the listserv sign-up widget in the footer of the page. A sample email in the relevant field, along with more space on the line, could be a helpful, though. Also, an explanation of what exactly users are meant to type here would be great — for instance, a sample e-mail in the input field. Also, the mouse pointer should change after you click on the submit-button, but in this case it doesn’t. We fumbled a bit at first until we looked at the code.

Mail Chimp

Graphics-Heavy Vertical Page With No Navigation Other Than Browser Scroll Bar

Mailchimp’s promo page is a visually appealing website with a lot of interesting vintage graphics. Some real strengths of this website are the many interesting textures and patterns. The color scheme is modern and appealing. There are, however, a few usability problems. First, there is actually no navigation. We’re as big a fan of shedding unnecessary conventions as the next guy, but if we were an existing customer visiting this website, we would have no idea what to do. The “Sign in” link is obscured at the bottom of the page, with few visual cues to reward the user’s patience as they scroll down. Even a few small links at the top would add some structure and provide some cues for navigation, which would make the whole website make more sense.

Graphics-heavy vertical website.

Secondly, the edgy graphics, while fun and visually interesting, don’t give much sense of what the main point of the page actually is (if you are visiting the site for the first time). The primary message is only delivered in the paragraph towards the middle, and even it is a bit hard to read, with the small white text over the shades of gray. The paragraph would be more effective if it were bigger and had more contrast. The promotional videos are really great and remarkable, though.

Pline Studios

Minimalism in Vertical JavaScript-Based Navigation

Pline studios is an architecture firm, so it makes sense for it to have a spacious vertical layout with graphic touches that are reminiscent of CADD drawings. The big headings are clean and visually appealing and do a great job of leading the eye around. In an unconventional navigation scheme, making it clear where to click is critical, and this website makes it extremely clear. The navigation is repeated in each section, so the user is never stranded and left to scroll.

One problem, though, is the project descriptions; so much focus is on the images and animations that there’s actually very little explanation about the projects themselves.

Minimal vertical navigation.

Transformology

Persistent Toolbar-Navigation

Transformology shows another way to handle navigation on a vertical page. When the user scrolls the page, the navigation menu at the top of the site changes accordingly. The elaborate headings in the text blocks are visually appealing, but almost to the disadvantage of the content that should be showcased. The headings make the content easy to see but more difficult to read. The website has a clean, solid grid layout, but it may not always do an effective job of displaying the content, which sometimes feels overpowering.

Static navigation follows wherever you go.

Burton

Sliding Captions and Tabbed Boxes in a Vertical Layout

The first thing we noticed about Burton is the nice visual details, such as the animated eyes on the “Search and Destroy” search box, and the animated GIF on the mouse-over logo. The jigsaw layout is clean, bold and easy to scan. The mouse-over labels are a good way to display details without overwhelming users with text, and the mini-tabbed layouts inside the content blocks keep things clean and minimal. All of the content is available without being visible all at once.

The scrolling vertical navigation is aided by the jigsaw sections with sliding captions.

A problem with the navigation, though, is the up and down arrows on the side of site’s pages. We expected that they would allow us to move up and down the page; instead, they pop out a text-based navigation menu. Not knowing what sections of the page correspond to the labels (for instance, when you visit the page for the first time), this isn’t very useful. Still, overall very nice, original and memorable design.

New Adventures in Web Design

Fun Shapes That Feel Like Navigation

At the first sight, the interactive shapes in the middle of the New Adventures page feel a bit like navigation, in that they change as you move through the website, providing cues that the page has changed. New Adventures is an example of a clean and solidly structured design. The rainbow of dynamically transforming shapes is fun and original. Adding more color could make the design a bit stronger; the brown palette is calm and professional, but it probably could have been be more interesting with some accent colors.

The shapes move all over the place!

The typography overall is effective, and the line heights and margins make the information very clear and concise. An interesting touch of the design would be to highlight the speaker’s photo when a user hovers over his or her name in the list of speakers. Also, when trying to return to the front page, we clicked on the text logo in the left upper corner (“New Adventures in Web Design”), but it isn’t clickable which is a bit confusing. We had to use the small “Home”-link in the upper left corner instead.

Christopher Kaufman

Wide Horizontal Slider With a Difference

On Christopher Kaufman’s page, the sub-content panels slide up as the slider moves left to right. The layout is clean and organized, the background is colorful and unique, and the slideshow adds plenty of eye candy. The logo is minimal but detailed, and the top-level navigation is clear and effective. One drawback is that the background image is a pretty big file; as it loads, it creates a flashing effect that can be disorienting. One could argue that the height of the slideshow is optimized for larger screens; but scrolling through the slideshow content, some users can see that the content below has changed, yet have to scroll down to read all of it. This isn’t necessarily a big issue, but the slideshow panels could be a bit shorter.

The wide horizontal navigation forces users with small screens to scroll.

Chapolito

Another Example of Tabbed Navigation

Chapolito is really a unique website. The footer animation catches the eye right away, and the abstract shapes in the top-level navigation are original, as is the way the logo is integrated in the navigation, which keeps the brand as a focal point. We do have a suggestion for the sub-navigation in the portfolio section, though. The circles-as-progress indicator probably works best for slideshows of about five pieces of content or fewer. With such an extensive showcase, the user might get lost and not be able to find a particular project again. If numbers were in the circles, that would help.

Interesting top navigation.

Flywheel Design

Sliders and Graphic Tiles That Flip on Mouse-Over

Flywheel Design gives a good overview of its work right on the home page. The hover-over navigation is fun and gives users an incentive to mouse around and explore. The background is simple without being boring, making this a good example of minimal design. One problem for us was the slider navigation on project sub-pages: almost too minimal, because it took us a while to figure out it was there. Making it a little bigger or adding a splash of color might help.

Flip-tile style navigation.

Wishbone Design

Flash-Based Animated Navigation

Wishbone Design is created for kids and parents, so it makes sense for it to be fun and full of Flash animations. The navigation is entertaining but a little hard to use. Having the sub-elements open on hover seems to be the root of the problem; changing it to a click might give users a greater sense of control. Hover navigation should be as speedy as possible. The main slideshow is eye-catching, but you really have to dig to figure out that this is actually a company manufacturing bicycles (among other things). An explanatory blurb or even some slides would help new visitors. Another problem: if you’re going to have audio, please give users a way to turn it off! Overall, the site is truly remarkable, with attention to details. Nice work, this is what Flash is supposed to be used for!

Flash-based navigation.

Basmatitree

Flash-Based Animation That Could Be Navigation

We can’t lie: on first arriving on 60 mq missione casa, we were really hoping that the spoons were the navigation. We were sad to find out they aren’t. That said, this is a pretty fun layout for a food blog. The typography could benefit from some more variation, though. Also, the posts would be easier to scan if some texture or color variation were added to the columns.

Flash-animated spoons are fun!

Minus Five

An Entirely Horizontal Sliding Website

Horizontal navigation can be problematic. In this case, though, Minus Five is larger than life and colorful. The hover-over “Forth” and “Back” controls are large and easy to see, making it abundantly clear where you can click and what you are supposed to do, and avoiding one of the common drawbacks of unconventional navigation.

Entirely horizontal navigation.

For a portfolio, one thing that could confuse users is that the featured websites are not linked to anything. Using images embedded in a Mac frame to convey that they are websites is a good idea, but they make it a little hard to see the details in the designs. Another questionable design choice is positioning the portfolio pieces to the right of the background image. This makes it feel as though the background is the focus, instead of the portfolio pieces themselves. Also, the page is difficult to browse if you don’t have a proper wide screen display, because you see only small chunks of the site at once.

Retinart

Completely Text-Based Navigation

Retinart is a lovely example of a typography-focused website. The nice, even gutters and margins are relaxing on the eyes. One thing that’s a little unexpected is that the “Feedback” tab on the left side doesn’t pop out from the side (as most users would expect), but rather opens a modal window.

The beautiful typography goes well with imaginative language.

Notice the careful attention to language. In conjunction with beautiful type, a designer can really take it to the next level by using beautiful language to emphasize the quailty of the site.

Collision Labs

Classic Tabbed Navigation

Collision Labs is energetic. We immediately wanted to take this design firm’s advice and fasten our seat belts! The large header block is exciting without being overpowering. The portfolio sub-pages are clear and do a good job of both telling and showing what the projects were about. The typography, though, is a little uniform. One thing that confused us was the Twitter icon in the footer navigation: the bird flips upside down on hover. We couldn’t really see the reason for this, so it felt vaguely unsettling. Overall, though, an effective website, and a good example of judicious and not excessive icon usage.

Bold color and traditional navigation.

Summary

In sum, navigation is as much about communicating instructions for finding content as it is about being fun and interesting. There are some points to take away. For instance, if something is clickable, make sure it looks clickable. If it’s not clickable, make sure to communicate that, too. Also, be fun without being confusing. And show, don’t tell. If you have to tell users what to do, then the navigation has failed. After all, the crucial attribute of any truly exceptional website is both aesthetics and the usability of its navigation.

Related Posts

• Showcase of Modern Navigation Design Trends
• Showcase of Beautiful Vertical Navigation Designs
• The Case Against Vertical Navigation
• Navigation: Menus, Trends and Examples
• Showcase of Well-Designed Tabbed Navigation

Would you like to see more similar showcases on SM?

Let us know what you think in the comments to this post! And please like this article below if you find it useful and would love to see more similar posts on Smashing Magazine in the future. Thanks.

© Sarah & Adrienne Kahn for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: navigation, showcases

For today’s design news we have highlighted some fresh tools and resources for all you web and app designers out there. There are a couple of tools to help with any CSS3 and HTML5 development issues you may have, there is a marvelous new technique for styling buttons, and finally, and perhaps the coolest of all,some time saving iPad actions for Photoshop.

BonBon Buttons – Sweet CSS3 buttons

These sexy looking flexible CSS3 buttons have been styled with the most minimalistic markup as possible.
BonBon Buttons – Sweet CSS3 buttons

iPad Actions for Photoshop

These Photoshop Actions will allow any UX/UI designer or App developer to quickly create a gorgeous rendering of their app as it would appear on an Apple iPad. All that is required on your end is your final designs (and a copy of Photoshop, obviously).
iPad Actions for Photoshop

Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

HTML5/CSS3 Cheatsheet

Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (mid-2010) usable across a number of web browsers, chief among them Firefox, Safari, Chrome and Opera.
HTML5/CSS3 Cheatsheet

By Paul Andrew (Speckyboyand speckyboy@twitter).