BlogmyQuery – BMQ

Office applications are getting very advanced these days offering all sorts of fancy features for data visualization. Graph generation is a standard feature in desktop applications like Microsoft Excel or OpenOffice.org Calc, but it can also be achieved in non-spreadsheet applications like Adobe Illustrator.

If you’re unfamiliar with the process of creating graphs in Adobe Illustrator, this article will help in giving you some insight into the work-flow. It might also help you decide whether Illustrator is the right tool for this kind of assignment.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

What Type of Graphs Can You Create in Illustrator?

Adobe Illustrator offers 9 graph types to visualize data. You can choose from the following:

• Column Graph
• Stacked Column Graph
• Bar Graph
• Stacked Bar Graph
• Line Graph
• Area Graph
• Scatter Graph
• Pie Graph
• Radar Graph

There is also the possibility for making combinations from the existing graph types to achieve greater diversity. The only graph type that can’t be combined is the scatter graph.

Creating graphs in Illustrator is as simple as selecting the Graph Tool (from the Tools panel), clicking on your Artboard and dragging and thus forming the area size of the graph. It is also possible to type in the width and height of the graph, which is useful if you want to create graphs with specific dimensions. If you decide to type in the dimensions of the graph, you should bear in mind that those dimensions are applied to the whole graph object (including labels, legend and x, y values), not just the graph chart.

Once you create this graph size and shape you will see that it’s available as a single element (layer) in the Layers panel, usually with the name <Graph>. This might seem confusing at first but you’ll get used to it very quickly.

The Two Faces of Illustrator Graph Functionality

Creating graphs in Adobe Illustrator is generally a straightforward task but once you get into advanced techniques of graph design, functionality can get quite annoying. You’ll be surprised to discover that basic tasks like scaling and aligning are not instantly applicable on graphs.

Face 1 (Graphs as Objects)

The reason for the initial exceptional lack of functionality of the graph objects in Illustrator is that they are quite simply, ‘objects’. That is to say, they are special groups of sub-elements that have a limited number of attributes the user can control. Graph objects are less flexible than usual Illustrator layers, layer elements and groups of layer elements.

Here are most of the limitations of Adobe Illustrator’s graph creation functionality that are instantly noticeable:

• Transform panel is not available for graph objects.
• No transform controls are available for selected graph objects, thus no instant scaling or rotation is possible.
• Graph objects cannot be aligned to other objects nor can other objects be aligned to them.
• Two or more graph objects cannot be grouped.
• It’s not possible to create a clipping mask from a graph object.
• A graph object cannot be transformed into a symbol.

Maybe it’s not really wise to initially dig for limitations, as you may get the impression that you’re left with very few things that you can actually do to graphs in Illustrator. Of course, that’s the wrong impression. As noted, creating graphs in Adobe Illustrator is generally a straightforward task.

But through knowing the limitations of your tool can actually help you plan early and work smarter.

Face 2 (working with sub-elements of the Graph Object)

Illustrator Graphs have sub-elements. The sub-elements are the brightest aspect of the graph creation process in Adobe Illustrator. They are flexible and you can do all sorts of modifications to them. From repositioning, scaling, mirroring, adjusting opacity and offsetting paths to applying special effects like brush strokes, glowing edges, pixelation etc. Sub-elements are your true friends as long as you don’t make further changes in the graph data!

The appearance of the following sub-elements can be modified:

• lines
• labels
• data points
• graph legends
• graph shadows
• value axises
• columns
• pieces of pie graphs

However, if you make a change in the graph data, you instantly loose the control over the sub-elements’ appearance and reset it to the bare minimum – fill + stroke. Actually, you reset the appearance of sub-elements with any action that causes the graph object to regenerate. That’s why, as even Adobe advises, the sub-elements in graphs should always be styled as the final design process of a graph.

What about ungrouping Illustrator graphs?

Is it possible? Absolutely. As long as you’re aware that ungrouping graphs removes the possibility of further changes in the graph data. Having this firmly in mind, it is only useful to ungroup a graph object once you’re sure that you won’t have to revisit its “Graph Dataâ€�, “Graph Typeâ€� or “Graph Designâ€� windows.

Graph ungrouping means simultaneously an increase AND a decrease in flexibility.

Ungrouping the Graph Object means an increase in flexibility because it makes all graph sub-elements behave like usual Illustrator layers, thus unleashing the full power of layer editing in Illustrator.

It is at the same time a decrease in flexibility because it’s a one-way road. After the ungrouping, the graph object turns into a group of layer elements (as funny as this sounds), and looses its touch with the special graph creation functionalities.

So, it’s wise to use Adobe Illustrator for designing graphs one step at a time. First prepare graph data, than design the graph. This might seem too obvious, but it’s very, very easy to get carried away in the creative process, forgetting about the two faces (before and after ungrouping) of the graph object. I know, as I have made this mistake several times.

What if you want to modify several graphs at once?

That’s a very legitimate question and it deserves a decent answer.

You most certainly can select several graph objects at once, and apply various effects and transformations to them. With the help of the Group Selection tool, you can even select sub-elements from different graph objects and style them as you wish. Besides other things, you can also change the Graph Type of multiple graph objects at once.

Unfortunately, what you can’t do is change graph data on more than one graph object at once. It’s impossible and it’s a shame. Instead of being able to change the data of 50 various graphs in an instance, you will need to do 50 separate changes (and waste valuable time).

How do Graphs Perform in Legacy Illustrator Formats?

Every incremental release of Adobe Illustrator offers options for saving working files in legacy formats. This way you can ensure that your designs will work in older versions of Adobe Illustrator.

However, even though the possibility is there, the practical value of this Illustrator feature, for graphs, is minimal.

A personal example

While preparing the final release of “The Graphs²â€�, saving to legacy formats added extra “featuresâ€� to my designs. For example, while working on a legacy AI file, after editing the graph data on a randomly chosen graph object, the graph object repositioned itself to false coordinates, and made the design appear to be broken. After testing this on other graph objects, I figured that it was a rule and not an exception. I wasn’t able to get rid of this “featureâ€� until I decided to minimize the backwards compatibility of my designs and save into Illustrator CS4 format.

Adobe does warn about the consequences of saving in legacy formats, but this is certainly a feature for Illustrator Graphs that could be improved.

What Could Adobe Improve in its Illustrator Graphs Functionality?

It would be really nice not to have to worry about loosing touch with the graph data after graph ungrouping. Why do graph objects have to be limited? In fact, why do graphs need to be generated in the form of objects? Why not serve them in the usual way – as a group of separate layers?

Perhaps Adobe should spend more time modularizing the graph creation functionality and serve them throughout the whole Creative Suite. Data visualization is important and shouldn’t be treated as a gray zone, as a pending process in the development of the Creative Suite, especially not in the development of Adobe Illustrator.

Some ‘would be nice to have’ stuff for Illustrator graphs

In terms of flexibility and accessibility, Adobe Illustrator’s graph creation functionalities are not polished at all. The main features are very obvious, but a lot of small pieces are missing for a rock solid graph creation module.

• Axes: Though it might be illogical for some, why isn’t there an option for generating graphs without value axes? Hiding them manually takes additional time and it’s specially annoying if you need to use the “Show Allâ€� option for hidden layers, while trying to exclude the value axes from reappearing. An extra option that will allow hiding and showing of value axes is needed in the “Graph Typeâ€� window.

• Shadows: Why would you implement a shadow sub-element for graph objects if you don’t provide proper options to control its appearance? And, who needs rough shadows these days when ray-tracing has spoiled us like children? We need realistic shadows for graph objects in Illustrator. We need to be able to control the light angle, the dens and the opacity of the shadow, the level of softness. We need all things that you normally get when applying a “Drop Shadowâ€� layer style on a Photoshop layer. While saying this, there are manual ways of getting smooth graph shadows, like applying “Drop Shadowâ€� effect on sub-elements or applying “Featherâ€� effect on the default graph shadow sub-element.

• Inter-object styling: What’s the point of providing styling options for graph sub-elements, when there’s no freedom in choosing when to apply them. The appearance reset for graph sub-elements has to go away! Data has to be separated from presentation. We need to be able to make unlimited changes to graph data regardless of the appearance of the graph object or its sub-elements. We need to be able to change things whenever we feel like we want to, not necessarily last.

Summary of Illustrator Graph Features

Here is a summary of the most important features of graphs in Adobe Illustrator.

• Graphs are special groups of sub-elements and have a limited number of attributes you can control.
• You can create 9 main types of graphs in Adobe Illustrator.
• You can import graph data from external files.
• You can copy and paste data from spreadsheet applications into graphs in Illustrator. You need to paste the data into Object → Graph → Data window for this to work.

• If you ungroup a graph you cannot make changes to its data.
• You can apply all sorts of effects to the sub-elements of a graph and not so much to the graph object itself.
• Graphs and symbols do not get along quite well. A graph object cannot be converted into a symbol. However, there is an option for importing symbols into graph designs.
• It is possible to create graphs with custom designs (by including images and symbols), but we won’t explore this in detail in this feature. Maybe you can write a great article on this topic?
• You can copy and paste charts from Microsoft Excel or OpenOffice.org Calc into Illustrator.
• Illustrator offers excellent support for exporting graphs in SVG file format. Graph data remains editable in Illustrator, for SVG files created with Illustrator.
• If you require advanced graph creation features, make friends with spreadsheet applications in famous Office suites.

Save some time along the way!

Here are a few quick tips (shortcuts) that might come in handy for beginners or may act as a reminder for advanced Illustrator users. These are all obvious things that will help you from wandering aimlessly around Illustrator menus and the workspace.

• Instead of going to Object → Graphs → Data…, anytime you need to access the data of a specific graph, select the graph object and double click the Column Graph Tool icon from the Tools panel. Or, you can achieve the same by selecting the graph object, choosing “Jâ€� from the keyboard and then pressing the “Enterâ€� key.
• Right click a graph and you will find another quick way to access specific options for graph objects, including:
  • Type…
  • Data…
  • Design…
  • Column…
  • Marker…

  

• Instead of selecting graph sub-elements within isolation mode, use the Group Selection Tool to select them without isolating your view in the workspace.
• Click and drag a graph while holding the “Altâ€� key on the keyboard, to quickly duplicate it.
• Delete graph objects with “Backspaceâ€� or “Deleteâ€� from the keyboard.
• If you want to create Line graphs with curved lines apply “Round Corners…â€� effects (Effect → Illustrator Effects – Stylize → Round Corners…) to line sub-elements.
• If you want to create a Pie Graph with empty space in between pieces, apply an “Offset Path…â€� effect (Effect → Illustrator Effects – Path → Offset Path…) to the graph object, and a miracle happens!
• If you want to create a 3D graph, apply an “Extrude & Bevel…â€� effect (Effect → Illustrator Effects – 3D → Extrude & Bevel…) to the graph object. If you don’t want to transform the whole graph object, apply “Extrude & Bevel…â€� effects to specific sub-elements you want visualized in 3D.
• If you want to use “Offset Path…â€� effect together with “Extrude & Bevel…â€� on a single graph object or a single sub-element, make sure you place the offset effect below the Extrude & Bevel in the Appearance panel and you’ll be fine. Otherwise you’ll get the offset plane extruded also.
• Don’t forget to use the “Drop Shadow…â€� effect (Effect → Illustrator Effects – Stylize → Drop Shadow…) as a replacement to the poor shadow feature that’s served by default for some graph objects.

Draw your conclusion

I used Adobe Illustrator to create “The Graps²â€� and I can say it was an interesting experience. It wasn’t as delightful as I would have liked it to be but it sure was challenging.

After reading the above article you may feel discouraged in using Illustrator for graph design. What I would certainly recommend is at least trying Illustrator for creating graphs. It’s the only way of getting in touch with the work-flow and making a personal judgment of whether Adobe Illustrator is mature enough for your graph creation needs.

At the end of the day, keep in mind that with Adobe Illustrator you’re creating vector art. Vector art can be re-sized infinitely, without any consequences in terms of graphics quality, thus can be fitted in almost any type of medium.

Further reading

• Adobe Illustrator CS5 Help
• Create Beautiful 3D Graphs and Charts in Illustrator
• Illustrator How-To: No More Boring Graphs Ever
• Eye-Catching 3d Pie Graph
• 3D Graphs

(afb)

© Goce Mitevski for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: adobe, chart, create, Design, graph, illustrator, Tutorials, visualization

If you are a Wordpress developer there is no doubt you will have your own personal collection of code snippets, hacks or even short-codes that you can call upon in time of need. They are those little lifesavers that can solve complex problems with only a few lines code… they truly are indispensable no matter which host monster you use. In this design news round-up we have highlighted some recent articles and posts that will freshen-up your Wordpress toolbox.

Wordpress Snippets

The idea behind WordPress Snippets is simple; to provide small snippets of code, helping you to create a magic WordPress Theme. The original documentation of WordPress is excellent, but not as straight forward as you may want. Straight forward is the lead word for WP Snippets. No talk, just Snippets.
Wordpress Snippets

10 useful new WordPress hacks

This WP hack list, from CatsWhoCode, has a whole of lot fresh new snippets to help with Wordpress dev. Want to remove comments autolinks? Or, are you looking for a hack that will display a Twitter style “time ago� date? If so, you will find the answers in this post.
10 useful new WordPress hacks

10 Useful Wordpress Search Code Snippets

In this post will find 10 really useful code snippets that will help improve your WordPress Search functionality.
10 Useful Wordpress Search Code Snippets

By Paul Andrew (Speckyboyand speckyboy@twitter).

By Robert Bowen

We recently published a post was aimed at learning from the mistakes of others, and we turned to our friends and followers online and asked them to come clean about the biggest mistake they had made so far in their careers. You might have seen it, What is the Worst Design or Programming Mistake You’ve Ever Made?, was received quite well, and not only did we get some great responses initially from which to build the post, but we have got some more revealing replies from our readers. Now we are at it once again, trying to help out the community, one bad experience at a time, with a little more help from our friends, of course.

Just as before, it can be beneficial to learn from mistakes made by someone else who is kind enough to share their experiences with us, only their experience in this case, is more from a critiquing eye, than from their own path. This time out, we asked our social media masses to look outward for the post, rather than looking within, to find a mistake that they see others in the design world making time and again.

This way, we can help each other correct these errors, and without the critique being focused on any one individual. Rather a general observation that only we can know if it applies to us or not. If we are guilty of committing the design sin, now we know to look for it and fix it.

Related Posts

• The Web Design Community Offers Advice To Beginners – This is post that was from just a couple of weeks back where the community sent in some tips via another poll we did on Smashing to help teach some beginners in the design a thing or two.
• What is the Worst Design or Programming Mistake You’ve Ever Made? – Just in case you did not visit the link above, here it is again. Another opportunity to learn from others experiences.

So once again, we thank all of those who participated and inspired this post, as we all can benefit from a second set of eyes from time to time to help us improve our work. This can also assist us in compiling a checklist of most noticeable errors that have been picked up on, this way we can more effectively be on our toes as we work through our design processes. So without further ado, on we go, through this educational experience.

Losing Sight of the Mission

One of the first responses that our social media endeavor illicited from the crowd was one about the misguided who take on designing for others in the community in mind, rather than the end users. Granted, however anyone wants to fix their focus and refine their work, is completely their call and decision to make.

It is not necessarily anyone else’s place to determine where our design project’s path will take them. Though there are always considerations beyond our peers to take into the game with us, just as there are always egos that can inflate and work against the effectiveness of the site when we lose sight of who really matters in this design equation. The end user.

Remember that you must always remain focused and never lose sight of your goal. Image credit

It is always a powerfully intoxicating moment when our design work impresses our peers and garners their attention and praise. We all like to feel as though we are innovators, and so some of us set out to push the envelope to new places. Forgetting all the while that we have no proverbial trail of breadcrumbs to lead any lay person along so they can find their way as well. UI and UX should never be sacrificed for style or presentation.

Yes, we want to strive for originality, but we still need to find ways for our design to remain accessible to all those journeying through the design world. It is not just for the experienced and the worldly wizened that we are creating our design for, it is for everyone. Something that we should never allow ourselves to lose sight of.

• Designing for other designers instead of designing for lay users
• I see many designers focus on making websites look great, without focusing the UX on their primary conversion goal.
• not planning an interface to follow the user’s “train of thought”.
• Forgetting to consider the users.

Not Making Choices

There is a rule of thumb that a lot of writers take on as truth when seeking out a lasting story that will resonate among the masses, and to some extent, designers have this same rule of thumb even if they do not know it. That rule, is that in order for your work to remain effective, we have to make creative choices. These are not necessarily going to be easy to do, in fact, some choices that you face making during the creative process are going to be down right onerous.

But regardless of how difficult they may seem as we approach this crossroads of imagination, these decisions have to be made in order to keep your design as fresh and communicative as it can be. Our imagination is what is supposed to separate us, and make us stand out from the rest of the designers in our field, but only if we employ it.

Now we know that some design choices ultimately end up out of our hands when we are working with a client, no matter how vehemently we object, we may have to make some compromises for the sake of the project. And we sacrifice innovation for mass appeal to reach a more general audience.

So it would seem, some have let their imaginations take a vacation from their designs, and they just essentially end up copying either their own or someone else’s work to play it safe. Also bare in mind there will be feedback and suggestions that are sound, but that would begin to lessen the impactfulness of your piece overall if they were implemented. Stealing focus and effectiveness away from the desired intent the design was shaped towards. So you have to not only make choices, but you have to make the right ones.

• Implementing everyones feedback and creating a Frankenstein design.
• lack of assertiveness.
• boxing in everything on a website because the wireframe says so
• lack of creativity
• lack of innovation, boring designs.
• you can be a good tracer but a bad creative!

The Written Words Written Off

Another mistake that seemed to land in our virtual inbox upon polling the online masses, that so many of us fall victim to time and again are ones that stem from the written words in our designs. It seems that so many of us are focused on the style and overall look of the design, that the words which populate it tend to fall in the slight afterthought category.

Not that they are not planned for. Most designers are aware that their work is going to have to use some sort of wordplay within it, some painfully so. But so often, due to what appears as a lack of consideration for the written elements in our design, we do not double check them and let them slip by with errors in them.

Designers tend to dive right in, and forget to check their spelling and grammar before it becomes set in stone. Image credit

From the occasional grammatical goof-up to some truly spectacular spelling catastrophes, we designers have run the gamut on this field of mistakes. No matter what medium designers are working through, or what level of professionalism we claim to inhabit, elementary mistakes in grammar and spelling are happening nearly everyday.

The design world is full of horror stories about these very things, so much so, that it would be considered by many to rank as high as a pet peeve for many whom we share this space with. Though they may not be as flashy as the rest of the design project, the written words it contains, are every bit as important as the other elements that you have brought together to communicate your idea, so treat them as such.

• Designers often forget to check spelling and grammar
• Worst mistake you see designers do all the time? NOT READ THE COPY.
• what drives me nuts is spelling and grammar mistakes! Especially on educational websites!!!
• Top of the list… spelling mistakes.
• Not check their spelling!
• Grammatical errors in their mock ups.
• spell stationery as stationary.
• spelling errors
• Not proof read

Don’t Go There!

Sometimes the mistakes that we see from others in the design community are ones that could be chalked up to either ego, underestimation, or desperation. Regardless of the reasoning that gets them to this place, there are those among us who decide that they shall boldly go where only experienced and knowledgeable people have gone before.

When they themselves are knowingly not as skilled or adept in said areas as those who have previously gone there. As stated, for some it is a matter of believing that nothing is out of their reach. For others, it is not valuing the task and underselling its difficulty. And yet for a few, it is a question of necessity in the face of a lack of workable solutions. And rather than admit they cannot or should not proceed, they go.

From designers reaching beyond their selected medium of presentation (going from print to web, or from web to print) with only background in one form, to those who have decided on a whim that they are going to inject some clever coding into their work, this designer breach is out there. Not saying that there is anything wrong with trying to grow and expand one’s base of knowledge and expertise.

But until we have taken the time to grow into those new fields, then it is best to leave those forays to the professionals who have studied them. Especially when it comes to a design job for a client. Do not commit yourself to a job that you cannot effectively and professionally complete all aspects that you are being asked to take on. Knowing our limits is a sign of strength. Trying to work beyond them, is a weakness.

• Try to develop? :-)
• print designers thinking they can design for web when they have no idea how the site will be built or used
• claim to be ‘web designers’ when they’re developers!
• claim that they are developers even if they only do XHTML and CSS!

Going Overboard

One mistake that got called out a few times by our followers when we asked, was when designers go overboard. Essentially what we mean here, is that they have such a range of skills and design ninja abilities that they feel it is appropriate to display every bit of their knowledge in every one of their projects. Filling each project unnecessarily with virtually every element and piece of flash they can pull from their arsenal of know-how just because they can, and because they really, really want you to know that they can. So their designs come complete with everything including the proverbial kitchen sink.

There are times when we go overboard on our design, and we need the proverbial life preserver to restrain and reel us back in. Image credit

Somehow they are forgetting that being a designer is not just about flexing your so-called design muscles, it is about finding that design balance that will most appropriately serve the work itself. After all, that is what separates a designer from an armchair enthusiast. The ability to know when the design is completely balanced, and at an effectively harmonious place. Just because we can do something, does not mean we should.

Never lose sight of the ‘why’, as it was stated by one of our responders. Each element should serve a purpose and should serve the design. Before we add anything, we should know why we are doing it. If that answer is not about furthering the usefulness or effectiveness of the work, then let it go.

• Adding more than what is necessary.
• Filling the page with way too many typefaces
• over-optimizing images, find solutions to problems that never existed and cursing IE6 for every mistake they commit
• missing question “why?”
• ‘overdoing’ the design.
• using unnecessary elements
• Over decorate pages

Tripping Up On Typography

When it comes to designers we have talked about the way that many can often times essentially write off the written elements included in the design and not give them as much consideration as others they have added. This next set of issues possibly stems from this same place. They are concerning the typographical choices that are made and the lack of attention that is paid to them, both before and after the point of implementation according to the responses that we received. Handfuls of people called out the slovenly approach that many designers seem to opt for when it comes to the typed elements they work into the design.

Whether it just be a poor choice of typeface or a matter of the font size, there are many readability related issues that arise, proving cumbersome and aggravating to those in the online community. Not to mention those issues that stem from a lack of attention given to the spacing involved with the typography that is implemented in the design.

Once again when this happens, it makes the typed elements feel like a total afterthought. Detracting from the overall effectiveness of the design they are supposed to be feeding. Never let any added element have that feel. Take the same care and precision in with choosing and implementing your typography as you do with every other element that you put into your work. It deserves nothing less.

• Not kerning text. At all.
• inappropriate typography
• Using too-small font sizes
• Not giving enough attention to typography
• squashing or stretching type. Meh.
• Type crimes
• Also using automatic spacing for line space, kerning etc
• thinking that typographical choices don’t matter so much in jobs not strictly typographic
• Comic Sans

Color Miscalculation

Color usage is one of the basics of design theory, and apparently one that some of the design community could use a bit of a refresher course on. Well at least according to a couple of the responses our poll received on perceived mistakes made within the ranks of the design community. Color miscalculations are among some of the gravest of errors that a designer can make given the communicative power of the this ever important design element. And though there are numerous contributions from the online design community to help cover your back on this area of design, still so many commit these sins of the shades.

If we are not careful with our colors, then our message could be washed away. Lost in the sea of cyberspace. Image credit

Revisiting the communicative properties of the colors that we use once more, designers need to never let this important design element be considered with a less than thoughtful approach. Colors convey so much more about the design than some apparently give them credit for, and that is a mistake that is certainly better to learn from via someone else.

Not only could you be sending a message contrary to what you are intending because you are using inappropriate colors, but you might also be losing users due to what is perceived as uncomfortable color combinations. Either way, the colors that we use are important for many reasons, so be sure that you handle this issue with the care it requires.

• Using inappropriate colors for the design
• terrible colour combo’s that make my eyes bleed
• Using wrong colors

Belittling the Brief

Now there is always going to be an element of excitement in the air whenever we begin a new design project, or at least we would hope that there is, but we to control that excitement and not get ahead of ourselves. Or more importantly our clients.

There is a reason that designers put a lot of thought and effort into building a thorough and comprehensive design brief, and that is because we expect the same weight to be given to the brief by the client as we put in it. But still there are those in the design community who leap ahead immediately upon first contact with the client, never fully considering or even using the brief at all.

This belittling of the brief is also a reflection on the lack of respect that we as designers have for our clients. Or at least it can be perceived as such, rather than an indicator of enthusiasm. We need the client’s input to be able to craft a design that satisfies all of the desired criteria, and the only way to do that is to allow the client the proper amount of time to fill out the design brief, and for us to actually defer and refer to it. If you dare to take on the project without a comprehensive enough brief prepared and handed in, then you can expect quite a few drawing board revisitations before you can call the project complete.

• they start designing without a full creative brief
• misreading the brief

The IE Equation

Now there are fewer subjects in the design community that have remained as highly divisive as the Internet Exploration Equation. Now by equation, we are meaning that in the world of internet browsers there are those who feel that Internet Explorer should be completely removed from the equation and should not figure into our design processes at all, while there are also those on the flip side who disagree with this somewhat commonly made assertion. Whichever side of the fence you are one, there are mistakes to call out from the throngs of web design offerings that are available today according to our feedback.

Love it or hate, you have to admit that the IE equation is not as simple as everyone would like it to be. Image credit

There are those on the pro IE side who believe that there are a lot of designers who have forgotten what roads this one time groundbreaking browser paved. Just as there are those who believe that it does not matter necessarily what great things it has done in the past, because it has far outlived its usefulness and compatibility.

There are also those who believe that one of the worst errors designers can make is to start building their design for IE, while there are those who feel that is the soundest place to begin. No matter where you come down on the issue, given that there are still so many users without the option of another browser, perhaps it would kind to always bare this browser in mind.

• When they forget that IE could do things like gradient or rotate images long before Firefox even existed
• starting with IE design
• Worst mistake? Ignoring IE6, especially in India where IE6 is still 35% of all browsers. All the fluff never works!
• Big mistake to code for IE first and then try to patch it up for FF or Safari. Start with a proper browser (FF)

Falling off the Grid

Speaking of design theory, another strong theoretical design basis and passionately held belief is in the use of the grid system. There are those who are of the mind that working in the grid is an outdated way to design, one that they will not be constrained by. Which there are times when it is appropriate to break the grid, but that generally implies that you started with the grid initially, and then broke away from it to go in another direction all your own. Opting more for the path of chaos, over order.

But alas, the grid is the standard for a reason, and what is more often than not seen as great design, adheres to it. Breaking from the grid for innovative reasons, once again, is not a bad thing, but to consistently work outside of the grid system, or to not have any sense of the grid to begin with, is somewhat problematic. Given that the purpose of design tends to be the conveyance of a message, you need the design to be visually appealing to make the viewers as receptive to said message as possible. The grid offers a pleasing visual alignment that will help the message transfer with as little interference from the design as possible.

• using no grid at all in their designs
• Not use a grid

A Few More For the Road

Below are a handful of other responses that we received to our social media query, that were just too good to let forever fall into the editing aether. So we included them in the final hodgepodge of mistakes that others have made from which we can all take a note and a lesson or two. We hope that you enjoyed the post and found it helpful, or at least entertaining. And once again, we wanted to extend a gracious hand to thank all of those who helped participate and bring this post to life.

• That they don’t make proper use of groups and rasterize text in their PSD’s
• Use very compressed JPGs – ugh! And aplha GIFs on color background
• crazy twitter icons that are usually inconsistent w/ design. Just b/c it is cute and free does not good design make
• hate seeing people trying to ‘eyeball’ things rather than using align/transform tools.
• Lack of appropriate padding! Makes me gag
• wallowing in self importance
• No browser compatibility and no W3C validation.
• messy Photoshop files and not paying enough attention to the little things. Do it right the first time!
• Following the word of Apple
• failing to place cursor focus into the first text field. Simple, yet seems to get overlooked often.
• to simply place cursor focus into the first text field. Annoys users.
• Showing the client unfinished work!
• Listening to the client.
• Ignoring context, comic sans is a fun and easy to read font, good on sites for children

Minimalistic designs are trending in today’s world. The reason for that is designers are looking and aiming at creating designs that are lightweight and friendly to the viewers yet elegant in its own way. Who would have thought it would be trending with all the delicious technology that is being rolled out such as CSS3 and HTML5.

For those who are creating minimal yet modern designs, we discuss six different elements or aspects that deem a design minimalistic.

Grid Based

Grid based web design is major key role in minimalistic design and there are reasons for that. Grid systems already provide locations for certain bits and widths and lengths and the like for all sorts of applications and content that are being implemented. Think of it as the blueprint of a design, everything is well laid out for you; all you need to do is add to it and give it flavor.

The nice thing about grid systems is they allow you to play with creativity as well as strengthen your layouts and design eliminating busy and chaotic designs that generally arise. Therefore, following the grid system is a key to minimalist design.

Light Background Textures and Patterns

Another piece of the minimalist puzzle is to have lightweight background textures and patterns. Remember, minimalistic design is all about simplicity and lightweight elements, which means complex patterns and textures are not part of it.

The background textures or patterns should have a light shade or color transition from the foreground, making it a real background piece where the eyes can focus on the content or main container and not on the fancy or busy background.

Clear Typography

If the typography is not clear and fairly large for easy reading your design will not technically be lightweight. With that said, keep the typography clear and readable and in some cases hierarchical for a nice clean minimalistic design.

Minimize Icon Use

Let us face it, many designs either use icons way too much or do not use at all, leaving pages overcrowded or less understandable. Minimalistic design is all about being lightweight to an extent, and thus, minimizing icon use is key, which means that icons should be used where absolutely needed and eliminated or minimal where optional.

White space is Delicious

Minimalism in design is all about the white space. No matter how “minimal” you make your design, it is not minimalistic without proper white spacing. With that said, use white space liberally across your design and around many elements as white space keeps things separate and ultimately better and easier to work withand read.

Modern Technologies

Many minimalistic designs today use modern technologies to provide their approach or “uniqueness” to their designs. What this means is, they used jQuery effects and the likes, very minimally however, to achieve certain goals such as an auto scroll back to the top of the page or the likes.

Now you may be thinking that this is complicating the design and loses the whole point of minimalism however, minimalistic design is all about using technologies and elements minimally but not eliminating them as a sole factor completely.

With that said, I am not encouraging the extensive use of jQuery effects, CSS3 magic, and the likes, however, using the technologies wisely can set you apart from other minimalistic designs keeping it minimal while introducing new techniques and flavor to the concept.

Registration before Checkout

Many websites will not allow their new potential customers to add products to their basket before registering to the service or site. This is something you want to stay away from at any given point in time as your users or potential customers can go elsewhere to purchase similar products. With that said, leave the registration process for the checkout process where it is more suitable.

Showcase

Now that we have discussed elements and techniques that build on minimalistic design, it is best to see these techniques and methods in action to better grasp the idea of minimalism in design. Furthermore, we showcase four designs that we think are top in minimalistic implementation.

DBushell

This design really incorporates minimalism while keeping modern technologies scattered throughout the design. The color contrast between the white and grey really pulls minimalism to the front while keeping nice touches of color about.

Toy NY

Toy NY is another great example of minimalistic design along with a mix of great animation using flash technologies. It proves precisely that minimalistic design is not all about limiting technology use, but rather how you use them.

Ah-Studio

Ah studio is just an amazing design implementing neat typography with great images and effects while keeping the entire design simple and lightweight. In order to keep it as simple as possible, they integrated all their pages or sub pages within one and using Javascript technologies, they implemented the navigation to scroll through the content to get to each individual page. Another great example that shows off minimalistic design while utilizing modern technologies.

Checkland KindleySides

This design utilizes flash technology to bring its design together. However, it keeps the minimalistic concept in check. It contains nice illustrations and animation effects while browsing about while it alongside keeps a nice lightweight minimal design throughout. A true piece of art that shows off what they do best in simple terms.

Conclusion

To conclude, minimalistic design is all about creativity and the use of technologies wisely in a way where the elements in use have blended in well enough to not make the design busy but rather minimal and modern.

Think of minimalistic design as having a clear canvas in front of you with a paintbrush. You can paint so many things on this canvas but what you choose determines whether your artwork is a masterpiece or whether it is something to set aside in your pile of other paintings. My point is, the amount of color, shades, elements, lighting, and others that you implement into your painting gives your painting a characteristic and classifies under many categories, and minimalistic web design is exactly that.

If you take all the available technologies and “paint” it together in a certain way, your design can be characterized as minimalistic or feature filled, or highly illustrated. It is how you use the available resources is what determines where it classifies. Therefore, in minimalistic design, let your creativity flow, but not exceed the canvas, or in this case, the characteristics or key elements that make minimalistic design what it is.

Editor’s Note

This article is a rebuttal of “Does The Future Of The Internet Have Room For Web Designers?,” published in our “Opinion Column” section a couple of days ago. In that section, we give people in the Web design community a platform to present their opinions on issues of importance to them. Please note that the content in this series is not in any way influenced by the Smashing Magazine team. Please feel free to discuss the author’s opinion in the comments section below and with your friends and colleagues. We look forward to your feedback.

— Vitaly Friedman, editor-in-chief of Smashing Magazine

Last Thursday afternoon, I spent about 30 minutes doing a question-and-answer session over Skype with a Web design class in Colorado. I was given some example questions to think about before our session, which were all pretty standard. “Who are some of your clients?� “What do you like about your job?� “Who is your favorite designer?� I felt prepared. Halfway through the interview, a question surprised me. “So, are there any jobs in Web design?� When a teenager from a town with a population of 300 asks about job security, and the others sit up and pay attention, he’s not asking out of concern for my well being. He’s asking out of concern for his own future.

My response was, Yes, there absolutely are jobs in Web design. “Web design is a career that will take you far, if you’re willing to work hard for it.� And that’s the truth.

Two days later, I go onto Smashing Magazine and see Cameron Chapman’s article, “Does The Future Of The Internet Have Room For Web Designers?â€� and nearly choke on my cereal. After reading what amounts to an attack piece on my blog, and after corresponding with Smashing Magazine’s editors, I suggested that they let me write a counterpoint. They agreed.

We’re Not Web Designers

One of the biggest misconceptions about designers (and usually Web designers) is that we’re just Web designers — that the scope of our skills begins with Lorem ipsum and ends with HTML emails. This is ridiculous.

Everyone in this industry fills dozens of roles throughout a given day. On a call with a prospective client, we take the role of salesperson. After the contract is sorted, we become researchers, combing through the client’s outdated website, looking at analytics and identifying breakdowns and room for improvement. Soon after, we become content curators, wading through the piles of content in PDF format sent by the client, identifying what works and what doesn’t.

Then we’re architects, laying out content to get the most important messages across, while ensuring that everything in our layouts remains findable. We design the website itself. We manage client expectations and work through revisions. We write code. We introduce a content management system. We carefully insert and style content. We create and update the brand’s presence on Facebook, Twitter and YouTube. We help to create an editorial calendar to keep content fresh and accurate. We check in on the analytics and metrics to see how the website is performing.

Notice that “design� is mentioned only once in all of that work.

You have only to look at the topics covered on websites such as Freelance Switch and Smashing Magazine to see the range of roles we fill. We’re used to adapting and changing; and as the Web adapts and changes, Web designers follow suit. Just as video didn’t kill the radio star, Twitter won’t kill the original website.

Scrivs wrote a great article on Drawar highlighting some fallacies in the original article on Smashing Magazine. I think he sums up the “You’re just a Web designer� issue well:

You can’t get caught up in the term “Web designer,� because if you do then you are taking away the idea that a great designer can’t learn how to translate his skills to another platform. If we are designing applications that slurp content off the Internet to present to a user, then soon we will all be Internet designers. That removes the Web designer burden and changes things a bit.

Content Has Long Been The Undisputed King

Let’s make something very, very clear. Good Web designers know that their job is to present content in the best way possible. Period. Bad content on a beautiful website might hold a user’s interest for a few moments, but it won’t translate into success for the website… unless you run CSS Zen Garden.

In her article, Cameron gets it half right when she says:

As long as the design doesn’t give [the user] a headache or interfere with their ability to find what they want, they don’t really care how exactly it looks like or how exactly it is working.

I agree. The user is after content, not your gradient-laden design and CSS3 hover effects. Your job is to get them there as painlessly as possible. At the same time, great design can enhance content and take a website to the next level. Great design not only gives a website credibility, but it can lead to a better experience. Mediocre design and great content lose out every time to great design and great content. It just makes for a better overall experience, where content and design both play a role.

Kristina Halvorson, habitual content supporter, giving one of her famous content workshops. (Photo: Warren Parsons)Image credit

You Can Always Go Home

Cameron makes the argument that feeds are taking over the Web and that, eventually, companies will just use them to communicate with customers.

The idea to simply rely on facebook.com/companyname instead of running an independent website where content originates and filters out simply won’t take with companies. Companies will always need a “home base� for their content. The change will be in the media through which healthy content filters out (such as Facebook, Twitter and RSS).

Scrivs makes this point in his Drawar article:

In essence, what is happening is that sites have to realize that their content is going to be accessed a number of different ways, and if they don’t start to take control of the experience then someone else will. RSS didn’t kill website traffic or revenues because there are some things you simply can’t experience through an RSS feed Just because how we consume content is starting to change doesn’t mean that design itself is being marginalized.

Content isn’t just about press releases and text either. Ford would never give up ford.com for content in a variety of feeds and aggregators. Ford.com lets you build a car: where’s the feed or application for that? Ford’s entire business depends on the functionality of its website. Its Web team has worked hard to create an inviting user experience, unique to the brand’s goals and issues. No company wanting to preserve its brand or corporate identity would give up its main channel of communication and branding for random feeds sprinkled across the Web.

In the same vein, no company would suddenly give up its carefully crafted creative and regress to a template. Templates have been around for years, and no company with any kind of budget would use a $49 packaged solution from Monster Template if it can afford to pay someone to address its particular needs and mold a website to its content. A template doesn’t take needs or goals into account when content is pasted in. A good designer makes choices that a $49 template won’t make for you.

Cameron talks about how businesses will gravitate to standard templates and away from hiring designers:

Companies won’t see the point in hiring someone to create an entirely bespoke website when they can just use a template and then feed all their content to Google and Facebook and Twitter.

Web designers don’t just add borders to buttons and colors to headlines. Web design is as much about problem-solving as anything else. And part of the puzzle is figuring out how best to deliver and promote content. Not everyone has the same issues.

JulesLt lays out this argument in the comments:

[…] But I don’t think any business that would previously have actually employed a designer to create their web presence, brand, will shift over to a standard template. For most businesses, Facebook, YouTube or Twitter may be alternative channels to reach their customers, but they don’t want their brand subsumed into someone else’s. […] The right way to do this is to build a re-usable core, but understand the differences between platforms — and make sure your clients understand any trade-offs.

Nick adds to this argument about templates:

Templates have no business in a world where personalization trumps everything else. Prospective clients are going to a website not just for content, but for the experience that the brand is willing to offer. Not to mention that if you’re in the business of selling yourself, a high profile custom website speaks volumes about your dedication to your chosen niche market.

Andrei Gonzales eloquently sums up the difference between Web design and decoration:

Design isn’t about eye-candy. It’s about problem-solving. If your Web “design� isn’t solving quantifiable issues, then it isn’t design: it’s “decoration.�

And moreover, we’re already in Cameron’s bleak future scenario where web designers should be a thing of the past. Companies today can buy a template and feed their content to whoever they so please. And yet, they aren’t. When the designer created that template eight months ago, he didn’t know that their business was having trouble marketing to middle-aged women. That designer didn’t know they’re a family-owned business in a market where that kind of thing leads to improved revenue and sales. How could he? He’s Andrei’s decorator, solving the issues between lorem upsum and dolor sit.

In Conclusion

Web design has changed drastically during its brief existence. The changes in the medium year after year are actually quite amazing. The industry looks vastly different than it did in 2005, and we’ve changed with it. Change is inevitable, and it is the reason you visit websites like this one: to stay current. That hunger is the key to ensuring the survival of our industry.

The bottom line? Web design is a secure and growing job market. Two sources that are something of authorities on jobs and Web design agree on this point. The United States Department of Labor predicts that positions for graphic designers will increase 13% from 2008 to 2018, with over 36,000 new jobs being added. It also states that “individuals with Web site design […] will have the best opportunities.�

And in the 2008 A List Apart Survey For People Who Make Websites, 93.5% of respondents said they were at least fairly confident about their job security.

I’ll sleep well tonight knowing that the industry I love isn’t going the way of the dodo… and that I didn’t lie to a class full of eager young designers in Colorado.

(al)
Tweet

© Michael Aleo for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: