 |
The people at UK web hosting company Heart Internet wanted to find out what web designers think of their jobs, their perspectives and the industry as a whole. As 5oo designers had their say, the results may well be seen as at least not totally out of range. Still they are not representative for the industry as a whole. With that in mind, let’s take a look at the key findings…
|
A web designer's tasks are far from getting easier. More and more different resolutions come to market and have to be addressed in professional layouts. The formerly rather simple distinction between a site for mobile and another for desktop users is not sufficient anymore. With the success of smartphones of the most different sizes the problem grows bigger by the hour. Of course we have media queries to address different resolutions properly. And even though they do work in the majority of cases you still have to test them properly. |
|
Everyone loves a happy ending: the hero slays the dragon, true love conquers all, the Death Star is destroyed, the new website is launched and both client and users alike are thrilled. While this last example may not have the Hollywood ending that the first few examples do, for those of us in the Web design industry, it is the story ending we want for all our project.
Much attention is given to how you kickoff projects, or how best to design and develop websites. But the final stages of the Web design process are never discussed as much as those early and middle stages are. How you wrap up a project, as well as what you do after the project is completed, is critical when it comes to building long-term relationships that will lead to future business.
In this article we will look at some ways in which you can end projects on the right note, and also what you can do after they are launched to help your project stories have happy endings (and many successful sequels).
We want a fairy tale ending for all our project stories – (Image: ZeRo’SKiLL).
Before you can create a happy ending to your project’s story, you need to make sure you do not create an unhappy ending. Oftentimes, when a project goes bad, it happens in the final stages of the process. There are a variety of reasons why this happens, but a few easy ways to avoid some of these common pitfalls.
Address issues as they happen — When a problem arises, discuss it with your client immediately. We often avoid issues (such as a bit of scope creep, or something taking a little longer than expected) hoping that we can “make it up at the end.â€� We do this so we can avoid having an uncomfortable discussion with our clients about change orders and increased budgets.
This is a nice sentiment, but it usually does not work out. Budgets don’t magically grow at the end of a project to compensate for overages earlier in the process. If you wait until the final stage of an engagement to address a problem, your client will feel blindsided by the news coming at that late hour, instead of being able to handle the issue when it occurred. One way or another, you will need to discuss the situation with your client, but if you do it later rather than sooner, you risk leaving them with a negative final memory of an otherwise successful project.
Planning a website’s launch — The date of a website’s launch is usually planned very early in the process. Other times, that launch date is more flexible and is determined as the project nears completion. In either scenario, preparing for the launch of a new website is extremely important.
Regardless of testing done prior to a launch, last minute issues discovered after a website “goes live� are certainly not uncommon. Preparing for the launch means that you take a look at website analytics to determine the best time (based on website traffic) to make the changes needed. You want to find a time that will have as little impact on business as possible as these changes are made. You also want to ensure your team is available and ready to resolve any issues that may arise. Whether the date of the launch was determined well in advance or more recently, as you firm up those launch plans, you want to make sure you have the appropriate personnel on hand for that launch.
By preparing to quickly address unexpected issues, you minimize chances that a small problem will turn into a large one, resulting in downtime, frustration, and that aforementioned negative final memory.
Planning for a website’s launch ensures your team is on hand to handle any issues. (Image: Pedro Vezini).
Dealing with the money situation — Very few of us enjoy talking about money and payments with clients. It is an often uncomfortable (yet necessary) part of our jobs. Whether your contract calls for your project to be paid in full prior to the launch of the new website, or if you make other arrangements with your client, problems with payments are one of the quickest ways to turn a good relationship into a strained one. There is no secret formula for handling issues with payments, just some common sense rules you can follow to minimize any damage that outstanding money concerns may affect your client relationship.
This includes discussing the payment terms and your expectations at the very start of the process, getting everyone in agreement on. It also includes giving clients ample time to pay any invoices and being respectful (and as accommodating as possible), when something does not go according to plan. Financial issues can cause a strain on any relationship, client or otherwise. How you handle those strains can either damage (or strengthen) that relationship.
First impressions are important, but lasting impressions are just as crucial. Just as a few mistakes at the end of the process can cast a pall over an otherwise successful project, a really great and memorable end to a project can turn an engagement that was unremarkable into one that clients will enthusiastically share with others. Here are a few simple ways you can leave your clients with a very positive, final memory of their experience:
Send a token of your appreciation — It seems so basic (and it really is), but it amazes me how rarely we take the time to show our appreciation after a project is completed. This isn’t unique to Web design. When was the last time a company you hired to provide a service went out of their way to thank you after the work was completed and paid for? It doesn’t happen very often — which is why it will have an impact if you do it.
Your “thank youâ€� doesn’t need to be extravagant to be effective. Some companies you work with may even have a policy against “gifts.â€� One of my favorite ways to show appreciation at the end of a project is quite inexpensive and very simple — sending a handwritten note, with a personal message, for the client. I also like to have others in our organization (including people who didn’t work on the project, or have any interaction with the client at all) sign the card. This shows how important their business is to the company — the entire company, not just the few of us that they’ve worked with so far.
The main thing here is to show the client that, even after their project was completed, you were thinking of them. The handwritten nature of the note shows that they were important enough for you to take the time to recognize them in a personal way (instead of just sending a standard “thank you for your business� card or email). Simple, yet effective.
Celebrate the launch — A celebratory event of some kind is a great way to cap off a project. Again, this does not need to be elaborate. The “partyâ€� could simply be a breakfast or lunch for the client and their employees to introduce them to the new website. Doing this not only shows your appreciation, it also gives you some time with a larger segment of the organization. It allows members of the company who may not have worked directly with you on the project a chance to connect with you and ask any questions they may have about the new website. In some cases, a project may actually warrant a bigger party.
If the new website is part of a larger initiative (such as the launch of a new company, or a big change in that organization), then they may already be planning an “open houseâ€� type event. Ask your client about their plans, and if they are intending to throw a party, request to be involved. Being involved in this party is great for you, giving you exposure to all the attendees in a very positive way — but it is not only a self-serving request. I have found that clients love it when you ask to be involved. They truly appreciate the fact that you care enough to want to be a part of their event and they like the idea that someone who can speak for the technical side of the project may be included in the festivities. It’s really a win-win situation.
Celebrate the launch of a new website and end the project in a memorable way. (Image: SimonWhitaker).
Share with others — Clients are often very proud of their new website and are eager to show it to others. As such, they will be very appreciative when you help them spread the word of that new website.
As long as your contract allows you to do so, you can help raise awareness of the new website by blogging about the project or sharing lessons you have learned during its creation in articles that you author. You can also share it with the Web design community through websites like dribbble or others social networks you use to communicate with your peers or your friends. You should also be on the lookout for the occasions when others talk about or share the new website. If the website is recognized in one of the many online Web design galleries out there, be sure to point this out to your client.
Seeing this type of recognition from outside sources is a great way to remind them of the successful process and positive results of your project with them.
Refer some business — Another simple way to do something positive for your client after a project is completed is to refer them some business. One of my favorite things to do is to identify two clients of mine who may be able to help out each other with the services that they offer, and to make a connection between the two. Schedule a casual lunch to introduce the two companies and you will not only be able to make business referrals for each of them, but you will also get some time with both of those clients under very positive circumstances. This process of referring business and connecting with clients after the project is completed is a perfect segue into this article’s next section — how to build long-term relationships with your clients.
The best source of new business for your company comes from your existing clients. It is much easier to work with organizations that already know and trust you than it is to sell your services to companies you have never engaged with before. As such, a process to connect with your existing clients on a regular basis can be very important to your long-term success.
As a project is wrapping up, one of the final things you should do is schedule a follow-up meeting — or better yet, a series of follow up meetings (to review the website post-launch). Regularly scheduled meetings between you and your client allow you to discuss not only how the website is performing and what feedback they have received from their audience, but also what changes may be happening with their company (or what changes you are seeing in the industry that they may need to be aware of). It is a rare instance that I sit down with a client to discuss their business where some kind of work doesn’t come out of it. This is the value of long-term relationships and being a trusted partner to their business. When you help them identify business needs, and can help offer solutions for them, you are more able to develop new business for yourself.
So I don’t give the wrong impression here, let me be clear — even though there is a sales element to these meetings, these are not sales calls. I have long trumpeted the value of creating real relationships with your clients, and these follow-up meetings are part of that process. This is less about selling them something and more about having a conversation to determine what they may need, and how you can continue to help their business succeed.
Another great way to get new business is through word of mouth, and the words that come from the mouths of your clients carry lots of weight.
Clients talk to others about their website and the company that helped them build it, so striving to forge a good relationship with them will result in more leads for you.
Clients talk to others about you and the work you have done with them. (Image: lawgeek).
You can also encourage your clients to talk about the work you did for them by asking them for a testimonial as soon as the project is done. Even if you don’t use testimonials on your own website, asking your client to provide one (or asking them to act as a reference, or provide a recommendation on LinkedIn) allows them to verbalize their experience with you and your company while it’s still fresh in their mind. The process of writing it down will also help them commit it to memory. Later, when someone asks them who did their website and how their experience was, the positive comments they wrote will come to mind and you will get a quality referral.
Your clients’ websites can also help spread the word of your services if you add a link to your website at the bottom of theirs. This practice of “signing� the website is a bit controversial. I have heard passionate debates from both sides of the argument as to whether or not it is appropriate to add a “designed by� link to a website, one that you were paid good money to create. In fact, for many years I felt it was wrong to do so. What changed my mind was two things:
Needless to say, my mind has been completely changed on this practice of adding our link to clients’ websites and hearing “I saw your link on a website and I really liked your workâ€� from a qualified lead is a great start to a conversation with a prospective new client.
As you read through this article, you most likely said “I do that alreadyâ€� for some (or maybe even all) of the examples presented here — but how often do you do them? It’s one thing to say that you show your appreciation to clients or schedule regular follow-up meetings, but do you do it for all projects, every single time? Not likely.
It is very easy to put off sending a thank you note until later, only to have it be forgotten in the mix of other responsibilities that you have. It is easy for a meeting to be cancelled and never revisited, causing your schedule of regular conversations with your client to fall apart. The ideas presented in this article are not ground-breaking — they are all things you can easily add to your projects, but they are also things that are easy to dismiss or set slide.
The key to realizing consistent returns from these practices is to apply them consistently to your work. If you make them a part of your regular workflow and essential to your process, then the positive results you enjoy from them will also be consistent.
Happily ever after starts by ending projects well and building client relationships. (Image: Steve Snodgrass).
By ending projects well, and establishing quality relationships with your clients, you will be one step closer to ending all of your project stories with “happily ever after.�
(jc)
© Jeremy Girard for Smashing Magazine, 2012.
|
|
The Web is technical by nature. Different scripts and pieces of code are linked together through hyperlinks, forming an endless net of interwoven, encrypted information — data that is accessible only through technical interfaces, such as Web browsers, or applications. Yet, Web professionals have made it their calling to tame the “wildâ€� Web and turn it into an accessible, user-friendly and, most of all, personal medium.
Personality will set your brand apart from competitors and help you connect with a passionate audience.
Designers can do plenty of things to counteract the technical appearance of the Web. One very effective way is simply to make it look less technical, by using a more human, personal style.
In this article, we will discuss different aspects of freehand drawing and writing in Web design and how they can enhance the user experience of your website.
Freehand drawings and other sketched elements are a great way to show personality and convey a feeling of authenticity. Imagine getting a letter or greeting card from someone you cherish. Do you expect the text to be typed or handwritten? A handwritten note is way more personal than a computer-written one, right? On the Web, it’s similar. It might be a different medium, but content that obviously comes directly from a human is more authentic and more trustworthy. Let’s look at three examples of how freehand drawings can help you create an identity and stay authentic.
First of all, hand-drawn content has a unique look and feel. Compare it to handwriting. Creating a personality and unique appearance for your brand or product is important.
The look and feel of Balsamiq is authentic and distinctive.
Balsamiq does a great job here. It offers a mockup and wireframing tool. While its features are quite advanced, its look and feel is basic, recalling pen and paper sketches from way back. The low fidelity helps us focus on the essential functionality while also making the product authentic and distinctive.
Freehand drawings have character. Through the touch of human imperfection, they gain a certain tension that is hard to recreate digitally. This special touch draws attention and allows people to pause to appreciate and process the hand-drawn content, more so than they might appreciate any old perfectly illustrated image.
Notepad++’s logo is distinctive and easy to remember.
The source-code editor Notepad++ has a distinctive hand-drawn logo. The little chameleon not only reflects the functionality of the program (the transformation of code), but is also cute and draws attention. The sketched style reflects the creative nature of what you can do with Notepad++ and makes sure you don’t confuse it with other editing tools.
Obviously, freehand drawings carry personality. They are authentic and help users to connect with your website or app. Hand-drawn content confirms that real people are behind the content, people who have put thought and effort into the design to make it usable and trustworthy.
Mathboard looks personal and easy to use.
MathBoard is an iPad app that help kids practice their arithmetic skills. The app has a classic chalkboard look, freshening up the dry and precise character of arithmetic. The whole app is set up in quiz form, and kids can actually write on the board to do rough work if needed. The personal appearance of the app makes it easy and attractive to use.
The way you present information on your website determines whether people will see it and, even still, understand it. Draw attention to your content at the right time in the user’s visit to your website. The content should look attractive and promising enough to involve the visitor. Information must be clear, relevant and actionable in order to be effective. Below are three examples of ways in which freehand styles can make the presentation of your content more effective.
You can use freehand drawings to explain your product, such as its features. Creatives often use simple sketches to explain a concept or present an idea that might otherwise take ages to put into words. With your website, you encounter a similar situation. You’ll have a product, concept or idea that you want to get across to visitors. By using hand-drawn icons or simple sketches, you create an intimate atmosphere, as if you were speaking to your visitors directly.
Stickies conjures the idea of presentations. (Image: TestFlight)
Online service TestFlight makes use of just this effect. In addition to the many other hand-drawn elements on its website, the company points out its main features with simple sketched sticky notes, accompanied only by a few brief lines of text. This conjures the idea of presentations, drawing attention to the features one by one to make them more clear.
Freehand style is also a great way to familiarize visitors with your workflows. No one expects you to come up with the perfect solution out of thin air. The fact that you admit that a process is involved and that this process can be rough and bumpy only makes you human and likeable. It demonstrates that you try out different directions before deciding on the right track.
This hand-drawn workflow conveys creativity and a thorough working process. (Image: Alex Faure)
Designer and front-end developer Alex Faure demonstrates well how a hand-drawn visualization of a workflow can educate visitors and build trust. He seems to not only know what he is doing, but also thinks things through and involves his clients in the process.
Whether you are designing a website or an app, keeping your users in mind and guiding them towards the various goals they might have is always important. Hand-drawn icons can be a good way to do so. It’s no secret that icons are helpful when navigating a website or app. Why would hand-drawn icons be any different? While perfectly illustrated icons might be more detailed and clearer, they are computer-made and can easily look sterile and technical. Hand-drawn icons are personal, and we are more inclined to accept guidance from another human than from a machine.
We are more inclined to accept guidance from humans. (Image: Spamped)
The iPhone app Spamped uses very nice, meaningful icons to guide users. The app enables you to stamp and share your favorite things, such as places, books and movies. The hand-drawn style perfectly matches the personal nature of the app, encouraging users to keep stamping.
The importance of team pages increases continually. While we used to accept a certain level of anonymity on the Web, we are now eager to know who is behind a website, service or product. Also, having the hypothetical option to contact someone is not enough; we want to know exactly who we would be contacting. The more personal your team presentation, the more likely your visitors will trust you. Here are some suggestions on how to enhance your team presentation with hand-drawn elements.
Being perceived as likeable is important. Even if you offer a ton of information on yourself, if people think you are arrogant or too extravagant, it will do no good. We are much more willing to trust someone we like than someone whose character we cannot asses. Hand-drawn elements can make you more likeable by making you look creative, spontaneous and easy-going.
We are more willing to trust people we like. (Image: Knock Knock Factory)
The Knock Knock Factory welcomes its visitors with a personal and likeable presentation of its team. The pictograms sketched on the chalkboard in the background say a lot about Keith, the “fearless leader.� The company obviously considers it important to give visitors a clear picture of who they are about to deal with. It’s catchy and gives visitors a positive feeling, before they have even looked around the rest of the website. It creates an immediate personal connection and makes the visitor feel welcome to the website.
Besides likability, trustworthiness is also important. At the end of the day, anyone can hide behind a website, pretending to be someone they are not. Showing authenticity is a great way to make sure visitors take you for who you are. Only if people trust you will they open up to what you have to say or engage in your desired actions, such as buying the product. Hand-drawn elements are usually not the easiest content to produce for a design; they require skills such as creativity and passion — skills we associate with honest and trustworthy people.
We feel more comfortable around people we trust. (Image: Polecat)
The software agency Polecat has found a trustworthy way to introduce itself. Instead of realistic photographs, it has put thought and passion in its team presentation, using abstract yet creative illustrations. The illustrations have a rough and sketchy look to them, making them even more human. And only first names are disclosed, giving an easy-going, familiar feeling.
An important aspect of trustworthiness is authenticity. Your visitors must not doubt that you really exist and that you exist in the way that you present yourself on your website. The Web can be a scary place, especially considering that users will probably never meet the people behind websites in person. Anyone can use a Web font, but handwriting and hand-drawn elements reveal something about your person, making you look more real.
The authenticity of a team is important. (Image: Grove)
The people at Grove found the perfect balance between creative, carefree and authentic for their team presentation. Snapshots of all team members are neatly arranged as Polaroids, with the names looking handwritten. It looks as if someone walked through their work space, taking Polaroids of everyone, including the team’s dog. Does it get more real than that?
Freehand drawings are a great way to tell stories. Storytelling is extremely personal, an ancient means of communication, mediated at most (back then) by a cave wall. This basic method of exchanging information transcends all technical advances and gives us a comforting, human feeling. Sketches help us ignore the impersonal nature of the Web and put a face to the humans behind it.
Entertainment entails emotional involvement — something that is much easier to achieve when humans are involved, rather than mindless machines. On the Web, hand drawings are a great way to establish a familiar and human experience, one that helps visitors to relax and enjoy themselves.
Drawings create a familiar and human experience. (Image: Axure)
The prototyping tool Axure welcomes visitors to its home page with an amusing yet informative story about UX Man, who is “accused of having superhuman powers.� The freehand style of the drawing is eye-catching. There is no reason to doubt that a lot of thought has gone into this fun and inviting landing page.
Hand-drawn stories grab our attention because we like to recognize human elements on the Web. Whereas a too-clean Photoshopped image might not gain our trust, hand drawings appeal directly to our emotions, making us more attentive and receptive to information.
Hand drawings appeal directly to our emotions. (Image: SignNow)
The app SignNow uses hand-drawn images to explain its main benefits right on the home page. The way it lines up the benefits, connected by the “flying� documents, creates a narrative. You can almost hear someone explaining the images as you read the descriptions below. The story draws visitors in, making it easy to follow.
Personalized elements such as freehand drawings also engage visitors. Along with user experience, “user engagement� has also become a hot topic. Once engaged, we are interested and willing to perceive and process the information given to us. So, a website that manages to engage us has already made a big step towards a positive user experience.
Travel app TouristEye engages effectively with a good story. The step-by-step introduction to its product is turned into a small adventure story, a treasure hunt waiting to be solved. Even without the text, the drawings are meaningful and reflect the free spirit of a trip.
Freehand elements, such as handwriting, are just not what we expect in a technical medium like the Web. They go against the straight lines and symmetry that we associate with the Web. Thus, a perfect opportunity to grab the visitor’s attention. Handwritten comments and instructions feel human and make us feel like we are being addressed directly.
You can use this personal method of communication for different things. First, you could easily invite visitors to perform certain actions, such as liking you on various social media platforms or sharing your content. We are more likely to respond to messages that appear to concern only us, not the general public. Even though the message is on your website for everyone to see, you can create a feeling of connectedness by addressing visitors directly.
We respond more likely to personal messages. (Image: Weezbe)
Weezbe use a handwritten message on its landing page, together with a happy smiley and an arrow that guides the visitor’s eye to the green button. The header is simple yet effective, drawing attention to the call-to-action button without being intrusive or annoying.
You can also use hand-drawn elements to make visitors curious and, in doing so, to guide their line of vision and trigger certain actions. For example, arrows are a great way to guide the attention of visitors.
Hand-drawn elements can make visitors curious. (Image: Radley Yeldar)
The creative agency Radley Yeldar shows a minimalist drawing of a hand that appears to be tapping on the screen, along with the line “This is not just a footer.� The visitor is motivated to mimic the gesture of the hand and click on the screen, if only to find out what happens. This is a great subtle way to bring the footer to the visitor’s attention.
Last but not least, hand-drawn elements can be handy for pointing out details. Again, it’s all about grabbing the visitor’s attention and drawing it to the relevant area. Just as you use arrows and other marks to highlight content in a book or other offline medium, these elements work great on your Website. After all, highlighted elements bear a certain importance that makes them worth checking out.
Highlighted elements are expected to be important. (Image: Orbit)
Orbit uses hand-drawn arrows to point out adjustable elements of its image slider plugin. The hand-drawn quality of the arrows draws attention to the defined areas of the slider, and it also stands out, obviously not being part of the slider itself.
Sometimes, freehand drawing doesn’t suit the nature of a website. Make sure not to overdo it and that visitors would truly appreciate a more personal design. Don’t hesitate to ask visitors if you are not sure how far to go; for example, by conducting a live survey on your website.
While certainly many examples are out there of how not to use hand-drawings on a website, let’s look at only one. The aim of this article is to point out positive examples and offer ideas on how a freehand style can improve the user experience, but it is also important to be aware that it’s not always effective and that you should use hand-drawn elements within reason.
The overdone hand drawings make the buttons look obtrusive and pushy. (Image: Joshua Keenes)
For example, designer Joshua Keenes uses hand-drawings to draw attention to his social media buttons. While the concept might work, the fact that he overdoes it has two side effects. First, so much is going on that your attention gets lost before even getting to the actual target, making you lose focus before taking any action. Secondly, the invitation to hit one of the buttons becomes quite obtrusive and pushy, likely scaring people away, rather than welcoming them to the social community.
Having a personal experience on the Web is becoming increasingly important. We no longer want to visit cold, formal and anonymous websites. Rather, we want to feel comfortable surfing the Web and to meet the people behind a website, and we need to trust them before we are willing to interact with their website.
Freehand drawings have a human quality, the perfect bridge over the gap between the technical, impersonal Web and the accessible, user-friendly and personal experience that we expect today.
(al)
© Sabina Idler for Smashing Magazine, 2012.
|
|
This week we have a beautiful icon freebie for you. BanzaiTokyo designed this art related icon set. Their collection of 34 icons are an homage to the creative professions. The icons are available as PNG files and released under a Creative Commons Attribution License.
The Art Professions Icons set would not be out of place in an artist’s portfolio website, be they cook or painter — or even multi-talented. Imagine these icons guiding a modern art gallery’s visitor through the institution’s online presence and you won’t feel let down. Any site remotely representing artistic efforts, finally, has a homogenous set at its disposal. Furthermore, the geniuses at BanzaiTokio did Smashing Magazine the honor of designing an icon just for us, which you will also find below.
The icons are licensed under the Creative Commons Attribution 3.0 License. You are free to distribute, transform, fiddle with and build them into your work, even commercially. Please always credit the original designer of the set. The icons may not be resold, sub-licensed, rented, transferred or otherwise made available for use.
You can use this icon set freely for commercial and personal projects. Please link to this release post if you want to spread the word.
The set contains 34 icons for various occasions. The Icons are available in eight sizes — 32×32 px, 48×48 px, 64×64 px , 72×72 px, 96×96 px, 128×128 px, 256×256 px, 512×512 px. The icons included are:
As always, here are some insights from the designers:
“We see a lot of icons created for business and general public – social networking and ecommerce, what bothered us is that fellow creatives – writers, painters, sculptors and many others were overlooked and we made it our goal to create icons for every creative activity there is.Now artists can use these icons to showcase different sections of their portfolio websites and blog writers can have a complete coverage of all creative activities.”
— BanzaiTokio
Thanks, BanzaiTokio, for being creative for the creative community!
© Smashing Editorial for Smashing Magazine, 2012.
