Archive for March, 2011

Design Charts for Better Typography and Color

Advertisement in Design Charts for Better Typography and Color
 in Design Charts for Better Typography and Color  in Design Charts for Better Typography and Color  in Design Charts for Better Typography and Color

We’re designers, so it makes sense that a lot of us are visual learners and do better looking at charts and graphs than reading an article or listening to a podcast. Typography and color are two great topics that are perfectly suited for infographics, charts, and other graphical learning tools.

Below we’ve collected a good number of great infographics that will teach you how to use typefaces and colors effectively. There are guides for choosing a typeface, for combining typefaces, for figuring out what different colors mean in different cultures, and a lot more.

Typography

Dig into the history of typography and catch up on the typographic origins. Whether you need help choosing the right font or want to know how to effectively combine fonts, the graphics below can help, for both print and online design.

So You Need a Typeface
While at first this infographic appears to be a bit tongue-in-cheek, it’s actually quite useful. Start by choosing what type of project you’re working on, and then just answer a series of yes or no and good or bad questions to find a suitable typeface.

Soyouneedatypeface in Design Charts for Better Typography and Color

The Anatomy of Typography
Understanding all the elements that make up a typeface is an important step in learning to expertly combine typefaces. This infographic breaks down the anatomy of individual characters within a typeface, covering everything from aperture to strokes to the different types of terminals.

Typography-is-known-for in Design Charts for Better Typography and Color

Periodic Table of Typefaces
The most popular fonts are graphically represented in the style of the periodic table of elements in this poster. It gives some brief history of each typeface (including the date it was first designed and who designed it), as well as the classificiation of each font. There are a number of different versions of the poster available for purchase, or you can print it yourself.

Periodic in Design Charts for Better Typography and Color

The Evolution of Typography
This infographic showcases the changes in typographic design throughout history. It covers the evolution of serif typefaces and sans-serif typefaces, as well as a brief description of the history of script and blackletter typefaces.

Evolution in Design Charts for Better Typography and Color

Mixing Typefaces
This simple chart serves as a guide for combining twenty-two different common typefaces. It offers three separate classifications for determining whether two typefaces are compatible: “Combine at will”, “Not a conservative choice”, and “Think again.”

Mixingtypefaces in Design Charts for Better Typography and Color

19 Top Fonts in 19 Top Combinations
This great chart provides an instant visual reference to good combinations of popular fonts, including Helvetica, Garamond, Gill Sans, Minion, and more.

19topfontscombinations in Design Charts for Better Typography and Color

Type Palettes
Graphical representations of typography combos are a great way to see how different fonts work together. This Type Palettes article shows a number of complex typography combinations, using different typefaces for headlines, subheadings, text and captions.

Typepalettes in Design Charts for Better Typography and Color

Most Popular Fonts by Operating System
Not everyone is using @font-face for their website designs yet. And even those who are need a backup for older browsers (or in case their font service is down or unavailable). This chart shows all the most popular typefaces by operating system, and even includes the most commonly used fonts from Google Font Directory and FontSpring.

Fontbyos in Design Charts for Better Typography and Color

34 Typographic Sins
There are dozens of mistakes commonly made in typographic layouts. This poster details thirty-four of them, as well as what the correct usage is.

Sins in Design Charts for Better Typography and Color

Color

Color science and theory is a remarkably complex field. The graphics included below, though, can offer valuable insight into the world of color, including how to effectively create color palettes and what colors mean.

Basic Color Relationships
This infographic gives all the basic information you need to know about color theory. It includes terms, the way RGB and CMYK work, and meanings of different colors, as well as a color wheel the illustrates warm and cool colors.

Ctheory in Design Charts for Better Typography and Color

What Colors Mean to Different Cultures
When designing for an international audience, it’s important to note the effect your color scheme will convey to your audience. This handy chart shows exactly what different colors mean in different countries, helping to prevent any cultural faux pas.

Culture in Design Charts for Better Typography and Color

How Color Effects Purchasing Decisions
If you’re designing an ecommerce site, it’s important to know exactly how different colors affect purchasing decisions made by your visitors. This chart shows the effects different colors have on those purchasing decisions, as well as which colors work bets for which types of buyers.

Purchasing in Design Charts for Better Typography and Color

Colors of the Most Powerful Brands in the World
Certain colors have become associated with certain brands, both in the “real world” and online. This series of graphics explores the colors used in the various design schemes and logos of the biggest brands in the world. Each of these graphics explores a different aspect of the use of color in branding.

Powerful in Design Charts for Better Typography and Color

Colors of Twitter Profiles
This infographic compares the use of colors by geography, keyword, and demographic of Twitter users who have used the Colourlovers Themeleon Twitter profile designer. It also showcases the most colorful Twitter personalities, and the colors they use.

Twitter in Design Charts for Better Typography and Color

What Your Web Design Says About You
This infographic showcases the most popular color, typography, and other design options in web design are most popular, and what the different choices say about the site itself. The graph also delves into color science and theory, with interesting graphics representing each hue.

What-your-web-design-says-about-you in Design Charts for Better Typography and Color

Top Voted Colors of 2010
Staying current on trends in color is important for designing a site that looks current (or stays timeless). This infographics shows the results of a survey of over 1000 people chose the most popular colors of 2010 and the words that the colors represent.

Color2010 in Design Charts for Better Typography and Color

His and Hers Color Names
A useful, interactive infographic that displays the results of XKCD’s color survey, which used five million plus samples to judge what men and women consider accurate names for all the colors of the spectrum. Some are downright hilarious, while others are incredibly creative. In either case, it gives a good indication of how the sexes feel about different colors across the spectrum.

Hisnhers in Design Charts for Better Typography and Color

The Color Strata
Here’s another visualization of the XKCD Color Survey dataset, broken down into the 200 most common color names. The format used here is really interesting, and not something commonly seen.

Strata in Design Charts for Better Typography and Color

Recognizing Brands by Color Scheme
An interesting study that seeks to simplify brand logos by breaking it down into it’s basic color and circles to represent text and lines. A useful way to see where the color scheme of a logo works it’s magic, which can help you design color schemes with more impact.

Basic in Design Charts for Better Typography and Color

Useful Infographics

Why Does Gen Y Buy
This infographic is useful to anyone creating an ecommerce site that’s aimed at Generation Y, who spend about $20 billion online each year.

Genybuy in Design Charts for Better Typography and Color

Interesting Facts and History of CSS
This infographic combines the history of CSS with a number of interesting facts about it. It includes the different versions of CSS, as well as support by different browsers.

Interesting-facts-and-history-of-css in Design Charts for Better Typography and Color

WTF is HTML5 and Why We Should All Care
This is a brilliant infographic that shows what new features HTML5 has added, and what those features mean for the future of the internet.

Html5 in Design Charts for Better Typography and Color

User Centered Design
This infographic breaks down the elements of user-centered design, as well as the process of creating such designs.

Usercentereddesign in Design Charts for Better Typography and Color

HTML5 & CSS3 Readiness
This interactive infographic breaks down exactly which browsers support which new features of HTML5 and CSS3.

Html5css3readiness in Design Charts for Better Typography and Color

The Visual FAQ of SEO
This infographic gives a great breakdown of what you need to know about search engine optimization. It covers things like site architecture and structure, link building, and SEO tactics.

Visualfaqseo in Design Charts for Better Typography and Color

The State of Web Development 2010
Here’s a great rundown of the state of web development in 2010, including the popular browsers (desktop and mobile), OSs, and more.

Webdevelopment2010 in Design Charts for Better Typography and Color

Bounce Rate Demystified
This infographic from KISSmetrics showcases how bounce rate statistics work, and how they’re calculated.

Bounceratedemystified in Design Charts for Better Typography and Color

The Anatomy of a WordPress Theme
This is an incredibly useful infographic that breaks down the parts of a WordPress theme in great detail. If you’re a theme developer (or want to be), it can also serve as an excellent quick-reference guide.

Anatomyofawptheme in Design Charts for Better Typography and Color

The Anatomy of a Perfect Landing Page
The creation of a great landing page is equal parts art and science. This infographic breaks down exactly what goes into a great landing page.

Perfectlandingpage in Design Charts for Better Typography and Color

Interesting Infographics

Salaries in the Realm of Design
This infographic compares the salaries of different design professions in the United States, India, and the UK. It also covers salaries by country depending on the type of employer (Company, College, Non-Profit, etc.).

Salariesindesign in Design Charts for Better Typography and Color

Through the Generations: How the Web is Being Used
This infographic breaks down common internet usage patterns among different generations, including Millenials, Gen X, GI Generation, Silent Generation, and the Boomers.

Throughthegenerations in Design Charts for Better Typography and Color

The Awesome Evolution of the Internet
This is a fun infographic that breaks down the evolution of internet users from the beginning of the web.

Evolutionoftheinternet in Design Charts for Better Typography and Color

The History and Present State of Domain Names
Ever wondered what the evolution of domain names looks like? This infographic breaks it down from the first .net domain name in 1985 through now.

Domainnames in Design Charts for Better Typography and Color

The Evolution of the Blogger
An interesting infographic that shows the evolution of bloggers from those keeping online diaries to company bloggers, vloggers, and others.

Evolutionoftheblogger in Design Charts for Better Typography and Color

The Power of WordPress
This infographic showcases the power of WordPress as both a CMS and a blogging platform. It includes a timeline of WordPress from May 2003 through September 2010, as well as details on the types of sites using WP and daily user activity.

Powerofwordpress in Design Charts for Better Typography and Color

Multiple Identities
This infographic discusses what profiles users utilize to sign up for and use different services across the internet, including Google, Facebook and Twitter.

Multipleidentities in Design Charts for Better Typography and Color

The Internet in 2020
Here’s a great graphical representation of what the internet is predicted to look like in 2020, based on current data. It covers how many people will likely be online, who those people will be, and more.

Internetin2020 in Design Charts for Better Typography and Color

Origin of Important Typefaces
This infographic shows a timeline of when important typefaces were developed and by whom.

Typefaces in Design Charts for Better Typography and Color

Just How Massive is Google, Anyway?
Figuring out just how big Google is can be tricky. This infographic sheds some light on the subject.

Massivegoogle in Design Charts for Better Typography and Color

The History of Programming Languages
This infographic from O’Reilly shows the history of various programming languages, from 1954 until 2004.

Programminglanguages in Design Charts for Better Typography and Color

Dribble: What Is It Used For?
An interactive HTML5 infographic that offers details about Dribble usage and users.

Dribble-pie-chart in Design Charts for Better Typography and Color

The World of Data We’re Creating on the Internet
This infographic from Good Magazine shows how we use the internet and the data people create on a daily basis, including email, video, and other content.

Datacreation in Design Charts for Better Typography and Color

The Brads – Learning About Contrast in Design
Contrast is a very important concept designers need to grasp if they want to be successful. This infographic/comic strip from Vectortuts+ explains contrast in an easy-to-understand way.

Contrastindesign in Design Charts for Better Typography and Color

(ik)


Dear Web Design Community, Where Have You Gone?

Advertisement in Dear Web Design Community, Where Have You Gone?
 in Dear Web Design Community, Where Have You Gone?  in Dear Web Design Community, Where Have You Gone?  in Dear Web Design Community, Where Have You Gone?

As Web craftsmen, we are living in exciting times today. The frenetic pace of evolution in our industry has created remarkable opportunities for our work. Our established set of design and coding practices is more comprehensive than it has ever been before. Our designs are becoming more usable, our code more scalable, our layouts more responsive. In fact, just by comparing our design processes to those from a decade ago, it’s remarkable to observe how quickly we’ve developed and honed our craft over all these years.

However, the maturity of our industry is far from being complete. While producing a myriad of technological advancements, we have outpaced other developments along the way. These developments aren’t related to the lack of cross-browser standards support or technical downsides of the tools we are using. No, they have a different nature. They have emerged within our design community — a community which is now so fertile and diverse that it is becoming increasingly difficult to ensure its professional maturity.

In fact, there are many issues that require a thorough, profound discussion within our industry, yet they are not properly discussed for one reason or the other. This article is based on my recent, often unrelated, observations of our community. It features my personal opinion on the problems we need to tackle and conversations we need to start to ensure its healthy evolution.

Where Did The Community Spirit Go?

I was very lucky to have experienced the development of the Web design community from its early days on. As a passionate newcomer to the industry, I was captivated by the sense of enthusiasm that seemed to be flourishing everywhere and spurring everyone. It was a strong and genuine feeling that was sparkled among dozens of sites and magazines and fueled by the motivation of experienced and non-experienced designers. The community was reasonably small and therefore very welcoming and supportive, so everybody was perfectly fine with asking lengthy questions and providing detailed answers.

I clearly remember in-depth discussions with hundreds of meaningful, engaged comments, in which designers would thoroughly analyze the techniques presented and suggest improvements or alternatives. I remember having experienced print and digital designers writing articles and teaching inexperienced designers the obscure details of and practical tips about the new craft. I remember vivid debates spreading from one site to another, connecting designers and building professional relationships in the community.

These discussions still take place today. There are many more designers and developers out there encouraging these discussions. The remarkable work of people like Paul Boag, Dan Mall, Jeffrey Zeldman, Francisco Inchauste, Chris Coyier, Simon Collison, Andy Clarke, Paul Irish, Chris Heilmann, Jeffrey Way, Trent Walton and many others is a vivid manifestation of the tremendous care and dedication of designers and developers to our industry. There are literally thousands of talented folks out there who are writing articles and releasing wonderful new tools and resources for all of us to use. That’s great. That’s great because all of these contributions bring our community much further.

However, every now and again I can’t help but realize that the number of active contributors with knowledge and experience hasn’t increased proportionally to the overall magnitude of our growing community. Way too often I find it extremely difficult to find meaningful debates spanning over the whole community — debates that would create a strong echo and prompt us all to revise, extend or adjust our practices and hence become better professionals.

Hashbang-community in Dear Web Design Community, Where Have You Gone?
The recent hashbang debate is an excellent example of community-wide discussions that our community could use.

Way too often do I come to the conclusion that this remarkable, inspiring enthusiasm we once had is now gone. What remained are stranded cliques of passionate designers who lead design discussions privately and separately, often unnoticed by the vast majority of the community.

The tragic irony is that although we are probably one of the most connected professional communities out there, it seems that we are increasingly not connecting. It’s not that we’ve become just a bit too comfortable with the processes we’ve developed over the years nor that we don’t care about improving our design and coding skills. In dialogue with our readers and colleagues at conferences or even online, I’ve become confident that this development has entirely different roots.

Finding Time to Contribute

Since there is so much going on the Web these days, it seems only reasonable that many of us might experience difficulties finding time to actively engage in professional discussions. Personally, I am just as guilty as the next guy, as I find it extremely difficult to read more than 5–7 design pieces a day — not to mention commenting on any of them. I’m trying to challenge myself to be more responsive and engaging. Sometimes it works, sometimes it doesn’t, but I have firmly committed to this change and maybe — just maybe — so could you.

I believe that the lack of time is one of the reasons for our changed behavior online. Our emails have become shorter, and so are our blog posts and comments. Our interest has become much more difficult to enrapture, and so we’ve become more passive and less critical. We way too easily consume and accept ideas, designs, concepts out there, sometimes without even questioning their validity and correctness. Instead of debating, we agree; instead of criticizing, we accept — or simply click away and ignore the discussion altogether. And this is the reason why many conversations in the community do not get a critical mass of interest.

Design-pet-peeves-community in Dear Web Design Community, Where Have You Gone?
Web design discussions on Quora and StackExchange sites are wonderful examples of websites that we have already started using to exchange ideas, ask questions and conduct valuable design discussions.

The worrying part is that the number of the less experienced active contributors has increased exponentially. Due to that, I am afraid that the community is not led in the right direction. The true leaders — professional, knowledgeable designers and coders — are busy. Busy with their work or perhaps they feel that it’s no longer worthwhile for them to spend much time contributing. I hope this attitude can change. We need more professionals to find time to contribute and help to teach others. After all, so many of us are self-taught. And where would we be today without the contributions of others?

We need more meaningful and helpful discussions within our community. Finding time is difficult, but we don’t have to jump into writing or commenting with both feet. An occasional comment, tweet, reply or short blog post about whatever it is we’ve learned or thought would already help; it might just as well invoke thought-provoking discussions by other members of the community. As artisans of the Web, we love to discuss things that are important to us — be it design, coding, writing or anything else. We might have no time for profound writing, but we certainly have enough time to suggest an idea and encourage our friends to join in the discussions. Taking just a couple of minutes every day to think about the craft we love will bring us further and accumulate the wisdom within our community.

Francisco Inchauste summarized this point nicely in one of our recent conversations: “Everyone has a perspective and experience to share. Without more perspectives, we’ll become limited in our growth. The community is only as strong as our weakest people. To improve, we need to lift others up by helping to educate and guide.”

We Need to Curate Valuable, Meaningful Resources

Probably the easiest way to jump into design discussions would be by observing and replying to the tweets marked with the hashtag #design. Well, that’s what I thought before adding the #design column on my Tweetdeck a couple of weeks ago. After a couple of days of occasional scanning of tweets in that stream, I did find a couple of interesting discussions; however, more often than not I stumbled upon loud, inaccurate and promotional tweets which led to tutorials, freebies or inspirational websites.

Don’t get me wrong: I have nothing against these resources per se, but I don’t quite understand why we, multi-talented, versatile craftsmen of the Web, are restricting the use of such a powerful medium as Twitter primarily to these resources. Why don’t we use it for meaningful discussions as well? Have we somehow become blindfolded by pure eye-candy or tremendous technological opportunities we have now with jQuery, CSS3 and HTML5? We are experimenting with visual and interactive enhancements in our tutorials and our designs, yet we tend to forget about the fundamentals of our work — our design principles, the quality of our processes and the integrity of our creations. We could all benefit from writing and talking about the ways we work, the decisions we make and the solutions we come up with.

Just compare finding a jQuery slideshow plugin against finding a practical resource on UX design patterns. Or finding a social media icon set against finding detailed case-studies written by experienced designers. Valuable, useful resources are becoming rarities and unfortunately many of them just do not get the attention they well deserve.

We need to support and curate the creators of thought-provoking and valuable resources and help them maintain and support these resources. We need to support them because they are the ones that raise questions and seek for answers; they are the ones that support the maturity of our profession; they are the ones that are not afraid to question status quo and encourage experimentation, sharing and innovation — the so needed attributes of our exploding industry.

Html5-boilerplate-community in Dear Web Design Community, Where Have You Gone?
HTML5 Boilerplate is a remarkable example of a cooperation of dozens of Web designers who share their thoughts and insights to create something useful for all of us to use. Unfortunately, many useful projects on Github do not manage to get such strong community-wide support.

We can use our communication channels wisely and invite our colleagues and friends to join in the discussions, sharing opinions and spreading the word about those of us who truly dedicate their time and effort to produce useful, valuable resources. I am certain that by doing so, we’ll be able to unleash the remarkable potential for a strong and supportive exchange of ideas and expertise.

The emerging conferences like Fronteers, Brooklyn Beta and New Adventures in Web Design show very well which benefits a strong community has: it is inspiring, helpful, forward-thinking, challenging. I will never forget the moment when I was sitting among the attendees during one of the conference’s talks and my neighbor turned to her colleague and whispered, almost mindlessly: “I feel that these talks are going to change my views of design forever”. I’d love to experience this feeling in our online discussions, too.

Community-Wide Discussions and Polls

There is so much content out there so that our focus is distributed among dozens of resources and discussions every day; it’s not easy to see how exactly we could lead large community-wide discussions. A blog’s audience is usually limited by its RSS-subscribers, random visitors and social reach of the blog owner. Spreading the word in social circles outside this audience might work to some extent, but it usually won’t help reach the vast majority of the community, especially if the blog is relatively small or obscure.

We need to have some sort of a mechanism that would connect like-minded designers and developers which are not already connected via other media. Twitter’s hashtags are a good example of ways how we are already trying to solidify exchange of ideas and thoughts. But we can make it better.

So what if we had a consistent standard in place? We could strengthen these exchanges through hashtags by developing and having the community adapt some common tags to use en mass. For instance, #design_type, #design_layout, #design_js and others. We could even conduct community-wide polls (#design_poll) that could be easily recognized and retweeted by users with smaller as well as larger followship, thus spreading the word and strengthening the active participation within the community. We could have a website tracking these hashtags, presenting the most popular discussions and filtering spam and other malicious activities.

The same mechanism could be used for supporting valuable design resources and their creators as well as passionate designers who write insightful articles or produce useful resources. When elaborated properly, this approach will make it easier for us to connect and participate in large, community-wide discussions. These discussions might even spread beyond the limits of our community, providing a different perspective on our conversations by professionals from other industries.

So What Exactly Should We Be Discussing?

As Web designers, we’ve come a long way. We’ve shaped a new, strong industry and developed professional design processes. We also have learned a lot on our journey — be it some bits of psychology, copywriting, marketing or other related disciplines. If you think about it, that’s already a massive achievement, and so we have a damn good reason to be proud of what we have contributed to all these years altogether.

However, like in any other industry, we need to permanently revise our practices, innovate and improve our design processes. In fact, there are a number of things that might need to be extended and reconsidered. Let’s cover the not-so-obvious ones.

Our Professional Vocabulary

As mentioned above, when it comes to Web design, there are always so many different disciplines and professions involved, that it is becoming increasingly difficult to make sure that everybody involved is on the same page in terms of vocabulary used in our discussions.

Misunderstandings between designers, developers and stakeholders are the running joke in our community. And there is a reason behind it: the vocabulary we are using has dramatically evolved over years — it was primarily expanded, sometimes with abbreviations and concept titles which are counter-intuitive or misleading. We have applied terms from print design to Web design; we have coined new terms for new concepts and methodologies; we have introduced terms that might have become outdated today (think of the outdated floppy disk symbol for the “Save” icon). The result is a quite sloppy and inconsistent vocabulary — we often have various terms describing one concept, or one term describing various concepts.

Unsuckit-community in Dear Web Design Community, Where Have You Gone?
Unsuck It explains terrible business jargon in plain words. Hopefully, we won’t need something like this for the design community as well.

For instance, there are design attributes that we call ‘responsive’, ‘adaptive’ or ‘flexible’, but what exactly do we mean when we apply them? Different designers might even have a different idea on what they mean with the word “design”; is it visual design, design as a concept or maybe UX design? And what is UX exactly anyway? The same problem occurs when we discuss terms such as “HTML5″, “page”, “fold”, “navigation” and others. Just imagine how devastating the results would be if any other professional industry, e.g. medicine, wouldn’t have a common vocabulary for its technical terms?

At the New Adventures in Web Design Conference last month, Dan Rubin talked about this very issue, saying that the industry as a whole needs a common grammar and vocabulary. He asserts that the ones we have now, were perhaps somewhat hastily chosen. And that with some careful thought and planning, we can design a much more accurate vocabulary to help avoid the confusion which can stem from the existing one.

We could use more precise and intuitive terms which would be based on certain concepts that are familiar to us and other professionals. As Dan noticed, “responsive design”, coined by Ethan Marcotte, is an excellent example of such a term. It derived from the concept of “responsive architecture” which explores how physical spaces can respond to the presence of people passing through them. So instead of creating unchanging spaces that define a particular experience, they create spaces in which inhabitants and structure can — and should — mutually influence each other.

Applied to Web design, it means that we could treat our designs (very much like these spaces) as facets of the same experience. The concept can be easily explained and understood. It’s not too technical, it’s not too abstract and it’s not chosen randomly. It is rational, visual and memorable which are all excellent qualities for a term describing a new design approach.

Perhaps we could create a standardized design language which would accumulate our vocabulary and provide us and our stakeholders with a consistent and unambiguous terminology for our discussions. Finding a common vocabulary is a challenging task and it’s an ongoing process that would need permanent revisions and updates.

Our Design and Coding Practices

Actually, we need to refine more than our design vocabulary: our design and coding practices require regular revisions as well. Faced with new design requirements in our regular work, we keep conquering design problems and exploring appropriate solutions for them. These activities are the driving force behind learning; they heavily influence the decisions we make once we approach similar design problems in the future. This is what makes us experienced professionals.

Method-and-craft-2-community in Dear Web Design Community, Where Have You Gone?
Method and Craft is an excellent website where professional designers and developers are sharing tips about their workflow and design processes. This is a goldmine for newcomers to the industry.

We learn something new every single day. We discover a new CSS trick or a new UX tweak. An obscure Photoshop technique or a beautiful font pairing. Our convenient coding techniques are gradually dating as browsers become more capable and so we discover that certain browser hacks are no longer necessary. We find new ways of how certain common conventions could or should be adjusted. All these small things we discover in our daily routine help us improve our skills and workflow. Actively exchanging thoughts and methodologies with your colleagues will mutually benefit and improve the overall design and coding practices.

We shouldn’t be afraid of asking challenging questions or posing bold statements. If you feel that we should all stop using CAPTCHAs, then say so and explain your rationale behind the argument. If you think that there is a way to reinvent scrollbar, say so and explain how exactly you imagine this technique to work and why it’s better. And if you are struggling with a personal problem and would like to hear how the community members managed to solve it, say it, too — it’s very likely that other members of the community have had similar problems and will be glad to join the discussion and help out.

Our Professional Ethics

Saying “no” can be extremely difficult sometimes, especially when personal or financial incentives are at play. However, as professionals, we owe it to ourselves and to our projects to not get enticed by offers and suggestions that do not wholeheartedly coincide with our intentions and objectives. The former can bring temporary benefits, but if applied consistently, the latter will bring long-term benefits.

We need to become more aware of the ethics that we should be following while designing, coding, writing, editing and publishing on the Web. The times when soulless copy-pasted press releases were used “as-is” across online publications are long gone, so let’s stop doing that. Cheap generic stock photos neither visualize nor support the article, so let’s stop using them, too. Professional publications often use “nofollow” attribute to block link-droppers from gaining Google’s link juice; and most users will not click on links titled “Milestone Professional Web Design Agency”, so let’s stop doing it as well. There are many similar examples which we can use to adapt, and optimize our online behavior accordingly.

Ethics-community in Dear Web Design Community, Where Have You Gone?
The website Ethics and Web Design is a valuable resource which covers the fundamentals of professional ethics in our industry.

As content creators, we often depend on advertising, and that’s sometimes the necessary evil that we need to accept to be able to monetize our dedicated writing efforts. And there is nothing wrong about it. However, we need to set clear limits to how the advertising can and how it cannot be presented on our websites. For example, text link advertising and sponsored posts should always be clearly marked as such. We should have a strict separation between content and advertising. Each of us could design a set of personal principles for his or her websites (publishing policy), publish these rules online and stick to them no matter what. This way the readers will respect you and appreciate the simple fact that you are strongly committed to quality work.

We could benefit from being more critical about our content and the way we present it online. It means paying more attention to copy, consistency of our writing style, quality of images and image captions, design of code snippets etc. These details give our writing a different tone; they empower our thoughts and make the content more trustworthy and reliable. Why don’t we make our work more challenging by trying to make every article we publish at least a tiny bit better than the previous one? We could try not to just “put stuff out there”, but curate our delicate ramblings, making sure that every published article has the highest level of quality that we can afford for it. A style guide can be helpful in this case, especially for larger websites.

Photoshop-community in Dear Web Design Community, Where Have You Gone?
Photoshop Etiquette Manifesto is a website listing helpful and subtle suggestions to organize your Photoshop documents — making the transfer of them less painful.

In Web design it means to stop using anti-patterns — design patterns which are created specifically to trick our users. Instead, we should respect and advocate for our audience and protect their interests. Think about building loyal, honest, authentic user base for your own project or your client’s brand and think about the quality of relationships you create with each user.

Not only should our designs be usable for our visitors, but also our code should be maintainable for developers. Just like with content, you could come up with your set of standards which you’d like to follow in your work, make it public and stick to it. Make it your final checklist item before you hit that “Publish” or “Commit” button. That’s what will make people look up to you and respect your work.

Bottom line: we should strive for responsible Web design that not only embraces best design and coding practices, but also respects our publishing policies, protects the interests of our users and supports the professional work of our colleagues.

Our View of Web Design Trends

As professionals who care about producing beautiful, top-notch products for the Web, we love to explore innovative design and coding techniques. We love to take them apart and put them together again, learning about their potential during the process. We love to discuss them with our colleagues and keep them in mind for upcoming projects. The more other designers use these techniques, the more important they become to us. Among ourselves, we start to respectfully call them trends.

Nevertheless, trends can be dangerous and misleading beasts. They give us an exciting feeling of having a valuable insight that most of our colleagues don’t have yet. We feel fortunate to have discovered one early enough to use it effectively before it becomes common practice. Trends are precursors of the “next big thing,� and so we pay attention to them.

I can’t help but think that trends seem to be spectacularly overrated in our industry. Often they are regarded as bulletproof solutions, respected and universally accepted for the simple reason that they are innovative and widely used (think of drop shadows or text shadows, for example). I believe that we tend to adopt trends too quickly, often getting carried away by their originality rather than understanding their purpose. This should not be the case. Trends are not a panacea for all of the problems we encounter, and often they don’t even provide an optimal solution for the situation in which they were used in the first place.

Not to say that trends are unimportant, though. They are important, especially when they foster innovation and make us reconsider our design decisions. They can challenge us to be more effective and more thoughtful in our designs. Yet they inevitably fail in one particular regard.

103-russian-web-design in Dear Web Design Community, Where Have You Gone?
We can learn a lot simply by examining obscure websites out there, such as Mospromstroy, the website of an industrial construction company in Moscow. The code is far from optimal, but the website itself reveals some interesting design decisions.

One thing I’ve learned to love over the last year is thoroughly examining unfamiliar foreign websites; Russian and Korean websites, to be specific. I feel inspired and empowered just going through them, creating wireframes from them, exploring their interaction patterns and analyzing the source code. I love wondering about the decisions that the designers must have made and the rationales behind those decisions. However, I can only speculate about them; ultimately, I cannot know the context in which these decisions were made.

This lack of context is the main reason why design trends should be approached cautiously. If we don’t know why a certain technique was used, then we need to properly test and validate it before applying it into our own designs. This is the part of the process that I find is often missing in discussions about trends.

We should observe and analyze trends but not consider them as finished “off the shelf� solutions. Instead of following them, we should be confronting them, improving on them and replacing them with our own. Adding elements to our designs merely for the sake of visual or functional interest is counter-productive. We should rather aim for designs that serve their purpose independent of volatile trends. Why not focus on approaching trends responsibly; building on them when they add meaning to a design and ignoring them when they do not fit the contextual scope of the design problem. This would make our websites original, well-formed and timeless.

Learning From The Past

While trends tell us what designers are doing now, we could expand our skills by drawing on our heritage, too. As designers, we are essentially problem-solvers. We analyze existing problems, learn the given objectives and requirements and then start searching for meaningful solutions. However, initially, it is not a clever visual nor technical approach that we are looking for. We are looking for an idea.

At this stage, what helps us most is our experience and creative thinking. And this is exactly where our rich history of visual communication is particularly useful. By studying lessons from the past, we can better understand how ideas and techniques have emerged and evolved over time. We can learn what approaches other professionals have taken to solve the problems facing them — problems that we still might be struggling with today or will in the near future.

Designishistory-community in Dear Web Design Community, Where Have You Gone?
Websites like Design Is History, Smart History and Graphics Atlas are all excellent resources on the history of graphic design, visual communication and the evolution of design processes. We can learn a lot about our craft by exploring them thoroughly.

Andy Clarke’s talk at the New Adventures in Web Design conference was intriguing and pointed out the need for designers to learn about the importance of storytelling in Web design. Andy shared a unique perspective in his presentation, saying that we can shape how users not only interact with content, but consume it in general. He drew a comparison to comic books and Western movies from the 1960s, which used various techniques to dictate the pace of how their information was consumed — be it through a stretch of silence in a movie or the shapes of panels in comic strips.

We could use this technique in our designs to keep readers in the grip of our content just a little longer. Instead of letting users not have to think, we could do the opposite and engage as well as intrigue them (a good example would be of the Ben the Bodyguard website).

Ben-body-community in Dear Web Design Community, Where Have You Gone?
Ben The Bodyguard keeps you on the site longer than you expect.

We shouldn’t hesitate to apply concepts from other time periods or other media into our designs. The concepts actually don’t even have to be design-related. Instead of thinking in terms of shadows, gradients and rounded corners, maybe we should be thinking in terms of tension, timing and narrative.

Next time you’re looking for an idea, pick up that book you’ve always enjoyed reading and read it with a different perspective. Then, search for any unusual points of view that might be worth bringing to the forefront in your next project. Once you’ve found one, grasp this moment, as this is the very second when a unique, innovative design is born.

In Conclusion

As our industry matures, so will our practices and the quality of our work. We may have successfully solved many important problems in our short history, yet there is still much to be done. Writing and talking about the ways we work, the decisions we make and the solutions we come up with will benefit each of us. We could explore the connections between our discipline and other established industries as well as revise and reinforce our professional vocabulary and our ethics.

Perhaps we could all dedicate 10 to 15 minutes of our time to the community every day. We could (and should) make this a firm personal commitment and encourage each other to take part. Find some time to leave a meaningful comment, support a valuable resource, write a short article about what you’ve learned. All of these contributions matter and will prompt meaningful and inspiring discussions. For starters, we could start raising awareness of our commitments by using the hash tag #wdcommunity.

I strongly believe that if we keep doing this every single day, we’ll wake up one day marvelling at how remarkable our community has become. I, for one, am eagerly looking forward to this day.

Huge thanks to Francisco Inchauste, Chris Shiflett, Nishant Kothary, Paul Scrivens, Andy Clarke, Dan Rubin and others for their valuable contributions and suggestions for this article.


© Vitaly Friedman for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: , , ,


Styling Elements With Glyphs, Sprites and Pseudo-Elements

Advertisement in Styling Elements With Glyphs, Sprites and Pseudo-Elements
 in Styling Elements With Glyphs, Sprites and Pseudo-Elements  in Styling Elements With Glyphs, Sprites and Pseudo-Elements  in Styling Elements With Glyphs, Sprites and Pseudo-Elements

In 2002, Mark Newhouse published the article "Taming Lists", a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite.

Today, on the shoulders of giants, we’ll try to push the envelope. We’ll discuss how you can style elements with no extra markup and using a bidi-friendly high-contrast proof CSS sprite technique. The technique will work in Internet Explorer 6/7 as well.

Figure-1 in Styling Elements With Glyphs, Sprites and Pseudo-Elements

Starting with special characters

There is a plethora of glyphs out there that we could use instead of images to create custom markers. This should improve:

  • performance (there is no HTTP request)
  • usability (these characters will grow or shrink according to user’s settings)
  • maintenance (no sprite to create, no asset to deal with)
  • accessibility (see further below).

Example:

The markers (♠, ♣, ♥, ♦) in the list above are created via the following rules:

HTML:

<ul class="glyphs">
	<li class="one">performance</li>
	<li class="two">usability</li>
	<li class="three red">maintenance </li>
	<li class="four red">accessibility</li>
</ul>

CSS:

.glyphs {
  list-style-type: none;
}

.glyphs li:before,
.glyphs b {
  display: inline-block;
  width: 1.5em;
  font-size: 1.5em;
  text-align: center;
}

.one {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = ''+this.innerHTML);
}
.one:before {
        content: "\2660"; /* â™  */
}
.two {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = ''+this.innerHTML);
}
.two:before {
        content: "\2663"; /* ♣ */
}
.three {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = ''+this.innerHTML);
}
.three:before {
        content: "\2665"; /* ♥ */
}
.four {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = ''+this.innerHTML);
}
.four:before {
        content: "\2666"; /* ♦ */
} 

.red b,
.red:before {
  color: red;
}

How does this work?

  • The value of the content property must be an escaped reference to the hexadecimal Unicode character value (for IE, we use HTML entities).
  • Internet Explorer 6/7 do not support ::before nor :before, so the characters are plugged via CSS expressions.
  • IE8 does not support ::before, but does support the single colon notation
  • Please notice that putting aside browser support, “there’s no difference between :before and ::before, or between :after and ::after. The single colon syntax (e.g. :before or :first-child) is the syntax used for both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3. With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements, in CSS3 all pseudo-elements must use the double-colon syntax, and all pseudo-classes must use the single-colon syntax.”
  • In IE, characters are wrapped in <b> elements, so we have a means to target and style them (you may rather want to rely on a class name for that).

Note that the CSS expressions we use here are not as bad as the ones generally used to mimic min-width and the like. These are only evaluated once, which should result in a small performance hit.

Displaying Images Via Pseudo-Elements

The main advantage of using a pseudo-element for the sole purpose of displaying an image is that it allows designers to crop a sprite. Actually, this is nothing new, and many websites are already using extra (aka "junk") markup to achieve this. For example, Yahoo! Search uses empty <s> and Facebook uses empty <i> tags for this purpose. Going this route allows for the creation of compact CSS sprites, without empty space between the images within the sprite.

The two examples below do not use extra markup and they both share the same sprite:

Sprite in Styling Elements With Glyphs, Sprites and Pseudo-Elements

The two images below — which are the second icon in the sprite — are generated using each technique, respectively.

Nicolas Gallagher’s method

Styling the pseudo-element with a background image:
#first:before {
    content: "";
    float: left;
    width: 15px;
    height: 15px;
    margin: 4px 5px 0 0;
    background: url(sprite.png) -15px 0;
}

The new url() / clip method

Using the content property to insert the sprite which is then cropped with clip:
#second {
  position: relative;
  padding-left: 20px;
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML);
}

#second:before,
#second img {
  content: url(sprite.png);
  position: absolute;
  top: 3px;
  clip: rect(0 30px 15px 15px);
  left: -15px; /* to offset the clip value */
  _left: -35px; /* some massaging for IE 6 */
}

In case you wonder why I use position: absolute in the above rule, it is because the clip property only applies to absolutely positioned elements.

The New Technique: How Does It Work?

  • Instead of styling the pseudo-element with a background, we use it to insert an image (via content).
  • Using the clip property, we crop this image to only display the part we want to show. It means that there is no need to add empty space in the image to avoid other parts to show as well (usually used as background image of larger elements).
  • We offset clip values by using the left and/or top properties.

With a non-cropping technique, images in sprites would have to start from the right hand side or left hand side to accommodate RTL/LTR contexts (background-position: [left]|[right] [vertical value]). Another limitation is creating sprites with images showing next to each other (because other images could be displayed as well). But when cropping sprites, these issues are not in play, so all images can be tucked together.

For an example, see figure below:

Figure-2 in Styling Elements With Glyphs, Sprites and Pseudo-Elements

Advantages of this method over existing techniques

Styled to print
Unlike background images, these images are printed with the document (they are sent to the printer).

Styled to be accessible
Unlike background images, these images will not disappear in MS Windows’ high contrast mode or with high-contrast styles sheets.

Styled to work in IE lt 8
This method works in Internet Explorer 6 and 7 as well.

Note that data URI scheme could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as well.

Styling links with pseudo-elements

Nicolas Gallager shows plenty of cool stuff one can do with pseudo-elements. The only thing I’d add here is the use of ::after to style links à la "read more" and the like, for example:

Read more

CSS:

.more:after {
        white-space:nowrap;
        content: " \00BB"; /* » */
}
.more {
        white-space:nowrap;
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = this.innerHTML+' »');
}

A word about accessibility

You should assume that generated content is read by screen-readers, and since there is no mechanism to offer alternative text for images plugged via the content property, we should make sure those images are purely decorative because screen-reader users would not have access to that information.

Further reading

You might want to take a look at the following related resources:

Credits: Icons by FatCow Web Hosting [CC-BY-3.0-us], via Wikimedia Commons


© Thierry Koblentz for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: , , , ,


Free HTML Newsletter Templates

Advertisement in Free HTML Newsletter Templates
 in Free HTML Newsletter Templates  in Free HTML Newsletter Templates  in Free HTML Newsletter Templates

Choosing a well designed newsletter can provide any marketing campaign a great deal of success. Here are excellent examples of some of the best free HTML newsletter templates that you can use without spending a fortune. No matter how you’d like to update your customers about a particular product or simply want to share some information with them, you can do so effectively by contacting them with a pleasant template in your email. Enjoy!

Clouds Template — Download Link

Freenewslettertemp45 in Free HTML Newsletter Templates

36 Basic | Flexible Templates — Download Link

Freenewslettertemp521 in Free HTML Newsletter Templates

Simon Collison (Retro Stripes) — Download Link

Freenewslettertemp9 in Free HTML Newsletter Templates

Outdoorsy Template — Download Link

Freenewslettertemp15 in Free HTML Newsletter Templates

45royale | Boutique — Download Link

Freenewslettertemp1 in Free HTML Newsletter Templates

Company Newsletter — Download Link

Freenewslettertemp32 in Free HTML Newsletter Templates

Medieval Style Layout — Download Link

Freenewslettertemp12 in Free HTML Newsletter Templates

Nature — Download Link

Freenewslettertemp3 in Free HTML Newsletter Templates

Industrial Template — Download Link

Freenewslettertemp2 in Free HTML Newsletter Templates

Army Look — Download Link

Freenewslettertemp38 in Free HTML Newsletter Templates

Grunge — Download Link

Freenewslettertemp4 in Free HTML Newsletter Templates

Company Newsletter — Download Link

Freenewslettertemp29 in Free HTML Newsletter Templates

Newsletter Template 2 left sidebar — Download Link

Freenewslettertemp31 in Free HTML Newsletter Templates

Company Newsletters — Download Link

Freenewslettertemp28 in Free HTML Newsletter Templates

Meagan Fisher (Air Mail) — Download Link

Freenewslettertemp5 in Free HTML Newsletter Templates

MetaLab (Acrylic) — Download Link

Freenewslettertemp6 in Free HTML Newsletter Templates

2 column, RSS Newsletter — Download Link

Freenewslettertemp10 in Free HTML Newsletter Templates

Mike Kus (Worn) — Download Link

Freenewslettertemp7 in Free HTML Newsletter Templates

Mike Kus (Color Direct) — Download Link

Freenewslettertemp8 in Free HTML Newsletter Templates

1 column, Skinny Format — Download Link

Freenewslettertemp11 in Free HTML Newsletter Templates

Dark and Dirty — Download Link

Freenewslettertemp13 in Free HTML Newsletter Templates

Welcome Template — Download Link

Freenewslettertemp14 in Free HTML Newsletter Templates

Meadows Template — Download Link

Freenewslettertemp17 in Free HTML Newsletter Templates

Malibu Template — Download Link

Freenewslettertemp18 in Free HTML Newsletter Templates

Tech Newsletter — Download Link

Freenewslettertemp48 in Free HTML Newsletter Templates

MetaLab Cool Template — Download Link

Freenewslettertemp49 in Free HTML Newsletter Templates

Fabric Template — Download Link

Freenewslettertemp46 in Free HTML Newsletter Templates

Free HTML Email Template — Download Link

Freenewslettertemp19 in Free HTML Newsletter Templates

Holiday | Seasons Greetings — Download Link

Freenewslettertemp20 in Free HTML Newsletter Templates

Holiday | Happy Holidays — Download Link

Freenewslettertemp21 in Free HTML Newsletter Templates

Free Sample Newsletter Template — Download Link

Freenewslettertemp22 in Free HTML Newsletter Templates

Friuts Store Template — Download Link

Freenewslettertemp23 in Free HTML Newsletter Templates

Free Newsletter Templates — Download Link

Freenewslettertemp24 in Free HTML Newsletter Templates

Free Newsletter Templates — Download Link

Freenewslettertemp25 in Free HTML Newsletter Templates

Free Newsletter Templates — Download Link

Freenewslettertemp26 in Free HTML Newsletter Templates

Free Newsletter Templates — Download Link

Freenewslettertemp27 in Free HTML Newsletter Templates

Modern Age Technology Template — Download Link

Freenewslettertemp41 in Free HTML Newsletter Templates

Elliot Jay Stocks | The Cool Collective — Download Link

Freenewslettertemp42 in Free HTML Newsletter Templates

Company Newsletter — Download Link

Freenewslettertemp33 in Free HTML Newsletter Templates

Newsletter Templates — Download Link

Freenewslettertemp34 in Free HTML Newsletter Templates

Blue Newsletter — Download Link

Freenewslettertemp35 in Free HTML Newsletter Templates

Clean Newsletter — Download Link

Freenewslettertemp36 in Free HTML Newsletter Templates

Free Coupons Newsletter — Download Link

Freenewslettertemp37 in Free HTML Newsletter Templates

Gold Autumn — Download Link

Freenewslettertemp39 in Free HTML Newsletter Templates

Classic Template — Download Link

Freenewslettertemp40 in Free HTML Newsletter Templates

Elegant Template — Download Link

Freenewslettertemp43 in Free HTML Newsletter Templates

High Impact — Download Link

Freenewslettertemp44 in Free HTML Newsletter Templates

Spring Template — Download Link

Freenewslettertemp47 in Free HTML Newsletter Templates

Cotton Rag — Download Link

Freenewslettertemp50 in Free HTML Newsletter Templates

Mute Template — Download Link

Freenewslettertemp51 in Free HTML Newsletter Templates

Articles and Resources

(ik)


Are Touchscreen Tablets Effective Design Tools?

Advertisement in Are Touchscreen Tablets Effective Design Tools?
 in Are Touchscreen Tablets Effective Design Tools?  in Are Touchscreen Tablets Effective Design Tools?  in Are Touchscreen Tablets Effective Design Tools?

Regardless of the final platform — desktop, tablet, mobile — most designers start their explorations on paper. Depending on the designer’s preference, the paper may be bound or unbound, lined or unlined, smooth or ridged. And while the materials may differ, the goal is the same: to quickly explore a variety of concepts.

The designer’s sketching tools haven’t changed much over the years, but the role of sketches has evolved. Instead of rushing to convert them to a more polished form, designers now often share early sketches with clients. Their roughness suggests that the designs aren’t “done,� which encourages feedback and facilitates collaboration.

While interest in sketches has increased, sharing them with team members is still challenging. Most sketchbooks are too small to invite everyone to huddle around and look at. Besides, teams are often distributed around the world, so a digital format is essential. Scanning produces high-quality images but is often a hassle because scanners are typically a shared office resource. Photographing with a smartphone or digital camera works fine if the lighting conditions are just right.

What would really benefit designers is the digital equivalent of a sketchpad and pencil. Sure, Wacom tablets have been around for a long time, but they tie designers down to the laptop or desktop computer. Personally, one of my favorite things about sketching is being able to walk away from my desk. No email. No Twitter. No distractions.

When the iPad came out, it seemed like it would address designers’ sketching woes, but the early styluses and applications were disappointing. One year later, there are far more tools to choose from, but they still have a long way to go.

In this article, I’ll share my personal evaluation of touchscreen tablets as design tools, specifically for early UI sketches and storyboards. To help guide the evaluation, I created a few pen and paper sketches for comparison. Then, I tried to recreate these sketches using a sketching application and a variety of styluses. As you’ll see, the current devices, apps and styluses all have a number of weaknesses. If you’re like me, you may want to stick with your old notebook and pencil a while longer.

Lead Image in Are Touchscreen Tablets Effective Design Tools?
iPad with stylus beside a 9 × 12 sketchbook with pen.

The Devices Reviewed

Touchscreen tablets hold much promise as design tools, but several limitations should be pointed out.

First, the screen real estate doesn’t come close to a typical 9 × 12 sketchpad. The diagonal length of the iPad is 9.7 inches (246.4 millimeters), the XOOM is 10.1 inches (256.5 mm), the Touchpad is 9.7 inches (246.4 mm), the Playbook is 7 inches (177.8 mm), and the LG G-Slate is 8.9 inches (226.1 mm).

Secondly, these capacitive screens can’t sense pressure, which makes it impossible to incorporate common sketching techniques such as shading into a design.

Lastly, none of the latest tablets can produce ballpoint precision, no matter what the application or stylus. This is a technical limitation: the low-resolution sensor panels can’t detect a stylus’ input if it falls between adjacent capacitive elements; hence the large tips on most styluses.

Touchscreen technologies are rapidly evolving to minimize these last two limitations.

The Applications

The XOOM, Touchpad and Playbook haven’t released sketching apps yet, so this evaluation was limited to Apple’s App Store, which contains dozens and dozens of drawing apps.

Because most preliminary UI sketches are drawn freehand, I eliminated template-heavy apps such as OmniGraffle and Freeform. Next, I ruled out apps like SketchBook Pro, since their broad feature set is more appropriate for full-color drawings and paintings.

My final list included Adobe Ideas and Penultimate. If your sketches have limited text, you may want to use Adobe Ideas because the app has stroke smoothing as well as a full-screen view. On the other hand, if you plan to include a lot of annotations and UI text, then I recommend Penultimate for its ease of use and ability to handle sketching and writing equally well. The one big downside with Penultimate is the lack of a full-screen view. To see Penultimate in action, I’ve prepared a video for you towards the end of this article.

IMG 0342 in Are Touchscreen Tablets Effective Design Tools?
Penultimate Notebook view.

The Styluses Reviewed

Choosing the right application is important, but what really differentiated my touchscreen sketching experiences were the styluses themselves.

Smashing Styluses in Are Touchscreen Tablets Effective Design Tools?
Eight popular styluses: BoxWave, Griffin, iClooly, Pogo, Dagi, AluPen, Hard Candy, Stylus Socks.

In deciding which one to buy, here are some questions to consider and ask yourself:

1. What Types of Tasks Will You Be Performing?

Most styluses on the market — Griffin, BoxWave, AluPen, Hard Candy — have a rubber tip. Other materials you’ll come across are capacitive fabric (on the Stylus Socks), foam (Pogo), plastic (Dagi) and metal (iClooly). In my experience, the rubber-tipped ones work well for sketching and text, whereas the rest tend to work well for either one or the other. For example, the Stylus Socks is great for sketching, and Dagi seems better for cursive writing. Unfortunately, the Pogo foam tip didn’t work well for either task.

2. How Does It Feel in Your Hand?

The styluses vary in weight, finish and length. For example, the aluminum Pogo is quite light at 0.6 ounces, whereas the chrome Hard Candy is the heaviest at 4.2 ounces. The other styluses weigh slightly more than the Pogo, similar to a good-quality ballpoint pen. Similarly, the grip varies from stylus to stylus; the Griffin is smooth, the AluPen is textured like a chunky pencil, and the Stylus Socks is tapered like a paintbrush. The weight and grip that feel most comfortable are generally a matter of preference.

3. How Do You Want to Carry the Stylus?

This is a minor detail but it can be a deal-breaker for some people.  If you want to attach the stylus to your tablet, then it’s worth noting that the Griffin, BoxWave, Dagi and Pogo all have a clip. The Stylus Socks, Hard Candy and AluPen styluses don’t have any contraption to attach them to a tablet, although the AluPen does have a nice case. A few of the styluses also have a pen at one end; it’s optional on the BoxCase but built into the Hard Candy.

Having tried out these eight styluses, I recommend the Griffin and BoxWave for their superior sketching and writing and because they “just feel right� in my hand. Although they were better than the others, they still weren’t ideal for UI text. I often found myself incorporating dashes instead of descriptive text because the results were not optimal. If your sketches have limited text, then the Stylus Socks and AluPen are strong alternatives. To see how these four styluses work with PenUltimate on the iPad, watch the video below:

Looking Ahead

Even though there are many weaknesses across the board (with the devices, applications and styluses), touchscreen tablets still hold promise as a design tool. The following changes would improve their effectiveness:

  • Increased precision
    Whether it comes from the device, the stylus, the software or some combination of the three, far greater precision is needed by the designer. And achieving this precision shouldn’t require unnaturally slow sketching or tedious zooming.
  • A stylus for every occasion
    In theory, having one magic stylus would be convenient, but why not have different styluses for different creative tasks? Various lengths, grips and tips could be offered, as done for paper sketching.
  • Alternative tablet sizes
    Current tablet dimensions would suffice for one or two small UI sketches. But larger tablets would be invaluable for more involved sketches like storyboards. Current costs make this prohibitive for most people, but eventually the prices will come down.

Some of these ideas might not be far off. Products are evolving from their first generation, plus there are opportunities for better hardware integration between tablets and styluses. For example, Apple filed a stylus patent back in 2008 that included accelerometers that can transmit more precise positional information to the iPad. Developments like these will surely inspire additional tablet innovation in the months and years to come.

References

Products Coming Soon

(vf) (ik)


© Suzanne Ginsburg for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: ,


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress