BlogmyQuery – BMQ

Using illustration in web design has become quite trendy these days. People love to see beautifully designed illustration based websites because they stand out from the rest. Not only because of the beautiful illustrative art work and carefully crafted web designs but also because of the perfect balance struck between these two important components.

Today, we want to dig into some creative ways you can work beautiful illustrations into your web design projects. We hope that this compilation will inspire some new ideas. You can see in the examples where designers have captured a certain illustrative style and wonderfully integrated it into website design in various ways. These unique illustrative styles make a website more memorable. Enjoy!

The Showcase

Plavacek.net
Plavacek.net takes a unique and gorgeous approach with its design that certainly looks great and attention grabbing. The designer imaginatively presents the underwater and above water scenes in a single frame brilliantly.

Meomi
In this web design, although the mascot is not the only bit of illustration and character work present it does add a lot of personality. The overall illustrations and style of the site make it a less formal presentation.

The Last March
This is another illustration driven web design that demonstrates the different levels of playfulness and whimsy these types of illustrated elements can add beyond pure decoration.

Pampaneo
Pampaneo’s lively use of yellow and green with idiosyncratic characters creates a bold look with depth and balance.

The Pixel
This is another site with a very stylish design, but with a much busier layout. The blue-tone gives a very strong impression.

Pojeta
With this web design, the designer conveyed his own personal and unique style with a single illustration against a vast amount of whitespace. This makes the design look hugely impactful and very beautiful.

YODAA
This website successfully manages to be unique in its own way by highlighting the illustration with carefully positioned content; and since this is accomplished effectively, the result is quite spectacular.

Aussie BBQ Legends
What makes this website stand out is not only the stunning illustrative art work or the vigilantly crafted design; rather it is the beautiful balance between these two components like was mentioned in the opening.

Ufo.lt
This website demonstrates a beautiful submersion in illustration. You can see how creatively the designer makes use of their illo skills.

Pieoneers
The illustration presented in this website although it is very colorful and has some depth, it still maintains a bit of a simplistic feel. The muted tones used for the rest of the site really make the splash of color in the pie very pleasing to the eyes.

Html5 Lab
Html5 Lab has a bold site, using large 2D illustrations and some light embellishments coupled with a sharp color scheme of grey and red with little traces of white and black to pull the design together.

Pigeon and Pigeonette
The uncharacteristic layout and quirky, vibrant illustration make Pigeon and Pigeonette worthy of exploring.

Teamnomad
Teamnomad’s header reinforces its own theme simply and in an understated way, though it is still extremely apparent, creating a strong brand connection quickly. The rest of the page leaves enough room to breathe, so viewers aren’t overwhelmed.

Iwit
A large stream of character illustration is paired with an otherwise simple website design, creating a very attention-grabbing result. There truly isn’t much here that could use improving.

Rays-lab
Here the design uses a rich, vibrant illustration that provides a stunning foundation for the design to work off of.

Coopers kids
Coopers kids’ illustration doesn’t carry on all through the page, but it works wonderfully with the peaceful color scheme creating a look that is both simple and effective.

Ericsteuten
Although very eventful, with lots of movement to draw the eye, the design here is still balanced well. This balance seems so simply struck that it makes the whole process look easy.

Attack of the web
Attack of the web mostly confines the use of exceptional illustrative elements to the over-sized header of the single page site. This is a great example of a functionality driven site with a strong use of illustration.

Cubeclub-chemnitz
This web design has a strong letterpress print feel, with bold text and original icons. The repeated texture pattern is a nice touch.

Dedoce
In this design, the underwater scene possesses loads of grunge and texture which keep it from looking like just another vector built website.

Cool Brush Design
Cool Brush Design’s site throws restraint out the window yet still manages to pull off sophistication with ease. The majority of the illustration serves both ornamental and functional purposes.

Arbel Designs
The illustration work in Arbel Designs’ site is extremely attractive and attention grabbing, however the way the tabs adjust when they are clicked is somewhat distracting; but the overall design is still extraordinary.

Toris Eye
In this web design, illustrations are put to work to create an overall theme that looks visually alluring and appealing.

Racket
Here the thematic illustrations are used establish a very surreal tone or theme for the site, and they certainly grab the attention of the users.

Get my boss to North Cape
This web design whimsically repeats its fundamental mission statement through the illustration which comically recreates the site title whilst simultaneously establishing a theme.

Egopop
This is another site with an atypical layout in this collection. The illustrations in the design let you know about the individual this site represents as well as break the normal web mindset a visitor may have.

Duirwaign Studios
Duirwaign Studios makes use of illustration in a very beautiful and breathtaking manner. It also provides some life and movement to the design putting a memorable face to it.

Mellow Mushroom
In this case, the interactive illustrative elements provide much more than mere decoration, adding an edge which smartens the design in a way that only interactive illustration can.

The Great Bearded Reef.com
The Great Bearded Reef makes use of creative illustration to create this playful masterpiece. This is a distinctively fun, tongue-in-cheek design which fits and serves its purpose well.

Moshi Monsters
Here, the illustrations are relatively strange yet tempting owing to their inimitability and innovation. The big and bold typography definitely is the first thing that gets noticed, and compliments the rest of the design well.

The Alamo Basement
The background texture of this website provides it an extraordinarily captivating and personal feel. The visual explosion of characters and colors is great for getting the reader’s attention.

Florida Flourish
This is an enormously stunning illustration full of interactive elements which comes with an unmatched style that captivates the visitors.

Webbli World
This website illustration instills a sense of enjoyment and wonder that engages the visitors with its appealing design.

Old Loft
Old Loft brings into play an artistic and inventive illustration that makes this website both unforgettable and exceptional.

Visit Cascadia
The overall style of this website feels like an illustration, and still, it doesn’t have the characteristic humanistic elements.

Veerle
Here the illustration lends more backup support, with many brilliant background elements in play. Some of these are more corporeal than others, although in general they are more about visual support than anything else.

Tea Round App
This is an ideal example of illustrated design. The style is tremendously stunning, totally unique, and very appealing.

Pixel Baecker
The hand rendered design here showcases the designer’s talent. It demonstrates that they creates artwork with their hands that connects flawlessly to their animation skills.

Chernobyl heart
In this web design, the illustrated text is far more subtle than most. Rather than driving the whole direction of the design, it merely plays along nicely.

Instant Ad Legend
The somewhat singular style of this design delightfully incorporates the large illustrative elements which play several roles in the overall design.

(rb)

We often hear companies, including Web agencies, boast about how they provide exceptional client service. But how do they define exceptional?

Consider this scenario. You are hired to design and develop a new website for a retail client. The client loves the design, and the pages you develop use the latest in HTML5, CSS3 and responsive design, resulting in a website that works wonderfully across browsers and devices. The e-commerce features of the new website help the client significantly increase their online sales, and the entire project is delivered on time and on budget. Now, is this “exceptional� client service? I don’t think it is.

When the client hired you, they expected that you would design and develop a great website. They also expected it would be done according to the timeline and budget set during the planning stages of the project. As successful as this project may have been for both you and the client, in the end, you did exactly what you were hired to do. You did your job.

Just Doing Your Job Vs. Delivering Exceptional Service

Nothing is wrong with “just doing your job.â€� In many cases, that alone is a tall order. So, while doing what you were hired to do is nothing to be ashamed of, it is also not exceptional — nor will it set you apart. There will always be other agencies or designers that will be able to do the work as well as you can — and there will certainly be someone willing to do it cheaper! The service you provide is how you can truly differentiate yourself.

Exceptional client service is about going beyond what is realistically expected of you. It is about surprising, and often delighting, customers, turning them into enthusiastic referral sources and lifelong clients who stick with you not only because you do great work at a fair price, but because the value you bring to them goes far beyond just your products.

In this article, I’ll detail a few of the ways that I have tried to take my own client service to the next level and deliver a better experience, starting with the most important aspect: the relationships that you establish with the clients who hire you.

There is a difference between doing what you were hired to do and delivering a superheroic level of service. (Image: JD Hancock)

Creating Real Relationships

Here’s a quick exercise. Write down your five most important clients (how you define “important� is up to you). Then, write down as many things you know about those clients that have nothing to do with their business or the work you have done for them. What are their hobbies or passions? How many kids do they have? How old are those kids, and what are their names? Where do they like to vacation? Things like that.

So, how long is your list? If you’re like most people I speak with, probably not very long at all. We learn everything we can about a client’s business, but we often fail to discover anything substantial about our clients as people. If we do not engage with our clients in a real, personal way, then we are just another vendor — and vendors are easily replaceable with better cheaper options. However, clients are much less likely to consider replacing people with whom they have real relationships.

So, how do you start learning more about your clients? Simple: ask them questions about themselves and their lives, not just about their business.

Asking Real Questions

When I give this advice to others, it is often met with some apprehension. Asking someone about their business goals is easy. Asking them about their life outside of the office is harder. We often avoid getting personal for fear of offending the person or saying the wrong thing; but by being overly cautious, we miss the chance to create a real relationship.

Whenever I get nervous about getting too personal with a client, I remind myself of a story. A few years ago, I had the privilege to work on the website for the Tori Lynn Andreozzi Foundation. This non-profit foundation was named after a young girl who, walking home from school one afternoon, was struck by a drunk driver. Tori survived but was forever changed. Today, she is in a minimally conscious state, unable to walk, speak or eat.

In one of my first meetings with this client, I sat down with the head of the foundation, Tori’s mother, Cathy. I began the conversation simply by asking her, “How is Tori doing today?�

Cathy smiled and answered that Tori was doing well. We had our meeting and discussed the website and the project. As we were wrapping up, Cathy thanked me for asking her about Tori. She explained that so many people avoid asking about her daughter, fearing the news would be bad or that Cathy would be upset by the question. The truth is that, even though Tori has bad days, Cathy always enjoys talking about her daughter and was very happy to be asked about her. By asking Cathy how her daughter was doing, I showed her that I cared about more than just the project.

The website for the Tori Lynn Andreozzi Foundation

Today, Cathy is one of my favorite people to speak with, and we begin every conversation by asking how each other’s children are doing. We have much more than a great client-vendor relationship, all because I asked a real question, honestly cared about the answer, and created a real, human connection in the process. Had I been too afraid to ask that question, I might never have been able to build the relationship that I have now.

Don’t be afraid to ask your clients real questions. If they don’t want to answer you, they won’t. But for those who do (and you will find that most, if not all, of your clients will be happy to have a real conversation that has nothing to do with business), you will be well on your way to building real relationships.

Participate In More Than Just Projects

Another way to build a relationship with a client that goes beyond the project is to participate in their events. If the client runs a non-profit organization, they might have fundraisers or similar events that offer you an opportunity to support their cause and nurture the relationship. Go to these events and participate. As a bonus, you will also be helping a worthwhile cause.

Not all of your clients will have fundraising events, but they might invite you to holiday parties and other gatherings. Take advantage of these opportunities to interact with your clients outside of a normal business setting. It will go a long way to reinforcing those real relationships that you are trying to create and show that you are more than just another vendor.

Similarly, consider inviting clients to some of your events to show that you view them as more than just a source of business. When they arrive, greet them warmly and enjoy their company, leaving business talk for another day.

Help Them With Services That You Do Not Provide

Clients may hire you to design and develop a Web presence for them, but in the course of the project you will often discover that they need other services that you do not provide. By listening to their needs, you might learn that they have issues with their payroll company or their accountants or some other aspect of their business.

Look to your own business and the vendors you use. There may be a service or company that you have had success with that you could recommend. Also look to your other clients to see whether they offer services that fit. If appropriate, set up a lunch meeting between you, the client with the need and the client that might be able to fill that need. Not only will you be taking two clients out for lunch, you will hopefully be helping them both by making a valuable connection between the two companies.

When a client can say, “I hired this company to design our website and they ended up helping us revamp our entire payroll system!â€� you position yourself as much more than just their “Web teamâ€� — you show that you are a valued business resource and a trusted advisor.

Pick Up The Phone

Good communication is key to any relationship. Still, judging from the number of clients I speak with who are unhappy with their current Web team — not because they do a poor job, but because they are unresponsive — quality communication is not always a given.

Regularly updating your clients by email is important, but also pick up the phone every now and then, so that you become more than just that distant person behind those electronic updates. By hearing your voice, clients will feel more connected to you and the project. It also shows them that you value them enough to take the time to make a personal call, and it gives you a chance to talk about something other than business.

Regular phone calls allow you to have real conversations with clients, communicating at a personal level that email and other electronic updates do not allow for. (Image: opensourceway)

Face The Bad Times Head On

Have you ever had to share bad news with a client, but rather than pick up the phone to discuss the issue, you waited and sent an email at 5:15 pm on a Friday? By doing this, you may have bought yourself a few more days before having to face the client’s worried questions, but you also damage the relationship by hiding behind an email. It also means that the client will read the bad news first thing on Monday morning; definitely not a good start to their week, and definitely not the way to treat a valued relationship.

Here’s a secret: clients do not expect you to be perfect. They do, however, expect you to be honest. When something goes wrong, let them know quickly so that they are not blindsided by the issue later on. And never deliver bad news by email. Picking up the phone to discuss the news lets you reassure the client and answer any questions they may have. An after-hours email certainly won’t do that for them.

If the matter is handled correctly, the client will not remember that something went wrong. They will remember that you were honest and kept them apprised of the state of the project, even when it did not go according to plan.

Be Thankful And Show Appreciation

When was the last time you thanked a client for working with you? How did you do it? Did you send a basket of cookies or chocolate with a generic “thank you� message, or did you do something more personal?

Too often, we fail to even thank our clients for their business. We are so keen to finish a project and move on to the next one that we forget to properly show our appreciation.

While a basket of sweets and a generic message is better than nothing, consider sending a personal, handwritten thank-you note.

Handwritten letters have become all but extinct these days. With the rise of electronic communication such as email, social networks and text messaging, so few people take the time and effort to actually write a letter. The gesture of a personal letter will delight and surprise your client, not only because you have thanked them, but because the way you did so was personal, memorable and the perfect cap to a successful project.

A thankful, personal handwritten card is a great way to cap off a successful project. (Image: irrezolut)

How About You? Do You Deliver Exceptional Client Service?

I hope this article starts a conversation. How do you deliver exceptional client service? What tips can you share so that others can delight their own clients and offer them value beyond just products?

In this industry, we are always eager to share the latest tips and tricks on CSS, HTML, JavaScript, PHP or some other Web technology. Let’s also start to share tips on how to deliver exceptional client service, because success in this industry is about much more than developing great websites — it’s about developing great relationships.

(al)

© Jeremy Girard for Smashing Magazine, 2012.

Photographers put a lot of focus and emphasis on the lighting for their pictures. After all, lighting is a powerful instrument in setting the overall tone and feel of the piece. Even when there is very little light to work with. In fact, it is in these situations that the lighting can create extremely emotive and distinctive compositions for the pics.

Giving the shadows so much reign to run freely, carving interesting depths and crevaces into the pieces. This can also prove very tricky for photographers as some equipment does not work as well under these conditions, and cannot take sharp, clear photos without enough lighting. Though in some cases, as we can see in a select few below, this can also give the images more tone and texture that fits well with that particular composition.

Below is a brand new showcase of low light photography to help get our readers inspired. Enjoy!

Flashes in the Dark

Los Taxistas Tambien Tienan Su Corazoncito by Succexxyy

Low Light by anisatrisna

low light by qqhee

Brimming Alleyway by Jordanart4peace

A Jack toy by EidanNoon

River by cog513

Low Light by HarizArt

Shot in Low Light by timlee9932

Just Looking by Spells17

Desolation Station by TLY88

Low light by Ezardio1992

Kathryn’s Portrait by Alex Southward

Subway (Low Light) by Ruthanne Reid

Sailors conduct a low-light, live fire exercise…by Official Navy Page

Low light by Intrepid Wanderer

Holding the light by Dino Quinzani

night light by Kristin Charles-Scaringi

time for sepia by Bill Ohl

low light by Michael Kumm

DSC_2927 by Matt Donovan

Striped fish in low light by Thomas Quine

London by Night by Wfate

long_exp-1000373.jpg by keroism

Bridge by Kid-Bob

Gano starting fire by Bill S

Fireplace Ornament by H00dMan

Japanese Influenced Lanterns by Jordanart4peace

05/365 10/16/09 Really low light by William Booz

valves by shinius

RANC by Matt Donovan

(rb)

Web design is a craft that is constantly evolving and yet also sometimes sabotaged. The moment a design is released, a new version is born. In the beginning, like a baby, it seems vulnerable and weak, but in time it grows up and becomes self-sufficient. Redesigning a website for its own sake doesn’t prove anything; quite the contrary, it reveals a lack of effectiveness on the part of the designer.

Product design is a craft in which new versions come to life with increasing difficulty. We can learn a thing or two from it when designing for the Web. First, let’s look at some examples.

• How many designs for the iPhone has Apple released since 2007? The answer is one, with only two tweaks. How many Motorola phones for Android can you find on the market right now? Thirteen, not counting the old models.
• How many designs of the Mini Cooper do you know of? Just that one brave design that has continually evolved since 1959! How many Toyota Corolla models can you count since 1967? Nineteen.
• Zippo lighters have retained their appeal since 1933!

Forget marketing, technical specs and hardware. Products such as the iPhone, the Mini Cooper and the Zippo lighter have become wildly successful because of their outstanding design. Such massive success springs from three sources: the designer, sticking to the scope and iteration. These aspects can help us in Web design, too. In this article, we’ll look at what we can learn from successful product design.

The Ability Of The Designer

Zippo lighters have remained elegant and reliable through time. (Image: cell105)

Do you trust your instincts? You should! Because when you see a design, you judge its attractiveness in less than a second. We all know what we like, even if we can’t always explain it. It’s about aesthetics. Aesthetics is a child of harmony, and harmony is not magic. It can be achieved when the designer embraces certain principles, such as balance, contrast and dominance. Becoming a fantastic designer, though, requires more than pure technique. It requires that you see the context and make decisions accordingly.

A couple of comments by Karim Rashid, featured in the documentary Objectified are fascinating and revealing. First, Rashid talks about a stereo that he loved as a teenager:

It was a white kind of bubble stereo with these two bubble white speakers. And it was probably very inexpensive — it was a real democratic product, and it had a turntable and the whole thing built in. It was a beautiful thing. Looking back and thinking why it was a beautiful thing, it was very self-contained, and the message was very strong and very simple, and at the same time it was very human. There was a quality about it.

See? A democratic, self-contained, human, simple thing with a strong message.

Here is Rashid again on thinking outside the box:

Why do we feel like we need to keep revisiting the archetype over and over and over again? Digital cameras, for example, [whose] format, proportion, the fact that they’re a horizontal rectangle, are a model of the original silver film camera. So, in turn it’s the film that defined the shape of the camera. All of a sudden, our digital cameras have no film. So, why on earth do we have the same shape we have?

How is it that Karim Rashid extracts such clear conclusions? What hinders us from doing the same? And not just in theory. Let’s do it for real. The next time you are about to make an important design decision, stop and ask yourself, What would I do if I were Dieter Rams or Jonathan Ive or — since you’re a Web designer — Douglas Bowman?

Asking this kind of question briefly expands our skills of judgment and makes us ultra-alert. Doing it regularly can drastically heighten our perception, values and actions as designers. Is this enough? No, but it is the beginning of a beautiful relationship with design.

And the Zippo lighter? It looks both friendly and solid, a comrade that needs your attention in order to keep working. Ιt has its own scent; it’s windproof; and above all, the sound when you flip open the lid is distinctive. And if you’ve owned a Zippo for a while, you must have noticed that it learns how you touch it when you light it.

All together, a Zippo is a product of craft — just as our designs for the Web should be. This is as simple and as hard as it sounds.

Focusing On The Scope

Once a Mini, always a Mini. (Image: Shelley Gibb)

Let’s go back to cars for a moment.

As noted earlier, the Corolla models of Toyota are nothing spectacular in their design. But what is a Toyota car known for? It’s a reliable, relatively cheap family car. Is Toyota successful? You bet!

What’s a Mini Cooper? It’s a beautiful small car that appeals mostly to young people. Is it successful? Of course, it is.

Cars are complicated machines. They do more than transport people. If a Toyota were as fancy as the Mini, then it wouldn’t be affordable. If a Mini were reimagined as a family car, then it would lose some of its charm. Oversimplification? Perhaps. But you get the point.

There’s a scope behind each product. As long as the scope is met, the product will be effective and remain on the market. The same happens in Web design.

Consider a metaphor. The closest physical product to a website is a periodical. Take Wired magazine (the physical magazine, that is, not the website or iPad app, which have slightly different characteristics). I’ve been reading it for more than 10 years, and if I had to describe it succinctly I would say “forward-thinking and cool.� Wired reinvents itself every once in a while and persistently fine-tunes the design, but the scope remains the same. Excellent design and illustration, superbly written long articles and a ton of clever short ones serve the main purpose: to introduce its audience to a new era. Audiences change over time, and new eras dawn, but Wired remains. Why? Because it has always respected a higher purpose. Sure, many magazines are well designed, and enough of them have great content. But you rarely find one with a unique identity, an identity that can’t be easily copied.

Your probably less complicated Web project needs to perform similarly. You must define the objectives. The design must promote them. Good content should prevail. You know the rules; make sure to follow them. Moreover, know where to stop. If it’s a new idea with vague potential or yet another feature or a last-minute change, just say no.

Websites are like breathing organisms. They evolve; new features are added and others are dropped, but they never stay still. Or at least they shouldn’t. Thus, while a promising fresh idea shouldn’t be discarded, it should be held until the next major update.

Big, ambitious, well-funded websites often seem to lose focus. Their owners try to satisfy all requests. This is a recipe for disaster, because it creates unnecessary friction between everyone working on the project. It dulls the impact of the best features and, above all, the scope. Tension fills the air. The worst days are ahead.

Such practices have led to the infamous concept of design by committee. Simply put, if everything is important, then nothing is important.

Iterations

Is what Apple does magic? I think not. (Image: Jon Rawlinson)

Let’s talk Apple. Apple’s iconic design and its founder’s exceptional way of thinking have been overanalyzed lately.

No matter how many words we write about Steve Jobs, we still seem to explain away his success as being a kind of magic. But that’s plainly wrong. People are inclined towards the least complicated, least demanding explanation to a conundrum. It is written in our genes. We think more deeply only when there’s a serious reason to do so. (But I digress.)

So, let’s do away with what Adrian Slywotzky refers to as the “Eureka� myth:

Apple would love us to believe it’s all “Eureka.â€� But Apple produces 10 pixel-perfect prototypes for each feature. They compete — and are winnowed down to three, then one, resulting in a highly evolved winner. Because Apple knows the more you compete inside, the less you’ll have to compete outside.

If Apple iterates so painstakingly, why shouldn’t we?

Inspiration for a great design roars when it comes. And implementing the idea brings a rush of enthusiasm. And our eyes sparkle when we anticipate outstanding success. And yet it rarely works that way.

Why? Because ideas and their execution are seldom free from flaws. You know the old cliché, “There is always room for improvement.� It still stands. There is always room for improvement, and accepting that your idea is the one that needs improvement takes courage. Demolishing your next great product in order to make it better takes nerve and self-discipline. But it also makes you wiser, and can dramatically improve the product.

Iterating extensively and in detail doesn’t depend on a certain type of project or a certain budget. It’s a tricky thing, because it forces us to confront our imperfect nature as human beings. To embrace our inner flaws is to walk the road of truth and maturity, silently, without making a show that we’re doing it.

This weight might feel a little heavy on our shoulders. If it does or if you dismiss Apple’s success, consider what Oliver Reichenstein, head of Information Architects, says about the iterations that his team makes in each development phase (this quote appears in the comments section):

It’s often almost impossible to explain easily why things look like they do, because we went through so many iterations, that it feels like explaining a chess game with all the ifs and whats.

The same goes when designing for the Web: there’s no excuse to avoid making as many iterations as we can.

Final Thoughts

When successful designers are asked where they seek inspiration, they often say something like, “Everywhere — I go for a walk and observe the world around me.â€� And it’s true. But what they don’t often say is that they also know what to observe and how to ignore the noise of the world.

There are many beautiful well-functioning products around us. Each has a story to tell, a story that is strongly attached to its design, its scope and the iterations that the designer took before releasing it to the world.

Take the Dyson vacuum cleaner. Its design is at least impressive, and its scope is clear (to suck dirt better than other cleaners and, thus, to make your environment healthier), and it took hundreds of prototypes for the designers to figure out how to make it work without a bag. The first Dyson vacuum cleaner was sold in 1970! To explore further and find similar products, just search for our three key words: “design scope iteration.�

Creating a lasting website is no easier than creating a lasting vacuum cleaner. But neither is it impossible. It requires a holistic approach, focus and maturity, just like the products we’ve looked at here. Not to mention, it requires a paradigm shift.

(al)

© Yiannis Konstantakopoulos for Smashing Magazine, 2012.

With the ever-changing landscape that is the internet, web designers and developers are constantly tasked with redesigning some part of the web. Whether it be for our own sites or for those of a client, redesigning is a big part of working in the field right now. For whatever reasons, be it the growth and popular new directions of the web, or even a desire to keep your brand fresh, the web these days seems to be in a constant state of redesign.

The world wide web is littered with sites undergoing reconstruction. Image by Joshua Rothhaas

So today we are going to take a look at some of the new rules that govern these project undertakings, in the wake of the new web that has taken shape over the last few years. As the various technologies steer and redirect the course of the industry’s future, we have to adapt the rules by which we play this game. So below are a few guidelines that will hopefully keep the redesign on track, and not end up with more costs than purely financial ones.

Let Necessity Be Your Guide…Still

For the most part, redesigning tends to stem from some sort of necessity; a need for an update. For example rebranding to keep your companies identity fresh and evolving, or because your business direction is changing and your brand needs to reflect that change. You may also feel the need to update because your current web design is not completely inline and up to date with your brand, or your site may not be up to date and fully functional.

There are many valid reasons that your design’s time may have come, and a redesign becomes necessary. But do not lose sight of what needs to be done as you begin looking at all that you want to have done. Necessity should still be guiding the refashioning of your website. Naturally there are going to be times when we decide to redesign, not out of necessity, but more out of desire to try something new and different. Which is completely reasonable.

Though, as many ascribe to the ‘if isn’t broke, don’t fix it’ mantra, we have to remember that action without purpose tends to feel hollow and unjust. If we do not have reasons for the redesign, beyond just a desire to see a new face on the site, then we have to ask ourselves is the move to redesign completely justified? And while many of us believe that we do not owe any explanations to anyone else for our decisions to update our site’s appearance, we must remember that our audience will have a reaction.

And while we may believe the changes are maybe too minute to really have much impact on our users, we have to keep the user’s exposure time in mind. Users interact with the site often much, much less than we do as the designers or webmasters, and as such, any change can register as a major slight on their radar when they return and things are different. Not like or where they expect them to be. So we need to bare this in mind when we redesign, and where possible, try and keep some level of familiarity. Even if it is just in small ways like placement of navigation, things like that.

And once again, while we may not feel we owe anyone an explanation for our choices, our users are more than likely going to want them anyway. So if we do not have necessity in our corners for the changes we made, then selling the redesign to our regular audience may be a bit of a difficult task. But when we have solid reasons behind the decisions that we made, and can share them with our users, not only does it re-enforce the redesign, but it can further strengthen your relationship with your users.

Accessibility Grows or Remains Unchanged

With the explosive growth of the mobile market, and the ever-growing number of internet browsing capable devices the web design and development community has their sites set on this new direction for the web. However, we cannot get so wrapped up in looking forward that we forget to be thinking back. If we push our sites forward, breaking into new territory that is all good, but we should not be leaving users unnecessarily behind.

As we seek to grow our reach, cutting access off tends to counteract our efforts.

You cannot suddenly exclude a portion of your users who have been able to access your site regularly; or rather you shouldn’t. Yes, IE6 is a bane and a pain, but is it really sound practice to close the door on any portion of our regular user base? Especially when we can at least still guarantee those users some level of access. So as we redesign, especially trying to reach new users, perhaps we should not be so quick to trade one group for another with regards to our site’s accessibility.

The Metrics Exception

Now that we have stated the accessibility rule, let us take a moment and look at the exception to it. There is one forgivable reason that we can redesign without regard to a section of our audience, effectively leaving them behind, and that is when the site metrics tell us that some cuts can be made without much cost. When we get reports telling us that a certain audience is already on the decline, or that certain areas of our site are not getting any sort of attention, then we can take a look at the scales and see which way they tip.

Naturally if it takes more effort on our part to keep that access going than the stats are telling us it is worth, then we can feel free to play into the exception and less into the rule. Though we may want to get more in depth reports than a look at basic site analytics before we go making these cuts or deeming them worthwhile.

Emulation Only Takes Testing So Far

As the web expands into new territories, the design and development community not only have to learn to design for these new devices and directions, but we have to realize that in order to fully test our website designs for say mobile devices we need to gain access to some of these devices. Often times this is the only way that we can get a completely accurate test of the full function of the site. There are many who rely on emulators to allow them to test on these various devices, but those results tend toward the aesthetics more than anything else.

And while making sure the design doesn’t break when it lands on one of these devices is important, it is only half the equation. Especially with the touch screen nature of many of the leading mobile browsing devices, emulators cannot give you the full simulation needed to see what all is going to be impacted and might need tweaking from these various environments. This can be tricky, as budgetary constraints can often impede on our ability to access each device we wish to test on.

This is an area where the helpful nature of the design and development community can come in handy. We can often turn to our colleagues via the the various social media networks we tend to inhabit for assistance in testing on these devices we lack access to. So if emulators are all you have at your disposal, remember that the community is there and often willing to lend a hand as well.

Address Possible Content Cuts

With the number of websites dedicated to creating new content, redesigns open the door to an evaluation of that content; in particular how much of it needs to transfer over and survive the make-over. Content can sometimes have a shelf life. A fact that is often not given much thought until these plans for redesigning begin to rear their heads. So when this process gets started we need to consider that some possible cuts in the content may be in order.

It is never a pleasant subject to discuss, but some content needs to be axed! Image by Martin Cathrae.

If you are working for a client, this is not always an element that we have control over, but that does not mean it is not a topic we should broach with our clients. Naturally we want the design to be as successful as possible, and as such we want to give it as many chances to do so as we can. So addressing this with the clients and letting them know that this is a consideration they should make is not completely out of line.

And given the fact that we generally are having to control how that content is presented and accessed, bringing this up with clients is relevant to our work. If we see a problem that needs to be addressed, why ignore it?

Function Wins More Fans Than Form

Bottom line, the look of your redesign, no matter how well crafted and thought out is not going to land with every one of your users. There really is no way around that. So instead of putting so much effort into finding a way to please every one through the new appearance of the site, be sure to focus that energy into finding ways to please them all with the new functionality of the site. As long as the functionality is tight and flowing well, users will forgive the form that they are not a fan of.

However, the reverse of that statement is hardly true. Even if you have the most original design the web has ever seen, if it is functionally glitchy users will be turned off, and often will not return. We have to realize that the look may draw some users in sure, and as such, it is not like it should go unconsidered. But allowing the look to be the top priority in your redesign efforts does not always lead to successful launches.

If all of the new tricks your redesign has to offer are completely visual, then the shine is sure to wear off much quicker. Not to mention, if the new look is not appealing to some of your existing users, and you have no new functionality to accompany it to help win them over, then your redesign can fall far short of its potential. So keep the functionality aspect in mind when you begin planning the update. Have some tricks up your sleeve beyond the aesthetic to deliver to your users. In the end, it’s better to be safe than sorry.

In Conclusion

Like virtually every aspect of design and development work, redesigning has rules that should be kept in mind as we set out on this type of project. This is not to say that success cannot be found without them used to guide you, just that they can offer us assistance and perspective when we may need it. What redesign rules do you tend to design and develop by? Are there any you would add to this list or amend from the list? Feel free to fill us in using the comment section below.

(rb)