Tag Archive for: Design

Despite the somewhat provocative title, you shouldn’t really stop designing aesthetics.

Gradients and colors and contrast are all good, but there’s a more important side to web design that many people overlook most of the time: Designing emotions.

Discussing emotion in design is a bit of a hot topic at the moment, it seems to be popping up in more and more blog posts and speaker sessions. In fact I saw at least three different web designers say that it was the subject of the talk which they had recently submitted for next year’s SXSWi.

So what’s all the fuss about? Today we’ll take a look at what that means, how you can do it and why you should. This is taking design to the next level, beyond the norm.

Emotion Design

1

Emotions are important in design because emotions are important in absolutely everything.

Everyone is trying to make their brand, their website, their name the most memorable thing possible but how are they going to accomplish that? Think of the most memorable times in your life, right now, go ahead.

I’ll wager a good amount of money that the three to four things that you just thought of all involved a lot of emotion. The death of a loved one, the birth of a child, your wedding, the day you bought your first car. We remember the things which instill powerful emotions within us.

In his book, The Alchemies of The Mind, Jon Elster emphatically states that “Emotions matter because if we did not have them nothing else would matter. Creatures without emotion would have no reason for living, nor, for that matter, for committing suicide. Emotions are the stuff of life…. Emotions are the most important bond or glue that links us to others…. Objectively, emotions matter because many forms of human behaviour would be unintelligible if we did not see them through the prism of emotion.”

Using Emotion in Web Design

2

As a web designer, it’s very easy to get caught up in just the design of the graphics. Of course the next step beyond that which everyone gets stuck on is usability.

So many people talk about usability like it’s the be-all and end-all of web design. As one speaker at the Future of Web Design in London succinctly put it this year: “Designing a website to be usable is like baking a cake to be edible. It’s simply not enough. A usable website should be the minimum requirement, it should go without saying that a website should be absolutely usable. It’s time to look beyond that.”

At the most basic level of considering your users’ emotions, you can consider letting them choose how they want your site to work. What content do they want to see on the home page? What order do they want to see it in? What’s their favorite color? Allowing users to customize your site to their preferences (without having to sign up for anything) creates and emotional attachment to the site with which the user is interacting. They’ve just invested time, however little of it, to make this site perfect for them. They’re going to remember that. Check out the BBC website if you want to see this in action.

What about making users happy without them having to do any customizations though? What about creating something that is so naturally pleasurable to use that people can’t put it down? Well, allow me to introduce you to my good friend: The iPhone.

The iPhone isn’t actually the story here, it’s the touch based device, regardless of who it’s manufactured by. As human beings we live in a real world, touching real things, moving them with our hands. In fact, if you think about it, computers are incredibly unnatural to use: We move one thing on our desk that moves another thing on a screen, and we spend hours pushing complex button combinations with our fingers whilst looking in a completely different (vertical) direction.

People are enthralled with touch based devices because they make computers work in a way that we’re naturally programmed to understand. We see something, we touch it, and it responds in some way. I recently watched a three year old girl navigating her way around an iPhone with absolutely no problems at all. The best part? No one had ever taught her to use it.

Touch based devices create emotions within us: joy, intrigue, and surprise. We understand them perfectly and yet they still thrill us because they’re so clever.

 

Creating Emotions

3

So how can we create emotions for users of our websites outside of the UI? Well, to an extent you need to put your marketing cap on here. You need to think about people, not design.

You need to think about perception, not composition. If you can ask yourself a few vital questions about how your users are feeling, then you can go a long way to pleasing them.

Consider FreeAgent for a moment, a fantastic piece of accounting software in the UK, they know that typically people who visit their website are angry, frustrated, and fed up with trying to do their accounts (and failing). Their website is targeted almost solely at cheering you up and telling you not to worry, there’s an easier way to do things. They win.

 

Desire

4

But what about creating emotions at more of a root-level? Apple (yes Apple, no article about design would be complete without some mention of them, so we might as well get it over with) create astonishing levels of desire and jealousy amongst their customers.

Despite producing over-priced, under-performing, over-rated products they still retain unprecedented success, constantly. Apple are the biggest fashion label of the tech world. That’s not an insult by the way, sex sells, and everyone else needs to catch up. Apple makes desirable products.

“Thin, beautiful, portable, durable, accessible, powerful, unlimited, magical, revolution.

Sound familiar? All of those words and sentiments were used in Apple’s 30 second advertisement for the iPad, and not a single one of them has anything to do with what the product does.

 

Sympathy

5

Another common case study of companies creating emotions in customers, and this is going to be a controversial one, is with charities.

Charities instill sadness and sympathy from deep within you, in order to make sales. Think of every advertisement you’ve ever seen for a charity… most of them go like this: “Sally is a [starving child / stray dog / person with a terminal illness], she’s all alone. Her parents died just after she was born and she’s been living on the streets like this ever since.”

The cause may be just, but don’t mistake the marketing tactics as legitimate sentiments appealing to your moral integrity. The people who create those advertisements know exactly what they’re doing. They’re making you sad, they’re making you sympathetic, and they’re making you want to reach out and help – with your wallet.

 

Anger

6

Possibly the most interesting way to look at deliberately instilling emotions in users is from the perspective of anger.

Now, this has been suggested before, but to my knowledge never confirmed. What do we consider to be great customer service? Usually it’s when a company gets something really wrong, they own up to it, give you a full refund and treat you really well.

It’s unexpected and we absolutely love it. It may be cynical, but is it really unreasonable to think that companies may now be screwing up your order on purpose? If I was running an ecommerce store I would deliberately screw up about 5% of all my orders – then give the customer a full refund and send them the product anyway.

You can’t buy publicity like the way they’re going to talk about that to all their friends.

It’s hard to imagine a form that could be simpler: two fields, two buttons, and one link. Yet, it turns out this form was preventing customers from purchasing products from a major e-commerce site, to the tune of $300,000,000 a year. What was even worse: the designers of the site had no clue there was even a problem.

The form was simple. The fields were Email Address and Password. The buttons were Login and Register. The link was Forgot Password. It was the login form for the site. It’s a form users encounter all the time. How could they have problems with it?

The problem wasn’t as much about the form’s layout as it was where the form lived. Users would encounter it after they filled their shopping cart with products they wanted to purchase and pressed the Checkout button. It came before they could actually enter the information to pay for the product.

The team saw the form as enabling repeat customers to purchase faster. First-time purchasers wouldn’t mind the extra effort of registering because, after all, they will come back for more and they’ll appreciate the expediency in subsequent purchases. Everybody wins, right?

“I’m Not Here To Be In a Relationship”

We conducted usability tests with people who needed to buy products from the site. We asked them to bring their shopping lists and we gave them the money to make the purchases. All they needed to do was complete the purchase.

We were wrong about the first-time shoppers. They did mind registering. They resented having to register when they encountered the page. As one shopper told us, “I’m not here to enter into a relationship. I just want to buy something.”

Some first-time shoppers couldn’t remember if it was their first time, becoming frustrated as each common email and password combination failed. We were surprised how much they resisted registering.

Without even knowing what was involved in registration, all the users that clicked on the button did so with a sense of despair. Many vocalized how the retailer only wanted their information to pester them with marketing messages they didn’t want. Some imagined other nefarious purposes of the obvious attempt to invade privacy. (In reality, the site asked nothing during registration that it didn’t need to complete the purchase: name, shipping address, billing address, and payment information.)

Not So Good For Repeat Customers Either

Repeat customers weren’t any happier. Except for a very few who remembered their login information, most stumbled on the form. They couldn’t remember the email address or password they used. Remembering which email address they registered with was problematic – many had multiple email addresses or had changed them over the years.

When a shopper couldn’t remember the email address and password, they’d attempt at guessing what it could be multiple times. These guesses rarely succeeded. Some would eventually ask the site to send the password to their email address, which is a problem if you can’t remember which email address you initially registered with.

(Later, we did an analysis of the retailer’s database, only to discover 45% of all customers had multiple registrations in the system, some as many as 10. We also analyzed how many people requested passwords, to find out it reached about 160,000 per day. 75% of these people never tried to complete the purchase once requested.)

The form, intended to make shopping easier, turned out to only help a small percentage of the customers who encountered it. (Even many of those customers weren’t helped, since it took just as much effort to update any incorrect information, such as changed addresses or new credit cards.) Instead, the form just prevented sales – a lot of sales.

The $300,000,000 Fix

The designers fixed the problem simply. They took away the Register button. In its place, they put a Continue button with a simple message: “You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.”

The results: The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000.

On my answering machine is the message I received from the CEO of the $25 billion retailer, the first week they saw the new sales numbers from the redesigned form. It’s a simple message: “Spool! You’re the man!” It didn’t need to be a complex message. All we did was change a button.

There is a lot of buzz around QR codes at the moment, so we thought we would take a look at some of the most creative and stunning QR code business cards on the web.

We love QR codes as they connect offline and online while challenging traditional design at the same time.

First of all, in case you have been living under a rock, let’s answer the obvious question. What the hell is a QR code?!

A quick response (QR) code is a two dimensional code that can be scanned and read by smartphone cameras to transfer information. The information can then be encoded to text, add a vCard contact, open a URL or much more.

So, by placing them on a business card, you can digitally pass on your contact details, direct people to a website, send them to a Flickr photo set or Facebook fan page or offer a special discount etc.

Hopefully the examples below will help to inspire you on how QR codes can be incorporated creatively in your designs. Or at least, provided a few interesting ways that they can be used to connect offline and online media.

Shelby Montross QR Code Letterpress

This card is a QR code that has been letterpress printed. It fits perfectly with more classic styling and design. Sweet.

 

Nightshade Labs

We liked this original card as it incorporates the companys’ beaker logo into the QR code (and yes it still works as well!).

 

Wanda Digital

The white QR code against the grey background on the back of the card matches the color scheme of the logo and looks great to boot.

 

Reblis

The QR code here is art in itself. Simple, but extremely artistic.

 

Big Fat Media

This card is on ultra-thick 4 ply cotton providing a premium appearance and touch. Absolutely stunning.

 

Perforated Business Card

We liked these cards from the Aquarius Club as each card has a QR code with meCard information of the person ready to be scanned and uploaded directly into a phones address book.

 

Peipei Yu’s Cards

We love what Peipei Yu did with not just the QR code itself, but the paperboard stand built in and box! Original, creative and fun.

 

Fridgehead

Cut out the QR code and it still scans…!

 

Tom Neal Film

We really liked the simple messaging on this card alongside the code. The rounded edges of the card also match the rounded edges of the QR code in the centre.

 

Digibrand

Beauftiful cards. The QR code sits nicely next to the cut out logo. The attention to detail on this card is really inspiring.

 

Soren Ragsdale

These cards are really clean and simple with no color. Yet they stand out!

 

23rd and 5th

Would you throw away business cards that looked this stunning? Thought not. The red QR code matches 23rd and 5ths logo perfectly.

 

Drew Hornebin

Drew included a couple of QR codes on this design with the logo in the background which shows off a real creative edge.

 

Kayma

Doko Dare used the QR code to direct users to their place page.

 

Casey Templeton

We really like the faded, old skool design on these cards. The QR code doesn’t look out of place at all.

 

Barefoot Media

Barefoot Media proudly use the QR code as part of their bold design.

 

Monkey Simon

Monkey Simon makes you want to scan it to know what it is…!

 

Stephanie Obodda

These minimalist cards are a real thing of beauty. Once again the QR code is the centre piece of the design and with amazing effect.

 

Tatadbb

These cards are really simple, but the combination of the extremely bright colors alongside the QR codes really draw the eye.

 

b-type design

The QR code IS the design in these cards. And they look great.

 

Metaform

The design by Mark Stokoe works perfectly with a code on the back. If you look carefully you may also be able to see the ‘M’ of the logo in the very centre of the QR code.

 

Social Bendodson

These cards are cool just because Zelda is on them… :-) .

 

Soul Visual

These cards put the code right next to the printed contact details. Online and offline pefectly catered for!

 

NightOwl Craftworks

These business cards are really cute and made us smile. The text alongside the QR code encourages you to take a picture and visit their website.

 

Geng Gao

The bright vibrant colors and QR codes just make you want to pick one up…

 

Lanec Technologies

These rounded edge business cards from Lanec Technologies include a code with contact information for each employee.

 

Marc Heatley

Marc used a lot of space for the QR code on these business cards, but it macthes the design and font perfectly to great effect.

It’s not new to say that we now live in an age in which survival in business depends on your ability to communicate effectively through the internet.

What is new is the realization that just having any old website isn’t enough. The quality of your site and the nature of its content are paramount and your ability to communicate with your audience is the key.

A good website is built on two basic truths—that the internet is an interactive medium and that the end user is in fact human. In other words, it is meant to be an experience. As with any adventure, a little strategic thought is needed to ensure that the experience is enjoyable.

Respect me

Remember that the person on the other side of the computer screen is a human being. They want to know that your business understands them.

Take the time to find out who they are and what they like. Then tailor your message and design to suit them. A real-life analogy is the approach you would take to initiate a conversation with a stranger at a party (a person with whom you hope to become better acquainted). You would do well to listen intently to what interests them and then craft your conversation to suit. You wouldn’t bore them with a lengthy extolment of CSS or Ajax on a Saturday night, would you?

Try to think beyond the demographic and envisage the individual. Many web briefs contain a far-reaching description of the audience. During the briefing session, try to narrow the focus. A brief may begin at:

Intranet Audience: 20–50 year old real estate agents

This can be divided into a primary and secondary audience, as follows:

Intranet Primary Audience: 20–35 (sales agents)

Intranet Secondary Audience: 35–50 (middle and senior managers)

From that point, it helps to imagine yourself as the agent, logging onto the intranet with a cup of coffee in hand half an hour before tackling early open houses. Do you see your desire for flash animation disappear in a puff of smoke? Do you see how “get to the point fast and be obvious” becomes a distinct directive? How about the need for personalization, so the agent can see what they require immediately, for example, appointments for the day, contacts, and their sales pipeline?

Closing the gap between yourself and your audience will help you to make the right decisions and tailor the design to their needs.

Tell me a story

Harness one of the oldest and most effective ways of communicating knowledge on your site.

Storytelling is a rich and compelling way to involve the user in a design, evoke an emotional response, or enhance a user’s learning experience. The question to ask is:

Is there a more creative way to present the required information to increase the user’s involvement?

News websites are increasingly rising to the challenge. In the past a breaking story would have been a single page of written text. Now it may be enhanced with multimedia to offer alternate ways to view the story including interactive timelines, streaming web-cam, animation, sound, and video. These elements can give the audience a broader and deeper understanding of the topic and the issues, which surround it.

The most wonderful thing about using the internet to tell a story is that it can be non-linear—the user can click to view fragments of information that interest them, rather than viewing the entire story from beginning to end. By telling a story through user interaction, you enable users to choose their own path according to their preferences or needs.

Engage me

As broadband becomes prevalent, web designers have increasingly begun to combine visual design with interaction and motion. Their role has become less that of a designer and more that of a director of experiences. To illustrate the difference between those roles, let’s look at the way the creative direction of a design might be described:

To promote your strength, which is the local content of the entertainment news, we will include the cityscape of each state within your brand.

The direction of an experience, on the other hand, would require more documentation in the conceptualization stage. An experience director must pull together content, formulate an interactive approach and style, and orchestrate the creative elements in which to propel the story. The web designers of the future may even be required to write a treatment, melding the design process with that of film direction.

By attending to the entire user experience, designers can create a rich, sensory experience, which helps to immerse users and encourage them to become fully involved in the site and its message. When a site is intended to educate, immersion is particularly important, as it can increase learning speed and overall understanding—especially when a site’s main users are children.

Through immersion, the user experiences joy and satisfaction: positive qualities that will be transferred to your brand.

Inspire me

Some people believe that web design starts and stops with branding. Their view is the visual identity of the brand is easily applicable to the web through the transference of common elements such as logo, colours and typography.

Indeed a lot of the traffic that will come to your website will be people who know or chose your brand in the real world. So when they arrive at your virtual world it is an ideal opportunity to reinforce it.

However, your site can do much more than mimic your identity. It can encapsulate the brand personality, whether that is inspirational, trustworthy, or authoritative. These traits were part of the reason why they chose your brand in the first place.

During the filming of Withnail and I, the director told lead actor Richard E. Grant to “stamp the celluloid”, meaning to go full pelt, not half-measure. It’s timely advice for when you want to inspire your audience and make them take action—don’t be polite, grab them by the throat—and bring your brand to life!

Enchant me

A beautiful design will give the user the impression that the site is easy to use, whether it is or not. Also, it is more probable that the design will be used because the human psyche is inexorably drawn towards beauty.

Transactional sites often fail miserably in the aesthetic stakes. The reigning thought is that it is the domain of the usability consultant—that design is secondary and often confined to the “coloring in” of table cells.

Yet highly complicated processes and pages can look deceptively simple with the right styling. Spacing becomes increasingly important as it allows the user’s eyes to rest before taking on the next batch of information. Design can create order and instill a feeling of peace and serenity—positive attributes when you are asking your user to complete a lengthy and profit-creating form. Professional design can also increase user trust levels, the single most important trait to attain for any transactional site.

If you’re not a professional visual designer, you can engender trust and loyalty and foster attraction by consulting a high-level designer for business-critical or transactional sites.

The principles of good human-to-computer interface design are simplicity, support, clarity, encouragement, satisfaction, accessibility, versatility, and personalization. While it’s essential to heed these, it’s also important to empathize with and inspire your audience so they feel you’re treating them less like a faceless user and more like a human being. In doing so, you will extend their affinity with the design and foster positive attitudes towards your brand, company, or product.

One of the main goals of having a website, whether it be a portfolio website or a business website, is to declare your presence on the Web. There are thousands upon thousands of websites out there; it’s pretty well established that you are competing for your audience’s interest and attention. To this end, it’s important to make those few seconds count when making a first impression.

 

How To Design A Memorable Website?

  • Make use of original and unique graphics. Having a large, punchy or slightly quirky graphic on your portfolio can help separate you from the competition.
  • Feel free to experiment with non-traditional color combinations. Experiment with various contrasts to create tension, but put readability always first. Invite the users to feel engaged, but keep the page usable.
  • Use original, compelling language to clearly emphasize your differences. Unfortunately, your visitors are likely to read only a small percentage of the text on your website. You can pack the most punch in that percentage by using confident opening statements, catchphrases or interesting summaries to pique the interest of your audience.
  • Keep things organized. This might go without saying, but if visitors can’t navigate through your website or figure out who you are from the start, chances are they won’t stay around to see your amazing portfolio.

Let’s now take a look at some recent examples of striking, memorable designs.

Zinguh! Creativ

Modern Minimalism and Cool Green Accents

Zinguh Creativ features a large, bold slide show and a memorably detailed green leaf favicon. This is a nice example of a slide show spanning the width of the page; it’s both funky and neatly executed. Notice the high quality of product images throughout the site.

Zinguh in Designing Memorable Websites: Showcase of Creative Designs

Green accents in the navigation, and in the favicon, are a unique touch, but could be improved for better readability

The green highlights for text are a bit harsh on the eye, a slightly darker green would probably work better. A minimalist arrangement of the images is a nice touch.

United Pixelworkers

Pixelly Images: A Visual Pun!

United Pixelworkers features a subtly pixellated, textured background as well as foreground images with blocky edges, creating a play on their name which is fun, cute and smart. The texture is so rich, and the information architecture so clean, that this website feels far more content-rich than it actually is.

Www Unitedpixelworkers in Designing Memorable Websites: Showcase of Creative Designs

United Pixelworks uses a static, left-aligned navigation bar

The left-aligned sliding navigation bar is an example of static navigation done right. It’s there, but it doesn’t get in the way of the content and isn’t too obnoxious or obvious. The select color palette and letterpress-style links at the bottom are a nice final touch.

Outback Creative Studio

Large Original Illustrations

Outback Creative Studio features innovative, large navigation buttons on the right side which is a fresh, colorful and inviting approach. The colors, the graphics and the blocky feel of the layout work together to create a bold and unique statement.

Outback in Designing Memorable Websites: Showcase of Creative Designs

Outback Creative Studio has “night” and “day” themes, emphasized with a rooster graphic

The “night” and “day” button allows the user to switch between themes, a creative and unique presentation reinforced by the central rooster graphic. The graded orange and purple color scheme is rich and unusual, and lends the design a unique look and feel.

Mike Kus

Right-aligned, Interactive Logo

Mike Kus has an eye-catching interactive logo with a motto that displays on mouse-over. DEAD stands for “Dreaming Everyday About Design,” which stands out and is easy to remember. DEAD is featured in the favicon too, adding more places for users to see and absorb the tagline.

Mikekus Com in Designing Memorable Websites: Showcase of Creative Designs

Interactive logo

The light background again leaves the emphasis on the work, which is strong enough to stand on its own. Punches of color and the use of images lead the eye down the page very well; notice how well each project’s description and related images are grouped, making the page flow very smoothly.

Wez Maynard

Right-aligned Graphic Mayhem

Wez Maynard uses offbeat graphics, creative layout and original content phrasing to make his website memorable. The design is completely right-aligned, which is quite unusual to see and feels truly novel. The ribbon sidebar on the left is interesting and unique, and the vintage graphics and blue, textured footer are fun and visually interesting. The quirky messaging is a great example of how to use language to create an impression. This is a nice example of an original, unique and interesting design.

Www Wezmaynard in Designing Memorable Websites: Showcase of Creative Designs

Quirky graphics, and messaging to match

Epic Web Agency

Bookplate Graphics, Rainbow Textures and Grunge

Epic Web Agency lives up to its name with its portfolio website. With grungy textures, plenty of bold, contrasting color and Spartan-like helmets as themes in the graphics and images, this site is certainly “epic.” The loud typography and punches of orange add excitement. The colorful logo adds a bit of saturated color to the header. Notice how visual tension is created with a thick diagonal line on the home page. The website uses various background images across its second- and third-level pages, all related to the “epic” look.

Epicagency in Designing Memorable Websites: Showcase of Creative Designs

Texture, color and type work together seamlessly

The artwork used here is all the more unusual because it’s in a much more traditional style, usually reserved for print media. Epic Agency uses plenty of graphics, and does so in a very original way, making for a very visually striking user experience.

Ryan O’Rourke Presents

Elegant, Dark, Responsive Layout

Rourkery.com features a vivid, majestic, theatrical theme which juxtaposes well with playful typography and colorful graphics. Using a distinct theme can be a good way to ensure that content, graphics and messaging work together in a focused way. The website’s centered logo and navbar are both unusually and elegantly done, aligned in the center and using a subtle navy pattern.

Rourkery in Designing Memorable Websites: Showcase of Creative Designs

Theatre theme keeps content and graphics focused

Potential downsides to note are the leading of the text, as well as the visibility of the home page link, which is the logo in the center of the header. Notice how well orange is used as the main color across various design elements. The layout and images resolutions also nicely respond to changes in the browser window size, responsive design at its best.

Christina Ung Illustration

Bold, Unique Use of Typography

Christina Ung Illustration is all about the typography. The liberal use of bold and lighter font-weights, along with the mix of lowercase, uppercase, and mixed serif and sans-serif fonts, all work together to make the type as visually interesting as the use of graphics would be.

Www Christinaung in Designing Memorable Websites: Showcase of Creative Designs

Bold typography logo

The clear, dark logo anchors the eye on the left-aligned navigation, which leaves plenty of room for the portfolio content occupying the main part of the page, to be the main focus. Large screenshots allow the content to be seen very easily without clicking through the actual blog posts. The pink highlights feel fun and fresh, but not overpowering.

Josh Sullivan

“Droll” is Memorable

JoshSullivan.me is a good example of how even a one-page website can pack a punch. The large header graphic is very unique and memorable, with its old-fashioned “nature book” feel. The background is an interesting mix of textures, colors, geometric shapes and historical-feeling images. While nothing is really clickable, this is just a calling card so nothing really needs to be; the social networking and email address links serve as the page’s call to action.

Joshsullivan in Designing Memorable Websites: Showcase of Creative Designs

Interesting stew of background images

The color palette may look a little offbeat, in keeping with the graphics, but this all helps make the website as memorable as it is visually appealing. One small suggestion would be to make the links on the page a bit more prominent so that users don’t end up wandering. A stronger contrast between the text color and the background color would help. The main graphic is so central that it might be a bit overpowering for some, but this really does depend on who the audience is.

Jake Przespo

Fun Graphics and Clean Organization

The portfolio of Jake Przespo features another very creative central graphic. The “fun factor” goes a long way toward making a website memorable, and this is one that adds fun, very effectively. As users navigate through the website, the graphic flips around. The words in the red banner stand out, with subtle hover effects and woodcut detail.

Jakeprzespo in Designing Memorable Websites: Showcase of Creative Designs

Whimsical central image flips around as users navigate through

The minimal colors and splash of red keep the page a clean, minimal background for the front-and-center images. The readability of the content would certainly benefit from an increased font size, though.

Cooper Graphic Design

Large, Bold Header Graphic

The colors really draw the user into Cooper Graphic Design. The shades of brown, with texture and punches of turquoise, feel very bright and upbeat. The layout is clean and systematic, while the main, large center graphic contrasts with the more subtle background graphics in an interesting, attention-grabbing way. The top-level navigation is also very clear, making this an effective and visually appealing portfolio website. Also notice an interesting background image that lends the page more visual appeal. And don’t forget to resize the browser window, too.

Coopergraphicdesign in Designing Memorable Websites: Showcase of Creative Designs

Bold header graphic contrasts with subtler background

One small usability problem, however, might be the tabbed navigation at the bottom of the page. The use of tabs often signifies internal navigation, rather than external. In this case, these tabs seem to link out to external pages, which might confuse users a bit.

Brandon J. Schmidt Design & Photo

Watercolor Graphics

The watercolor graphics on Brandon J. Schmidt Design & Photo are very prominent and visually appealing, especially on the front page. The black, white and yellow color scheme feels minimal and modern, an interesting juxtaposition with the old-world feel of the watercolor.

Brandonjschmidt in Designing Memorable Websites: Showcase of Creative Designs

Soft watercolor graphics

The logo graphic on the home page is faded into the background on the website’s second-level pages, keeping the website logo as the focus and leaving a lasting impression on users.

Water’s Edge Media

Minimal Design With Floral Illustrations

The simple, solid navigation structure and design of Water’s Edge Media stands out even without the illustrations, but the illustrations help make it more memorable. The logo, in particular, is very fresh and modern.

Www Watersmedia in Designing Memorable Websites: Showcase of Creative Designs

Fresh, modern color palette and pretty floral illustrations

The slide show of recent work is neat, but it could use some polish, especially the slider buttons. The left alignment adds a modern feel. Overall, however, a little more variance in font type and size would make the design just a bit more interesting.

Jordan Gray Creative

Minimal Design With Left-aligned Navigation

Jordan Gray Creative features seamless left-aligned navigation below a clean, minimal typography logo. This design is super-minimal, relying on the work in the slide show for content and appeal. Subtle details like the favicon and CSS spacing keep the design from seeming too simple.

Www Jordangraycreative in Designing Memorable Websites: Showcase of Creative Designs

Striking minimalism lets the work speak for itself

Eight Hour Day Design & Illustration

Bold and Colorful

Using the portfolio as the graphic element, Eight Hour Day Design & Illustration integrates a lot of color through relying only on the work. The select color palette of the page itself is crisp and bright. The type is clean and vivid. Although it’s simple, the hint of subtle patterning and shadowing at edge borders and between navigation menus effectively keeps things from looking flat.

Eighthourday in Designing Memorable Websites: Showcase of Creative Designs

Colorful elements are drawn directly from the Eight Hour Day portfolio

It’s Not My Type

A Typography Blog About Typography

It’s Not My Type makes good use of the richness of Web typography—with strong slab serif typography widely used across the various design elements, including the Web form, date and comment areas.

Www Resistenza in Designing Memorable Websites: Showcase of Creative Designs

Fonts change as users navigate through the website

The scrolling content panel works pretty well here; the colors and subtle textures are clean, and add visual appeal.

McKinney

Simple But Elegant

McKinney features a minimal design with accent graphics that are not textures, but geometric shapes like lines, circlesand triangles. The red, gray and black palette is striking yet subtle.

Mckinney in Designing Memorable Websites: Showcase of Creative Designs

Elegant touches through geometric accents

One thing that would be fun, is if the slide show controls were draggable. More hover effects would also give the page a more dynamic feel, making it more interactive and responsive (some elements do, however, respond when clicked on). The consistency of the layout and color choices of the website’s internal pages, also deserves a mention.

Shaping the Page

Playful Origami Animations

Shaping the Page uses a soothing, light and airy color palette as a backdrop for fun, whimsical, animated origami illustrations, which are a visual pun on its name.

Www Shapingthepage in Designing Memorable Websites: Showcase of Creative Designs

Elephants, butterflies and more!

The lightly textured blue background and the wispy social networking graphics at the bottom of the page are downright charming. The portfolio page is nicely organized and right-aligned, which seems to work well with the playful, moving illustration on the left to visually balance the content.

Broken Pencils

Pencil Sketch Illustrations

Broken Pencils, Inc. has a prominent and visually striking logo. Although the navigation is split into bottom and top sections, it doesn’t look redundant since the top is more understated and the bottom uses different colors. The slow color transitions on hover effects on the “Services” page are a nice surprise as well. All of the graphics are simple and modern. The most striking part of the design, however, is the pencil sketch illustrations, in keeping with the “pencil” theme.

Webreakpencils in Designing Memorable Websites: Showcase of Creative Designs

Pencil sketch illustrations echo the website theme and company branding

Who is Leon

Fun With Interaction!

The background animation of Who is Leon might be the first thing the user notices. The static background and scrolling content, combined with the slightly blurred photography, work together to create a sense of motion and excitement. Users might feel invited to click around, and many elements on the page are, in fact, interactive.

Whoisleon in Designing Memorable Websites: Showcase of Creative Designs

Hover, click and move!

The grayed out portfolio screenshots turn to color on hover. Against plain flat background this really makes the screenshots pop, and along with the prominent buttons, invites visitors to take action. The website also involves the use of several fonts, which add to the overall striking effect of the design.

David Paul Seymour

A Monster!

The portfolio of David Paul Seymour is a very fun, colorful, illustration-based website. The illustrations take up most of the page, making them the main focus as well as a design statement. The cloud illustrations for the navigation are fun and makes users want to click around. In contrast to the previous website, none of these illustrations are interactive. This feels a little bit like a missed opportunity, as some hover effects or small animations would really go a long way toward adding to the playful feel of this website.

Www Davidpaulseymour in Designing Memorable Websites: Showcase of Creative Designs

Color and whimsy make this page stand out

One other thing that stood out was the lack of a favicon. The addition of a favicon (most especially on such a graphically rich website) is a really quick and easy way to enhance brand recognition, and to add a more polished, complete feel.

Creativepayne

Bold, Unique Graphics

Creativepayne is a bit tongue-in-cheek, graphically speaking. The old-world art mixes with a variety of other styles; there is a lot going on in this design. The color palette is a subdued mix of browns and tans.

Www Creativepayne in Designing Memorable Websites: Showcase of Creative Designs

Bold, unique graphics and mix of styles

The call to action, “ESTIMATES get yours TODAY,” does get a bit lost in the top right corner; overall, if some of the other design elements had slightly bolder fonts, they might balance out the main, large graphic a little more.

Chicago Interhoods

Interactive Map

Chicago Interhoods is an example of a great marriage of design and information. The orange, cream and blue color palette is striking and fun. With a prominent, central logo and clearly organized top-level navigation, this design is a clean and effective backdrop for the interactive map. The map itself is a nice visual way to browse for information.

Chicago Interhoods in Designing Memorable Websites: Showcase of Creative Designs

Beautifully interactive design aids browsing for information

AdPacks.com Classy Sites & Classy Ads

Vintage Graphics and Type

AdPacks Classy Sites & Classy Ads features a fun, vintage feel in the graphics, fonts and textures. The visual interest created by this mix, invites and engages users to interact the website elements.

Adpacks in Designing Memorable Websites: Showcase of Creative Designs

Fun, vintage graphics and type

The visual representation of the products makes it easy for potential buyers to see and understand what the products are, while the calls to action are clearly laid out in the buttons for each section, making this a complete, well-laid out product landing page.

Min Tran’s Journal

Beautiful Typography and Unusual Textures

Min Tran’s Journal features a ribbon navigation that is sophisticated and tidy. The soft colors work together nicely; the playful typography looks informal and engaging, and also works nicely with the graphics and overall feel. The two-column layout features columns of equal width, conveying a clean, well-organized and fresh impression that is unique at the same time.

Www Mintran in Designing Memorable Websites: Showcase of Creative Designs

Camera graphic, centered two-column layout

Solid Pink Studios

Big, Bold, Diagonal

Solid Pink Studios takes the pink theme its name suggests, but takes it in a completely unexpected direction; the grumpy rock monster looks like he means business.

Solidpink in Designing Memorable Websites: Showcase of Creative Designs

The solid pink rock monster is a fun, memorable element

The diagonally-aligned text works best at a fixed width, and could present some display difficulties to users with a small screen; on smaller screen resolutions, the blog link is cut off to the point of nearly being hidden. Overall, the diagonal text alignment is is a fun and memorable way to present content and is very in keeping with the rest of the design. One final note: this is nit-picky, but it does feel a bit odd that the favicon for Solid Pink is green, not pink.

4 simple ways how designers should protect themselves

People who don’t understand the true value of graphic designers will try to take advantage of them, especially if they’re newbies.

Others will try to calculate the time and effort involved in designing and then assume you’ll meet their expectations, however unrealistic.

This can wear on you both financially and mentally, so you have to find ways to protect yourself. Here are four ways to keep your work and your clients in check.

Have a look through them and let us know your experiences and whether you would add anything to this list.

1. Contracts and terms of service

Whenever you land a gig, be as clear as possible with the client so that they understand what will happen. I like to have a full consultation with new clients, and once we come to a basic agreement, I go over what they can expect from me and what I expect from them.

You may want to draw up a contract to get everything down on paper and to make sure everything is clear, just in case you run into trouble later on. There are a few essential things you’ll want to put in the contract or terms of services…

Deliverables

What exactly will you be giving them when all is said and done? This is usually specified by the client; they may want your PSD files or perhaps just a format that can be printed. Let them know what they will be getting so that there is no confusion.

Contributions

In addition to the deliverables, let the client know a bit about your process and what you expect from them. One of my biggest pet peeves is clients who don’t answer emails in what I think is a timely fashion; if you’re the same, why not put that in your contract? Spell out (and agree on) what you expect from the client and what they expect from you. This alone will clear up much confusion and hold each party accountable for the duration of the project.

Revisions

This is the cause of most headaches for designers. Spell out as clearly as possible what you consider to be a revision. This is key, because one person’s idea of a revision may not be the same as another’s. Is a revision moving the logo to the left or completely redesigning the page? Once you’ve come to an understanding, specify how many revisions you think are reasonable for the project (and the budget).

I personally don’t mind minor revisions, but complete redesigns are the death of me. To avoid this, you may want to provide several different designs at once and then narrow down as time goes on. But if you do this, make sure it’s contracted. Be up front when talking about revisions as well, and when you submit updates, remind the client what you’ve agreed on.

Payment

This is probably the most important part of the contract. How do you want to get paid? Do you want a deposit? If so, how much? Answer all of these questions so that the client knows what to do.

I strongly suggest some type of deposit before you start a project, just so that you know the client is serious about getting work done. Some designers require payment in full up front, while others have certain conditions depending on the total amount of the project. Figure out what works for you, discuss it with the client, and go from there.

Cancellations

We never like to think that someone would cancel on us. It’s one of the worst feelings in the world. But the truth is, it happens, and you need to protect yourself in some way. Perhaps give the client a time period in which they can cancel, or request a non-refundable deposit. Find something that works for you, and, of course, state it clearly in the contract. You never want to do a ton of work only to have the person back out on you with no consequences. Make no exceptions.

2. Say no

Some designers are so eager to stay busy with work or make money that they have a hard time saying no to projects. Too many projects coming your way is not the worst problem to have, but eventually you’ll get frustrated or burnt out. You’ll want to avoid certain types of projects…

Baby budgets

Be absolutely clear with yourself about how low you are willing to go on price for the work involved. You may have to pass on a ton of projects, but people who are willing to pay will eventually come forward. You don’t want to find yourself zipping through a bunch of cheap projects.

Outside your skill set

Be honest about your skill set. When I started out, I took on projects that were outside my skill set, just so that I would stay busy. I had no working knowledge of Flash, but I would guarantee someone a Flash intro or banner. That was a huge mistake, because I had to learn the skill and execute the task to the client’s liking by the deadline. That’s a recipe for stress.

Only take on work that falls within your skill set. Be honest with yourself and your client. Perhaps you could convince them of an alternative solution that does fall within your skill set.

Full plate

If you’re already up to your eyeballs in work, don’t take on more. You’ll just be getting more deadlines and more stress for no reason. Pace yourself; avoid burning out or getting into a creative slump. Give yourself some breathing room between projects so that you have time to rejuvenate and come up with fresh ideas.

Speeding through projects and working at your limit all the time is not good for your mental or physical health. Don’t be so quick to accept whatever crosses your path. Just let good work come to you, and do it on your own terms.

3. Charge more

Protecting yourself has a lot to do with the types of clients you attract. If you attract ones who you just don’t get along with or who are rude and hard to work with, consider increasing your prices.

The amount you charge correlates to the value (and quality) of your product. If you charge pennies for big projects, you might attract a bunch of clients, but they won’t necessarily understand the value you are delivering. When people don’t understand your value or feel you offer little, then they will treat you accordingly.

If you purchase a $100 digital camera, you can enjoy the product, and if you drop it or scuff it up a bit, you won’t be terribly upset because it was only $100. If you purchase a $1500 camera, you’ll be much more careful with it. That’s the kind of mentality most people have with service providers.

Unfortunately for us, working with people who don’t value our services can be very stressful. Consider increasing your prices in order to attract a different type of client, one who values your work.

4. Set barriers with family and friends

This is a touchy subject for most. We all cherish our friends and family, but we are often the only graphic designer they know. And when they come to us for work, they expect a deep discount or even no charge. Figure out beforehand where you’ll draw the line.

If you offer a discount, make sure that at least your time spent on the project will be covered. Beyond that, treat them just like a regular client. Of course, you might want to be a bit more flexible in the number of revisions you allow and things of that nature, which is fair.

Dealing with requests for free work is a bit more difficult. If I accept a project for free, I treat it as my own personal project. I retain total creative control, and once it is delivered, few or no revisions are allowed — and certainly no redesigns. Again, figure out what’s best for you and your business, and sit down and go over it with your relative or friend.

Mobile development is all the rage, and the interactive industry is in great turmoil as countless tablets and smartphones come to market.

Mobile app development gets most of the attention, while the mobile web somewhat quietly creeps along. But the mobile web is making progress every day as more and more developers launch mobile-optimized interfaces.

The great thing about the mobile web is that it is fundamentally built with all of the same tools used in traditional web design and development.

This makes it far more approachable than app development. Also, many users will want to visit a company’s website on the go, without necessarily needing a full-blown app.

Building websites optimized for mobile is so similar yet so different then designing for the desktop. Certain factors take on a far more significant role. For example, screen size variations, user attention spans and usability issues are more critical then ever.

These same issues are ever present on the desktop but are sometimes easier to overlook. Here we’ll look at some lessons to learn from the optimization that is happening on the mobile web. The lessons can directly inform how we design and how we think about traditional web design and website architecture.

 

Simplified navigation on mobile websites

One of the first things that becomes evident when digging into mobile websites is the extreme simplification of the navigation. Navigation not only becomes very prominent and central on a mobile website, but is also quite often trimmed down substantially to focus on only the most critical elements.

I find it amazing how top-level navigation can be boiled down to two to four items on most mobile websites. Of course, I recognize that the content on a mobile website is quite often optimized for the intended audience. For example, Truth Tabernacle Church has six options in its main navigation, only one of which has made it into the navigation for the mobile version; and the one that made it (“Contact”) is the focus of the entire home page.

The content that didn’t make it into the mobile version is, of course, still entirely relevant. The mobile interface is intended to catch people trying to find the church or check out the service times or simply contact them. These are the most likely objectives of the mobile surfer. Those hitting the full website on a desktop computer are as likely to want those things as they are to want to research the church to see whether it is the sort of place they would like to visit.

So, what is the lesson to learn? Don’t these two interfaces target totally different audiences and have totally different purposes? Perhaps, but we can learn a lot from the extreme focus of the mobile interface. Notice how everything is about the actions you can take? The church has eliminated all of the navigation elements that feel like boxes to check off.

One interesting element is the “About” navigation option on the full website. The mobile website may be optimized for people on the go, but there is no reason to assume that they wouldn’t be interested in reading about the church and its beliefs. Someone may have mentioned the church to you in passing, prompting you to look it up on your phone.

So, the navigation option for this element should be changed. What if, instead, it communicated something like, “What you should know about us”? While a bit long, it reflects a more helpful attitude. A general “About” bucket feels like a place to hold all of the information that no one reads. “A visitor’s guide to our church” feels a lot more useful and targeted.

The simplicity and focus of the mobile interface shows that everything must have a purpose to earn a slot on the website. If the same were true of the full website, we would be less inclined to fill it with seemingly important content and more inclined to make sure everything has a clear function.

This reflects a very task-oriented mentality. Every option challenges the user to take some active step. It is as though every passive option has been purged and reduced to actionable items on the mobile website. This leads us to the next lesson: be extremely task-oriented.

 

Mobile websites are task-oriented

With a task-oriented mindset, let’s reconsider the full website. While the home page is beautifully designed, the call to action is far less evident. The content is full of bits of information waiting for you to decide to be interested.

For example, the large banner highlighting a coming event fails to call me to some kind of action; very passive. With a task-oriented mentality, we could vastly improve on the “Read more” call to action. This could be as simple as making the call to action much more prominent; for example, a large button in a contrasting orange. Additionally, the call could be changed to “Learn more and sign up.”

Another example is the welcome message. I appreciate the intention and the message being communicated here. The message shows that real people are behind the website, and it attempts to make the page feel personal. But again, let’s dissect this with a task-oriented mentality. A great follow-up to an introduction like this would be a clear call to action encouraging visitors to take the next step. After all, the only people who will be reading this are newcomers. Current members will skip right past this to things like the event calendar. So, offer a conversion point for users, like “Ask us a hard question” or “What to expect when you visit.”

By contrast, the “Special guest” box is fantastic. It addresses key issues and drives people to dig deeper. I only wonder whether it could be a more prominent element of the page. Again, members will get to where they need to go; so focusing on those who are new to the website and the church would go a long way to maximizing the opportunity.

I know I am really beating this website up, but it is not because I dislike it or think that it doesn’t serve its function. My goal is only to challenge our thinking and our preconceived notions of what a website should look like and do. I actually commend this church for having a beautiful and functional website, with a mobile extension to boot!

 

Mobile websites dramatically shrink their content

Another obvious lesson related to paring down the navigation is that mobile websites invariably shrink their content. Not only are the number of options reduced to the core functionality and purpose of the website, but the copy is vastly reduced, too.

In some cases, much of the copy is eliminated entirely! This begs the question, is this content necessary on the full website if the mobile version functions well without it? Divi Aruba is a great example of this. The alluring marketing speak laid overtop the photo might seem like a must-have element for the home page, but it has been nuked on the micro mobile website.

On the mobile version, the logo is placed on top of the same image, and yet it still conveys the exact same message: if you want to go some place like this, read on. Why not use this prominent spot to drive people to the desired action? Surely the designers know what is the most critical element for converting visitors to customers. Put this information to work, and drive people there with a prominent call to action instead of fluffy marketing speak.

 

All the good stuff, sans fluff

This leads us to the next lesson: lose the fluff. The next example is a positive demonstration of this. Travel Tex is a travel information website for the state of Texas. It has a clear purpose and audience in mind. Fortunately, the designers have fully embraced the fluffy-less mindset.

Not only does the mini mobile website focus entirely on the topic at hand and the key actionable items, but so does the full website! What a relief to see almost no fluff at all. Including something dreary like a history of Texas would be all too tempting. If people wanted a history lesson, they wouldn’t come this website. You will be hard pressed to find content that is not relevant to this website’s singular purpose.

Get into the habit of questioning everything. This is the only way to really boil a website down to its critical elements, which is exactly what happens on a good mobile website. Tough choices are made and otherwise valuable content is cut in order to streamline the website. Call fluff for what it is and nuke it!

 

Branding is king on the mobile web

I am all about creativity on the web. In fact, many of the greatest changes in the industry have come about as a result of a refusal to stick to the status quo. But there is a time and place for everything. So many designers use their assignments as an excuse to release their creative juices, for no other purpose than to do something creative. This turns the website into a design for the designer, not for the client and their needs. This is one thing the mobile web warns against rather boldly.

Branding is incredibly consistent on the mobile web, and one of the most consistent parts is the placement of the logo. On mobile websites, you won’t find any crazy logos at the bottom with fixed footers. Functionality is king, and logos always appear at the top. Can you imagine hitting a mobile website and not seeing the logo right away? Yet this is commonplace on many full websites.

Here are a few websites that, while minimal and lacking in mind-blowing style, are rich in branding that can’t be missed.

The lesson here can have a profound impact on how you approach your work and on the fundamental value you pose to your clients. For every designer who figures out that the client’s needs should be their entire purpose for the project, there is another who wants to show the world how creative and original they are.

Like anyone else involved in the production of a website, the web designer should be single-minded in serving the client, helping their business and improving the bottom line. With every element you put on a mobile website, considers its role and the benefit it will bring. Apply this mentality to everything you do, and you will soon find a strong ally in your client.

The more we embrace the needs of the client and do everything we can to bring value to their website, the more we will see a fundamental shift in our work. We will go from building “cool stuff” to looking at everything from the client’s perspective. Does this feature stand to increase their profit? How can the design be changed to improve their business? If a byproduct of your work is more money for the client, then you will find opportunity everywhere.

 

Websites without the gimmicks

One of the greatest achievements of the mobile web is the total lack of gimmicks. To be fair, there is a time and place for gimmicks on the web. In fact, I dedicate whole sections of my books to them. But the lack of gimmicks on mobile websites demonstrates that these seemingly great ideas serve no real purpose.

Everything that goes on a mobile website should go through several filters. Is the content relevant and utterly useful? Is the content critical, and does it serve the core purpose of the website? Is the website easy to use and understand? Is the navigation unconventional? If so, is it critical to the function of the website? The answer may well be yes, but more often than not, it will be a decisive no.

Some gimmicks that are noticeably absent from mobile development are splash screens, unusual navigation, meaningless animations and interactivity, inline scrolling regions, odd layouts and fixed-width layouts. The efficiency of the mobile web is amazing.

 

Conclusion

As you can see, we have a number of lessons to learn from the mobile web; particularly, its ability to reveal unnecessary elements of a website. As with many things in life, a slight change in perspective often opens our eyes to the true value of things we have long taken for granted.

I am not suggesting that we have lost sight of the purpose of the web. Rather, I am proposing that we adopt a far more strategic mentality.

The input form is an essential element of almost any website or application these days. Input is a core method of interaction, and in many cases it represents the hard conversion point between success and failure. With the amount time and effort we put into bringing users to our sign-up and contact forms, it’s surprising that we tend not to spend a proportional amount of time on the forms themselves.

A number of techniques and elements can be used in Web forms to turn them from abject failures into successful conversion points. In this article, we’ll present some interesting examples and useful guidelines for Web form design.

A Dash Of Quirkiness

Part of Web design is about communicating personality and being relatable, because people enjoy dealing with other people. One quality that almost always helps is a bit of quirkiness and fun. A small dose of friendliness and personality will make the input process a bit more enjoyable and human.

Jarad Johnson

Jarad Johnson‘s contact form has a flavor of good ol’ post card. The visual appearance of the form makes it stand out from the usual generic forms found elsewhere. A very nice touch to an often forgotten element of Web designs. By the way, the Postage for the email postal service was already paid. Good to know. Very well done.

11jarad in Useful Ideas And Guidelines For Good Web Form Design

Red Tiki

Red Tiki‘s quirkiness is tied to the company’s brand and identity, but is powerful here nonetheless. From the frame motif to the wooden character peeking out, this form feels fun and approachable. Little colloquial phrases like “This lovely form” and “We’re always keen to lend an ear” are fantastic ways to make the company more relatable. The form is bursting with personality and flare, which helps the user complete the form and click the “Submit” button.

3red in Useful Ideas And Guidelines For Good Web Form Design

Applicom

Applicom‘s form is a great example of how to be clean and professional without being sterile. Styling the form like a letter — with a stamp, subtle paper texture, striped edge and handwritten addressee name — may seem cliche, but it demonstrates a certain level of personality and care. Language such as the “Do: Be fine, use your real address. Don’t: Be negative, spam” may seem trivial, but it’s important. At the end of the day, it makes users feel like they are dealing with people who aren’t afraid to speak to them. Craftsmanship always indicates care and professionalism. People like that.

5applic in Useful Ideas And Guidelines For Good Web Form Design

Sophie Hardach

Sophie Hardach‘s form is another example of a post card idea implemented in a contact form. The input fields are a bit clearer than one would think, yet the “Submit”-button is a bit more difficult to find. In order to send the message, a stamp in the right upper corner needs to be dragged to the Stamp area of the form. In fact, the form is not only very original, but also accessible. Excellent work.

20sophie in Useful Ideas And Guidelines For Good Web Form Design

Two Paperdolls

Two Paperdolls has probably the busiest contact form of all the forms featured in this article. However, the form fits wonderfully to the overall design of the page which is a “We Are Hiring” page for designers with strong focus on typography. Notice the clean real-time validation for the form: the error indicator is diplayed in the right upper corner of each input field. Too bad that the navigation through form fields doesn’t work properly with “Tab”.

10twopaper in Useful Ideas And Guidelines For Good Web Form Design

Kontain

Kontain uses a different kind of a date picker for letting users pick the date for the form. The designers have arranged the dates in four rows rather than displaying them all vertically. A nice idea for reducing the horizontal scrolling for the users.

16-1kontain in Useful Ideas And Guidelines For Good Web Form Design

Wopata

Wopata‘s slider for the timeframe in their contact form is much different from the generic sliders, select-menus and radio buttons. This is a proof that filling in Web forms can be fun.

17wopata in Useful Ideas And Guidelines For Good Web Form Design

Fi

The language used on Fi is more friendly than formal. The inviting nature is reinforced by the short colloquialism for each form field that illustrates why the information is being requested. The language of labels should give off a little charm, without being insincere or overbearing. Isn’t everyone more engaged in a conversation if the other person is pleasant and approachable?

2fi in Useful Ideas And Guidelines For Good Web Form Design

egopop

egopop has a very simple, perhaps oversimplified contact form which however has a nice touch. The weird character on the right side plays wonderfully together with the other characters on the site and makes the contact form less boring than it would be otherwise. The contact form opens in a lightbox.

6egopop in Useful Ideas And Guidelines For Good Web Form Design

Idyllic Creative

Some forms are boring, while some are beautiful. Idyllic Creative‘s contact form is remarkably simple yet beautiful. Another example of a design agency which integrated a character from their work in their contact form.

8idyl in Useful Ideas And Guidelines For Good Web Form Design

Tinkering Monkey

Tinkering Monkey‘s character on their contact page is another interesting example of how the contact form page can be made a bit less boring. Notice the FAQ area on the right side of the contact form. An excellent idea for helping customers quickly find answers to their questions once they feel lost and can’t find a solution to their problem.

25tinkering in Useful Ideas And Guidelines For Good Web Form Design

Ditio

Ditio‘s designers have decided to combine their sign up form and a contact form in a hidden sidebar box, very much like it’s often done with the fixed “Give feedback” buttons on the left or right side. Once a trigger button “Inschrijven” is clicked, users can sign-up for their account and even upload a CV. Notice that there is no textarea available for lengthy details.

3ditio in Useful Ideas And Guidelines For Good Web Form Design

Treehouse Editing

Treehouse Editing‘s contact form is another example of a quirky design with a clean and lean layout. When the user navigates to the page, the background changes to a spring theme, which is itself associated with making contact, thus encouraging them to fill out and send off the form. Notice that all that is necessary for initial contact fits into a couple of fields; further information can be collected in subsequent correspondence. Ask yourself whether a minimal layout would do the trick on your website as well.

4treehouse in Useful Ideas And Guidelines For Good Web Form Design

Amazee Labs

Amazee Labs doesn’t have to do much to make its form usable and inviting. The form has only a few quirks, namely the texture, the “Hi there, let’s get in touch!” line, and the “Send It!” button. It may not seem like much, but the casual language, careful color choice and overall texture help Amazee Labs instantly feel like a friendly and easygoing bunch.

6amazi in Useful Ideas And Guidelines For Good Web Form Design

Wing Cheng

The motif of Wing Cheng‘s website is an open sketchbook, with most of the sections designed as sketches and thumbnail drawings. The contact form maintains this personality and coherency by following the motif. The form is simple and appropriate. The thought diagram with the email address adds visual interest. Maintaining the hand-drawn style is what brings out the quirkiness. Imagine how jarring and uninviting this form would be if it was a default HTML field set stuck on top of a beautiful paper texture.

7wing in Useful Ideas And Guidelines For Good Web Form Design

Break It Down

No one likes a humongous unending list, especially a list of elements to fill in or interact with. Just as a giant paragraph of text is daunting to the user, so is a giant block of empty fields. To coax the user to the finish line, the designer should make them feel like they are completing steps, or bite-sized chunks. Take a giant web project: trying to wrap your head around it all at once is almost impossible. But if you break it down into goals, and then stages, and then sets of tasks, it becomes much more manageable. This is what we want in a Web form, especially if you’re asking for a sizeable amount of information. Keep in mind that you can organize a form simply by sectioning off parts of it or by arranging the content into columns.

CollisonLabs

CollisonLabs‘s contact form might appear to be a bit too complicated at the first glance, but it’s quite straightforward. The left side of the contact page contains alternative contact information as well as a map which is designed with the overall design of the website in mind. On the right side, each input field is clearly represented and highlighted when the user fills out the form. Nice, clean work.

14collision in Useful Ideas And Guidelines For Good Web Form Design

Visual Republic

Visual Republic‘s choice of design for input field labels is similar to the solution by guys over the CollisonLabs. Giving the field label a solid background with an arrow to indicate where the text would need to be typed is a nice technique that could be used more often.

26visualrepublic in Useful Ideas And Guidelines For Good Web Form Design

CSS Tricks

CSS Tricks‘s comment area is a great example of a well-organized, helpful and clean comments area. Notice how the “star” image in the text area fades away as the user types in some text in the form.

22csstricks in Useful Ideas And Guidelines For Good Web Form Design

Barley’s Greenville

Barley’s Greenville‘s form for beer rating is an interesting example of how multiple sections can be combined to make the form intuitive and easy to use. Notice the arrow-like symbol between the first and the second section as well as various shades of the brown color within the form.

23barley in Useful Ideas And Guidelines For Good Web Form Design

Blue Sky Resumes

Blue Sky Resumes uses sections to make its extremely long form much more manageable. Standard headings and horizontal rules are used to divide sections. The designer was also careful to visually distinguish the different sections so that the form doesn’t look like a long list of fields.

 in Useful Ideas And Guidelines For Good Web Form Design

Validate Clearly

Users will not spend extra time making sure they have given you all of the information you need. Many designers believe that form validation detracts from the user experience, but its effects are adverse only when done poorly. When validation is simple and clear, it merely offers alerts and guidance to the user.

Make sure that you clearly mark the problem and tell the user exactly what is wrong. The fastest way to kill the user experience is with generic error alerts that mean nothing to the user. People are more than happy to quickly fix an issue if it is pointed out to them plainly.

Moody International

Moody International provides an excellent example for a contact form that nicely combines different types of contact information in one place. On the left, you’ll find a postal address along with a map, a phone number as well as the company’s email address. The right side is dedicated for more detailed inquiries and consulation requests. The form’s labels disappear once the user has provided their data. Unfortunately, the form doesn’t have an instant real-time validation and uses JavaScript pop-ups to inform the users about their input mistakes. Besides, the map on the left side could be integrated a bit better by using zoom controls as well as search functionality provided by Google Maps.

1moody in Useful Ideas And Guidelines For Good Web Form Design

El Passion

El Passion is another example of a contact form that combines various types of contact information in a very compact and meaningful way. Real-time validation in use. The map on the left side could be zoomable, though.

5elpassion in Useful Ideas And Guidelines For Good Web Form Design

Orlando Advertising

Orlando Advertising‘s form beautifully integrates its branding colors in a clean and attractive Web form. The red borders might be misunderstood and could be used to visually highlight errors in the form, but instead validation errors are displayed once the “Submit” button is clicked.

28soap in Useful Ideas And Guidelines For Good Web Form Design

Reinvigorate

There are usually two essential elements to effective form validation: identifying the specific problem, and clearly marking how and where to fix it. Reinvigorate uses an alert icon and a loud red outline to indicate the problem, and then it uses the side column to tell the user what’s wrong with the information. Moreover, the user gets a visual indication when the information is corrected. Being clear about the problem and not leaving the user in the dark make for a smooth experience.

Reinvigorate in Useful Ideas And Guidelines For Good Web Form Design

GitHub

GitHub‘s sign up form is as simple as its overall design, yet its beauty lies not in aesthetics, but in its functionality. When you enter your credit card details, GitHub automatically recognizes the credit card provider and visually highlights it in the form, thus providing instant feedback to the user. A wonderful example of invisible design.

15-1-github1 in Useful Ideas And Guidelines For Good Web Form Design

15-2-github2 in Useful Ideas And Guidelines For Good Web Form Design

Blue Sky Resumes (revisited)

I would like to point out another great part of Blue Sky Resumes‘ form. The error alert is clear and specific. By specifically telling the user that their name is missing, the user is spared confusion and is able to find their bearings quickly. To reinforce this message, the name field is clearly highlighted and marked as required.

 in Useful Ideas And Guidelines For Good Web Form Design

Interactivity

A form is an interactive part of a website or application. In general, people want to interact with elements that feel alive and that follow convention. Many forms have a slight indent, creating a slight 3-D effect, whereas other forms simply show a box outline to delineate form fields. The key to any interaction is expectation and feedback. Make sure your forms react to user input, mainly by specifying the focus and hover states of input elements.

Grooveshark VIP

On Grooveshark, its styling of the focus and active element makes it clear which field is being interacted with. Besides, erors are displayed in a nice, helpful way while error messages are displayed at the top of the “window” using Ajax.

12grooveshark in Useful Ideas And Guidelines For Good Web Form Design

The design helps the user to maintain focus and to breeze through the form. It even makes it kind of fun, because the user wants to see a response when they click on or interact with an element.

Unlocking

Unlocking‘s checkout form is a nice example of how simple design can work very well with appropriate level of responsiveness. The input fields look nice, the hover state is very clear and the hints on the right side are helpful and unobtrusive. The contact form shows a subtle blue background when the user focuses on a field.

The form uses an additional color to highlight fields. As long as the interaction creates a noticeable effect, the form will be more usable.

The highlighting is not as bold as on some other sites featured above, but still effective and interactive and perhaps even more usable.

18unlocking in Useful Ideas And Guidelines For Good Web Form Design

Jason Long

Jason Long‘s form silently sits on the page, doing nothing, unless… well, unless you send it out. Jason uses an animated contact form which flips and changes as the message is being sent. An interesting, memorable tweak that makes the user experience just a tiny bit more interesting.

38-1-black in Useful Ideas And Guidelines For Good Web Form Design

38-2-black in Useful Ideas And Guidelines For Good Web Form Design

38-3-black in Useful Ideas And Guidelines For Good Web Form Design

The Finish Line

An effective Web form should get the user to cross the finish line. It might be a “Submit” button, an order confirmation button or a sign-up button. At the end of the day, the designer wants the user to hit that conversion point and be reasonably happy with their decision.

Make sure that the way of submitting the form is bold and specific. Where possible, use language like “Send email” or “Finish signing up,” so that the user understands exactly what the button will do.

Squarespace

On Squarespace, the designer has gone as far as to label the button “Finish & Create Site” and has also made note of its function just below. This page is especially effective because of the contrast: the layout is completely monochromatic, so making the button green puts more focus on completing the process.

1sqr in Useful Ideas And Guidelines For Good Web Form Design

BLITZ

BLITZ has come up with an interesting solution for their contact form. A content block appears in a lightbox and presents three different types of contact forms: inquiry about business, jus saying “Hi” and CV submission. The forms have a similar appearance but have a different structure. In all cases, the user has a checkbox for email updates at the bottom as well as postal address under the form. One confusing bit is that the form fields get a red border when you type in your data. Some users might confuse it with error notifications.

12blitz in Useful Ideas And Guidelines For Good Web Form Design

Custom Bags HQ

Custom Bags HQ has tried to combine various content blocks within one context. The “Contact” link in the upper navigation leads to a page which contains both the contact form and the “About us” information. In our opinion, “About us” doesn’t really detract from the user experience, but it doesn’t enhance it either. The link doesn’t feel right here, at least at the first glance. Interesting idea: the form contains a checkbox asking users if they are interesting in receiving an email newsletter. A smart handle to keep customers close to you and keep them informed about your updates and news in the future.

7custombag in Useful Ideas And Guidelines For Good Web Form Design

Clear Labels

Any interaction that we encourage must be as non-threatening as possible. After all, we are asking for personal information of the user. They are under no obligation to provide it. The first step to avoiding frustration and confusion is to use plain and simple language. Make it to the point and not flowery.

Foundation Six

Foundation Six‘s labeling is effective because it streamlines the process and simplifies commitment for the user. The company boils each category of information down to one word. The “Submit” button is also clear and straightforward. There is no confusion in the user’s mind. Another strength here is the balance between multiple choice and fill in the blank (which we’ll get to below).

Foundationsix 01 in Useful Ideas And Guidelines For Good Web Form Design

Bärnt&Ärnst

Bärnt&Ärnst‘s designers follow their minimalistic approach to design and provide all contact information such as postal address, phone numbers, email as well as a short form for user’s convenience. Often you really don’t need to require more information than that for the initial email.

2born in Useful Ideas And Guidelines For Good Web Form Design

Zoltan Hosszu

Zoltan Hosszu‘s contact page illustrates how icons can be used effectively to indicate the purpose of input fields. The form itself is very simple and quite unspectacular, but icons as well as some subtle textures make it a bit more distinctive and interesting.

33zoltan in Useful Ideas And Guidelines For Good Web Form Design

Stuck Axiom

The labels in Stuck Axiom‘s “New business” contact form are short and concise. The simple language and clear labeling make the form non-threatening and easy for the user to fill out. Contrasting with the gray of the form fields, the “Submit” button is set off and accented in red, making it clear where to click.

8struck in Useful Ideas And Guidelines For Good Web Form Design

Solid Giant

With clear labeling, not too many check box options and predefined budget ranges, Solid Giant can get back to a potential client with a precise offer. The “Submit” button is clear and straightforward, marking the end of an intuitive path through the form. All elements are described carefully, and there is no room for the user to misinterpret what information to enter where.

9solid in Useful Ideas And Guidelines For Good Web Form Design

Joey Rabbitt

Joey Rabbitt isn’t a fan of lengty emails. The message of the textarea can contain at most 500 characters. However, if the user would like to email Joey directly, he can use an email on the right side of the page. Joey also showcases the networks he is a member of as well as his current location. Notice how beautifully the content is designed by using icons and various colors of grey throughout the page.

4joey in Useful Ideas And Guidelines For Good Web Form Design

Multiple Choice Vs. Fill In The Blank

Selecting items from a list is naturally easier than filling in a blank. A blank sometimes raises more questions than it answers, especially if the labeling is not clear or there are too many empty fields. The user may be confused by the format, the type of information being requested or how exactly to answer a question. In general, a choice is better than a blank, especially with information that could be confusing, such as scope, budget, project type, etc. This is why most order forms do not require you to fill out every piece of information.

Pieoneers

Pieoneers uses the fill-in-the-blank format in the left column for generic information, with established conventions for format and type. On the right, more complicated questions are in the form of drop-down boxes, letting you choose between broad options, so that there is no confusion or hesitation.

10pie in Useful Ideas And Guidelines For Good Web Form Design

Information Highwayman

Information Highwayman cleverly combines multiple choice and fill in the blank. The empty fields are for simple bits of information specific to the user: name, email address, comment. These are all non-threatening and could not be formatted as multiple choice. Questions related to services sought and budget tend to be more complicated. Giving user some options here simplifies the process of explaining what you’re asking for.

Information-highwayman in Useful Ideas And Guidelines For Good Web Form Design

When Things Go Wrong: Facio Design

Facio Design‘s contact form is probably the most difficult contact form featured in this article, and rightly so. The choice of typeface and the font size is suboptimal as it is very difficult to read, especially on Windows. The designers have tried to mimic the appearance of a letter, but it doesn’t quite work here. A very simple, basic form would work better here. A nice example of how aesthetics can fail the functionality of the form.

37facio in Useful Ideas And Guidelines For Good Web Form Design

Conclusion

This overview covers a few simple best practices that you can apply to Web forms. Just remember to spend the extra time on your next website; many of these approaches are not hard to implement and will lead to much higher conversion rates, but they are often overlooked. We spend so much time getting people to the door that we forget to make the door as inviting and useful as the path to it.

How to avoid redesign failure

We’ve all seen or heard about the horrors of failed redesigns. Regardless of the size or scale of a site, any redesign is frought with potential perils and pitfalls. Alienating your existing users is probably one of the biggest dangers of any redesign project.

Of course, the larger the site, the greater this danger becomes. But even a small site can suffer from ill-will if they don’t consider their existing visitors when tackling a redesign project.

The following guide should keep you on the right path for creating a revamped and re-imagined site that keeps your users happy.

And if you’ve already found yourself in the midst of a failed redesign, we’ve got help for you, too.

Redesign right

When you decide a redesign is necessary for your website or web app, there are a number of things you need to consider beyond the technical aspects. Remember, your site likely already has regular visitors or regular users, and they’ve come to expect certain things when they visit your site. You need a good reason for changing those things, and you need to take them into account when starting on your redesign and throughout the process.

Communicate with your existing users from the beginning

Unlike a new site design, a site being redesigned likely already has a user base. Involving that user base from the beginning on your redesign can result in a much better user experience in the end. After all, these are the people who are already using your site, who are already familiar with what you have. Sure, some people are resistant to change in any form, but others may be able to offer you some fantastic insight into what’s great as-is and what could use some revamping.

It’s important to take into account the way visitors use your existing site. Just because you wanted them to use the site in a particular way doesn’t mean that’s necessarily the way it’s being used in the real world. Take this into account when you’re redesigning, and don’t break existing user patterns.

Test for both new and existing users

Conventional testing wisdom often says you should only test on new users to get the most accurate results. This is a great strategy if you’re testing something like a sales page. But if you’re redesigning your entire website, you want to get feedback from people who are already using your site. The last thing you want is to launch a redesign and alienate every existing user you have.

Let your existing visitors know that you’re testing out a new site. Consider giving them the option to test the new site if they choose to do so, and then ask for some unobtrusive feedback in the form of a survey or similar mechanism. Then, listen to what they’re saying.

Let users upgrade on their own schedule

This is particularly important with more app-like sites. Letting users switch to the new site version on their own schedule is a great way to prevent complaints. Social media sites are probably the most common sites to do this type of thing (like Twitter did with their new layout). This prevents surprises for your existing users, and lets them make the switch when they have time to get used to the new interface.

It’s important to set a deadline for the switch, though. Make sure you let users know that they can switch any time between now and some future date, and let them know that on that future date everyone will get the new interface. This prevents surprises while also preventing stragglers from requiring you to support the old site indefinitely.

Make it easy for users to offer feedback after the change

There are a ton of tools out there for collecting user feedback. Use them to find out what your visitors like and don’t like as you launch or as you’re testing. Then, make sure you address anything that’s raised by more than a handful of visitors. Remember, for every visitor who voices a concern, there could be dozens who feel the same way who aren’t saying anything.

Make your reasons for redesigning clear

It’s important to let your regular visitors know that you have reasons for redesigning your site. Too many people who aren’t familiar with the technical aspects of running a website think redesigns are purely for aesthetic reasons. Let them know what functionality you aim to add or what user interface improvements you’ll be making before the fact. A blog post addressing your redesign plans can be a great way to open up a dialogue with regular visitors and users.

Offer a tour or tutorial for any major user interface changes

If you’re changing the way parts of your website work, or drastically rearranging elements on the page, it’s a good idea to offer a video or other tutorial or tour of the new design and features. This can help your existing users quickly adapt to the new design, and feel less alienated. It gives the impression that you care about the experience your users are having, and that you want that experience to be as good as it can possibly be.

What if your redesign has already failed?

So you’ve launched your redesigned site already, and now all you’re hearing is complaints from new and old visitors alike. What do you do? Should you just go back to the old site and try again? What if that’s not an option, or you’ve invested thousands of dollars and months of time in the new site? What then?

It’s all about damage control

The first thing you need to do is acknowledge that your redesign hasn’t gone over well with everyone. Let people know that you hear what they’re saying and that you’re considering their concerns. Whether you do this through Twitter, your blog, or some other outlet depends on where you can reach the highest number of your users.

Acknowledge and address complaints

Acknowledge specific complaints if you can. If everyone is complaining about how a certain function is hard to find, then address that. There are a few ways to do that: you can simply post on your blog or send out an email about it with any helpful information or tips, or you can make a change to make it easier on your visitors. If it’s a really big problem, making a change is probably the better solution.

Don’t be afraid to roll back

If there are huge complaints, or if you see that your traffic numbers are going down, don’t be afraid to roll back parts or all of your site to the previous version until fixes can be implemented. If your website’s success is suffering because of a redesign, there’s no sense in sticking to the new design. You’re better off rolling back and acknowledging that your visitors are unhappy (and therefore showing that you place user experience above all else) rather than trying to blindly insist that the new site is better.

Monitor carefully

Whenever you’re launching a new design, it’s important to track your analytics carefully. Set up goals and funnels for various functions on your site, and then make sure the you’re not suddenly losing a lot of visitors at a particular point.

Analytics can help you make proactive changes to your site, anticipating what visitors are getting hung up on. Make sure you have some baseline statistics to refer to and compare.

Also monitor the tone of social media posts about your redesign. If you see a lot of complaints circulating, or even a lot of confusion, be proactive and engage with those people. It’s important to be engaged throughout a redesign so that your users know you’re making changes in an effort to benefit them, and not just for some undefined goal.

Many designers come to me for usability testing consulting services. One of the reasons they reach out is because they assume usability testing must be a complex, scientific process. As a result, they’d prefer to have an outside company conduct their usability tests.

Then I tell them I rarely run usability tests anymore! Why? Well, in my experience the best way to do usability studies is to do it yourself. So I spend a lot of time helping teams do learn how to do it themselves, not doing it for them. By conducting their own quick and dirty usability studies, design teams can get feedback faster, easier, and more affordably than hiring an outside professional.

Usability Testing Is Not a Complicated Process

The first thing I tell designers is that it’s a mistake to think that usability testing has to be complicated. It’s a technique anyone can learn with a little training and a lot of practice. Usability testing isn’t rocket science, but it does need to be integrated into a design team’s overall process in order to work.

I’ve found that the most successful teams learn to conduct their own informal testing whenever they can without waiting for the usability team’s availability. In the most successful projects, the team has a design idea, they quickly sketch it and create a prototype, and then test it as quickly as possible.

When I work with design teams who have never conducted a study, I teach them the basics of usability testing, have them observe me facilitate one or two sessions, and then they try it on their own with my guidance. After a few of these sessions, these usability “newbies” are usually ready to run their own testing sessions.

Usability Professionals Act as the Coaches

So what’s the role of the usability professional? In most mid-to-large-sized corporations, there are too many design projects for one person—sometimes even an entire usability team—to run all of the usability studies the design teams need.

As a result, the usability professional is most successful as a Coach who educates and advises the organization on which projects to focus on, how to plan and run their studies, and how to analyze the results. They can better serve design teams by sharing best practices for conducting usability tests, interviews, field studies, diary studies, and other research techniques.

How Can Design Teams Start Testing On Their Own?

If you’ve never conducted a test, start right away. Try a test next week; it’s not as complicated as it may seem. At its core, a usability test involves putting a person in front of your product and watching what they do. Your goal is not to implement the scientific method as you elaborately lay out a treatise on the usability of your product – just to observe how well users can accomplish their desired tasks with it.

Time and time again I’ve seen immediate results from such an approach. Learning how to run internal usability tests will not only save a company money, but will instill a “design for usability” mentality into your design team and, hopefully, the organization as a whole.

So instead of hiring an outside professional to do usability testing for you, try to find one who will act as your coach and guide instead. In no time you’ll be up and running with a regular testing plan that will benefit you far longer than the immediate project. Your design team will be more self-sufficient as a result.