Design Shack

Design Inspiration: Weather Dashboard

Tue, 18 Jun 2013 12:00:00 +0000

A superb design for a weather dashboard that was inspired by iOS 7, particularly the colors.

This design was featured on Tuesday 18th of June 2013. It's designed by Dawid Liberadzki, and falls under the category of iPad App.

If you'd like, you can visit this site, or view all our other featured designs.

Design Inspiration: SAGR

Tue, 18 Jun 2013 12:00:00 +0000

SAGR Logo Design: Initial Concept 1 of 3.

This design was featured on Tuesday 18th of June 2013. It's designed by Samadara Ginige, and falls under the category of Logo.

If you'd like, you can visit this site, or view all our other featured designs.

Design Inspiration: The Touch Agency

Tue, 18 Jun 2013 12:00:00 +0000

A striking portfolio for a digital agency that uses interaction in an effective way.

This design was featured on Tuesday 18th of June 2013. It's designed by The Touch Agency, and falls under the category of Portfolio.

If you'd like, you can visit this site, or view all our other featured designs.

Design Inspiration: Opal Print

Tue, 18 Jun 2013 12:00:00 +0000

A stunning site for a printing company that uses dramatic imagery extremely powerfully.

This design was featured on Tuesday 18th of June 2013. It's designed by Opal, and falls under the category of Misc.

If you'd like, you can visit this site, or view all our other featured designs.

Create a Simple Autocomplete With HTML5 & jQuery

Mon, 17 Jun 2013 14:00:14 +0000

A quick Google search will yield plenty of handy autocomplete plugins — there’s even an option shared by jQuery UI which comes bundled with the library. However today I want to look into an alternative solution. The jQuery Autocomplete plugin released by DevBridge has the exact functionality that I find most appealing.

The styles will automatically highlight words as you are typing, and results appear in the dropdown menu at the bottom. This tutorial is a brief introduction to using the plugin by loading content from a JavaScript array. It is possible to load Ajax content from a backend file or from content out of the database, however for this tutorial it is easier to work with local data. Check out my sample demo to get an idea of what we are trying to build.

Creating the Page

A good first step is to download a copy of the jQuery Autocomplete plugin. I am using the minified version within my header, along with a copy of the latest jQuery script. Since I am keeping all the suggestions inside a JavaScript array I have also moved the custom scripts into another separate file.




  
  Input Autocomplete Suggestions Demo

The resources are not too difficult to get setup. And similarly all of the HTML is very straightforward so you can implement any type of search design in your page and it should work fine. I am using an outer container with the ID #searchfield to center the whole form. There is no submit button for this demonstration, however the results will appear automatically in the dynamic context field below the input.


  World Currencies Autocomplete Search
  Just start typing and results will be supplied from the JavaScript. Check out jQuery Autocomplete on Github.
  
  
	
  

  
  
	Choose a currency and the results will display here.

We can target the field by using an ID of #autocomplete. There is no extra HTML because all of the suggestions will be presented using JS codes. One other interesting area is the paragraph using an ID of #outputcontent. This is where we can display the user’s choice once they click on a suggestion. Normally on a live website you would instead just redirect the user to a search page, or onto the main page itself.

Designing with CSS

I do not want to delve too far into detail, but we should look at the CSS styles for each of the suggestion features, along with the main input area. The outer box border and content styles are heavily developed around the Design Shack search bar. Each of the suggestion styles is based off the default code, which I have copied over into my stylesheet.

.autocomplete-suggestions { border: 1px solid #999; background: #fff; cursor: default; overflow: auto; }
.autocomplete-suggestion { padding: 10px 5px; font-size: 1.2em; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #f0f0f0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399ff; }

If you want to keep these in a separate stylesheet it would still load just fine. However I try to combine resources so that we may cut back on HTTP requests from the browser. The first two classes are targeting the entire suggestions popup, along with each internal suggestion row. You may style them in any way that fits your website. Additionally the CSS comes along with a selected feature class to highlight text which has already been typed by the user.

#searchfield { display: block; width: 100%; text-align: center; margin-bottom: 35px; }

#searchfield form {
  display: inline-block;
  background: #eeefed;
  padding: 0;
  margin: 0;
  padding: 5px;
  border-radius: 3px;
  margin: 5px 0 0 0;
}
#searchfield form .biginput {
  width: 600px;
  height: 40px;
  padding: 0 10px 0 10px;
  background-color: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  color: #aeaeae;
  font-weight:normal;
  font-size: 1.5em;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#searchfield form .biginput:focus {
  color: #858585;
}

The search field itself should not be a problem regardless of your own design. jQuery Autocomplete is built to work around any width so that all suggestions can fit nicely into the same layout. Granted my example does take up a lot of space on the page, but the plugin handles this flawlessly without very many customizations.

Implement the Autocomplete

If you are using a backend Ajax call to fetch data results then you may have to perform your own search feature. jQuery Autocomplete expects some type of response data like XML/JSON and this should be returned from PHP, Rails, Python, ASP.NET, etc. So the most likely scenario is to search through your database table of entries and pull out all the related posts and their URLs, then return this list to your browser.

What I have done is created an array of entries right inside JavaScript for the major currencies found all around the world. As you start typing the country or currency name you will see a list of suggested items pulled directly from the array. It takes a long time for manual data entry, so I will only copy a small portion of the array to demonstrate how it is done.

$(function(){
  var currencies = [
    { value: 'Afghan afghani', data: 'AFN' },
    { value: 'Albanian lek', data: 'ALL' },
    { value: 'Algerian dinar', data: 'DZD' },
    { value: 'European euro', data: 'EUR' },
    { value: 'Angolan kwanza', data: 'AOA' },
    { value: 'East Caribbean dollar', data: 'XCD' },
...
    { value: 'Vietnamese dong', data: 'VND' },
    { value: 'Yemeni rial', data: 'YER' },
    { value: 'Zambian kwacha', data: 'ZMK' },
    { value: 'Zimbabwean dollar', data: 'ZWD' },
  ];

All of this content must be added before running your own function within jQuery. I have chosen to keep the array and custom function call stored within the same JS file. However you can choose to separate functions from data and move them into different files altogether. Now the autocomplete plugin only requires a small amount of default code. I will copy a sample template along with my live demo code so you can see what I’ve done using the same parameters.

  $('#autocomplete').autocomplete({
    lookup: currencies,
    onSelect: function (suggestion) {
    // some function here
    }
  });



  // setup autocomplete function pulling from currencies[] array
  $('#autocomplete').autocomplete({
    lookup: currencies,
    onSelect: function (suggestion) {
      var thehtml = 'Currency Name: ' + suggestion.value + ' 
 Symbol: ' + suggestion.data;
      $('#outputcontent').html(thehtml);
    }
  });

The lookup parameter is only used for local data when we are targeting an array. onSelect will trigger a new function every time the user selects a suggestion. In my live demo we simply create a new string of HTML to output the selected name and value of that entry. But please notice that my demo is a very bare-bones example of what is possible.

Check out the jQuery Autocomplete documentation to get a better idea of some other parameters. I have not even begun to scratch the surface and JavaScript developers can likely put together examples using many other params in the function call. But I want to show how easy it is to get this plugin up and running on your website – even using static data where necessary.

Final Thoughts

If you have never toyed around using autocomplete suggestions then I must recommend this plugin. I have used a few different solutions in the past but nothing has really stood out to me until now. And there is a big difference between loading suggestions with page results v. search results (like Google Instant).

Before using this plugin, make sure you have a good plan for constructing a user interface that works nicely. The jQuery Autocomplete plugin along with all my source codes are released for free under the MIT license so you are open to use this for any project!

Design Inspiration: Rubee

Mon, 17 Jun 2013 12:00:00 +0000

A great example of a flat design aesthetic, I particularly like the intuitive layout and simple colour differentiation.

This design was featured on Monday 17th of June 2013. It's designed by Ben Lee, and falls under the category of Mac App.

If you'd like, you can visit this site, or view all our other featured designs.

Design Inspiration: Kanbanery

Mon, 17 Jun 2013 12:00:00 +0000

Free account coupons given out to #DARE13 attendees. Quick typographic project, lots of fun.

This design was featured on Monday 17th of June 2013. It's designed by Mariusz Ciesla, and falls under the category of Brochure.

If you'd like, you can visit this site, or view all our other featured designs.

Design Inspiration: Youssef Habchi Portfolio

Mon, 17 Jun 2013 12:00:00 +0000

The portfolio of Youssef Habchi a graphic designer.

This design was featured on Monday 17th of June 2013. It's designed by Youssef Habchi, and falls under the category of Portfolio.

If you'd like, you can visit this site, or view all our other featured designs.

Design Inspiration: Finex

Mon, 17 Jun 2013 12:00:00 +0000

Finex is a Fully Responsive Wordpress Theme with many features: easy to use page builder, on-click Theme Options, fully resposnive design, unlimited sliders, unlimited layouts, unlimited colors, easy header layout changing (3 different menus), on-click change from wide to boxed version, different post and portfolio layouts, many useful shortcodes integrated into the page builder, all Google fonts and much more.

This design was featured on Monday 17th of June 2013. It's designed by Pego Design, and falls under the category of Corporate.

If you'd like, you can visit this site, or view all our other featured designs.

Design Inspiration: Green Download Button

Fri, 14 Jun 2013 12:00:00 +0000

A minimal yet effective design for a download button that uses colour intuitively to show progress.

This design was featured on Friday 14th of June 2013. It's designed by Garrett Godsey, and falls under the category of Element.

If you'd like, you can visit this site, or view all our other featured designs.

Design Inspiration: The Prompt

Fri, 14 Jun 2013 12:00:00 +0000

A superb new brand for a new podcast. I love the use of colour and the dramatic styling of the text.

This design was featured on Friday 14th of June 2013. It's designed by Jory Raphael, and falls under the category of Logo.

If you'd like, you can visit this site, or view all our other featured designs.

Design Dilemma: Which Is Better — Staff or Freelance?

Wed, 12 Jun 2013 14:00:45 +0000

Jill K. writes: I’m graduating art school (yay!) and can’t decide if I should freelance or take a staff position. Which one is better?

Well, congratulations, Jill! I’m guessing none of your teachers discussed the possibilities of a future in the industry. Yet another art school fail. But, the question is valid although you may not have a choice as a new graduate. Let me go over the strengths of each, as well as the pitfalls, and discuss what you will find are your immediate options.

There are many articles exploring staff vs. freelance, so let me provide a different view by getting down and dirty about some of what you’ll find with both. Mixed with the more gentle approach other writers have taken, it will give you a good view of what to expect. Join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

Firstly, Humble Yourself

“I would have gladly cleaned the office toilets with my tongue just to be working at such a famous magazine.”

When I was working as an art director for a well-known magazine, a chairperson at my old alma mater called me to request (more demand) that I give internships to some new graduates. I had already hired several interns from the school because I was still taking some night courses there and they seemed to be smart and promising students. Unfortunately, the chairperson demanded that the interns work designing the magazine and not just “making copies” or “running for coffee.”

As I told him, when I was first starting out, I would have gladly cleaned the office toilets with my tongue just to be working at such a famous magazine. Prepare yourself for a learning experience if you choose the avenue of working at a staff position, as well as being the lowest of the low. It’s referred to as “paying one’s dues.” In other words, you need to prove yourself both with talent and dedication.

Working on Staff

A staff position provides stability (as long as you are employed there, naturally, but that can change at any moment these days). You get a regular paycheck (in most places) and healthcare benefits (in most places) and can learn from coworkers and superiors, which can lead to a greater role with the company and a higher position. You will also work on bigger brands than you will as a freelancer, use the company’s clout to stuff your portfolio with impressive work. It’s great place to start if you’re a team player.

Don’t expect an eight-hour a day, five days a week proposition with a staff position. You’ll find yourself working for the same salary but putting in extensive hours and days, which can be rewarding, depending on the work you are doing. I have some great memories of 48-hour sessions on projects, staying up all night, working side-by-side with coworkers to accomplish the impossible. Sometimes, however, you’ll really resent the long hours and requests you work weekends.

“Don’t expect an eight-hour a day, five days a week proposition with a staff position.”

At one employer, management would send out corporate memos after major snowstorms, when the entire city would be closed and the mayor would ask people to stay off the roads, stating that there were no “snow days” as the company would never close due to the “collaborative nature of the business” and taking the day off would be counted as a vacation day. The running joke is that our managers would call in and say they were “working from home.”

To this day, I don’t know how a manager would manage people and work flow from home, but those of us who showed up didn’t think too hard about it as we sat in the conference room, watching DVDs all day… aside from the three-hour lunch.

You will make friends who will be valuable connections throughout your career. Being part of a team can create a closeness, and brings out some… interesting interpersonal dealings referred to as office politics. It can be a small design firm or a huge corporation, but as long as there are human beings working there, you can expect certain daily dealings and power plays you might not like. People say there are employment rules and human resource personnel to make sure your rights as an employee are upheld. Oh, I always throw up a little in my mouth when I have to bring that up.

You will need to develop a thick skin and sense of self, along with a defensive strategy with some coworkers. It ain’t fantasyland where you’ll skip around the magical unicorn. Bullying in school was nothing compared to what can happen in an office. Sometimes a paycheck just doesn’t cover the aggravation, and that’s why some people decide that going freelance is a good idea.

Working Freelance

People believe that a freelance career means freedom, flexibility, tax-deductions, and saying good-bye to commuting and office politics. It does… maybe… not really… it depends.

Some choose a freelance career and others have it thrust upon them through unemployment, but it has some unique challenges and, although some may argue this, few are cut out to be successful in a freelance career. When you are a freelancer, there are many skills you must master as you are running a small business and being weak in one area can sabotage all of your efforts. Frightening? Sure, but a successful freelance career can lead to wonderful things. Here’s some pitfalls and strengths you’ll need:

“You need to be self-motivating because those deadlines are a cruel master. Working from home can be a real challenge as there are multiple distractions. Expect to put on weight, watch too much TV and have days… sometimes multiple days when you never change out of your bathrobe.”

When you’re freelance, friends and family will consider you as “not having a job,” so you’ll be asked to run errands and help people move all of the time. Make sure you don’t have a pickup truck or van (even a minivan) because that’s the real kiss of death!

You need to be self-motivating because those deadlines are a cruel master. Working from home can be a real challenge as there are multiple distractions. Expect to put on weight, watch too much TV and have days… sometimes multiple days when you never change out of your bathrobe. I have personally just put on a shirt and tie for Skype conferences while having no pants on.

Because you are a small business there has to be a salesperson, accountant, collections agent, marketing manager and, of course, a designer. You will really need to be at the top of your game when it comes to all of these skills. Dealing with clients can be difficult (I highly suggest becoming a fan of Clients From Hell to get a taste of the worst situations and request heard by designers), so great negotiating and customer service skills are essential. As a young designer once said to me, she wanted to “borrow (my) bastardness” to deal with a difficult client. It’s not that I’m a bastard — I’m a tough negotiator (but fair) and I can cut a deal without cutting my own throat. As a freelancer, you have to make sure your business runs at a profit or you go broke. It’s the same for any business.

If you think the hours and demands at a staff position are tough, you haven’t seen anything yet. When you have to do all the jobs mentioned above, you’ll find there aren’t enough hours in a day. Learn to prioritize and organize your business, even if it means the laundry or shopping has to be put off a day or two.

You will get tired and lose your inertia sometimes. It’s referred to as “burnout.” Learn techniques to recover quickly. Lost income due to lost inertia must be made up later on to keep paying your bills. It happens, so don’t beat yourself up when you need to take a day off… but get back on the ball as quickly as you can.

Basically, both freelance and working a staff position are tough lifestyles but that’s why it’s called work and not play.

A Dose of Reality

Now, here’s what you will most probably face as someone trying to enter the field; you don’t have much of a choice. While hiring has become “young and cheap,” rather than the old “you need experience to get a job but you have no experience without a job,” it is still hard to convince someone to hire you unless they see real talent in your portfolio. I’ve seen some student work that shows incredible talent in thought process and execution… and, of course, work that shows the person hasn’t hit their stride yet, to be kind as that stride may never come.

“While you are looking for a staff position, which I would suggest for anyone starting out, you should also be doing freelance work to keep your hand and mind designing, along with the crappy job you will need to work while looking for something in the design industry.”

Too many students believe they must go out and work for free to show samples and experience and while that’s a good idea when done correctly, most freebies turn out being a waste of time and effort. Even accepting a project for free from some small business, when they control all creative only gives you a sad example of work that isn’t really yours, so why bother? You want to show your thought process in solving a design problem.

Some people suggest volunteering for a non-profit organization but asserting that you control all creative decisions for your trouble. It will give you samples that show your capabilities and that is what creatives who do the hiring are looking for in a portfolio and designer.

I’ve even suggested taking an existing design and redesigning it to show how you would approach the solution (just don’t show the before and after to the person who designed the before piece).

While you are looking for a staff position, which I would suggest for anyone starting out, you should also be doing freelance work to keep your hand and mind designing, along with the crappy job you will need to work while looking for something in the design industry. If you take a job as a waiter/waitress, see if you can redesign the restaurant’s web site, menu or ads. Keep at it, keep designing (even if it means entering design contests — and people will beat me for suggesting that — but why sit on your arse doing nothing?).

Once you do have a staff position, keep freelancing because that regular paycheck will allow you to take the plum projects you’ll enjoy and designs that will build your portfolio. If you lose your staff position, having at least one or two steady freelance clients will cushion the financial blow.

Send Us Your Dilemma!

Do you have a design dilemma? Speider Schneider will personally answer your questions — just send your dilemma to dilemma@designshack.net!

Speider has created designs for Disney/Pixar, Warner Bros., Harley-Davidson and Viacom among other notable companies and is a former member of the board for the Graphic Artists Guild and co-chair of the GAG Professional Practices Committee. He writes for global blogs on design ethics and business practices and has contributed to several books on the subject of business for designers.

Image © GL Stock Images

Do I Need to Design With SEO in Mind? A Guide for Designers

Mon, 10 Jun 2013 14:00:38 +0000

You’re probably tired of hearing it, but search engine optimization is important. It can dictate and influence who visits a site, and how many people make it through to see your beautiful design work.

It should be a part of the design process from the planning stages forward. So designers, unplug your ears and make it a priority to learn how you can start thinking about SEO in the design process. Let’s dive into the topic a little more today.

SEO Basics

Search engine optimization, commonly referred to as just SEO, is the process of getting traffic to a website from search engines. Google is the major driver of SEO because of its popularity, but sites such as Bing, AOL and Ask are also important.

Search engine optimization is free. It is not the same as buying ads that appear in search websites, although paid search can increase the visibility of a site. It relies heavily on the overall structure of a site and keywords located in the copy and in the design architecture.

So what contributes to SEO? There are a whole number of items and these change and are updated with each new release from Google and other search sites. (You’ve heard of Panda and Penguin, right?) Contributing SEO factors fall into two categories: on-site SEO and off site.

On-site SEO ranking factors include your content (quality, words, engagement and popularity), HTML (titles, descriptions and headers) and architecture (load times and speed of your site, crawl-ability and URLs).

Off-site SEO ranking factors include links from other sites, social media mentions, web honesty and basic demographics (location – country and city, history and users’ opinions of the site).

Why Should Designers Care About SEO?

After a site is registered with the search engines, they send out feelers to see what is on a site. This is where SEO is vitally important to designers. The crawls determine what the content is, its “value” and how to display it in search results. You want to do everything you can to bring your site to the top of these lists because the higher a site comes up in search results, the more exposure you’ll receive (and the happier your clients will be!)

Design Considerations

The best way to make the most of SEO for any site is to start thinking about it in the design process. And it really starts with a simple conversation and plan of action. Here are five key ways designers can get involved with SEO to help better a site from the ground up:

1. Content and Text

After deciding the purpose and goals for your project, outline a few keywords that you would use to describe the content on your site. Design Shack, for example, would use keywords such as “design”, “tutorial”, “web design”, “business”, “css”, “HTML”, “typography”, and “layout.”

It is important that you use your keywords and similar phrases often and in the proper context throughout the site. Keywords should be used in body text, headers, headlines, meta data and links. Keyword targeting is important on every page of a site, but is especially important on the home page; it should serve as a gateway to and summary of the rest of the content on the site.

Watch your wording when it comes to links. How often do you see with words “click here” or “see more” for a link? Stay away from these terms. The words used for a link should describe the link itself. Try for phrases that tell you where the link will take users or what information comes after the click.

One thing to keep in mind is the intentional stuffing of keywords. If you fill up the site with keywords just for the sake of using them and they do not relate to content, the search engines will catch you and it will impact your SEO negatively. It is important to maintain honesty in content.

2. Images

What users see and what search engines see when it comes to images are very different. Search engines can only see words, not the actual visuals. Because of this, it is important to use alt tags wisely when it comes to every image on your site. Each visual should include a corresponding description (that ideally contains a keyword of two). Avoid alt tags that read “screenshot” or “image.” Images with the best descriptions are those that tend to pop up in Google image searches.

Visuals with expandable content are also a great option to provide more for search engine crawlers. Consider adding mouse-over states for images or an expandable div for a multiple image frame with full descriptions of images. This is important for all images, logos and visual calls-to-action on the site.

One other little important nugget of information? Design banners and other graphics using webfonts, HTML and CSS when possible. (And when it is not, treat these items like images with complete descriptions.) By creating pieces that use standard HTML, with markups for body type, H1s and bolding, etc., search engines can better read them.

Images should be optimized for the web before they are saved and loaded as media for the website. Images that are saved at too large a size will cause them to lag when loading and hurt the page loading speed. Users will click away (and may not come back) if your website lags or images are slow to load. Save images at a resolution of 72 dpi and aim for a file size between 30 to 100 kilobytes.

3. HTML and Code

Pages titles are for more than just helping you categorize a site. They also help users and search engines. Each page should include a title with a description of the content of the page. Avoid cutesy titles; they should be direct, informational and include a keyword.

What is most important about this title is that it is what appears in search results, giving users a reason to click the page. Keep titles relatively short as well. Think 55-65 characters.

Then match page titles and navigation links: title=”name of page” href=”link”. Having the same attributes will give your page an SEO boost as well.

Also group media in a folder with a name such as “images” or “photos” so that they generate a clean and descriptive URL, /images/xxxx.

Think about your code as part of the design from start to finish. HTML that is readable is also HTML that is crawl-able. The code should be structured in a manner that matches the content of the website; start with navigation and menus, then H1 tags, then body text. Use tags as they are intended and whenever possible – STRONG (bold), UL (lists), P (paragraphs) and H (headers or subheaders in numerical order).

They way you name files can be important as well. Include relevant information in the filenames of uploaded items and saved files. This applies to documents, media and html. SEO crawls read files names as words, use a hypen – not a space or underscore – to change from word to word. So the crawl reads your information properly.

Finally, create URLs with meaning. Each URL should clearly state what is on a page. Avoid URLs that randomly generate numbers or letters. The URL for this page, for example, is http://designshack.net/articles/do-i-need-to-design-with-seo-in-mind/ rather than http://designshack.net/5684-2354. The URL helps SEO because it matches the content of the page, contains keywords and is descriptive enough that when users see it in other places (on social media perhaps) they know what the content of the page will be.

4. Site Map

Create a site map and make it live on every website you build. (A site map is an xml file that outlines the structure of your website.)

Create one and make sure it is submitted to Google. Plus users like them too if they are struggling to find things on your site.

5. Linking and Social Media

Sometimes some of the most important elements in terms of SEO are not even technically part of your site – what you link to from your pages and social media and linking from other sites all play active roles in determining visibility.

Not only should you be careful how you word links on your site – use descriptive words not just instructions to click – but also who you link to, that links work and links relate to your content. Links need to have content value and relate to your overall message for the most value. Linking to irrelevant items can confuse crawls as to what your content actually is and hurt your overall SEO. And if you find a broken link, fix or remove it; you don’t want those indexed by search engines.

Links from other websites, including social media, to your site should be of quality and trustworthiness. They should also connect to relevant keywords on your site. While this can be hard to control, you can in some ways. Namely, don’t buy links; they will not provide real value. Link internally on your site to other pages and if you have multiple and related sites, link between them. The true value of social media links is constantly debated but does provide a boost and some SEO analysts say that using Google+ because of its connection to the search engine giant helps even more.

SEO Tools

Here’s a quick collection of SEO tools that you might want to explore further:

Conclusion

SEO should be a part of every designer’s thought process and workflow. Developing good habits from the start of each project is easier and more efficient than trying to make a site SEO-friendly after it goes live.

There are many more “tricks” out there as well. But be careful of things that sound too perfect or easy. It can take some time for even the best sites to rise through the Google ranks. Keyword stuffing and SEO cheats and shortcuts are only temporary fixes.

The best thing you can do in terms of search engine optimization is to create and develop a great website with great content. And it does not hurt if you design an architecture that makes it easier for the search engine crawls to find you.

Image Sources: Tagxedo and bennylin0724.

Building CSS3 Notification Boxes With Fade Animations

Thu, 06 Jun 2013 14:00:59 +0000

Modern web design techniques have allowed developers to quickly implement animations supported by most browsers. I think alert messages are very commonplace, because the default JavaScript alert boxes tend to be pretty intrusive and poorly designed. This leads developers down a path to figure out which solutions would work out better for a more user-friendly interface.

For this tutorial I want to explain how we can put together CSS3 notification boxes which appear at the top of the page body. Users may then click on the notifications to have them fade away and eventually remove them from the DOM. As a fun added feature, I have also included buttons where you may click to append a new alert box into the top of the page. Check out my sample demo to get a better idea of what we’ll be making.

Building the Page

To get started, we need to make two files named “index.html” and “style.css”. I will be including a reference to the latest jQuery library hosted by Google’s code CDN. The HTML is fairly straightforward since we just need to create some dummy text within an alert box. And all of the JavaScript has been added into the bottom of the page to save on HTTP requests.




  
  CSS3 Notification Boxes Demo

This is my header code for setting the external documents and the HTML5 doctype. Not very convoluted since we are just building a sample demo. For the notification windows I have setup two different styles – success and error. There are other design styles like warnings and info boxes, however I did not create alternate styles because I wanted to focus more on the effects.


  
  
    Success!
    
    Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.
  
  
  
    Warning!
    
    You did not set the proper return e-mail address. Please fill out the fields and then submit the form.
  
  
  Click the error boxes to dismiss with a fading effect.
  
  Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.
  
  
    New Success Box
    New Alert Box

Each icon image was created from this freebie PSD of flat elements and UI pieces. The icons were vector shapes which I scaled and resized to fit as a checkmark and X error button. If you need a warning/info icon it shouldn’t be hard to update the colors and create your own. The generic class .notify is added onto each of the message boxes. This will generate the box shadow and internal font styles.

Then additional classes such as .successbox and .errorbox allow us to change colors and details within the alert window. You can see this in my demo where the page loads with two existing alert messages. Each of the buttons at the bottom may be clicked to append a new alert box at the top of the page.

CSS Box Styles

I won’t go into too much detail on the CSS resets which are typical in all my other tutorials. I have created a default batch of typography and also centered the wrapper element with an inner #content div. This creates the box area which allows jQuery to append new warning elements at the very top of the page.

/** typography **/
h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  padding: .1em 0;
  color: #444;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
}
h1:before,
h1:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background: #f0f0f0;
}
h1:before {    
  left: -.5em;
  margin: 0 0 0 -50%;
}
h1:after {    
  left: .5em;
  margin: 0 -50% 0 0;
}
h1 > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

p {
  display: block;
  font-size: 1.35em;
  line-height: 1.5em;
  margin-bottom: 22px;
}


/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

.flatbtn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  border: 0;
  color: #f9f8ed;
  text-decoration: none;
  background-color: #b6a742;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  font-size: 1.2em;
  font-weight: bold;
  padding: 12px 22px 12px 22px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
.flatbtn:hover {
  color: #fff;
  background-color: #c4b237;
}
.flatbtn:active {
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}

The website layout is quite simple to keep the effects noticeable. Anybody who is familiar with frontend web development should be able to port over these classes into their own stylesheet. I am using a unique style for the flat buttons to generate new alert box windows. Similarly I have updated the internal styles for each of the .notify class elements.

/** notifications **/
.notify {
  display: block;
  background: #fff;
  padding: 12px 18px;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}

.notify h1 { margin-bottom: 6px; }

.successbox h1 { color: #678361; }
.errorbox h1 { color: #6f423b; }

.successbox h1:before, .successbox h1:after { background: #cad8a9; }
.errorbox h1:before, .errorbox h1:after { background: #d6b8b7; }

.notify .alerticon { 
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

I setup a few default assumptions which work best in my sample layout. Each of the message notifications are limited to a 400px width and centered on the page using margin: 0 auto. Also I have updated the cursor icon to a pointer hand so that users know the entire element is clickable. We need to create a jQuery event listener which performs a function whenever the user clicks to dismiss a notification.

jQuery Animation

My JS codes actually perform two distinct operations. First we are detecting any existing .notify elements which are contained inside the #content div. Once a user clicks on this .notify box we need to fade the box down to 0% opacity with display: none, and then remove() the element out of the DOM altogether.

$(function(){
  $('#content').on('click', '.notify', function(){
    $(this).fadeOut(350, function(){
      $(this).remove(); // after fadeout remove from DOM
    });
  });

If you are familiar with jQuery then this selector may appear strange at first. We are not selecting the #content div but actually looking for any .notify boxes within the content container. If you check out the documentation for jQuery’s .on() method you will notice we have the ability to pass another selector as the 2nd parameter which will update after the page has been rendered. Here is an excellent thread on Stack Overflow which explains this concept in greater detail.

The other piece of my script will check whenever a user clicks on either of the two buttons at the bottom of the page. These buttons are using the IDs #newSuccessBox and #newAlertBox. Whenever the user clicks we stop the default action of loading the HREF value and instead create a new HTML block to prepend onto the page.

  // handle the additional windows
  $('#newSuccessBox').on('click', function(e){
    e.preventDefault();
    var samplehtml = $(' Success!
  You did not set the proper return e-mail address. Please fill out the fields and then submit the form.
 ').prependTo('#content');
  });
  $('#newAlertBox').on('click', function(e){
    e.preventDefault();
    var samplehtml = $(' Warning!
  You did not set the proper return e-mail address. Please fill out the fields and then submit the form.
 ').prependTo('#content');
  });
});

Each function has its own variable containing a copy/paste mirror of the HTML I used for the box items. This HTML content is stored inside a string using the jQuery selector as an object. I can use the method prependTo() and select the content div so the new alert boxes will appear at the very top of the page. All of the new boxes may also be dismissed in the same fashion since their HTML codes are identical to the boxes which are hard-coded in static HTML.

30+ Innovative New jQuery Plugins

Tue, 04 Jun 2013 14:00:59 +0000

Many web developers are jumping into the sea of open source code projects. New plugins and frameworks are released almost every day. And when you are busy at work it can be tough keeping up with all the newest releases.

In this showcase I have put together over 30 different jQuery plugins worth a mention to all web developers. Developing a website interface can be tough and certainly requires careful precision. Developing on top of any open source project means that you are not reinventing the wheel. Plus you’re not the only one left to catch bugs in the code. And since jQuery is one of the most stable JavaScript libraries available, these plugins often work hand-in-hand to provide a seamless user experience.

Responsive Touch-Friendly Audio Player

This responsive audio player is the perfect example of jQuery at work. You simply include the plugin codes and create any typical HTML5 audio element. This will automatically be converted into a touch-friendly audio player with a dazzling CSS3 user interface.

Sidr

I am sure plenty of designers & developers recognize the sliding side menu. This became popularized from iOS mobile applications using sliding menu buttons in the toolbar. And now this effect may be replicated for websites using only jQuery and the Sidr plugin. Check out the live demo and see how this could work in your own projects.

Imageloader

Do you remember seeing all these lazyload image plugins? There are so many various options, and even some free open source WordPress plugins have been released. This particular image loader plugin follows a much nicer example with all images loading in a sequential order, following a fading effect. The live demo is a prime example of how you can apply this to your website.

Swatches

Although Swatches may not have a practical use in many website layouts, it is a wonderful jQuery plugin for toying with specific colors. This plugin will create a div area using a palette of related colors based on your input choice. Generating your own color scheme may be difficult and this is a unique open source tool for the job.

Hot on Facebook

Hot on Facebook is a rather obscure idea. But the plugin does work perfectly in all standards-compliant browsers, so for those who enjoy Facebook sharing this is for you! Hot on Facebook will take a URL and check the total number of FB shares. Then it will be displayed on the page as a social media sharing badge.

Toolbar.js

The open source Toolbar.js script is fairly easy to run, but has its limitations. This plugin will create a small tooltip menu of icon links which appears on any element you choose. It can be immensely powerful coupled with a user profile or other icon-command interface. However the effect is rather obscure, so don’t be surprised if you have a hard time fitting this into your layout.

jQuery PowerTip

As for handling regular tooltip hovers you may consider jQuery PowerTip. This is a fairly new plugin released as open source on Github. You can check out the live demo to see a better example, but the simplest explanation is creating tooltip popup menus when hovering over some HTML element.

jqTimeline

The jQtimeline plugin offers very unique functionality which I have never seen before. You can build a horizontal timeline with date events setup throughout the list. In this way, users may click on an event to display more information. It certainly has its practical uses but will take a bit of custom code to get working properly.

Swipebox

The Swipebox plugin is a mobile responsive jQuery image gallery. This is especially designed for mobile webapps and websites which are made responsive for smartphones and tablets. The image gallery will take up the entire screen, and you can even touch-to-swipe between other images in the slideshow.

MixItUp

MixItUp has a lot of various custom options and I would say this is closer to an intermediate jQuery plugin. You will need to understand a few concepts when customizing the default setup and adding this into your page. But it will allow quick sorting of elements within a set gallery like portfolio items, images, photographs, and so much more.

jQuery Spellchecker

Designers who are familiar with the in-browser spellcheck may be a fan or may completely hate it. This jQuery plugin offers a different solution where you may edit the callback function to display related vocabulary. It is a daring plugin which is completely free to use, but also requires a bit of customization to get working correctly.

ScrollUp

ScrollUp is in my top 5 new favorite plugins just for its ease of use and pre-built styles. Simply include the JS files into your webpage and setup the offset distance from the top. Then after a visitor scrolls beyond this limit a small fixed div will appear in the bottom corner. It is an excellent alternative to coding your own button from scratch.

Nod Frontend Validation

Nod is a frontend validation plugin for HTML input forms. Using jQuery you may setup the actual basis for what is considered good and bad data, then check these values after the user submits the form. It will not go through until all of the criteria are met.

Select2

Select dropdown menus have always been stuck in their own CSS styles. There are some posts online which delve into customizing your own select menu, but often not supported by all browsers. This jQuery plugin Select2 is an enhancement on the typical HTML select field. Just include the plugin within your heading and all select menus can be updated with a small bit of code.

Tooltipster

Aside from the other great jQuery tooltip plugin, I have to recommend Tooltipster for their alternative codebase. I have used Tooltipster in a few projects and it works just as described. Many of the options are so easy to implement, and this allows developers to customize their own tooltips with just a few CSS properties.

Vortex

This strange carousel-style plugin allows you to create a dynamic rotating panel of elements. The jQuery Vortex plugin is fairly new, and there are still updates being applied on a regular basis. However I think it is worth a mention since the techniques are still not as mainstream as you might expect.

iCheck

iCheck is one of the best jQuery plugins I have ever found to update your input fields. Checkboxes and radio buttons will receive a totally new look when you choose the proper skin and color style. I will admit that iCheck is a bit deceiving with so many confusing options at first. But the more you practice the easier it will get to include this plugin within your website(s).

Any List Scroller

ALS or Any List Scroller is a typical jQuery plugin for image slideshows. But instead of displaying the images in a bigger view, they are rotated like a typical homepage items scroll container. There are options to include arrows on both sides and allow visitors to manually switch between internal elements.

Tumbo

Tumbo is a fairly rudimentary plugin for quickly displaying a feed out of your Tumblr blog. This can be updated to display the contents from any Tumblr blog just by using the subdomain URL. Obviously not everybody will have a need for this, but it is good to know that developers are working their way through APIs like Tumblr built into JavaScript plugins.

Spectragram

Speaking of APIs – this Spectragram plugin is a quick method for accessing photos off Instagram. You simply include the JS files into your header and then specify a user or search query. The Spectragram plugin will pull all related results and link back to the original shot.

jQuery Stripe

The jQuery Stripe plugin offers a more traditional image gallery. Each photo will only display as a small vertical sliver which you may click to show the whole image. There are also arrows on the right and left sides to change between views. I don’t think it is the best option but it can be an offbeat solution for atypical website layouts.

SocialCount

SocialCount handles another strange feature which does get a lot of requests. This plugin will allow you to quickly pull out the numbers for Twitter, Facebook, and Google+ shares. Merely enter the target URL and you can display social media badges anywhere in your webpage.

Custom Scrollbar Plugin

jQuery Custom Scrollbar is a fascinating plugin which deserves a lot of attention. This has been online for quite a while now, but the effects still never cease to amaze. You can quickly make a div element with an overscroll feature using these custom scrollbars. It is perfect for handling custom content which should not take up the entirety of the layout.

Smallipop

Smallipop is yet another beautiful jQuery tooltips plugin. You should look at some of the examples to see how this would be implemented. Each tooltip plugin follows its own rules and they may or may not appeal to everyone. But I think Smallipop is a great choice for developers getting started in JavaScript libraries.

jPanelMenu

jPanelMenu is another popular jQuery plugin for using a sliding navigation. You may quickly include these codes within your website to add the effects on any page. Just target the open/close element and whenever the user clicks, it will display your hidden navigation. Take a peek at the live demo to see this effect in action.

Intro.js

Intro.js is an introduction guided tour plugin for jQuery. There are a lot of options and custom settings you may choose, but this also allows for a more unique website performance. I think Intro.js is the best jQuery plugin for creating a guided website tour. The CSS is easily malleable and you can demo with all sorts of different layouts.

Lightbox_me

The list of shadowboxes and lightboxes has grown tremendously since 2011. I think the jQuery plugin Lightbox_me is another beautiful example of this feature. You can setup images, forms, videos, and other HTML right within a modal lightbox. The JS codes are easy to learn and the plugin does not require a whole bunch of custom edits.

jQuery Carousel

I think the abitgone jQuery Carousel is definitely a peculiar option. This will display prev/next links right within the image div encapsulating all of the other images. It looks really nice in smaller spaces and you can resize the example to anything you need. I feel it is worth looking into but it may not come out as your favorite option.

Superbox

Are you familiar with how Google Images currently displays results? This is how jQuery Superbox works using your own static images. Visitors have the ability to browse thumbnails and once they click, a new div will open up displaying the full image. I really like this plugin because the user experience mimics Google very closely. And since people are already familiar with Google it provides a seamless exchange of data without much confusion.

KGallery

KGallery is another beautiful jQuery image gallery with slideshow features. The default icons are not permanent and you can obviously update other bits of the user interface. What really catches my attention is the option to include smaller image thumbnails within the gallery design. It is a fairly simple plugin to setup and I would recommend testing the live demo to see how you feel about the implementation.

jQuery Litelighter

Plenty of great syntax highlighters have been released over the past few years. But jQuery Litelighter is another plugin I really appreciate for the simplicity and graceful nature. You can generate highlighted syntax for nearly any popular language, and it should work using any of the most common web browsers.

bxSlider

bxSlider simply has one of the best user experiences for an image slideshow. You can implement this right onto your homepage or within any other page of the site. It will provide a solid design for users who are familiar with image slideshow features. Also the jQuery codes are very minimalist and do not bog down the website over long loading times.

MeanMenu

The MeanMenu plugin is a newer release and certainly worth looking into. I really like how the default navigation design will automatically resize based on the total number of internal links. Also you can include sub-menu links which offers visitors a quicker view of your nav menu. The design is not a great choice for everybody, however it is a solid plugin and may prove useful on some website projects.

Create a Modal Window Login Form Effect Using jQuery

Mon, 03 Jun 2013 14:00:08 +0000

The hidden modal window technique is a great solution for dealing with interface elements which are not particularly necessary on the page. Social networks can use modal windows for private messages and forms which are only being used by members of the site. This is also true for blogs and magazines which have an author login page separate from the main website. Modal windows are much easier than creating new windows in JavaScript because everything is displayed in the same window using HTML markup already on the page.

I want to demonstrate how we can build a custom modal window based off the jQuery plugin leanModal. The plugin is completely open source & free to use under the MIT general license. I like this plugin more than others because it just gives us the “bare basics” without too much customization. This leaves room to update the modal window via CSS and still utilize some extra parameters in jQuery.

Getting Started

First I have created two files named “index.html” and “style.css” which hold all the demo code. Inside this same directory I’ve created another folder named /js/ which will hold two documents. First is the latest mini jQuery library and second is the leanModal plugin file named jquery.leanModal.min.js.




  
  Modal Login Window Demo

Now it may come as a surprise to learn that we do not need to include any default CSS stylesheet! This is because our leanModal plugin only provides very basic JS functions, everything else is slimmed down to provide a bare template. However we do need to copy over one block of CSS which implements the dark overlay effect. This is copied directly from the plugin website which I added into my default stylesheet.

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

The overlay area will appear at 100% width and height on top of the page. Then jQuery will add the targeted modal div to appear on top of everything else in the HTML. Noticeably my body content is fairly empty, the only important element is the toggle button for displaying this modal window. But let’s take a peek inside the HTML form encapsulated within the #loginmodal div.

  
    User Login
    
      Username:
      
      
      Password:

Note I have included display:none; as a single inline CSS property. We need to force this div to have no display so then leanModal() can make it fade into the page and display as a block element. I am using a very simple form display with similar styles as this CSS checkout form. The light blue design works well in contrast to the darker shadow overlay, plus we can utilize CSS3 transition effects onto the input fields.

One other crucial page element is the submit button. Since this form will not send any data to the server, we just want to hide the modal window once the user submits. I have added the class .hidemodal which we can setup inside the jQuery method. It will stop the default form submission and displays this modal window as a purely aesthetic effect.

CSS Layout Styles

My CSS document contains all the typical page resets we need, along with some of the typography and button styles. The centered login modal window contains a new button style mimicking the other flat design. But thankfully there are not too many unique CSS properties which require a further explanation. You should be able to construct your own modal window styles without much of a hassle.

/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** custom login button **/
.flatbtn-blu { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  border: 0;
  color: #edf4f9;
  text-decoration: none;
  background-color: #4f94cf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  font-size: 1.3em;
  font-weight: bold;
  padding: 12px 26px 12px 26px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.flatbtn-blu:hover {
  color: #fff;
  background-color: #519dde;
}
.flatbtn-blu:active {
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}

I think the key elements to recognize are the containers for the overlay effect and the modal window. I have moved these down to the bottom of the stylesheet, grouped with all the other modal window properties. I have limited the modal window to a 300px width since this example only requires a form with 2 inputs. But remember that leanModal does not force any default styles onto your window, so the design is 100% in your hands.

/** modal window styles **/
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#loginmodal {
  width: 300px;
  padding: 15px 20px;
  background: #f3f6fa;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

#loginform { /* no default styles */ }

#loginform label { display: block; font-size: 1.1em; font-weight: bold; color: #7c8291; margin-bottom: 3px; }

.txtfield { 
  display: block;
  width: 100%;
  padding: 6px 5px;
  margin-bottom: 15px;
  font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
  color: #7988a3;
  font-size: 1.4em;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#edf3f9), to(#fff));
  background-image: -webkit-linear-gradient(top, #edf3f9, #fff);
  background-image: -moz-linear-gradient(top, #edf3f9, #fff);
  background-image: -ms-linear-gradient(top, #edf3f9, #fff);
  background-image: -o-linear-gradient(top, #edf3f9, #fff);
  background-image: linear-gradient(top, #edf3f9, #fff);
  border: 1px solid;
  border-color: #abbce8 #c3cae0 #b9c8ef;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.txtfield:focus {
  outline: none;
  color: #525864;
  border-color: #84c0ee;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
}

Each of the text fields has a transition animation effect on the border and box shadows. Also the text color will fade as you tab between the two inputs. I chose a lighter blue color scheme and matched the button effects to the input fields. There are a lot of CSS3 properties along with their vendor prefixes, so this form is geared more towards newer rendering engines. But it should display properly in all major browsers.

Modal Effect in jQuery

Unfortunately CSS3 is not at a point where we can rely on its ability to hide/show different windows on a click event. And there is no guarantee this will ever be a possibility, either. When it comes to modal windows using a shadowbox effect it will be much easier to stick with JavaScript. Thankfully the leanModal plugin only needs a single line of JS to activate. I have added the following block of code right before my closing tag.

$(function(){
  $('#loginform').submit(function(e){
    return false;
  });

The first small block of code will check whenever the user presses “Log in” and attempts to submit the form. We are using the JavaScript keywords return false to stop the event before it even triggers. You can read more about this method on Stack Overflow. Now the last line of code is all we actually need to get the modal window working.

  $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});

If we do not need to customize any parameters then just the line $(‘#modaltrigger’).leanModal() should work great. However for this demo I want to showcase the 3 optional variables you can pass into the function. First we add the offset value from the top of the window to position this new modal box. Then a value from 0.0-1.0 is used to mark the background opacity level.

And then finally we can attach a new jQuery selector for the close button. This may be a class or an ID, or some mix including HTML attribute selectors. For my example we are using the same class which I added onto the login button .hidemodal. This way the modal window should hide every time you press the submit button.

To get the form actually working you will need to remove this class from the button, and remove the block of JavaScript code before the leanModal() function. Then the form will submit properly and should redirect the user to a new page. But you should try out a lot of different ideas and see what types of content may work well inside a modal display.

Final Thoughts

The modal window effect can be used in far more situations than just login forms. You have to think about various UI elements of a webpage and consider which elements may be more useful in their own window. This pertains to special forms or longer detailed content which is not going to be acknowledged by every visitor.

Please do check out my live sample demo and see how we can implement this leanModal jQuery effect using standard HTML blocks. Anybody with some basic understanding of CSS should have no problem customizing my default styles. There are so many uses for this functionality that it is best left up to the imagination. But I do hope these sample tutorial codes may provide a base template for developers who are looking to save time on their next project.

Tips and Advice for a Design Portfolio Review

Thu, 30 May 2013 14:00:59 +0000

For every member of the design community – designers, photographers and illustrators – the portfolio is an essential tool when it comes to getting new clients or changing jobs.

The portfolio review can be one of the more stressful parts of your career. It can be tough to take criticism and hear things you may not want to about your work. A good portfolio review will make you better and it is just as important to understand how to receive a review as well as give a good one.

Why a Portfolio Review is Important

Portfolio reviews can take place at any point during your career. The first reviews are often early, as a student in the classroom setting, and continue throughout your career.

The portfolio review is a good tool for reflecting on your work. Picking out pieces to show in the portfolio is a good reminder of all you have learned and accomplished, while the review itself should help you grow as a designer. Reviews are typically designed to give you a fair appraisal of your work. While they often unofficially happen when courting a client or seeking new employment, portfolio reviews are best when they do not have other pretext.

Finally, feedback is the key to creative growth. If you are doing the same things you were five years ago, it will be reflected in your portfolio. The goal is to learn and grow as a creative worker.

Case Study 1: What Not to Do

As a young designer, I had a disastrous portfolio review. Granted, I was a little ill-prepared. My reviewer told me my work was just average. She pointed out all the techniques that were dated or trends of the past. She told me my typography pairings did not match and my color palettes were flat. (All of these things were true.)

But the problem, was that she did not offer me any solutions or tips for improving or even really explain why she was so very critical of my work. She did not provide me with any resources for learning. She also did not note a single thing from my portfolio that I had done well or that she liked. (What not to do for portfolio reviewers.)

Needless to say, I did not get a lot from the experience and left the meeting very discouraged. I almost considered forgetting design altogether because the review made me feel like a failure. While a portfolio review can be tough to stomach, you should always leave with some idea of where you are headed next and how to better yourself and your work.

Case Study 2: What Works

Later portfolio reviews helped me become a better reviewer too. My best portfolio review was short and simple. The reviewer examined 15 of my clips and gave me an overall synopsis of the work – she said it was clean, organized and easy to understand but lacked creative inspiration. While this may sound harsh it was true.

She explained that my technical work was great, but the examples lacked that “it factor.”

She then talked about ways to get there – a tweak to the typefaces, pops of color that were more unexpected, losing my attachment to perfect symmetry – and provided a stack of resources to help me. That was the day I became a true designer. It was a conversation that still inspires me today. And that is the perfect portfolio review.

I try to use things things I learned from my review when I work with others. The key is balance. Highlight the good and why it is working. Talk about the bad and offer suggestions for improvement. And make it a conversation. It is not easy for a designer to hear an outside opinion of projects he or she may be very close to (or proud of). And give yourself plenty of time to talk with the designer — a rushed review can lave both parties feeling unsettled.

Example Review

Let’s take a look at the image above and think about how it might be reviewed. Here are a few points the review might try to make:

“Great job here showcasing different fonts for a project about lettering. The examples are clear and read well. Plus your overall headline is easy to read with the image. But how do you feel about the color choices? They feel a little “safe” to me. Did you look at something with more saturation?
“Let’s talk about the type in the background. See how the letters don’t quite, but almost, line up from one panel to the next? The type would have worked better and created less visual chaos if if were all aligned to the same baseline, or were completely off balance with sizing that was not close at all.
“Finally, think about the content and the visuals. You want them to match as much as possible. The big words talk about alternate lettering. The background panels should be more representative of that.
Overall, your design is simple and organized well. If you were going to try this again, look closer at the details and consider jumping outside your comfort zone when it comes to color.”

Tips for Designers

Put your portfolio together like a design project. It should be well-designed and organized. Be honest. As a designer, you need to be ready to show you work (10-15 pieces is normal).
Organize your portfolio with intent. I always put my favorite (and best) pieces at the front and back of the portfolio, with my least favorites in the middle. Make a good first and final impression.
Present the portfolio for review in the same way your would present it to a client or future employer. Have a print and digital version. Many reviews are done online and via tablets.
Don’t argue. Accept communication openly, even if you may not agree with it.
If you are being reviewed, make notes so you will remember information later. And create a great leave behind with your contact information for the reviewer.
Get reviewed often and review the portfolios of younger designers as well. I like to talk about my work annually. I also try to give one review a year. It keeps you involved in the community, up-to-date on trends and makes you better as a designer.

Tips for Reviewers

Be honest. As a reviewer, you must be able to address both the good and bad in a portfolio in a straightforward manner.
Highlight things that work and things that need improvement. Explain why a technique is not working well and offer suggestions to improve it.
Don’t argue. The review is designed for a designer to get an honest evaluation of his or her work. Don’t get into an argument about techniques or theory.
Understand the level of the portfolio you are reviewing. Is it from a student, mid-level career designer or someone with years in the business? Tailor your comments to that person.
Provide resources. If you are reviewing a portfolio that does not use color well, give the person a reading list, online community or training information.
Get reviewed. Being reviewed regularly is the best way to stay fresh and maintain perspective on the review process.

Join a Portfolio Review

Get involved in a portfolio review. You can make arrangements personally or join a national group.

Portfolio networking sites such as Behance and Dribbble are great for connecting you with other members of the design community and helping to partner with someone for feedback. You can get feedback on your portfolio 24 hours a day, 7 days a week online or join live groups in various communities all over the world. (A combination of online and live portfolio reviews can be a fantastic resource and experience.)

Find and join a Dribbble meetup near where you live. Behance is sponsoring in-person portfolio reviews May 13-20, 2013, in locations worldwide.

Design Shack also has a community made up of designers and creatives, where you can rate and save designs for an unofficial, quick review. Learn more about membership.

Conclusion

As designers, we need to take part in portfolio reviews to grow and evolve. And we need to help other designers by providing honest feedback in the review process.

While the process can be painful, it does not have to be. With honest, straightforward and open communication, designers and reviewers can share and critique work in a positive environment. Remember to be aware of each others’ feelings and offer advice for improvement as well as complimenting work that deserves appreciation.

Image Sources: kodamapixel, VFS Digital Design and scuolafotografia.

Design Dilemma: How Do I Fire a Client… Legally?

Tue, 28 May 2013 14:00:38 +0000

Sebastian M. writes: My client has turned my latest project into a nightmare. At this point, I just want to walk away but I’m afraid they’ll sue me for ruining the project, which has a ridiculous deadline (although they keep delaying it with change after change and all for a flat fee)! How do I get out of this clean and legally?

This is a common problem (just glance at some of the things clients demand on Clients From Hell) and most designers just suffer through and swear they will walk out the next time it happens… but rarely do. There are, however certain things you can do to end a project cleanly and not worry about retaliation. Join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

Sebastian, you don’t mention if you have a contract or got a deposit for the project, so let me answer both situations, of no contract/deposit and where you do have both, just for the edification of the readers who may have the same problem.

Contract and Deposit

Okay, you have a contract and a 30% to 50% deposit on a flat fee project. Is there a codicil for excessive changes? There should always be one that lays out how many changes are allowed and at what point in the project (i.e., changes at sketch stage only and further extraneous changes charged at a set hourly rate). When a client starts racking up hourly charges for changes because his/her friend who owns a computer doesn’t like the layout, they think twice about trusting you a bit more or will argue the fees and refuse to pay them. That’s your first chance to sever the relationship.

“You will find that a difficult client will give you several opportunities to walk away due to unreasonable requests.”

If your contract doesn’t specify a set amount of changes, you can take the professional avenue and inquire why the client wants the changes and be ready to defend your design choices. If they insist on further changes, just tell them it will cost them an hourly rate. They will argue and that is another chance to sever the relationship.

You will find that a difficult client will give you several opportunities to walk away due to unreasonable requests. But what of the deposit payment, They will undoubtedly ask for that back. It is up to you and your contract to make it clear they have already spent the deposit or negotiate a return of some of the money if you haven’t met another milestone payment (i.e., another 25% after sketches are approved for the next stage in the project).

The client refusing to pay for changes, even in court, will be looked upon by most judges as breaking the agreement, whether written or not. I should mention, however, that it behooves the freelancer or studio to have a contract term that has an escape clause and outlines if any of the deposit is to be returned. You can find some great, free contracts at docracy.com. Most have such agreements written in.

No Contract and No Deposit

When you don’t have a contract (and 39% of freelance designers report they don’t), you can walk away at any time. What really hurts is all the work you’ve done without being paid. It’s always best, contract or not, to try to talk some reason into your client. Explain the situation and why the scope creep of the project will cut your rate to a point where you won’t meet your basic minimum financial needs.

“Better to run from crazy as soon as you see it!”

Gently go over how excessive changes are not the norm of the process and that you are a professional who will give the client what they need to succeed and the changes being made are diluting the effectiveness of the web site, brochure, ad or whatever it is you are designing.

Naturally, some clients just don’t get that and walking away from a job and payment for your time hurts. Think of it this way — you will spend even more time futzing around with the project and client and chances are, you will have to fight in the end to get paid your entire fee, or at all. Better to run from crazy as soon as you see it!

Don’t Borrow Trouble

Maybe it’s just my many years of experience but I can see a red flag from the first phone call a client makes or email that I receive. There’s something that’s just not right in their words and reactions. If you see a lack of respect in those words, you can expect more of the same once the project has begun. Here’s a few red flags that should send shivers down your spine:

The client won’t talk about the project, insisting they want to do it all face-to-face (or Skype-to-face, which is less of a hassle and time and gas-waster).
He/she uses the word “opportunity” before discussing the project.
You show up to the office and it’s a disorganized mess. The project will be run in a disorganized manner, too!
The client disparages previous designers he/she has worked with.
You’re kept waiting more than twenty minutes after your appointment time.
Common manners seem to have not come into the office that day.
The discussion of money keeps being put off while the client talks about how great he/she is and future design “opportunities.”
He/she uses a lot of design jargon but not correctly.
The client keeps telling you how certain parts of the project won’t take more than five minutes when you know it will take hours.
You are asked to do a “test” by designing a few “directions” first.
The client tells you they don’t sign contracts.

If none of these pop up, keep in mind that you need to write up a firm and all-inclusive creative brief. Along with a contract, this will spell out all terms, schedules, accepted changes, milestones and pinpoint the client’s desires and direction for the project’s results. If the client skips past describing his/her visual ideas for the project, saying “I’ll know what I like when I see it,” then you should run — run quickly!

Send Us Your Dilemma!

Do you have a design dilemma? Speider Schneider will personally answer your questions — just send your dilemma to dilemma@designshack.net!

Image ©GL Stock Images

Creating a Portfolio With the All-New Dunked

Mon, 27 May 2013 14:00:46 +0000

As a designer, I am often overwhelmed by creating a portfolio. I want something that is simple, easy to navigate and showcases a variety of work, including print and digital projects.

I should also be able to update the portfolio easily and don’t particularly want to fool with the hassle of coding. Dunked is the new portfolio solution that meets all of these needs and more. Let’s take a look at it today.

What is Dunked?

Dunked is a simple solution for building an online portfolio Designers can use it to showcase a variety of projects, including print or digital, with varying levels of description. Founder Orman Clark, who is known for his work with PremiumPixels and WordPress themes at ThemeZilla, created Dunked as a simpler solution to online portfolios. We asked him for his motivation behind creating Dunked:

And that’s where this super-simple tool comes in. Portfolios are easy to build and are completely customizable. It’s the web app that makes portfolio building a breeze, and is especially easy for those designers out there who don’t want to think about code. You can actually build and publish your portfolio in an afternoon. (It’ll actually take you longer to choose your portfolio clips, than build a Dunked site.)

The grid system is nice and the layouts are fully responsive, a must in today’s ever-increasing mobile marketplace. The response from the design community has been good as well.

“Feedback so far has been amazing, we really couldn’t have hoped for any better,” Clark said. “We’re still finding our feet and smoothing out some rough edges, but it’s been blast to work on and there’s plenty more to come.”

Getting Started

Creating a portfolio really can’t get much easier. After you sign up for a free account and log in, the interface is simple to use. (The only chore is making images to represent portfolio items.)

Start by adding project files. Each project can include one or more images or embedded content, such as video or audio (and everything works seamlessly with YouTube, Vimeo and SoundCloud). Projects can include as much or as little description as you like, along with links back to the full work elsewhere. Dunked is optimized for retina displays, so that all of your projects look crisp, clear and amazing on any screen.

Add multiple pages using the “Add Page” tool, for sections such as “About Me” or “Contact Information”. Each page will populate as a link on your homepage and perfectly matches the style of the portfolio.

Once you have the basics set up, it’s time to play with all the custom options. Upload your logo, favicon and copyright information. Play with colors and fonts (you can alter just about anything on the screen). Choose which options show on the homepage and see a preview of it all while you work as the site refreshes live while you work.

And if that’s not how you like to work – say you are more into working with code – switch over to HTML mode and edit or customize the CSS as you work.

Key Features

We all know what makes or breaks every new tool is the range of functionality on offer — Dunked has you covered:

I love the ability to create a custom Dunked URL. (I use my name for these things, but it can be pretty much anything.dunked.com.) Plus, Dunked will offer custom URLs soon for users who have their own domain name.
Responsive templates. The site you create on Dunked is fully responsive. (As I was building a portfolio, I found that it looked better on mobile than any other tool I have tried.)
Customization options are pretty endless. You can play with fonts and sizes and colors all day long, making it easy to make your Dunked site your very own.
Custom CSS editing. While coding is not a prerequisite for using Dunked, coders can take advantage of custom coding features. You can edit and customize the CSS as you work in an HTML window that pairs with the actual site design.
Drag and drop ordering for projects in your portfolio is a great little feature. Once you set up projects, you can move them around via drag and drop. (This is a great way to highlight specific projects at certain times.)

Pricing

Dunked is free. And Clark promises that even if a pay model evolves in the future, a free plan will be available and include every feature that is currently available to beta users. Dunked is continuing to evolve with feature updates and a little smoothing of the edges. A new template, which is in development, will also be available soon.

Clark said they are also looking at user feedback for future feature updates:

Conclusion

What’s really appealing about Dunked is ease of use. This is one of those tools that can save designers a lot of time and hassle when it comes to creating and maintaining an online portfolio. It is different from other portfolio tools in that every site created is fully responsive and supports retina display right out of the box.

“When we set out, I felt we could offer an online portfolio solution which would be both beautiful and ridiculously easy to use,” Clark said. “I honestly believe that we have delivered on that goal. We’ve got no interest in becoming a jack of all trades type application; simplicity is at the core of everything we do and we’re focused on one goal. If you’re into simple, Dunked is for you.”

It will be fun to see the evolution of Dunked and what features are released next. Clark said Dunked is looking for user feedback and would love to hear your thoughts. In the meantime, we’d love to see projects you are working on. Share your Dunked portfolios in the comments.

Dunked portfolios: Christopher Boutille, William Orrock, Hugo Design, Jessica Fortner and Chris Francis.

Pinterest for Designers: Using It to Your Advantage

Wed, 22 May 2013 14:00:58 +0000

Design inspiration is all around us. And every day there are new tools popping up to help us collect and share that inspiration. One of those great tools is Pinterest. The image collection platform is a fantastic source of design inspiration, from typography to print, web or packaging design.

Newer additions to the service, such as boards for business and hidden boards make the tool even more useful. Haven’t gotten on board with Pinterest yet? Not sure how to make it work for you? Read on.

Getting Started with Pinterest

Pinterest is the pin-board style social sharing site made popular by brides-to-be and crafters. But it has even more potential for designers. There are two ways to use Pinterest – as an individual or as a business. Designers can benefit from either application.

Individual pinners can put together and collect inspiration using Pinterest boards to save items and group them in ways that make “work sense.” (Personally, I have boards for color, typography, web design, print design, inspirational phrases, design gadgets, software tips and even a board dedicated to ampersands.)

In addition to using Pinterest for inspiration, it can be a great way to show off your work as well. By using a common platform – unlike designer-specific tools such as Behance or Dribbble – you can make your design work accessible to more people who may not see it otherwise. (Just think of the client potential from a pin that gets shared thousands of times.)

Using Pinterest as a Portfolio or Business

Whether you use Pinterest as a place to gather inspiration or to help promote your work, you should do a few key things.

First, get verified. You want your Pinterest boards to link back to your website. Pinterest gives you a little bit of code that links the sites. Your profile will then be noted with a check next to the website and name.

This is important because it establishes you as who you claim to be and gives other pinners a way to get to your site – with contact and other relevant information — if they like your work. The only real limitation is that there can be only one verified website per Pinterest account. You can verify your site in one of two ways – with an HTML file upload or by using meta tags. Log in to Pinterest and grab your custom code to get started.

Determine how you want to use your images. Specifically, should they be watermarked or not. Many designers are opting to watermark images before pinning so they can’t be copied, downloaded or reused. Others prefer to check up on pinned content regularly. You can keep up with everything being pinned from your website with a simple URL: http://pinterest.com/source/YourWebsite.com/, replacing “YourWebsite.com” with your domain.

Creating and Using Boards

After you determine how you plan to use Pinterest, you need to create boards.

Make them searchable (and findable) by filling in all of the relevant information when you create a new board. The more information you provide, the easier it will be for other pinners to find you, and it can even help when it comes to SEO. Individual pinboards generate a unique URL based on your username and the board name.

The best pinners pin a mix of items.

Consider the types of boards you create as well. The best pinners pin a mix of items. I recommend using the same account for inspiration and to show off your work so that you have pins that include variety and you don’t just pin items that you created. Your account should have an identity – are you a serious pinner, or fun, only design-focused, or more of a mash-up? Think of Pinterest as an extension of your brand (personally or professionally) and make sure what you are pinning emphasizes that.

Start by completing your profile fully. This includes a photo – use a high-quality image, preferably the same one you use for other public social media profiles – short description of who you are, location, website address and linked Facebook and/or Twitter profiles.

Then follow a few boards or people for inspiration. If you are using the account professionally, stick to things that relate to your company or business.

Pin following the same guidelines. Create a profile that reflects the personality and your personal and business likes. Make sure pins are professional, high quality and link to original sources. (Beware of spam pins and avoid repinning them.) As you pin, make sure to describe pins and add appropriate hashtags and mentions. Even when you repin, edit descriptions to fit the style you want your boards to have. These terms contribute to how your pins come up in search — the better the description, the more searchable your pins.

Make the most of hashtags and tagging.

Make the most of hashtags and tagging. Avid Twitter users are accustomed to using hashtags to keep up with certain tops and @ mentions to connect with other users. Hashtags and mentions work the very same way on Pinterest. Use them to connect with other similar users, including them in pin board descriptions, descriptions of actual pins and in commenting.

Arrange and design your Pinterest boards. Pinterest will assign a default image to each of your boards, but you will add more value to your profile when it is viewed by others if you set custom images for each board. Choose images that fit in the space and are readable at a small size. Try to avoid images with lots of words or multiple small images. Some pinners have even used individual boards as tiles to create one large image, although this concept has fallen out of fashion and rarely works as intended because of the way Pinterest panels expand to fill the browser. Regardless of which route you choose, board cover photos are the gateway to your page.

Pinterest Image Specifications

Once you start pinning, think about how your images will look. The ideal pin is 600 pixels wide because that’s the maximum width at which pins are viewed in Pinterest. Pins are viewable at any depth but avoid pins that are too deep because they can be awkward for users to look at and read. The smallest size pin that Pinterest will recognize is 80 pixels wide.

Pinterest thumbnail images are 192 pixels wide. Your Pinterest profile photo is 49 pixels square resized from 160 pixels square. The thumbnail for each individual board is 222 by 207 pixels.

Text descriptions for each pin can only be 500 characters. Opt for shorter descriptions; you want people to read them quickly.

Great Boards to Follow

There are thousands, maybe even millions of great boards out there. The best boards are updated regularly so that new items (and new inspiration) shows up in your feed regularly. Design Shack put together a list of 200 great boards to follow last year.

Plus we’ve put together a new assortment of great boards rom design-minded Pinterest users to follow for a daily dose of inspiration.

Typography

David Schewn‘s Typography, Veronica Blaylock‘s Free Fonts, Joy Cho‘s Typography, Leah Den‘s Letters and Numbers, and Laura Bolter Design‘s Words of Wisdom and Nice Type.

Print Design

Leah Dent‘s Margins and Columns, Sarah Jones‘ Design, Kayla Meyer‘s Flyers + Posters, Hazim Al Radadi‘s Identity & Print Design, and Emma Farley‘s Magazine Covers.

Web Design

Violeta Patolova‘s Web, aDONNAdesign‘s Web Design Tips, Dan Otis‘ UI Inspiration, Amanda Hawkins‘ Web Portfolio, and Paula Cevasco‘s Web Design.

Package Design

Violeta Patolova‘s Package Design, Blair Thomson‘s Packaging.Love., Ophella Quixote‘s Design and Packaging, The Cool Hunter‘s Graphic Design/Packaging, and Kristina Miletieva‘s Packaging Design.

Color

Sarah Jones‘ Colour Schemes, COLOURlovers‘ TEALlovers (or any of the other colors), JM Necheles‘ Color, Pantone‘s Everything Pantone, and Isabel Moises‘ Color Inspiration Palettes | Mood Boards.

Logos

Rinee Shah‘s Logos, Mike D‘s Badgography, Carolina Beiertz‘s Great Logos, Manuel T.‘s Hipsters Logos, and Graham Smith‘s Logo & Brand Identity.

General Inspiration

Warren Design Group‘s Creative Corner, Oen Hammonds‘ Design Inspiration, Pam Chien‘s Gifted Graphics, Sean Booth‘s Graphic Design, and Adobe‘s Creative Workspaces.

Conclusion

Pinterest is a great tool for gathering, organizing and viewing images. It’s not just for weddings and foodies with more designers, joining the ranks of Pinterest users daily and because of the popularity of the platform, it can be a great tool to help you to promote your work.

Remember Pinterest is a visual medium. Make the most of it.

Are you on Pinterest? Follow me or Design Shack and share your boards in the comments.

How to Choose Effective and Attractive Icons in Your Designs

Mon, 20 May 2013 14:00:42 +0000

Icons can be considered one of the universalities of web design; almost any website benefits from the addition of at least a few of them. So it’s tempting to assume that if you sprinkle in a handful of these little pictures, your job is done. But there’s a lot more to it than that: good icons should feel like they’re visually integrated into the group of images that they’re in, as well as into the site design as a whole. They need to have a conceptual clarity and purpose that goes beyond being mere eye candy. Any icon that doesn’t serve a stated purpose, or doesn’t convey the right concept in its imagery, is one that needs to be reconsidered.

Of course, there’s room for interpretation and generalization with any kind of imagery, but icons are not mere illustrations that are used purely to break up space and add interest: they’re visual metaphors that can invest meaning into a subject at a single glance; and as such, they’re a powerful tool for improving user experiences.

How Should You Use Icons?

Iconography can be a slippery subject, because it encompasses so many types of imagery, and can fulfill so many roles. Icons can be used for many purposes, but the two most common and important tend to be:

Visual breaks in content: making it more appealing and readable. This application is often used in the body of the website, in lists (as seen above) or other text-heavy elements.

Quick visual reference for a concept: This usage most often shows up in navigational elements (as seen above), and some—such as the magnifying glass icon that signifies a search—are so common that they don’t even need a text identifier.

It’s obvious that even just these two categories make for a myriad of ways and reasons to use icons, so you’re likely to see them in almost every element of web design: headers, footers, navigation bars, lists; practically any part of a design can be improved by the addition of well-chosen icons.

What Makes a Good Icon?

While it’s not difficult to see how icons are an essential component to almost any good website design, it can sometimes be hard to recognize when they’re not performing as well as they could be. Even a poorly-designed set of icons is usually preferable to a wall of text, but a beautiful set of meaningful icons, like the ones above, can do so much more.

Even though icon design is a complicated topic that changes with every new situation, there are still a few essential rules that apply to effective icon design across all applications: the two critical things to consider in any icon system are how to make icons both visually and conceptually effective.

How Do You Make Icons Visually Effective?

Icons do a better job of grouping related content and leading the eye to important information if they have consistent and considered relationships to the other icons in the set and to the site design around them.

Icon Sets Should Have Visual Unification

A group of icons that doesn’t have enough cohesion looks wrong, no matter how great they might be when considered individually. There are a lot of tricks that can create a sense of unity, including:

Using the same color or color scheme, as seen above.

Fitting all your icons into the same shape, as seen above.

Styling your icons with or without lines or other border attributes, as seen above.

Adding effects, such as gradients, transparencies, or drop shadows, as seen above.

To this end, it’s important to consider how you’ll adapt the style of your illustrations to fit the subjects. For example, you might want to represent your icons with a 3D effect, on an angle. But what if one of the icons in the example above needed to represent a gift card? An icon representing a card would almost certainly need to be two dimensional and so would ruin the effect that you’re going for.

The Larger the Set and Scope of Icons, the More Diversity They Should Have

Although icons within one set should have a close conformity, you can bend and even break the rules when it comes to large sets of images. This website, seen above, is an excellent example that deals with the same-dimensionality issue, as they decided to embrace the different dimensionalities of its icons. The differences aren’t jarring because the two types are separated, making them into related icon systems that work well together without looking exactly alike.

On top of these small changes, the site diverges even more in the other icons you encounter, with some that have larger and more intricate shapes, and others that replicate the 3D effect, but in an entirely different style. However, these all still work well together because they preserve a few common elements, and they’re presented in instances that are separated enough to not overwhelm the viewer.

Icons Should Harmonize With the Rest of Your Site Design

Of course, there is an endless number of methods you can use to make your icons work with your other design elements. But on a basic level, the two most effective ways to go about it are:

Icons as a point of contrast against the rest of the site: This approach is particularly effective if the icons are navigational, like these social media links (seen above), because the contrast calls a lot of attention to them.

Styling icons so they’re integrated with and similar to other design elements: This is a good option for images that are more about providing visual respite and clarity, and don’t need the extra emphasis that navigation elements might, as seen above.

How Do You Make Icons Conceptually Effective?

It’s important that icons play the right role in directing attention and adding to the aesthetic of a design, but it’s equally important that they are also logical and consistent in terms of the concepts that they communicate.

Icons Need to Be Easily Understood

On the one hand, imagery can be difficult because interpretations are never absolute. But on the other, they’re far more manageable than words, because if they’re clear enough they can transcend language. The simple directives in which web design abounds are the perfect vehicle for universal communication, as seen above.

But sometimes designers try to put more complicated concepts into iconography, and the effect is confusing rather than clarifying, as seen above. In these circumstances, it’s good to take a step back and really try to distill the content down to its basic essence. If you can’t, that means an icon isn’t the right solution for that content. One of the best resources for finding clever iconography that pushes the boundaries of pictorial communication is infographic design, where the goal is often to make an icon out of every piece of information possible.

As web design grows and matures exponentially, so does icon design. Concepts that were once impossible to depict through iconography are rapidly becoming standardized, and being added to the web designer’s communication tools. With this push towards universality, it’s a safe prediction that icons will become an even more important part of design than they are already. And keeping these essential methods of use in mind, you’ll be able to take them on with all the artistry and clarity that’s needed to create beautiful, functional, and effective designs for any project.

Are You a Right-Brained or Left-Brained Designer?

Fri, 17 May 2013 05:06:23 +0000

Colors, pictures, creativity; designers are quite obviously a group of people that tend to gravitate towards using the right sides of their brains… right? Or is this simply a stereotype that doesn’t necessarily ring true?

Is design exclusively artistic talent put to productive use or is it possible that the industry is equally full of analytical problem solvers? Let’s take a look at how designers think, whether you’re a right brainer or a left brainer, and how I’ve struggled through being a left brainer in an industry of right brainers.

Fact or Fiction?

As you no doubt have heard countless times, there’s an old half myth, half truth theory that a person can either be left or right brain dominant based on the characteristics of their personality.

Left brain dominant individuals, it is said, prefer analytical thought, logic and reasoning while the right brain folks are creative and focus on the finer things in life such as art and music.

source: jvleis

Often, the importance and literal nature of this theory is taken much too far by wannabe psychologists, which I am not. However, this concept of a person possessing a tendency to lean towards one of these two modes rings true for a great number of people, including myself, so we’ll run with it for this article.

Just know that the whole right/left brain thing is a useful construct for discussion, and is not necessarily backed scientifically (cognitive scientists say it’s bunk). So if you’re into neuroscience, forgive my indiscretions.

I’m Right-Brained, Right?

You don’t know me, so I’ll tell you about myself. I’m a designer, musician and photographer. A strong sense of aesthetics is one of the things that I consider a core element of my personality and character. It’s who I am.

“A strong sense of aesthetics is one of the things that I consider a core element of my personality and character. It’s who I am.”

Now, I ask you, am I a left brainer or right brainer? The answer here is an obvious one. We look up at the chart in the previous section and immediately assume that I’m a right-brained individual. All of the things that I love and pursue in my professional life are seated neatly into that category.

Left of Creative

You would think that, you lucky right-brained bastard. Unfortunately, and trust because me because I’ve struggled with this identity crisis for the better part of my life, it’s not true.

source: Richard Eriksson

To be honest, I’d love to be a right brainer. I’d kill for the chance to be one of those individuals who secrete artistic talent from some special, hidden Van Gogh gland. The truth is though, I’m simply not.

Designing With the Left Side of My Brain

So why in the world would I claim to be a left brainer when I’ve structured my life around right brain activities? Maybe I’m a poser, or maybe designers don’t fit into the little box that you try to keep them in.

I ❤ Problem Solving

At heart, I’m an analytical thinker. Problem solving, language, puzzles, logic; these are the things that really interest me. Beyond that, they’re the things that I’m actually good at.

“Every design is a problem to be worked out, a puzzle to solve.”

Interestingly enough, these are the skills that I bring to a design project. Every design is a problem to be worked out, a puzzle to solve. Just read through my articles on this site and you can clearly see that this is how I think.

An analytical look at how to solve some common design problems.

I talk about design theory, I communicate simple and practical principles that you can use to improve your work, I analytically critique designs and suggest how to make them better. What I rarely or never do is start with a blank piece of paper and let you watch me create some amazing work of art right out of my head.

As much as I love it when people call me “creative” and as wrapped up I am in that as a part of what makes me who I am, I’m not sure that’s it’s an entirely true statement.

Layout, CSS, & Sass

This idea makes more and more sense when I think about the specific areas of design that tend to interest me. I love discussing page layout, mathematical grids and common design patterns. Sounds pretty left-brained doesn’t it?

One of my many, many articles focusing on layout and/or CSS.

Further, my favorite part of web design is CSS. I love the ridiculous nature of making pretty pictures through writing code. True right-brainers might shutter at the thought. Even better, I love using tools like Sass to turn CSS into a sort of faux programming language that’s even more mathematical and logical.

Photography Too

This same argument can be applied to all of my creative ventures. Take photography for example. For me, photography is all about tinkering with my camera. I love the challenge of juggling shutter speed, aperture and ISO to create the perfect exposure and using ideas like the rule of thirds to crop an image in a well-balanced manner.

Dirty, Ugly Jealousy

I’ve come to realize that this is the true nature of my love for creative ventures. Do I find identity and comfort in this realization? Sure. Now, do I envy and hate all you truly creative people? Absolutely.

“I often feel like I’m a left-brained spy, hidden in an industry full of right brainers…”

I often feel like I’m a left-brained spy, hidden in an industry full of right brainers, hoping he doesn’t get found out. Some of you crack open Photoshop or pick up a pencil and absolutely amazing things fall out.

Guys like Fabio Sasso from Abduzeedo piss me off to no end with all of their talent and creativity. I see all you jerks on Dribbble who can sketch the craziest things and I curse your names, coveting your skills and shunning my own.

In reality, this is a classic “grass is always greener on the other side” scenario. I think (hope) my situation of being constantly jealous of the talent of my peers is pretty typical for all types of designers.

Which is Better?

So when it comes down to it, which mode of thinking is better for designers? If could choose to be left or right-brained, which would you be?

Here’s the catch: This is the wrong question. What you should be asking is, which are you? The truth is that the design industry needs both.

“Creativity can be chaos, analytical problem solving can be boring, it’s when they come together that great design truly takes place.”

Some clients want you to think outside of the box. They want a truly creative, original product that catapults them to fame and fortune. Others, are simply looking for an attractive way to display some information. They don’t want or need someone who’s going to reinvent the wheel and attempt to launch some major paradigm shift. They just want a dang website.

Creativity can be chaos, analytical problem solving can be boring, it’s when they come together that great design truly takes place. The mixture of how these forces work together is different of each individual.

Your challenge then isn’t to attempt to be something that you’re not, but to identify how you work best and leverage those skills to be a successful designer.

So What?

Is this all a pointless intellectual exercise or is there a point here? Don’t worry, here’s where it gets practical and applicable.

Given the knowledge that I’m primarily a left-brained designer in my thoughts, actions and interests, I can construct a basic pattern or process that tends to lead to success (in itself a very left-brained thing to do). Here’s what I came up with:

Observe, Absorb, Remix. We left-brained designers constantly observe everything around us from a design perspective. What works, what doesn’t and why. We notice trends, follow what’s popular and think about how things are built (fonts, CSS effects, etc.).

All of this takes place, nearly without our intention. It just happens. We take it all in, absorb it and file it away deep in our brains under the “design inspiration” category. Then, when it comes time to design something, we pull from that file, remixing and reworking all of those ideas we’ve been absorbing to create something that’s original and useful.

The Other Side

Compare this with how right-brainers work. Right-brainers require less input per output (or perhaps their input is just more varied, it can be anything). They have this natural, innate ability to create something amazing and truly unique using only the tools available to them and the head on their shoulders.

source: Ian Norman

A sample right brainer process might be to shut out all distractions, silence their web connection, crank up some music and crack open an empty sketchbook. That’s not as concise as “Observe, Absorb and Remix” but by this point in an article my cleverness is waning, so cut me a break.

How Do You Work Best?

Right brainer, left brainer, it doesn’t matter. If you’re a designer, odds are you’ve struggled a time or two with the creative process. You get stuck, used up, the Van Gogh gland has shut down and you’re not sure how to get it working again.

In those instances, think about how it is that you work best. To do this, consider whether you’re the fantastically creative type of designer or the analytical problem solver, then approach your project with this information in mind, constructing a workflow that caters to your specific needs.

Now that I’ve got you thinking, leave a comment below and let us know which description fits you best. Are you a gifted problem solver or a creative genius? I want to know!

Awesome cover photo provided by Bigstock.

Design Dilemma: Dealing With Professional Jealousy

Wed, 15 May 2013 14:00:32 +0000

Diane L. Writes: I can’t help but feel jealous of other designers. I feel like they’re better designers, they have better clients, they’ll become famous and I’ll be a nobody forever. Is that wrong?

Yes, Diane, it’s wrong, but human. It’s not a feeling that is limited to just designers but it’s something you really need to overcome. Maybe some real truths about the design industry will help you see that jealousy is not only unwarranted but is getting in the way of your own success. Hmmmm, where do I start? Join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

What is “Fame?”

I wrote two articles about dealing with this problem. One, entitled “Do You REALLY Want to be a Design Rock Star?” was a look at why designers crave recognition as part of their work in the industry and “Who Are You Trying to Impress?” which was a personal look at why I fell into the same trap and how I healed myself from such a time-wasting, psychological problem.

I highly suggest you read both as I’m told they have changed people’s lives and how they look at the design industry.

Just to outline some important points, to ease your mind before you find the time to read the articles, here’s why you may feel the way you do:

Every human wants to be recognized as a part of society. We adore athletes, musicians and actors and wonder why, as those who create the posters, T-shirts and other materials, why we don’t share a certain amount of notoriety along with those “stars.” The simple answer is that while people remember the products we create, our names are not listed on them. Our names are not important… it’s just the objects we design that people respect and remember. It’s a quiet pride we must take in our work.
I used the term “design rock star” in the first article to poke fun at the ridiculous label being given by someone tweeting speakers for an AIGA conference. Each tweet promoted another speaker. “Join design rock star, Joe Blow, at the AIG conference next week!” We’re not rock stars and will never be. Get used to it!
If you ask the average person who Paul Rand was, they will answer he’s a politician. They don’t know about the great designer Paul Rand because while his designs were inspirational to future designers, it is designers who elevated his name in our industry and not general society. Sure, your work may be viewed as great by other designers but what does it mean in life? We design because we love creating. Is fame the reason we enter the field?

Time to Get Back to Earth!

As with you, and me, and every other designer, there is an ego we have that drives us to crave recognition from peers and that becomes a dangerous obsession. Here’s an excerpt from one of the articles:

Think about how you run your day, as you would plan a design project. There’s no time to waste.
How much time do you spend commenting on other designer’s work? How much time would that add if you used it for your own promotion?
Do you blog about other designer’s work or your own? Shouldn’t your social media efforts be aimed at getting clients?
Do you look at other’s designs and think, “I wish I had done that!” and feel jealous or do you take a lesson from the creative thought and apply it to your own work?
Do you attend design events and skip business-networking events? How are you going to network with the RIGHT people?
Can you not care what other designers think about your work?
Can you be happy for what you have?

I’ve held some very high-profile positions in the design industry. I’m happy to say I had learned my lesson about false pride before gaining any of those positions.

A designer once told me, referring to my experience, that she couldn’t believe I was speaking to her like I was a friend. The fact is, we became good friends. My experience was more being in the right place at the right time. My friends lovingly call me the Forrest Gump of the design world. As I tell students who show the same starry-eyed admiration for my experience (which is not my actual design abilities), “you will have my experience as you grow, so don’t look at me with admiration. Look at me as your own future.”

In Conclusion

There is a peace you’ll find once you no longer care about fame and admiration. You will no longer care about other designers nor will you care what they think about you.

There are only two parties that should care about your abilities as a designer; your clients and you. If you can make that your primary concern, and use the time you would spend worrying about other designers and put it into improving your own business, you will start increasing your income and that sure as hell makes anybody feel better about themselves!

Send Us Your Dilemma!

Do you have a design dilemma? Speider Schneider will personally answer your questions — just send your dilemma to dilemma@designshack.net!

How to Build a Brand Bible & Visual Style Guide

Mon, 13 May 2013 14:00:49 +0000

Every brand, from the smallest website or startup, to corporate giants such as Nike or McDonald’s, need a set of branding guidelines and rules to maintain their identity. This document, which can range from a couple of pages, to several hundred, is the thread that holds together what the public sees from a company.

A brand bible establishes the voice and personality of a company, as well as who the public will see, and it governs every aspect of communication from the company. The brand bible is the basis for all interactions on behalf of a company – personal communications, social media, advertising and design. While a brand bible focuses on many things, we are really going to look at how it affects design.

What Is a Brand Bible?

A brand bible or book is a document that establishes distinct guidelines on how all aspects of a company’s brand will be handled. It should establish rules for creating a unified and identifiable presence for your brand. This includes everything from the design of a logo and how it can be used, to letterhead, the look of a website, personal communications and how it all looks.

The brand bible is meant to help employees properly use and communicate the message of a brand. It outlines brand goals and the company philosophy. Further it answers a few key questions: What is the correct spelling and use of the brand (and afflicted) names? What images are associated with the brand and product lines? In what ways can/should the company logo be used? What are people allowed to say about the brand? What marketing tactics are preferred or encouraged versus what marketing tactics should not be used?

It also serves as a guide for designers. A good brand bible outlines all of the basic design tools that are needed to create and disseminate company communications – from allowable typefaces and styles, to a color palette, to image use, text and tone, and the emotion portrayed by the brand.

Logo Usage

Once you have the perfect logo, it is important to maintain the integrity of it across platforms. This includes how the logo is to be used, from placement to acceptable alterations.

Adobe’s 2010 Brand Guidelines do a great job of defining exactly how the logo can be used, outlining placement, size and surrounding white space. Remember, your logo is the simplest thing people have to identify your brand, make sure you maintain a consistent use of that image.

Fonts and Typography

There should be a defined style for every bit of type used for a brand, for both print and digital applications. Rules for how to use typography should be clear and distinct, from what typefaces are acceptable, how each is used, and guidelines for additional styling, size and use of color.

Select a few typefaces that will be used in design projects. This may include one set of rules for print projects and another for digital applications. But make sure the typefaces have some common links. For example, many web designers prefer sans serif typefaces for body text whereas you may prefer a serif style for print. Find a commonality between the two. Consider a headline or “big type” style that you can use for both types of design projects.

Most brands use one of two primary typefaces. The example above from the North Carolina State University Brand Book uses the Univers family, both regular and condensed styles. Then select a complimentary typeface and substitute typefaces. Ideally, the brand should include no more than five typefaces and their usage.

Colors

A defined color palette can be one of the most important aspects of the brand bible. Consider the Golden Arches and color the represent McDonald’s, for example. Would you as clearly recognize this company if the giant M was another color?

The brand bible should outline each color and how it should be used. This includes colors that appear only in a logo to colors that are used for backgrounds, text and other design elements. The numbers of colors in a palette should be kept to a minimum and can include fully saturated versions and tints.

Further the document should clearly define each color by name and color value for a variety of projects. Choose primary, secondary and alternate colors for the palette. Define each color with values for print (CMYK) and digital projects (RGB, HEX). Also note Pantone colors as such with their assigned values.

Images

Guidelines for images are about more than just whether you will rely on photography or illustrations or other types of graphics. The brand bible should detail how images will be gathered, edited and used.

Nike, for example, relies on large, tight, high-contrast images to draw you in. The I Love NY campaign above uses location-based images from photos that are restyled as drawings to capture attention and create a feel.

Image guidelines should also define when and how certain types of images are used. Will you use photography or illustrations or both? Is clip art use acceptable? How will images be edited? Will they be black and white or color? All of these questions should be answered in your image guidelines.

Text and Tone

Finally, you want to make sure the things you say fall in line with the brand image. This applies to everything from the headlines in an ad, to the tone of a press release, to the way blog posts are structured.

Outline the type of acceptable language that will be used. Is the context wordy, or simple and compact? Should the tone be formal, or more conversational? Who is the audience you plan to target? Write for them.

Easy.com defined its brand lingo in simple terms and used a style that mirrors the tone of actual communications. For the brand, simplicity is the key. Skype follows a similar philosophy, going as far to showcase words the company likes and does not like.

Using a consistent and distinct tone can help clients and customers identify with a brand, and creates an association with what the brand stands for. When creating guidelines for text and tone, think about words you want to be connected to – cool, trustworthy, hip, beautiful, efficient, top-notch. Use those as the outline for your rules.

Brand Bible Checklist

Here’s a list things your brand bible should include:

Overview of brand, including history, vision and personality
Logo specifications and examples of usage
Typography palette
Color palette
Image use specifications, including photography style
Letterhead and business card design
Design layouts and grids for print and web-based projects
Brochure guidelines
Specifications for signage and outdoor advertising
Writing style and voice
Social media guidelines
Visual examples to support each rule (provide examples of proper and improper use for clarity)

10 Brand Bibles for Inspiration

Look through some of these brand bibles – some current, some old – to help you get started building your own. It can be a tough project, but the end result is really worth it.

Conclusion

In the creation of your brand bible, think of how it will be used. This document is a reference material and guide for how the company should be portrayed to the public.

Include examples and specifics. Keep the guidelines direct and simple but also think about how restricting they can be. Guidelines that are too strict can limit creativity and new designs; guidelines that are too loose may result in multiple or disjointed brand identities.

Use your brand bible as starting point and establish a culture around it that allows designers room for creative thought while maintaining the aura of the brand in a variety of projects. Remember the ultimate goal of the book is to create a distinct and unified presence for your brand.

40 Awesome jQuery Plugins You Need to Check Out

Fri, 10 May 2013 07:03:29 +0000

The jQuery developer community has to be one of the most generous and hardworking group of people on the web. They’re constantly churning out amazingly useful and completely free tools that they share with anyone and everyone who wants to use them.

The quantity and quality of free jQuery plugins simply never ceases to amaze me. I’ve been keeping a list of some great ones that I’ve found lately and I thought I’d share it with you. Here are 40 awesome and free jQuery plugins that just about every web developer should check out.

Scrolling

jQuery Waypoints

Waypoints allows you to easily trigger JavaScript events at specific scroll points. Ever wonder how people build those amazing scrolling effects? This could be your answer.

skrollr

Parallax scrolling for the masses. Skrollr helps you with all kinds of different scrolling effects including transforms, color shifts and more.

Charts, Animations & Tables

Handsontable

A minimalistic approach to an Excel-like table editor in HTML & jQuery. The result is quite impressive, you should definitely give it a shot if you’re looking to build an interactive spreadsheet.

jQuery Sparklines

jQuery Sparklines helps you build little inline charts that are supplied with information via HTML or JavaScript.

Teamwork Gantt

Build incredible Gantt charts with jQuery. Seriously impressive for a free tool.

DataTables

A jQuery plugin for creating impressive, highly functional data tables. Multi-column sorting with data type detection, smart handling of column widths and more.

arbor.js

Build crazy looking, futuristic, animated and modular graphs. Really cool stuff.

Layout

Wookmark jQuery Plugin

Easily build a Msonry-like layout like the one seen on Wookmark. We featured this on Design Shack here.

jQuery Masonry

The original jQuery Masonry. Masonry arranges elements vertically, positioning each element in the next open spot in the grid.

Isotope

An amazing layout plugin that allows for intelligent and dynamic grids of items that can be easily sorted and filtered.

FitVids.JS

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

gridster.js

Gridster is a really amazing plugin that allows you to create flexible grid layouts that can be rearranged via drag and drop. You should definitely try this one.

Freetile.js

Another plugin for masonry-style layout. It allows for any size of elements to be packed without using a fixed-size column grid, so you don’t have to worry about specifying a column width appropriate to the size of your elements.

Text

jQuery TextExt Plugin

TextExt is a plugin for jQuery designed to provide functionality such as tag input and autocomplete. According to the developer, it was built on two main values: modularity and extensibility.

Jeditable

Jeditable allows you to set certain HTML elements to be editable by the user. You can even set up different types of events to trigger editing capabilities: hover, click, double click, etc.

FitText

A plugin for inflating web type. It actually makes it possible to have text that resizes with the viewport. Extremely useful for responsive web design.

Cool UI

jQuery Knob demo

This plugin allows you to create really cool circular knobs that spin or fill up as you scroll.

noty – A jQuery Notification Plugin

Noty is a jQuery plugin that makes it easy to create alert, success, error, warning, information and confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue.

PageSlide

This plugin helps you build a hidden, slide-in sidebar that contains pretty much anything you want it to.

jQuery Collapse

“This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure.” That’s fancy-speak for a plugin that allows you to make content collapsable.

Avgrund

Awesome and simple modal boxes with a really cool page animation effect.

jQuery One Page Navigation

Smooth scrolling navigation and animation for single page sites. Super simple, incredibly handy.

jqPagination

A great little pagination plugin. Instead of displaying a list of page numbers like traditional pagination methods, jqPagination uses an interactive ‘Page 1 of 5′ input that, when selected, allows the user to enter their desired page number.

jQuery Joyride Feature Tour Plugin

This plugin is from ZURB, which is really all the info I need to know that it’s great. It helps you build little callouts that walk users through the features on your site one step at a time.

Tooltips

jQuery PowerTip

A fairly robust and powerful jQuery tooltip plugin with plenty of options.

tipsy

Another great tooltip plugin. This one is loosely based on giving you the ability to create Facebook-style tooltips.

Slideshows, Images & Sliders

jQuery Slider Shock

A notably complete responsive jQuery / WordPress slider, with a wealth of options, settings, styles and functionality. Very well documented too!

Backstretch

Backstretch creates dynamically-resized, slideshow-capable background images for any page or element.

jQuery Anystretch

Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes.

jQuery Lightbox

A simple lightbox based on prototype and scriptaculous.

FlexSlider 2

FlexSlider is a responsive image slider from WooThemes with awesome features like multi-directional slide animations, semantic markup, touch support and the ability to include any HTML as a slide.

ColorBox

Another simple lightbox plugin. Supports photos, grouping, slideshow, ajax, inline, and iframed content.

WOW Slider

Literally one of the best, most powerful and fully featured sliders on the web. It’s responsive, has lots of different transitions and is packed with everything you could need. Go get it.

Miscellaneous

Timeago

Quick, easy and auto-updating timestamps for jQuery. Example: About one day ago.

jQuery Validation

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.

jQuery File Upload Demo

A pretty robust file upload plugin for jQuery. Multiple file selection, drag&drop support, progress bars and preview images for jQuery.

jQuery Instagram

Want to show an Instagram feed on your web page? With this little tool, you can.

jQuery Shadow Plugin

Easily add all kinds of different shadows to your HTML elements. Each shadow takes very little code to implement.

Naked Password

This one is ridiculous and potentially offensive, and a little hilarious. To encourage users to implement strong passwords, there’s a little, cartoony and non-detailed illustration (think NES) of a man or woman who gradually undresses as your password strength increases.

MotionCAPTCHA

I hate mangled-word CAPTCHAs so much that I wrote an article about why we should kill them. This plugin provides a unique alternative that allows the user to bypass security by drawing shapes.

jQuery Transit

Super-smooth CSS3 transformations and transitions for jQuery. Rotate, perspective, skew, scale and more.

What Did I Miss?

There you have it, 40 outstanding jQuery plugins for everything from scrolling effects to charts and beyond. Leave me a comment below and tell me about the great plugins you’ve discovered, or better yet, built, lately. Be sure to leave a link so everyone can take a look.