May 13

99 Sites All Designers Must Know About

Below is a list of 99+ graphic design resources, in English and (and a few other languages), that all designers must know about.

It is sorted by category (click to go to category):

For more resources you can check out the 101 Places To Get Design Inspiration. Also don’t forget to subscribe for more graphic design resources.

General Design

1 Spunk United

An excellent magazine with a selection of the worlds best artists providing inspiration, interviews, articles and more.

Spunk United Continue reading

May 06

5 Cool CSS Hover Effects You Can Copy and Paste

Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration.

If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy.

Bring Your Boring Site to Life

Hover effects can make your site feel much more dynamic and alive. It used to be the case that JavaScript was required to do anything really interesting with a hover effect but these days CSS3 is capable of doing a ton of really cool stuff if you’re creating enough.

The effects we’ll be using today all use code that is supported by modern browsers, meaning of course Mozilla and Webkit for the most part. IE support is spotty at best across various versions so be sure to test thoroughly in your own implementation. Fancy hover effects are one of those things that you can usually degrade fairly gracefully so that older browsers still see some change.

Bump Up

May 05

Using CSS3: Older Browsers And Common Considerations

With the arrival of IE9, Microsoft has signalled its intent to work more with standards-based technologies. With IE still the single most popular browser and in many ways the browser for the uninitiated, this is hopefully the long awaited start of us Web craftsmen embracing the idea of using CSS3 as freely as we do CSS 2.1. However, with IE9 not being supported on versions of Windows before Vista and a lot of businesses still running XP and reluctant (or unable) to upgrade, it might take a while until a vast majority of our users will see the new technologies put to practice.

While plenty of people out there are using CSS3, many aren’t so keen or don’t know where to start. This article will first look at the ideas behind CSS3, and then consider some good working practices for older browsers and some new common issues.

A Helpful Analogy

The best analogy to explain CSS3 that I’ve heard relates to the world of film. Filmmakers can’t guarantee what platform their viewers will see their films on. Some will watch them at the cinema, some will watch them at home, and some will watch them on portable devices. Even among these few viewing options, there is still a massive potential for differences: IMAX, DVD, Blu-ray, surround sound — somebody may even opt for VHS!

So, does that mean you shouldn’t take advantage of all the great stuff that Blu-ray allows with sound and video just because someone somewhere will not watch the film on a Blu-ray player? Of course not. You make the experience as good as you can make it, and then people will get an experience that is suitable to what they’re viewing the movie on. Continue reading

Apr 29

Showcase of Creative Navigation Menus

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

Parallax and Scrolling

Parallax is an animation effect that allows layers to move in response to a particular viewpoint. The effect is used to add a three-dimensional depth illusion to the design and make interaction more responsive and interesting. Recently, this technique has been frequently used to animate background images, as in the famous Nike Better World site.

Nike Better World

Rich graphics and parallax 3D effects

Www Nikebetterworld Com-2011-3-11-20 18 20 in Showcase of Creative Navigation Menus: Good and Bad Examples Continue reading

Apr 28

10 Web Design Rules That You Can Break

As web design and design in general have evolved, rules have been established to ensure consistent and usable designs.

Some of these rules were created simply because website creators abused certain principles without regard for their users. But these rules are not enforced by anyone and should be broken when necessary, especially when breaking them would lead to a stunning design. In this article, we present 10 rules that you can break if it suits your design needs.

Rule #1: Do Not Display the Horizontal Scroll Bar

A significant number of mice don’t have a horizontal mouse wheel. This makes it awkward to scroll left or right when a web page’s content extends past the sides of the browser. It can be annoying to have to bring the mouse cursor down to the bottom of the window and drag the scroll bar over just to see a word or two that lies beyond the viewable area of the page. That said, here are some well-designed sites that put the scroll bar to work in effective ways. Continue reading

Apr 15

15 Essential Checks Before Launching Your Website

Your website is designed, the CMS works, content has been added and the client is happy. It’s time to take the website live. Or is it? When launching a website, you can often forget a number of things in your eagerness to make it live, so it’s useful to have a checklist to look through as you make your final touches and before you announce your website to the world.

This article reviews some important and necessary checks that web-sites should be checked against before the official launch — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release.

Favicon

A favicon brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head.

1 <link rel="icon" type="image/x-icon" href="/favicon.ico" />

And if you have an iPhone favicon:

1 <link rel="apple-touch-icon" href="/favicon.png" />

9rules in 15 Essential Checks Before Launching Your Website Continue reading

Apr 08

Tips for Choosing a Typeface

Let’s pull it all together with some pragmatic ways to get your typeface choice made. You might want to try these tips, which many designers use to their advantage in one way or another. Be the beneficiary of their wisdom and experience.

1. Plan Your Hierarchy

First, make sure you have a good grasp of the content and typographic hierarchy your design job will dictate. You may realize, after a thorough analysis, you need five fonts (not typefaces) to cover your various heading, sub-headings and call-outs. Can your typeface provide enough variation with bolds, italics and small caps? Or do you need two typefaces to create more distinction in the hierarchy? Three? Use a mind-mapping tool or make a traditional outline to see as much as you can before you start choosing typefaces. Consider this example of a bad and a good hierarchy using the same text. Notice the role white space plays in the hierarchy, too. Use as many levels as you need as long as there is distinction and clear purpose in your choices.

Plan-your-hierarchy in How to Choose a Typeface Continue reading