As we move through the days and months ahead, it’s likely that in short time we’ll find ourselves talking about new design developments that haven’t rolled across our lips or screens yet.

We asked some of the leading web and user experience designers in the field for their predictions about what we might expect to see in the web design world in 2012.

Joining us are: Adelle Charles, Whitney Hess, Lis Hubert, Randy J. Hunt, Franz Jeitz, Michael Martin, Eric A. Meyer, Sarah B. Nelson, Jason Pamental, Jon Phillips, Dan Rose, Jared Spool, Nick Walsh, Tim Wright and Jeffrey Zeldman.

After you’ve had a chance to read their prognostications, please take a moment and tell us yours, too.

  Best wishes for a happy, healthy, and well-designed 2012!

Adelle Charles

I believe a few directions in 2012 will include heavy use of handwritten fonts and an even bigger boom in using font replacement technology (eg. Typekit). More and more magazine and newspaper websites will all jump on the HTML5 bandwagon (thank goodness). You’ll also probably get sick of hearing about ‘responsive web design’ this coming year. Focus and innovation will be on reading and writing apps…how you perform these tasks along with the integration of different platforms. Monthly subscriptions (physical products) will blow up this year and daily deal sites will slow down.

From a visual point of view, I think a lot of web design is too trendy, ‘do what’s hot right now’. I’ve even caught myself starting to do the same thing a few times (you get used to looking at the same websites or apps day in and day out). It can be hard to separate your last visual memory when designing…you just have to be original. Keeping on the original point, I’d love to see designers drop the use of fabric as backgrounds, eg. Mimicking Apple’s new cloud apps (fabric, stitching etc.)

I also hope Internet Explorer gets put to death this year. (Just a wish, I know it won’t happen).

Adelle Charles, @adellecharles, is a designer living in NY. Foodie. Coffee lover. Founder and Chief Product Officer at Tinder, a publishing company which provides publisher tools, subscription and user management to web publishers and a premium reading environment for readers. She also co-founded Carbon Ads & Fuel Brand Network.

Whitney Hess

The rallying cry of the web community in 2011 has seemed to be “make stuff.” My prediction for 2012 is that we’ll soon realize that that was rather shortsighted, and instead will encourage one another to “make stuff that matters.”

I have seen so much incredible talent squandered on designing products that only meet the needs of a small, homogenous, insular group of friends. While this can be fun and challenging for a side project, it is a fleeting satisfaction.

In 2012, mastery of the tools and a cool idea will no longer be enough to get attention. I predict that there will be a widespread movement to uncover and understand deep-seeded, life-damaging problems for sizable communities across the globe, and our efforts instead will be put towards improving their lives and work in ways that empower humanity. Productivity and entertainment tools have their place, but I suspect that we won’t continue to pat each other on the back so vigorously for continuing to crowd the market.

Design is the problem. The social, economic and political environments we will find ourselves in in 2012 will push us towards asking questions before devising solutions, equip us with a longer-term vision, and ultimately deepen our greater purpose.

Whitney Hess, @whitneyhess, is an independent user experience designer based in New York City. She helps make stuff that matters and enhances people’s lives.

Lis Hubert

Now that HTML5 and CSS3 have been unpackaged and utilized, and given the emergence and popularity of responsive and adaptive web design, 2012 will bring us back to the future of the web. After years of driving the two apart, 2012 is the year that we will begin to bring mobile and desktop technologies back together by using the web to bridge the gap between the contexts. From that, we will be focused on designing for a holistic product experience.

Expect to see an explosion of mobile/desktop web solutions that can work on many different devices and platforms. Mobile First as a methodology will grow in popularity, and people will also be thinking more about how their product extends across these many different contexts.

Look for an outbreak in designers and product developers wanting to better understand users in order to create appropriate solutions for coherent experiences. We’ll be looking more and more towards psychology and user research to better understand our user base as well as better translate our product into an interface.

From this we’ll see the appearance of new ways to navigate through site content (in order to stay responsive), as well as new patterns for creating delightful and engaging user experiences online.

Lis Hubert, @lishubert, is a New Yorker, user experience designer, researcher, sometimes speaker and blog writer. As an independent UX Consultant who is passionate about her work, Lis sees herself as a definer and solver of complex problems. Her contributions help in making awesome digital products and services for all us users out there.

Randy J. Hunt

Many exiting things will happen with web design in 2012: further adoption of CSS3, HTML5, web fonts, and “mobile first” as a mindset. The specifics, I can’t imagine. I’ll be surprised—many of us will—and we’ll get excited, beat up these ideas, implement them widely, and push things forward.

I’m most interested in how we, as web designers, will change in 2012.

Designers today have come to a new place: they are conceiving, designing, and branding products of their own. This is especially true when we look at web products. In the past, we’ve been designers that operated as storytellers, wrapping businesses and ideas in consistent narratives communicated with visual wit, novelty, and efficiency. We’d implement those ideas on the web, and we’d do some experiments on the side.

We’re on the verge of something special. Designers are creating products and building brands simultaneously. The product becomes the main expression of the brand and the brand itself can be looked at as a product.

Online and offline have merged, where products and brands are inseparable. In this world the product itself is the expression of the brand. The response to a swipe, a unique gesture, or a notification sound can all establish and reinforce the qualities of a brand. Designers who understand interaction design, experience design, and the building of products will emerge to be some of leading brand stewards.

In other words, 2012 is going to be awesome. We’re growing up and moving fast. Fasten your seat belts.

Randy J. Hunt, @randyjhunt, is Creative Director at Etsy, where he leads the team of designers building web products and creating off-line experiences. Hunt feels strongly that designers must be able to build what they design, a perspective that fits naturally with Etsy’s culture of making and its engineering muscle.

Franz Jeitz

I believe that 2012 will be an organic evolution upon the trends of 2011. Mobile browsing on phones and tablets is only gonna increase which will likely result in even more responsive websites. This is a trend that’s really kicked off. At the same time I also predict to be seeing more native mobile apps.

To predict design trends is almost impossible. However, I think that minimal designs will stay popular with a particular focus on UX design. The same applies to the ever popular vintage/retro design. It’ll probably become more subtle, but won’t go away anytime soon.

With more and more web designers & developers trying to make it in these tough economic times there’ll certainly be a select few who will really set new trends and rise above the average creative. I for one can’t wait to see what these innovators will come up with. Overall I believe that the design & development standards will increase a whole lot. Hopefully we can get rid of ugly websites once and for all.

Franz Jeitz, @fudgegraphics, is graphic designer from Luxembourg who lives in London. Good music, a nice cup of tea and beautiful design is all it takes to make him happy.

Michael Martin

In 2012, I think it’s a given that mobile devices will continue to be a focus point. The interesting part to me will be the battle of native apps vs. HTML5 web apps. Native apps have been leaps and bounds ahead so far, but more and more sites are willing to experiment with HTML5/CSS3.

Not everyone can afford the time to develop a project like that though, and so the majority of sites will keep looking for shortcuts. Services that generate simple mobile sites, or standard native apps will become more popular. And for large systems like WordPress, I think we’ll see more and more people entering the arena of mobile plugins/themes.

I also believe that analytics and data mining will become ever more crucial. As the web continues to fan out over so many different devices, and content is consumed via so many different services, it becomes more important than ever to know which devices and services are bringing benefit to your business, and how you can eek even more out of them.

Michael Martin, @problogdesign, is a web designer living in Northern Ireland. He specializes in WordPress and is the owner of Pro Blog Design.

Eric A. Meyer

The newly emerging design trends of responsive and adaptive web design will continue to gain steam, especially as authors come to grips with mobile devices and what it means to design across form factors.  Closely paired to that will be a growing understanding that mobile devices are a core web experience, not a come-lately add-on.

Standards such as CSS and the DOM will be even more strongly influenced by libraries and preprocessors—jQuery, Less, SASS, and so forth.  The capabilities these tools provide to authors show the working groups what is missing from their specifications, and thus what they need to add—and, in many cases, HOW to add them.

Eric A. Meyer, @meyerweb, is an author, speaker, conference co-founder, consultant, innovator, and advocate of open web standards.  He has been working on the web since late 1993 and lives in Cleveland, Ohio, with his wife and three children.

Sarah B. Nelson

Process-heavy documentation dinosaurs will continue to be marginalized. More designers will embrace – and love – agile methods. Which is good news: business leaders will realize that developers now out-pace designers. They’ll expect us to catch up.

If you aren’t familiar with Eric Ries, Business Model Generation, and Steve Blank’s Customer Development Methodology, you should be. The Lean Startup folks build something, test it, evaluate the results and then repeat the cycle. Why mention it? Lean Startup is essentially an agile (with a lower-case ‘a’) approach to user-centered design and product development. At Lean Startup day at SXSW, guess who wasn’t part of the conversation? Yup, designers.

Despite the growing understanding that design can make or break a product, designers are still seen as a cost center. We don’t do ourselves any favors. A lot of us insist on lengthy, expensive, start-from-scratch, research-heavy processes. Some of us are testy perfectionists, loners, or just not real collaborators. A lot of us spend precious hours creating heavy documentation that is dated before it is completed. Sometimes this is appropriate, but most times it isn’t.

This year, re-imagine the way you work. Resolve to develop your prototyping skills. Get good at sketching in front of people. Learn to facilitate design conversations. Experiment. Question old methods. Get close to agile developer and learn a thing or two from them. These are exciting times—shape the future!

Sarah B. Nelson, @sarahbeee, is the Chief Instigator and Igniter of Passions at Tapir & Tine. Tapir & Tine helps organizations transform from design followers to design leaders through disruptive training, coaching and facilitation. Sarah has led teams at Adaptive Path, Hot Studio, and holds a Master of Design Methods (MDM) from the Institute of Design in Chicago.

Jason Pamental

Web fonts arrived at the top end of our industry with amazing work done by some of the best designers. But we haven’t reached critical mass in adoption, much less awareness. We’ll see that wave start to crest with greater effort in education, the arrival of books on the topic and marketing efforts on the part of Fontdeck, Monotype and Adobe. We’ll also see an increase in creative use of web fonts and more competent implementation of them. I also expect to see new technologies emerge for faster service and better integration in the design process itself. Typecast looks promising as a ‘design in the browser’ tool for type, plus there’s WebInk for using web fonts in Photoshop.

Second, I think we’ll see Responsive Web Design mature and mean more than ‘a better skinny column’ (usually the ‘first effort’). An important step, but we should start to see more creativity applied at the wider end of the spectrum plus better developments in responsive images. A post from Paul Boag outlined an approach using Media Queries to detect height in addition to width –  coupled with widescreen displays this opens up fascinating potential for editorial design that we weren’t really capable of doing previously.

Finally I think we’ll see more designers get to know a CMS and use them in interesting ways. With mobile-targeted and responsive themes, the possibilities for app design and prototyping within the CMS can radically change what individual designers and small teams can accomplish. Projects that took months, dozens of developers and $500,000+ to build can be done by one or two people with a decent open-source CMS like Drupal or WordPress (or Expression Engine for a small cost). The tools have matured such that opportunities to efficiently do large-scale work is just unprecedented.

Jason Pamental, @jpamental, is a web strategist, designer, technologist, speaker, writer, teacher, and irrepressibly curious about almost everything. Always ready to share unsolicited advice, he’s also working on a book about web typography for O’Reilly due out in 2012.

Jon Phillips

Obviously the whole responsive and adaptive web-design concept will keep growing and gain the interest of more and more web-designers in the years to come. I don’t think it is a trend, and I don’t think it will go away anytime soon. In fact, I think it’s now a standard.

Of course responsive web-design means we need new tools and techniques in order to make our lives easier. jQuery plugins like FitVids and techniques like the Elastislide are excellent examples of what can be achieved and what we can do.

I think that in the next year we’ll see a lot more companies and individuals backing either the use of CSS3 Media Queries and responsive web-design, or backing the idea that mobile sites should be complete separate versions. I’m sure we’ll see a lot of breakthroughs in both clans. I’m certain there will be a lot of heated debates (all to make the web move forward of course).

Speaking of responsive web-design, I’m positive we will see a lot of changes in advertising and how ads are displayed on the web. We may see a shift in how people monetize their sites and develop streams of revenues. Responsive ads is one thing, but I think that adaptive web-design means more than just throwing in some media queries, it means we have to re-think how content is laid out, and that also means we have to think about advertisements.

Another prediction—which isn’t really a prediction but rather stating the obvious seeing what’s already happening out there—is I think we’ll see even more sites using of services like TypeKit and FontDeck to display beautiful typography on the web.

Jon Phillips, @jophillips, is a UX designer, musician & entrepreneur. He’s currently working at BuySellAds on their Yoggrt, AdPacks and FusionAds networks.

Dan Rose

While I do see responsively designed sites continuing to be all the rage in 2012, I can imagine designers finally considering content strategy more consistently as positive fallout. Since we have the tools to build sites front ways and back ways, I think content finally gets it’s time in the limelight next year. We’ll start considering what content needs to be served up to a mobile user instead of just reformatting desktop content. Hopefully.

I wouldn’t be surprised to see a movement of design education, involving sites that detail the fundamentals of design theories, typography, shape, color, and the like. It’s only logical considering how much the design & development community openly contribute to it’s education already. We’ve recently started to see kerning and letterform games from Method to Action that support this.

Conversely, I can see web designers abusing webfonts and style trends by not exercising enough constraint.  We’ve unintentionally been caught up in the visual appeal of work we see on Dribbble and hence, we try to replicate style without purpose, myself included. Foundations and fundamentals of solid design, not style, should propel our projects. A knowledge of the “what” and “why” in typeface choice also needs to be evident–I’m just not sure it’s widely adopted yet, or will be anytime soon.

I’m thrilled to be a part of the design community, and I hope 2012 brings an attention to higher standards and thoughtful purpose in our designs for us all.

Dan Rose, @dblizzy, is a User Interface Designer in Syracuse, NY. He’s the author of the Photoshop Etiquette Manifesto for Web Designers, and he writes and speaks about employing higher standards.

Jared Spool

I predict that demand for designers will grow even stronger. It’s clear that the business world is paying attention to the success of organizations, such as Apple and Cirque du Soleil, that have taken over their industries by providing better designed products and services than everyone else. In the boardroom and amongst the executive team, good design is now desirable and worth investing in.

With this increased appreciation for design, comes an explosion in the demand for good designers. While the current largest demands are in big centers, like Silicon Valley, New York, and Seattle, I predict we’ll see a global explosion for talented designers anywhere products are created and services are delivered.

The most sought-after designer will be the person who can do a bit of everything. The majority of organizations that will be paying big bucks for great designers in 2012 won’t be the usual agencies or big corporations with established design practices. They’ll be organizations hiring their first designers, and they’ll expect them to have a broad set of skills.

This means these designers will need to know how to run a small design shop, structure their work, produce the visuals, do the research, create the interactions, build the prototypes, and communicate their vision to the folks doing the implementation. Designers will be designing every aspect of the product or service, not just putting a glossy sheen or spec’ing out wireframes.

My prediction: 2012 is the year of the designer. Are you ready for it?

Jared M. Spool, @jmspool, is the founder of User Interface Engineering, the largest usability research organization of its kind in the world. Jared spends his time working with the research teams at the company, helps clients understand how to solve their design problems, explains to reporters and industry analysts what the current state of design is all about, and is a top-rated speaker at more than 20 conferences every year. He is also the conference chair and keynote speaker at the annual UI Conference and Web App Masters Tour. You can follow Jared’s musings at @jmspool and his research at @uie along with a wealth of resources at uie.com.

Nick Walsh

Look for continued growth and definition of the front-end specialization to bridge the void between designers and developers – it’s not just for large agencies anymore. The technologies behind the user interaction layer will continue increasing in density, and preprocessors (Sass, LESS, CoffeeScript) will only become more ubiquitous as a means to cover nagging shortcomings. With these tools in hand (especially the color functions found in Sass and LESS), rapid in-browser prototyping and design should become more commonplace.

As entrance barriers fall in the world of Git and Github, the prospect of more designers taking part in open source projects is an exciting one. With competitive interfaces, look for these projects to gain larger layperson audiences – and provide a means for upcoming designers to prove themselves outside of unsolicited redesigns.

Mobile first and responsive design are already well entrenched, but it feels as through we’re about to cross the largest threshold – those terms becoming part of the client vocabulary. Rather than needing to convince clients of the benefits that come with increased costs, they’ll begin asking for these techniques specifically – or, at least, become more attuned to the need as more examples become available.

Nick Walsh, @nickawalsh, is a front-end developer and occasional designer at Envy Labs in Orlando, FL, as well as a significant contributor to the interactive training startup Code School.

Tim Wright

I believe that 2012 will push us even closer to the “One Web” ideal that we have all been talking about since the early inception of Web Standards. Designing for a specific device, screen resolution or even bandwidth will officially be a thing of the past as browsers get more advanced access to devices. This prediction comes in two parts:

First, I predict that the Device API that Mozilla and the W3C are working on right now will be flushed out and completed by mid-year; and strongly supported in most versions of mobile WebKit and mobile Firefox. As we gain fine-grain access to things like the camera, accelerometer, battery life, and detailed system information we will be less inclined to build in anything other than HTML, CSS, and JS. The Device API coupled with, the 2011 monster, responsive design will help us create rich applications in the browser and lead us towards what is truly “One Web.”

Secondly, I think that as we build our applications that scale across all platforms and devices we will hit a performance barrier. The finger will be pointed directly at JavaScript and in many cases we will have to ask our selves if a library the size of jQuery is hurting or helping us in the long run. I think the more advanced applications will shy away from larger libraries and ether lean towards writing native JavaScript or using a small more targeted library for the job.

Tim Wright, @csskarma, is UI and UX designer at Boston University and has been been building weird stuff since 2004. Constantly looking towards the future and what’s next with the Web. “If you never question the status quo, you will never make progress.”

Jeffrey Zeldman

Mobile first, responsive design, and mobile-first responsive design will continue shaking up (and shaping up) the industry as we respond to an ever-changing plethora of always-connected internet devices of varying capabilities and screen sizes, helmed by users at widely varying sophistication levels in disparate, highly specific contexts. As this way of designing and developing is currently a vanguard activity, necessity will make it the norm. And as it becomes the norm, committee-driven turf wars that fill home pages with crap no user wants or needs will go the way of the dinosaur. We will also continue to wrestle with content strategy as it applies to the shifting contexts of mobile, desktop, and netbook. Anyone not using progressive enhancement to put content and the user first will find their apps and sites losing favor with viewers. Smart phones with advanced browsers and small screens will put web standards, accessibility, and usability front and center, where they have always belonged.

Jeffrey Zeldman (@zeldman) founded Happy Cog studios, wrote the industry-changing Designing With Web Standards, founded and publishes A List Apart Magazine, co-founded A Book Apart, co-founded the design conference An Event Apart, has one daughter, and lives in NYC.

Curated exclusively for WDD by Debbie Hemley, @dhemley. Debbie is a blogger and social media aficionado. She works with businesses to develop content and social media strategies. Read her blog posts on All the News. You can also follow Debbie on Google + and LinkedIn.

Thumbnail image by: Steve Dean

Now it’s your turn. What are your Web Design Predictions for 2012? Share your thoughts in the comments below.

Never Ending WordPress Business Bundle – only $14!

One of the newest examples is an interactive music video for Evelyn, by ABBY.

It’s a fantastic site that gives you the opportunity to mix different instruments and vocal styles together, while the song is playing, for a completely custom experience.

We asked the developers how they created such an awesome interactive video, and got their tips for working on projects of this type.

1. Where did the idea for the video come from? What was the creative process?

Although we were not directly involved in the creative process we will give you a short summary on how it was created.

We, Steffen & Dominik, just founded a web development agency in Berlin called bleech specializing in HTML5 and other modern web technologies. We have our office in a shared space together with a recording studio which is run by the members of the band ABBY. The space is completed by a booking agency and an iOS agency.

Most of us have known each other since college and we have worked together since then on many different projects in many diverse and creative environments.

The actual idea for the video was developed by a friend of us who studied design. He needed a topic for his thesis and had the vision of creating an interactive experience which lets the user experiment with the different components of a modern song.

2. Can you give a quick overview of the process for actually creating the video, the steps involved, etc.?

One of the biggest challenges for the band was to select the adequate instruments which differ in their sound and characteristics but at the same time have a pleasant sound and harmonize with each other. Additionally they had to ensure that the rhythms and harmonics of the newly integrated tracks did not, at any time, go against each other.

We believe they did a really great job on this.

The entire idea was developed without dealing with any technical requirements regarding web technology. So they started recording one video for each audio track in a historic sound studio in Berlin. This resulted in a total of 20 individual videos, which then had to be merged to make the idea become reality. For this task they asked a befriended Flash developer to make a website where you can control the different tracks and mix your own version of the song. Unfortunately, he faced some difficulties with the syncing process over a network connection, so that early draft never made it to a final release.

That’s when we came in. We felt challenged to prove that it was possible to bring their idea to life with the latest technologies that nobody has yet used in this exact way.

We started building the foundation in a test-driven JavaScript environment to ensure a consistent communication between the videos, our mediacontrollers, and the global timeline module. The mediacontrollers take care of switching the videos and displaying only the currently selected track. The timeline module serves as a reference time for each mediacontroller and syncs them if necessary.

3. What unexpected challenges presented themselves during the project? What advice would you give a developer who wanted to create a project like this?

A tough part in the development process was to keep the videos in sync without doing to many computations and to ensure that even on older computers a good, responsive user experience is possible.

The methods we found out to be most effective were an aggregation of several algorithms which keep the videos in sync and adapt to the machine’s performance by increasing the threshold and the frequency of how often the syncing is triggered.

The biggest challenge though was fine tuning in the millisecond area, as for a song with 120 beats per minute, an offset of 50ms of any of the tracks would clearly be noticed by the listener. Finally, we managed to get all of the audio and video tracks in sync by less than 10ms on high performance computers (like a 2011 MacBook Pro / Air).

If you’re planning on developing a media-driven HTML5 project, be prepared for sleepless nights optimizing small pieces of code, unforeseen browser bugs, and a million possible ways to implement a single function.

4. Where do you see this kind of content going in the next couple of years?

We hope that more developers start to experiment with media-related web projects and hope to see new frameworks being created for media rich applications. Up to this point Java (processing) and Flash still have some advantages for certain use cases.

The most prominent developments in HTML5 at the moment are definitely the audio and video capabilities and we are looking forward to features like the mediacontroller or device element being implemented in new browsers.

With modern server technologies such as websocket, we are waiting to see the delivery of real-time events to the user instead of only serving static, prerecorded content. Additionally, it would be great to see more large scale interactive content that integrates social experience with existing media channels. The usual stuff that everybody is talking about right now…

We are glad to be part of this project and to work with great artists with various expertise. The project has become our little baby and we are really overwhelmed by the positive response.

BTW, we’re looking for people to support our growing team.

What other awesome HTML5 projects have you seen recently? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

The statistics too, have been kind of staggering. One recent study by Flurry, showed that consumers spent 81 minutes per day using mobile apps, compared to 74 minutes of web surfing.

As more people begin to spend time on appms compared to the Internet, you may be wondering if mobile app design is an area you should begin to explore and how transferable your web design skills are.

In this post, we checked in with a number of experts in the field to gain their perspectives. Joining us are Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualtieri, Josh Clark, and J.D. Biersdorfer.

Robin Nixon

Robin Nixon is a technical author and web developer, and is the author of the new book HTML5 for iOS and Android: A Beginner’s Guide.

sWhat advice would you give to web designers who are thinking about entering the area of mobile app design and development?

In my view the quickest way to get into app development is to ensure that you are up-to-date with the latest HTML (version 5) and CSS (version 3) standards, and are as fluent as possible with JavaScript, because pretty soon it is likely that there will be solutions for writing a single web app that can be turned into native apps for all of iOS, Android, Web OS, Windows Phone and more. This will save you from having to learn multiple complex languages and development environments such as Java, Objective C, .NET and so forth, and the time required to port a project to several different devices.

For example, with a solid grounding in HTML, CSS and JavaScript, you can easily assemble great web apps that you can also turn into standalone apps using the information in my book HTML5 for iOS and Android, or there are products available on the Internet to help streamline the process.

With Microsoft now stating that Windows 8 apps will be created in HTML and JavaScript there’s even more reason to ensure you have strong knowledge of these technologies, particularly since Microsoft is known to be moving towards the concept of a single user interface by 2015 (similar to the one seen now in Windows Phone 7 – and especially its forthcoming Mango update).

How transferable are web skills?

Web skills are highly transferable towards app development, if you are using the three technologies of HTML, CSS and JavaScript to build them. But if you plan to take the native route and write your apps in Objective C (for iOS) or Java (for Android), then you need more of a programming background than a web development one, and there’s quite a steep learning curve for each.

Fortunately, for the vast majority of apps, it is possible to use web technologies for achieving similar results to writing native code. It is only when you get to time-critical functions, such as the high frame rate requirements of fast action games, that you have to return to the native language of a device or operating system.

In your opinion, what app(s) do you think are good examples of a well-designed app?

I don’t really like to mention any particular apps as representing good design since there are so many of them, but since you asked the question, undoubtedly an outstanding app is Theodore Gray’s The Elements, which is an interactive 3D exploration of all the elements, in which you can almost imagine touching them because you can rotate each sample, moving them about with your finger tips, and even view them in 3D. For me this is an example of where an eBook (which is what this really is) becomes far more than a simple book to eBook translation (which most other eBooks are), taking books to a whole new level.

The Elements

How do you view this time in web design?

Robin Nixon: I believe that right now is the most exciting time for programmers and developers since the early 1980s, when microcomputers first blossomed. Once the PC took the computing throne, only Macs and the Linux operating system offered any real competition (and precious little at that). But now the operating system wars are on again, this time fueled by the exponential take up of mobile devices such as phones and tablets, and the phenomenal downloading of apps for them, which means there’s a world of opportunities out there. In my view, “There’s gold in them hills.”

Aaron Maxwell

Aaron Maxwell is founder of Mobile Web Up, a mobile web design agency.

What should web designers think about as they embark upon the area of web apps?

Many of the same concepts still apply. As a designer, think about what actions you want the user to be able to take—what experiences you want them to be able to have. This focus is often the best place to start.

Menus are most effective when they do not overwhelm with too many choices. Organize into a hierarchical, drill-down structure, with no more than a dozen choices on each level. Consider whether using a tabbed navigation will help the user quickly take the different action they need.

Spacing of elements is tricky on mobile. Extra padding is a very useful technique on the desktop for semantic grouping; you can place a group of widgets, images, or text boxes together that are related, and distinguish them from a different group just by separation of vertical and horizontal space.

But on a mobile screen, you just have so much real estate to work with. So the designer must be more economical with how elements are spatially separated, padding with just a few pixels rather than dozens. This can work by including other cues. Rounded corners around a perimeter help imply grouping. And different background colors can also communicate a change of context.

What you omit is at least as important as what you put in. Think of it like this: every item you add to the settings menu, for instance, has a cost in added complexity, in time and attention of the user. Carefully consider whether any feature or element is worth it, especially considering the kind of high-distraction environments that mobile apps tend to be used.

In your opinion, what apps exemplify good design?

It’s important to study other highly successful mobile apps to find what’s effective. Look at the famous names: Facebook, Skype, whatever Twitter client is most popular this week. Ask friends and family what apps they use the most, and try to figure out why. (Hint: they may not consciously know why, so asking them directly won’t help much.) Study Mobile UI Patterns.

Sarah Lynn

Sarah Lynn is a web designer and creative and the owner of Sarah Lynn Design.

How do you suggest designers should go about learning mobile app design?

I’ve found some of the best ways to learn how to design for apps is by researching the market. Look at some of the apps out there, analyzing their functionality, what elements they utilize that are already a part of the phone’s offerings and how they could be improved upon to be easier to use. Study the interactions of different elements and how different apps compare to one another. Many companies have already put in the time to do extensive user testing. Learn from what they have developed already and find ways to build upon them and make them better.

There are many great books out there to get you started. One I highly recommend is a book by Suzanne Ginsburg titled Designing the iPhone User Experience. If of course you’re interested in the iOS market. It talks about user testing and how to plan for an app design. A great place to start when you aren’t sure how to go about the process of designing an app.

Learning how to gain user feedback and heavily plan on paper before going to the computer is a great skill for any app designer (or interactive designer in general). Another great way to learn is to get in touch with an app designer who is already producing great work. Ask them to be a mentor and give you any pointers they are willing to offer up. Most designers are willing to spend a few moments of their time if you ask nicely. Get feedback from your friends and other designers you may know. Show them your prototypes and get their feedback.

In your opinion, how transferable are web design skills for designing for apps?

Somewhat transferable. I would say it falls more in the realm of interaction design as a whole. Which encompasses them both.

There are many different things you need to consider though, due to the size of the devices, requirements of the different platforms, and simply because of the way the users interact with apps compared to a website. Mobile user profiles can vary quite a bit, from the typical on-the-go mobile user, to the mobile user who is simply too lazy to grab their laptop and uses their apps while hanging around the house (myself included.) So studying these patterns and designing to fit different lifestyles can be similar in a sense to designing a website. No matter what the medium you’re always looking to design it around your target audience.

Learning to think in a smaller, and often times less flexible format can be challenging. The same goes for thinking about landscape vs vertical & how you might adapt your app to work both ways. Leveraging the mobile device’s built-in tools is another reason why researching is so important when it comes to designing apps. It’s almost best to pick one platform and learn the ins and outs of it, rather than trying to learn them all. It can be quite daunting and overwhelming if you try to learn it all at once.

Just like any new medium, it requires the willingness to learn and keep up-to-date with the fast-paced market to be successful.

Mike Gualtieri

Mike Gualtieri, is a Principal Analyst at Forrester Research and the author of the new report, Mobile App Design Best Practices.

What does a designer for apps need to pay particular attention to in designing a good user experience?

User expectations are higher for mobile apps than they are for websites. Apple’s iPhone apps brought design cachet to mobile apps. Also, the touch and gesture capabilities provide new ways of interacting with apps. The first step to design great apps is to understand your users better than they understand themselves. Traditional quantitative and qualitative research is important to create personas (fictional people that represent your users). Great design comes from imagination— designer imagining what a user would find useful, usable, and desirable in the context of the app.

For mobile apps in particular, designers should consider the five dimensions of mobile design context: location, locomotion, immediacy, intimacy, and device.

Source: Forrester Research, Inc.

What advice would you give to web designers thinking about moving in this direction?

Do it. Mobile app design for smartphones and tablets is a growing opportunity. Everyone needs great design. There are three paths to mobile app development:

1. Native apps. If you have Javascript skills then you have some programming skills. Don’t be intimidated by Objective C for iPhone or Java for Android. Thumb through a book on either and you will be able to get a quick idea if this is something you can tackle. Not all web designers will be able to without further training.
2. HTML5. Apps
3. Hybrid. Is a native application that renders HTML5 inside of it.

All of these development paths require design.

Josh Clark

Josh Clark is a designer, developer, and the author of Tapworthy: Designing Great iPhone Apps and Best iPhone Apps: The Guide for Discriminating Downloaders.

What advice would you give to web designers who are interested in moving into app design and development? What do they need to learn?

In terms of the actual design technologies, there may not even be a need to learn lots more. You can make some mighty impressive app interfaces using our tried-and-true friends HTML, CSS, and JavaScript. I’m not just talking about traditional web apps here, but also so-called “hybrid apps.” These are apps whose interfaces are designed with HTML but delivered as native apps to the various app stores. It’s like distributing your web app through the app store. For web designers, this is an accessible way to get started designing web apps without learning a programming language.

Jonathan Stark has written two great books that give an overview of how to do this, using an open-source project called PhoneGap, which bundles your web app into its own browser as a native app: Building iPhone Apps with HTML, CSS, and JavaScript and Building Android Apps with HTML, CSS, and JavaScript.

Here’s the thing: While you can do remarkable things with HTML5 and CSS3, these technologies just can’t quite match the polish and pizazz of Real McCoy apps, software built with the device’s native language. If you want to build apps with eye-popping graphics, animations, native widgets, and full access to the entire device, you’re better off going native. That means you need to code iPhone apps in Objective-C, Android apps in Java, and so on. These are no-kidding-around programming languages and they can represent a steep climb for web designers to learn. If you go that route, you may want to partner with a more experienced coder to help make your designs come to life. In the meantime, though, experimenting with designing apps with HTML, CSS, and Javascript can be a great way to get acquainted with the platform and even build quick prototypes for native apps.

As for the actual design process itself, designing mobile experiences differs in important ways from desktop design. The two gotchas for newcomers are ergonomics and context.

For touchscreen devices, you have honest-to-god ergonomic issues to contend with. You’re designing an interface for fingers and thumbs, and that means you have to consider issues of comfortwhere does your thumb naturally come to rest on the screen? More than that, there are visibility issues. When you’re working an interface by hand, you’re obviously obscuring the screen. That means you have to design your controls so that they don’t interfere with the content. Both of these considerations—comfort and visibility—explain why most touchscreen smartphones display their main controls and navigation at the bottom of the screen. That’s where your thumb comes to rest when using the phone one-handed, and it also means that you can work the controls without getting in the way of the content. This is exactly the opposite of what we’re used to on the desktop where primary menus and controls go to the top of the screen.

The other area that’s new to consider is context. How and where will people use this app? How does that affect their priorities, and the features you should put front and center? You have to be careful here. A myth has evolved that there’s just one kind of mobile user: hurried, in a rush, distracted. That’s certainly the case sometimes, but not all the time. Mobile isn’t just on the go: it’s on the couch, in the kitchen, waiting at the airport for a delayed flight. All of these situations are moments when your audience has lots of attention to spare and can really spend time with your app. At the same time, mobile devices can also do more than desktop computers because they’re loaded with all these sensors that effectively give them superpowers: GPS, microphone, camera, touch, gyroscope, compass. This device context shapes how your audience uses their phone and will expect to use your app.

All of this means that you have to consider how the device context affects user priorities, and those priorities are likely to be different from desktop priorities. But there’s a tricky twist to this: you can’t confuse this context with user intent. There’s a common instinct to oversimplify mobile apps, to make them desktop lite. That’s wrong. We do everything on our phones these days, and every time you say, “People don’t want to do that on mobile,” you’re wrong. We’ve all had that experience where you go to a website on your smartphone, and you’re bumped to the mobile version of the site, where they’ve stripped out exactly the feature or content you’re looking for. Just because you’re on a small screen rarely means you want to do less. It’s like saying that just because a paperback book is smaller, we should remove chapters. Don’t confuse device content with intent.

What I’m saying is that I believe that in most cases, mobile apps and websites should have thematically similar content and features to their desktop cousins. The presentation and priority may very well change to fit mobile mindsets, but the content should almost always be the same. In fact, in many cases, the mobile versions should do more, because the devices are capable of more. That’s why Amazon’s mobile app can do things that the website can’t do: scanning barcodes, for example, to look up items.

For web designers, this means that you have to start thinking more flexibly about how to build websites. We’ve been doing it wrong for over 15 years, building websites only for desktop browsing. That’s not what the web was designed for. It was designed to be platform neutral, to be displayed on any kind of screen or device. You just don’t know how your website will be viewed now. There are a jillion devices all with different form factors that can access your website now, and that means it’s important to build websites that can adapt to any device. For most of us, this is a new way to think about building websites — it’s not a matter of generating a separate mobile website and a separate desktop website. Instead, it means building a single website that gracefully adapts to each device’s constraints and capabilities.

We are very fortunate here on planet earth that we live alongside the universe’s smartest guy about how to design this kind of responsive website, and his name is Ethan Marcotte. Ethan just wrote a great new book called Responsive Web Design that describes how to go about building sites that adapt their design and features for any device. He’s a genius, and you can be a genius, too, by reading his book. This stuff is as important to the health and future of our craft as the web standards campaign of the last decade. Every web designer should put aside a few hours to knock back that book.

J.D. Biersdorfer

J.D. Biersdorfer is a technology journalist and author of several books on gadgets including Best iPhone Apps.

In your opinion, what makes for a well-designed app and good user experience?

After looking at 400-500 apps for the book, Best iPhone Apps, I think the apps that work best are the ones where the user interface has been specifically designed for the small phone screen and not apps that take the desktop approach (with lots of icons and menus) and try to cram too much into the space. A good app is also a stable app—well-tested and relatively crash-free.

Are there any particular apps that come to mind for being good design examples?

Although I didn’t include it in the book at the time because I found it cluttered and crashy, “AccuWeather” has redesigned its iPhone app into a really gorgeous weather program with big, colorful graphics and a fairly intuitive interface so you don’t have to dig around several screens just to see how hot it is — and how hot it will be. The free and the paid apps differ slightly in the design, but both use the same visual elements to quickly convey weather conditions.

AccuWeather

I also like the “Kayak” app for the stuff the developers put into it besides the usual flight-and-hotel-booking part. For example, there’s a section you can tap to find out how much each airline charges you to check bags, another to find out what stores and restaurants are in the airport you’re stuck in, a currency converter and even a packing checklist to make it a well-rounded practical travel app that’s easy to navigate.

News-wise, I still think the “BBC News” app is great for headline hounds. The app’s creators manages to find a legible way to put nine top stories (with headlines and small pictures) on the home screen, along with a Breaking News banner and a button to tap so you can hear live streaming BBC Radio. It’s very easy to edit the categories of news you want to follow and there are links to popular pre-recorded video and audio clips you can stream, like the brief World News Summary video.

Compiled exclusively for Webdesigner Depot by Debbie Hemley. Debbie is a blogger and social media aficionado. She works with businesses to develop content and social media strategies. Read her blog posts on All the News. You can also follow Debbie on Twitter (@dhemley).

This post was brought to you by the offset booklet printing company, Next Day Flyers.

What are your experiences with mobile app design? What apps do you think demonstrate good design principles and user interface? Let us know in the comments below.

Never Ending WordPress Business Bundle – only $14!

Originally from Latvia, he’s a freelance interactive designer and photographer who’s been involved in a number of high-profile site designs, including Rise of the Planet of the Apes, The Last Airbender, Sweeney Todd, and the Stardust movie site.

Here Andreas talks about how he got started designing for such large studios, what his favorite projects have been, and his design process.

And he offers up some tips for new designers who would like to follow a similar career path.

Where do you look for inspiration, either before starting a project or if you get stuck during the project?

It totally depends. I mean, the most important thing to consider is whatever deadline you have to meet. Sometimes, there’s no time to browse through similar sites to see what others are doing. For example, if a client calls on Friday evening and says he wants to see comps early Monday morning, there’s no time for anything. You just have to do it. Just open Photoshop and go with it. And yes, sometimes I fail when forced to do that, but that’s just part of the risk of this business.

If the project has a better time frame, you can always learn, research, think, plan, brainstorm, and try sketching on paper. You can think more and maybe spend a sleepless night thinking of what you want to create.

Inspiration is everywhere for me, whatever is around me. Photography and film, though, are the leading sources of inspiration for me.

Above is a rendering of the elevator for the DEVIL movie site, created in Maya.

What has your favorite project been to date?

Favorites are always personal projects, of course. It’s something where you are your own boss. But there is one site I’m very proud of, where I art directed: the website for Rise of the Planet of the Apes. I had to do a lot of work for it, even an iPad/iPhone version of the site, plus ads.

Also, there’s something I’m currently working on, which will be great to show off. But you’ll have to stay tuned, I can’t reveal it yet.

Rise of the Planet of the Apes

What’s the process like for working with big studios?

I don’t know. Big, small, there are bad and good people everywhere, so it always comes down to the team you’re working with. Recently, I’ve been pretty happy with the people I get to work with.

Big studios are more serious, and give you more experience. You get to work with their Creative Directors, and in the end, you’re paid well. So it’s an awesome experience. Slowly, you can start applying what you’ve learned from the big guys into the smaller projects and companies. I think it’s a good collaboration that can bring a lot of success in your career.

Rise of the Planet of the Apes

What’s it like to take on a project like Rise of the Planet of the Apes and have it become such a popular movie? To know that your work is being seen by millions of people? Do you feel like it’s a lot of pressure?

When you get a project like Rise of the Planet of the Apes, it makes your hands shaky! Planet of the Apes is a very famous film, and this one was the next step in the established series. When you are making film sites, there’s always times when you’re under pressure, because you know you have to do more than your best work, because the film could be a massive premiere to the world. When I started to work on my part of the project, it was 24/7, no weekends, no spare time, sometimes no sleep. You can’t allow your brain to stop, or for inspiration to leave you.

A lot of people in interviews ask how you feel when you’re uninspired or stuck. This was a project where I had the opposite feeling. Even if you’re spending nights working on it, you’re still enjoying it and putting your soul into all the things you do for it. I was also designing wallpapers, banners, and AIM icons. Some people call this part of the job boring, but for me it wasn’t. This project was a part of my life for two months.

I hope I’ll feel this way about a project again, and that something like this project will come along again. In the end I’m very proud of what I’ve done. It gives me more energy to create more things. When you see the poster you’ve done for a movie on the street, it makes your heart beat faster.

Mars Needs Moms

What kind of budgets, timelines, and processes do you go through when creating a website for a major movie production?

Usually, the deadline is “yesterday.” You have to wait for a lot of design assets. You have to wait for the trailer to come out. Sometimes, you have to work with just the high-res trailer to present your design ideas. Other times you only have some text about the film you’re working on and you have to design from that. It varies. Again, there are good and bad projects.

I can’t talk about budgets because of contract issues.

The perfect project is when you get key artwork, a preview of the film, photography from the production of the film, a creative direction briefing, and other key things. Once you have all these, it’s more satisfying to start the design process. It doesn’t happen often, but I wish it was always like that.

If you could design a site for any company or product, what would it be? I’d love to art direct the new Mercedes site. Do a photo shoot for some cars, retouch, some motion ads, the whole deal. I’d love to do that, and photography is my passion, so I really hope that sometime soon there will be an opportunity for me to work on a project like that.

Above is an image of some in-progress animations and artwork for the Mars Needs Moms site.

What’s your design process like? What steps do you take throughout a project?

The biggest problem I run into is client briefings. A lot of companies you work for may not know what they want, and you can spend weeks comping, drawing, and sketching, and then in the end they choose one of the first things you did for them. So for me, I try to get approval of a briefing and wireframes first. A clearer idea of what they want and what you need to do is always going to result in a better result. So both sides will eventually be happy, since the work process will be more exact.

There are many freelance jobs on the market now, so I try to choose projects with a clear briefing whenever I can.

Once I sign with a client, I usually have a lot of creative freedom, so first I try to come up with some ideas in my sketchbook, write down some thoughts, Google for references, and then go from there to come up with an idea.

I always give options to my clients, too. If I have to design a website, for instance, I’ll show them at least two different comps.

The Underworld Kingdom

How do you deal with criticism on the projects you’ve done? Have you ever had someone just absolutely trash your work?

I think it depends on the person it’s coming from. Every designer has to go through criticism and times when people give negative feedback. Constructive criticism is always good, when it comes from a person you respect and just maybe, if he’s involved in design, you can learn a lot from him. You just have to filter what people are saying a bit.

Another thing that happens sometimes is clients will say things like “This was done in 10 minutes” or “My son can do better” or “This is not the quality that your portfolio shows.” You have to really get used to this kind of thing, because it can really kill your creativity. Of course you’re going to stop working with this client, but it will still affect your future work.

Another in-progress shot from Mars Needs Moms.

How do you deal with a client who insists on doing something you don’t believe will be good for their project? Have you ever straight-out refused to do something a client wanted (or requested they leave your name off the final work)?

Ha, well, we all have to pay bills. The thing is, you get a feel from the start how a project is going to go in the future. So, it’s a matter of your budget, and if you really need the work at that time. I will be honest, and I’m sure 100% of many famous studios are doing this kind of work, when they are just making the client happy, with the ugliest work in the world. Of course it will not go in your portfolio, or your name won’t be on the copyright. But it’s the 21st century and we have to get paid to live.

On any project, even if the client is difficult, you’re trying to do your best and trying to get them to change their mind and listen to your opinion. Sometimes it works, and sometimes it doesn’t. In the worst cases, you’ve done work for the client that you’re unhappy with and they’re unhappy with, and you have to return their deposit, even after you’ve done some work for them.

That’s another point: it’s a must to have a deposit for any kind of work you’re doing as a freelancer. There are many clients out there who won’t pay you on time, or skip paying you entirely. It’s a risk, yes. Big companies pay net30 or even net90, so you have to be prepared to be paid in 90 days rather than right away.

But over the years, freelancers talk and basically we know what the standards are for payment from different companies. And if there’s a huge delay in payment without any reason, we all find out about it and know to ask for a deposit next time.

Again, it’s always better to choose the work you do. It means less stress, more inspiration, and more positive emotions. Consider making your bills lower and enjoying life!

When I was living in Greece, on an island, and the rent was around 350 USD, I wouldn’t take on a project or client I didn’t like. There have been times when the project was interesting, but the project manager was impolite, so you have to skip that as well.

Sweeney Todd

You started working with some pretty big companies while still a teenager. How did you connect with these kinds of companies and start working with them?

I’ll be honest here: I started doing some comps and sketches of projects for big companies, just for myself. Whenever I would see something and think I could make it better, I did. Probably the first thing I had in my portfolio was such a redesign for Audi.com. It wasn’t even pitch work, it was just something I did for myself. I just liked what I was doing on the side. Soon I had opportunities with some small commercial projects, and then I started emailing companies I dreamt of working for. Some people answered and gave me the opportunity to pitch for big companies. Many of these I lost, but some of the companies gave me good feedback, and on some my ideas were approved.

I think it’s about the kind of goals you set. I was very focused on reaching where I am now, and I always did my best and worked a lot. However, now that I’m here, sometimes I prefer smaller projects. Big clients and big projects are always nice for your portfolio, but it’s stressful, and ages you prematurely!

A making-of shot from the site for the movie Splice of the creature creator application. The laboratory here was created entirely from scratch in 3D.

What advice would you give to someone who wanted to follow a similar career path to yours? How would you recommend they start?

Learn, study, experiment. If you’re still at school, spend time thinking about projects you’re going to do rather than going out with friends and figuring out how to get drunk faster. You have to live with design and think about it all the time. Set your goals and work for them. Don’t think about the money. Don’t waste time hoping that Spielberg will call you tomorrow. Just think of it like working out in a gym. You can’t come once and expect to look like an athlete the next day.

Be patient and follow the industry, talk to people, visit blogs for inspiration, and send out emails to art directors or designers whose work you like. Many of them will ignore you (they ignored me when I was a kid), but some of them will be very helpful and inspirational for you. Don’t focus on too much at the start, and don’t think that just because you know Photoshop like the back of your hand that you’re a superstar designer.

Try copying work you like for your own educational purposes. Try to recreate it and add your vision into it, and you’ll find your own style.

End of the World II

Where do you see the future of your work going? Where would you like to be in five or ten years, career-wise?

Hopefully I will have my own studio built close to the beach on any of the south coasts. We’ll produce websites, and do photography and filmmaking. I don’t really aspire to launch any kind of big ad agency one day and become a millionaire.

I’d like to do what I really enjoy and live with that. Smaller budgets, smaller clients. It makes it possible to take it easy and enjoy what you’re doing. If I was after money, I’d move to NYC or someplace similar, but I prefer a small town close to the sea, where the sun is shining 300 days a year!

You can see all of Andreas’ work at his site AndreasWorks.com and also at Dsire. You can also keep up with his latest projects by following him on Twitter @ashabelnikov

What do you think of Andreas’ work? Which sites strike you the most? Please share your thoughts below…

Never Ending WordPress Business Bundle – only $14!

Erik and his wife Joan, revolutionized the world of digital fonts twenty-two years ago when they started FontShop—the first mail-order distributor for digital fonts.

This year, he was awarded the Federal Republic of Germany’s 2011 Design Prize for Lifetime Achievements— a most noble accomplishment. The exhibition, Erik Spiekermann, The Face of Type recently took place at the Bauhaus-Archive Museum of Design in Berlin.

Spiekermann is an Honorary Professor at the University of the Arts in Bremen, the author of the Adobe Press title, Stop Stealing Sheep, and the originator of the colorful map for the Berlin metro system.

He recently took time out of his busy schedule to speak to Webdesigner Depot about typeface design and what he sees next in his future. We thank Mr. Spiekermann for speaking with us and invite WDD readers to comment on how his contributions to typeface design have helped shape your work.

What was the first typeface you fell in love with?
Reklameschrift Block. It was what my neighbour gave me with my first little printing machine when I was 12.

Which of your fonts do you feel should be more popular and why?
FF Info Office because it works well on screen and is really cool but nobody has found it behind the larger FF Info Text and Display families.

FF Info

Being one of the lead font designers in the world, who or what do you learn from in order to keep pushing yourself?
The world out there: technical developments, trends, other designers, other cultures. In other words: by observing what goes on in the visual world.

What are some of your proudest projects ever?
Making the buses and trams in Berlin bright yellow instead of the boring beige they were before. Making it both easy and pleasant to find your way around the Berlin Transit system. And giving Deutsche Bahn (German Railways) their face by designing their corporate design, including all the typefaces which work from the smallest timetable to the largest poster.

What do you think of Apple and their approach to design in general? How does their industrial and web design compare to typeface design?
I bought my first Mac in 1985 and have probably bought every single computer they ever made at one time. I also have a large collection of equipment by BRAUN, most of it designed by Dieter Rams. If you look at the stuff from the 60s now, you see where Apple (i.e. Jon Ives) get their direction. They have learnt to bring objects down to the essentials without making them look boring and purely functional. They know that aesthetics play a big role in function because we do not like to use anything that is ugly. Function also follows form. Perhaps that is the common denominator for my typefaces: I have always designed my faces for a specific purpose, but they always have to look pleasing, whatever purpose they serve.

Can you briefly describe what the current process is like for you to create a new typeface and where do you get your inspiration from?
The question about inspiration is tedious because I work like everybody else. Everything can be inspirational, there is no method or proper process. Like any design process, I look at the brief, take it apart, look at comparable briefs, make analog sketches, discuss with colleagues and the client and then carry on condensing the sketches, at some point digitally.

Please finish this sentence: “In an ideal world, fonts…”
Would be paid for.

FF Meta

What was one of the most challenging typography problems you have ever had to solve?
It is always the same: to find a visual voice for all the communication of a large corporation. It is supposed to express their identity (whatever that may mean), be legible, pleasant to look at, work technically across platforms, and be applicable across the world. I’ve done that for Nokia, Cisco, Bosch, German Railways, Heidelberg Printing and many smaller brands.

What is the plan for rolling out more web fonts on FontShop?
Rolling out more web fonts.

Where are some of the areas where typography is improving and where do we need to see more growth?
Technology is improving for displaying type properly across media.

What are the challenges today for someone getting started in typeface design versus when you first started in the 1970s?
There is more competition out there. While there are fantastic tools available that I would have killed for, it has also become very difficult to master all of them. We are therefore on the way back to share work between people. Some of us are good at sketching, some at programming, some at using production tools. Not one person can do all of it equally well. That is how type used to be made before desktop computers and that is how type is made again today.

How do you view the state of typefaces in the mobile world?
In flux.

Taking into account small sizes, aliasing and browser font rendering engines, which fonts do you think should be used for body text on the web?
The ones that look good.

What’s the most overrated font in the world?
Arial. It totally sucks but has become the standard for many users and even institutions.

Let’s talk a little about the creative process and how you work. Can you describe your ideal work environment?
This is a silly question because I have no fixed formula. Every project is different and the work environment is always different as well. I do not work on my own, ever. (See question “Can you briefly describe what the current process…”)

Which typefaces’ styles do you think will be the most popular in the near future and why?
The ones that express the Zeitgeist, In other words: all the styles that are appropriate, fashionable, legible and cool, how ever that may be defined at the time. We do not have one style or fashion (not even within one culture, let alone globally) anymore but many currents at the same time. Type design has always been eclectic. Type has always mirrored what went on in the visual world. These days it does so as quickly as music does and even more quickly than literature and film because you can design and produce a single typeface in a few days, all on your own. It is only the larger, more professional typographic systems that need weeks and months to complete, but even that is less than what it takes to make a movie.

What’s next for Erik Spiekermann?
Share my time between San Francisco, Berlin and London (to a lesser extent), work less for clients and more for myself. Use digital technology to make analog things.

Exclusive interview for Webdesigner Depot by Debbie Hemley. Debbie is a blogger and social media aficionado. She works with businesses to develop content and social media strategies. Read her blog posts on All the News. You can also follow Debbie on Twitter (@dhemley) and LinkedIn.

How have you been inspired by Erik Spiekermann’s contributions to typography? And, how does the availability of FontShop’s high-quality digital fonts help your work as a designer?

Never Ending WordPress Business Bundle – only $14!

It offers the opportunity for designers to get feedback on their works-in-progress, show off the work they’ve just completed, and otherwise network with others in the field.

While Dribbble has been largely successful in the design community, there has also been some controversy surrounding certain aspects of the site.

Dan Cederholm, one of Dribbble’s co-founders, took time from his busy schedule to answer a few questions about where Dribbble has been, where it is now, and where it plans to go next, as well as to address some of the criticism that’s been directed at it.

We thank Dan for this candid interview and invite all WDD readers to chime in and let us know what you think about it in the comments.

Where did the idea for Dribbble come from? Can you tell us a bit about those early days and how the site evolved prior to launch?
The idea for Dribbble started back in early 2007. When I’d catch up with fellow designers, a common question asked was, “what are you working on?”. I was initially fascinated by the idea of being able to peek over the shoulder of your colleagues as they worked. There really wasn’t a forum on the web to do that.

Early inspiration came from Cameron Moll’s Screen Grab Confab posts on his blog, where the constraints of his blog’s column width dictated how much people could share. Inspiration also came from Twitter, where brevity is king.

Having a pixel constraint on the screenshot upload meant folks could share what they were working on without revealing the entire piece. And like tweets, Dribbble shots are quickly and easily digestible. There’s an addictive quality to their consumption.

As a designer and front-end developer, an idea can only go so far though, and thankfully Rich Thornett was sharing an office at SimpleBits a few days a week while he telecommuted to his day job. Rich is a talented developer, UI designer and product thinker, and it was just my luck that he was willing and excited to start building what would become the first working prototype of Dribbble as a side project.

Over the course of many months, we crafted the interface, went back and forth on a lot of features and polished the UI into something usable.  We then mailed out handwritten postcards with invite codes to our friends along with a t-shirt. This initial wave of beta testers was immensely helpful in figuring out the final feature set that we launched with.

Had the Dribbble founders been involved in any collaborations prior to Dribbble? If not, how did this collaboration come about?
Dribbble was the first time we collaborated, unless you count neighborhood “Dad’s Night” beer meetups and kids’ birthday parties. It was actually our wives that got us together. We happen to live about 50 yards from each other here in Salem, both have 2 kids around the same age. When Rich needed a desk to work at part time, I had one open and the rest happened naturally.

Where do you see Dribbble, and similar sites, in five years? What’s the next evolution of this kind of service?
I don’t know that we’re thinking that far ahead. Bootstrapping the business has meant focusing on very specific goals in order to get to the next stage. First it was beta testing with friends, then letting them invite their friends, then letting folks sign up as spectators, then adding Pro features for a little revenue. In that regard I think we’ve really only begun to scratch the surface at what Dribbble could become.

In terms of evolution, we’ll continue to listen closely to the community and do our best to foster it. One of the areas we’ll be enhancing is helping Dribbblers get hired. Dribbble has become a unique way to find amazing design talent and every day we hear about members finding work directly via their Dribbble profiles. We absolutely want to make that process even easier for both hirers and hire-able designers.

What sets Dribbble apart from the competition? Why should a designer choose Dribbble over Forrst, Ember, Favwork, or one of the other, similar sites?
We don’t worry too much about what other sites are doing, so I can’t speak for them specifically. Hopefully people use the sites they find value in. I do have an Ember account, and it’s a completely different animal. While Ember is a place to collect screenshots from around the web, Dribbble is focused solely on _your own_ work. It seems like people love to compare sites and pit them against each other. I suppose that’s natural, but we’re primarily concerned with what’s happening on Dribbble and not other sites.

Does Dribbble plan to become an open platform? Or will drafting continue indefinitely?
Well, we don’t consider ourselves “closed” Dribbble content (other than private user information) is publicly accessible to anyone.

The number one reason for the drafting process is so that we can control the rate of growth. I’ll say that again. The number one reason for the drafting process is so that we can control the rate of growth.

This has been crucial for us. Since we’re a tiny, bootstrapped operation, the scaling has been a challenge. Instead of taking on funding, we’re preferring to create a sustainable business on our own. The downside is that we need to grow carefully, and slowly. But the scarcity of invites has had a positive affect on the quality of shots being uploaded.

Unfortunately the perception is that being drafted is part of an elite process. But that was never the intention. The truth is, 1.5 employees + an intern minding a site that generates a large amount of traffic and support requests dictates the growth rate that we’ll be able to successfully handle. Because growth means traffic, caching, servers, more beer, more support, less sleep, etc. We want to be ready for the growth. So, the drafting will likely remain for awhile. That said, as we make sure our systems are ship shape, we can increase the amount of invitations that are out there, as well as improve the drafting process for prospects (which we’re admittedly not doing a great job at right now).

What’s the number one reason designers already using the service should sign up for a Pro account?
It supports us and helps ensure its future

We tried our best to create some useful features and then price it low enough where it’d be affordable for all. So far, the response has been fantastic, and the use of Projects and Attachments has really added extra dimension to the work players are sharing. We’re really excited about the ways in which the Pro players are taking advantage of the new features.

What’s the most innovative use of Dribbble you’ve seen among your users?
As I mentioned earlier, people use Dribbble in a variety of different ways. We like this. It’d be tough to choose a single innovative use. The shots I get most excited about usually come about because of something spontaneous that the community sparks: Rogie King’s “charity:water” and the “What state do you live in?” playoff . Lately, I’ve also been amazed by Dana Tanamachi’s incredible typography. She creates amazing type pieces with _chalk_ for various businesses. It’s that kind of unique talent and variety being shared that makes Dribbble so special.

What’s your response to the critics out there who contend that a closed ecosystem like Dribbble contributes to a sense of elitism among some designers?
I’d just reiterate that it was never the intention for Dribbble to be a closed “elite” community. I understand there’s a perception problem there, but again, the reason for the invitation process is to control the speed of growth. I’d love for us to be in a financial position where that speed wasn’t as critical, but we’re not there yet.

There’s also been some criticism that what’s popular on Dribbble is all very homogenous and that designs that don’t fit in with the majority of content posted are sometimes shunned or even attacked. Is that kind of behavior something Dribbble, as a company, is concerned with? Or is this just one of the inevitable side-effects of having an invite-only service?
Those that complain that everything on Dribbble looks the same must not explore past the home page. It’s a bit like saying Twitter is nothing but Justin Beiber fans and celebrities.

Dribbble is full of variety—it all depends on who you follow (much like Twitter).

There are icon designers, illustrators, typeface designers, UI designers, game designers, and the list goes on and on. We need to do a better job at exposing that variety, and suggesting people to follow based on your interests. We’re working on that. Far too much attention is paid to the Popular page. Which is natural—but there’s so much more on Dribbble and we’ll be working hard to feature it all.

Originally, Dribbble was set up to offer designers a place to get feedback on their designs, but it seems to have shifted into primarily a community to show off design work, rather than get input. How do the Dribbble founders feel about this shift? Is there going to be any push to encourage feedback or are they happy with the way the community has evolved?
I have to correct you there. Dribbble wasn’t set up solely as a place to get feedback. Feedback has always been a part of Dribbble, but our motto since day 1 has always been, “show and tell for creatives”. One of the wonderful things about Dribbble is that people use it for different things. Some use it share their design process, some use it to gain feedback from their peers, some use it to promote upcoming projects, etc. We’ve been happy to observe how the community uses the site, and react to and support those ways. Many of the features exist today because of things the community started doing on their own: rebounds, playoffs, attaching files—we’re not interested in forcing a mandated use of the service. I think the community has grown organically, and I’m proud of that.

It seems that at least some of the uploads on Dribbble were created specifically for the site rather than being part of a larger project. This has led some to say Dribbble is little more than a glorified online art gallery. Is this a concern for the Dribbble founders, or was this something they predicted might happen?
Glorified online art gallery? Who are these ruffians you’re quoting?

From day one, players have uploaded things specifically for Dribbble. It’s show and tell. We’re fine with that. Rebound playoff contests are good examples: a place to flex your creative muscle on something fun. It’s just adding another window into your creative process as a designer.

What is Dribbble’s business model? Is this more a labor of love for the creators or is profitability a key concern? Are advertising, Pro accounts, and merchandise the only planned revenue generators, or are there others in the works?
Advertising, Pro accounts and merchandise aren’t the only planned areas for revenue. They’re keeping us (almost) afloat right now, but we have some other things planned for the future. I can’t talk about them specifically yet, but a few them are related to hiring talent and being hired.

Interview by Cameron Chapman.

What are the advantages of using Dribbble for you and designers in general? Let us know your thoughts below…

Never Ending WordPress Business Bundle – only $14!

As we head into the New Year, we were curious about what we can all expect to see in Web Design in 2011, and asked some of the leading Web Designers and Web Design Writers in the field for their predictions.

After you’ve had a chance to read their illuminating thoughts, please take a moment and tell us your predictions, too.

Best wishes for a happy, healthy and well-designed 2011!

Veerle Pieters

If we can believe pantone, pink will have its mark on 2011 I’m guessing we will also see richer and stronger typography as it will further grow and mature thanks to services like Typekit, Fontdeck, etc.

Mobile will become even more important with the launch of iPad 2 and all other tablets that want to step in the iPads footsteps.

For the rest, if I am being honest, I’m not really into this whole *trends* of 2011. I’m a strong believer of “doing your own thing” and not looking at what others are doing or what will be popular. If somebody would say gradients are out I’m saying I still will use them if they fit what I’m designing.

Veerle Pieters, @vpieters, is a graphic/web designer living in Belgium. My personal journal reflects my journeys through design, the web, and life.

Jason Beaird

Anyone who’s been working on the web for more than a few years would agree that 2010 was a milestone year for front-end development. The tools and tricks of our industry are always evolving, but the explosion of webfonts, CSS3 and HTML5 over the last year has made for an exciting ride. I predict that this new found momentum will continue in 2011 and that we’ll see even more exciting and beautiful sites exploiting these technologies.

On the pure design front, I think all of our bold CSS3 experiments will give way to more minimalist trends this year. Subtle will become the new black and that will apply to our color choices, backgrounds, borders, shadows and gradients.

I don’t think the same will be true of typography. I predict that 2011 will be a banner year for typographic exploration and that webfont-powered typefaces will play an even bigger role in online brand identity.

Having just finished reading Khoi Vinh’s excellent “Ordering Disorder: Grid Principles for Web Design“, I also predict that we’ll see even more focus on grid-based design in 2011. Our use of grids will extend far beyond the “trusty 960“- that has become the defacto standard to more accurately address our client’s specific goals.

The surge in tablet computing will revive the old fluid vs. fixed debate and will result in more “responsive“designs. Finally,I think we’ll see a dramatic decrease in stock photo use in the coming year. The rise of mobile camera apps like Instagram and Hipstamatic have made a lot of web designers feel like amateur photographers. I believe this will result in more designers taking the pictures they need for client projects rather than paying the ever-increasing prices of microstock.

Jason Beaird, @jasongraphix, is the author of the recently revised “Principles of Beautiful Web Design” and currently works as a contract UX designer for MailChimp. He loves designing for the web and enjoys sharing this passion with other local web designers through Refresh Columbia.

Paul Boag

Making predictions like this is always a risky business as anything you say is guesswork at best. However I believe that I’m fairly safe in saying that 2011 will be the year of alternative devices. By that I mean more and more people will be accessing the web via a device other than their desktop PC or laptop. And I’m not just talking about the iPhone or iPads. We can expect to see an explosion of Android and Window devices.

This has all kinds of ramifications for us as web designers. Sites will need to be more flexible than ever and I expect to see many more people adopting responsive design techniques. However I believe that this is just the tip of the iceberg. Responsive design is great but does not take into account the varying contexts people will now be accessing the web in. For example the requirements of a user sitting in front of their desktop PC at home is very different from somebody accessing your site via smart phone on a busy train.

Paul Boag, @boagworld, Founder of web design agency Headscape, host of the boagworld web design podcast and author of the website owners manual.

Jacob Cass

Trends in web design come and go at a very a quick pace so you really need to be at the top of your game to understand what the limitations and opportunities are when it comes to designing for the web. Know what’s been done, what’s being done and what’s just around the corner.

If you follow the industry, you should know about some of the up and coming trends already; web fonts, social sharing, personalized content and much more emphasis on faster loading speeds and optimization for mobile devices.

Jacob Cass, @justcreative, is an Aussie designer based in NYC who runs the websites Just Creative Design & Logo Of The Day.

Clearleft

I think 2011 will be the year of the reader. Better screens (both desktop and mobile) and the continued rise of optimized reading services like Instapaper will hopefully herald the end of that “people don’t read online” myth. If so, we can also expect an overdue backlash against reader-hostile practices like splitting content across multiple pages and intrusive advertising. — Cennydd Bowles, Clearleft

I think we’re going to see web fonts go mainstream in 2011, with more and more sites ditching techniques like Cufon in favour of native technologies. We’re going to see IE 6 finally disappear, if we haven’t already. However the biggest thing next year is going to be the move into mobile. Companies are finally going to realize that having a mobile strategy doesn’t just mean commissioning an iPad app. Instead we’re going to see more and more companies create mobile optimized versions of their websites using media queries. As such I think 2011 is going to be the year of responsive design. — Richard Rutter, Font Deck

With more and more digital applications like the iPlayer being designed for TV viewing I think 2011 is going to be a big year for transmedia. In the UK, all the major TV channels are behind the launch of a new digital box called YouView. Built around common web standards, it’s a platform for developing and deploying interactive experiences on the TV. In the US, innovative start-ups like Kevin Slavin’s Starling application aims to make TV a more social experience. As such I predict that 2011 will be the year when digital applications start to make inroads into the front room. — Andy Budd, Clearleft

Clearleft, @clearleft , is a team of eleven specialists: designers, developers, authors, thinkers and web afficionados. Clearleft formed in 2005, bringing together three fine gentlemen with a reputation for user-centred design, accessibility and web standards. We quickly found ourselves a home in Brighton’s cosmopolitan North Laine, and set about trying to make the online world a better place.

Patrick Haney

While design for mobile devices (including the iPad) is quickly gaining traction, and responsive web design is the talk of the web-connected town, my predictions for web design in 2011 center around HTML5 and web typography.

First, I predict a return to what some call the “Interactive Web.” With Flash, we had real interaction on websites across the Internet, but at a cost of poorly designed splash screens and background music from DJ Where’s The Mute Button. After years of returning to static pages and images, we’re moving back to interactivity without Flash thanks to easy-to-use JavaScript libraries like jQuery. Moving forward, I see HTML5 & CSS3 taking us to the next phase of the Interactive Web thanks to advanced CSS features like animation, opacity and transitions.

Second, typography on the web is drastically changing for the better, which we’ll see more of in 2011. Clients will ask for typefaces other than Georgia, Arial and Helvetica, and without having to generate images for headlines, we as designers will be able to grant such a request. While services like TypeKit and Fontdeck are wonderful (see Lost Worlds Fairs for what’s possible with Typekit alone), the real font revolution will only happen as @font-face gains more browser support and font foundries are persuaded to change their licensing to follow suit. That may not happen in a year’s time, but we’re on the right track, and that’s a good thing for designers and everyone else that uses the web.

Patrick Haney, @notasausage, is not a sausage. He’s the co-creator of Hanerino, a design studio based just north of Boston. When he’s not traveling the world and speaking at conferences, he enjoys teaching classes on web design & development as an adjunct instructor at the Center for Digital Imaging Arts

Sue Jenkins

Sure 2010 brought us HTML5, CSS3, and more apps than you can shake a stick at, but 2011 looks very promising for web designers. Here are my predictions (and wishes):

• In 2011, we’ll see the official retirement of IE6 (yippie!) and the projected retirement of IE7.
• The development of a new app that automatically generates a mobile version of CSS for your site based on your site’s main CSS file.
• The ability to use any font on the web based on the fonts loaded on a specified computer. The end of people talking about “Web 2.0”
• IE9 that renders code as beautifully as Firefox, Safari, Chrome, and Opera
• New WordPress WYSIWYG plug-ins that help designers customize WP templates visually
• New controls in Dreamweaver CS6 to generate robust pure CSS dropdown menus as well as new dialogs in Dreamweaver CS6 that allow designers to more easily customize Spry elements
• The reinstatement of IE7 and IE8 on Spoon.net
• And, in the spirit of world peace, 2011 will bring the development of a universal spam filter that prevents those jerks from littering our email inboxes with useless, annoying junk. No more Replica Watches and Viagra mail!

Sue Jenkins, @LuckychairNews, is a professional web/graphic designer, fine art photographer, Adobe Certified Instructor, and creative director at Luckychair. In addition, she is an award-winning software instructor in six Adobe Software Training DVDs and the author of several “For Dummies” instructional books on design including her most recents popular books Smashing Photoship CS5: 100 Professional Techniques, Web Design All-in-One For Dummies, and Dreamweaver CS5 All-in-One For Dummies.

Jeffrey Kalmikoff

User experience is on its way to becoming much more personal, and I’m excited to see how designers approach these challenges. I predict that we’ll be seeing a lot more design for function, such as location features or social graph integration that are becoming more readily available, rather than simple trends of form.

The ability to leverage “known” information about a user such as social activity or interests from companies like Facebook, or location information via HTML5 or by using products from companies such as SimpleGeo, we’ll find UI/UX design becoming more reactive to available information on a much more granular level. This could be as simple as updating UI based upon local time, weather, or relevant nearby social activity. Or, it could be as complex as planning for scalable content based upon what is relevant to a user’s interests.

These new technologies have set us well on our way to much more personally relevant experiences online, and I look forward to the solutions the UI/UX community come up with to translate these technologies into elegant, highly-usable design.

Jeffrey Kalmikoff, @jeffrey. Some call him a tattooed metal-head with a mind for innovation, an eye for design and nose for tomfoolery. Others call him VP of Product for SimpleGeo, where they build kick-ass tools for developers to easily integrate location features into their apps. He calls himself a tireless design enthusiast, a lover of community and food, a maker of things. As for you, just call him Jeffrey.

Mike Kus

Designing for mobile devices like iPhones, iPads etc is going to be bigger than ever. I think web designers are now realising that this is where a large part of their profession is heading. It’ll be exciting to see whether techniques like ‘responsive web design’ catch on or designers stick to the dedicated mobile site solution.

I also think as that as screen resolutions increase, designers will be faced with yet more challenges. Like with the iPhone 4 we might well have to increase image sizes for other devices which will obviously have an impact on the amount of data people download.

From an aesthetic point of view I still think a lot of web design is far too trend driven. I’d really love to see designers thinking more about the content of the site and the organisation they’re designing for, and create work that’s more meaningful for the users. Eg. The only point for putting a strip of fabric and some stitching across the top of your site is if you’re designing it for a fabric/sewing store.

Mike Kus, @mikekus, is a Graphic/Web Designer & Illustrator based in Bath, UK. and Designer at Carsonified.com

Patrick McNeil

My prediction for 2011 as it relates to design is all focused on platforms. Every year we see web development focusing more on platforms to get things done. Each year it seems that fewer sites are built from scratch. It all makes perfect sense of course. Not only are there catch all platforms that can be massively customized to fit very specific needs, but there are also niche ones that solve specific (and common) industry needs. So why should a designer care?

This has a tremendous impact on the designer. In the print world, the best designers understand the medium the best. They know how to control the cost of the product by the design choices they make. The web is very much the same; the very best designers understand the medium, its limitations, opportunities and ways to control the price of the end product. I believe that in 2011 the difference between designers who simply design and let the developers sort through the implementation and those that understand the full process and can design thoughtful CMS friendly designs will become even more evident.

While I don’t expect designers to learn to develop, I do expect that they will continue to deepen their understanding of how the web, and more specifically, various CMS’s work. This means designing sites that can be effectively integrated into platforms and be maintained by business owners. The designer I see forming will not only be more effective, but will also be more profitable. This combination of talents is somewhat rare and hard to acquire.

Patrick McNeil, @DesignMeltdown, is a web developer, designer and the author of two books on web design titled The Web Designer’s Idea Book. In his work he focuses on complex CMS integrations with a heavy usage of CSS and jQuery to get things done. His love of design and technology makes the web his ideal playground.

Toke Nygaard

I think there will be a lot of focus on how things feel, not so much how they look or work. Just like UI/UX became hot shit all of a sudden, I think a whole new wave of specialists in smoke and mirrors will emerge, who’s sole specialty is to make interaction feel great. I am talking about how things fade, animate, transition, sound. It is just going to hit a whole other level after iPad/iPhone showed us there is much more to learn in that field. Finally all the outcast Flash designers out there will have something to do again..

Toke Nygaard, @tokenygaard, is one of the trio who built K10k in the late 90’s and since then co-founded the web agency Cuban Council, a bi-coastal venture – currently heading up their New York office.

Ryan Shelton

With the rise of the iPhone, iPad and other touch devices from Android and Blackberry, 2011 will see web designers incorporating more touch focused design into websites.

Designing clever layouts that display and flow content well on both computer monitors as well as the smaller screens of mobile devices will become more common place and part of the workflow.

Just as web designers have been testing designs across different browsers so we will begin to see designers doing both cross browser testing as well as cross device testing. I also imagine design trends being influenced by the user interfaces of mobile devices such as Apple’s iOS.

Ryan Shelton, @ryanshelton, is a UI and UX designer at The Noble Union, a design company based in London specialising in design and user experience. “We aim to create simple, intuitive, beautiful interfaces for the web and mobile devices.”

Matthew Smith

I see the web getting more focused on ideas and moving away from technologies as the primary focus. We’re watching browsers finally come together in some semblance of similarity now, and its allowing us to consolidate our thinking a bit in areas of technology, platforms, and browser types.

Now we’re able to engage in questions about concept, ideas, delivery, experience. I would like to see web designers asking themselves and their clients about metaphors and stories that can be told through the experience of communicating content in a digital medium that moves, changes, breathes, pulses with life. It’s not “print on screen” anymore. The web is clearly its own unique medium. We’re potentially moving from the web’s infancy into a stage of early development where real thinking starts to take shape.

Then again, I’m listening to the Inception soundtrack as I write this and that could be influencing my epic positive thinking.

It’s possible that things are not so hopeful. I continue to see web designers place the wrong emphasis on style over meaning, and concern themselves with sexy pixels before successful projects with real return on investment for their clients. I know few web designers who are willing to accept that knowing how to push pixels with Photoshop or fireworks, or craft clean code with the three layered HTML/CSS/JS does not make you a web designer.

I am a web designer because I bend my mind toward the web medium, its unique differences and expanses of similarity to other design disciplines, and the simple but important facets of the Visual Language. I’m constantly learning more, and ever humbled at how little I know, but until we all grow in these areas and beyond simply mastering pixels and code, we’ll be stuck in 2006.

Matthew Smith, @squaredeye, keeps a close eye on each square little pixel and grid that, arranged with intelligence and inspiration, form a design that helps us–and your company–grow.

Jonathan Snook

I anticipate that 2011 shall be the year where people will use CSS3 in droves. Many have still been reluctant, due to lack of support in Internet Explorer, but with the release of IE9, we’ll finally have plenty of features at our fingertips.

Expect to see lots more experimentation and interesting tricks and hacks. I hope that we’ll begin to see more people looking at the performance impacts of using CSS3 heavily in their projects.

Jonathan Snook, @snookca, is the creator of striking designs, impeccable markup and code, and forward-thinking ideas and applications.

Andy Sowards

I believe in the year 2011 we will be seeing a lot of very minimal sites with good user experience, that have subtle colors, lines, curves, textures and are pleasing to the eyes and simplifies everyones life. Every year we get busier and busier so its increasingly more popular to have a minimal layout that focuses on the content. Content will be king in 2011.

Also I believe we will begin to see the full potential of CSS3, HTML5 and Javascript begin to come to life. The web is going to become a more immersive experience and that is going to show in the designs, typography, and color usage that will we will be seeing. This in turn I believe will cause a more modern browser movement, and people will be more aware that they need to stay up to date to enjoy the web.

Andy Sowards, @andysowards, Passionate Creative that never stops. Avid Blogger, Freelancer, Web Designer, Developer, Programmer. Happy Hubby and Father of 4. My family is my motivation. Owner of Design and Programming blog.

Vincent Flanders

Mobile web sites/apps (It’s the year of mobile.), tablet web sites/apps, exciting, new HTML5 tools will be released that will be misused by too many second level designers.

Designers will stop using #666 for text color on their clients’ sites so text will be easier to read. Except for “Over-The-Top” websites, there will be 15% fewer sucky websites. (Bad news for me .)

Web page speed enhancement tools will be easier to use and page loading speed will get faster. (Google will be happier).

Designers will start using tools (or at least use .htaccess) to compress and cache files, which will make pages load faster and save petabytes of bandwidth.

Vincent Flanders, @vincentflanders, is a Usability analyst, author of two books on web design and creator of WebPagesThatSuck.com.

Mike Stenhouse

If 2010 was the year that mobile came of age then 2011 will see it move into its own apartment next door to the desktop and start throwing wild parties. Having started as the younger, slightly neglected sibling it’s now on the verge of shouldering the desktop out of the way.

The industry (as articulated by Fred Wilson of Union Square Ventures) is coming around to the idea that mobile could often be the primary platform for new apps. As web developers and designers we are in a great position to take advantage of this shift through infrastructure enhancements like HTML5 and Phone Gap, and frameworks like jQuery Mobile, Zepto and Backbone, along with a horde of others.

All of these are based on technologies we already know and can start working with today. Rather than clumsily reskinning our websites, 2011 will be the year we embrace the philosophy of mobile to produce context aware, task tailored, fundamentally handheld apps.

Mike Stenhouse, @mikesten, is a user experience designer, occasional speaker and constant maker of things. When not tinkering he is Head of User Experience for video collaboration platform, Aframe.

Written exclusively for WDD by Debbie Hemley, @dhemley. Debbie is a blogger and social media aficionado. She works with businesses to develop content and social media strategies. Read her blog posts on All the News. You can also follow Debbie on LinkedIn.

Thumbnail image by: Shannonyeh Photography

What are your Web Design Predictions for 2011? Share your thoughts in the comments below.

Never Ending WordPress Business Bundle – only $14!

On Tuesday, December 22nd, UK-based graphic design student Matt Dempsey, 21, launched a cute primer called Comic Sans Criminal.

The elegant site instructs amateur designers how to use the most juvenile-looking typeface in a designer’s toolbox.

His cheeky project caught on, causing “Comic Sans” to trend on Twitter on Wednesday and gaining nearly 200,000 unique viewers in the first 30 hours of its launch.

Grace Bello interviewed Dempsey on behalf of WDD, about his design background, the popularity of Comic Sans Criminal, and the typeface personalities with which he’d like to go out for a beer.

More a handy guide than a manifesto, the pages communicate with beautiful typography and simple images; for instance, a simple paperclip stands in for Microsoft Word (hey there, Clippy). Dempsey instructs us that “all fonts have a personality and a purpose” and that we should opt not to use Comic Sans for, er, hospital signage.

Comic Sans Criminal tells us not only the pitfalls of poor design but also that side projects that we’re passionate about can make a huge impact.

When did you get started as a web designer?

Well, I’m actually a graphic design student, 21 years old, in the second year of my degree. I’ve been freelancing as a web designer since the age of 14, where I did it for fun and a couple hundred dollars here and there.

I started taking it more and more seriously in stages, and now, in my spare time, I take on freelance work from clients internationally to help fund my degree.

Wow, that’s awesome. What school do you go to?

I go to the University of Portsmouth in England.

Which were some of your favorite projects to work on as a designer?

As a freelancer, I enjoy working on projects where I redesign and improve what already exists.

My portfolio site is ridiculously out of date so I can’t really point to any recent interesting projects, mainly because I have very little time to do freelance work.

So you mention on Comic Sans Criminal that you plan to create stickers and posters. Is there any other Comic Sans merchandise that you plan to create?

Well, to be honest, I’ve been totally caught out by this whole situation. The site was part of a university self-initiated project and was only ever intended to be seen by a couple of tutors for a couple of minutes. The fact that in the last 29 hours it’s had 170,000 unique visitors and growing has taken me completely by surprise!

I’ve had a lot of e-mails asking for stickers/posters/t-shirts and haven’t had time to think about how they would look, who I would print them with, how I would distribute them, etc. So I’m just getting feedback and ideas from people at the moment, and then I’ll email them all in a few days maybe with my plans.

I would probably keep it to posters stickers and maybe t-shirts, but if I did it, I’d want to find a fantastic printer; it wouldn’t be some sort of CafePress-style site that plasters a single logo on top of any type of merchandise you can think of.

Was this originally a project just for fun?

It was for part of my course. The brief was basically to create a piece of work that highlighted an issue you felt passionately about. So some chose more serious issues like poverty, alcoholism, world hunger, etc.

I went with something more light-hearted with Comic Sans [Criminal]. I did, however, take it further than most people did because I was genuinely interested in the subject. So although I’ll get a mark at the end of the project and it’ll go towards my degree, the whole project was basically a personal project that I really enjoyed, too.

A lot of the designers I know complain about Comic Sans to no end. That and Papyrus…How did you publicize Comic Sans Criminal? Or did friends go ahead and publicize it for you?

I didn’t publicize it at all. I posted it on Dribbble, a website that allows designer to post snippets of work-in-progress design pieces to get feedback.

I posted a photo of some of the stickers I’d created and included a link to the website for anyone interested to take a closer look.

I don’t know who picked it up first, but obviously someone saw it and tweeted about it and it spread like wildfire from then on!

So you mentioned in Comic Sans Criminal that “all fonts have a personality and a purpose.” That said, which typeface “personality” would you want to have a pint with?

Haha, that’s a great question. I guess the typefaces I use and love aren’t necessarily the typefaces I’d want to have a pint with.

I’m a big fan of Akzidenz Grotesk, the predecessor to Helvetica, Trade Gothic, and Knockout (the font used on CSC) and Avenir/Gotham, but I guess in most cases those typefaces are more corporate and serious than the laidback, fun kind of person I’d go for a pint with! I certainly wouldn’t go for a pint with Comic Sans though.

Ha! There was a short story published on McSweeneys.net about how Comic Sans goes off to get a beer with Papyrus.

Haha! Yup, I think I’d avoid that pub.

Written exclusively for WDD by Grace Bello

Are you a comic sans criminal? Which font personalities would you hang out with? Please share your thoughts below…

Never Ending WordPress Business Bundle – only $14!

He’s been called “the guru of Web page usability” by the New York Times and “the king of usability” by Internet Magazine.

Through his Alertbox newsletter and useit.com website, he has been educating hundreds of thousands of web designers around the world since 1995.

While his views can be controversial, especially for web designers, he remains the top leader in the usability field.

I recently interviewed Jakob Nielsen exclusively for WDD and asked him a few questions that should be relevant to all web designers interested in creating user friendly websites.

Can you please tell us a bit more about yourself and how you got started in this field?

I have worked in the usability field since 1983: my first projects were with text-only UIs on mainframe computers.

I then proceeded to mainly work on graphical user interfaces. For example my students and I did a lot of studies of early Macintosh software which was not always as great as people have idolized it to be.

This early experience came in handy later, because the first ten years of Web applications were remarkably similar to the old IBM 3270 mainframe applications in their interaction style.

In general, it’s very useful for a usability specialist to have experience with multiple generations of computers, because that allows you to identify bigger trends in human behavior and not be seduced by the latest fads.

The first decade of my career was focused on two problems: how to get usability methods more widely used, using “discount usability”, and how to improve the usability of online information.

As a result, I wrote one of the first books on hypertext in 1989 (published 1990), and a widely adopted textbook on usability engineering in software projects.

In 1994 I started doing Web usability projects which happily fused these two interests into one topic. I find it quite amusing that in the early days of Web usability, critics complained that you couldn’t apply usability methods to websites because they only work for software applications.

In contrast, in recent years, the enemies of usability have started to claim that usability is so focused on websites that the findings don’t transfer to applications, AJAX, and such. Some people will take any excuse to ignore their customers.

Of course, the reality is that usability applies to anything that has a user interface, whether website, application, mobile phone, camcorder, or anything else. The specific guidelines will differ, but the broad principles are all dictated by the psychology of the human mind, which has been steady for 10,000 years.

With the widespread use of broadband these days, do we still need to consider page weight and loading speed?

Yes, but the restrictions are certainly not as tight as they were in the days of 28.8 kbps dial-up.

The response time guidelines remain the same as always, because they are set by the way people are wired, not the way the Internet is wired. So the findings from, say, testing pilots in World War II are still valid.

One of the main guidelines is to show the next state (e.g., the next page) with one second of the user’s action (e.g., click) in order for users to experience the feeling of a freely-flowing interaction, as opposed to a sensation of delays. In one second, you can download about a megabyte over a typical American broadband connection (and much more in Asia) if you have full throughput.

The main problem for response times today is not download delays, but rather server delays, as people stick too many widgets and dynamic objects on their pages.

Remember: 1.0 sec. response time, or users won’t feel that they’re navigating freely. Also remember that direct-manipulation options, such as within-page AJAX controls require 0.1 sec. response times to avoid feeling sluggish.

In your opinion, what is the best way to test the usability of a website?

Follow the 3 basic rules: get representative customers, ask them to perform realistic tasks, and shut up and let them do the talking.

You only need 5 users to uncover enough usability insights to keep you busy for months. Even though there are only 3 rules, they are routinely violated in many studies.

For example, it’s wrong to test with your friends or colleagues. You need to bring in external users who are representative of the target audience and who don’t know anything about your project. And you can’t just let them fool around: they have to do real tasks. And, of course, you have to keep from biasing their behavior and giving them hints about how to use the site.

That’s why the “shut up” rule is so important. Of course, it’s best to have a big multidisciplinary team with dedicated usability specialists for running the studies, but small teams should still do testing.

It’s cheap, and as long as they stick to the basic methodology, designers can definitely run their own usability studies.

How can one test the usability of websites on mobile devices?

The basic rules are the same as for any studies. There’s a 4th rule, which is to run the test on representative equipment.

For a desktop study, this means using a Mac or PC, and it doesn’t matter much which one you pick. Our biggest decision is which screen resolution to use. For the last several years, we main tested at 1024×768, but we’ve now moved up one screen size for most studies.

For mobile, it’s harder to use “representative” equipment, because phones differ so much more than computers do. In our mobile studies, we test sites on all 3 main classes of mobile devices: “feature phones” (the telecoms industry’s paradoxical name for low-end phones with few features), smartphones (e.g., Blackberry), and touch-screen phones (e.g., iPhone).

We recruit a range of users and then test each user with his or her own phone, which they bring to the study. Sadly, this means that we need to test more users in a mobile study than in a desktop study, because the usability issues are very different for each class of phone.

Ideally, I recommend that sites design 3 different mobile versions, because of these differences. I realize that this is only possible for the richest sites. For everybody else, I hope that they will at least produce a separate mobile version with a mobile-optimized design, because usability does suffer when using desktop-optimized sites on a phone, even when this is technically possible.

The original philosophy of the Web was to emphasize cross-platform design, so that a single site can be used everywhere. But this doesn’t work from a usability perspective, even when one can code the material so that it will display on phones.

Either the site will be too scaled-back for a desktop user or it will be too complex for a mobile user. The two usage scenarios are so different that they require different designs.

If we wish to conduct an affordable usability test, what would be the best way to do this?

The only place you shouldn’t skimp is on recruiting representative users, because if you test the wrong people, you’re testing whether the design works for somebody who won’t actually be using it (or who know too much to be stumped by usability problems, in the case of testing people from within your own company).

Everything else is negotiable and can be done on the cheap. I already said that you can run the study yourself, so that’s “free”, except obviously from the cost of your time, but it only takes a few hours to test the recommended 5 users, and you can actually get away with testing 3 if you’re really pressed for time.

You don’t need any equipment, video cameras, one-way mirrors, or analysis software. You don’t even need a computer, if you’re testing a paper prototype.

Otherwise, a laptop or any other available computer will do, and you can run the test in a small conference room or even a regular office.

You do have to close the door, though, to avoid disrupting the user and to safeguard their anonymity, so you can’t test in a cubicle. Just tape a note to the door saying “Usability Test In Progress: Do Not Disturb”. (And remember to take it down between sessions, or people will stop respecting the sign.)

As far as website and blog navigation goes, is breadcrumb navigation ‘dead’?

No, we frequently see users access the breadcrumbs in testing, either to check where they are in a site or to navigate to a higher level.

So breadcrumbs are definitely useful. Just as important, they don’t harm those users who don’t use them. Some studies have found that many users don’t use breadcrumbs.

But that’s OK, because the breadcrumbs don’t cause any trouble for these users, and since they’re a very lightweight design element, breadcrumbs are worth including for the substantial good they offer to those users who do use them.

For web designers, is it ok to break the rules of usability when creating artisitic portfolio websites and blogs?

Yes. First, the definition of art vs. design allows you to do anything in an art project, because it doesn’t serve a utilitarian purpose.

Even though there certainly would be a business purpose in something like a portfolio site, the standard usability guidelines still wouldn’t be as critical, for two reasons:

First, the target audience would be people with vastly superior Web skills (other designers, Internet managers, and the like). And second, people typically don’t do much when visiting a portfolio other than browse it and admire it.

Thus, they won’t be as dependent on easily-accessed features as users of, say, a home banking site where it would be a disaster if people transferred money to the wrong account.

Amazon.com is regarded as one of the top e-commerce websites. What makes it so successful and do you see any usability mistakes on their site?

Amazon is a great case study in the difference between total user experience and the on-screen user interface.

They owe their success to a lot of off-screen aspects of the total user experience, including comprehensive product selection, informative confirmation emails, and rock-solid fulfillment. They also have reasonably good prices, though never the absolute lowest, which proves that it does work to compete on the quality of the user experience and not just on price.

The screen-design is also good in terms of rich product information, including helpful customer reviews. Amazon was one of the first companies to recognize that it’s OK to include negative reviews: this increases credibility and people will just buy something else instead, so they don’t lose the order, even if they lose that particular sale.

All this said, Amazon is not a good model for other sites, because the pages are overwhelmingly complex with much too many features, many of which don’t help users in considering the current product.

Amazon can get away with this complexity because most users are familiar with its design because they shop there so often. But a first-time user would be baffled. Since most sites don’t have people who shop there as much as they do on Amazon, most sites need a simpler design.

Amazon is also not good at helping shoppers understand a product area. Because it’s such a general store (selling everything) and because of its origin as a bookstore (where there’s really no such thing as a product space; only individual books and authors) Amazon is great at telling people about individual products, but terrible at teaching people how they should think about a product category.

This is the great opportunity for specialized sites: they can educate users about their specialty and offer tools that are optimized for the characteristics of that particular product space.

Should usability be the same for every website, or should it be ‘customized’ based on the target audience (e.g – a technology website vs. a news website)?

Usability is always relative to two things: who are the users, and what are they trying to accomplish with the UI?

That’s why we can’t just have one recommended design and just replace the logo to create a new site.

So, for example, if people are trying to just deal with a small number of things, you could simply list them all.

But if the task required users to consider a large number of options, you would need features to find, select, winnow, and sort the options, plus maybe even some kind of visualization tool.

All of these features would be overkill for, say, a restaurant group with 3 restaurants, but they’d be needed for McDonald’s location finder, which would also need a language selector and other internationalization features.

Similarly, people who are highly skilled in a domain would need a different design than less-knowledgeable users. A classic example is medical information: to maximize usability, you need different designs (following different guidelines) for doctors and for patients.

Most websites these days overload their pages with loads of information, news excerpts, Twitter and RSS feeds. Can heavy content pages still be usable?

Yes, but. The big “but” here is definitely that it is much harder to ensure usability the more features you cram onto a page.

Simplicity is usually the better choice. But if you’re in a situation where your users do demand lots of features, then you need to polish the design through many rounds of iterative usability testing.

You must work harder to solve this more difficult problem, and it’s much more risky to release something complex that hasn’t been tested with users than it is to release something simple.

Exclusive interview for WDD by Walter Apai.

Do you agree with Jakob’s principles? Should most usability rules be enforced all the time? Share your points of view below.

Never Ending WordPress Business Bundle – only $14!

He created a graphic world that he calls the “Maniac World” where everything is exaggerated.

His works revisit children’s fairy tales and universal myths.

The adventures of his characters – the Maniacs – are inspired by situations from daily life (love stories, treason, manipulation, etc) and is always represented in a very exaggerated fashion.

The ‘maniacs’ express the idea of “too much”, escalation through power, wealth, plastic surgery, celebrity and much more.

We’ve compiled some of his best works for this article and have also included a short interview with “Skwak” about his fascinating work.

Hi, and thanks for talking with WDD. Can you please tell us about a bit yourself and what you do?

Hi, my name is SKWAK and I live in the north of France. I’ve been working as an independent illustrator for five years and I’ve been drawing since I was I kid.

I have created a graphic world called the ‘maniac world’, a huge playground where the maniacs live. It’s like a distorted reality where everything is exagerated, and where the main notions are constriction, escalation…

How did the design of “Maniac World” started?

It started with some monsters that I created called Koogai which represented all kinds of pollution.

Instead of showing or personifying causes I preferred to create an imaginary world where I could show the consequences of pollution as well as creating characters that were born infected.

Where the Maniacs live, this world of vice is the normal world, everything is normal. Since that creation this world is enriched with new codes, new characters, new stories…

What kind of techniques and software do you use to create your art?

I use Flash (I don’t care which version).

I just need it to draw and export it. It’s the best way for me to create, the most natural way.

Where do you draw your inspiration from?

EVERYWHERE. A word, a sound, some text …everything and anything that can make me start a new story.

What are your future plans?

New toys (mini maniac animals), new tshirts (cookies ‘n’ cream), new canvases (which includes a new solo exhibition in 2010 )!!!! So many things !!!

And here are ‘the maniacs’!

Skwak’s work has been showcased in multiple exhibitions around the world and his clients include Nike, Levis, Microsoft and many others.

His art has been reproduced in toys, t-shirts, posters and much more. You can find out more about Skwak at his website: Skwak.com

What do you think of the “Maniac World”? Please share your opinions below….

Never Ending WordPress Business Bundle – only $14!