Guest contributor Spencer Belkofer designed the following Halloween themed infographic to showcase 7 ways to avoid scary web design.

© Spencer Belkofer, Lumin Consulting

Ribbons have become a recurring trend in web design. Although this trend probably won’t die for a while, I think it’s more obvious to designers than normal internet users that the trend is becoming more wide-spread. Simply searching “ribbon” on Dribbble brings up 840 results! In the following compilation, I collected some of the best examples of ribbons in design:

Do you think this trend is being overused?

Parallax scrolling in web design is a design trend that is going to be huge this year. In my original blog post about Parallax Scrolling I wrote back in April, I listed some tools and tutorials to help you achieve this effect in your web designs:

• Create a Funky Parallax Effect using jQuery
• jQuery and CSS single page portfolio, a vertical parallax navigation experiment
• Scrolling Parallax: A jQuery Plugin

Now I am going to show a few more awesome examples of parallax scrolling. Many of these websites use parallax scrolling to provide the illusion of a 3-dimensional effect, which adds a great subtle effect for visitors. Below is a compilation of some of the best websites that use parallax scrolling in a way that is amazingly inspiring. Enjoy!

Have some examples of parallax scrolling to share? Did you use this technique on your own website?

Leave a comment, we would love to hear from you.

CSS galleries seem to be gaining popularity among the web design community for obvious reasons. They can be a great source of inspiration when designing certain elements of a website. Although these sites are great (and sometimes overused), it’s always a good idea to take a break and step back from the computer screen. As designers, we have all been stuck in a rut where ideas just aren’t flowing. I’m the type of designer that will actively seek inspiration when I’m presented with a project. Usually, ideas don’t pop into my head instantly. Inspiration is more about discovering it naturally, rather than forcing it.

Travel

There is an abundance of culture, lifestyle and art to be discovered when you travel. The discoveries you encounter may not always be available to you where you live and can help you escape the rut of everyday work. These types of discoveries can be awe-inspiring in a way that is mentally stimulating. Don’t forget to take pictures of your journey to reflect upon later.

Nature

Nature is the prefect way to recharge your soul and ease your mind, allowing you a fresh perspective on design. An important part of getting inspiration from nature is not to just view it. Look at the textures and colours of the leaves, grass and water. Paying more attention to the environment around you can help you incorporate new elements into your designs. Getting inspiration from nature is also a good way of making sure you avoid taking too much inspiration from other sources. Below are two examples of awesome websites inspired by the beauty of nature.

Study Different Design Mediums

Fashion

Fashion is very much artwork in itself. The colours, structure and textures used in fashion can be applied the same way in web design. Specific styles and eras of fashion design can resonate with your personal style, making it easier to discover a new found source of inspiration. The Free People website is a perfect example of a design that reflects the style of the clothes they sell – flowy, natural and girly.

Architecture

How many times do we mindless pass by architecture in large cities? Studying the line, shape and form of these beautiful buildings is a great way to stir up ideas. The shapes and patterns in modern architecture share the same principles as design elements on the web. There’s a awe-factor in the creativity of structural design that encompasses personality, variety and colour that is sure to inspire. The Material Group and Cappen websites both use beautiful circular structural elements to create a sense of depth and shape.

Photography

Photography is one of the best ways to capture human emotions and feelings. As a web designer, this is one  of the most important aspects of creating and designing an effective website – we must appeal to our visitors and create an emotional reaction. Photography often allows our minds to wander through various emotions and personal memories creating a new realm of inspiration.

Discover Your Neighbourhood

Visit an art gallery, record store, coffe shop, vintage clothing store or wander through a park. Go to a foreign grocery store and study the packaging designs. These designs aren’t restricted by factors like HTML and CSS and can remind us how to think outside the box when it comes to webpage layout. View architecture and street art – nothing can be more stimulating than discovering your own city, especially areas you have never visited before. Many of these places have a wealth of undiscovered artwork that can be used as inspiration.

How do you combat limited inspiration?

Many designers use monochrome solutions to showcase their work, even with flash based designs. Black and white portfolio websites have won the hearts of millions with simple and austere style, so they are in fashion year after year.

Adding a dash of the right color brings a zest to these designs and draws’ attention to significant elements (e.g. logos, photos, schemes, navigation buttons).

So, if you are a web designer, photographer or a creative online project manager and are looking for some ideas about how to decorate your portfolio and distinguish it from the masses, then you are in the right place! Now we’re going to show you a list of 35 black and white Flash portfolios which will undoubtedly inspire you for experiments with monochrome colors. So, make yourself comfortable and enjoy the art of black and white Flash portfolios!

Szymon Brod

Toshiyuki Nagashima

Kurylowicz & Associates

Ad Vlemmix

Pianofuzz

Martin Anderie

Cellules

Studio Ten and a Half

Leah Haggar

Contrast

Ion Drimba Filho

Jessica Stivenson (template)

Model Management

Marcin Kaneiwski

Jean Malek

Your Magesty

Uli Heckmann photography

Carlos Alonso

Artworking Digital Design

Ana Juan

Interior (template)

Shauntan

The Old State

Pierrick Calvez

thetoke

Alastaire Allday

Simon J Hunter

Toby Powell

Cole Thompson photography

AFGN

Brian Hoff

XQS

Kardo Ayoub

Roland Olbeter

C-designer

Design Code Play

Licorn Publishing

Vestibular Agendado 2011

Bakerella

Are You Ready?

Bog Standard

Pixelista

La Dinette Des Grandes

Geekletics

Ingenjörsvägen

MustGetACard.com

Cupcakes Canada

Motherhood

Econeve

Ungarbage

Solid Giant

Odopod

Keens Interiors

You Know Who

Yum Creative

Love Hunt

Krista Ganelon

OUOU

Sarah & Simon

Little White Umbrella

Pink Turkey

The Pink Mitten Campaign

Solid Pink

Pink Petrol

MommaCounts

NonSense

Aaron Moody

DISEÑÍSTICAMENTE

Cash Pony

Cup Cup

Have an awesome pink website to share? Post a comment we would love to see it!

Of course not all freelance portfolios are this great. Some of us are guilty of spending all our time working on client’s designs and we forget to take care of our own portfolio websites. If this sounds like you, take note of some of these top freelance portfolio websites and give your lackluster site a makeover. You may be surprised how well it pays to keep the public face of your brand up to snuff with the competition.

Ready to get inspired?

Mathieu Langlois

Hugo Rodrigues

Scribble and Tweak

Colorful Visuals

Carsonified

Lilac Creative

Kyle Bebeau

Pixel Criativo

Crssrd

Mike Precious

Nineteen82

Ketch Studio

Mike Curry

Ashfall

Bright Labs

Electric Pulp

ARTEYE

NuvoDev

Diseño Gráfico y Diseño Web en Costa Rica l IGD

Kaus

Corvus

Good Bytes

Maxlabs

Jessica Kripp

Mathieu Langlois

Yvan Rodic

Adam Scott

The True Illusion

Lee Munroe

Geek Zoo

Sven Creative

Deren Keskin

Josh Collie

Anderson de Paulo

The Coder

Guerrilla

Shawn Graham

Mario Contreras

Chris Heinrich

Afgn

MetaLab

Outstander

Andrea Macdonald

Mark Sousa

Olive Design Company

King Lucky

Chriswi

Bärnt & Ärnst

David Hellmann

Enzo Li Volti

Fred Yates

The Pat Johnson

Punching Pixels

Infografixlab

James Whitesmith

Goldenboy Media

Lindsey Grande

Julian Laval

Ralph Millard

Tobias Persson

Stephane Blancard

Daniel Büttner

Rytis Gasparavicius

Man on the Moon

Dilshan de Silva

Myself DSK

Sebastian Mrazek

Celavi

The Visual Click

André Petrini

Wesbos

MAY

Jorge Riera

Design By Nick

Chandu4u

Gauged2

Ja, mein Kind?!

Martin Karasek

Design Official

Found Colour

Wouter de Bres

ndesigns

Ray Cheung

In the Lost & Found

Mizko

Brad Langdon

The Funky Monk

Amber Miro

Design Intellection

Janko at Warp Speed

Paul Mitchell Kelly

dan123

I wanna be a designer

Niklas Baversten

Jess King

Tom Pain

ATWA

Gonzo Graphic

Phillip Bartz

Colin McKinney

Vinu Mammen

Tyler Herman

Andy Smart

Jose Alonso

Jan Vašek

Today I want to show you some proper examples of textures in web design. Some of the best practices in textured web designs are shown below so I hope you can become inspired by the images and if you have a website with texture in it, don’t hesitate to drop a comment and let us know – textured website designs are my favorite.

Subtle Grunge Textures

Below are some websites that utilize the subtle grunge effect, which allows their websites to remain clean of clutter and professional looking, while still giving it that slight bit of edge needed in order to stand out from their competitors.

Colin Grist

Le Tipi

Wixel

Krista Ganelon

GroupMe

Beautiful Type

Neve Inspired

Haiti One Year Later

Netzbewegung

Code23

Elise Teddington

Heavy Grunge Textures

On the complete opposite side of the spectrum is the heavy grunge websites that hold the “dirtier the better” mantra very close to heart. You’ll see a lot of messiness in their designs yet also note that everything still looks great and functions very well. It’s hard to do, but if you’re able to pull it off, you’ll walk away with an awesome website like the ones below.

Truth Saves

Kez, Human Jukebox

TAEBO Team Stuttgart

Edinburgh 2 Liverpool

XGO

Random Grunge Textures

Below are websites that couldn’t really be grouped into the above two categories but still utilize the grunge elements beautifully across the board. Some are clean and simple layouts like Solid Giant while others showcase a retro vibe to their designs like Logo Nest and Forever Heavy.

Logo Nest

Missing Pages

hey Indy

Solid Giant

Teixido

Aboard Entrepreneurship

Submit Quickly

Forever Heavy

Simply WP

One of the main things you see in every one of the examples below is a large iPhone or iPad image, which fits the design perfectly because it instantly lets the visitor know what type of website you’re on.

One thing that you begin to notice after this similarity is that a lot of the designs have a general web layout that mimics the look and feel of the app itself. For instance, with the Bord app, the website features a lot of the same design elements that the app itself features.

With the growing popularity of mobile browsing and mobile phone sales growing every day, I don’t see this design trend leaving any time soon. It’s kind of like the mac screen on a designers portfolio website, it’s here to stay … forever.

Enjoy the visual inspiration below and if you know of an iPhone or iPad app website that isn’t listed below but you feel should be, don’t hesitate to leave a comment and let us know.

Glaktika

RaceSplitter

Photopod

Galleried

Bord

Lista à mão

Nomis

Ringer

Powderful

Ben The Bodyguard

Facecard

PostalPix

Fuser Anywhere

Spaced

Storific

Momento

Contoplanet

Fubiz

Dayta

Sundance

Ecoki iPhone Reader

Billings Touch

Marbella HD

Leaflet

Counter Culture

Title Photograph by Ted Prapas

The callused hands, the dirty brows, and the sweat-drenched boots. I’m talking about the blue-collar worker. The men and women who wake up every morning with a day full of manual labor in front of them. From coal mining to telephone pole repair to high-rise construction workers, the working class makes the world go with their hard work, dedication and sweat equity. Many people choose to look down from their suits and cubicles at this working class with disdain and belittlement. As designers, we may sometimes feel like we’re somewhat above the hammers and nails and lunch pails of our blue-collar brethren.

Now to be sure you’re on track, this isn’t an article on social class or the choice of profession. Rather, I want you to focus in on some lessons every designer (and possibly any other white-collar worker) can learn from those who pack a lunch pail and put in a hard hat’s day. Just because we’re in a service industry, doesn’t mean their aren’t elements of our profession that resemble the situations faced by the working class. And with the Internet becoming more and more essential to our society, those who’s jobs it is to build and layout the web (you and me) can, in a way, be considered the blue-collar class of the information age.

So put down your Wacom tablet and pick up your hard hat as we look at 5 lessons every designer can learn from the Blue-collar worker.

It’s Hard Work

Chopping down trees or putting on a roof in 100 degree weather is no easy task. There’s not much glamor or relaxation when it comes to many blue-collar jobs. Workers are asked to work and work hard. In many circumstances the environment is not pleasant and the job at hand can be strenuous, both physically and mentally. It takes dedication and sometimes a lot of sweat to get the job done right. And you don’t usually find too many complaints from those who’ve made it their careers to put in the hours in such conditions.

As a designer, a lot of what we do is hard. Now we’ve all probably been in that state of flow from time to time where inspiration comes easily and the hours fly by, but often we find ourselves battling the grind of deadlines and client demands. A lot of effort can go unnoticed as we sweat out the last few pixels before we ship off a design. And sometimes even finding the right inspiration can be hard enough.

Expecting ideas to just come to you is the wrong approach. Take time every day to work out some ideas and build up a reservoir of designs. You’ve got to put in the hours even when it’s not the most pleasant of circumstances or even when the dollar signs aren’t stacking up.  It’s these consistent work habits that will turn you into a design machine. Having the ability to crank out work even when you’re not feeling your best will pay off. So pack your lunch pail, put down that Starbucks and get to work.

Focus on Your Craft

Many, if not all manual trade jobs, begin with apprenticeships. The reason being is most of what you learn in a blue-collar workplace happens on the job. There aren’t too many textbooks or blog articles on how to mix cement or chop wood. Understanding the ins and outs of a workplace happens by spending time with those who’ve mastered their craft. Knowing the right way to hold a jackhammer happens while you’re operating a jackhammer for the first time; you don’t get a degree from jackhammer school.

Taking a similar approach with design, you should be spending more time doing and less time reading. While I believe education in design theory is great, most of what you’ll pick up happens when you’re creating or watching others create. Find a mentor. Take on an internship. Develop your specific craft through work and more work. The more time you spend using your tools and practicing your specific crafts, the more of an expert you’ll become. Ask questions from those who’ve come before you. Answer questions for those who are just now learning. And be proud of what you’ve accomplished. Just as with many blue-collar workers, designers can sit back at the end of the day and actually see something they’ve accomplished.

Take Care of Your Tools

Almost every blue-collar worker has his or her hands on a tool for most of the day. That tool could be tiny screwdriver or a massive diesel front-loader. Regardless of size or function, a good worker knows his tools, and more importantly, knows how to take care of his tools. Painters wash off their brushes at the end of a job. Auto mechanics have a home for each one of their hundreds of tools. Every tool should be treated with care.

So what are our tools as a designer? First, we have our physical tools. Pens, paper, computer software, etc. help us get designs out of our mind and into function. Ensure that whatever system you use is well maintained and in proper-working condition. Updates to your computer or keeping your drawing tools in pristine condition will ensure that when an idea comes, you’re ready to jump into action.

An organized work bench will make finding the right tool fast and easy. If you’re a web designer, having a file structure of common elements and templates at hand will make sure your designs start off quickly and consistently. Carrying a notebook with you at all times, means you’re ready for any and all forms of inspiration.

Finally our biggest tool, our mind, should be taken care of the most. Getting enough sleep and staying healthy will keep your mind sharp and ready for the mental strain that many designers face.

Don’t Be Outsourced

With more and more service-based industries popping up in the Western World, many blue-collar jobs have been outsourced to developing countries. This is also, in large part, due to the lower wages offered in many of these developing countries. If you’ve lived your life working in a blue-collar profession, only to find out that your job is being shipped overseas, it can be devastating and sometimes impossible to find similar work.

The same can hold true for many in the design industry, especially those in web design. Finding work done cheaper overseas is especially easy when the Internet is bridging the gap. So how do you avoid being outsourced?

Add value. While there are many blue-collar jobs that are being outsourced, there are still those highly skilled hard workers that will always have jobs locally, primarily because they make it worth it. So how do we add value as designers? This is where we step away from the manufacturing class and into the service class. Offer clients interaction and services that are impossible to get from overseas interactions. Expand your skill set to include complimentary services. Whatever your specific method, make sure your not easily replaceable.

When the Whistle Blows, Call it a Day

Finally, a simple lesson that is sometimes easy to miss is, when the day is over, leave the work alone. There’s a growing trend in the information age to blur the lines between work life and home life. Having a healthy work-life balance should be somewhere high up on everyone’s priority list. There are always going to be more opportunities to get ahead and more work to be done. If you don’t learn anything else from the blue-collar worker, take away the will to put your work aside and spend time with your family and friends. Many times the work can wait until tomorrow. So listen for the whistle and call it a day.