BlogmyQuery – BMQ

Many designers don’t use graphical Open Source Software. This is not a coincidence: usually they don’t understand it, don’t like or even despise it. Since using the free software requires more time and technical knowledge — it seems easier to pay for a working package from a well-known vendor.

This approach is common, but it could be useful to take a peek at another one. Today’s OSS provides so many possibilities, that it becomes relatively easy to create almost anything that’s possible to make with the proprietary software, especially in the web design areas. In my opinion, it happens to be so good, that it may be worth taking a leap of faith.

The WHY

Usually, when it comes to graphical design, few people agree that open source software is capable of producing the same level of quality work that the proprietary software does. My intention in this article is to question this stereotype and to present a strong case for using OSS for graphical web design, without going into a discussion over which one is better to use. The bottom line should sound like this: it’s possible, and isn’t necessarily more difficult to create any type of web graphic or design using only OSS.

Ubuntu Tux Floats to work by Daniel J. Porter

In spite of all the mentioned appeal, most graphical designers prefer to keep using the proprietary software, and for a good reason — it provides in many cases easier, more stable and more intuitive interfaces that save professional designers’ time. In the professional web design environments where a client waits for the results, this is very critical. Also, it takes time to learn something new, so many question why spend it… But for the majority of website creators, and for those who just starting to take their first steps in the web industry and aren’t sure whether they really need to spend money on graphical software, open source software can offer all the necessary tools, educational opportunities needed to enrich and shape your creative thinking and technical skills.

A quick warning: using and learning gOSS usually requires more time than learning proprietary software. How much more? It depends. But if you have some spare time, and are ready to have fun with exploring another mysterious world of software, then you will only benefit from it. However, trying to go for broke right off the bat, expecting to be exactly at the same level you are in other more familiar software and setting somewhat unreasonable or out of reach goals, might not be the best attitude to start with. After all, most things in life become more rewarding after we have taken the time to learn more about them, and our grip on them improves. Same with OSS.

Where gOSS is extremely useful? — In web design agencies it’s common that the web designs and layouts are composed by a graphics expert. Then these designs are passed to the developers, which can decide what and how to slice in order to optimize the graphics better for the general consistency of the web site. For simple operations like these a natural choice would be using an OSS program such as GIMP and not wasting the money on proprietary software.

If you’re new to web design, you’ll quickly learn that the proprietary graphical software is very expensive. So if you’re unsure which one to choose, my advice to you is to first try the open source software. One big plus of using OSS, is that you can get it all for no cost. Another advantage becomes clearer with some of the more popular gOSS programs: they are developed quickly and newer updates include more and more interesting features. The beauty of this quick development is that anyone from anywhere in the world can extend or improve any program. So if someone wants a new feature in their program, every other user can have it as well.

To inspire you, and to let you taste what is possible to create with these free software tools — please have a look at this Sintel open movie, which was entirely created using graphical OSS. I worked in a relatively large animation studio, which couldn’t produce during one year a fraction of what this tiny and talented group produced with gOSS in less than a year. This important lesson in life taught me the following: it’s not the type of software which is important, but the kind of professionalism, passion and will that are keys to succeeding.

To start, let’s separate four common graphical types. Under each type, you’ll see a name of the program that handles it, and it’s brief features list.

Inkscape screenshot by Val Kotlarov

• Vector graphics — great for creating icons, illustrations, charts, web decorations, and other usually quick and impressive vector art.
  Inkscape — Spiro curves, Converting rasters to vectors, Gradients, Basic vector shapes and Boolean operations.
• Photos — probably the most popular graphics type. Software helps you to batch-process photos, for example, when you need to cut down the image size and in the same time to enhance the quality.
  GIMP — Layers, Brushes, Selection tools, Masks, Image and Canvas transformations, Filters etc. A lot of free plugins are available too, such as G’MIC. A lot of file types are supported, so converting to a transparent PNG or creating sprites can be real fun.
• Rendered 3D graphics — probably the most time-consuming to create, but also very impressive when well done.
  Blender 3D — Basic shapes: cubes, cylinders etc., Lights, Textures, Shaders. Different rendering engines.
• Drawings — for any artist, the natural way to express himself or herself.
  MyPaint — Provides the ability for a free hand drawing when used with a digital tablet. It has a very impressive set of prebuilt and customizable brushes, Layers, different color pickers and very intuitive keyboard and mouse shortcuts.

© copyright Blender Foundation | www.sintel.org

Sure, there are many other gOSS programs and tools that can be used for the various types of graphics. However, the programs suggested offer a specialized and a narrower set of tools to handle the graphic type they were associated with on the list. So for example, if one wants to edit a photo, best practices suggest using GIMP instead of something else, because it’s built exactly for that. Similarly, if you want to create a vector icon, although GIMP allows doing it with paths, converting them to selection areas and filling with gradients, it’s much easier and more fun to use Inkscape, and the rasterized result will have better quality in addition to allowing easier changes to it later.

Other related programs which can be interesting are:

• Krita — allows sketching and painting.
• Xara Xtreme — handles vector graphics manipulation.
• Luminance HDR — for High Dynamic Range images processing and tone mapping.
• exiv2 — a handy utility if you want to modify images’ metadata.

The HOW

Before you start, you need to define your need then use a suitable program. Often you’ll need more than one program. For example, after creating and saving a vector graphics image, you might want to correct the colors or try to optimize it for web. GIMP always comes in handy here.

Generally speaking, using gOSS might initially be a bit confusing. Usually, these programs are initiated by creative developers, for whom the programming languages feel just like a mother tongue. Since they develop it usually for themselves, there might be some lack of good documentation with some programs. Though a quick trip to Google usually satisfies the any beginner’s need: be it the need for good tutorials or documentation, there is plenty online from those who came before you and were willing to contribute.

Exploring the program’s interface also produces greater understanding of available functionality. Many plugins can be found online, if some functionality is missing. For example, GIMP plugin registry has a lot of great plugins. Save for web for example, helps to optimize and preview the image before saving. Liquid rescale is another interesting example – it allows resizing an image without shrinking/stretching of the objects.

Several tips for using gOSS.

• Like with any graphic work you are doing no matter the software, get in the habit saving your work more often. Unfortunately, some gOSS is not always that stable.
• You may want to check frequently for the new software updates, and download them. Security updates are of course of the main concern, and they should be updated. Ubuntu linux and other distributions, automatically check for these updates, and suggest you install them.
• Keep the stable release for your work. You can additionally download and install the development release, with newer features and bug fixes, but they will tend to lack the stability. So they should be used for your main work only if some added feature is indeed indispensable.
• Participate in online forums to get extra help, or help others. Explaining to someone how to make something can often result in discovering new features or techniques, and lead to a better understanding of the work. Writing a tutorial has a similar effect.
• The real power of gOSS is, of course, in the open source code. If you feel like coding, you can take the program, and change it the way you like. You can make it really shine, to look and behave exactly as you wish.

What to use, how and when?

GIMP is comparable to Photoshop. You can achieve virtually the same results with it. Usually any tutorial for Photoshop from the web can be done with the GIMP. The missing functionality can be substituted with a few simple steps. For example, in Photoshop, you can apply a shadow effect to a layer. In GIMP, you will need to apply a shadow filter, which will create a separate layer with the shadow below the desired one.

Here is a very handy batch processing plugin for GIMP, David’s Batch Processor. It allows selecting a bunch of images, resizing them, enhancing, changing their format and more with a few clicks.

GIMP can be easily transformed to Gimp Paint Studio (GPS) — additional features that bring in rich sets of brushes and makes GIMP easier to use.

Use Inkscape when you want to create logos, web icons, cartoon-like illustrations which are so commonly used in the web design. It’s possible to create those beautiful, colorful and shiny posters, this blog has many tutorials for Inkscape. Inkscape has the Spiro curves — simpler and more intuitive curves than Bezier. It has plenty of filters, modifiers, layers, paths and so much more. Sketch easily practically any shape. Save vector files as PNGs, in varying dimensions. The interface is very easy, and for the beginner as always it’s advised to explore the menu, as well as going through the documentation.

Since Blender belongs to other graphical programs category, the UI is less intuitive and requires more time to learn. This program is great if you want to bring some realism to your website. Things like adding a realistic shadow to a photo can be done quickly. It’s a really good choice if your drawing skills aren’t good enough and you want to draw realistic objects in space. Another advantage is that you can crate and render an amazing red car from any angle, change the environment, lights etc. Of course drawing these from scratch would require more time and skills. So what’s possible to create with Blender? You can find fine examples here, or here, or here.

The WOW

Shark Ride by Kjartan Tysdal

Finally, I decided to interview some great artists who use OSS. I found their email addresses, contacted them, and they kindly agreed to answer a few questions about using OSS.

A work in progress from Andrew Price

David Revoy

David is better known as an art director from the Sintel open movie. He uses programs like MyPaint, GIMP/GPS, Inkscape and many others. More info can be found on his website.

Electron Donor by David Revoy

You have many beautiful and interesting works on your website. Which one is your favorite?

Thanks a lot. It’s hard for me to define a ‘favorite’. That’s probably because I still see something to fix in each illustration I did. When I update my portfolio, I always let my wife decide which artwork she would choose for inclusion. My real favorite illustration — is certainly the idea I have in mind just before trying to lay it down with my tools. I still try to get closer and closer to this original idea.

Can you describe some difficulty that you encountered while using Open Source software?

It was a real challenge, and only 2 years ago for me. The first set of difficulties was purely technical : installing and choosing a distribution, makes almost all the hardware working, configure the tablet ; all of this is difficult and I had to spend time and patience to understand how it worked. The second set of difficulties is more related to my artworks. . No other users at this moment did professionals digital painting with graphical OSS. I had almost to invent a way to do it , test many softwares and try to find a professional workflow. I had to find alternative to a lot of things, and change totally my way to think an artwork. Thanks to Mypaint, Alchemy and the fork Gimp-painter , I discovered great tools.

2 years after, I can see things grew so fast that 95% of the difficulties I encountered totally disappeared : Distribution, tablet and most of the OSS I use are really easy to install, and documentation and tutorials now exist.

How do you contribute to the Open Source community?

I contribute as a user can do : I report bugs, I communicate with developers to give them feedback on new features, I use them and I maintain a blog to share my resources/tips/tutorials. I’m mostly around Mypaint, Krita, Ubuntu/Mint and Blender.

As an active user in the community, can you share some of your thoughts about the future of the graphical OSS?

Graphical OSS will grow ‘slowly by surely’ and become stronger tools, this is sure. I already see many studio adopting FLOSS, or schools learning to student with them and I guess it will grow too in the future. So, I’m confident about a very bright future for graphical OSS.

Andrew Price

For many, Andrew is better known as Blender Guru. He has created/creates many great works, you can find more info about him, and a lot of smashing Blender tutorials on his Blender 3D tutorials website.

Dream House by Andrew Price

Why did you choose Blender? Was it a hard decision to go the ‘Open Source’ way?

Nope! I started way back when I was 15, and had the choice between $3000+ commercial software or the open source Blender. It was a no brainer for me :)

How would you compare Blender to a proprietary 3D software in terms of ability to create great 3D scenes?

One of the great things about blender is that it’s a complete 3d suite. It allows you to create an entire animation or artwork from start to finish without ever leaving blender. Once you’ve used the built-in compositor you won’t ever want to leave ;)

However, Blender is not without it’s shortfalls. The internal render engine is severely lacking when compared with commercial render engines. In my opinion it’s the one thing that is stopping Blender from being production ready, so I hope it’s improved shortly.

Do you think it would be difficult for someone who’s not familiar with Blender to learn to use it?

Of course! But that comes with the territory. All 3d software has a very steep learning curve, it’s up to the artist to persevere through the roadblocks until they become good at it. The hardest part for most beginners is getting used to working in three dimensions. Once you’ve got that down pat, everything else usually falls into place.

Leaving the financial side, would you recommend Blender, or would you suggest buying a 3D editing program? Why?

In all honesty, if you want to get employed in the 3d industry then you need to be using 3ds Max. It’s just a simple fact. It’s the industry standard application and most employers will expect you to know how to use it. However having said that, Blender is the perfect application for beginners to get their feet wet. They can learn the fundamentals in a supportive community, do almost everything with it that commercial applications can and with no costs. It’s a seriously powerful program, but it may take a while before the industry realizes that.

Sebastian Zakrzewski

I found Sebastian’s portfolio on DeviantArt. He uses GIMP / GPS among the other tools. Take a look at his amazing works.



Edgewalk by Sebastian Zakrzewski

Why do you prefer using the open source programs? Which benefits do they give you?

Open source is free and legit. It’s also solid alternative to commercial programs — it offers same basic functionality and performance.
It’s also about flexibility — commercial projects usually stick to one design and approach to work,
while community behind open source doesn’t hesitate to experiment and often comes up with great ideas on how things can be done in different way.

Do you encounter situations when you would prefer using similar proprietary software for your art works instead?

Yes and no: I miss few handy tools like freeform transformation from Photoshop but I can live without them. On the other hand there’s no good alternative in open source for ArtRage or Google Sketchup I sometimes use, but they’re addition to software I’m using on regular basis. If need arises and I won’t be able to find anything suitable in open source, I won’t hesitate using proprietary software.

Would you recommend others use open source software?

Yes, it’s definitely worth trying — it may suit your needs and thanks to popularity it’s constantly gaining I think more and more solid programs will show up.

Useful links

Here’s a bunch of download links for free graphical software to try out. The first four programs were described in this article, and can be downloaded straight away, others can be easily added on Linux machines.

• GIMP!
• Inkscape!
• Blender 2.5!
• MyPaint!
• VirtualBox and appliances
• Chrome / Firefox: the ultimate WYS part of WYSIWIG.
• Netbeans / Eclipse: the coding part (html,php etc).
• Firebug
• Firepicker
• Fspot / Shotwell photo manager
• FontForge
• Luminance HDR
• UFRaw
• Hugin – panorama photo stitcher
• OpenOffice Presentation in particular.
• mtPaint – pixel art

(rb)

Excellent typography looks attractive while at the same time remains completely functional. The beauty of typography lies in that it vividly communicates with the visitors and keeps them informed about what they have come to the website for. Although the graphics play a key role in any web design, properly implementing the typography can create effective results especially when it is not underestimated.

Together with vividly created images and graphics, typography can take a web design to the highest level of creativity and attractiveness. It is not necessary that typography in web design always match with the design. Sometimes, it can be loud; sometimes, it can be bold dominating the overall design.

This round up features big, loud and dominating typography examples that give websites an elegantly unique style and sense of precision. Enjoy!

BOLD Typography in Web Design

Denis Echandler
The website makes use of large and bold typography that goes well with the overall design. All the words are written in caps for more emphasis.

Ipolecat
Ipolecat employed large and bold typefaces not only for the main tagline but also to describe their key selling points and draw the reader’s eye.

Takeshape.it
Interesting typography is used with creative imagination that looks simply stunning.

Hull Digital Live
Excellent use of typography to bring this ordinary web design to life. See how the designer has emphasized the essential information with clear fonts.

Illusionist
The main focus is on the typography although there is an interesting graphic added to help support and carry the design, but still the typography stands out.

We Shoot Bottle
A visually compelling web design having the typography set as the main attraction of the site.

Fixie
A stunning web design with typography that is so well suited for the tone and feel of the design, that it looks like a perfect match.

Cupcake Creative Studio
What you can expect if you hire them is clearly represented in their web design that looks beautiful because of the effective typography that is employed here.

SUPERCHARGED
The typography employed in this web design truly charges the overall site giving it a very unique look.

Gerren Lamson
This website uses a very elegant typeface to give the overall design an extraordinary and visually appealing look.

Git Tower
Here, typography is used to breath life into the web design and to add a feeling of excitement.

Fore Father Group
A vintage look is created solely with the help of appropriate typography usage. A simple black color is used against a soft background to help complete the look.

Efingo
In this website, the first thing that gets noticed is the typeface which demonstrates the power of effectively employing typography.

Marie Catribs
Casual yet powerful is what comes to mind when taking in the typography used in this website design.

Carsonified
The site uses the bold typography here to grab the attention of its readers without any graphical aid. The typography used here clearly states the philosophy of this website.

Stephen Caver
Black bold typefaces are used here to give the site a strong visual impact.

Miiks
Simple and wonderfully effective, this is what defines the typography used in this website.

Visual Republic
Visual Republic communicates their core business values through their fantastic font choices.

Rothco
The typography is quite creatively employed in this web design, visually drawing in their visitors.

Kyle Steed
Free style typeface demonstrating the expertise of Kyle Steed. The typography looks hand drawn to add a personal touch to the web design.

Pob Chart Lab
Although the use of typography is somewhat sparse, it is still undoubtedly attention grabbing and compliments the design.

Jonbrousseau
This typography is comparatively ambiguous with its background although the font size is relatively large.

Charles Elena
Big, interactive and engaging font style used for the main tagline here, that not only grabs attention but serves as eye candy in the design.

Me In Motion
No more ambiguity, only simple and clear typography. All the letters are in caps to capture the user’s attention.

Rich Brown
Brown and white bold typefaces are used alternately to create a visually compelling impact.

Barney Funk
A relatively large font size coupled with the red color is enough to catch the attention of onlookers. Further details are provided in more medium sized fonts.

Gummisig
Again, the main content is displayed with relatively large and bold typeface to catch visitors’ attention while the rest of details appear in relatively small sized fonts indicating their more secondary role.

Ryan Keiserw
Here the extensive use of typography somewhat makes it difficult for the visitor to focus on one thing; however the overall result is quite satisfactory.

Finch
Here, the designer has used their creative imagination to make the web design stand out against the sea of similar websites.

Clectricpulp
Very few details are provided here, therefore, font selection is made quite precisely to communicate all the essential points effectively.

Notorious Design
Here the creative use of fonts helps with building an interest in the web design and also embodies the creativity of the web designer.

Visual Boxsite
This design exemplifies the adage that simplicity is what works best.

Brunet-Garcia
This web design employs a very sophisticated typeface that adds a simple beauty to the web design.

Fajnechlopaki
Vibrant colors and bold fonts are the main attraction for this web design.

Objectified
A very professional look is created with the sensible use of sharp typography to send the subtly spoken message of professionalism.

Polargold
Again, another example of simple beauty. In this web design typography fulfills the role of graphical elements.

Elysiumburns
Lots of different font sizes and different types of fonts are used to distinguish different areas of focus throughout this design.

Bills on Your Table
Here typography is very cleverly used with amazing graphics that gives this web design something of a face lift.

Gapmedics
Same typeface used in different colors for the purpose of differentiation. Visual elements are also used to give further details.

Merge
Two completely different fonts are merged very creatively to create a distinction within the design here.

Four 24
Two different colors are used for the amazingly soft and beautiful typography giving the design a sense of distinction.

I am Always Hungry
Black colored typography against the bright yellow background really makes this design stand out and boldly call out to readers.

Designfabrika
Vibrant typography makes this design look attractive and pleasing to the eyes.

JLern Design
The typography is presented from a totally different, unique perspective along with flash elements to create a nice, compact and typography loaded web design.

Hungry Man
A little bit of a retro style and look is created to give the website a really distinctive design.

Francesco Mugnai
Soothing web design with pleasing typography that not only catches visitors’ attention but adds beauty to the design as well.

Process Type Foundry — they make type
Loads of different fonts and varying sizes do work for grabbing the attention, but here they also make it difficult to decide where to focus first.

(rb)

The differences between designers and developers often erupt in pointed jabs on the Web or at conferences. Jokes or not, the jabs create friction whose consequences are real.

I am a designer, and by no elaborate means of job-title-rejigging do I consider myself a developer, but I see the cruelty of designer and developer egos going both ways. So, what happens if someone throws a pair into a sack to hash it out? How do we emerge? Our projects, careers and maturing industry rely on our ability to learn to work together instead of against each other, and looking at what we have in common is one way to begin addressing interdisciplinary cat fights.

Shared Priorities

A belief that design and development have competing interests is an obstacle to successful collaboration. There are, of course, developers who design and designers who code (I’ll return to this point later on), but the tension referred to here is between the designer and developer who believe that their respective discipline is more important. Conquering this belief is crucial to avoiding a clogged workflow, low team morale and, ultimately, limited project success.

Design is not completely an aesthetic concern, nor is development an entirely technical one; designers must consider how functionality affects form, and developers must be creative in building out functionality. Similarly, if we look closely at design and development, we find that principles of good design are often similar in good development. Focusing on these overarching ideas reveals a large pool of reciprocal interests.

Harmony of Parts

Paul Rand, a designer’s designer, creator of the IBM, ABC and UPS logos, wrote in A Designer’s Art:

Copy, art, and typography should be seen as a living entity; each element integrally related, in harmony with the whole, and essential to the execution of an idea.

He wrote this in 1985. Today, the principles remain mostly the same, but one component is sorely missing from Rand’s statement: technology. Copy, art, typography — and technology — are the bones of a project, where design and development are the joints and skin that connect and hold together the parts. When all of these elements fit together well, you essentially have design and development working together as the support structure for the user experience and overarching concept, the so-called “living entity.â€�

While far too simplistic a metaphor to cast a strong light on the process (building a website in fact looks much messier), Harmony of Parts does illustrate how design and development should ultimately work towards the same goal.

It is also worth mentioning that development, like design, encourages the harmony of parts in programming concepts like polymorphism and encapsulation. These ideas quite broadly mean that pieces of functionality should work well when placed inside or beside other pieces, another way of saying, “each element integrally related, in harmony with the whole.�

Teachability

Both design and programming are teachable, and where there are talented individuals there is also hard work, discipline, teachers, mentors, standards, taste, ruthless editing and constructive criticism, all of which are cultivated. There is bad work and breathtaking work. There is the scrap heap, the slush pile, the useless code: all evidence of learning.

This commonality between disciplines is important because it presents an opportunity: designers can learn about development, and developers can learn about design. The democratization of resources in this information age (which some would argue we’ve already passed) means that we have little excuse not to obtain, or teach, at least a basic understanding of each other’s crafts. Not doing so will work to the detriment of the team. And when there are gaps in knowledge, rather than reprimanding, we should encourage an open dialogue to protect our most valuable learning tool: the ability to ask questions.

Elegance and Efficiency

Chris Coyier, self-described Web craftsman, blogger, author and speaker, writes in “What Beautiful HTML Code Looks Like�:

Code? Beautiful? Sure. After all, code is poetry. This is just HTML, so it can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes of its creator.

What is elegance? It could mean restrained beauty and grace, as in art and fashion. But in design as well as math and science, something elegant typically embodies simplicity and effectiveness, sometimes solving two or more problems at once or by an unexpected insight. Elegance, then, refers to underlying content or an underlying process.

Design may rely on aesthetics for its medium, and development may rely on code, but both draw on theories of efficiency (perhaps a synonym for elegance) to create effective output: elegant code is efficient code, and elegant design is efficient design. This means that design and development share some core values of process.

Shipping

In his article “Design Is Not the Goal,� Francisco Inchauste writes:

The end product (website or application) should always be the focus.

Inchauste goes on to say that too often, process insists on polishing irrelevant deliverables; for example, over-updating wireframes instead of moving on to the build and user testing. The true deliverable is the final product that we launch and that people interact with. Jeff Gothelf goes more in depth in his article “Lean UX and getting out of the deliverables business.�

In a healthy team environment, we designers, developers, copywriters, user experience designers and project managers are all shippers. Bigger agencies tend to lump design and development teams into the Production Department, for better or worse, and this is telling. It demonstrates that both “creative� and “technical� professionals share a predominant interest: they must ship.

Correcting The Workflow

It may be that designers and developers are perfectly capable of collaborating effectively, and that management and process are the biggest hurdles or frustrations within a team.

Good Ideas Intersect

The logistics of securing work often mean that the earlier a great idea is identified for the project, the happier and more secure the client will be, resulting in a better working environment for everyone. However, it also means that stakeholders will come together early in the process to come up with ideas. This can occur to the preclusion of the very people who will produce the final work, especially in hierarchical agencies. This undermines the designer or developer’s ownership and discourages self-direction and personal investment in the project.

One solution to this problem is to ensure that great ideas are universally respected, wherever their origin. Michael Lebowitz of Big Spaceship famously preaches an agile workflow, saying in a New York Times interview:

We also invite people from all of our disciplines into all of our brainstorms. Great ideas come from everywhere.

A policy like this opens communication channels in a team framework and dispels departmental inequalities. When something goes wrong, finger-pointing is no longer an option if everyone’s had an opportunity to provide input, and collaborators are forced to learn from mistakes. This is not to say that responsibility is evenly distributed, but allowing teammates and workspaces to intersect in unexpected ways will allow great ideas to surface.

Waterfall vs. Agile Thinking

In waterfall-structured processes, where development is held up by unfinished designs, developers are the ones who end up staying late to finish the project on time. Not only is this unfair to developers, it is complicated, because pointing the finger at designers for taking too long is too easy an answer. Responses to a design can be so subjective and cryptic (“I don’t know why I don’t like purple, I just don’tâ€�); true insights require time to unearth and can result in unpredictable delays in the process.

Hold-ups are best avoided not by keeping design and development separate but by bringing them closer together via an iterative workflow. This agile methodology distributes responsibility and assigns value to each team member. Furthermore, departments are not tied to an inflexible plan. All of these attributes of agile thinking help to alleviate designer-developer tension.

Giving Credit

In the fable “The Lion, the Bear and the Fox,� a lion and bear fight over prey until they can fight no more and fall over exhausted. Meanwhile, a fox who has been watching the fight sneaks up and steals away with the prize. The moral is this:

Saepe alter alterius fruitur labribus.
From the labors of others, it is often another who profits.

Giving credit where credit is due and sharing the rewards is better, but unfortunately, in a fast-paced digital environment, whoever is left sitting at the table is often the one who gets the final praise. It is up to that last team member (the project or account manager, art director or tech lead) to pass feedback onto the rest of the team in a meaningful context. The cost is minimal (however long it takes to shoot an email or walk to someone’s desk), but the shared joy (or misery) will bond design and development teams because they will see the end product as the force that unites them.

Work Habits: Playing Nice

Sometimes playing nice is as simple as extending a courteous email; other times it is as complex as learning a new skill set. There are many concrete ways, big and small, for designers and developers to become more compatible colleagues. Let’s first look at efforts that can be shared, then at tasks more specific to designers and to developers.

Both Designers and Developers

Despite being in separate disciplines, our greatest commonality is that we are human. So, many of these shared tasks demonstrate how to play nice with anyone:

• Keep an eye on the big picture.
  Pre-established goals that are developed by the whole team should inform decisions (and compromises) throughout the process.
• Cast a wide net for inspiration.
  Look to a variety of sources for a well-rounded understanding of the topic. Discriminate material by quality, not subject matter.
• Check in early and often.
  Avoid making too many decisions in isolation.
• Be nice.
  If you must criticize, make it constructive. Being kind often reaches far beyond office walls.
• Teach each other.
  In their book Rework, Jason Fried and David Heinemeier Hansson preach transparency between companies and their customers: “Letting people behind the curtain changes your relationship with them. They’ll feel a bond with you and see you as human beings instead of a faceless company. They’ll see the sweat and effort that goes into what you sell. They’ll develop a deeper level of understanding and appreciation for what you do.â€� This works for designers and developers, too. Revealing the inner process means teaching, and teaching is a way to invest in a relationship and build mutual respect.

Designers

There are innumerable great tips to help designers become better colleagues. Here are some of my favorites:

• Explain the design rationale.
  Design isn’t magic, and making an effort to analyze and share design decisions will create a conversation and demonstrate to colleagues that their insights are valued.
• Practice PSD etiquette.
  Adopt the Photoshop Etiquette Manifesto for Web Designers.
• Design thoroughly.
  Think through the interactivity of the product, which includes designing the on, off and current states, designing error messages for forms, designing 404 pages, etc. This will save your teammates valuable time.
• Be considerate.
  Avoid making others wait on you. Be proactive and organized, and ask for feedback often.
• Enlist a developer.
  If the technical implications of the project are unclear, grab a developer to go through it with you. They’ll likely appreciate being involved.
• Learn about development.
  Knowing even a little about code will make you a better designer.

Developers

Here are a few ways for developers to improve their work habits:

• Make yourself available.
  Being a part of the process from concept to realization will translate into a sense of ownership of the project. Ask colleagues what they’re working on. Make your expertise available as a resource.
• Simplify the explanation.
  If you can help team members from all levels and backgrounds understand high-level concepts and how they affect a project, you will become more valuable.
• Develop the design details.
  Much of a designer’s craft lies in the details; if they are forgotten or changed, the designer’s time and effort will be wasted.
• Be honest about what can’t be done and why.
  Big ideas often struggle against time and budget constraints; that’s nothing new. Knowing the development constraints ahead of time allows the team to create more appropriate solutions.
• Learn about design.
  Theories, rules and standards play important roles in aesthetic and usability decisions. A little knowledge of these concepts will help you better navigate designs.

Some of the tips for designers will certainly also be useful for developers, and vice versa. Being able to work well on a team often depends on the individual’s personality, so take those habits from either group that will contribute to better collaboration. Do you have other good ideas? Share them with us in the comments.

The Hybrid’s Role

Designers and developers come in many shapes, and design and development skill sets are overlapping more and more. Hybrids, who have one foot in each discipline, seem to be increasingly sought after by clients and employers. This begs the question of whether we need to get along better or simply become more like each other.

Hybrids are in a unique position to answer this question. If you consider yourself both a designer and developer, tell us: What is it that you find easier or harder about being involved in both disciplines? What do you like or dislike about it? What can we all do to become better collaborators?

Post-Disciplinary Collaboration

Way back in 1999, Andrew Sayer, professor of sociology at Lancaster University, published an article titled “Long Live Postdisciplinary Studies! Sociology and the curse of disciplinaryparochialism/imperialism.� Despite the hefty title, he wrote quite simply:

Interdisciplinary studies are not enough, for at worst they provide a space in which members of different disciplines can bring their points of view together in order to compete […] Post-disciplinary studies emerge when scholars forget about disciplines and whether ideas can be identified with any particular one; they identify with learning rather than with disciplines.

Competition is fierce in our industry, and as talented new generations join the workforce, it will only become fiercer. Web makers will need to work harder and more efficiently to retain that quality that clients and consumers value: the ability to surprise. For this, we need innovation, but designer-developer cat fights take up precious time that could be put to innovation. If we instead incorporate post-disciplinary collaboration into our process (a fancy way of saying, “Let’s forget about job titles for a moment and work toward something togetherâ€�), I believe we’ll be more successful and find our jobs more enjoyable.

(al) (il)

© Cassie McDaniel for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: communication, design, designers

According to Brandweek, “brands are the express checkout for people living their lives at ever increasing speed. This article shows you how, and why, to add “appâ€�-like icons to your sites for several mobile and desktop browser displays, to clearly and elegantly identify your site with an icon that stands out from the crowd.

Logo Presentation And The Nine Basic Ballet Movements

When I was a lad growing up in rural America, we only got four channels on television, all local affiliates of the four national networks (yes, four; you’re forgetting PBS, which I only watched when they did dinosaur specials). The ABC and CBS stations came in fairly clear if you adjusted the “rabbit ears� antennae just right, and wrapped tinfoil on ’em.

Not too far off from what sat in our living room. (Photo credit: David E. Bowman, used by permission.)

NBC’s station came in over the new-fangled and somewhat unfathomable UHF channels — we had to actually twiddle a dial that looked like an old radio selector to tune it in. That channel was always static-laden, and required not only tinfoil on the rabbit ears, but sometimes needed my brother or me to stand next to the TV, carefully grab one of the rabbit ears, and, in my wife’s words years later, assume one of the nine basic ballet positions. (Her dad did the same thing to her, until he got angry at something President Johnson said and kicked out the picture tube. True story.) If we did the grand plié just right, the NBC channel would come in nice and clear, at least until Don Meredith dropped back for the touchdown pass and the signal would go out.

The television was also a black-and-white job.

So, given all of that static and lack of color, the lack of a screen display and the inability of anyone who lacked sniper-quality vision to discern what the number was on the little plastic channel dial from across the room, how were we to know what channel we were watching at a glance?

Short answer, we didn’t. Longer answer, we depended on the networks, or the local station, to tell us. That involved the use of a logo, on the networks’ choice of identifying themselves — part of their branding.

The 1960s version of the ABC Network logo. (Photo credit: Kris Trexler, used by permission.)

In those days of low, low-resolution black-and-white signals, we sometimes had to depend on the network logos to determine what station we were watching. I wasn’t old enough to see the logo ABC used in the 1950s (the letters stenciled in light gray on the side of a television camera, very unreadable), but I do remember the 1960s version: three smaller-case letters in RGB colors (they looked like different shades of gray to us) in a black circle. Easy to see and understand. ABC still uses a variant of this logo.

The 1960s version of the NBC Network logo. (Photo credit: Fanpop.)

NBC flaunted its embrace of color by pasting a color-bedazzled peacock on screen. It gave us a rather undistinctive text block at the bottom of the screen, and we couldn’t see the colors, so it didn’t convey quite as strongly (besides, no one wanted to watch NBC programs if it meant you got to stand by the antennae in allongé position for more than a few minutes). The peacock survives, in a much more stylized form, today.

The 1960s version of the CBS Network logo. (Photo credit: Solar Navigator.)

CBS used the “Eye of Horus� (they still use a version of it) flanked by three nicely serifed letters in a different RGB arrangement of colors — again, easily identifiable.

Self-Identification And Browser Speed Dials

This blast from the static-riddled past came to mind when I installed Opera 11.10 (code-named Barracuda in Opera’s best double-naught spy naming tradition) on my machine the other week. I didn’t install it the day, or the week, it came out, in part because I’m lazy and in part because I like to read up a bit on how the new browser iterations are doing before I throw my doors open and invite them in. I installed it today, or more accurately Opera got tired of me ignoring it and installed it itself, and I instantly noticed a change.

I use Opera’s Speed Dial facility for my home page, and two things were different. One, there were more (and smaller) icon docks, requiring me to fill up the screen with a few more bookmarked sites (can’t have spots unfilled, it’s asymmetrical and my OCD wouldn’t like it). Moreover, I noticed that some sites didn’t use the usual half-random screenshots to serve as their icons. Instead, some of them, like SitePoint and Google Images, seemed to now sport spiffy, iPad-like icons (minus the glossy overlay). Previous iterations of Opera merely gave screen capture “icons.�

A portion of my current desktop in Opera 11. The variances in the icon displays are obvious.

It was obvious how useful the little icons are. The chunky SitePoint blue/orange stylized “S� for example, is instantly discernible, as is the colorful Google Images “logo� (like CBS, they use a tastefully subdued serif font along with an array of bright Crayola colors). On the other hand, some sites not using the icons didn’t fare so well. Mine, for example. I got a nearly-random screenshot of my LinkedIn and Twitter contact icons, nearly useless for identifying anything. A Facebook page I visit regularly got turned into a blurry mush, as the program squished the entire page down into a barely discernible thumbnail shot. The screengrabs for Six Revisions and Smashing Magazine didn’t do so hot, either; without the text blocks on the bottom of those icons, I couldn’t easily tell what page it was (though Smashing’s logo is more discernible than Six Revisions’s). And who wants to rely on a text block to identify something?

So, with a few minutes’ Googling, I found out that the icons are completely controllable from the client end — in other words, just like the Apple iPad/iPod/iPhone icons that we can also use on our websites (Apple calls them Webpage Icons; Android’s mobile browser uses something similar), we can add an icon that will stand out on Opera users’ Speed Dial. I also found that if we prefer, we can use Speed Dial-specific CSS or content, and even add a soupçon of HTML 5 goodness.

In other words, we control the appearance. I don’t know about you, but in this day and age of not rationally being able to design sites that appear pixel-identical from browser to browser, I’ll take a bit of control over appearance and presentation any time I can get it. And, as we’ll see shortly, the effect isn’t limited to Opera’s desktop Speed Dial, but translates to many mobile displays as well.

And doesn’t it look like a mobile desktop display? More on that later.

(Not sure how to get Opera to display Speed Dial as the home page? Online How To gives a quick and easy walkthrough, though as the article notes, Opera 11 uses Speed Dial as its default for the home page selection. Here’s how to change Speed Dial icons on your, and only your, browser. And if you are new to the whole idea of Speed Dial, Opera’s given us a slick, short YouTube video to peruse.)

Chrome with Speed Dial extension, in a screenshot from December 2009. (Photo credit: Technobuzz.)

Firefox has a Speed Dial extension that I started using after I got spoiled by Opera’s own feature. Firefox also offers a similar extension called Fast Dial, but it seems to have some workability issues. Chrome also has an extension that gives its users a Speed Dial, and in a fashion somewhat similar to Opera, it allows for the use of site logos as dial icons, though without the customizability.

Internet Explorer 9 has its own built-in Speed Dial feature that is similar to Chrome’s, though it doesn’t seem particularly customizable (I don’t use IE9, so I can’t say with any authority). Mac users have a reason to preen, as Safari has done Speed Dial for years, perhaps as far back as 2003, though I understand it’s an online app and not necessarily a browser inclusion (I don’t use Macs, either, so someone here can correct me). PCMag’s Michael Muchmore claims Opera did the Speed Dial first, for what that’s worth.

Going Mobile: Stealing A March On The Future

The question of “why bother?� is valid. After all, Opera’s desktop browser has less than a 5% market share no matter whose numbers you accept, and I’m certain most users of other browsers don’t use their Speed Dial facilities. But that’s not the entire deal. Opera is well known as a cutting-edge browser whose best features often find their way into other, more popular browsers down the road. (A list of Opera innovations going back to 1994 is available on Opera’s Wiki, if you’re interested. Opera has introduced such features as screen zooming, user-defined CSS, mouse gestures, pop-up blocking, and voice navigation, and it’s had Speed Dial since version 9.20 in 2007.)

I’m not going to start trying to sell Opera to you, you use whatever browser you prefer, but if Opera’s doing it today, Firefox and Chrome and the rest will likely do it tomorrow. So making an Speed Dial icon for your site now might only delight the very small percentage of users who use that facility for now, but chances are that icon, or a variant thereof, will come in handy for another browser’s own take on Speed Dial in the near future. Opera’s desktop enhancements often move on to the Opera Mobile and Mini browsers, which at last take have well over 100 million users between them. That’s a significant user share. And, as we’ll see along the way, the same technique can be used for placing your logo on Apple’s mobile touch-screen devices.

Speed Dials are nothing new, certainly. But the ability to customize them, now for Opera and almost certainly for other browsers in the near future, is something fairly different.

Apple iPad desktop, in a screenshot from April 2010. (Photo credit: Pat Moorhead.)

It’s also becoming axiomatic that if you’re designing for the future (even if that future is next month), you’re designing for mobile. If you’re not designing for mobile, you’re not serving your clients. Author and UI expert Luke Wroblewski points out that the trend towards mobile is already large and growing by leaps and bounds, and cites the stats to back it up.

A research firm made a bold prediction in December 2009 that by some time in 2012, global shipments of smartphones would surpass global shipments of desktops, notebooks, and laptops combined. That happened in late 2010, almost two years early. The gap will continue to increase. Since 2008, home usage of PCs has declined 20%, and will continue to shrink, as consumers increasingly rely on their smartphones to surf the Web.

In 2011, worldwide PC shipments fell over 3% and will continue to fall; US shipments fell over 10%. Many buyers who would have purchased a PC are now buying tablets such as the iPad. 22-25% of American and British mobile Internet users don’t bother with a desktop computer at all for Internet surfing. By November 2010, the number of visitors to web-based email sites dropped by 6%, while at the same time the number of users accessing their email by their mobile devices grew 36%. And of the mobile devices out there, Smashing Magazine author Nick Francis tells us that half of the smartphones being sold today run on the iPhone OS, and half of the remainder run on the Android OS. The Apple iPad tablet is selling like crazy.

Besides making me feel old (how about you?), these stats tell me that if I’m designing for a client and ignoring their mobile needs — and particularly failing to focus on the need to address their users’ Apple devices — I’m not serving their interests. The client may not even know that you’re not giving them what they need, but it’s on the designer and developer to know that needs exists, not the client. We know that more and more of our clients’ users may still be using a desktop or notebook to access the Internet today, but tomorrow they’ll be using a smartphone, and if not tomorrow, then check back next week, because they’ll have made the switch. Moreover, they think of websites less and less as “sitesâ€� and more as “appsâ€� (even though we know the terms aren’t interchangeable).

The techniques we’ll learn here apply right now to Opera Speed Dial for the PC and for the Apple touch screens. Tomorrow they’ll apply to more devices, probably the Opera Mobile and perhaps the Mini. And, I believe, other desktop/laptop (think “fixed� computers, though the term isn’t quite accurate) as well: I have a feeling that in a year’s time, or perhaps two, a lot of browsers’ home-page displays will employ some version of a mobile-like Speed Dial facility. Let’s steal a march on the future (and on our competitors) and see how it works.

Step One: How To Customize Your Site For Opera’s Speed Dial

[Y]ou can offer [an icon] that can be displayed on the [Apple touch screen] devices’ Home screen using the web clip feature. — Alexander Dawson, Six Revisions

The new [Opera] implementation also allows site developers to choose what appears in users’ Speed Dial entries for their sites. — Michael Muchmore, PC Magazine

Dev Opera’s Tiffany Brown wrote a quick and well-detailed how-to guide for whipping out an Opera Speed Dial icon for your browser, or for customizing your dial icon via CSS or other content. Brown verifies that if you don’t do anything special, Opera’s Speed Dial will just use the usual screen capture, and we already know how poorly that can turn out for you.

Unsurprisingly, the process started with the idea of the “favicon,â€� or the bookmark icon. We’ve been incorporating those as far back as 1999, when Microsoft bowled us all over with their inclusion in IE 5. They aren’t part of the HTML 4 specifications, but that didn’t stop many people, and browser vendors not named Microsoft didn’t wait long to add support for icon as a value for the rel attribute of the link element. Apple built on the idea of the favicon for its touch-device icons through the apple-touch-icon value. And HTML 5 has added icon as a valid and standardized value for the rel attribute, unless they change it next Tuesday.

(Note: Opera will not pick up a favicon for Speed Dial bookmarks. If it doesn’t find some kind of icon dedicated to the purpose — Opera doesn’t require the Opera-specific coding, but it does require link rel coding specifically for an icon. It won’t default to displaying the favicon, but instead will give users a screen capture as an “icon.â€�)

The Basic Icon Code

It doesn’t take a lot of time or effort to code a new icon for yourself. Brown gives us the dirt-simple code needed for the head of your document:

<head>
   <title>Spiffy page with Opera Speed Dial icon</title>
      <link rel="icon" type="image/png" href="http://path/to/logo.png">

</head>

It doesn’t get much easier than that (you can even leave out the type="image/png", as the PNG MIME type is assumed). You can see the rel difference from the Apple-specific code used for the Apple touch icons:

<link rel="apple-touch-icon" href="http://path/to/applelogo.png">

The icons themselves are a bit different from the Apple-dedicated icons, and may require you to take a run through Photoshop, GIMP, or your graphics editor of choice. The specs are simple. The minimum size is 114px by 114px (smaller ones, such as the Apple-sized 57×57 PNG icons, will be ignored, though Apple devices will use almost any reasonably sized icon, scale it down to 57×57, and add its own rounded corners — more on this in a bit) and the maximum is 256px in width by 160px in height. (Display sizes can be changed in the opera:config menu from your browser, but that only works for you and not the Opera user in Katmandu.) The file must be in either PNG, JPG, or GIF format — no SVGs.

(Web developer Mathias Bynens chided Apple for not “implement[ing] the standard <link rel=icon> and [coming] up with a more verbose proprietary link relation instead.” I have to agree.)

Using Multiple Icons

If you use an animated image, only the first frame will be used, so don’t bother. But, you can use multiple icons. What’s the difference? It will let you give users one icon to bookmark a page and a second for their Speed Dial. You’ll have to decide whether this is a nice plus or a source of potential confusion — we usually like some degree of uniformity among our logo presentations, for identification purposes.

If you want to go down that road, it’s not much harder than the first one. Here’s how:

<head>
   <title>Spiffy page with Opera Speed Dial icon</title>
      <link rel="icon" type="image/png" href="http://path/to/128x128image.png">
      <link rel="icon" type="image/png" href="http://path/to/200x200image.png">
</head>

The larger one will be chosen by Speed Dial as its icon, regardless of whether it comes first or second in the list. If both icons are the same size, Speed Dial will use the first and the second one will become the favicon.

So far it’s been easy. The next part is, well, easy too, but allows for a good bit more customization if you choose to implement it.

Using view-mode: minimized

Opera’s view-mode media feature lets you specify styles by viewing mode. If you use view-mode: minimized, you can do more than just provide a bigger, splashier favicon for your visitors’ Speed Dial. View-mode works like other media features such as device-width. You probably already knew the media query needs to be within an @media block. Here’s the code:

@media screen and (view-mode: minimized) {
   body {
      color: #fff;
      background: #b20000;
   }
}

This still has Opera use a screengrab as its “icon,� but it customizes the appearance: in this case, changing the font and background colors.

If you’d rather, you can link to an external style sheet (we’ll debate the pros and cons of that method some other time), and set the value of the media attribute to (view-mode: minimized):

<link rel=stylesheet type="text/css" href="minimizedstyles.css" media="(view-mode:minimized)">

If you use (view-mode: minimized), you’ll trigger a Speed Dial viewport that is 256 pixels wide by 160 pixels high. That may not be an issue for you, but it’s something to know.

What you definitely need to know is that if you use view-mode: minimized CSS, Speed Dial will use that as its first priority, over a more generically provided icon.

Other Possibilities

Brown gives examples of several other facilities: serving a different URL via an HTTP request, cycling through a number of pre-selected icons using auto-reload, using mod_rewrite to redirect Speed Dial requests, and using a server-side language such as PHP to serve different content at the same URL. If you find these interesting, I’ll leave you to review her article if you want to explore those aspects of Speed Dial.

Extras

The visual users among us might appreciate the YouTube walkthrough Opera gives us. Opera Mobile, very popular on Android and Symbian devices, also uses Speed Dial, as does Opera Mini, though neither Mobile nor Mini versions allow for client-side customization just yet. (Firefox and Chrome’s mobile versions have their own versions of Speed Dial, as does the Dolphin mobile browser.) If you’re up for taking a brief stroll into the weeds, the Dev Opera forum has a discussion on Brown’s article. And Opera’s planning on adding extensions to the Speed Dial in the new desktop release.

Gallery of Websites’ “App� Icons

An older Opera Speel Dial screenshot from early 2011. (Photo credit: Martin Brinkmann and Ghacks.net, used by permission.)

You saw how my computer looks with the new Speed Dial activated. For comparison purposes, this is how the Opera Speed Dial looked before Opera 11 on a desktop monitor without the use of the spiffy new customized icons. Not bad, but you can see how some of the screen captures don’t stand out very well. Even when I zoom the graphic, I can’t tell what sites all the screengrabs represent. The point? Many websites’ “app icons� still look the same in the upgraded Speed Dial. But, they don’t have to.

Opera Mobile screenshot from early 2011. Photo credit: Dev.Opera, used under Creative Commons license.

For comparison purposes, here’s what the Speed Dial looks like on an Opera Mobile browser. Obviously, all of the “icons� are screen grabs. I expect Opera will upgrade its Mobile Speed Dial facility to be customizable in the near future.

Let’s find some icons on the spiffy new Speed Dial and see how they look individually. Here’s a group of them from my desktop:

Four not-so-randomly selected Speed Dial icons from my desktop, circa April 2011.

I just chose four that represent the idea of the customizable icon or the well-selected screenshot: Google Images, SitePoint, Yahoo Mail, and Media Matters. SitePoint uses the apple-touch-icon value in its coding, and the others either use more generic coding or just let the browser do its screengrab without any intervention. (The blue border around some of the icons is triggered by mouse hover, and comes from me being a bit sloppy as I selected the icons for screenshotting. I left the borders on some of the shots because I rationalized that we need to see what the icons look like both with and without borders, but mostly because I was too lazy to redo them.)

The visual benefits are apparent. Google Images and Yahoo use their colorful text as their brand identity. The Media Matters logo displays clearly, though it’s apparent that the “icon� is a nicely, and serendipitously, selected chunk of the top left quadrant of their display (you can see the slice of navigation bar in the icon, though I don’t think that detracts from the strong visual impact of the brand presentation). SitePoint, with the usage of their Apple icon displaying on the Speed Dial screen, probably makes the strongest impact. Very clean and strong, and instantly recognizable.

Opera.com’s Speed Dial icon.

Here’s a shortcut to Opera’s own Speed Dial icon. Not surprisingly, they go with their big “O� logo, though I do miss the (apparently outdated) slanting shadow behind the letter. As with all the Speed Dial icons, the text is grabbed from the title of the page, explaining why it displays as “Opera brows …� We can, of course, control that with our own sites if we want to truncate or manipulate our titles to give a short, snappy text display, and users can configure their text to say whatever they want for the icon.

Apple.com’s Speed Dial icon.

This is a shot of Apple.com’s Speed Dial icon. Who expected this? I was expecting some version of the “apple� logo. It stands out nicely from the pack, and the title, the single word “Apple,� is effective, though I’m not sure the photo of the iPad does the trick for identification purposes.

Apple’s iPhone and iPad Speed Dial icons.

Surprisingly, neither Apple’s iPhone website nor its iPad site use a dedicated icon and don’t use the apple-touch-icon coding. The screen capture for the iPhone site is fairly striking; for the iPad, perhaps less so. Perhaps Apple doesn’t expect mobile users to visit these sites?

Microsoft.com’s Speed Dial icon.

Here’s the Microsoft Speed Dial icon. Or the screengrab that Opera uses for the icon. Obviously Microsoft isn’t trying to comply with Opera’s requirements, or Apple’s for that matter. Like almost everyone’s “icon� out there, it’s a screen capture from the top left of Microsoft’s home page. It’s serviceable, and that’s about all it has going for it.

Speed Dial icons from WordPress.com and Facebook pages.

Here are screencaptured “icons� from a WordPress blog and a Facebook page that I work with. You can see just how unsatisfactorily these serve the purpose of branding icons. They’re just two screenshots of incredibly compressed content. Even the identifying text blocks don’t help much.

Speed Dial icons from Six Revisions and Smashing Magazine.

These are the screencaptured “icons� from my bookmarks for Six Revisions and Smashing Magazine (showing then-current front page content). Although they’re not as bad as the two examples above, and Smashing’s logo is clearly visible, they’re not particularly pleasing. Six Revisions looks like a WordPress site, because the day I made the bookmark, the site was featuring an article about fine-tuning WordPress for SEO purposes. And Smashing’s article about achieving pixel perfection in Photoshop has long since gone off the front page, though a slice of the title remains in my icon. These icons don’t show fresh content, and don’t do justice to the sites they represent

NBC.com’s Speed Dial icon.

And ending where we started … While the other two major television networks just let Opera do a screengrab for their “icons,� NBC gives us the 21st-century version of the venerable peacock. They code a more widely applicable JPG to serve the purpose.

Step Two: Apple Plus Opera Equals a Sea Change In Browsing

An early version of a homemade “app� home page. (Photo credit: Geniosity, used by permission.)

The idea of a home page as a collection of “apps,� or more accurately links to a variety of user-selected websites, was not introduced with either Safari’s or Opera’s first Speed Dial. Computer maven John Dvorak has had a version of his “personal portal home page� available since 1999; all of his iterations use text links only, no icons, for faster loading time. More recently, a developer who blogs at Geniosity wrote about his own handcrafted, text-link driven home page he created for his copy of Firefox (image at left). The author tells me he still uses a version of this for his home page.There are other examples out there for the Googling.

I think the idea, lurking as it has on the edges of browser conventions for over a decade, is about to step to the forefront. If it does, it will be because mobile users want their desktop, laptop, and notebook browser displays to function in the same way as their mobile desktops — as a collection of personally selected, icon-based links to sites they use on a regular basis. This will be one of the first instances of mobile browsing conventions effecting a major change in “fixed� computer browsing.

I firmly believe (without any hard evidence, it must be noted) that sometime in the near future, desktop/laptop users will want to move to a Speed Dial-like browser interface that replicates what they have on their mobile devices. I see it as a sea change in browsing: instead of desktop/laptop browsers driving what mobile browsers are able to do, the reverse is going to happen. Instead of the traditional desktop “home page,� users will want a multi-app interface like they use on their phones and tablets.

If this does happen, then designers/developers who get ahead of the curve will be prepared when the changes come down the pike. We’ll already have our sites, and our clients’ sites, ready to display well in the near-future “desktop app interface� browser facility. (And if it doesn’t happen, we’ll have spent a very small amount of time on the preparation, with no harm to our sites. There really is no downside to this, as you can outfit a website for this new function in less time than it takes the local teenager to deliver you a pizza.)

So, if I have no hard evidence to show you, how can I convince you? Maybe I can’t. I may well be wrong. But I don’t think so. Years ago, science-fiction writer Robert Heinlein wrote, “It steamboats when it’s steamboat time.� (The historical reference is simple: while inventor Robert Fulton is credited with “inventing� the steamboat, there were a dozen guys on three continents working simultaneously on one variant of the steamboat or the other. Same thing with the telephone; while you and I learned that Alexander Graham Bell “invented� the contraption, there were a lot of guys working on one aspect or the other of voice-driven communication over a wire. It was the proper time in Western society’s technological development for steamboats and telephones; the need was there, and the devices’ creation and dissemination were inevitable.)

The wave of the future is mobile computing, and one of the most fundamental aspects of mobile computing is the app-laden desktop. The idea of opening a browser to a single home page is rapidly becoming obsolete, I feel. I started using Speed Dial on my browsers (all of them except IE) over a year ago, and I wouldn’t go back for a plateful of Grandma’s brownies. The usefulness and convenience of having (in the case of my Opera “home page�) 25 “apps� on my desktop as soon as I open my browser precludes me ever going back to a single home page again.

Still not convinced? Okay, open your desktop browser and stare at whatever home page you’ve chosen. Now flip open your mobile device and look at the array of apps and websites ready to be accessed. Which one gives you more options? Which one feels more modern? More useful? (There are certainly exceptions, particularly companies which require the employee to have the browser set to the company’s or department’s home page, other organizations such as libraries and community centers which have their home pages hard-set, and users who spend so much of their time working on a single site that for them, it wouldn’t make sense to have a “home page� full of icons to different sites when they will always go to the same site first.)

The Future Is Now

[I]n the coming years, more and more websites will have mobile incarnations that look a lot like applications. [P]eople won’t even realize that in the end, the next generation mobile web won.
— Kim Pimmel, Smashing Magazine

For now, the best way I see to prepare for this predicted oncoming mobile transformation is to combine the requirements of Apple’s touch-screen devices and Opera’s Speed Dial. Apple requires a PNG file of at least 57×57 for conversion to a touch-screen icon. Opera requires an icon at least 114×114. And Opera will recognize Apple’s touch-screen HTML code. I’d say create a PNG icon of 114×114 or larger, not forgetting Opera’s maximum size requirement of 256×160, and use the apple-touch-icon coding:

<head>
   <title>Spiffy page with icon for Apple and Opera</title>
      <link rel="apple-touch-icon" href="http://path/to/appleoperalogo.png">

</head>

Another viable option is to use two strings of code:

<head>
   <title>Spiffy page with icons for Apple and Opera</title>
      <link rel="apple-touch-icon" href="http://path/to/applelogo.png">
      <link rel="icon" href="http://path/to/speeddiallogo.png">
</head>

to ensure full inclusion and forwards compatibility, especially if, as I suspect, Chrome or Firefox will incorporate client-side customization to their own Speed Dial (or dial extensions) in the near future. By doing it this way, you can design separate icons for the touch devices and the browser(s) that take advantage of each one’s individual characteristics.

The 114×114 icon will be scaled down for different devices. The guys at DevDaily remind us that the iPhone 4 uses the 114×114 icon, whereas older iPhones will scale the icons down to 57×57. An iPad (v1) will scale it down to 72×72. The same 114×114 icon will work perfectly nicely on all these devices. (Bynens gives some instructions on forcing Apple’s iOS4.2 to use multiple icons for different device resolutions, if you’re interested.)

Here’s the proof in that particular pot of pudding: a before-and-after pairing of my site’s icon in Opera’s Speed Dial. For the second go-round, I used the apple-touch-icon coding so that the icon will appear on Apple’s touch-screen devices as well as in Opera’s Speed Dial.

Comparison of my site’s old and new Speed Dial icons.

The difference is marked. The first icon presents little more than icon gibberish; since I use text and not a graphic as an <h1> site heading in my site, Opera used some of the first graphics it came across (the three icon buttons) and went from there, providing a screen capture that does nothing whatsoever to identify my site as anything of consequence. It took me maybe ten minutes to whip out the new icon in Photoshop, write and insert the code line, and upload it. And that was with the assistance of tabby cats!

You guys could do it in less, I’m sure. I’m not entirely happy with it; it’s smaller than the bookmark canvas, the corners arent’t rounded, and where the icon canvas is rectangular, the icon itself is square (if the background were white, it wouldn’t matter as much). But whereas the first icon is almost entirely meaningless, the second one conveys.

Side note: There are tutorials out there advising us to create icons for Apple devices in Photoshop that include the rounded edges, drop shadows, and “gel” overlays. Don’t do it. Keep the icon edges sharp and don’t include the glossy overlays. Apple devices add those effects automatically. The icon I created will have the rounded edges, drop shadow, and glossy appearance on Apple devices. If you want to force Apple to use your own icon without modification, you can use this code:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

allowing you to add your own effects as you desire.

Bynens writes: “I’d recommend to always use precomposed icons. It gives you full control over your icon, and it’s the only kind of icon Android 2.1 supports.” He also notes that iOS1 and Blackberry’s OS6 do not support precomposed icons. He gives a somewhat more broad-based, cover-all-your-mobile-bases code snippet, which I’ll pass along:

<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Opera 11.10 supports precomposed icons as well as the Apple Touch icons.

Conclusion

Right now this works on Apple’s touch-screen devices and on Opera’s desktop browser. It’s my educated guess that within a matter of months, it will work on Opera’s Mobile browser and at a later time on the Mini as well. It wouldn’t surprise me if, by this time next year, the code string works on new Speed Dial facilities in Webkit and/or Gecko desktop and mobile browsers (be they actual browser inclusions or extensions). We might even see something of the sort in new IE versions; it’s never smart to count Redmond out. So: take a few minutes, steal a march on the competition, and add the feature to your sites right now. You and your clients will be glad you did.

There is a better way to do it. Find it. — Thomas A. Edison, who telephoned when it was telephone time.

Related Links

• Designing For The Future Web
• Smartphone Browser Landscape
• Everything you always wanted to know about touch icons
• Mobile Developer’s Icon & Image Checklist
• A Study of Trends in Mobile Design
• Mobile Web Design: Best Practices
• Making It a Mobile Web App
• Mobile Web Design: Is It Worth It?
• Holistic Web Browsing: Trends Of The Future
• Apps vs. the Web
• Web Development For The iPhone And iPad: Getting Started
• How to Use Your iPad for Real Design Work
• How to Make an HTML5 iPhone App
• How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
• The State of the Mobile App World (infographic)

(vf) (il)

© Michael Tuck for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: branding, logos, mobile

Designing an icon set may sound like an easy thing to do but in actuality it is much easier said than done. Many designers end up with a disaster, while some more matured and experienced designers successfully meet the expectations and deliver.

Generally speaking, a designer needs to learn the basic principles of icon design first, and must be aware of the significance of and function that icons perform on web sites and in user interfaces. In order to create useful and effective icons, one must know the difference between icon and logo designs; and most importantly, how to use your creativity to incorporate the characteristics we need in the icon successfully.

In the end of 2009, we had compiled a post on Illustrator Icon Tutorials, and since we have noticed that there are lots more outstanding tutorials on designing beautiful and attractive icon sets that have been shared by experienced designers all over the world. So, we have decided to bring you all another collection of Adobe Illustrator Icon tutorials.

Illustrator Icon Design Tutorials

How to make a realistic vintage typewriter in Illustrator
In this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator.

Create a Super Glue and a Paint Tube Icon
In the following tutorial you will learn how to create a super glue and a paint tube icon. These shiny icons are simple to create, we’ll cover a complete workflow, and show you techniques that will speed up your work process.

How to Create a Suitcase Icon in Adobe Illustrator
In the following tutorial you will learn to create a suitcase icon, suitable for a travel oriented site, or vacation brochure. Grab hold of your vector tools and let’s get to building.

Create simple but effective Weather Icons in adobe illustrator
In this tutorial you will learn how to create some attractive little weather icons in Adobe Illustrator.

How to Make a Detailed Printer Icon Using Illustrator
In this icon design tutorial, we will construct a desktop printer icon that is rich in detail. Ready? Perhaps you should serve yourself a cup of coffee and grab a bag of chips to pass the hunger while we draw our icon (it could take a while to finish)!

Create a Jeans Pocket Icon Using Adobe Illustrator
In this tutorial you will learn many useful and necessary techniques, such as the creation of vector texture, working with the Scatter Brush, using the Graphic Style palette, creating scuffs and creases on the fabric, using the Gradient Mesh, and more. Believe me, it’s worth your attention.

Create a Nice Award Medal Icon
In the following tutorial you will learn to create an icon of an award medal. You will use various shapes and pathfinder techniques to make this great looking icon. This illustration can be made without the use of the Pen Tool, so it’s a great tutorial for beginners. You will be proud of the results!

Syringe Icon Tutorial
In this tutorial you will learn how to create a medical syringe icon with illustrator CS5.

Create a Simple Paint Brush Icon
Here you can learn to create a quite simple paintbrush icon. For this fast tutorial you’ll use some basic tools like the Rectangle Tool, the Ellipse Tool or the Pen Tool. Then, for some neat effects you’ll need the Wrinkle Tool or the Warp for rougher effects.

Create a Tasty Burger Icon in Illustrator
In this delicious tutorial the artist will show you how to create a three-dimensional, scrumptious burger using Adobe Illustrator.

Quick Tip: Create a Shiny Shield with Illustrator
In this Quick Tip, you’ll learn how to harness the Appearance panel to make the basic structure of a shiny, beveled shield. Once the structure is in place, a few well-placed gradients are all it takes to achieve a sharp, polished look.

How to Create a Simple Cardboard Box Icon
In this tutorial you will learn how to create a simple cardboard icon using 3D Extrude & Bevel and basic gradient fills.

How to Create a Shiny Bucket Icon
In this tutorial you will learn how to make a realistic vector bucket icon. You will learn to use the 3D Revolve function, how to add realistic light effects and how to draw different objects to form a composition.

How to Create a Hyper-realistic Flashlight
In this tutorial you will learn how to create a very realistic illustration of a flashlight. This style of illustration is particularly popular for icons and technical illustrations. Although this tutorial is more advanced than others, don’t let that dissuade you from giving it a go, you will find it’s written in an easy to understand format and the results will be worth the perseverance.

Create a Shimmering Cityscape in Perspective, Using Illustrator CS5
The Perspective tools in Illustrator CS5 make it a lot easier to draw in perfect one, two or three-point perspective. Using symbols in conjunction with the Perspective tools will make quick work of this stylized cityscape.

Create a Safe Icon in Adobe Illustrator
In the following tutorial you will learn to create a safe icon. We’ll use a variety of Adobe Illustrator tools and techniques to create this icon. Learn how to make a place to stash your vector gold. It’s all about the details you put into this design to give it a bit of shine.

Quick Tip: How to Create a Simple 3D Lollipop Icon
In the following tutorial you will learn to create a lollipop icon. By using some simple shapes and the Distort & Transform function, you will see just how easy it is to make a great looking icon.

Make a Headphones Icon Using Adobe Illustrator
In this tutorial you will learn how to create a realistic image of headphones using simple and understandable techniques. It turns out that to get a good result there is no need to do it in a complex way. This tutorial is easy for any beginner to complete.

Make a Mailbox Icon Using Adobe Illustrator
Attention! This icon was not created solely for educational purposes. You can see the working process of real designing! We are going to use various professional techniques to create this icon, and artist will give you many useful tips along the way.

How to Use the Perspective Grid to Create a Modern TV
In this tutorial you will learn how to create your own modern TV on a stand. Using the Perspective Grid in Illustrator CS5 as the basis of your work you will learn how to quickly create a product illustration with perfect perspective.

Create a Modern Style Icon with a Professional Finish
If you want to learn how how to create a professional level Hard Drive icon with shading and lighting the techniques, then we have an awesome tutorial for you.

How to Use the Opacity Mask to Make High Gloss Icons and Reflections
The Opacity Mask is a somewhat hidden feature in Adobe Illustrator. Mask work like Photoshop’s alpha channels to obscure parts of your artwork. In this Quick Tip, you’ll learn how to use Opacity Masks to make reflections and highlights on a vector icon.

How to Create a Stylish Wireless Phone
In this tutorial you will learn how to make a great looking Wireless Phone. You will be using Offset Path and various gradients to create a three dimensional phone with realistic highlights and reflections.

The Perfect Diamond
In this tutorial you will learn how to cut a perfect diamond.

Vector Retro Television
In this tutorial, you will be shown how to make a stylish retro looking television in Adobe Illustrator. You will learn how to draw basic shapes, modify them and apply gradient and gradient mesh for more realism. Hope you enjoy this illustrator tutorial.

How To Create a Colorful Logo Style Icon in Illustrator
Follow this step by step to create a vibrant and colourful logo style icon graphic. This style of abstract three dimensional shape has become a popular trend in the world of logo design. Today we’ll look at how to build the graphic in Illustrator using a range of tools and techniques.

Create a Simple Trunk Icon
In the following tutorial created by Andrei Marius, you can learn to create a simple trunk icon. This detailed Illustrator tutorial uses some Extrude & Bevel 3d effects, gradients, offsets, and other techniques that can be easily applied to other icons ans illustrations.

Create a Dirty Water Drop Character Icon
Did you know that 3.575 million people die each year from water-related disease? Moreover, 884 million people lack access to safe water supplies; approximately one in eight people. That’s pretty crazy! To spread the awareness about The Water Crisis, you can create the following Illustrator icon and learn more about the crisis at Change.org.

Quick Tutorial: Create A Sleek Bevel Styled Icon With Just a Few Illustrator Tools
I love simple and sleek looking icons. I love them even more when they’re easy to make, and completely versatile as a foundation for a ton of other icons. With a little practice, you can probably whip out some really beautiful icons in under a few minutes!

Create A Briefcase Icon
In this tutorial, you will be shown how to create a briefcase icon with rectangles, ellipses, and gradients. This briefcase icon is great for web designs and user interfaces. Moreover, you can easily apply these techniques to other icons, logos, and illustrations.

How to make a Calendar icon
This tutorial is for any and all of those users out there interested in icon development. In this tutorial you are going to learn how the folks at DryIcons made the Calendar Icon from their most popular icon set “Coquette�.

Create a Windows Vista Icon
In this video we will go from the very start of the process to the very end of the process of duplicating the “my computer” icon for Windows Vista and making it all vector.

Vector coffee cup tutorial Illustrator
In this tutorial you will learn how to make a realistic looking vector cup of coffee.

Simple Skull Vector Icon
In this tutorial you will learn how to create an easy, light skull vector icon.

Create a vector stop watch icon
In this tutorial you will learn how to create a vector stop watch icon in Adobe Illustrator. The tutorial is covering all the steps needed to create a great looking, realistic stop watch. Only the basic tools in Illustrator such as Ellipse, Rectangle, Gradient and transformations are used to achieve the result you see here.

How to Design a Realistic Gamepad
In this tutorial, you will learn how to create an illustration of a gamepad using the Pen Tool, Gradients and Filters. You can use this illustration as the basis of an icon or for a decorative element on a larger design.

How to Draw a Glossy Yo-Yo Icon using Adobe Illustrator
Entertain yourself with this tutorial on creating a glossy yo-yo icon. You will learn how to combine different gradient and object effects to make a hyper realistic and shiny plastic surface. The result is a perfectly rendered and appealing icon that can be made in just one hour!

Create a 6-egg box (not necessarily for Easter)
In this tutorial you will learn how to create a carton containing half a dozen eggs. We will use 3D Rotate and Revolve Effects. We will also play a lot with masks. You may download the source file (created in Illustrator CS4, back-saved to CS2+).

Create a yummy vector cupcake
In this tutorial you will learn how to create a tasty looking vector cupcake treat.

Design a 3D Digital Clock Icon with Illustrator
This tutorial will explain how to create a glossy and stylized digital clock from scratch in Adobe Illustrator composed of basic shapes and nifty gradients. We will make a vector icon that will be scalable to any size by taking advantage of designing icons and graphics using a vector-based application like Illustrator.

Create a 3D Shipping Package Box Icon in Illustrator
This icon design tutorial will discuss how to create a shipping box/parcel box icon from scratch using Adobe Illustrator. We will use the 3D Extrude & Bevel effect, the Pen Tool for drawing simple shapes, several panels like the Transparency Panel and the Gradient Panel, and other fundamental Illustrator features.

Vector printer tutorial Illustrator
In this tutorial you will learn how to make a realistic vector printer in Adobe Illustrator.

Create a Gift Box Illustration
In this next tutorial you will learn how to create an illustration of a gift box. You will be shown how to use the rectangle tool and the star tool to create a pattern and a symbol. For the box and the bow shapes you will use the 3D Extrude&Bevel effect, the Map Art option plus some Warp effects and Pathfinder options.

Create a Laptop Icon
In the following tutorial you can learn to create the icon of a laptop. Once you’ve created the basic shapes, it’s easy to continue with the other components. Give it a try and you might learn some interesting stuff about the role of Smart Guides and Rectangular Grid Tool.

Create a Neat Price Tag
In the following tutorial you will learn how to create a nifty little price tag. First, for the basic shape, the grid and the Snap to Grid will significantly ease your work. Then, for the rest of the illustration you’ll use the Pathfinder options, multiple gradients and strokes plus some basic effects and brushes.

Create a Cute and Simple Hippo Face
In the following tutorial you’ll learn to create a simple hippo face. It’s made with simple tool like the Ellipse Tool, the Rectangle Tool and the Rounded Rectangle Tool. Also, for some discrete details I added some basic effects like the Inner Glow or the Gaussian Blur.

How to Make an Opulent Chair Icon
In this tutorial, you will learn how to make a chair icon using gradient mesh, the pathfinder tool and the appearance panel. Don’t let this tut deceive you, with a bit of imagination you can create an entire collection of soft furnishing icons in minutes with a few easy tricks.

How to Illustrate a Marvelous Violin Icon
If you want to learn how to create a marvelous violin icon, then we have an awesome tutorial for you. This tutorial covers how basic shapes and a solid understanding of perspective and volume work together to quickly build a successful icon.

How to Create a Distinguished Personal Diary Icon
In this tutorial we are going to create a stylish personal diary icon using Illustrator CS4. Gradient is at the core of this tutorial and we will be taking look at it in close detail. You will also learn how to use the opacity mask to create drop reflections and shadows.

Create a Stylized First Aid Icon in Illustrator
In this tutorial we’ll use a combination of craft and Illustrator’s 3D tools to create a first aid icon. You can use the techniques you learn in this tutorial to create realistic rounded box icons of your choice. This works well for complex icons at large sizes and scales down nicely.

Design a Stylish Wallet Icon in Illustrator
In this simple tutorial you will be shown how to create the wallet icon from the Cute Little Factory’s Women’s Icons using Adobe Illustrator CS4.

Reflections Done Right – Creating a Money Roll Icon
Cash-in when you follow this tutorial for creating accurate and logical reflections. Learn how to use shading and masking to create an illustration that’s worth the look.

Create a Classic Calendar Icon
Here you’ll learn to create a classic calendar icon. It’s a pretty simple and fast tutorial. You only need to know how to use the basic tools and some effects like the Inner Glow, the Drop Shadow, the Transform effect, the Rounded Corners effect or the Warp effect.

(rb)