Time and time again, we mistake good decoration for good design. When we are looking for inspiration, we go to the same websites and the same showcases trying to get that added push necessary to create something we love. Now this isn’t a huge deal (especially if we are looking for a creative kick), but if we aren’t careful, we can end up focusing mainly on the decoration and beautification of a web site.

Designers must keep in mind that true graphic design is less of an art and more of a theory. Graphic design is simply a means to solve problems, but once you have solved your problem, you are free to dress it any way you like. The best way to design your web sites (as well as any other thing), is to first figure out what the goal of your site is to be. For example, do you want people to come to your site to become informed about your product, or do you want them to purchase your product? And if you want them to purchase your product, how are you going to make it more important than anything else on the site–of course, without over doing it or compromising its intuitiveness?

You need to be focused on the goals of your site first and worry about the beautification last. With that being said, in no way should you completely ditch great decoration for good design. It can sometimes be hard to find a nice balance of the two but it is more than possible. Of course, for some sites, the amount of decor will contribute to the goals of your site, so it’s imperative that one sits down and figures out what it is they are trying to achieve.

Web Design Examples

Below is a list of some sites that we think have a decent balance of design and decoration. Of course we feel like there is no perfect site (or at least we haven’t seen it), but these sites are pretty close. When looking at the showcase we tried to determine whether it was clear who or what was being presented, how easy and intuitive the navigation was and the way in which everything interacts with the decoration. See how they fare:

Adham Dannaway

This is a great start to our examples. There are so many boring ways to draw attention to the fact that someone is a designer as well as a developer. Some folks just state it, but this guy has an easy to understand visual tactic that makes sense and there is a blurb about each ‘part’ of him, which takes you to work dedicated to that part. A pretty simple and smart idea.

AwesomeTees

Obviously here, they are selling shirts. The use of the green bar at the very top that lets visitors know there is a sale going on is a very simple design solution. It doesn’t stand way out which is smart; because the branding here is that of a quality line of shirts, not a bunch of cheap shirts that go on and off sale.

BellStrike

Headlines are extremely useful (though they tend to get a bit over used) in web design. Here, the name ‘Bellstrike’ tells most nothing, so the headline is used to pretty much fill in this major blank. Then right under the large headline we have the option to do one of the two things we would more than likely do anyway–find out more info or sign up.

 Cheesemonger Invitation

This website is a good example of following the ‘Google it’ rule. Let’s assume you just heard folks talking about the ‘Cheesemonger Invitational’ while you’re on the street or a friend mentioned they were going. You have no clue what it is so you Google it, and this site comes up. All of this information is above the fold with a handy video–what else could you ask for?

 Chichester Music Academy

Another great example of headlines and blurbs, but what really stood out here was the sub-navigation. With this, Chichester made it obvious that their focus is on their music lessons and have made it absolutely important that you check out the information and tuitions for the programs.

Clear Assembly

This site showcases a nice blend of decoration and design–see what happens when you scroll down or hover over a part of the illustration. In the mean time, the static sidebar is very useful, and it’s made pretty clear what this company does.

 Drupal Camp Atlanta

While not a huge fan of the side bar, it really makes sense that the ‘Get On The Waiting List’ button is so visible, and you can assume before this event was sold out, it was probably the button to purchase tickets. Everything is clear and the illustration and techniques are extremely attractive. This is a good blend.

Earth Echo

This seems to be a pretty standard layout that puts the focus on donating and signing up in the top left corner. The purpose of showcasing this site, is to show how you can decorate some standard (yet useful) layouts.

Food Sense

This is an example of a nicely put together website that decided to keep the decoration to a minimum, and it’s completely reflective of the idea behind this site–they seem to focus on cooking, mainly with veggies in their simplest form.

Hanging Up The Moon

This website isn’t necessarily clear on what you are doing, but it intuitively makes you want to click on the pictures and figure out what exactly is going on. This is an AWESOME way of presenting this kind of project (we want you to go figure out what’s going on here. It’s super neat!)

MediaParker

If we were told to make a site for ‘Hosting Solutions for Design Lovers’ it would probably look exactly like this. First, the prices and features aren’t hidden and have to be searched for (like many hosts), and it is very attractive to anyone who has a thing for design. This is also a great example of a single page website.

 Melbourne Food & Wine Festival

Much like the ‘Cheesemonger’ website, the ‘Google it’ rule is exemplified here. All the information is clearly visible and is organized very well, for the large amount that there is. This is an example of another great balance between problem solving and decoration.

One Design Company

This website took a bit of a different approach to navigating around it. Each screen there’s an arrow and intuitively, you would push the arrow keys to see if anything happened. Lo, and behold–movement! A nice added touch to a company that claims to use ‘gallant technology.’

Playtype

This is very progressive design, but it stays true to the idea of presenting folks with fonts. There is sideways navigation that allows the top portion of the site to remain static–and you always have the opportunity to browse the fonts. This makes sense.

Michael Wong (Mizko)

This is an example of good clean design and excellent coding all working well together. It’s pretty evident what he does without creating an overused headline blurb. It’s a great, progressive idea at work here.

The Manual

This is another great example of a single page website–there isn’t a ton of decoration here but the design makes sense. We know exactly what the product is, and though the product is sold out, the area where it can be purchased is visible. Information is visible and everything is right where it needs to be. Unfortunately, it’s a temporary site, but hopefully they don’t lose the structure they have.

War Child

Once again, a site that does great at mixing some excellent illustration with just as excellent design. We understand first, the purpose of this site, then we are called on to donate to the cause. It’s very clear what they are attempting to achieve.

Whiteloupe

This is another site we can use the ‘Google it’ rule for. You may have no clue what a ‘Whiteloupe’ is but it becomes more than evident once you get to the site. They’re obviously attempting to get customers, but not without showing you the work they’ve been a part of. Consider finding this site and just seeing prices first rather than seeing their portfolio–how would you feel and what would you think?

Warehouse Twenty-One

This website makes it easy for their audience to know what’s going on. Basically all the important information is given it’s own space and makes for a very clean and focused web site. The simplicity alone makes for easy decoration–everything here was achieved very well.

Tom, Dick & Harry Creative Co.

The great thing about this site is that it doesn’t use your typical text navigation bar, it uses illustrations to let you know where to go, which promotes a nice bounce rate. What is also important to take note of, is that the ‘Clients’ button is bigger than the others, which probably means they really want you to know who they have worked for, and who matters most.

StoryWorldwide

This is a very forward thinking website and while it may take a minute to actually understand the purpose of the site, you will soon notice that this agency once to put a large amount of focus on the work they have done. Not on the services they offer and who does what. This is a very attractive website that makes sense.

 Shout Digital

As some web designers still attest, what you want to do is pay attention to what you put above the fold because it’s not always guaranteed that someone will scroll down and bounce around your pages. The thing we like about this page is, aside from the wonderful illustration, there isn’t a bunch of clutter up top and that makes users tend to want to navigate.

 Quarterly Co.

Aside from great and eye-catching headlines, good diagrams can really help you get your point across to your audience. Most times after we figure out what a product or service is, we want to know (as simply and quickly as possible) how it works. This diagram is right above the fold, and once you are finished, you have the option to hide it.

Parliament

With most websites, everyone decides to put all their links at the top of the page along with everything else, and sometimes the stuff that’s important can end up getting overlooked. Here, on the right side they decided to take the most important pages and make them more attractive than any other page. Your eye may also be drawn to the ‘work’ and ‘services’ graphics before they go elsewhere.

 Dustin Wood

Another great headline here from Dustin Wood. The wonderful thing about this headline is that it’s interactive and allows you to follow the linked words. This makes sense because of course, you’re going to get attention and focus with a huge headline like this, so why not make it useful.

 Driver Club

This is an amazing showcase of single page website magic–from the graphics to the navigation everything here works well with each other. With a design like this it’s easy to get cluttered, but everything here has remained simple and clean.

 Dirty Dave

Though this is a pretty typical portfolio layout, what’s best about this site is what happens when you decide to hover over the grayed boxes–it obviously turns color. This is pretty amazing because the whole site is gray and neutral, so when you hover, you get a pop of color and a focus. It’s a clever little trick.

Cookie Sound

This is another great example of design and decoration living well together. Everything has it’s own untouched place. Also, your eye is kind of drawn to the top right where there’s a Twitter message, which probably means the owners are interested in gaining followers and engaging with their audience.

 Abita Presents: Boudin & Beer

If you ascribe to that wonderful ‘Google it’ rule, this is a stellar website. An added bonus to this site, though, is that the ticket purchasing button is sticky and is always at the bottom of the screen wherever you go. Obviously, they are focused on selling their tickets, without making it overbearing.

 BarleyPop

This is a super clean website that explains the product above the fold (top right) and continues to introduce and explain it as you look around the site. The focus is not just selling the product, but establishing the purpose and the brand.

A Little More Help

Hopefully, some of us understand this balance a bit better. The best way to try to explain it is creating a focus on what is most important and making it natural for your audience. When creating a web design, you’ve got to pretend the audience has never seen or used a website before, so you must make it as intuitive as possible. For product sites, no one wants to be forced into purchasing, and for any site in general, no one wants to be completely in the dark about what to do. On the other hand, no one wants to have to peruse a completely boring site.

It seems pretty easy to understand but it can be a pretty hard concept to grasp. Below are some tools to help you get a better understanding of design as a problem solving technique and not just a way of creating attractive sites.

Education Resources for Studying Graphic Design

45+ Free Lessons in Graphic Design Theory

The Design Funnel: A Manifesto

Thinking About Design

(rb)

  

It’s been really popular lately for many professionals to dismiss the use of Flash. Many designers and developers push the idea to discontinue use of the almost 20 year old technology. There are a range of what seems to be problems from the heaviness of Flash projects, the inability to frequently update without tearing everything apart and the difficulty in creating a Flash website with great search engine optimization.

In the meantime, designers and developers are looking towards different technology such as JavaScript, Ajax, Silverlight, HTML5 and CSS3. Many of these technologies are actually wonderful alternatives as they are lighter than Flash and make it a bit easier to work around, as well as many are free and open source technologies. You also have the mobile device argument–where many devices don’t make Flash available on most browsers. However, dismissing the use of Flash is extremely premature.

Flash Site Examples

Flash is still a necessary and great technology to use. Flash can really push the idea of your graphics forward and help come up with a great level of interactivity for audiences. Below is a list of some really great websites to look at, use and understand how useful Flash really is.

Atmozfears

This website exemplifies how you can take a pretty good graphic and make it the centerpiece of an outstanding website. The interaction is much further than that of any other relevant technology without losing an audience.

Being Henry

This is an extremely interesting and progressive concept. It’s a movie, that allows you to choose your story line. This is an amazing idea, because there are books similar to this made popular for children! The use of Flash takes this type of interaction to a new level.

 The Bulitt Agency

Flash is used here to captivate and draw in the audience. It was also used as a great way to showcase some amazing graphics and ideas. The interface is super easy to understand and makes for an overall great website.

Deaf Preachers

Musicians have always got to find a way to stand out from the pack and really make themselves noticeable. This website serves as an interactive music video for the artist. This is a GREAT way to get folks interested in their music as well as their brand.

Eric Stanley Global

Eric Stanley’s website is a typical showcase of his musicianship and artistry, however, it is taken up to that WOW factor with the use of Flash. This site focuses on good design with the special touch used via Flash.

Frontier Room

Another example of how Flash can take a regular idea (like a restaurant website) and turn it into something with a ton of character. From the loading screens to other elements, it definitely stays true to it’s character and adds a bit of humor to their site. (Go to the reservations page to get a laugh out of the moo cow).

GT3 Creative

The great thing about Flash is that there are little to no limits when we are talking about graphics. GT3 Creative did a superb job creating their own little interactive island for potential clients. They claim to be a creative company, why not be as creative as possible?

Nothing Compares to Havana

Aside from that blatant typo, this is another extremely interesting, progressive and interactive website. We had to see it to believe, but basically the site can connect to your microphone, and if you whistle you can navigate throughout the website. Pretty neat for those who can whistle.

Ivan Moreno

It’s getting harder and harder to create a stand out portfolio that gets the attention of potential clients. So, instead of creating a simple website, Ivan decided to make his have a 3D navigational system. This is a simple, yet very effective use of Flash.

Jumpman

There are times when we visit websites just to get a bit of background history on a product and most times when you do that, you get a blurb on how amazing the company is and why the product rocks. Well, in this circumstance, Flash gets us a visually appealing interview on one of the most purchased shoes ever.

Kasulo

This is another great example of taking things to higher levels. The design is very good and the interface let’s you travel throughout the timeline of this portfolio. This is another forward-thinking idea.

La folle journée de Julien

While we aren’t French buffs, we can assume this is another one of those super neat interactive films. However, this site is a bit more graphical and Flash heavy than the former–and simply amazing. Sites like this really draw viewers in.

Lois Jeans

Another great example of crazy good graphics and stellar interactivity. This site is a bit simpler in it’s graphic department, but the Flash is what gives it it’s character. The interaction the mouse has with the entire site also contributes to this design.

I Make My Case

When you decide to purchase or create a cover for your telephone, wouldn’t you like to see what your phone would look like? Have no fear, Flash is here! This website allows you to create a custom cover for your phone and see it in 3D.

Martha Marcy May Marlene

This is the website for a movie that really gets you involved and drawn in to the concept. Many times, folks say you shouldn’t use a Flash type of intro, but it really gets you more and more interested in this film, much like an extended, super awesome trailer. Did we mention that it’s interactive?

Mixr

This is another great portfolio type of site that allows you two different ways to navigate through their featured projects. The use of Flash shines up the presentation a bit and makes this site fairly intuitive.

Music Can Be Fun

One of the most popular and probably most employed uses of Flash is to make games folks can play in their past time. Most games however don’t pay a ton of attention to precise graphics, like this extremely addictive game.

The Neil Young Store

Neil Young is a pretty famous musician who is characterized by his ability to use personal lyrics and make you feel like he’s holding a conversation with you through music. His store and website here almost attempt to do the same by inviting into a place in which he may have really resided or frequented.

The Profiler

This seems to be an application that will convert you and your Facebook friend’s profile pictures into a three-dimensional presentation. It’s a pretty neat app that shows how Flash has the ability to interact with other entities on the web and come up with some pretty neat stuff.

Reusch

There’s something about video that can get people interested in something more so than a bunch of different pictures. This site uses Flash to backdrop a handful of great athletes who use their product.

Sagres – Preta Chocolate

This entire site is composed of pictures taken of the actual chocolate and hand drawn icons and typography. This website is completely thorough and goes to a higher level of branding and being consistent. See how it was made.

Silver Pistol Digital Agency

Graphics can really make or break a site, but  great graphics with great user interface always wins. This website shows off the best of both worlds and uses Flash as a means to spice it up and give a little atmosphere/character with their audio choice.

Tag Galaxy

Much like ‘The Profiler’ site, this one connects to Flickr via tags and brings up whatever pictures you are looking for. This is a very useful site for designers that puts things together in a very visual and understandable way.

Brian Wilson | MLB Always Epic

One word: HILARIOUS. If you don’t know about this guy, he’s an American baseball player with an out of control beard and personality. What better way to make a baseball website than to feature him and an interactive beard?

The Place To Be

Once again, this is an example of using Flash to take what could be a pretty regular site into an amazing web experience. This travel photography type of blog is taken to new heights with it’s graphic design and it’s interactivity.

UCF 116

The UFC put together this site to help promote a past wrestling event, one that claimed to be the largest in their history. Fortunately for us, we can judge accordingly by looking at all the wrestlers and vote on what we feel will happen. This is a very well put together site.

Werkstatt

This example is another great and creative way to showcase a wonderful portfolio website. Instead of creating a nice grid type of view, this site intuitively scrolls side to side to allow you to see this artists work. On this site, Flash adds the extra creativity.

Let Flash Live

People are really interested in killing Flash and being the firsts to really declare that this technology is no more; but as we can see there are many websites that still use it (and it’s still extremely popular overseas). Flash isn’t going anywhere mainly because it’s 20 years worth of technology that we don’t want to flush down the drain. Though there are a ton of alternatives, Flash can do almost anything with it’s ActionScripting and being paired with some good XML.

The second reason Flash isn’t going anywhere is because of the level of interactivity that Flash can bring to the table. Sooner or later social networks won’t be enough; text messaging and watching video’s won’t be enough; everyone will want more interactivity. They will want a better way to look at the people they are connecting with and the companies they are purchasing from. And quite frankly, there aren’t many other relevant technologies that can do it like Adobe Flash, and be so multifaceted.

So, let’s go back to embracing GREAT Flash developments and being awesome innovators. Design can only take you so far, but interactivity and connections can take you so much further.

(rb)

  

Many websites these days have some form of welcome area on their homepage. Welcome pages generally act as an introduction for new visitors, explain the website and often prompt an action on the part of the user.

Website welcome pages are typically more prevalent at personal websites, portfolios, and traditional businesses. They are less popular on news websites (where the headline story acts as the introduction). Of course, welcome areas aren’t considered necessary on sites with a clear purpose and established audience – there would be no point having a welcome page at CNN.com, as their user base most likely already knows who they are.

Often a slogan can suffice to help establish what a site offers. If you are pushed for space, or consider a full welcome area to be obsolete then a brief tag-line explaining what your site does is a handy alternative.

Below is an outline of common traits that are seen throughout popular welcome pages:

• Large, bold typography. Welcome messages are easy to read and have more impact when the type is large, clear and legible. This means good contrast against it’s background, and often bold font choice.
• Plenty of color. In researching this article a definite trend of colorful welcome areas was noticeable. The reason behind this makes sense – the eye is drawn to color.
• Artistic/creative typography and graphics. Often the wider content will have more standard web-safe typography, but the welcome area will have elaborate fonts, complex graphics, lighting effects and imagery. This means that rather than just blend in as another area of content, the welcome area will act as a graphical composition in it’s own right.
• A simple and concise message. You can save the paragraphs of text for elsewhere on your website, a successful website should be summing up your website as concisely as possible, just a few sentences max.
• Informative photos. If a picture speaks a thousand words, then it makes sense to include photos in your welcome area. For a personal site a photo can add a nice human touch, or for a more corporate site a great product shot can speak wonders about the quality of the website/company.

Inspiring Welcome Areas:

To better illustrate these traits, here are some analyses of a range of successful website welcome pages below:

Syropia Labs
Syropia Labs use some really elegant typography in a retro style to create an engaging welcome area. The font choices are reminiscent of a 50s American diner, and the retro patterns and shapes used accentuate this theme. The text concisely and clearly summarizes the site’s content.

Olive and Twist
This welcome message uses bold typography to catch the users eye. The concise line ‘Creative design studio’ perfectly summarizes the site. The fact that this text is the lightest text on the page set against a predominantly dark background means that it really stands out.

Adrenalin Media
The bright, colorful imagery of this welcome area immediately draws the eye. This welcome message is part of an interactive slideshow area, constructed using jquery. The capitalized text is bold, with a subtle drop shadow to contrast it further against the bright blue background.

Luca Vercellio
Luca Vercellio uses a very minimal homepage design, where the welcome message comprises most of the page. The welcome area is relatively subtle, with a soft light effect, and white on light blue color palette. The typography varies quite a lot, but is all light and clear, fitting with the modern, clean website design. Nothing too elaborate here, just a nice simple message, with a personal touch ‘Hello I’m Luca’.

Somersby Cider
Much more a visual spectacle, than a typography welcome area. There is the basic welcome slogan ‘stay open-minded’ but the really impression is created by the beautiful photo manipulation, which features the product in an attractive way. The fantasy world presented creates a magical mood for new visitors, and a sense of intrigue and wonder that should encourage them to check out more of the site.

Sentel
A clean and minimal welcome area with a limited color palette. The key words ‘designing’ and ‘promoting’ which describe company’s key services are highlighted in blue in order to make them more prominent. The welcome message uses a light font, with a solid colored background to help contrast it against the main pixelated website background.

BeMobile
Be Mobile is a really bold website, combining black, yellow and white for a colorscheme with plenty of impact. This welcome message uses creative copy, starting each line with ‘Be’, leading up to their company name ‘Be Mobile’ at the bottom line. In addition to this is a bold, black call to action button, ensuring that the users eye is drawn first down the page, then into taking action.

Aleks Faure
Another example of great copy. This copy introduces the designer, establishes what he does, and adds a sentiment about his quality and work ethic. The welcome area is simple but effective, and uses @font-face to integrate a creative font.

Narax
A really engaging welcome area, with a moving animation of an origami arc to fit with the slogan. The simple slogan ‘Your ark to the web’ is a little ambiguous, and doesn’t really describe what the site does. However, it does create intrigue. It’s actually the under slogan which explains the services offered. The pastel colors and cross-hatched paper area give a feeling of creativity, which fits well with the design theme of the company.

Syropia
This welcome area uses a retro look to help draw in users. The typography is varied, but comes together well as part of a great piece of imagery to headline the site. The copy has a nice personal touch as the webmaster states ‘I’m here to help you get there’. Color is uses sparingly, but red is used to emphasize key words.

Giebe Graphics
Another great example of copy defining the welcome area. The welcome message is very personal, and the grayscale color palette is broken by splashes of blue on key words. The opening line in speech marks (“nice to meet you!”) puts across a lot of energy and really helps connect with the visitor. The font is large and bold, with a subtle indented design to help it stand out against the page background.

Tiny Verse
In my opinion this welcome area has too much text after the initial headline, and it’s not all that legible against the background. However, what really makes this welcome area successful is the exciting photo manipulation in the right. The welcome area background is also really eye catching, and the space age cloud theme is sure to entice people.

Noutes
A bold and bright welcome area that acts as a header to the rest of the website. This welcome area utilizes a large icon for imagery, which provides a shiny, professional touch. The typography is fairly basic, yet instantly and concisely sums up the aims of the website. There is also a large, prominent Facebook Connect call to action.

Touch Tech
Touch Tech uses a great memorable illustration, with relevant imagery of clouds and mobile devices. The typography is large, professional, yet with a friendly aspect to it, using rounded lettering. The copy is very basic, yet instantly establishes who the company are and what they do (‘mobile and cloud developers’).

Gabriel Aloysius
A wonderfully simple welcome area, with some hugely creative typography. Rather than use plain type, the letters act as a mask, letting imagery show through them. This imagery is constantly changing as part of a montage to showcase the photographers work, creating a welcome area with a double function. The way that the letter shapes contain her work acts almost like a window, where you’re wanting to see in.

Bear Grylls Live on Stage
A totally immersive welcome area experience. The jungle backdrop creates an enormous sense of depth, as does the huge 3D typography and foreground photographs. This welcome area perfectly captures the feeling intended by his live shows – that you as viewer are part of the action.

Goodsie
A simple but effective welcome area. The welcome beings with their mission station ‘Online retail should be easy’, which is effective as rather than trying to directly sell themselves, their selling point becomes their integrity and company values. The large, elegant white typography contrasts well against the dark blue background, and the bright call to action button attracts plenty of attention. Notice how the blue background also integrates silhouettes of retail products, creating a subtle but relevant backdrop for the welcome message.

Epic Fleet
A bold, striking welcome area with some nice copy. The emboldened text ‘you can afford’ underlines the central message of this company, which is value. The concise message also instantly states what they provide (‘web design’). Underneath this some examples of their work are attractively displayed in a fan pattern, in order to create additional visual intrigue.

We Are Pandr
A stylish welcome area in an illustrative style. The welcome copy is highlighted by using a simple black backdrop featuring white typography. The main green background uses simplistic illustrations and patterns so as not to detract from the central message. The colors are bright, clean but limited, so the eye cannot help be drawn to the welcome headline.

Bear Hat Studios
A classic example of a welcome area using HUGE typography. The simple textured background ensures that the large text is the central focus, particularly as it takes up 80% of the homepage. There are no fancy words here, just simple copy that clearly states what this company provides. The typography is made more interesting through subtle gradient overlays and faint drop shadows. All of these design features serve to emphasize the welcome text.

Made by Vadim
A creative welcome area with a stylized, abstract illustration at it’s center. The welcome message itself serves to introduce the designer and clarify exactly what he does. The personal ‘Hello’ message is emphasized through the use of scripted typography and large text. The abstract illustration of the designer not only provides a personal insight into his world, but helps to show off his design skills.

Putra Roeung
Another welcome area that concisely states what the website owner does. The subtle background design of this welcome area really works well. If you look closely you’ll see examples of their work and design processes behind the main text. The logo badge is a nice grungy touch to add creativity to the design, and the two call to action buttons are accentuated by sketchy arrows pointing to click them.

Spout Creative
A quaint, easy-on-the-eyes welcome area, this site utilizes pastel colors and soft illustrations to provide a friendly welcome for people. The typography is well organized and uses reasonably informal fonts to add to the casual mood of the website. The illustration of the girl using the megaphone gives the text more of an auditory aspect, as she is clearly announcing the welcome message.

CMYK08
A great example of a highly personal welcome area. This designer combines a personal photo, an informal greeting (‘hello folks!’) and some nice grungy/sketchy touches to reflect his design style and personality. He has manipulated his own photo to fit with the limited color palette of the website, where blue, light gray and black combine to result in a stylish welcome page. The tagline by his photo ‘I think I need a haircut’ is another insight into his humor and presumably approach to design.

Chapter Three
A reasonably formal welcome area, this design uses bright teal colored lettering for the main welcome headline, which contrasts effectively against the dark gray background. Key words are highlighted in orange, and their location (San Francisco) is integrated very creatively into the shape of the Drupal logo (which of course is relevant to the services they provide).

Masswerks
A very simple but attractive welcome area. The copy is a friendly greeting, followed by a description of the firm’s services. The bold black text contrasts well against the bright orange backdrop, and is emphasized further by use of a thin white drop shadow. The fact that the logo and welcome message are on a single line gives a unified sense to the design, and visually connects the company’s brand with the sentiments of their welcome message.

Alan Power
This welcome area avoids being overly busy, but creating a great visual hierarchy, drawing the eye diagonally down the header. The bold, large typography of the welcome area is really eye catching and the splashes of red work nicely. The simple gray background helps foreground the welcome message, which is emphasized by the examples of the company’s work to the left. Ultimately the eye is drawn down the header to the nicely textured call to action button, encouraging client contact.

New Concept
This welcome area uses photography to enhance the message within the copy. ‘Beautiful & Elegant’ describes their designs, but is also depicted by the beautiful, elegant butterfly to the right of the welcome text. When you hover over the butterfly image a magnified circle pops up, providing an interactive element to the welcome area, which helps maintain people’s interest.

Uproar PR
A great example of effective typography in a welcome area. Not only is the welcome type large and eye catching, but it impacts upon the surrounding environment. In this case we see the word ‘NOISE’ actually cracking the surface that it rests on, which creates a much more real environment for visitors. The lens flare effect and metallic sheen also draw the eye. The imperative nature of the copy ‘make some noise!’ is a much more aggressive message than other examples in this post, yet fits with the cut-throat nature of the PR industry.

Joe Guarino
Another designer who uses an informal welcome approach for potential clients. Rather than hide behind a false corporate mask, Joe presents himself honestly and openly, through a fun self portrait illustration and some funky typography. The informal copy ‘Hi, man!’ establishes a friendly vibe for potential clients and helps draw them further into his site.

Kendra Schaefer
This site uses photography as the principle feature of the welcome area. The typography is reasonably large, but isn’t all that legible, and doesn’t provide a huge amount of information. It’s more there for a humorous, abstract message. The photography is the real gem of this welcome area, as it’s dark, moody and emotion, and captures a lot of attention. As a visitor we want to know more about the figure depicted, and as a result browse around the rest of the page for clues.

Shout Digital
A bright, colorful welcome area with a crazy Flash animation. The actual text of the welcome area comes below this animated area, but the quality of illustration and animation is so superb that the site has already won you over.

Convax
This welcome area integrates examples of the company’s work really creatively, by positioning them as a billboard in amongst a sketched out cityscape. The call to action button ‘get in touch’ is creatively integrated into the background, sitting within a sketched cloud shape.

Amit Tishler
A welcome area that’s highly appropriate for an animated, showcasing an awesome vector backdrop for the page. The welcome area includes a Youtube video, which showcasing the animator’s work better than a static image could.

Jeremy Man
This welcome area has an awesome western theme that fits well with the overall site. The welcome text actually isn’t an image, and uses @font-face and some cool css effects to style it. The indented illustrations and background textures create an authentic cowboy aesthetic, as does the copy (‘Heckuva’ Frontier Wranglin’).

NorthEast Creative
North East Creative use some great background lighting effects to foreground their concise welcome message. The colors of this area compliment each other well, and the bright yellow text stands out against the deep purple background. There is a central fan design displaying examples of their work, which works to create depth and a visual attraction for visitors.

Web Munky
Web Munky use their cheeky mascot and colorful logo at the centerpiece for their welcome area. However, the tagline ‘we craft online experiences’ provides an informative sub text for the area. The bright, vibrant colors draw the users eye, and the visual hierarchy effectively prompts you to scroll down the page and find out more about their services.

Media Germ
Another great example of text masking. This media company lets their work show through the shape of the welcome area lettering. The typography is really bright and eye catching, although the legibility is slightly hindered by the busy fill. The length of each line of text means that the eye is naturally drawn down the block of text to the smaller call to action button.

Raven Tools
Raven Tools use a relatively reserved color palette for their welcome area. However, the great background lighting and creative typography adds a lot of impact. The copy is concise and immediately lets users know what the company does: ‘A powerful internet marketing platform for agencies and professionals’. The screenshots beneath this help showcase how the platform works, followed by a bright call-to-action button.

Crssrd
A really artistic welcome area that shows off the artist’s talents. The grungy illustration fits in perfectly with the surrounding textured website and typography. Even without analyzing the copy of this welcome page it had to be included as an example of how a great central design can make a welcome area memorable. Remember – a picture can often be worth 1000 words, and in this example no text is required to showcase the designers skill.

(rb)

  

When designing a website, many of us just neglect the error pages considering them insignificant. But the fact is many visitors come across these 404 error pages either because of typing a wrong URL or due to any other number of technical reasons.

Visiting an error page is not a pleasurable experience for a visitor but web designers can make it pleasurable by designing beautiful and creative error pages. All it needs is a little bit of creativity and some quality time, and your error pages will stand out. Here is a list of some creatively designed error pages that will inspire you.

Entertaining 404 Error Pages

Agens
This error page is designed with extreme creativity that features an astronaut being lost in the outer space.

Giraffe
Giraffe features a mascot guiding the lost visitors, showing them how they can get back to the site again.

Frywiles
The missing bird in the row represents something is misplaced and cannot be found. Proper navigation is provided to help users get back to the website.

iFolderLinks
A baby weeping over a computer greets you when you come across the error page on iFolderLinks.

Apartment home Living
A very interesting approach of designing 404 error page. A nice ol’ chap appears whenever you come across an error page and a lady peering from behind the frame lets you navigate the website properly.

Factor D
Factor D features a beautiful yet terrified vintage scream queen to indicate the horror of being lost.

Sure Dev
This error page comically appears as if the user has broken the site with their plate spinning shenanigans.

Blizzard Entertainment
Here is another example of the site appearing to have been broken by the user.

Milrayas
With a whimsical play on the Where’s Waldo series of books, this 404 error page playfully asks where is the page?

TK Designs
This page uses an illustrated, space age character running through exasperated and lost. The page includes a search box to help users find their way again.

Blue Daniel
This extremely interactive (complete with animation) design is brimming with creativity. Set in a mock NYC subway line dubbed track 404.

Bit.ly
Here the mascot is floating out to sea, far from the familiar shores of the site.

8bitpeoples
In true 8bit fashion, just what you would expect from this site, comes a little creativity to go a long way.

Audiko
Has an extremely colorful and artistically crafted error page. Bold and beautiful.

Cooklet
Appropriately designed 404 page that simply says you came too late, the empty plate an indicator that you have missed out on something.

NPR
The 404 error page for NPR is designed in such a way that it redirects the lost users to the stories of lost people, places and things.

Prime
The site’s creative way of demonstrating that something is missing, easily earned it a place in this showcase.

Spiritual But Not Religious
This site uses a tongue in cheek sense of humor that plays into the site and its mission wonderfully.

Good Old Games (GOG)
This innovative 404 design suggests that the page you were looking for has broken out of the site and is now lost somewhere in the cosmos.

Abduzeedo
A very creatively designed error page that also uses the lost in space theme to inform visitors that the page they sought could not be found.

HomeStarRunner.com
This 404 page takes a bit of a different tact. Instead of being helpful, they berate the user and tell them to go away.

Hoppermagic
Here Hoppermagic takes the whimsical route, deploying their rabbit logo who has chewed on the cables and caused the error.

WeAreTeachers
This error page plays on the age old excuse given to teachers when homework was left undone, which works well on a community site of teachers.

Wooga
This error page also goes more of the comical route with their weeping raccoon, saddened by the users error.

Zappos
Here the cute, little weeping penguin also plays on the idea that the users error has caused the sad face. They also provide you with navigation that can take you onward and the make the penguin happy again.

Blippy
A vividly colored and extremely beautiful 404 error page. With an animated rainbow that appears to make the sadness of the 404 error go away.

OrangeCoat
OrangeCoat has designed a creative 404 error page flowchart that works with its users to try and figure out what caused the 404 error and to then help them along their merry ways.

Jolie Poupee
This error page was designed for Jolie Poupee which is eco-friendly children’s clothes stores. It is the perfect blend of cute and creepy.

Warhammer online
This fantasy gaming site uses imagery from the realm, mixing humor with the lore for their 404.

Twinpx
A visually compelling 3-Dimensional rendering of a broken 404 image is used to grab the users attention and let them know they are lost.

Planetgeek
The page features a small bit of the classic 404 error page as an appropriately geeky t-shirt design, and gives the lost users proper navigation options to return back to the site.

Limpfish
A very simple and clean error page designed like a torn out wanted ad from a print publication announcing what the page is missing, and needs to be complete.

Deliciously Creative
Employing the imagery of a broken egg as they explain that something may have broken, their playful explanation playing into the imagery and site’s mission, this 404 page is wonderfully simple and creative.

D20srd
This playful and entertaining take on a 404 design sets up the page like a role playing game trap deployed on its visitors.

Clubpenguin
Using some of the sites animated penguins, who are checking a map to show they are lost, this 404 design has the penguins point you in the right direction…towards the navigation.

You may also want to consider our previous posts:

• 404 Error Pages, One More Time
• Single-Page Websites: Examples and Good Practices
• Best Practices For Effective Design Of “About me”-Pages
• 35 Inspirational Shopping Cart Page Designs
• Showcase of Creative (But Not Necessarily Usable) Contact Forms

(rb)

  

Last week we had a showcase of Italian web design from a member of the Italian web design community. This week we have a showcase from a different perspective. This week, we have a showcase and look at Italian web design from a designer outside of that community. Complete with interviews and more, this second installment will hopefully paint a fuller picture of the state of the web design industry in Italy.

Some Background and Influences

The Italians are remembered for producing an ongoing stream of gigantic and awe-inspiring artworks, largely based on the intellectual climate or religious trends of their times. Frescoes and mosaics have been a staple in Italy, from the medieval period onward. Byzantine art was largely decorative, colorful and calligraphic. Naturalistic art was next, created by the groundbreaking Giotto de Bondone. Gothic art emerged at the same time, also called the International style.

Patrons emerged from rich and powerful clans in the 1420’s, and remained influential for half a millenium. This was the time of Donatello, Brunelleschi, and Alberti, who looked back on the classical period for inspiration. Tuscan painters Fra Angelico and Fra Filippo Lippi experimented with color during the same era.

Lyrical artists, such as Botticelli, Filippino Lippi, and Baldovinetti emerged next, paving the way for the Big Three: Michelangelo, Leonardo da Vinci, and Raphael. These great masters were rivals for ascendancy during the Renaissance—Raphael with his religious paintings featuring Madonnas, Leonardo with his wildly imaginative notebooks and Michelangelo with his Sistine Chapel. Mannerism followed in the early 1500’s. Titian was the foremost master of Venetian painting, characterized by luxurious color, sensual bodies and exquisitely lit paintings of scenery.

By the 1600’s, Rome was the epicenter of a new style, Baroque art—church ceilings decorated with clouds and cherubs. The energy and joy of all things Baroque was best captured by Bernini. In the next century, the Venetians again ascended with the rococo style, distinguished by its immense landscapes. Italy’s impressionists pre-dated all others. Their expression of this movement was through light and shadow (macchie).

More giants emerged with the two schools of Post-Impressionism. Those who meticulously depicted strict structure were Cezanne and Seurat. Those who experimented with color and shape were Gauguin and Van Gogh. Its name (Neoclassicism) explains Italian art’s swing backward once again into the design aesthetic of Ancient Rome and Greece. Artists Leon Battisa Alberti and Filippo Brunelleschi utilized the elements of mathematical symmetry and geometric proportion. As the 20th century dawned, Modigliani became the acknowledged master of Expressionism, followed by Cubism and Futurism. Girogo de Chirico edged the Metaphysical movement toward Surrealism.

In Web Design

Italians express themselves aesthetically with the inborn fluency that other humans use to breathe. Therefore, Italian graphic design displays an expected strength and freedom of expression, while maintaining a surprising softness and informality in its design elements.

Italian design schools include the study of art history and public spaces in their web design curriculum. Basic art principles are used as a grounding, such as color theory, expression of geometric shapes (especially the square) and optical illusions.

Modern technical skills are combined with humanism, so that practicality and user interfaces are uppermost. Italian web design maintains an intimate connection between the creator and the observer.

What’s Unique About Italian Web Design?

Here are some other issues:

• They use a usability rule called “Tired Rule”, which outlines a specific set of usability guidelines to follow.

• The websites often enough require to be published in two languages (Italian/English).

• Italian web designer earn less than british or american designers.

• They have a particular taste for retro style in typography,they use and mix fonts to obtain a perfect geometry and an perfect readability for their design.

• They are extremely precise and take care of the details, by doing so, the website will be noticed for sure.

• There are features in common to almost all the Italian sites.

• Many designers are still using Flash, So there are alot of sites created by Flash.

• Beautiful Domain Names.

The State Of Affairs

We talked to people in the Web design industry in Italy to get their opinions on the state of affairs.

Q: Could you please describe the life of a freelancer, developer and designer in your country?

(Your Inspiration Web Staff): Working as a webdesigner – especially as a freelancer – can be very stimulating and quite demanding: looking for inspiration, working on the design and development phase, studying and honing one’s professional skills, etc…In terms of one’s personal life, working hours don’t exist, daily schedules don’t exist. One can be sleeping during the day and working at night, or having to work for ten consecutive projects without having any inspiration whatsoever…this is a struggle that every freelancer, developer and designer must confront on a daily basis.

(Piervincenzo Madeo – PV. M Garage): I’m taking my initial steps into this world. I have a ‘strange’ background story, because I come from engineering studies and for this reason I don’t have a complete view of a real life as a freelancer. But I can say that to start my activities, in order to engage clients and to create a strong network, I had to take a look beyond the italian borders… I have to write a blog in english to have visibility, and I have many requests from clients who live in other countries. I love Italy, but it’s hard to begin a professional activity in web design field building (basing) a business only on italian audience.

(Raffaele Rasini – Creative Bits): Difficult, almost all web designers start out as a freelancer but without an entrepreneurial spirit and desire to get involved in a sector where there is plenty of competition after the first year many decide to go to work in a web agency or even change job direction to something more classic and recognized. We must hold on, collaborate with other web designers and choose carefully (when possible) the works that are proposed in accordance with the potential advertising that could generate more than the earning after work.

Beaver Lab

(Egidio Bacigalupi – Beaver Lab): Life is hard … especially to get it started! We work at any time and the idea of the weekend and spare time disappears. We must be available and open with our client: the satisfaction is crucial because the word of mouth is still the best market strategy. Our daily diet is based on many coffees and we must never lose the desire to take the risk and to be as much creative as possible!

(Michela Chiucini – web is love): The life of a freelancer has some pros and cons. Sometime we have to work more time than employees but we also have the freedom to manage our working hours and projects; the most annoying aspect is the paperwork, I hate it.

Q: Where do you get inspiration from?

(Your Inspiration Web Staff): I believe inspiration is a universal thing, just as its sources tend to be. It’s true that we look at CSS galleries once in a while (as well as blogs which focus on web design) looking for ideas, but most of the times I’ve noticed that inspiration comes in the form of flyers, tv ads, photos, colors, fonts, wallpaintings…a little bit everywhere, and rightfully so.

Web is Love

(Piervincenzo Madeo – PV. M Garage): Usually on-line, from css galleries and works of top-designers all around the Web; sometimes also off-line from magazines, newspapers, from TV too. But being active in the design community is my biggest source of inspiration: great people, stunning works and helpful ‘colleagues’.

(Raffaele Rasini – Creative Bits): Many say that to find inspiration one must observe nature, go for a walk and take photos, get off the computer and look for creative input elsewhere, I find this good and necessary, but I also think that since we are ux designers and not painters we also need to consider the various web resources like patterntap.com or the wonderful drawar.com that allow us to follow, analyze and replicate the solutions to common problems without having to reinvent the wheel each time.

(Egidio Bacigalupi – Beaver Lab): Internet is the best source… but often the best ideas rise up during a trip by car or chatting with friends over a plate of pasta.

(Michela Chiucini – web is love): Inspiration comes when you look at something familiar with different eyes. There isn’t a particular source where I get inspiration, it could happen reading a book, watching a movie, travelling, walking or just sitting in front of my computer. Rather, the most prolific moments are late afternoon and early morning.

Q: How do Italian designers handle typography? Are any font embedding techniques widely used? Is the choice of available fonts big? How vivid is in your opinion typography in Italian web design?

(Your Inspiration Web Staff): Of course, Italian designers are no exception, they know that good-looking typography can determine whether a website or design will be successful or not. We use some of the most common techniques, such as @rules “@font-face”, which are provided by CSS (currently supported by all major browsers), cufon, sifr… basically all of the main techniques present in this sector.

Multiways

(Piervincenzo Madeo – PV. M Garage): If I think about pro-designers, really pro, I have to say that they work superbly with typography. They have a particular taste for retro style in typography and I love how they use and mix fonts to obtain a perfect geometry and an perfect readability for their design. It’s just my opinion from my experience, but I don’t think there is a large use of embedding techniques, but who looks for a wide choice of fonts, for web design works, they use @font-face. It works quickly and without adding problems to the development routine.

(Raffaele Rasini – Creative Bits): The web panorama in Italy is not so advanced as one might think, with regards to typography we can not compete with the quality of other countries, as I said before there are too many beginners who decide overnight to be a web designer without any graphic background, without having studied the essential bases of typography that are necessary to achieve at least a decent website, this does nothing but increase the mediocrity (at least from a designer prospective) of italian websites. Fortunately there are also real professionals that they do their job well and bring a breath of fresh air in an otherwise depressing web reality.

(Egidio Bacigalupi – Beaver Lab): I love typography (I also deal with graphics and printing). I think fonts give you great potential for communication and have an intrinsic beauty. There are many beautiful fonts but also creating your own is fascinating. In the last period we are developing projects through the interaction and composition of fonts and the use of kinetic typography.

(Michela Chiucini – web is love): In Italy many designers are still using Flash, this has been the widely used solution for a long time. In html based websites the choice is the same as for other countries. Luckily more and more clients are asking for html websites so the attention on typography is increasing.

Q: What’s the situation on the market? How much do designers earn?

(Your Inspiration Web Staff): The Italian market is still quite young in regards to web design. The term ‘webdesigner’ is used very loosely, and one can be labeled as such even without having the necessary experience. Often enough, clients have a hard time distinguishing between a great-looking design and website with one that is mediocre and amateurish: they still think that what’s important is to be on the web, without considering the how. Because of this it’s quite hard to find clients who are willing to invest adequately on creating a website, considering that there are providers who charge ridiculous prices, such as 100 euros. Having said this, a webdesigner’s potential earnings is based on his or her level of preparation: some webdesigners succeed and are able to make a living with this while others might pick up webdesign to make some money on the side.

(Piervincenzo Madeo – PV. M Garage): There is thing that I can affirm without fear to mistake: ‘italian web designer earn less than british or american designers.’ Here, I’m talking only about italian scene, the culture of web lacks. We have to educate a client before asking for a payment, because many italian clients think a website can be done in one day expending 100 Euros.

Studio Grafico

(Raffaele Rasini – Creative Bits): There is high demand but few realize how much work there is behind a website and expect the prices of a flea market, I think the average earnings of an Italian web designer are at least 1/3 of, at the same level of capacity, what an American earn.

(Egidio Bacigalupi – Beaver Lab): The market is saturated, the communication culture doesn’t exist in many companies and it is not so easy to get paid … you need to propose yourself in a new and fresh way to be convincing and be economically competitive! I also believe there are profound differences between north and south: the north is certainly more receptive and willing to invest in the communication field.

(Michela Chiucini – web is love): Many clients are just discovering the importance of having a well crafted website and this is a good thing, but it’s still an underpaid job if compared with other countries.

Q: Is being a Web designer considered high-level, sophisticated work?

(Your Inspiration Web Staff): Not exactly, a lot of people are still confused about what a web designer really does and many believe (frustratingly, I must add) that web design is not really a profession but a hobby, something that is easy to do. Only few people really understand the passion, the sacrifice and the years of study that are needed to be in this line of work, so that these people also understand the true value of webdesign: economic as well as mental. Hopefully things will get better, I really hope so.

(Piervincenzo Madeo – PV. M Garage): As I said here the culture of web is lacking. For this reasons there are many people who think that with a CMS installation nothing is impossible. After some days and a lot of failed attempts the looking for a professional web designer begins. So, those who know the issues and the hard work that there is behind a well-done website deeply respect our work, other people tend to think of web designing and developing as a low-tech job.

PV.M Garage

(Raffaele Rasini – Creative Bits): Unfortunately not, many see us as computer experts who also make web sites. Actually it is not so, it is a serious and very important job, the figure of a ux/web designer is essential and irreplaceable, their work can literally determine the success or failure of a web service, regardless of the efforts of a marketing department, if made in the wrong way.

(Egidio Bacigalupi – Beaver Lab): It’s a work of precision as for printing. We have to be extremely precise and take care of the details: by doing so, the website will be noticed for sure … But unlike print, you can correct mistakes or change something in the works without compromising it. From my colleagues’ perspectives this is definitely a high-level and high-precision work, while it’s different with clients: they often make everything easy and give little value to our work.

(Michela Chiucini – web is love): It strongly depends on the culture the person has about the web. Those who have got enough knowledge of web issues, of course, appreciate our job. We could say that to learn web design is as simple as to learn to do it badly, that’s why some people think it possible to be able to craft a website in few hours with little effort; clearly these people are the first not to consider web design sophisticated work.

Q: Do you see any remarkable differences between Italian designs and ones in the US and Western Europe?

(Your Inspiration Web Staff): Honestly, I can’t think of anything. I feel that web design is not a sector in which one can find differences resulting from different countries, on the contrary: a sense of aesthetics, development, programming language…all of this is considered universal, bringing web designers closer to one another, something which I don’t think can happen in other professions. We are all part of the same club.

(Piervincenzo Madeo – PV. M Garage): As I said here, in Italy, the ‘ignorance’ about this field is widespread. This creates some problems when we must explain to our client why we want to earn 20 euro/hour, 15 euro/hour or 30.  So, there are people who to earn their ‘salary’, they push down the manometer of ‘quality’ and pump the ‘quantity,’ for this reason many italian web designs have an ‘ordinary’ quality (minimum for decency). However there are great designers, I’m thinking of Michela Chiucini , Simone Maranzana , Francesco Mugnai who work and create great designs following recent world wide trends designing their website.

(Raffaele Rasini – Creative Bits): Abroad have more courage in breaking the rules and trying something completely different from the rest, in Italy there is much distrust for everything that is new and it always ends up starting to use a model already tested with little creative freedom.

Creative Bits

(Egidio Bacigalupi – Beaver Lab): I think they are a step ahead and more innovative. They set the rules and trends of the moment…and they like to be different and dare!

(Michela Chiucini – web is love): I see  remarkable differences between good designs and bad ones. Nowadays we see good designs from every country. The web is a global medium and every person follows his own taste and cultural background.

Q: And how does all of this work? Is the situation currently good or difficult? Do most customers want to have an English-speaking or Italian-speaking sites?

(Your Inspiration Web Staff): I can say that the situation is improving, businesses have started to understand the potential of the web and of its economic benefits. This is why they are willing to invest online more and more. The first businesses to adopt and take advantage of the web were tourist-related enterprises such as hotels, restaurants, and bed&breakfasts which often enough require a website to be published in two languages (Italian/English), since they must be found easily.

(Piervincenzo Madeo – PV. M Garage): In general, the situation we have here can only improve. But I think we are turning the right way. English-speaking or Italian-speaking, you said… depends on the client’s target and what kind of website they need.

Your Inspiration Web Staff

(Raffaele Rasini – Creative Bits): There are ups and downs as in the other countries, the economy is recovering and the urge is coming back to get back into play with new projects but the time has lengthened, all is progressing slowly and there is still much uncertainty. I am still positive that within 2 years everything will be back to normal as before the crisis. Surely one of the main factors that have most impacted the Italian economy is the decline in exports to other countries so it is now almost obligatory to have a web site in English, even more than other languages like French and Spanish.

(Egidio Bacigalupi – Beaver Lab): The situation is often difficult because to set in projects poorly designed is always more and more complicated. All customers want a multilingual website but they often don’t provide the contents in the main language. Luckily, some recent experiences gave me hope: companies are starting to understand the true potential of a website well structured and rich in content, and they want to invest time and money.

(Michela Chiucini – web is love): The general situation could be definitely improved for the reasons mentioned above. Italian, English (or both) strongly depends on what kind of website customers want and on the market they are turning to. Anyway, even if not strictly required, an english version helps increasing the traffic and makes a website look more professional.

Further Showcase Of Italian Web Design

iDecorabili

A.S.D. Caimano Rosso

L’isola Nel Grande Verde

Rue Ballu Edizioni

Rico Donkey

Pinarello

Operabike

Gruppo AFV Beltrame

Laborlegno

Minacciolo

La Casa Del Bimbo

Miller

Blue Kitchen

The Brain Box

Pixelica

Wally

Interactive and Design

Pubbicita Napoli e Milano

Angelo Barbagallo

Cocorico

a67

Giulia Ottonello

Cascina Selva

a fine day between addictions

Il Mondo Di Air

Regione Del Veneto

Fabiano Fiorin

Noir Italiano

Siti Web Genova

Metrico

Anthos Formazione

Andromeda Murano

McDonalds

Weberia Design

Alex Britti

Eros Ramazzotti

Francescail Film

Giambalvo + Napolitano

Amarano

Emmealcubo

Arthe

Global Shipping

Le Pedane Vibranti

La Botteghina

Frutteto

Riccardo Sardone

Salvio Simeoli

Belmonte

Rossi Graziano

Villa Mastai

Minuzzo

Cavalli

Fabrica

Lapinarello Cycling

Klekoo

Samdesign

Illyissimo

Francesco Curci

Kieran Dodds

Mimic Lab

Molo71

Villa Fornaci

Holy Hands

Silvia Cossu

kalispious

Roberto Sbolci

Labile Booking Agency

Marina Yachting

Nicola Mariucci

Imaginepaolo

Sito Di Gregotti

Zeta Cartoon

Michela Chiucini

Filippo Protasoni

Accedi

Rosso Helmets

Francesco Agnoletto

H-art

PMS

Pubblicita

Andrea Gandino

Scuola zoo

Siloos

Francesco Gavello

Villa Dario

Nerdy Dog

Simone Maranzana

Prodotti Tipici

Reset Studio

Passiomatic

Links

• liquida

• pycon

• Technology Transfer Events

• Design Blog

• Life Gate

• Designer Blog

• Design Tale Studio

• Young Designer

• Chic Magazine

(rb)

  

It all started in the middle 90s. The Internet in Italy was slowly coming out from its early age when it was somehow still synonymous with cyber-culture. World Wide Web was becoming larger known and young dudes with 14k remote modem connections were spending their nights updating rudimentary personal pages on Geocities all along the Belpaese.

As soon as the potential of the new medium was revealing itself, more and more geeks with different backgrounds began experimenting deeper with HTML, Photoshop, Flash and the first releases of web-oriented programming languages. Those pioneers were soon generically renamed ‘webmasters’ without any proper distinction if they came from design, computer science, art or marketing.

Italian Web Design: HumanLab

Outside, in the meantime, a global new economy was rising and the italian industry (as well as the most far-sighted Italian middle and small entrepreneurs) started to invest money for having their magic window on the new virtual world.

Then it happened, in Italy as elsewhere in the world, the whole thing got more complex and challenging. Different needs were surfacing and new professional profiles with specific skills needed were flowering (web designers, web graphics, web developers, web marketers, web project managers and so on). In this scenario, a new awareness was growing: the look and feel of websites mattered as much as their content, as much as their usability. And getting to this place has probably been the tipping point that has consecrated ‘webdesigner’ as a profession itself.

Valentino Petrolati

From that point on, Italian web design in its brighter examples, has always tried to go hand in hand with the current state of the art. Despite a low national attention on any kind of web culture that makes it somewhat difficult to spread any new media to the masses and in attracting higher levels of investment, in comparison for example to TV advertisement, it’s still a fairly active and dominate market in Italy.

State Of Things

From art to fashion, from food to crafts, motors and boats, Italian style and creativity have always been pretty appreciated around the world. Sometimes ‘made in italy’ has even ended up being considered a virtual brand in and of itself. But what about in the area of web professions and digital arts? Could Italian contributions in web design become as relevant as in those more traditional fields one day?

Trying to get a snapshot from the real-world situation in Italy, we contacted three Italian freelance web designers to hear what insights they could provide. Three people with different backgrounds and approaches, but all of them sharing a real passion for their work: Antonio Moro (aka Itomi), Laura Gargiulo (aka Lauryn), Giuliano Ambrosio (aka Julius).

Dora Mes

Q: How do you feel the standards of Italian web design compare to the rest of the world? Which are the main analogies and differences?

Antonio Moro: The problem in Italy is that we never came out of the big ’2001 web industry boom’. Until the year 2000 there were big agencies in Italy with hundreds of people working, I was one of them and I was enjoyng the end of my ‘freelancing’ era in a big bang agency.

Then the bottom fell out and a lot of agencies closed down or resized to small companies producing a lot of unemployed wedesigners that recycled themselves as hungry freelancers.
And after 8 years we’re still there: lots of freelancers and just small-to-mid sized agencies.
This is a shame because lots of freelancers and small agencies means that the market is tumultuous: there’s a price-war where the clients started to think that the cheapest one is the best one. But as you probably know this isn’t true, at all.

We have a lot of talents in Italy, but without good agencies it’s hard to grow up from a talent to a real professional. The difference is easy to understand:
if you work at home, with your mac near the bed as a freelancer it’s hard to fully understand the market and to become a real professional web designer.

The other problem is the lack of good web design schools. The situation is changing and there’s a bunch of new good private schools around, but they’re really expensive and (as all private schools in Italy) they’re not selective with students.

If you pay your dues, you’re good. We need more involvement by the State’s university (college) system. We need to start new web design courses in our art colleges. And, above all, we need to integrate our school system with the real world (the web agencies) as there is no better place to learn a job other than being on the job.

Laura Gargiulo: Italy is still a step behind in web standards. There are lots of companies that boast of selling web services without having any skills to do it. So customers are still skeptical about these new technologies. But things are changing…

Giuliano Ambrosio: Personally I don’t think there are some standards, web design for me it’s art, and as an art it can be expressed with different techniques depending on the artist. Every person gets tainted by various inspirations and this permits to create and expand unique projects.

Internet gave the possibility to share with other people our own art and consequently inspire passion.

Daniele Cascone

Q: Do you feel any kind of “national identity” or “similar attitude” existing between web design and other more traditional creative disciplines made in Italy? (photography, illustration, architecture, fashion, …)

Antonio Moro: Italians are creatives, this is an old adage, but it’s still true. So we put our creativity in each thing we try to do, from photography to fashion, from architecture to… web design.

I don’t think there’s an “Italian style” in web design, just as there’s no “American style” or “Nordic style” or “French style”. The inspiration and the melting pot of web design comes from the whole internet so it’s really difficult to develop a national style if not completely impossible.

Designers from all around the world share styles and techniques almost in real time. I see this as a really good thing by the way.

Laura Gargiulo: Yes, I think Italians try to do everything with style. The common stereotypes are that Italians are good in fashion and arts such as painting and sculpture… well, we try to be creative also in web design, sometimes going beyond the trends.

Giuliano Ambrosio: For me there are many and various contaminations of inspiration between different disciplines, especially photography and fashion.

In these disciplines we can notice similar techniques and effects to web design. Moreover we can all agree that the Internet gave us the possibility to soak in inspiration every moment from every kind of art comfortably with a click.

Giorgio Armani

Q: Do you think Italian, our beautiful mother tongue, is somehow a limit to the potential of web projects made in Italy? Do you usually join resources (I mean blogs, tutorials, forums, social networks, …) in Italian or in the English language?

Antonio Moro: Our medium is the internet and the mother tongue of the internet is English, that’s it. If you’re going to create a web project you’re probably going to do it in English. It really depends on the target, by the way, and I don’t think that we need to push our mother tongue too much.

Laura Gargiulo: I join different resources, both in Italian and English, but new web designers are reluctant to learn this language, even if it’s a door open to a million resources and learning new techniques.

That’s why I decided to open an Italian mother tongue blog, to help people find the resources they usually don’t explore because of the language barrier. Instead some Italian bloggers write in English to let in people from all over the world. It’s a choice that I agree with.

Giuliano Ambrosio: Unfortunately writing in Italian on some subjects can limit your own diffusion, so I usually try to bring barriers down with translation services that I put in my blog. Certainly beginning by writing in English can permit you to open the doors of your place to a vaste audience.

Often I read blogs like Smashing Magazine and foreign tutorials where it’s possible to notice a great creativity and inspiration, which are basic to continue in developing.

Vicmatie

Q: Are there any regular meetings or events about web design in Italy?

Antonio Moro: There used to be some, I was one of the organizers of the first one, PixelDNA 2001, attended by thousands of professionals. Then the scene collapsed a bit and now is reorganizing something.

The focus of the events now are mainly on other aspects other than design, like web marketing and SEO, but I hope that something new, something better will be organized in the near future.

Laura Gargiulo: Not specifically, but there are more and more events growing, like VeneziaCamp or Wif Italia. I believe in future there will be more attention on this profession.

Giuliano Ambrosio: I often follow some seminars and meeting in Italy organized by Adobe and other associations, because I mainly use their products for my work.

These meetings permit to increase our knowledge base and meet new realities. At present I’m organizing a workshop dedicated to the world of Web Design that will be included in the Web Design International Festival event for the first time in Italy.

Don Juan de Marco

Q: Web Designers VS Web Developers. Is there any open war between them in Italy? Do you see their interaction as a limit or a benefit for creativity?

Antonio Moro: There’s an endless war and this is part of the game. But the result of this is that the final product usually is better. When two worlds collide, something better will grow.

I started as a programmer and then moved to the other side, I can understand both points of view and this is a great advantage for me at work.

Laura Gargiulo: Eh eh there is a thin war, but in a proven team web designers and web developers try to find solutions together without limits to creativity or functionality.
Open source CMS has limited these interactions, and web developers are working less I think :(

Giuliano Ambrosio: We often talk about an open war between Web Designers and Web Developers, useful to compare and understand the needs between the two professional figures.
My professional figure permits me to be in both categories, this involves a different point of view in creating web services, because of this I understand the requirements of a Web Designer and of a Web Developer.

As we say, “Union makes people stronger” and it’s logic that sometimes more professionalities permit to optimize times and costs to reach a common objective.

Nuova DesignLab

Q: What about SEO and Web Marketing in Italy? Do you think these discliplines are somehow influencing the look and feel of websites?

Antonio Moro: Absolutely. You can design the best website in the world but if nobody accesses it there’s no sense in it, right? So SEO and Web Marketing must be not only understood by a good designer, but they must influence a lot the design itself and this is good.

Now I’m finding myself designing what are basically WordPress themes with CSS+PHP+HTML in Coda with super optimized SEO elements while only 4/5 years ago I was usually starting the process by launching Macromedia Flash. This is no more and you have to adapt to it if you want to create a good product.

Flash websites are dead. Death to full flash websites.

Laura Gargiulo: Yes, good web marketing is coming out more and more, and web design is going that way but only for commercial sites. SEO is growing, more people believe in search engine and indexing.

Giuliano Ambrosio: SEO and Web Marketing changed formats, content got conformed to graphics. I had the chance to collaborate with different agencies in this sector, graphic and content have to adjust themselves with some good tips to get well index/linked.

From 2007 I’m the author of JuliusDesign.net a personal blog where I share with my readers, experiences and usefull services in the domain of the web design. This blog and other projects gave me the possibility to try some index/link and marketing techniques connected with design.

Aretè ShowRoom

Q: Let’s think about a typical Italian web design customer. How much freedom are you usually able to get for the creativity of the project? Is it hard to impose your choices to marketing managers or small entrepreneurs?

Antonio Moro: It really depends on you and on your skills. And I’m not only talking on design skills, but on your communication and marketing skills: you have to push your ideas, you have to be able to justify them and to be clear on the purposes, the medium and the target. You have to explain to your client what he needs, what his customers needs and why what you have created is the best solution.

I refuse the “three proposals” way because by creating three completely different solutions you’re basically saying that there’s three perfect solutions. That’s obviously not true. The usual result is that your client will start to merge ideas and you don’t want to give him this creative freedom, they don’t have to be creative, they have to be objective and just say “it’s ok for my needs” or “it’s not ok”.

I don’t know very well the foreign clients, but I think this is a worldwide problem.

Laura Gargiulo: Maybe I’m lucky, but usually when I suggest two or three layouts they choose between them with few modifications, limits are only defined by functionality and usability.

Giuliano Ambrosio: My experience permits me to say that sometimes there are clients which have fixed ideas for some specific projects where you cannot put a piece of you in it, but just give back the work finished.

There are also clients that leave it completely in your hands, all the Web comunication, because they recognize an experienced person with talent in the web design domain. This gives the possibility to have a lot of freedom, maybe with just some guidelines.

Armando Testa

Q: How “hard” is it to be a web design freelancer in Italy today? I mean, is being a Web designer considered high-level, sophisticated work?

Antonio Moro: Not at all. That’s because there’s way, way too much freelancers in Italy. It’s way too easy to start your personal one-man-show studio and the small agencies around usually force you to start one.

The result is that the demand never meets the offer and the price of the services offered falls way too much. I know this is a worldwide problem, but in Italy we suffer it a lot because our clients don’t have the design culture to evalute the service.

And when you miss it your only parameter is the price. That’s not good at all.

Laura Gargiulo: Not at all, it depends on the customer. Professionals of other sectors know the value of your work, but they want always to discount prices…most think that a web designer is a nerd closed in his bedroom like Neo of the Matrix so you need only food and dvds, and they would like to pay you in proportion :)

Giuliano Ambrosio: Unfortunately in Italy web designers as a professional figure it’s less recognized compared with other countries, because the term “Web Designer” is connected just with the creation of a website.

We all know that sometimes Web Designers freelance, performing more than one role. Creating a website does not mean just creating graphics, but there’s a study of web communication, index-linking, development of ideas, different professional figures which are portrayed by different persons in a web agency.

Nowadays having more than one professional figure, certainly helps in finding new clients.

Million Frame

Q: Based on your experience, which tools or resources in web design (i mean a software, a programming language, a framework, a technique, a technology …) do you think are more overestimated and which ones more underestimated nowadays? Why?

Antonio Moro: Uh. There’s not that big choice of services/software around to justify this question in my opinion :) On the software part you have just one big choice: Adobe Creative Studio, that’s it. This is good because you just have to learn one suite of software and bad because there’s no more competition.

About programming… there’s PHP. Using something else is possible and maybe encouraged by someone, but you will find way more resources, frameworks, etc. if you develop in PHP. Flash is used for video and for small animations/skits inserted inside HTML websites. “Yugo Nakamuras” are no more needed, I’m sorry. We’re in the web 2.0, where webservices, blogs and content are the main subject of interest.

If you have to create a blog/website use WordPress. If you need a CMS use Joomla. It’s better to choose the most standardized one as it’s easier to find resources, help, new freelancers that know it and so on.

Laura Gargiulo: Fortunately my experience is going the same way of web design trends: ajax and xhtml-css languages, Adobe software, sprites and WordPress are the best way to make web designs.

Giuliano Ambrosio: There are various and very good programming languages as Ajax or libraries as jQuery with whom it’s possible to build real killer applications.

These languages often remain unknown by the bigger part of inexperienced web designers. In fact sometimes I believe there’s a preference in using languages as Actionscript, that permit to create interactive applications, but less idex/linked compared with the ones created with other languages.

I love Adobe Flash technology for its intuitive UE but sometimes it’s necessary to know other languages that could give more and better results. The choice and the knowledge of what tools to use for making a project are basilar to realize it.

Piaggio Aero

Q: What advice would you give to a fellow Italian teenager that dreams of becoming a rockstar web designer one day?

Antonio Moro: Finish your school, go and knock on every major web design studio’s door in Italy and beg for an internship. Don’t hesitate to move from your city: move to a bigger city and find your dream job by starting from the base. Don’t listen to your friends, to your girlfriend, to your parents, just do it.

Start by creating something and by learning the basics (see the previous answer), create your niche expertise by learning a framework or a technique. Develop you personal website and blog, learn to write a post correctly, learn to write. You don’t need a college, you need to find out what you’re good at and you need to do it in a real studio.

Join communities and create your network of contacts and friends in the field. Use your college money to move to a bigger city, buy a decent workstation (Macintosh please), browse the web for resources, help and tutorials.

Don’t think that design is just designing something in Photoshop or Illustrator: it’s not. You have to learn marketing. You have to learn basic programming. You have to learn a lot by creating something concrete.

Don’t waste your time on books, you don’t like it, right? So you’re not learning. It’s that easy: otherwise when you create something real you can appreciate the results, you can appreciate the feeling in finding the solutions to concrete problems and finally you can become a real web designer.

Laura Gargiulo: First: browse, browse, browse. Only loving websites you will learn techniques, usability and learn design trends. Second: find web design resources like Smashing Magazine and more that can teach you all that you need. Third: buy 2 or 3 book, pillar of web design like “Don’t make me think” by Steve Krug, “Designing with web standards” by Zeldman, “The Zen of Css webdesign” by Dave Shea and in Italian: “Guida completa ai css” by Gianluca Troiani.
Fourth: if you can, follow a web design course of study and improve your techniques.

Giuliano Ambrosio: First tip I would share, study and always stay up-to-date with new tendencies in the web design field. Apply what you learn, it’s fundamental to put into concrete form what you’ve learned, then it’s always useful. When you learn a new technique, apply it immediately.

Internet it’s a big canal of inspiration where everyday thousands of web designers are offering advice, ideas and interesting points of view. Good to use with shrewdness and cleverness.

Bugo

Q: In the end, let’s play a game. If you should select one (and only one) current Italian website to better represent Italy to a hypothetical World Web Design Award, which one would you choose? Explain your choice and please note that none of your works are allowed to participate in the competition, you’re the coach!

Antonio Moro: I think diesel.com (and the pletora of sub-websites) is the best example of what a company should do to create a strong presence, and how web design can help it to further expand the brand awareness by integrating different media, different approaches, different techniques.

It’s funny how a lot of Americans think that Diesel is an American company, most of them don’t know that it’s from Treviso, Italy and that the site is largely developed in house or by italian freelancers. Keep up the Italian pride! (and sorry for my bad English…)

Laura Gargiulo: Mmmm good question. I think Stefano Scozzese Design will win forever for his flash designs (Laura Pausini, Federica Panicucci and more) but it’s not really web design… for that I think we have to wait. Maybe this: David Salvatori ;)

Giuliano Ambrosio: I’m passionate to Adobe Flash technology and so my choice falls on a website realized by Stefano Scozzese Design, a team specialized in creating and building dynamic and interactive websites. The website of Andrea Bocelli, one of the most known Italian singers in the world. The website passes a lot of emotions to the visitor also because of the use of original images and graphic elements.

Diesel

David Salvatori

Andrea bocelli

Showcase Of Web Agencies

Within the Italian panorama, we can find different kind of web agencies. We have traditional creative agencies which have reinvented themselves with digital departments, we have local branches of international Ad networks, we have midlle/small independent agencies strictly devoted to web design and others also offering more integrated services.

Having said that this showcase shouldn’t be considered as an exhaustive one, here you can find a list of some good web agencies in Italy with nice portfolios of web design works on their websites.

Scozzese

DodiciTrenta

BitMama

Mutado

Webgriffe

Binario

MagickSocket

Maison,the

Hangar

2Slides

Adacto

Domino

O-One

IconMedialab

D-Sign

Oot

WorkUp

Kora

FullSix

Nextep

Showcase Of Freelancers

There are many web design freelancers in Italy working on different levels. Some ones are skilled enough to manage big projects for important clients, some others do their best on smaller projects with limited budgets. However, it’s not unusual to find very good pieces of web design on portfolios at every level. The following is a selection of some of them.

Virgilio Ragazzi

Massimo Galleri

Luca Pignataro

Alberto Antoniazzi

Elena Gargiulo

Simone Maranzana

Nicolò Volpato

Francesco Prosperi

Sara Presenti

Libero Cavinato

Giuseppe Moretti

Alessandro Giammaria

Paolo Franzese

Igor Trovato

Massimo Kunstler

Luca Cighetti

Showcase Of Blogs And Communities

Together with web designers, in Italy there are plenty of web developers, SEO and web marketers. They are online with their blogs, forums or side projects where they share their experiences, tips and tutorials. Around these websites several communities are growing, sometimes with members also socializing offline thanks to periodical events, workshops or annual meetings. Here are a few representatives for this category.

Italian Web Design

Forum GT

MasterNewMedia

DesignRadar

Edit

JuliusDesign

Napolux

OnlineMarketingBlog

Blographik

TagliaBlog

TomStardust

Codice Internet

Showcase Of Italian Web Designs

Ducati

Pirelli

Pal Zileri

Patrizia Pepe

Davide Cenci

Ermenegildo Zegna

Guzzini Engineering

Maserati

Aristocratic

Notte e Dì

Lega Nerd

Art Directors Club

Marlene Kuntz

East Coast Yacht Brokers

Aquiblue

Hotel Lerici San Terenzo

Margo Travel

Iab Forum

Martini Soda

Lakshmi

Valery Extreme Team

Incastonature Magrin

Damiani

Buitoni

Carmencita

Mulino Bianco

Peroni

55dsl

Radio Capital

Rai TV

Le Iene

SoleLuna

Mtv.it

RockIt

Roberto Saviano

Carmen Consoli

(rb)