However, before we begin I would like to thank Richard Tabor for allowing me to recreate his PSD into an HTML version and write the tutorial in this blog.

All right, now let’s go to the first step:

Step 1: Preparation

We will start off by preparing some essential files for the navigation, like downloading a wood pattern, diagonal dark stripe pattern and icons which both can be sliced from the PSD source.

Step 2: HTML Markup

Next, create an HTML5 document, and then put the following markup.

The menu navigation is wrapped within a <nav> tag, a standard HTML5 tag for defining navigation section. If you notice, I also add home menu, so that the navigation will look more engaging.

All right,that’s all the markup we need, no need for another tags. As, we’ll be adding additional effect by utilizing pseudo-elements like :before and :after. By using using these pseudo-elements, we are now able to add effects that once can only be done by inserting additional tag like a span or a div, that way our HTML structure remain clean and neat.

source: sitepoint

Step 3: Styling

Before we give any styles, we will first reset all the style elements Normalize.css so that the navigation will render more consistently across different browser. Download the file and add it to your main stylesheet.

Now, let’s give the body a wood background.

And give the header diagonal-grid pattern with a stripe white shadow.

Then we give gradient color to the navigation, as well as a 1px border at the top and bottom using :before and :after to emphasize the bevel effect.

Now, if we preview it in a browser, our navigation should currently look like this.

Menu Navigation Styles

Now, let’s begin styling the navigation. First we will specify the <ul> dimension and position it to the center of browser window.

And display the all menu inline.

Let’s now take a look at the link element and give it some styles like text shadows, font color and aligning the text to the center.

Now, our navigation is starting to look better.

Hover and Active Styles

The following code will give the menu a highlight effect when the it’s being hovered over.

While the following codes will give a pressed-effect when the menu is being clicked. Also, the a:active:after rule will give the menu a gradient line like presented in the source (PSD).

Now, let’s try and click one of the menu.

Menu Icons

In this section we will give the menu a represented icon. So, let’s give the menu a 20px square space to place the icon using :before pseudo-elements, applying the sprite background.

And specifying background position for each menu.

Conclusion

That’s it, we have done our Web navigation. I hope you enjoy the tutorial and can learn something useful from it. You can view the demo or download the source from the following links.

From: http://creatiface.com/tutorial/dark-web-menu-navigation

Markup is a beautiful thing, and it certainly has changed over the years. What was effectively HTML1, has certainly progressed to an amazing semantic markup language, to which we can largely thank the W3C. And, what do ya know, the next thing to thank them for has come about – HTML5.

Unlike previous version of HTML, where the code was mostly a limited structure that was determined by how you made use of the class and ID elements, html5 really attempts to provide much more structure.

All of the layout can be created with semantic tags and elements that determine how you should structure, and, arguably more important, that help you structure each page. This produces code that is much more clean and readable than in previous versions of HTML, and really is something quite amazing. The new tags really require that you think about how you are structuring your page, which let’s be honest – in the end that is a great thing for us web designers and developers alike.

Before understanding the structure of HTML5, and how to create and code an example template to use for your projects you should be aware of how it came about. Be aware though that the current version of HTML5 has not reached a version that the W3C could call final as of yet, but their is quite a lot to learn about and start using in your code right now. Here is what the W3C has to say on this issue:

“Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation stage should join the aforementioned mailing lists and take part in the discussions.”

But, don’t let that scare you. There are always people out there constantly making sure that it doesn’t get changed out from underneath of all of us. So you will certainly be aware if such a drastic change does indeed happen. Back on topic, one of the main questions people have about HTML5 is “<header>, <nav>, <footer>, these tags seem understandable enough but where in the world did the W3C come up with these?” Well, that question is easy enough to answer. It came from you!

It actually came from all of us. In 2005 Google conducted a study of over 3 billion websites and found that the most common classes used in common markup were actually what you see there on that page. Footer, menu, title, small, text, content, header, and nav are all among the top of the popularity chart. And essentially that is how the W3C decided on what to use for the new semantic tags for HTML5. Now that we know about that, let’s dive right into what those tags are and the basic fundamental changes in HTML5.

The doctype

A doctype isn’t particularly an element of the HTML, but it is a deceleration, and one that has become more and more important as time goes on. Using one appropriately can help your browser understand what sort of HTML it is trying to parse so we always want to use the appropriate doctypes. In all honesty, at this current time, you can pretty much just use the HTML5 doctype for everything though – but let’s cover some past ones as well. Here is where we have come as far as simplicity:

HTML2:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">

HTML3:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">

HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5:

<!DOCTYPE html>

Pretty great right? You don’t need to keep a document for copying and pasting in some ridiculously long doctype, or even worse yet, try to remember the ridiculously long doctypes of versions past. For HTML5 you simply have to type <!DOCTYPE html>. Ah, what a relief.

Other simplifications in HTML5

Before leaving this section, let’s go through some of the other elements that have gotten simpler. The root element has been simplified, to which instead of having to write something like:

<html xmlns=”http://www.w3.org/1999/xhtml”
lang=”en”
xml:lang=”en”>

We can just write:

<html lang=”en”>

The things we need to copy and paste getting smaller and smaller by the minute. For instance, also, In the head element, our character encoding went from things like:

<meta http-equiv=”Content-Type” content=”text/html;>

to the newer version in HTML5:

<meta charset=”UTF-8”>

And lastly, our links have dropped their type attribute. So for instance, this:

<link rel=”stylesheet” href=”style.css” type=”text/css”>

Becomes this:

<link rel=”stylesheet” href=”style.css”>

So what’s with these new tags?

The “section” tag

The section element is basically any generic section of an HTML document. Most typically though, it is a thematic grouping of content – which can have a heading but doesn’t require one.

A general rule of thumb for using the section heading is only use it if it would be explicitly referenced in the document’s outline. If, in the outline, there was a ‘section’ that you referenced or feel that all the content in one area is a ‘section’ of sorts – then do indeed include the section tag. If you want to use it mainly for styling purposes though, just don’t. Instead, use a <div> tag as you normally would.

The “nav” tag

The “nav” element represents any section of a page that links to other parts of that page or other pages within the sitemap. Anytime you think of navigation links, you should think “nav tag”.

The nav element is particularly intended for larger navigation blocks. Any large element that links to other sections of the site’s page or other pages of the site. Keep in mind though, a navigation section doesn’t have to be in the form of a list, albeit that is pretty standard. It can be in prose, paragraph tags, or pretty much anything – as long as it was originally suited to be in such tags in the first place.

The article tag

The article element represents a self-contained composition in a document, page, or any site. The really important thing to keep in mind with article tags is that it is, typically, independently distributable or reusable content is what is usually placed within the tags. It could be a forum post, a magazine or newspaper article, or a blog entry, even comments – as long as it is any independent item of content.

Articles can hold “section”s inside them, “header”s inside them, even “hgroup”s inside them. But do keep in mind when and how you are using this element, as it isn’t quite as commonly used as a <div> tag. So in summation, it isn’t a one-in-all answer for everything, but it does indeed have a lot of uses.

Let’s hop into an example. For instance, let’s say you have a blog post with some comments. You can do that like this in HTML5:

<article>
<header>
<h1>The Blog Entry Title</h1>
<p>12/25/2045</p>
</header>
<p>Blog entry</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: <span>Name of person</span></p>
<p>Time: 15 minutes ago</p>
</footer>
<p>Comment text here
/p>
</article>
<article>
<footer>
<p>Posted by: <span>Name of person</span></p>
<p>Time: 25 minutes ago</p>
</footer>
<p>Another comment here</p>
</article>
</section>
</article>

The “aside” tag

The aside element represents any section of a page that consists of content that is tangentially related to the content around the aside element. The most important thing to remember with this tag is that although it is content tangentially related to the content around the aside tag, it is typically information or content that is separated in characteristic. You will most often use it in sidebars, as most sidebars are perfect to be entirely wrapped in aside tags. Other uses can include pull quotes, bits of advertising, groups of nav links, or even addresses near the address of a location in question.

To get into more detail though, it is for anytime you feel the need to quite literally take an aside and explain, reference, mention, state, or question something. You can even use an aside element for a larger section of a site, such as a side-bar for Twitter, or Facebook, or random links. You could have it be an aside, then use a header and nav section within it even to help understand what is going on there. You can use it in the footer section of blog posts to reference things about them, or pretty much anywhere it can be perfectly implemented.

The “hgroup” tag

The hgroup element represents the heading of a section. This element is best used to group a set of h1-h6 elements when the heading has multiple levels, or subheadings – such as exactly the article you are reading. This would be perfect for an hgroup. You can also use it for alternative titles, or tag-lines.

The W3C reminds us:

“For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1–h6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string.

Other uses, for instance, include areas of a blog where you are listing the header and subtitle for your blog post. You can also use it for book titles and descriptions, for listing doctors in your area and their areas of expertise, or even use it to help replicate the functionality of a table. Let’s take a look at such an example now. On a table we’d have:

<hgroup>
<h1>Doctor Name:</h1>
<h3>Randy McDocterson</h3>
<h2>Doctor Specialty</h2>
<h3>Slapping People</h3>
</hgroup>

So there you can clearly see, in the markup, that we have a doctor named Randy McDoctoerson who’s specialty is slapping people. Now, that is a little odd, but hey – it gets the point across.

The “header” tag

The header tag represents any group of introductory or navigational aids within a site, or sections of a site. So now that the formal definition has been stated, let’s break it down a bit. We all know what a header is, but to be specific it includes various things on the top of most site. These header areas usually include branding sections, call to action items, and perhaps some navigation. Really it can be used any place that you used to write: <div id=”header”> you can now write <header>, and get the same semantic markup structure. It is important to note, that the W3C especially remarks that a header element should contain either a set of H1’s, a sections heading individually (h1-h6), or an hgroup element. Header elements can also be used to wrap a section’s table of contents, a search form, or any relevant logos – such as what we mentioned above. Keep in mind though that the header is not sectioning, as in it isn’t a replacement for an all-in-one div either. Rather, it is just a great semantic element to use for specific situations.

To note: It can be used in any section’s beginning area, as it doesn’t have to be in the top or beginning of your HTML document. But, that is where it is most typically implemented.

The “footer” tag

The footer element represents a footer for its nearest nested parent section, and typically contains information about its parents section. The footer tag is very similar to the header tag, but for the opposite section of a page. Often times you will see a footer of a page that contains links again that were in the navigation, and perhaps a logo, or other such things – well all of these can now be housed in a <footer> tag. Though a footer is typically used at the end of a website, this tag can represent the end of any section of content (and it doesn’t even have to be at the end of said section to represent it). For instance let’s take a look at this example:

<body>
<footer><a href=”..”>Back to index...</a></footer>
<hgroup>
<h1>Lorem</h1>
<h2>Ipsum</h2>
</hgroup>
<p>Some text here.</p>
<footer><a href=”..”>Back to index...</a></footer>
</body>

The “address” tag

The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let’s dive right in.

<address>
 <a href="../People/Raggett/">Dave Raggett</a>,
 <a href="../People/Arnaud/">Arnaud Le Hors</a>,
 contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>

I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so:

<footer>
 <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn’t ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today.

HTML5 Template

So now that we have learned about HTML5, let’s get into coding our own template. Let’s start with an average document.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
</head>
<body>
</body>
</html>

Now let’s add the stylesheet link, just for good practice, even though we may not use it.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Now I think it’d be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let’s do:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup></hgroup>
</header>
<section>
</section>
<footer>
<hgroup>
</hgroup>
<address></address>
</footer>
</body>
</html>

Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let’s add a navigation element as well.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<hgroup></hgroup>
<address></address>
</footer>
</body>
</html>

And there we go, we have added some navigation with a nice unordered list there in the header section. But, wait a minute. What if you have a nice big footer and want those same navigator elements in the footer as well. Well, let’s add it there also. Except, this time we aren’t going to use the <nav> tag and instead are going to use a div with the class “footer_navigation”. And while we’re at it, let’s go ahead and fill out our footer section with some content.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</div>
<hgroup>
<h3>By Dain Miller</h3>
<h4>from Madison, WI</h4>
</hgroup>
<address>
<a href="mailto:miller.dain@gmail.com">Email Me</a>
</address>
</footer>
</body>
</html>

Now let’s add in some bits for IE, and other such technicalities.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
<!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</div>
<hgroup>
<h3>By Dain Miller</h3>
<h4>from Madison, WI</h4>
</hgroup>
<address>
<a href="mailto:miller.dain@gmail.com">Email Me</a>
</address>
</footer>
</body>
</html>

And there we have it: a basic but complete HTML5 template!

From: http://www.webdesignerdepot.com/2012/03/back-to-basics-how-to-code-an-html5-template/

Combining each of these crafted experiences creates soul and personality for a website. And it’s that emotional connection with users that builds lasting loyalty, and raving fans.

Examples Of Emotionally Intelligent Interactions

Note: Several of the examples and images are from this brilliant website: Little Big Details. It’s one of the many must-reads and I recommend adding it to your favorites if you haven’t done so already.

Bottlenose
A new Web-based Twitter client that gives users a new way to explore and use Twitter. The app does a great job of walking users through the first run with the application, explaining the features in a way that is clear and humorous. The confirmation buttons use phrases like “Makes sense” and “Got it” which create a sense of personality and confidence with the user, a far better choice than the typical “Next.”

Wufoo
Wufoo uses a combination of smart messaging and subtle touches on UI elements to create a more friendly and personable experience when creating Web forms. Here are just a few:

• Each page title is accompanied by a line of poetry. While it may seem random, the poetry actually reinforces the elegance of the Wufoo solution. It’s a unique way to bring personality to an otherwise tedious task (creating forms).



• The new report button’s punctuation. Think of the word “report”, and you’re next thought is most likely “TPS.” But Wufoo adds an exclamation point to the button. This gives it an element of energy and fun, reinforcing its value as a reporting feature.



• The reports screen with no reports. Instead of a blank screen, Wufoo takes the opportunity to deliver some true personality through its messaging, and gets you on your way towards building your first report.

MailChimp
As one of the best examples of emotional intelligence baked into a user experience, MailChimp takes every opportunity to infuse soul into its application, as well as giving you a pitch-perfect way to make it all disappear.

• 404 Page:
  MailChimp’s 404 page is brilliant: excellent copy, empathetic design, and a prominent call to action to get users on their way. It’s clever, functional, and takes the sting out of 404’ing. Current MailChimp 404 Page.



• Send Campaign:
  MailChimp celebrates and encourages the user just as they send out an email campaign. The copy “This is your moment of glory” is a perfect encapsulation of the fear and anticipation that goes into deploying this.



• Twitter Page:
  Recently when MailChimp went down, they deployed a special background on their Twitter page that showed a sad chimp working furiously to fix the problem. Because people naturally turn to Twitter to learn about why things are broken, the background extended the personality of that service to their Twitter account, creating an emotionally intelligent experience for the user.

Pinterest
This red-hot social network infuses personality into its website with a thoughtful interaction during account creation. Instead of using the typical password confirmation patterns, the app responds with “Looks good!” as passwords meet their requirements and match. It’s a small touch, but one that humanizes the sign-up experience, and empathizes with the user who is creating their account.

Path
On Path’s original website, the icon for the sign-up button arrow changed to a smiley face when it was clicked on. This small change created a personal and welcoming moment during one of the first interactions a user had with the application. It’s a thoughtful detail added to a step that is often overlooked by designers and users alike, and it set the tone for the rest of the user’s onboarding experience.

Hootsuite
The friendly owl mascot for Hootsuite is more than a cute face—the mascot is the representation of the service itself, much like the chimp from MailChimp. Hootsuite taps the Twitter API to pull data into its app, and because Twitter has API limits, Hootsuite intelligently stops making requests after long periods of user inactivity. When this occurs, the Owl lets you know that he has taken a nap, and will wake up when you need him again. It’s a clever way to turn a potential negative experience (non-continuous updates) into a positive one that brands the company, while providing the app with personality and soul.

Feedburner
For newly created RSS feeds in Feedburner, the stats page takes the lack of stats to create a personal interaction with the user. Many websites miss these opportunities because they feel this state isn’t core to the experience. But Feedburner knows that most new users are interested in seeing their stats right off the bat—stats that don’t exist yet. So when a user visits the page Feedburner has fun letting them know that stats aren’t quite ready yet, while creating an emotional connection with the user in this process. It’s a huge win for the company in light of the alternative: a lifeless, blank page with no data.

VisualHub
VisualHub takes advantage of the Mac installation screen for user interaction, encouraging users to get acquainted with their user manual. Move the app to the Applications folder, and move the manual to your brain. So often this install process is written, a necessary evil to get to the application. But as we’ve seen, smart developers leverage these initial interactions to set the tone with the user experience moving things forward.

OS X
Apple has long been about attention to details, but typically the details are in refinement (not necessarily emotional intelligence). But the Text Edit icon contains a small Easter Egg for Apple fans—the words of the “Think Different” manifesto are inscribed on the notepad. It pays homage to their legendary founder, and reminds people why they love Apple. It’s a small touch that makes Apple what it is.

Highrise iOS
During the install of 37Signals Highrise iOS app, you can play a game of Tic Tac Toe against the computer. Not only is this a thoughtful way to give users something to do while the app undergoes the necessary evil of being installed, but it’s also an homage to the film War Games, a hacker classic. It’s a simple and effective way to display emotional intelligence during a typically “dead” point of an app’s user experience.

Mint.com
Mint’s website maintenance page creates a charming experience for users during what could be a stressful time. Not being able to access your finances can create anxiety, and Mint uses that opportunity to create a fun yet effective notice that lets you know that your money and information is safe, even if the website isn’t accessible.

Image via Sean Percival.

Deviant Art
Deviant Art uses the portrait metaphor as part of the interaction in setting up your Deviant Art profile. Not only does it tie in with the theme of the website (and connect with its artist community), but it also is a compelling metaphor and mechanic that encourages new users to complete their profile.

Tumblr
When listening to an audio file on Tumblr, the URL is appended with an appeal to its users not to download the audio file, so that they can continue to offer this type of content on their website. It’s a clever way for communicating to its users without the typical JavaScript pop-up warning.

Adding Soul To Your Website

Giving your website soul comes down to the interactions and the intentional craft you put into the design of those interactions. By being intentional about user experience in those small moments that are typically neglected, you can showcase the personality of your app, as well as building loyalty among users. Taking cues from websites and applications like those mentioned above will help you look for ways to infuse your project with emotional intelligence.

These services and developers have created loyal user bases due to their willingness to sweat out the details, and infuse their projects with emotional intelligence. The small things can really make a difference in the success of your website or application. Taking the time to create these well-crafted experiences is one of the most potent ways we know of to create fans, and bring your website to life with soul.

From: http://uxdesign.smashingmagazine.com/2012/03/28/give-your-website-soul-with-emotionally-intelligent-interactions/

Since Elliot Jay Stocks so poignantly told us to destroy the Web 2.0 look, we’ve witnessed a de-shinification of the Web, with fewer glass buttons, beveled edges, reflections, special-offer badges, vulgar gradients with vibrant colors and diagonal background patterns. The transformation has been welcomed with relief by all but the most hardened gloss-enthusiasts. However, design and aesthetics work in mysterious ways, and no sooner does one Web design trend leave us before another appears.

The Symptoms

So, exactly what is this new epidemic? Well, let’s start by looking at some of the most common symptoms, many of which you have probably noticed. They are easy to spot, and as with many other conditions, they often appear in conjunction with each other. (This is why the contagion spreads so effectively — seemingly independent symptoms grow more infectious when combined with others.)

Please note: The following list appears in no particular order and does not indicate the level of infectiousness or severity, which seem to be stable across the board. Note also that the instances given often exhibit more than one symptom, making classification more difficult.

Stitching

Stitching appears gradually, often as a result of the designer playing too long with borders and lines, particularly of the dotted variety. A full-blown stitch is evidenced by the subtle shift from dots to dashes, augmented by drop shadows and other effects to give the impression of 3-D. The purpose of the stitch is somewhat elusive, but it seems to thrive in environments where certain textures are applied, most notably fabric and leather, but also generic graininess.

While determining the exact cause of stitching is difficult, scientists are certain that it belongs to a larger strain of the infection known as “Skeuomorphism.”

Zigzag Borders

Borders are common elements of Web design, and as such, they are difficult to avoid; luckily, they are usually harmless and often have a positive effect on the layout. However, for some reason, a particular type of border — the zigzag — has grown exponentially in the last few years and is now threatening the natural habitat of more benign border specimens. Exactly why this is happening is unknown, although some researchers claim that the pattern created by the repeating opposing diagonals has such an alluring effect on designers and clients alike that straight borders have somewhat lost their appeal.

Forked Ribbons

Like borders, ribbons have long existed in various forms. What we’re seeing now, though, is the near dominance of a particular style of ribbon, easily identified by a fork at one or both ends. Some ribbons are also folded over twice, creating a faux effect of depth and reinforcing the diagonal lines in the fork. Whether the fork is related to the zigzag effect is unknown, but it seems that diagonal lines are the key to the ribbon’s survival, along with its ability to evoke memories of times past.

The danger of the ribbon lies mainly in its ability to exist independent of other symptoms (although it thrives in the company of vintage typography), meaning that it could date your design long after the epidemic ends, even if the symptom itself appears dormant. In many ways, this is reminiscent of the “special offers” badge of the Web 2.0 look.

Textures

In the age of all things digital, it’s a conundrum that textures should dominate our illustrations and backgrounds, and yet they are indeed one of the most common symptoms on our list. Manifested by subtle grain, dirt and scratches, paper-esque surfaces and fold marks, they seem to embrace the spirit of the handmade. But ironically, they’re often the complete opposite: computer-generated effects or Photoshop brushes.

Possible explanations for the widespread use of textures include a yearning for tactile media (especially considering the emergence of touchscreens) or envy towards print designers, who have a much richer palette of materials and surfaces to play with.

Letterpress

A Smashing Magazine article from 2009 outlined letterpress as one of the emerging trends of the year and, boy, were they right. The simple effect has gone from strength to strength and is now a household technique for sprucing up typography online. A relatively harmless symptom, letterpress might also have infected designers through other digital interfaces, such as operating systems and games, as early as the turn of the millennium, indicating a very long incubation period.

Scientists disagree over whether the incubation period is due to the infection needing a critical mass before emerging from dormancy or whether the infection simply needed the right conditions — CSS3 text shadows, to be specific — for symptoms to appear.

19th-Century Illustration

After being released from copyright quarantine, this symptom, favoured by fashionable ladies and gentlemen, was nearly eliminated during the last epidemic due to its inability to cope well with gloss and shine. But in this new vintage-friendly environment, it has found its way back into our visual repertoire. For better or worse, the 19th-century illustration will most likely hang around for a while, emerging stronger from time to time like a flu virus.

Muted Tones

After a long period of vibrancy, the average online color scheme seems to have been somewhat desaturated across the board. We’re seeing widespread use of browns, earthy greens and mustards and a general leaning towards “impure” colors, although this is generally thought to be a minor symptom of the epidemic. Some scientists will even argue that muted tones are, in fact, not a symptom themselves but rather a side effect of other symptoms, in the way that sweating is a natural response to a fever.

Justified or Centered Typography (JCT)

This symptom is nothing new; in fact, it was pretty much the standard for the first 500 years of typography, until Tschichold and the New Typography showed up and quarantined it on the grounds that it was old fashioned, difficult to read and inefficient. Although we’re not sure at this point, this link with history might be what has made JCT reappear so vigorously under the umbrella of vintage symptoms. We do know that overall reading habits among humans have not changed in recent years (most Westerners still read left to right), and there is no plausible argument that JCT improves legibility; so, whatever the cause of the outbreak, we know it’s rooted in subjective emotion rather than rational thought.

Circular Script Logotypes (SCL)

A circle is a basic shape and, in isolation, is no more a symptom of an epidemic than a triangle. However, if you repeat enough triangles in a line, you get a zigzag. Similarly, if you include a circle in your logotype, you end up with a circular logotype. And if that logotype happens to be set in a script font, you’ll get — that’s right! — a Circular Script Logotype (SCL). Not that SCL is lethal or anything, but it is relatively contagious and can be highly detrimental when enough hosts have been infected.

Skeuomorphic Features

Skeuomorphic features — i.e. ornamentation or design features on an object that are copied from the object’s form in another medium — are rife, particularly in mobile applications, and this symptom is one of the defining indicators of the epidemic. Possibly a mutant cancerous strain of mildly skeuomorphic features such as stitches and letterpress, it can sometimes grow to overtake an entire interface, bloating it with redundant visual references to physical objects and materials. However, due to the labor involved in preparing the graphics and the heavy reliance on image resources, some researchers argue that we’re unlikely to see full-blown skeuomorphism dominate our desktop browsers any time soon.

In fact, most scientists regard the phenomenon as a curiosity and predict that some virtual metaphors for physical attributes will prove useful (as tabs have) and some won’t. Interestingly, while Apple has embraced and continues to pioneer the technique, Google seems to some degree to resist the urge to mimic physical reality in its interfaces. Perhaps it has developed a vaccine?

How Did It Start?

Pinpointing the epicentre of a design epidemic (read: trend) is always hard, especially given the myriad of symptoms and the contagious nature of the Internet. Identifying Patient Zero is virtually impossible, and, to be pragmatic, doing so would serve no purpose. What we can say is that we’re most likely experiencing a reaction to the Web 2.0 aesthetic — a craving for textured surfaces and retro imagery, something tactile and natural-looking, as an antidote to the shiny impersonality of the past — and that this is both healthy and necessary for pushing the design industry forward. Whatever the sources of trends, they often start with applying smart design to solve a particular problem or, indeed, to counter another trend.

Let’s say that everyone used sans-serif fonts, strong contrasting colors and crisp white backgrounds as a rule. Imagine, in this environment, if a designer went against the grain by using Clarendon or some other warm serif to infuse some personality into their website (which happens to be selling “Grandma’s homemade jam”), and then complemented the personality of their font selection with earthy colors and some brown paper textures. The result would inevitably stand out from the crowd: beautiful, emotional, different.

Incidentally, this aesthetic inspires another designer who happens to be working on a website with a global audience, exposing the new approach to a whole generation of designers who, in turn, apply it at will (often without considering the context). A trend is born. And yet, paradoxically, the potency of the epidemic is under constant threat. The more people get infected, the less differentiated the symptoms appear; and once the infection reaches a critical mass, the symptoms begin to work against themselves. Infusing personality into your visuals is meaningless if everything looks the same.

Is It Dangerous?

In today’s open collaborative world, avoiding an epidemic of this scale is difficult; so, in a sense, everyone is affected to some degree. The symptoms listed above are not restricted to small-scale up-and-coming designers, but affect even the elite of the design community. This means that even though some symptoms are harmless — like a light fever or a runny nose from a flu infection — the viral onslaught of trendy features puts constant pressure on our immune system to protect our creativity, and staying vigilant is important to maintaining a healthy dose of original thought.

If you’re displaying a handful of symptoms, it’s really nothing to worry about — catching a cold that’s going around is not hard, but recovering from it is also easy. If, on the other hand, you display most or all of these symptoms, then there’s reason to be extra cautious in your next project. Using all of a trend’s identifiers as cornerstones of your work might make your portfolio look oh so contemporary, but in a way this practice is no different than passing off the work of your favorite designer, artist or musician as your own. Granted, symptoms with no identifiable origin are not protected by copyright, but that’s beside the point — you should be worried not about legal implications, but rather about the creative integrity of your output. The danger is not only that your work will be seen as a passing fad, a popular aesthetic that will look dated in a couple of years’ time, but that you will lose the respect of your peers when they catch on to you.

While nothing is original, we all need to respect the difference between inspiration and imitation. As Jean Luc Goddard said, “It’s not where you take things from — it’s where you take them to.” And if you don’t take them anywhere, what’s the point?

Worse perhaps than the loss of respect and integrity is the effect that epidemics have on clients and, in turn, the design community as a whole. The more designers are infected and the more symptoms they show of the same disease, the less your clients will believe that you’re capable of solving real business problems. Eventually they’ll exclude you from the early stages (where all the real design thinking takes place) and employ your services merely to skin their wireframes, in the process reducing the whole profession to an army of decorators.

What Can You Do About It?

Now that we’ve seen how detrimental trends can be, how does one avoid them? Is this even possible? Trends, by definition, are popular, and arguably nothing is wrong with tapping into that popularity to increase the exposure of your product. Convincing a client to accept a design that is off-trend can be difficult, and you run the risk of alienating the audience by going completely against the trend just for the sake of it. On the other hand, blindly following others is never a good idea, and you could severely stifle your creativity, integrity and client base by accepting what’s “in” as a given and copying it without purpose.

So, what’s the right thing to do? Trends are intrinsic to our society, whether in politics, culture, design or even religion, and as the consensus sways in one direction or another, so will your opinion (or “taste”) — to some degree, at least. Alas, avoiding trends altogether seems an impossible and pointless undertaking, but that doesn’t leave you powerless. In fact, you can do a host of things to combat the lemming syndrome.

Ask Why

Always question your design decisions (and make sure they are your own), and keep asking the magic question, Why am I doing this? Am I doing this simply because it looks cool or because it suits the message I’m trying to communicate? Why am I using this ribbon? Does the zigzag border add to or detract from the personality of the website? What does this leather texture have to do with the finance app I’m designing? The moment you stop asking questions, you fall prey to the epidemic.

Put Some Effort In

In his article “The Dying Art of Design” Francisco Inchauste asserts, among other things, that inspiration requires perspiration, and I couldn’t agree more. I was lucky enough to attend a college where no computers were allowed in the first year, which meant we had to use physical tools to express ourselves — tracing letters by hand, drawing our photography, stocking up on Pantone pens (remember those?), abusing the copier. Not only did our creativity grow, but we learned an important lesson: good design is not effortless, and the best results come from your own experimentation.

Try Something Different

Remember that being distinctive is, for the most part, a good thing. Most great artists in history, regardless of their field, stood out enough for the world to take notice. Who painted melting clocks before Dali? Who would have thought to build a huge wall on stage before Pink Floyd? While mimicking what’s popular might be comfortable and might secure short-term victories, long-term success requires a unique, memorable approach.

Diversify Your Inspiration

In order to remain creative, staying curious and looking for inspiration all around you is crucial, not just in the latest showcase of fashionable WordPress themes. Read a book, perform a scientific experiment, listen to music you haven’t heard before, walk through a new neighborhood, or experience a foreign culture. Widening your horizons beyond your favorite websites and finding more than one source of inspiration is critical to making original, lasting designs.

Focus on the Basics

Finally and most importantly, study the underlying principles of design in order to understand what is and isn’t defined by style. Grid systems, contrast, legibility, juxtaposing imagery, well-written copy — these are the key components of successful design, yet they are entirely independent of fads and styles.

At the end of the day, design is not so much about style as it is about communication, and all style, imagery and typography should be inspired by the content, functionality and personality of the product, not by what simply looks cool at the moment.

No matter how cool something looks, it too shall pass.

From: http://uxdesign.smashingmagazine.com/2012/03/15/symptoms-of-epidemic-web-design-trends/

In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques. As they offer an intriguing user interface and interaction, this often borderlines with what is ultimately defined as an enjoyable user experience. Should aesthetics, originality and creativity come at the expense of usability? Can they reside on the same website in harmony?

These themes will be explored through a brief analysis of eight portfolio websites, carefully selected by the Smashing Team and, well, scrutinized by me! My critique will encompass a blend of usability and user experience guidelines, as well as personal opinion based on my experience. Please feel free to provide your opinion in the comment section beneath this article. Also, kindly note that the websites are presented in no particular order.

Dawid Wadach

My first impression of Dawid Wadach’s website was “Whoa! Mine-sweeping! That’s surely not good usability!” For those of you who are not aware of the meaning of the term “mine-sweeping”, it refers to the the action of moving the mouse pointer over screen components (usually images) to reveal links. Although children like to mine-sweep in order to find links, both teenagers and adults hate it ¹.

²
The apparent absence of navigation is the first noticeable thing on wadach.com ³.

It was only after stopping to read what I was randomly and rapidly uncovering with my mouse that I actually noticed that the hidden parts contained the portfolio of websites designed by Wadach. At this point I sat back and started looking for the website’s navigation.

⁴
Hovering over the white area uncovers some of the projects undertaken by Wadach.

To be fair with Dawid, the menu is indeed visible as it’s located in the form of a button right next to his logo. My criticism towards this implementation is that after hovering over this button, I expected it to automatically show all the menu options. This was particularly true because there was no visible change in the menu button, nor on my mouse pointer when I hovered over it. Indeed, you need to click on the menu button in order to be provided with the main navigational elements.

That, in my opinion, is not good practice, and I feel that the main menu could have very easily been rendered visible at all times without altering the visual element of the website. Indeed, that is what Dawid did, although he wrongly placed it in the website’s footer.

⁵
The main navigation menu on Dawid Wadach’s website.

On a more positive note, with regards to the hover effects of the main menu, they are very clear. The font itself is large and contrasts very well with the semi-transparent black background. The website also includes utility navigation at the top left hand corner, which is a good location for such navigation. It also includes features to share the website via social networks and to remove the mine-sweeping effect at the bottom left and bottom right hand corners.

Ironically, the links to all these features contain a hover effect on mouse-over (unlike the main menu button), which is a good usability practice. Additionally, the designer opted to change the user interface of the browser’s scrolling. In general, this is not a good usability practice, as it makes it harder for the user to locate and use the scroll. However, in this case the change was only done for aesthetic purposes, and the scroll interface does look like and behave like users would expect it to.

Conclusion

In conclusion, I feel that from a design and development perspective, the website is very well implemented. It makes great use of HTML5, CSS3 and JavaScript to provide a smooth and pleasant user experience. It is minimalistic and clean, so the user is not overwhelmed with clutter. From a usability perspective, though, I think that slight improvements to the navigation—especially making the main navigation visible at all times—will result in greatly improving the overall user experience, without affecting the whole look of the website.

Harry Vorsteher

When you’re greeted by a Flash animation explaining to you how to use the navigation (before actually seeing the website itself), well, it’s not a good sign. I personally think that the majority of users would do the same as I have, and close this animation before trying to understand what was being explained.

Users have become accustomed to certain conventions and are never eager to divert from the way they expect things to look and behave. Therefore, introducing a new, complex navigation mechanism was not a very good choice from the website’s designers (from a usability point of view).

⁶
The website greets its visitors with an animation explaining how to operate the navigation.

Upon closing this animation, users are greeted with two groups of navigation links, presumably linking to photo galleries. The reason why they were grouped in this way is not apparent until one clicks and drags the big wheel that lies at the center of the page. Depending on whether you opt to turn it clockwise or counterclockwise, this will scroll the photos to the right, or to the left, respectively.

⁷
The wheel mechanism that needs to be mastered in order to navigate through the website.

Provided that you notice and understand how to work the wheel navigation—as well as clicking on any of the categories as a means to see the photos in thumbnail format—navigation is painful, but bearable. But the excruciating pain comes when you opt to click on any of the thumbnails to see the large version of the photos.

The website background changes from light grey to a darker shade of grey, the photo occupies a large portion of the screen, and the navigation disappears. The mouse cursor also changes to a “left arrow” when you are close to the left-hand side of the screen, a “right arrow” if you are at the right-hand side, and a cross with the words “close” if you are at the very center.

This will enable you to see the previous photo, go to the next photo or close the current photo respectively. Unfortunately for the user, there is too much movement with the mouse cursor changing shape, the photo moving along the y-axis (depending on the mouse location), and an irritating pre-loader for every mouse click.

⁸
Horizontal and vertical scrolling (without scroll bars) is essential for viewing each image.

Moreover, if the user opts to click on the full-screen option, this removes the browser’s chrome, and further complicates navigation. In my opinion, this website basically sums up why Flash has been branded as evil amongst all usability and user experience professionals.

Conclusion

To sum it up, the user interface and the photos present in this website are truly nice and inspiring, as is the capability of the Flash developer. The navigation itself is very interesting and complex to develop. Thus, from a design and development perspective, the website is truly one to admire. However, I personally think this website is a usability nightmare, and it will inevitably lead to user frustration.

Because of its flexibility, Flash allows room for abuse. Unfortunately, several designers are more concerned with showing off their expertise rather than focusing on the user.

I am not particularly fond of the choice of using Flash instead of JavaScript libraries to create the animations for the galleries. Without resorting to recommending a re-design of the entire website, I think that some quick fixes would be to create a conventional menu which could be visible on every page of the screen.

Also, the photos in the galleries themselves should be re-sized to occupy 100% of the screen size (vertically and horizontally), thus removing the need for the users to scroll in order to see the full image. Finally, the images should be of a lesser resolution so as to minimize their loading time (and quite possibly remove the need for a pre-loader to appear for such a lengthy time as each image loads).

Justin Lerner

I love Justin Lerner’s navigation (and yes, it just happens that he also has an awesome name as well!). Joking aside, I think this website proves that usability can indeed be aesthetically pleasing. The main menu is conveniently and prominently placed horizontally, just below the logo. This is the exact place where users are most likely to search for it. It contains just five items, each of which corresponds to the five sections of the website. The font is large and visible, and each menu item changes color on hover.

⁹
This website adopts a grid approach so as to facilitate navigation.

Interesting too is the fact that the content belonging to each category is rendered more visible on mouse-over whilst highlighting the menu item to which that category belongs. When clicking the menu item or section, it expands in order to show the full content of that section. This implementation enables all of the website to be visible on a single page without cluttering the user interface.

¹⁰
The selected section takes center stage by expanding over the inactive ones. It is also highlighted in the second menu at the top.

What I am not entirely convinced of with this website is the need for the duplicate menu that resides just above the main menu. From an aesthetic perspective, it is modern and blends in very well with the overall look and feel of the website. However, from a usability perspective, having two menus with the same content usually confuses users as they try to click on the same-named section in both menus to see if it’s loading any different content.

Still, in this particular case, the smaller menu is doubling up as a sort of breadcrumb in order to show users which section they are currently viewing. Yet again, breadcrumbs have their own, specific usability guidelines ¹¹, and it is recommended that they are adhered to.

¹²
The secondary menu (brown) replicates the same items as the main menu (grey).

Conclusion

In general, I feel the designer here did a great job in blending great design practices and good coding techniques to provide an aesthetically pleasing (and generally usable) website. Slight modifications can be introduced to improve the usability without adversely affecting the design, such as removing the duplicate menu and replacing it with a breadcrumb trail (although I seriously doubt that a breadcrumb trail is needed).

Additionally, the website would be better off from a usability perspective if more white space is introduced and the typography is more contrasting, since one needs to hover over the content in order to distinguish it well from its background.

Shelton Fleming

My experience with the Shelton Fleming website was very particular as it started off on a bad note, but quickly transformed into a most enjoyable one as I browsed through it. What ticked me off initially was the first screen that greets you when visiting the website; this consists of a yellow box containing the word “Ideas” in grey, and a grey box placed next to it containing the word “Experience” in yellow.

¹³
Visitors are greeted with a splash page-like screen that fails to explain the brand identity in an obvious way.

The apparent lack of navigational elements frustrated me because I mistook this page with a splash page (which is a big no-no in usability since users can’t stand them ¹⁴). It is only when revisiting this page (after spending some more time on the website) that I noticed that the conversion of ideas into experience is actually the company’s tag line. Viewed from this perspective, this makes sense from a user experience perspective, as it emphasizes the company’s branding.

¹⁵
The website’s hierarchy and navigation is clearly indicated through imagery and normal conventions such as highlighting.

In fact, the concept of “Ideas” and “Experience” dictates the website navigation—each section resides at opposing ends of the screen along the horizontal plane. Hovering over each of the two sections reveals a vertical side menu with intuitively-named, visible menu items. Good usability practice is also implemented through the changing of the menu text on hover.

Also, the arrow that appears on hover is a good indication to the user that the content of each menu item will be displayed right next to it—something which actually happens when clicking on the menu items.

¹⁶
Color is also effectively used to indicate hierarchy and navigation options.

Conclusion

Consistent and intuitive navigation, large sans-serif fonts contrasting sharply with their background, unobtrusive imagery, and ample use of white space makes navigating through this website an enjoyable experience. Still, I would recommend removing the splash page-like design that is set up to greet visitors. It offers very little information about how it should be interpreted. Moreover, there is a very strong branding element throughout the website—thus eliciting very little need to have a page at the beginning that risks irritating users.

Chris Wang

This website prominently revolves around the projects that Chris Wang has undertaken. In fact, the first thing that one sees is a list of project titles and accompanying icons that open up in an accordion style when clicked on (revealing a gallery of images related to the project in question).

¹⁷
At first glance it’s not immediately evident that this is a list of projects undertaken.

The project titles have a sleek orange transition on mouse hover which indicates that they are clickable. One point of criticism would be that the list of projects is not immediately evident as to what they are—the word projects next to the first listed item is a grey barely lighter than the background.

¹⁸
The accordion effect is coupled with a horizontal gallery of the project being viewed.

Additionally, the website offers a handy keyboard navigation mechanism that uses arrow keys to enable rapid (albeit sequential) browsing of the projects.

¹⁹
A horizontal dark yellow fill is used to indicate what is clickable.

Conclusion

Overall, the navigation is quite intuitive. It is relatively easy to switch from one project to another, and to drill down to see more screenshots from the same projects. One aspect that can be improved is the ability to close a project after viewing it, since a project always needs to be open at any given point in time. Although this first project will be replaced by clicking on a new one, the project currently being viewed takes up precious real estate that would be better used by showing the list of projects.

Jessica Caldwell

This website makes extensive use of mine-sweeping for the purpose of navigating, effectively breaking all navigation usability conventions. In a desperate attempt to find information about the owner of the website, I scrolled below the fold and located the footer which contains a list of non-clickable items grouped under the titles “Agencies” and “Brands”. The only links in the footer are those for social media and portfolio websites of the website owner (all of which link to external websites).

²⁰
Navigation in this website is only visible on mouse hover.

Defying the odds that a user would still attempt to browse the website at this point, I decided to mine-sweep each diamond present in the home page in order to locate basic information (such as a biography of the author and contact details). It is at this point that I noticed that the diamonds contain both items that would be classified as projects done by the author, as well as the website information that I was looking for. In a typical mine-sweeping implementation, there is no apparent hint as to which diamond holds which information.

²¹
One of the projects uncovered by hovering over the diamond shapes.

Clicking on any of the items in the diamonds results in the content being loaded inside all the other diamonds, with the navigation retaining its place on the same diamonds. From a visual perspective, the result is quite appealing. However, this does not improve the usability in any way.

²²
Clicking on any of the navigation items opens content in the same diamonds used for navigating.

Conclusion

The website offers plenty of white space—something that generally is good for usability. Aesthetically, it’s also very pleasing. Thus, in my opinion to improve the usability, the main focus should be on improving the navigation by placing a conventional menu in the top part of the website (maybe repositioning the logo towards the top left-hand side) and placing a simple menu to its right.

The diamond design for displaying content can be retained, as I think it effectively contributes towards the identity of the author. Still, I would make it occupy less vertical space so that the footer (or at least the top part of it) is visible above the fold. In this way, users will notice that the website contains a footer.

Whether or not to include clickable links inside the footer is something that the author ultimately needs to decide—replicating the top navigation inside the footer is never a good idea. However, converting the items inside the footer into useful, deep links (perhaps to specific projects that highlight the capabilities of the author) will help.

McCormack & Morrison

I personally think that with this portfolio website, the design agency McCormack & Morrison have done an excellent job translating their slogan “Good Old Fashioned New Media” into a visual experience. Indeed, the website has a strong brand identity and an almost retro feel, with powerful, bold typography.

The only links in the home page are the logo and an “About Us” link, correctly located at the top left and top right hand corners, respectively. Although the “About Us” link is disguised as a speech bubble icon, it makes use of the title tag so that it displays the text “About McCormack & Morrison” on hover.

²³
The company’s tag line is used to create a strong brand identity to greet its visitors.

Perhaps less optimally located (although at least above the fold) is the “Our Work” button at the bottom right hand corner. I say “perhaps” because I wouldn’t classify this placement as a usability failure, since some people will actually look just above the fold of the website in order to locate a footer. Also, the link is in the form of a button—which in itself encourages users to click on it. Missing this button would really be a pity, because this is when you would realize that the website is indeed a one page website—it scrolls vertically to reveal projects undertaken by the agency, and horizontally to see more screenshots of the same project.

²⁴
The projects can be viewed either by using the arrow keys or the navigation at the bottom of the website.

When viewing these projects, the “our work” button is replaced by arrow buttons that facilitate the browsing of each project. Although it is not mentioned on the website (which is a pity, really), the fact is that you can easily navigate through the projects using the keyboards’ arrow keys. This enables a very pleasant, yet rapid navigation. Another usability plus is that the website effectively makes use of the screen’s full width.

²⁵
The company devotes a lot of importance to branding—hence the reason why each project starts off with the client’s logo.

Conclusion

In my opinion, McCormack & Morrison got most of their usability right. What I would introduce would be the ability to navigate through the projects in a non-sequential manner. While this isn’t a major issue with this website (as it only has four projects), it would be very tedious to have to go through a number of projects in order to reach the one that is interesting to the user visiting the website. Another issue is that there is no hint as to what project will be viewed next without actually having to visit each and every project.

Moka

Argentinian design agency Moka is well aware that its website will attract potential South American, Spanish speaking clients. So instead of offering the standard language changing mechanisms, it makes use of its website visitors’ IP address in order to provide the site in English or Spanish—depending on their location. In fact, manually changing the “/?lang=en” parameter in the URL to “/?lang=es” will yield the Spanish version of their website—this is good usability.

²⁶
With an apparent lack of visible navigation, this website had to include navigation instructions at the bottom left side.

However, I would still provide a mechanism for users to know that the website is being shown in this language specifically for them, and provide a facility to change it to select other languages. This is because the user may be visiting the website using a device that is not theirs. Additionally, they may feel more familiar with one of the other languages that the website offers.

²⁷
Samples of each project are rendered using the full size of the screen.

Back to navigation. The first thing that you’re greeted with is an abstract design along with the Moka tag-line. Having the company’s tag-line and logo prominently displayed is always good usability practice, because it informs your visitors what website they are visiting. But there is no apparent menu on the website.

Navigation becomes visible in the form of arrows that appear at both ends of the abstract design when one hovers over it. Implementing the website’s navigation in the form of mine-sweeping is never a good usability practice. To give credit to Moka, they do include instructions on how to navigate their website at the bottom left hand corner of the screen.

However, due to the placement (as well as the low-contrast the text has with the background), this is not immediately visible. Then again, if navigation is intuitive, one would not need to provide such instructions.

Clicking the navigation arrows enables the user to browse in a sequential manner through a number of projects undertaken by the company. As previously mentioned, the problem with this type of navigation is that the user needs to go through projects in a sequential manner without getting a hint of what the next project will show.

Also, the project description is barely visible, as it is located at the bottom left-hand corner of the screen. If the user fails to see it, then they will not be able to understand what they are seeing.

²⁸
On mouse-over, the logo doubles up to show the “About Us” and contact information.

Another usability problem I found is that the logo breaks the convention of being clickable in order to go back to the home page. Apart from the fact that this practice is almost standard today, the website doesn’t offer any other mechanism to go back to the home page other than having to go back sequentially using the arrows.

This is something that is most likely to cause user frustration. Hovering over the logo provides the “about us” and the company’s contact information—not a bad idea in order to keep a clean user interface. However, it is not intuitive enough, since users will normally hover over your logo in order to go back to the home page.

Conclusion

To end on a more positive note, the website is clean, minimalist, provides ample white space, and prominently shows the company’s portfolio—all of these will provide a positive user experience. Introducing the ability to select which projects to view (and to view them in a non-sequential manner) would by far improve the user experience. Additionally, sticking to conventions such as providing better mechanisms to go back to the home page, being able to view the information about the company, and how to get in touch with them, would also be beneficial.

Final Thoughts

Even through a brief analysis of these portfolios, it is evident that a website can be usable while at the same time having a pleasant user interface. While there is still room for even more interpretation, it’s clear that one needs to be very careful to keep in mind that a website has one focus: enabling its users to achieve their objectives—this is ultimately what usability is all about.

In the case of portfolio websites, the users’ objectives may include knowing more about the owner of the website, viewing the projects undertaken by that owner, or contacting the owner. The objective to identify (as well as develop and design) what needs to be achieved is a tough process—but also one that will inevitably lead to a healthy return on its investment.

From: http://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/

Creative Flu

haardtline.de

cappen.com

teixido.co

macaronibros.com

toasteddigital.com

redtiki.com.au

mindwork3d.com

next-motion.de

pixelbaecker.de

carbonmade.com

girlgamer.com

rastapenatal.com.br

polaroid.com

Amoga designers

AO5

biznes.pl

D’tal Spot

Some web

Final version

Garden first aid

Give it studios

Harm Less Design

Moodbase

Portal video

Portfolio v2

WeWorkForFree

WPmonk

X-Photo

Zoom Club

Bullspot

markhobbs.net

netzbewegung.com

twodesigners.be

coullon.com

keithcakes.com.au

ch3mical.com

festivalmundo.com.br

From: http://www.designyourway.net/blog/inspiration/menu-design-inspiration-from-38-websites/

Navigation menus used to be a fairly simple thing. Code up an unordered list, float it left and you’re good to go. With responsive design being all the rage these days though you’re faced with some new challenges when creating a menu design.

Follow along as we start from scratch and code a simple but effective responsive navigation menu that you can easily modify and reuse in your own projects.

What We’re Building

If you’re the kind of person who likes to skip ahead, here’s a sneak peek at what we’re building. Be sure to resize your browser window to see the responsive concepts in action.

The HTML

Let’s jump right into this project without a bunch of unnecessary fluff. I’m sure you’re eager to get to the good stuff.

The first step is to decide on some markup. Since this is a navigation menu, it’s the perfect place to implement the HTML5 “nav” element.

<nav>
</nav>

Believe it or not, this one little piece of code had my head spinning when it came time to test. For some reason unknown to me, my styles simply weren’t taking effect in IE6-8! After a good ten minutes of fumbling around, I slapped myself in the head as I realized that I had used HTML5 elements, which of course aren’t supported by anything older than IE9.

Fortunately, the fix is easy, just drop in the famous html5shiv and you’re good to go (place this in the head portion of your document).

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Add the List

Now that we’ve got our container element figured out, it’s time to toss in a simple UL with eight links. This tutorial is pretty dependent on the number of links so be sure to use eight if you’re not confident enough to venture out on your own in some areas.

<nav>
   <ul>
      <li><a href="#">PixelsDaily</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Podcast</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</nav>

Add The Sub Tag

To make the menu a little more interesting and helpful, let’s include another line of text below the initial one on each of the menu items. There are a number of ways that we could go about this so feel free to disagree with how I approached it. Basically I just tossed in a break tag and used a small element for the second line. The second item will indeed be small so this gives us a fairly semantic hook without any unnecessary divs, IDs or classes.

<nav>
   <ul>
      <li><a href="#">PixelsDaily<br /> <small>Go Home</small></a></li>
      <li><a href="#">About<br /> <small>Meet Us</small></a></li>
      <li><a href="#">Clients<br /> <small>Meet Our Friends</small></a></li>
      <li><a href="#">Work<br /> <small>See Our Work</small></a></li>
      <li><a href="#">Podcast<br /> <small>Hear Us</small></a></li>
      <li><a href="#">Downloads<br /> <small>Steal Our Stuff</small></a></li>
      <li><a href="#">Blog<br /> <small>Read About Us</small></a></li>
      <li><a href="#">Contact<br /> <small>Email Us</small></a></li>
   </ul>
</nav>

Progress Check

After this step you should have a simple, unstyled list of links. Notice that without any effort, those small tags are already going to work and reducing the size of every other line.

Starter Styles

To begin our CSS, let’s pull out that good old universal selector and take Paul Irish’s advice by applying box-sizing: border-box to every element. This will help us size things easily with percentages even though we’ll be using borders.

* {
	padding: 0;
	margin: 0;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

Container Styles

Before we get into styling the individual list elements, let’s apply some basic styling to our parent elements. First up, target the nav element and set it to 90% of the width of the body. This will stretch most of the way across the available space but still leave our nav a little room to breathe. Be sure to center it on the page as well with auto margins.

Also jump in and apply the necessary unordered list styles to reset the list and eliminate any bullets.

nav {
	width: 90%;
	margin: 50px auto;
}

nav ul {
	list-style: none;
	overflow: hidden;
}

Menu Styles

Now that our parent elements have their act together, it’s time to work specifically on the menu items, which can be targeted via the nav element in conjunction with the anchor tags and list items.

Here’s a big chunk of code but don’t be afraid of it, I’ll walk you through it piece by piece.

nav li a {
	background: #444;
	border-right: 1px solid #fff;
	color: #fff;
	display: block;
	float: left;
	font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 12.5%;
}

/*SMALL*/
nav small {
	color: #aaa;
	font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
	text-transform: none;

}

I’ve ordered the properties here alphabetically for easy reference but to be honest this isn’t really my preferred way to do things. I like to group styles by function so that they make a little more sense. If we reorder our styles this way, they become easier to discuss.

nav li a {
	display: block;
	float: left;
	width: 12.5%;
	padding: 10px;

	background: #444;
	border-right: 1px solid #fff;

	color: #fff;
	font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

First up is the chunk of styles that defines the shape and layout of each list item. We’ve changed the anchors to block level items, floated them to the left, assigned a width and given them a little padding. This will create a nice big rectangle for each link in the menu. Why 12.5% for the width? Because we have eight menu items and 100% / 8 gives us 12.5% width on each item.

Next up is the chunk of code that defines the visual styling of the boxes that we just created. We’ve given them a background color and a single pixel border on the right side.

Finally, we end with all of the styles that relate to the text of the menu. This is all pretty basic stuff, the one curve ball is the “Cutive” font, which you can find here.

For the small styles, I changed the color, removed the uppercase text-transformation and set the font to Helvetica.

Progress Check

These styles made all the difference in the world. Our menu is looking much better. The custom font is working, the links are inline, the small text is perfect; it’s a beautiful thing.

Hover Styles

When the user hovers over a menu item, let’s take it all the way to black. To make it feel a little nicer, I added a half second transition as well.

nav li a {
	background: #444;
	border-right: 1px solid #fff;
	color: #fff;
	display: block;
	float: left;
	font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 12.5%;

	/*TRANSISTIONS*/
	-webkit-transition: background 0.5s ease;
	   -moz-transition: background 0.5s ease;
	     -o-transition: background 0.5s ease;
	    -ms-transition: background 0.5s ease;
	        transition: background 0.5s ease;
}

/*HOVER*/
nav li a:hover {
	background: #222;
}

Border Fix

Now, you can’t see it given that our background is white, but there’s actually a problem with our borders. They’re really just meant to give a little bit of visual definition to each menu item, which means there’s no need for one at the very end. To fix this, we can use the last:child pseudo class.

nav li:last-child a {
	border: none;
}

Below I’ve applied a temporary background color just so you can see the difference between the before and after versions.

Going Responsive

This project serves as a good example of the difference between a responsive design and a fluid one. At this point, our menu is fluid (it uses percentage-based widths) but it isn’t responsive. We can see this clearly when we attempt to reduce the size of our window too much:

As you can see, this is a wreck! Let’s jump in with some media queries to see if we can fix this problem. The best way to find out where we need media queries is simply to test it out and see where the layout breaks, then account for it.

1220px

The first problem that I see occurs around 1,200 pixels wide. Here the longer text items start to get cut off and are no longer fully readable.

To fix this, we need only to adjust our font size. I target an area just before the problem occurs (1,220px) and set my fonts to 10px.

/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
	nav li a {
		font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
	}

	nav small {
		font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
	}
}

With that change, the problem no longer occurs. As we reduce the size of our window, the menu responds and reduces the font size to accommodate the size.

930px

Once again we reduce the size of the window and find that things get hairy around the 900px mark. We’ve got lots of problems with overflow here:

Rather than making the font-size smaller and smaller until you can’t see it anymore, this time we’ll completely reflow the menu so that it splits into two rows. Now each link can be nice and large given that this might be around the point where tablet sizes kick in.

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
	nav li a {
		width: 25%;
		border-bottom: 1px solid #fff;
		font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
	}

	nav li:last-child a, nav li:nth-child(4) a {
		border-right: none;
	}

	nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
		border-bottom: none;
	}
}

Notice that we had to rethink how our borders work this time as well. Now we need the top row to have borders on the bottom, but not the bottom row. Once again, pseudo class selectors make this pretty easy.

580px and 320px

The two row format works well enough until we get below 600px and then all hell breaks loose. The thing just completely falls apart.

To address this, we’ll finish off our media queries with a two column, four row format. We’ll use this layout for 580px below and bump the font-size down a little at 320px.

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
	nav li a {
		width: 50%;
		font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	nav li:nth-child(even) a {
		border-right: none;
	}

	nav li:nth-child(5) a, nav li:nth-child(6) a {
		border-bottom: 1px solid #fff;
	}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	nav li a {
		font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
	}
}

Our menu now looks good even at a very small size. The downside is that it does take up a decent chunk of vertical height, but you can remove some of the padding if that bothers you.

Selectivizr

The astute observers among you will notice that we accounted for older versions of IE with the html5shim, only to follow that with some fancy pseudo class selectors that won’t work in IE either. To account for this, be sure to download and implement Selectivizr, a fancy JavaScript utility built specifically for bringing CSS3 selectors to IE6-8.

Conclusion

Responsive design is no walk in the park. It takes time, effort and plenty of “know how” to pull off effectively. I like to break it down into individual challenges like the navigation menu here and the image gallery in a previous article so you can learn the process without feeling overwhelmed.

You should now be well equipped to embark on your own responsive navigation menu project. Leave a comment below and show us what you come up with. What unique challenges did you face along the way?

From: http://designshack.net/articles/css/code-a-responsive-navigation-menu/

Often used on e-commerce and large scale web sites, the mega menus become more popular in modern web design. They are a great and effective way to display large amount of content on your website while you keep a nice and clean layout.

With mega menu you will be able to improve the navigation and usability on your web sites. In this article I will show you some premium CSS only mega menus and the best features that each one has to offer.

This is especially true if you have ever tried to search for creative Facebook apps or those that may be of interest to creative people.

If you have ever searched for such a thing, you have no doubt realized that there is an abundance of useless apps. This is the reason that I went through just about every app on Facebook to find the very few that were best suited for creative individuals, or had some sort of visual flair about them.

So here are 25 awesome Facebook applications that most designers will enjoy in their Facebook pages.

1. Addicted to Photoshop

This is a neat app brought to you by the master minds behind the “Sheezy” sites (Brusheezy, Flasheezy, etc).

“Photoshop Brush Junkies Rejoice! Get your daily fix of new Photoshop brushes and patterns from Brusheezy.com!”

2. Design Directory

Get the latest news on just about everything in the design industry right on your Facebook page.

“Add the Dexigner app to your Facebook, get latest updates, news, events, and competitions.”

3. My Merch Store

If you have a Zazzle store and a Facebook page, it only makes sense to have this app to help you sell more.

“Zazzle lets you create and post products for sale to your profile, share products that you like, discover great artists and buy truly unique products.”

4. Photography

Just a simple app that lets you show off professional photography that you find creative or inspiring.

“Choose from thousands of great photographs, landscapes, portraits, historical moments, they’re all there for you to show on your profile! You can show multiple images, random photos, or a slideshow!”

5. Group Photo Album

With this app you and your friends can create group albums with all of your own photos.

“Group Photo Album works with multiple Facebook albums so all your friends can easily post their pics, reconfigure albums on the fly, provide witty commentary and create together. You can share it publicly for viewing and commenting, but only the friends you invite can post and move images.”

6. Art Yourself

Ever wanted to be an Art collector? Well, now you can with the Art Yourself app.

“Start collecting living masterpieces now and share them with your friends. Art Yourself by displaying your collection on your profile. Finding excellent art and meeting artists has never been easier! Share with others by posting collected pieces on a friends wall or adding them to your messages! Art Yourself is not just a Facebook app, it’s a society withing Facebook.”

7. The Ultimate Vision Board

Everyone needs some inspiration from time to time to remind them of what they are after in life.

“Vision boards takes writing down your goals to the next level by using pictures, making your goals visually appealing and specific. This will inspire and energize you and accelerate your progress! Tony Robbins also promotes the concept calling it a “Treasure Map.”

8. JPG Themes

If you are a regular reader and participant of the JPG magazine, you might be interested in this app that lets you vote and show off your choices.

“JPG Magazine is the photography magazine created by YOU. It is your submissions and your votes that determine what goes into each issue. Now, you can add the JPG Theme application to your Facebook profile and encourage your friends to vote for your photos submitted to each JPG theme. If you are published, you will win $100, a subscription to JPG Magazine, and your photos will be printed on our next issue!”

9. Picnik

This is a smaller, Facebook friendly version of the popular online photo editor.

“All our Edit tools are free, including auto- fix, rotate, crop, resize, exposure, color adjustments, basic sharpening, and red eye fixing.”

10. PhotoPop

Use this app to give your photos a comic book like feel with speech bubbles.

“Animate your photos or your friends’ photos. Send your creations to friends using the built-in messaging feature. It’s never been easier to add stuff to your pictures! For starters, add speech and thought bubbles.”

11. TouchGraph Photos

See a visual connection between you and all of your friends and your friends friends.

“TouchGraph lets you see how your friends are connected, and who has the most photos together. ”

12. Art

A small app to help you release your creative stress. Kill time with this spin art like app.

“Create pieces of art.”

13. My Favorite Color

What’s the first question you usually ask someone you want to get to know? What’s your favorite color? Now you can show instead of tell.

“This application will allow you to show the world, on your profile, what your favorite color is.”

14. My Label

Feel like playing dress up? Use this app to create your own clothes and t-shirt designs.

“Send the latest, hottest, sexiest clothing to your friends! If that’s not enough for you, then create your own fashion and upload it, then either wear it, add it to your wardrobe, or send it as a gift. With many different styles to choose from, let the world know how stylish (or anti-stylish) you are!”

15. LunaPic Photo Editor

Another online photo editor specially made for Facebook that allows you to edit and spice up your photos.

“Edit Your photos with the click of a button. Save back to your Facebook account. Cool effects and features including: Cut, crop, rotate, sharpen, blend and cool animation effects. (New) Browse and Edit your friend’s pictures as well!”

16. Six Degrees

Another app that gives you a visual representation of you, your friends, and the people they know.

“This application is intended to test the 6 degrees of separation idea through the connections of Facebook users. What does it do? You can use the application to search for other users on Facebook and show how you’re connected to them through friends.”

17. Graffiti

A fun little app that lets you create “graffiti” that you can send to your friends or post on your profile page.

“Draw graffiti for your friends.”

18. Flickr Photosets

A powerful app that lets you show off some of your Flicker photos and sets on your profile page.

“With Flickr Photosets you’ll also be able to display a small selection of your photos or sets right on your profile! You can select from either your most recent photos, fairly recent photos, or even random photos. You can also choose to filter the photos by specific tags.”

19. My Flickr

You can use this app to search for photos on Flickr that you want to show off on your profile page.

“Find exactly the photos you want to show using simple search criteria such as: Recent Photos, Tags, Photosets, Favorites, Groups, Interestingness, Date Range, Flickr Privacy, and all “sorts” of other sorting and features. Easily showcase your Photo Search results on your Profile/Page or My Flickr profile Tab.”

20. zuPort: Flickr

Another Flickr app, but this one is probably the most powerful out of the three on this list.

“You can customize zuPort: Flickr in the settings window, located on your zuPort: Flickr Library page. Customization allows you to pick how many photos to show in your profile, how your photos are displayed, which photos are shown and much more.”

21. Threadless Plus

Do you have shirt designs on Threadless or have an account for street team points? This app can help you on all counts.

“Share your Threadless collection and promote your submissions! Features: Opt to get notifications of new Threadless releases in your News Feed, Easily earn Street Team points from other app users with “Share the Love”, Keep a nice list of the Threadless shirts you own, List your submissions and critiques too!”

22. Slideshows and Photos

The photo page not quite doing it for you? This app can give you a little bit of spice for showing off photos.

“Bring your Facebook photos to life with an animated Slideshow or show them off directly on your profile with a Photo Strip. Tons of customization options are available, and setup is super easy. Even cooler, our photo browsing experience let’s you quickly flip through all your friends’ Facebook albums – no more clicking through endless photo pages!”

23. Sketch Me

Just a simple app that gives your photo that computer animated sketched look.

“Bored with your profile picture? This app creates an artistic pencil sketch based on your profile photo! You don’t have to do anything … this app will automatically create your sketch for you.”

24. Famous Art

Another simple app that lets you show off classic works of art on your profile page.

“Do you like classic art? Then use this app to show all your Facebook friends and family!”

25. Phixr Photo Editor

A pretty powerful online photo editor for “photoshopping” your image when you’re on the road and Photoshop isn’t an option.

“Phixr can e-mail photos directly to your friends, and it can upload photos to your accounts at Facebook, flickr, Picasa Web Albums, SmugMug and many, many more. More than ANY of our competitors! Phixr even fully supports Facebook’s photo tags!”

From: http://www.webdesignerdepot.com/2009/06/25-awesome-facebook-apps-for-designers/

Radioactive Buttons

Roll Your Own Google Buttons

CSS3-Only Tabbed Area

Apple’s Navigation bar using only CSS

How to Build a Simple Button with CSS Image Sprites

Creating Dynamic Buttons With CSS3

How To Create Depth And Nice 3D Ribbons Only Using CSS3

CSS3 Chunky Menu

CSS3 Dropdown Menu

Pretty CSS3 Buttons

jQuery style menu with CSS3

CSS3-only horizontal drop line tab menu

Related Posts

Here’s some other articles that you will definitely find useful.

Developing Streamlined and Efficient CSS Styles

HTML5 & CSS3: Take Your Design to Another Level

7 Useful Resources to Help You Learn HTML5

10 HTML5 Demos to Make You Forget About Flash

13 Pure CSS Techniques for Creating JavaScript-like Interactions

From: http://webdesignledger.com/tutorials/12-excellent-css3-button-and-menu-techniques