BlogmyQuery – BMQ

Like with most creative fields, there are those who operate outside them who do not necessarily understand all of the time and energy that goes into the design process, and as a result, they tend to undervalue our contributions and imaginative creations. The design community is not at all immune to this treatment as we regularly come across a client or potential client who views our work through this sort of devaluing lens.

Without a comprehensive breakdown of our process, clients lack the insight into the project that allows them to see the amount of work that we, as designers, put into it. That is where this post comes in. For anyone who has ever turned to a designer and asked if they could simply throw something together for you or your company, we have an in-depth look at the steps involved in creative process that we call design.

Hopefully this post can not only help potential clients better understand where we are coming from, but it can also act as a beacon and reminder for those who are new to the field and could use a little more of a glance behind the proverbial curtain to feel more comfortable and secure in their own process. We want to let the clients know that we are doing much more than just doodling in Photoshop when they hire us!

So below is the process laid out for everyone to see. Perhaps this post will help us to rise above the stigma placed upon the field by those who have not fully understood the lengths that we as designers have to go to in order to create our work, and thereby will alleviate the stress and headaches that tend to be attached to working for someone who undervalues our work in this way.

Perhaps this post can also explain why our prices tend to be higher than many people expect when they contact us for a quote. Not to mention it can shed a little bit of light on the reason why it takes us time to work out. Help the clients see why we cannot just hand them the design in the span of a day or two.

Research

Naturally, the first place that you want to turn is to the information gathering portion of the process so that we can get an idea of who the client is and exactly what we are up against in terms of putting together a design that will not only achieve their goals, but that will hopefully reach out to their audience and have lasting appeal. The best way to ensure this longevity and connectability is being pulled together into the design, is to put the time in and get the information you need to craft a unique and appropriate piece.

Begin With a Brief

There are some of us in the field who do not always rely on a full design brief in order to get us going, but it really does allow for the client to offer you their complete insight into their company. How they see themselves and their mission is an invaluable peek into who you are working for. It allows you to see things through their eyes, and in doing so, arms us better with the knowledge we need to proceed and refine those things we have learned into the design. So having the client fill out a design brief can give you a big step forward in the beginning as you try and sort out who you are working for and exactly what they need.

Check Out the Competition

Another area of research that tends to prove useful to our process is to check out the client’s competition within their field. This allows you to see how others in the field have made their mark, which can prove extremely useful as you begin hammering out an approach for your client. Not only can you see what has worked for their competitors which can help with other areas of the process, but it also lets you see what to avoid so that you do not end up copying another’s approach. Not only that, but if you have not been able to get much a feel for the industry the client works in, looking into their competition can often assist you there too.

Get to know the people you’re working with. Image Credit

Who Is Your Audience

In the last section we mentioned seeing how some of their competitors have connected with the intended audience of your client can be useful, and this is the main way that can help. It can offer us a sense of who the audience is, and to see how they have responded to certain elements and approaches from others in the field. This can give us a leg up as a start into our process, seeing as we have seen the audience in action so to speak. We need to know who that audience is that the client wants to appeal to, because as we know, that determines a large portion of how we decide to approach them through our design.

Brainstorming

The next section that we move into after we have spent enough time gathering the information that will help point us in the right design direction, is the brainstorming part of our creative process. The brainstorming is a crucial and fluid part of the process wherein we just set our minds on the path towards our end goals and see the numerous ways in which we come up with to tackle the issue. Like a radio set to scan, we allow our minds to freely flow through our imaginations, throwing back ideas like station signals being grabbed and sampled before our minds push on for more.

Filling the Pool

The first step to brainstorming is all about the generating of ideas, not worrying about the full follow through that is required to implement each one, you are just letting them come at this point. Filling the page with various elements and approaches that you see fitting into the project, as they come to you. This is not the time to pick them apart or even determine if they can fully satisfy all your client’s needs. This step is just about the frenzy of techniques and takes that come to mind when you think about the best solution for the client. No matter how far from left field the ideas tend to come, give each one their chance to be considered, and write them down.

Sorting Through the Mess

Now that we have taken the time to come up with a list of various solutions, we have to take the time to actively pour through them, picking out the workable ideas and tossing the rest. Some designers choose to sort their ideas into more than just yes and no piles, but instead taking all of the ideas that compliment others and lumping them together into a possible solution. Sometimes this step in the process can be somewhat cumbersome as we begin compiling multiple solutions and approaches together for alternate design routes that we can take the project down. This can stil leave us with a rather large pool of solutions to whiddle down, but that is where the next step comes into play.

Distilling the Idea

Once we have sorted through the aftermath of the storm, we then begin refining the concept to help find the approaches that we think will work the best for the client. Now I say approaches, because as we begin to distill these ideas down, many designers will move forward with a couple of concepts at this point for the client to choose from. So for the most part, early on, we are refining more than one design for the client. It is not like we have taken all of our ideas, and are just tinkering with one, and given the amount of work that goes into these initial steps in the process and the number of considerations to be made and weighed, this necessary divide and conquer take is timely and thereby costly.

Sketching

Once we have the ideas that we want to move forward with, we step into the next area of the creative process, the sketching. Once again, this is an in-depth and time consuming step that the clients rarely see. So like with a few of our other steps, they do not take this part of the process into consideration when they are formulating their expectations and timelines. So here we take a look at the various levels of this step in the project to further highlight the full scope of our design process.

First Drafts

Now not all designers will do their sketches by hand, but some of us do. This adds another step to the sketching process wherein we have to transfer that which we have drawn by hand into a digital format that we then show to others. Many of our first draft sketches would not even qualify so much as first drafts as much as they would just drafts. We take passes at the idea, often multiple ones, before we digitally render a draft that can be shown to anyone. Some probably assume that we simply open up Photoshop and begin going to town, but they do not see the planning and constant navigating that actually takes us into town. These sketches and drafts are the stepping stones of progress that often are taken for granted by those not in the field.

First Draft Feedback

Once we have our first drafts to our liking, then we turn to both the community and the client for feedback on the directions that we have come up with to this point. This step is vital in the process because it effectively narrows down our final approach to the project. Once we have shown the ideas to the clients, they then decide where they want the project to go. They take in what we have shown them and they determine which route that we have devised best suites what they were looking for. And because the client is not always in the know about the specifics of the design field, getting feedback from other members of the community is also an effective tool to help us move forward and refine the ideas we have.

Back to the Drawing Board

After we have absorbed and digested all of the feedback that we receive, we then take everything back to the proverbial drawing board, and at times, a literal one in order to further refine the idea and actually move the project into the last stage of the creative process. That is why we may also want to get feedback from others in the field, because they can often provide us with more valuable feedback than the client can. The client tells us what they like and what they want, which allows us to go back to the drawing board ready to push on. However, other designers can give us more insights as to how to achieve certain effects and sharpen elements we wish to use which give us more than drawing board direction, it give us ammo.

Designing

Then we have the final step in the creative process, the actual designing of the piece. Following nearly the same pattern as the sketching only with more depth and detail, this step takes the refined idea that the client chose in the draft stage and actually designs it completely. Through hours and days of dedicated effort, we transform our drafts and sketches into the completed design that we have been working towards all along. And even with their consultation throughout the process, the clients often operate under the assumption, that this final step is the only one that we have, when in fact, there was quite a bit of work that has gone into just getting us here.

Taking Your First Pass

The first part of the design step is much like the first draft portion of the sketching section of the process, only you have a much more solid grasp on just where the design should be ending up. So we begin taking our first pass at the design, really focusing at transforming the drafts into fully functional, communicative projects that the client would be proud to call their own. And though the client may have gone in directions that we personally would not have, we still give the project our best, because we know that the project will always reflect on us, the designer. So we always put our best foot forward for each client and project, even with the first passes that we make, knowing they are bound for revisions.

Quick Insider’s Tip: Be Sure to Always Save Your Work with Layers!

Seeking Feedback

Then once we have finished the first pass on the design, we will turn to the community and client for more feedback on the progression of the piece. Some designers may skip this step thinking that they do not want to slow themselves down too much by seeking other opinions beyond the client at this point. But just like was pointed out before, others in the field can provide much more critical feedback for your designs to sharpen them overall. This is a vital part of growing your skills and progressing your work, which always benefits the client in the end. Here is where you begin asking for feedback on specific elements or solutions as well, rather than on the overall presentation. So this step is just as necessary as the rest.

Quick Insider’s Tip: If Possible Return to Same Sources For Feedback that Were Helpful on the Initial Sketches!

Final Draft and Delivery

Once we have gotten the feedback in once again, we can begin to finalize the design and finish up the project, having all of the fine tuning that we need to do within our sights and ready to be conquered. These final tweaks and adjustments can be very time consuming and very demanding as we subtly weave our design tapestry harmoniously together from the various elements that we have used to construct it. We have already found out from the client at this point, what file types the final designs will need to be delivered in, so that we can ensure they will be able to access the work they have paid for, and so once we have completed the project that is all we have left to do. To deliver the files (Once we have received the final payment of course).

Image Credit

Implementation

Now the delivery is not always the final step for the designer to take, in fact, some deliveries are more project launches than they are a straight up handing over of files to the client, so that also has to be counted in the process. After all, when we are taking about all that goes into our pricing, the implementation of our designs is a crucial, and often times, the most stressful step in the entire project.

Coding

There are many people who never consider coding as part of a designer’s job, and some of those people are unfortunately designers. And while the project at hand may not require an extensive knowledge of coding to complete, most designers understand that some level of coding know-how is essential to being able to fully design a project for our clients. Even if we do not have to make the design work the way it is intended, for instance when we hand over a website design to the developers, we do have to be able to design something that can be implemented to the client’s specs and that usually requires knowing how it needs to be able to function to ensure compatibility. That required expertise is all part of the job, and that figures into our processes as well.

Usability Testing

If we are designing say a website or for an app over say a print project, then we also have to figure in time and the effort for all of the necessary usability testing that is going to be involved in the project. This could even require us to partner up with the developers to be on hand to help resolve any usability issues that are created by the design that we put together. These tests not only take time to setup and carry out, but they can also lead to problems being discovered in the work that may become timely roadblocks that we did not count on. But the importance of this step should not be underscored, for this vital element of the process can often prove to be another of the most challenging.

Feedback Sessions

Once again it is feedback time! Given the weight of the usablility testing, the following feedback sessions are also a crucial cog in our process to boot. Now before where we mentioned that you wanted to get feedback from some trusted sources that could be from within our own fields, this time we might want to widen our reach when looking for some critiques and insights on how things are working. Given that this project is more than likely going to be released unto the masses, we want to ensure that we have a sampling of users to provide us with as accurate of a reflection as possible as to how the public is going to receive it. These sessions are going to tend to be a little more time consuming and difficult to arrange and finish up than the other feedback bouts we have had to arrange.

Tweak and Launch (Hopefully in That Order)

Once we have finished compiling the feedback and processing everything that we have been given, the final tweaks that are necessary to get the design ready to launch need to be handled. This time can be stressful as our launch date more than likely looms, but not as stressful and time consuming as the launch time itself. That is when it comes down to the proverbial all hands on deck hours and the stress levels tend to go through the roof. This can also mean that our focus and time has to be strictly dedicated to this one client and this one project until that moment of truth has passed and the sighs of relief have all been breathed. This is a step in the process that also weighs heavily on the pricetag that tends to get attached to the project.

The End

In the end, the design process is a complicated and deeply consuming one that requires a lot of dedicated time and effort to complete in a professional and efficient manner. It is easy for someone looking in from the outside with little context to underestimate and undervalue exactly just how much goes into the process. They are not exposed to the complexities of each step, and the depths to which we designers have to delve to complete the project. Hopefully this post can help us to better explain to our clients and to those newbs who are teaching themselves the ins and outs of the field, just exactly what all we put into a design so that they can better understand our prices and deadlines.

Consider Some of our Previous Posts

• Web Design Questionnaires, Project Sheets and Work Sheets is a post from Smashing Magazine where we help get the process started with new clients by setting up comprehensive and professional forms.
• Quality-Price-Ratio in Web Design (Pricing Design Work) is a post that discusses the pricing of design work and the factors that effect it.

(ik)

Contact forms are the best way to attract visitors and to interact with them. A creatively designed and inspirational contact form is the most appropriate way to say welcome to your visitors and invite them to use your services. A comprehensive and stylish form persuades the visitors and helps build their confidence in the company behind the site.

We have gathered some interesting examples of contact forms for your inspiration. Please notice that some of them are nice, but hardly usable. The idea of this article was to present you some ideas, not necessarily the execution of the ideas.

Creative Contact Forms

Gpacheco’s contact form is both visually captivating and creatively styled to fit with the natural look and hand carved elements that accompany the rest of the site. Though it may not necessarily be clear to some users where the text box for the form is, given its lack of highlighted edges, it gives the user the width of the site to compose their thoughts freely into the sand. The padding around the borders of the name and email address boxes could stand to be a bit wider as it feels tight and some letters can extend over the border image creating a slightly, visually uncomfortable presentation.

Lion Ways uses a postcard design for their contact form which stylistically works really well on a site where each page is based around cards/books/etc. It is a very nice and subtle form that really blends well with the site overall. Clean and basic.

Beakable form is very creative and looks really nice, though there are some usability issues that could stand to be addressed. Adding boxes around the space for the name and email address would make those areas better stand out as editable. The submit button could use more attention drawn to it so that it is more easily recognizable that it is the submit button.

fCtm-Argentina has a wonderfully unique and creative design for their contact form, styling it as a boarding pass to fit with the tone of this travel based business site. The form works both in style and function, however, the comment box feels a bit tight with the settings as they are, and it could use a bit more padding around the edges.

Matt Dempsey’s site has a stylish contact form setup with brushstroke styled text boxes which all work well enough. However the right edges begin scrolling a little late for those with long names or email addresses, and readability becomes a slight issue. Again, this will more than likely not come into play that often, but it could.

Ctrl+N contact form perfectly matches the retro, side scrolling design of the site. The titles and boxes could use a bit more padding and the message box should change color like the others to denote that it is active.

Nineteeneightyfour is the web design portfolio of Martyn Palmer which has a stylish contact form that drops down into place on the page when you click on the contact button. Here the button is made up like a post it note to match the overall feel of the site. With various other contact information scattered about the area and scribbled on scraps of paper, the contact form itself could have been styled more to fit among the other hand drawn elements a little more.

Tony-Johnson has an interesting contact form set on his site as well. Styled as a portfolio case, the contact form is compactly placed in the borders of the case just fine. However, if the user has a comment or query to submit through the contact form that is of any substantial length, the text box does not scroll to allow them to see what they are typing below the cut. This almost discourages any lengthy or in-depth sort of contact in this case.

Try Triangle’s contact form is both creative and wonderfully implemented. The spacing and scrolling all fit well within the small spaces provided. Not feeling cramped at all, even in such close quarters, which is not always an easy task to pull of design wise. However they have done well integrating it into the site with imagination and style. Though one area where the size does feel a bit limiting is in the main text box on the contact form. It scrolls so that you can follow what you are saying, but only after a couple of lines so that you are not seeing much of your train of thought behind you as you type.

Bio-Bak has an extremely creative, if not somewhat cumbersome contact form. The mouse styling makes some of the site difficult to click on, and the interactive elements added to the contact form are only compounded by this design choice. And while the extra steps for entering your e-mail information are creative, they can ultimately serve as a detractor for some users who are not interested in playing along.

Artcore-Illustrations is another site where they opted for a simple form that does not go over the top with bells or whistles. It simply, and in subtle fashion with the rest of the site, accomplishes its purpose. The padding and spacing all fit comfortably into their boxes, while the transitions to indicate your selected box smoothly highlight the location of your cursor for the user.

Indofolio has done a wonderful job incorporating their style and site tone into the contact form that they use. While there is plenty of space in the boxes for entering your information, if the e-mail address or name are too long then the right side of the box will cut off the last letter you are typing so that you cannot see what is there. The padding on the left side of the main text box could also be slightly adjusted, if only for the first line of text which goes over farther than the preceding lines of text.

Lunalunerafestival is another site that creatively styled the contact form to be set up like a letter being written. The text boxes for the name and email address, though at an odd angle, remained completely readable and within the borders of the box. The large area that is available for the message box provides an inviting landscape for the users to share and discuss whatever they have to say. Comfortably padded and all around well done.

Yodaa has a stylish looking contact form which has uneven information boxes to help fit with the fun animated feel of the site. However, these edges of the boxes do not line up correctly with the text inside, so not only does some of the text distractingly break outside of the box interfering with readability, it feels like a major oversight on a site dedicated to usability in design.

Umquarto has a beautiful and simple contact form, from complete form presentation to the transitions highlighting cursor location easily and stylishly for the benefit of the user. Everything feels concrete and firmly in its place with even and visually pleasing padding and spacing throughout the form.

Xruiz has a nice hand drawn feel to the contact form elements that really help tie it into the rest of the design. However the padding at the top of each of the text boxes could stand to be adjusted. It is only somewhat noticeably off in the entry boxes for your name and email, as the info hovers closer to the top of the box than it does the bottom. But in the message box, it is majorly off, and the top line nearly rests on the top edge of the box.

Qwert City is another site that uses the look of a postcard for the design of their contact form, in a colorful, if not overly so way. For instance the light blue color of the text could stand to be bit softer to blend better with the other elements of the form. And while there is a fairly decent sized text box for whatever message you have to leave, should the message be too long, the box does not scroll to allow the user to see what they have written after a certain point.

Created 201 Studios has a creative and very unique contact form on their site, that completely flows with the style of the site and does not break from the angular presentation of the other pages. And once again, even with this angled effect, the data entered does not feel out of place or uncomfortably squeezed into the design. Overall, it is brilliantly crafted.

Brian Handley Design has a whimsically illustrated contact form set up to match the rest of the site perfectly. The implementation of the form is nearly flawless as well, however, it is a relatively small message box compared to most, and once again we find that the box does not scroll to keep up with the user at all, and can prevent some users from leaving their comments or contacting the Brian via the form.

Swiths contact form is another example where they opted for a simpler, understated approach. The padding is offset so that the text in the information boxes is not centered, but more rests towards the bottom of the boxes and this does not feel visually uncomfortable in any way. However the kerning on the font used can make the words feel a bit spread out and unevenly spaced. Though that is the only part of the form that feels off at all.

Marcol is another site that has stylistically pulled off their contact form, however, usability wise it could use a slight tweak or two on the padding for the left and right borders of the information boxes. Some of the text entered in these boxes has a tendency to bleed over the borders which is somewhat unpleasing to the eye. The main message box is fine with its padding, but the others, not so much.

Bert Timmermans contact form is sleek and professional, which compliments the tone and feel that the rest of the site imparts nicely. The padding and scrolling all appear to be in order as well, which is what you would expect given the rest of the site. Cleanly designed and implemented.

Christian Sparrow’s contact form is hardly the most creative element on the site, but it stylishly fits so well with the rest of this creative little gem that we had to showcase it here. All aspects of the contact form work brilliantly, and the floating clouds that pass by in no way interfere with the readability of the form. The only area that could even be suggested for improvement in our eyes would be that the text that acts as an indicator for what should go in the box gets automatically highlighted and erased when you navigate there and begin typing.

EletricPulp has a stylish contact form with a subtle textured background that accompanies it, nicely tying it into the rest of the site’s design. The text indicators seem a bit redundant given that they are not only listed boldly outside the text boxes, but they are also echoed right beneath these headers in the boxes themselves.

Ryan McMaster’s contact form is actually a little bit more in depth than most that we have featured. Here he has included areas for the user to include their reason for the message and even allows a space for an expected budget should this be used by a potential client. Once again the indicators stay in the box when you click there and have to be manually selected and deleted. Not a big deal, but a step that can slow some users down.

August Creative Agency has an extremely unobtrusive contact form on their site that is cleanly incorporated into the picturesque background of the site. Once again, a very basic presentation and contact form setup, but as usual, it works well with the overall site rather than clashing with it in any way.

We Love Icons has a gorgeously carved contact form for their site, covering the standard info that most ask for. The compact and cleanly presented form is as visually comfortable as it is sharply implemented, complimenting the rest of the design wonderfully.

Kev Adamson has a contact form on the site that feels squeezed in a bit among various other elements, however, enough care has been put into the form itself so that none of the other areas or elements attached to it feel that way. The fonts used are petite enough that they fit nicely among the grunge ridden form, which matches with the rest of the site well.

I love Colors has a well designed and stylish contact form to match the rest of their site. The simple highlights around the active text box, along with the evenly padded borders give the form a very sleek and comfortable appearance. With plenty of room and satisfactory scrolling, the form warmly invites feedback from the site’s users.

Ashes And Milk have a stylishly designed contact form, neatly tucked away in a box. The simple nature of the form works nicely with the rest of the site, however in the main text box when you enter enough text for it to scroll, the appearance of the scroll bar grabs traces of the text behind it and keeps it there the whole time you continue down the message box.

Fabric Adecaricaturas has a contact form that has as much personality in it as the rest of the site. The text boxes are subtly styled and comfortably padded, without any visual distractions or discomfort caused by them.

Giraffe has a colorful and welcoming contact form that fits with the atmosphere and ambiance that they have established through their restaurants and their accompanying website. The form, boxes, and the fonts are all bold and highly visible, unlike some of the smaller, subtler forms that we have seen.

Fundolospaltos has a stylish and understated design approach to their site’s contact form. Though nicely executed, the text boxes, especially the message box could use a little bit of extra padding around all of the edges. The text feels slightly squeezed in the way it is.

Harmony Republic has a simple contact form on their site which is styled with hand-drawn line elements for the text boxes which work nicely to accentuate the entry points. The spacing and padding are all set at comfortable levels, and do not include any breaks that detract from the simple beauty of the design.

Trendy Web Design’s contact form is another form where the style is subtle, but complimentary to the rest of the site so it works well. However the padding on the sides of the text boxes could use some minor adjustments as the text feels pressed against the edges as is. The message box also could stand some adjustments to the padding at the top and bottom as well allowing the text more room to breathe as it were.

Red Bull Soapbox Racer has a appropriately styled contact form to fit with the irreverent site it is attached to without compromising the functionality of the form in any way. The site takes over your sound upon entry and there is sound that accompanies certain elements of the form which seems slightly unnecessary. Though the form is obviously not the draw or focus of the site, it does not suffer or feel lacking in any way in such a unique and whimsical site.

Z-Index Media has a very unique and creatively styled contact form that is set up like a letter being placed into an envelope. The padding is hardly an issue with the expansive area provided to the user to enter their information and message, but even when pushed to the edges, the text remains comfortably spaced. The return to sender element that gets added to the outside of the envelope when you enter your name and email address is also both stylish and creative.

Aterlierdetour has a stylishly creative contact form that is befitting of the site it is carved out of. The non-symmetrical boxes have the grungy hand drawn appeal, while completely containing the text and not having any of it pouring over the edges. The padding in the main text box could stand to be tweaked around the top and the right edges. In these two areas the text feels pushed too close to the edges for complete comfort.

Danielhellier’s contact form is a comprehensive and boldly styled, which compliments the site well. However, after taking the time to craft such an inclusive and information gathering form, the navigational element that gets the user to the page, can also problematically land over the top of the submit button for the form negating the entire form right then and there.

Enviramedia has a rather large contact form that fits with the bright, pastel illustrated website it is a part of. The padding leaves everything feeling roomy and not at all forced in. Overall it is a very inviting contact form that begs for conversational messages from their users.

Alexandru Cohaniuc’s large and bold contact form is simply textured and styled to go hand in hand with the other site elements and inclusions. The padding and scrolling are set up comfortably and not in any way disruptive. Simple, bold, and eye catching.

Five cent stand returns us to the simpler, yet stylish contact forms, where subtle styling is key and the understated color and textures do not overload or complicate the issue at all. The padding in the message box is a little tight on either side, especially with so much room left at the top, it just felt like things were a bit unnecessarily squeezed into place rather than just organically fitting.

Social Snack has a tiny little contact form tucked away down at the bottom of their site, that not only does not seem that inviting to large messages being left, but the scroll bar in the small text box grabs fragments of the text behind it, obtrusively carrying these fragments down the rest of the text box. The spaces provided for the name and the email address are comfortably padded and have no interference that complicates their view.

World-Arcade has an extremely simple contact form that pops up when you click on the contact link. The brightly colored box with the animated robot fit with the overall site theme and presentation. The spaces provided are all well padded and comfortably set up. Overall, it is very simple, but effectively and invitingly crafted.

Hybridworks has a flashy site overall, but the contact form, while sleek and aided by the same sound effects that accompany the rest of the site feels a bit out of place with main presentation of the site. Also, in the main message box, the padding on the left and right side are not even to the point where it feels like something is slightly off. A minor adjustment could straighten that out and make it that much more comfortable on the users visually.

Carsonified has a colorful and bold contact form with large text boxes to fit hand in hand with the feel of the rest of the site design. With such large boxes, the padding seems like it would easily not be an issue, however in the message box the padding on the right side is not set equally with the left and the text can feel pressed right against the edge. There are also fragments that are captured behind the scroll bar when it appears in the box that remain attached to it.

(ik)

In the expansive and dynamic field of web design and development, there are often times when we find ourselves working as part of a team, rather than on a more isolated, lone wolf kind of project. So when we find ourselves playing under these circumstances, then we need to be at our best to ensure that we are in fact being a good team player.

One that is contributing to the project and the work being done, instead of being a hindrance or somewhat of a hurdle that must be overcome to complete the task in an effective and timely manner. What we have to remember is that when we are working alone we are essentially the entire machine, but as a member of a team we are simply a cog in the machine that has to fit and work with the other cogs to make the machine function.

Each cog has to work together to make the team work. Image Credit

This means that we are dealing with sort of a different beast when we are assigned to a team, and that our approach should be adjusted accordingly. Now this is not always an easy adjustment for some of us to make, and so we end up playing less than spectacularly with others in these professional settings. Hopefully, that is where this post will come to help.

By highlighting and discussing the various ways that we can best work within a team environment, perhaps there will be areas in our own work that we will recognize where we have some room for improvements. Below we have done just that. But before we dive head first into the behavioral models for success, we are first going to make an important stop off at some warning signs that can spell trouble for your team.

Watch for the Warning Signs

Now before we figure out how to effectively integrate ourselves into a team environment, we want to be sure that we can identify some of the major warning signs that will let us know there is a problem developing within your team. Being able to read people or situations is an important skill in many professional landscapes, and this happens to be one of them.

When you are working on projects where you are more riding solo, then you know what bothers you and what issues that arise are ones that will prove problematic to your progress. However, when you are working on a team, you cannot so easily discern when there is a proverbial roadblock in your way. So you have to be able to read the situation and other players.

You have to keep a watch out for the proverbial roadblocks that can crop up in the way of your team. Image Credit

Through being able to read the other members of the team, you can get a sense for how each member is fitting in with the others through body language, tones, and attitudes. As the various members interact with one another, you can get a sense for how they are getting along and how this compatibility plays into the team’s progress.

Pay attention to the different tones and attitudes that are carried by each of the statements made between the members of the team, for they can be even more telling than the words being used. If certain members of the team are playful in nature with most other members of the team, but not with all, then there is potential for issue interference to rear its ugly head. These kinds of warning signs are not always indicators that a problem will arise, but it certainly has the groundwork laid for it.

There are also other warning signs that you can pick up on by reading the situations surrounding the team interactions and overall project progress. In fact, many of these markers in the road are strong indicators that some sort of corrective action is needed to guarantee a successful outcome for your project. The easiest of these indicators to identify, that should have alarms bells going off left and right, is an overall decline in productivity.

This is a major sign of trouble in your team ranks for sure. Also, as indicators go, picking up on a lack of communication or commitment from any member of the team, is also a signal that should not be ignored. These issues may seem minor at first, but they have the capacity to wreak all kinds of chaos within your team.

Speaking of a sense of lacking sending up a red flag or warning, if you begin to pick up on a lack of trust between members of your team, then troubled waters may lay ahead. In order for members of your team to be able to work together effectively, they have to trust one another, or at least trust that each member of the team is going to be able to hold up their end of the project as professionally and skillfully as everyone else.

Also, low morale among the members of the team can also weigh down your progress and cause further issues to rise within the team. So any morale drops should be addressed as soon as they are observed to prevent them from getting out of hand.

Low morale among the team is usually easy to spot and can stop your progress in its tracks. Image Credit

As warning signs go, another that can crop up from time to time and cause issues within your team ranks, is a resistance to compromise. Now this can be a major wrench thrown in to the works for sure. Just as everyone on the team needs to trust that each member will perform their part of the task at hand, each member needs to feel that there is a combined sense of teamwork underlying every step of the process.

That each member is willing to bend and compromise with the will of the group to do what works best for the project. This may also manifest itself in a more hostile light, which any sign of hostility is another warning sign that should never be ignored. Any disruption to the smooth team atmosphere is toxic in team settings and should never go unaddressed.

Summary of Things to Look Out For:

• Pay attention to changes in body language.
• Watch for alterations in attitudes.
• Monitor tones of voice and messages for any hints of trouble.
• Keep an eye out for drops in productivity.
• Take note of declines in any team members commitment to the project.
• Look for a lack of communication within the team.
• Make sure that any lack of trust is noted and dealt with as well.
• Also be on the look out for low morale in your team.
• Pay attention to anyone on the team who is resistant to compromise, it could spell trouble.
• Stay on top of the hostility level among the team, any spikes can mean difficult times ahead.

Behavioral Roadmaps

Now we come to the section of the post, where we examine some of the various behaviors to maintain and steps to take if you want to try and get the most out of all your team ventures. Now naturally, unless we are in the position of a team leader, then we might not be in a position to guarantee these things from each member of the team, but as long as we maintain the right course and attitude then others are likely to follow in suit. Besides, it is a well known fact that the only person we have full control over, is ourselves.

Therefore as long as we stick to these helpful hints, we know that our contributions to the team will always be useful pushes for progress. So now we take a look at each of the ways that we can impact the team, in order to discern the best ways to try and integrate ourselves into the team.

Communication

First and foremost we are going to look at the driving force of any team project, communication. Naturally, this is a vital element at play in any and every team environment you happen to be, and it requires that you not only strive to be as respectful as you can be when communicating with other members of your team, but you are also going to want to ensure the effectiveness and regularity of said communications as well.

If respect is not guiding each of our team interactions, then the more than likely, our team members are not going to want to interact with one another. This is completely detrimental to the outcome of the project and survival of the team!

Communication between the team members should always be respectful and should not be allowed to degrade into a shouting match. Image Credit

It is also important to bare in mind that teams cannot survive a project if the communication between team members is in any way hindered or unclear. So this is another area of your comms to keep in mind. Take the necessary time to formulate and completely organize your thoughts ahead of any scheduled team meetings, before you interact with the others to communicate your ideas.

This way you can be sure that any discussions are easy to follow, and this will help to keep the dialog on track as well. Also, remember to be as concise and to the point as possible, not allowing for multiple deviations so that the point gets lost in the wordplay.

In Short:

• Ensure regular communication between team members to keep everyone on the same page.
• Keep all communications between team members respectful.
• Be as clear as you can when communicating ideas to others in the team.
• Organize your thoughts before meetings to keep everything on track.
• Be concise, and try not to stray from the point you are attempting to make.

Trust

Next up we are going to look at a different element that we must have in place and nurture so that we can ensure the most effective and productive atmosphere for our team to thrive in. This element is trust. Without which our team projects are less likely to run as smooth, and instead be littered with problematic potholes in the road ahead.

As previously touched on, if each member of the team cannot be trusted by the others to live up to the expectations set upon each them from the beginning, then your project is bound to be stalled a time or two because of this elemental imbalance. Making sure that everyone is on the same page as far as what is expected of them is important for establishing and building this trust.

Not only that, but we have to work to be able to trust the others in the team to honor the implicit non-disclosure teamwork clause that many like to adhere to when working on a new project. There is often an unspoken air of secrecy attached to a new project, wherein we tend to like to progress to a certain point, or even to the finish, before we begin revealing bits about it to the community.

This is not always the case, but sometimes, in order to ensure the originality of a concept we like to play it close to the chest, and we need to know that the others we are working with will do the same. Trust exercises can help with team building and management, but do not discount the contribution communication plays here as well.

In Short:

• Foster an open environment in which team members can easily share with one another.
• Make sure each team member knows what is expected of them.
• Be sure that everyone on the team knows how guarded the concepts and project should be with regards to outsiders.
• Use trust exercises if necessary to help build up this important aspect of teamwork.

Expertise

As we begin working within a team atmosphere, another important element to have firmly in place is everyone’s expertise. Naturally there is likely going to be some area of crossover, but all in all you want to be sure that each member of the team plays to their strengths and varying skillsets.

Each person that takes up a place on the team should be able to easily identify their strengths and weaknesses themselves, so that they can help ensure that they are being used in the most effective way possible. This is not something that should be left up to a team leader to completely suss out and assign. Instead, we should go into a team atmosphere knowing where we would find the most comfortable and productive fit, and let the others know this.

Each member of the team is their very own puzzle piece, and we need to know where we fit. Image Credit

Now while having some background in a particular area might qualify you to handle a few concerns in that vein, there is a big difference in having somewhat of a grip on something, and having expertise with regards to it. As much as possible, you want to keep your teammates playing to their areas of expertise to keep the team progressing nicely towards the outcome of the project, rather than having a few of them dragging down the rest by being assigned to tasks they are not completely tempered to take on. Teams tend to thrive more when each member is completely engaged and challenged by the task at hand. Usually the best way to ensure this engagement is to keep them working where they work the best.

In Short:

• Know your own strengths and weaknesses, and how they relate to the rest of the team and the project.
• This is not the time or place for exaggerating your skillsets…be honest about where you work best.
• Assign the project tasks according to these expertise levels when you can.
• Know the difference between subject knowledge and subject expertise.
• Keep your team engaged and challenged, but not out of the reach of their levels of expertise.

Conflict Resolution

Another very important element of keeping your team on target and ensuring that you are able to consistently meet your project deadlines, is having a comprehensive conflict resolution system in place. With varying personality types and habits all coming together in one place, chances are, your team is going to experience an occasional bump in the road of harmony.

This is not a sign that your team is destined for failure, or that they are not going to be able to work side by side. It is merely a sign that each member of the team is human. Unfortunately, we all have our buttons that can be pressed which make us react less than reasonably, and in a team environment, you have to expect that one or two might get pushed.

Which is why it is not only vital to have a system in place, ready to handle these instances as they arise, but you also have to be sure you remain on top of them. If conflicts arise between members of the team, then the project will begin to suffer the longer these problems are allowed to persist. By keeping on top of any conflicts that may present themselves, you are not only doing what is best for the project, but also for the continuation of the team.

Get in there and get to the source of the problem immediately, without giving it time to root and grow larger. Causing further disruptions and distractions from the project and the endgame the whole team should be focused on.

In Short:

• Have a conflict resolution system in place at all times.
• Be aware of the various personality traits and types that you are working with to know better how to approach any rising conflicts.
• Handle any conflicts that arise immediately before they have an opportunity to get worse.
• Handle with care, and ensure that all parties involved are satisfied with the outcome.

Ego

Whenever you are working as part of a team, another aspect of your personality to keep an eye on and keep in check, is your ego. As delicate as these situations can be sometimes, egos coming into the equation can seriously upset the flow and functionality of your entire team.

As we said before, it is imperative to know your strengths and to be able to identify them to the other members of your team, but there is a way to this without egotistically alienating them. It should never be about personal boasting and how much the team needs a titan like you, but more about what you can bring to the table to help the team and project thrive.

This is not to say that you fall into some self-deprecating pit of despair and undersell yourself for fear of coming across as boastful. But most of us are able to distinguish between someone humbly explaining their level of skills and someone looking to simply impress those around them through their tireless tales of triumph.

Once again, we have to remember that we are here to serve the project and the team, not simply to serve ourselves or our own reputations. When we let our personal egos get in the way of that, we are seeking to make the project all about us, or worse, to reflect no one but us to the user through the outcome. Neither of which is usually a workable scenario for the team.

In Short:

• Keep your ego in check when working in a team environment.
• Do not make it about how badly the team needs you, make it about how well you can serve the project and team.
• Remember that it is all about the project, not about any sort of personal victories.
• No one person should stand out from the rest in the team.

Adaptation

Finally, the last area that we are going to cover when it comes to effectively functioning as part of a team deals with adaptation. Remembering that there are numerous areas to watch out for when you step into the team arena, adaptability is one of the most important.

Having any one member of the team be rigid when it comes to making the pieces fit together, is not going to make the experience a pleasant one for any of the people involved. So we want to bring the most adaptable version of ourselves to the table so that we are not the ones causing the team and the project unnecessary stress and delays.

Being able to compromise is key when it comes to working with others, so anytime one takes a position up as part of a team then they should expect this element to play a heavy role before the project is all said and done. Granted there are going to be concepts and ideas that you have for the project that are worth fighting for, but only to a point.

If the rest of the team does not see the same value and merit in working with you on this point, then after you have clearly made your case, it is time to compromise and let it go. Perhaps save it for another project at a later date. There is no sense in continuing to bog down your team efforts and keep the deadline on hold because you are too attached to that one particular idea.

In Short:

• Be adaptable, not rigid when it comes to the project.
• Allow for compromises to be made in the name of progress, rather than clinging to an idea the others disagree on.
• Save ideas for future projects rather than holding up this project until everyone sees things your way.
• Pick your battles, and know how long to push, without becoming pushy.

All in All

Working in a team environment can be hugely rewarding, or endlessly taxing depending on the way each member of the team integrates themselves into this atmosphere. You want to get out of the experience that which is equal to what you put into it, and in order for that to happen, you need each member of the team to come to the table ready and willing to work as a member of that team.

Hopefully the ideas discussed in this post have helped to put some of us on better ground to start from as we dive in. What areas or aspects do you think should have been included, or ideas that should have been discussed as well?

Consider Some of Our Previous Posts:

• How To Effectively Communicate With Developers is a post from Smashing’s vaults that helps to bridge that communication gap between Designers and Developers.
• 10 Harsh Truths About Corporate Websites is another useful post from Smashing’s past that has some good advice for any web teams tackling and maintaining corporate sites.

(ik)

When it comes to design projects, logo designs tend to be some of the trickiest to work with, simply because of their purpose. All design tends to be conveying a message, this is true, but most designs get to use so much more to make their points accessible to the viewer.

Not to mention that the message being conveyed through most design gets to be a bit more focused or general as well. This is not always true with a logo. Logos usually have much more to convey with a much simpler vehicle to make their message land.

It is with that in mind that this post came to be. We thought we would search out the best resources, interviews, articles, whatever we could find to help take some of the proverbial guesswork out of this sometimes troublesome design task.

We also thought that we would go ahead and drop some tips into the mix as well to share a few of the pearls that have always stuck out and stayed true with us in this arena of choice: logo design! Which is where we will get started in the post today, with some advice.

The Basics

Now in most conversations that we’ve had on logo design, there are a few standard bits of advice that tend to get tossed at the reader, so we thought that would be a good place to start. You more than likely have heard some of these before, but we have to start somewhere. So why not begin with somewhat of a refresher?

Less is More

As was already mentioned, with logos you often have quite a bit for your design to encapsulate which can tend to set you on a cluttered course of an overly busy, somewhat ineffective design. This urge must be avoided, for by and large, the way to the most effective logo design is through simplicity. That’s right, you hear it all the time, you want to keep it simple. Logos tend to work best when they are minimal and sleek, rather than busy and garish, so this is where you want to set your aim when you take on a logo design project.

Counting on Color

Given the minimal approach that most logo designs demand, one of the key elements we have at our disposal as designers for effectively pulling this together is color. Not plural. Just color. We stress this because one thing that most designers agree a logo needs to work is to be able to be conveyed in a basic black and white presentation without this compromising its effectiveness. The more colors that are used in the design, the more the design’s message becomes dependent on them. So keep it basic here as well.

The Scaling

As far as basic ‘musts’ for effective logo design go, scalability is near number one on the list. If the logo cannot be resized for use in virtually every size it is needed, then it scores less than fully successful. This is not always the case, mind you, but from what we have seen this tends to be the majority of cases. Logos need to be to versatile in presentation, and among other things that means scalability for transfer between mediums and marketing campaigns. This tends to be why vectors are the format logo designers prefer to work in.

Font Fixation

With little to work with, every element counts and carries that much more, which is why choosing the right font for any of your typographical inclusions needs to be heavily considered. This is not a time to simply fall back on your favorite font just so you do not have to think about it. Give the decision the full weight and consideration it deserves, and with the mission in mind find a font that fits nicely within the logo, connecting with all of the finer points of the message that it is carrying. So keep your focus fixed on this element as well when working in this arena so as to not have it feel like an afterthought.

The Brief

Like with all design jobs, getting the client to fill out a project brief is extremely important for being able to effectively craft the logo the client truly needs. Though there are unfortunately occasions when the job has to be done without a brief, or with such a limited one that it barely offers much insight, and things still successfully come together. Though it tends to not be a good idea to try this when creating a logo. Even if you cannot get the client to cooperate and send you the information you need, there is research you can do on your end to fill in the important parts of the brief. Below are a few of the brief bits that you need to be sure that you have covered when you set out to design a logo.

Get the History

History is important. It lets us know where we have been and what we have gone through. The same can be said of a business looking for an updated logo. If we do not know about the history of the company, not only do we have an incomplete picture from which to start our work, but like the saying goes, we might be doomed to repeat it so to speak. If the client is looking for a bit of a rebrand, then without consulting the past versions of the logo, we might near duplicate themes or elements they once had and have wished to leave behind. So getting the client to help us paint this picture can be crucial to the design work we are doing.

Not only can the historical perspective of the brief help us to avoid any repetition, but it can help us to find ways to throwback to the original design in creative new ways. So the history helps on both sides of that coin. Not only that, but as with any job, the more information we have going forward usually is usually the best way to proceed. The more we know about the business and its beginnings, the better prepared we are for finding a way to encapsulate and distill all of the pertinent and relevant information into the logo design. So try your best to get the client to be as forthcoming and comprehensive as they can when they are filling out the brief.

Get the Mission

Even though the history is important for knowing where the business started and how it has grown, another vital section of the brief for the logo design is the company’s current mission. In other words, the history is more of the background of the picture we need the brief to paint, while the mission is the foreground. Where the company is going. What they are moving towards. This helps to give you the full scope of the picture and allows you to feel out the project in a much more accessible way.

Now that you know where they are aiming, you can adjust your focus along that same track and imaginatively explore ways that your design can help create a sense of this endgame. Knowing this direction can assist you in numerous ways, beyond giving you a sense of what to impart. Our clients tend to know more about their fields than we necessarily do as designers (unless the client is from our own field of operations of course, then it is anybody’s game), so with a more distilled mission from the client we know what we need to focus on within their field and what we can avoid as we craft their logo. This way, their audience within the arena becomes clearer, and we can better adapt the message towards them.

Get Client Testimonials

Another section of the brief that we can include for a better picture of the client and their impact within their market is to have them provide a couple of client testimonials if they can. Naturally, not every job or client will have access to this, especially if they are new, but for those who can provide them it can be beneficial. Just like before when we talked about getting the complete picture from the client, these testimonials can serve up some finer points and detail that the picture would have otherwise lacked.

It is one thing to hear from the client about how effectively they are managing withing their field, but to some degree, we tend to write it off as hype. And even though the hype may be all we are selling through our design, if we believe it then we will more than likely be better at conveying that through the work. That is where the testimonials can help to really drive points about the company home through the design brief. By letting us, the designers, know what their audience sees as their strengths we can find ways to accentuate those through the design. So if the client can provide you with these insights, they might prove useful in your process.

Get Competitor Comparison Models

Another area of the brief that is crucial to logo creation, is the section on the client’s main market competitors. This is important for everyone involved in the project to consider for a number of reasons, but for the sake of the logo design, we need this insight to know what is already being done in terms of existing designs in the market. Originality tends to be what we strive for, so we want to be sure that we study the other businesses competing with our clients so that we know what imagery and symbolism has already been executed for conveying these sort of business ideas.

Now this is not to say that we are going to be able to come up with something that has never been done before, but it grants us a headspace wherein we are already in the environment we need to be in for our client’s design. Through this examination we begin already on the path to the audience we will be reaching for through our own design, then we just have to find a new way at them. So this element is often one that we should not attempt to proceed without having in the design brief.

Approaching Style with Caution

Now when it comes to logo designs, there are lots of stylistic approaches that you can take. In fact, you can just check out Logo Trends from Logo Lounge and see the numerous design styles and approaches that have been applied to these projects throughout the community, and which have steered them year by year. The site does a good job breaking down the various styles. However, you have to keep the basics in mind when you consider the stylistic approach that you are going to take. Especially, in regards to colors and scale.

We are the ones who should be aware of the lines and know which ones we should not cross. Image Credit

If the style you choose is too complex then you are going to have to rely on the other elements to help pull it off. Color is where a lot of designers turn in these cases, losing sight of the black and white factor. And though the client does have final say with the overall outcome, when we can steer the design we should opt for a simpler style that does not overcomplicate the design. Not only should we remember the basics, but we should remember to keep it basic. You can still be stylish without compromising the effectiveness of the design, it is just up for us to figure out how to do that.

We are the key to finding and maintaining that balance between function and style in the logo as the project unfolds. It is not a matter of one or the other. Our expertise is what we are hired for, and it is this skill that allows us to find those fine lines that we should not cross. With the depth of the brief it is often easy to lose sight of the simple approach and opt for the razzle dazzle, but this can prove to be a mistake in the end.

Logo Tutorials & Resources

Below are a few collections of resources and tutorials specifically targeted at logo designers for you to get lost in. With so many useful tools and tips all in one place, we felt this was a great place to start for gathering resources for you to use in your own projects!

• 70 Excellent Logo Design Tutorials and Resources is a wonderful post from the Six Revisions crew that lays out a large selection of resources and tuts to lift your logos to a new level.
• 105+ Logo Design Tuts And Resources is another fantastic collection with hundreds of entries for you to pour through when you begin any logo design project.
• How to design an awesome logo by Gary Simon leads you through the logo design process step by step using Photoshop.
• n.design Studio Tutorials gives you a useful quick introduction to 3D logo design in Illustrator.
• The Ultimate List of The Best Logo Design Resources is an older post from Just Creative Designs, but it still packs plenty of punch for anyone interested in this specific area of design.
• Logo Design Toolbox: 60+ Resources for Logo Design is another fabulous collection of resources from the Design Mag team, and our final collection of logo design resources.

The Blogosphere’s Best

Throughout the interweb there are numerous blogs that have taken on the task of keeping logo designers in the proverbial know. From sites that are more or less finely focused on this subject matter, to those that take on the topic from time to time, we have gathered a few more cyber stops for you to check out on your logo design quest for knowledge:

Dedicated Sites

• Logo Design Love is one of the top sites that designers turn to when they are looking for logo design info.
• Logo Lounge is an awesome site for sure, with lots of insightful logo information.
• Jeff Fisher’s Logo Motives Blog is a blog from one of the top names in the logo design game.
• Logobird is a very insightful and useful blog for logo designers from designer Duane Kinsey.
• Logolog is a fun logo design blog that features some wonderful logo design work from around the globe.
• Logodesigndotcom can be a useful source of inspiration. Browse their archives for some killer logo artwork.
• Logotalks’ article on the 33 Best Logo Design Processes of 2009 is a must-browse piece and useful reference collection.
• LogoBlog does not only blog, but showcases the award winning logos of their international community.
• LogoOrange gives you a nice insight into Logo Design History. Check out their Famous Brands Glossary and you’ll be astounded where some of today’s famous logos have come from.

Showcases

• Logodesignerblog features a huge showcase with a nice section on logo design in businesscards.
• Luka Pensa lets us take a peek into his large logo design portfolio.
• Gary Simon showcases some of his work in his online portfolio.
• LogoTwo presents one of the largest collections of Web 2.0 Logo designs on the Internet submitted by webmasters arround the world.
• LogoFavessole’sintention is to provide you with some logo design inspiration.
• Pixel Clouds showcases an inspiring selection of logos.
• The Flickr Logo Showcase is a collection of work you should not miss out on.
• LogoPond wants you to feast on their Identity Inspiration.
• LogoRaid features logo design work from around the world.

Very Helpful Articles

• Logo Design Tips & A Not-So-Ordinary Interview with Logo Designer, Jeff Fisher is an insightful interview that no logo designer or enthusiast should miss.
• Logo design tips from the Logo Factory is another article with some useful hints for those in the field.
• 10 Logo Design Tips From the Field is an article from Logo Design Love that we had to feature here even though we featured the site as well. Definitely a must read.
• 5 Useful Logo Design Tips from David Airey’s blog is another post that we had to feature here. Concise and insightful.
• Minimalism in Logo Design: Positively Perfect Negative Spaces is a post on effectively using negative space in your minimalist logo designs.

Logo Book Learning

Below are a few books on the subject of logo design that we had to highlight before the post wrapped up. If your desire extends beyond the blogosphere, you can always take you love for logo design to more in-depth sources of study:

• Logo Design Love : A Guide to Creating Iconic Brand Identities is a book from one of the top names in logos.
• Logo Lounge Series of Books is a series of books from the Logo Lounge Crew. Since that section of the site is for members only, we have linked the Amazon page for the first in the series.
• Identity Crisis : 50 Redesigns that Transformed Stale Identities into Successful Brands is another book from one of the most well known names in the biz, Jeff Fisher.

(sp)(ik)

Not that this is universally true, but some people look haphazardly into a field before deciding to dive in. We do the odd bit of research, investigating the ins and outs, slowly developing expectations about this new arena of work. Expectations are not necessarily bad to have; they can be a powerful motivator. But sometimes our expectations are shattered by a development that we never saw coming.

“Shatter” sounds a bit dramatic, but a situation can certainly get derailed. Regardless of whether this changes the course of your career, it can still knock the wind out of you. Perhaps worst of all, you can’t really prepare for something that you didn’t expect. That is where this post begins. What’s past is prologue, and many of you are bound to have reflections on how those twists and turns of yesterday can help guide your development today.

When we’re hit by something that wasn’t on our radar, our expectations can shatter. (Credit)

Once again, we turned to our social media friends and followers for examples of unforeseen changes in the design and development world that tripped them up. Hopefully, by going over some of these pitfalls, we can be better prepared for the next ones — or at least be prepared for their fallout. With the way communities are constantly developing, changes are bound to surprise us, but if we are aware of how quickly they can occur, we might just be better able to adapt to them.

A Better IE

“Did someone say ‘standards-compliance’? Well, it couldn’t have been Microsoft. Oh, it was?”

A chill ran over the World Wide Web as we heard the news — and saw the proof — that Internet Explorer was going to comply with the standards that the rest of the Web had been adhering to for a while. And it took only the ninth iteration of its browser for Microsoft to finally reach the shore from which the rest of us have been waving to them.

Years after setting sail on the cyberspace waters, IE finally lands on the shore we have been occupying for years. (Image credit)

Many in the design and development community have long given up on the Microsoft crew, and many had vowed to stop catering to the IE crowd by not adding the extra code and tweaks that previous versions of IE required. So, when Microsoft announced that IE9 was bound for the market, you can imagine that the community was waiting with less than baited breath. Then news filtered to the public about the bells and whistles it would have, and people became shocked at the prospect of IE becoming compliant.

Lesson Learned
So, what did we learn from this development that we never saw coming? With enough pressure and time, suckage can end. There was a time when Microsoft was setting the agenda and didn’t have to comply to anything. It was on top, and no one could challenge its grip on the market, so it saw no need to change. But all that is past. It is finally stepping up to the plate.

What our Friends and Followers Said

• IE9 is remotely good!
• Internet Explorer is supporting open standards.
• IE9 as we know it now.
• An excelling IE9.
• Internet Explorer becoming a fairly standards-compliant browser.
• IE9 being pretty awesome!
• IE to support recent fancy stuff like HTML5 canvas, video, audio, clean CSS3 and more to come with IE9.
• Microsoft’s commitment to Web standards in IE9.
• Internet Explorer actually getting better (IE9 looks promising… let’s just hope).
• Yes, IE9, and especially its download manager!!

Mobile Web Explosion

“A Web you can take anywhere? Are you talking sci-fi?”

Not exactly, although we weren’t exactly prepared for this by Back to the Future 2. The mobile Web has been a game-changer for the design and development community, and it caught many of us by surprise. It doesn’t seem to be slowing down either. Quite the opposite: the market is growing by leaps and bounds. What some assumed to be a fad has forged an entirely new direction for the market.

For the longest time, the trend was to expand our viewable spaces. Designers planned for a larger Web, breaking out of the standard 960 grid, believing that the Internet would be grandiose and viewed on large screens. Things took a turn, and the Web was narrowed to much smaller mobile devices. The mobile Web exploded and seems to have created a virtual black hole that is pulling countless surfers in. People have fallen in love with the idea of taking the Web wherever they go, and they aren’t looking back.

Lesson Learned
While increasing the size of viewing areas is still a trend in its own right, few of us expected so many people to opt for a compact Web. Convenience outweighs presentation at times, and many want constant access to the Internet. Basic often beats bulk.

What our Friends and Followers Said

• A mobile revolution.
• The explosion in mobile Web and applications!
• Designing for browsing on mobile devices (cell phones mainly).
• Designing for cell phones! When I started in Web design, I’d never have guessed that.
• Web browsing on small (mobile) devices.
• I definitely didn’t see mobile browsing being at the level it is today (Thanks, Apple!).

Social Media Dominance

“Why would anyone care about a blogging platform that limits you to 140 characters?” “Who cares about social networking? We’re running a business, not a high school.”

I wonder how those words tasted when they were eaten? Social networking dominated the Web almost as soon as it hit the scene, and it continues to attract more users than most of us could have imagined. The many social media outlets and groups out there have brought us connectivity as well as insight into the communities that use them. Who saw that coming?

Dozens of social media networks are gaining traction, creating new avenues for marketing in the process. They are attracting not only veteran Web users, but also millions of people who previously saw little or no use for the Internet. No wonder these networks are dominating the market: they satisfy a need that so many didn’t realize they had.

Lesson Learned
What have we learned? That most people think in 140-character bursts of thought? Not exactly. Rather, we’re seeing the power of this connectivity and the way the Web can provide a global fabric of social communication. Many of us miscalculated the appeal of a socially interactive Internet, but now we see that it is unstoppable. You can’t stop the signal, as Joss said.

What our Friends and Followers Said

• Twitter! I thought micro-blogging and other social media arms would be a passing fad. Boy, was I wrong.
• The omnipotence of Facebook.
• More than half a billion people using a website (Facebook).
• Facebook advertising around the ground at Old Trafford against Liverpool on Sunday. Mad!
• Facebook addiction.
• Massive social media sharing on every pixel online.
• Social media overkill.
• With that, the herd of Social Media “experts.”
• Twitter proving to be popular/useful.
• Twitter. I still don’t see any redeeming value to it, even for reciprocal linking.
• Social media integration.
• Hundreds of thousands more people trying to earn XP and levelling up (Farmville).

Overall Market Stability & Growth

“You mean I can make this my job? What are you smoking?”

So many people never really saw the design and development fields growing so rapidly into a stable and secure job market. Thousands have committed to a career in a field that was once considered better suited to supplementary income or a lucrative hobby. The market now provides an endless supply of work opportunities and continues to evolve.

Everyone knew the Web would be big, but not everyone recognized the need for professional designers and developers to make the most out of people’s experience on it. This stability and growth came as a surprise, albeit a welcome one. The broad and helpful community that has populated this market might explain both the stability and growth. The community has built a solid foundation for the coming generations.

Lesson Learned
Is there a lesson here in our underestimation of the market — aside from what it tells us about our self-esteem (although that’s part of it)? As with the mobile Web and social media, perhaps the lesson here is not to dismiss an emerging market before considering its full implications and potential applications.

What our Friends and Followers Said

• Just about unlimited opportunities.
• Here in my country: the respect!
• Now it’s actually a real job!
• To actually earn my living with website development.
• The growth of the now enormous Web dev community and its amazing generosity. Couldn’t have become the designer I am today (being self-taught), and the better designer I hope to be in the future, without it.
• Well, I was going to say HTML5, but then when you really look at it as a whole, I guess you can infer that all of us never really saw a big market for virtual goods (in this case Web design and development). I was very surprised to see how it kept on growing to this day, and I have high hopes for the future.

Farewell XHTML — Hello HTML5

“What is this nonsense about the return of straight HTML? XML-based code is the wave of the future!”

Or so we thought. As we’re seeing, things don’t always work out the way we expect. When the coding standard went from HTML 4.01 to XHTML, many abandoned ship and cut down this x-citing new path. Some even called XHTML the future of HTML, doubting that HTML would have a significant version after 4.01. They believed the Web had gone the way of the X.

No one expected us to retreat from the path of XHTML. (Image credit)

After nearly a decade of XHTML ruling the Web, HTML5 promises to change all that. We might have to say farewell to the X after all these years. Cue the dropping jaws and shocked expressions. Evidently, XHTML had not taken as strong a hold as we had thought. The standard is now revisiting its roots.

Lesson Learned
Is the lesson here never to give up on the source mindset? Or that the original will persevere in the end? Or better yet, that we should learn to move forward without putting all our eggs in one basket? If we learn that, we will have learned something valuable from this detour.

What our Friends and Followers Said

• The end of XHTML.
• Leaving the XHTML path (HTML5).
• HTML5 form validation. Or rather HTML5 itself.

Bargain Bin

“No one goes bargain hunting for design and programming. Quality always wins out over cheap and quick… right?”

Apparently not. This is another of those dynamic and well populated fields that many people never expected to face. Lo and behold, as in almost every other business market out there nowadays, you will come across people who want bargain-bin pricing from their designers and developers. Some even expect bells and whistles with their bare-bones pricing.

When the economy nosedived a few years back, many people could no longer afford top-shelf design and development. This sad truth, coupled with the slice of the public that undervalues the contributions of these professionals, opened a segment of the market that not only tolerates this undercutting but practically encourages it. Bargain-bin services have cropped up all over the landscape to capitalize on a demographic that is in crisis and, for lack of a better word, cheap.

Lesson Learned
The lesson here is obvious, though perhaps not to those who were caught off guard by this trend. There will always be people who undervalue work that they themselves cannot do, either because they do not really understand what is involved in the process or because they are just dismissive. And there will always be those among us who are willing to satisfy these demands to turn a profit.

What our Friends and Followers Said

• That there are people out there willing to do it so cheaply.
• Those free downloadable templates! Now anybody can just get a nicely designed template, eliminating the need for a custom Web designer.
• Build-your-own-website-for-free website services. People will simply click, drag and add content, and they now have their own website!

Apple vs. Flash

“This idea of community will steer the market, and collaboration between the major players will be the way forward, right?”

Not if Apple has anything to say about it. Talk about shockwaves: many of us never saw Apple’s battle with Flash coming. Potentially deep-sixing a major player on the Web before its prime was a bold move. The field of battle has become anything but friendly as both houses make their play to shape the future of the Web.

Flash has long been a favorite of many designers and developers, while being disliked by just as many. So, it was inevitable that the day would come when we would have to choose whether to commit to or abandon this technology. That day came sooner than we expected; once Apple dominated the mobile Web and app market and turned on Adobe. Flash is not supported on the iPad or iPhone, to the chagrin of some critics, and Steve Jobs made some rather unflattering statements about Flash’s stability and usefulness in the wake of HTML5.

Lesson Learned
The market can change unexpectedly when its leaders suddenly decide to turn the tables. Expect the unexpected is particularly apt here. As one company gains dominance in a market segment, it can effectively twist and turn us however it likes.

What our Friends and Followers Said

• Flash going away.
• Apple’s failure to support Flash on iPhone/iPad.
• The death of Flash.
• Adobe and Apple hating each other!
• Apple not adopting Flash!
• Steve Jobs saying ‘No’ to Flash.

Jumping on JavaScript

“Oh, please. JavaScript is a flashy fad. Give it time; it’ll fade into the ether.”

A fad it is not. In fact, as pointed out by one of our social media friends quoted below, JavaScript has become so prominent in so many applications both on and off the Web that it has become a near necessity. For years, it has been enhancing the experience of millions of users, creating a more dynamic Web.

In the beginning, some designers and developers saw little use for this technology beyond a bit of dazzling. Others saw its raw potential and took the reigns, working hard to elevate our experience of the Web and beyond, and making JavaScript a go-to language for so many developers.

Lesson Learned
In discounting JavaScript so quickly, perhaps we should learn to be not so hasty in judging the usefulness of every new tool that comes along. We should instead devote adequate time to examining the technology and exploring its potential applications.

What our Friends and Followers Said

• JavaScript becoming essential. I ignored it for years, thinking it was just good for flashy effects.
• The rise of JavaScript.
• Server-side JavaScript.

The Persistence of jQuery

“JavaScript is a complicated language, and we just have to accept that in order to use it. There’s no getting around it.”

Well, that argument might have held up until 2006. But then one tool hit the scene to change all that. jQuery arrived and sent waves rippling through the community. Suddenly, this cross-browser JavaScript library was barreling through the ranks to become the most popular library.

jQuery didn’t take long to cement its status as number one. (Image credit)

In a matter of years, jQuery was created and used on nearly a third of the most trafficked websites. Clearly, there was no stopping it. Opening doors for developers in so many areas, jQuery became another one of those wonderful gifts to the community. Couple that with its open-source licensing, and it is easy to see how it has scaled such heights in so short a time.

Lesson Learned
Looking at the ingenuity of those responsible for the success of jQuery, we can draw a lesson about how we as a community can come together to build better access to popular languages, such as JavaScript. Never underestimate our desire to cut out as many steps from a process as possible and make life easier for ourselves — not to mention the momentum such efforts can generate.

What our Friends and Followers Said

• jQuery to an extent.
• The possibilities! Thanks to jQuery and the brilliant minds behind it.
• jQuery.

An Animated CSS

“CSS is impressive, to be sure, but it’s all about styling. Leave the animation to JavaScript!”

Well, not so much anymore. Since about 2007, Webkit devotees and others have been developing the means to enable elemental animations via CSS. And with CSS3, what many in the community thought would remain a dream is becoming a reality.

CSS is a powerful and popular language for styling websites, and no one ever doubted its adaptability, but the emergence of an animation module still surprised a few of us. Despite the crude animations generated in the early days of CSS, these more fluid JavaScript-like transitions are still quite an interesting development. Another shining example of the leaps and bounds by which the design and development community grows, ever moving forward.

Lesson Learned
Any new lessons we can learn from this? Not really, other than touching on some of the ideas already discussed. Here again, we see that we cannot underestimate the inventiveness of people in this industry. It it one of the main reasons for the dynamism and growth that have brought such stability and scope to the market.

What our Friends and Followers Said

• CSS3 animation.
• CSS transitions. But oh, what a joy they are!
• CSS3 animation!

More From our Friends and Followers

Before turning the discussion over to you in the comments section, we wanted to share a few more comments from our friends and followers about surprises that caught them off guard. Thanks again to all of those who participated in this dialogue and to all those about to contribute!

• Photoshop CS5 Content Aware.
• The death of the Web.
• Chrome was a complete shock when it got released. Really don’t know how they kept it so quiet.
• Clients from hell.
• 1. Google doing Web fonts. 2. How easy they are to implement!
• Flash actually being used.
• The enjoyment I get from building shifty out-of-date-code HTML email campaigns. Seriously. A/B testing them and seeing an increase in conversions is awesome.
• Wait… you’re serious??
• Custom-colored scroll bars are not so hot anymore.
• In-browser location detection.
• The number of “professional” Web designers who can barely string together some HTML/CSS.
• Seeing websites in 2010 that are still being made with HTML tables… Argh!

Related Posts

• The Current State of Web Design: Trends 2010
  Offers a look at where we are in the field today.
• The Web Design Community Offers Advice to Beginners
  Another great post that looks at some tips from our friends and followers.

(al)(ik)