Bearded

Fewer Is More

Tue, 15 May 2012 13:52:13 -0400

At Bearded we believe in fewer options. For logos, no more than three. For websites? Just one.

Most of the time clients don’t flinch at this. But sometimes they have questions or reservations. They may wonder if one option will be enough to arrive at the right solution. Sometimes they feel uncomfortable with the idea of not having a choice. More choices, they may think, mean a better chance of getting a good design. And, after all, more options means more for their money, right?

Let me take a step back and relate an example. I once witnessed a design firm present 100 options for a logo. I’m not even kidding. One hundred logo variations. Guess which one they picked?
Yep. None of them. After a lengthy review, they asked for (you guessed it) more options.

So what went wrong here? Why did more options lead to even more options, rather than a solution?

Editing is a major designer responsibility. At the (admittedly extreme) point of this example, a designer is showing every variation they could commit to pixels, and asking the client to perform the vetting process. This approach deprives clients of one of the most important things they’re paying for: a designer’s expertise and judgement. Designers have an obligation to provide the most effective possible design solutions. Were all 100 of those options equally effective? Doubtful. How could the client pick out the good ones? Clearly they couldn’t.

Which brings me to my next point: don’t show your clients bad work. When you show work to a client, you are implicitly giving it your seal of approval. If you use multiple options (which may make sense for something less time-consuming like a logo), they should be equally effective, but taking different approaches. Perhaps a client’s branding profile states that they want to balance being friendly and approachable with being professional and authoritative. This is a chance to have one option lean one way, and the second option lean the other. To you, both may seem equally effective, and your client can help you determine which will be most appropriate for their audience.

All of this, of course, assumes a proper planning and discovery phase before design begins. If clients are included in a collaborative way during this initial phase, then the first design presentation will be a natural extension of those first conversations.

For most jobs, how many websites have you been hired to design? Just one, right? So why design an extra website (or two or three) that you’re going to throw away? That’s a waste of time and money. Why not save those precious design hours to refine your work, once you have the benefit of your client’s feedback?

That first visual design will be the launching point for further discussion, refinement, and – ultimately – design revisions that will get you closer to your final goal: better, more effective designs.

-MG

Mocking Up Is Hard To Do

Fri, 20 Apr 2012 15:41:08 -0400

Recently at Bearded we made a pretty drastic decision in terms of our web design process: we’re not creating mock-ups anymore.

That is to say: we’re not creating flat, Photoshop/Illustrator-produced mock-ups of websites, which we present to clients as JPGs or PNGs. And that’s because we’re not designing in those programs anymore.

The more time we’ve spent working on responsive websites, the clearer it’s become that mock-ups aren’t very good representations of the final product. They involve a lot of unnecessary abstraction that results in difficulty with:

Predicting and solving the design challenges inherent to fluid, responsive layouts
Rendering complete solutions to those challenges
Accurately communicating responsive designs to our clients

Traditionally, mock-ups are attractive because A) we’re used to making mock-ups, B) supposedly it’s easier to revise a mock-up than CSS, and C) it’s convenient for getting client approval. But fundamentally this approach is flawed for websites, a situation that’s been greatly amplified by the extremely non-static nature of responsive layouts.

So we’re chucking our mock-ups. From now on we’re designing websites in the browser with HTML, CSS, and Javascript. We’ll still have our trusty Adobe products and paper pads nearby for sketching and rendering design software-friendly elements like textures and backgrounds. Sometimes we may take screenshots of the site in progress and bring them into Photoshop for embellishments before bringing those changes back over to the working code. But for all those things that are easier in CSS (type, layout, color, and interaction) – we’re keeping it native to the medium.

We’re hoping this will help keep us, as designers, more focused on the true nature of the fluid, interactive products we’re creating. And I feel certain that our clients will benefit from seeing and critiquing a real, working web experience rather than an abstracted representation of one.

Not only that, but once we have design approval, we’ll be halfway done with our CSS. This should help us deliver websites to our clients more quickly with less boring, redundant work for us to do. And even if it is more laborious to revise a CSS mock-up (and I’m not convinced that it is), we’ll make up the hours in front-end development.

Our trials with this method so far have been very rewarding. It feels right to be creating interactions directly in their final medium, the browser. We feel more in touch with and inspired about our work than ever. It’s clear to me now that for years we’ve just been designing pictures of websites. But now, finally, we’re designing websites.

AIGA Portfolio Day

Thu, 05 Apr 2012 16:48:06 -0400

AIGA Portfolio Day:

I’ll be doing portfolio reviews and will be part of the panel discussion at this year’s AIGA Portfolio Day. Friday, April 13, 2012

-Matt Griffin

Wood Type Revival Shirts Back In Stock!

Thu, 05 Apr 2012 13:35:30 -0400

woodtyperevival:

Go get ‘em while they last!

http://www.unitedpixelworkers.com/products/wood-type-revival

Don't Go It Alone: Collaborative Web Design

Fri, 30 Mar 2012 08:45:57 -0400

My article on collaborative web design and how it benefits designers, developers, and clients is live on .net magazine.

Please take a gander.

-Matt Griffin

“.net is the world’s best-selling magazine for web designers and developers, featuring tutorials from leading agencies, interviews with the web’s biggest names, and agenda-setting features on the hottest issues affecting the internet today.”

Grecian Light Face

Tue, 13 Mar 2012 12:01:54 -0400

woodtyperevival:

Our latest font, Grecian Light Face, is live!

And check out the beautiful slides designed by Trent Walton.

Now go download that thing!

Bearded.com Featured on Spyre Studios

Fri, 09 Mar 2012 09:00:43 -0500

Bearded.com Featured on Spyre Studios:

Nice to have Bearded’s website featured on Spyre Studios’ “24 Outstanding Design Agency Portfolio Layouts.”

The Medium is the Message

Tue, 28 Feb 2012 10:05:00 -0500

A hot topic of debate in recent months has revolved around the question “should designers know how to code?” Folks in the web design community have come down on either side rather passionately with responses ranging from “who cares, good design thinking can solve any problem” to “if you don’t how to code, get out of my face.” The flurry of responses on the Interwebs is not undeserved – this is an important question. But I think there’s an even more basic issue at its core.

Regardless of their depth of knowledge of code, some designers clearly “get” the web, and others don’t. Many designers, old and young, approach the web as they would a print piece. But the web entails vastly different problems and opportunities than print, and these mediums’ basic philosophical underpinnings are often completely opposed. On the ever-mercurial web, a designer’s desire for control and specificity often works to their disadvantage. Previously useful conventions and strategies that are burned into their approach become unwise or downright impossible.

To me the question is not whether or not a designer knows how to code, but whether or not a designer understands the medium in which they are working. In other words: are you a designer, or a web designer?

Now it does seem unlikely to me that a designer can truly understand the ins and outs of designing for the web without at least a rudimentary grasp of HTML and CSS. But in our business, coding knowledge alone won’t save you. So how do you cozy up to this most slippery of mediums?

Glad you asked.

Conventional Wisdom

At times, Bearded has been hired to develop sites that we didn’t design. On some of these occasions, my first response to one of these designs has been: “this is not a website.” At first glance it may look like a website, but the implied functionality and interactions belie a serious lack of understanding of how modern websites work – both under the hood and (pardon the extended metaphor) on the road.

I’m betting we can agree that having an understanding of what you’re designing is a key part of effective design. Having a firm grasp of what a website is and how it works is important. And nothing breeds familiarity like repeat exposure.

Use the thing you want to design, and use it all the time. If you have the choice of reading a print magazine or a web version, go website every time. Even better, do both. What are the differences? Why do you think the designers chose to do that? Do those decisions work for or against your experience as a user?

When you have the option, use a web application instead of a desktop one. Harvest, Basecamp, Prevue, Mailchimp – there are lots of great web app solutions that help designers and their clients do their work. What about your free time? There’s Twitter, Facebook, Flickr, Pinterest, and on and on.

Some I use every day. Some I just try out to see how the designers approached the problem. But there are a lot of smart web professionals out there coming up with great new approaches all the time. It’s not hard to give their products a spin and benefit from their efforts.

While using these sites and apps, note the repeat techniques, approaches, and solutions. These are conventions, and to users they carry great weight. Think about the approaches you’re experiencing. Be critical. Website after website, app after app, you will form opinions. You will bring these opinions and conventions into your own work.

Maybe you’re adding an image viewer to a website you’re working on. How do most websites deal with the UI? Does that seem like a good solution? Is there a better one? If so, is it worth retraining users to use this new way, or will familiarity outweigh the other benefits of your innovation? This is the momentum of convention, and whether or not you choose to toss it aside, you should always be aware of it.

Flux Capacity

Whether you buy the idea of the Technological Singularity or not, it’s pretty clear that things are moving faster than any of us can keep up with on our own. Lucky for us, everyone in the web design community seems to understand this, and is ready to share what they’ve learned to keep our collective knowledge out in the open.

Guess who’s on Twitter? Everyone. Start following the web designers you respect and admire. Web design luminaries like Jason Santa Maria, Elliot Jay Stocks, Ethan Marcotte, and Morgan Allan Knutson (just to name a few*) tend to be free with their opinions. They like to share the things they’re excited about, and often they’re excited about web design. When a really good article hits the Webosphere, chances are several dozen of these folks will be tweeting about it.

But staying on top of trends and issues and new innovations isn’t everything. You also need the basic skills that are the foundation of your trade. A cheap subscription to Lynda.com will give you unlimited videos to learn about everything from HTML and CSS to how to use the latest version of Photoshop.

Some of the Internet’s top web designers have also taken the time to catalog their expert knowledge in book form. These manuals can be a great way to help you get up to speed on fundamental skills and philosophies. Here are just a few worth reading in your spare time:

Designing with Web Standards
Hardboiled Web Design
Handcrafted CSS

Even when you know what you’re doing, there’s always somebody a few steps ahead, and that’s where places like A List Apart and A Book Apart really come in handy. Pretty much every book in the ABA library is essential reading for modern web designers. Responsive Web Design provides a great foundation for creating flexible, cross-platform web design solutions, and Mobile First is, if nothing else, a great pep talk. CSS3 and HTML5 are already showing their age (as web books will do), but are still great little introductions to important subjects.

Don’t Go It Alone

Have you ever created an un-printable print piece? In my first project for my first design job, I designed a 22-page saddle-stitch book (think about it). It wasn’t until a printer had looked over my files at the end of the project that the laws of physics (and the impossibility of my design) were brought to my attention. Reviewing my designs with a good production designer early on in the process could have avoided this and other little time bombs embedded in my designs.

You may fancy yourself a web designer, but how do you really know how effective you are until you start checking your assumptions with the guys who actually build the stuff (hint: I’m talking about developers)?

Designing for the web should be a conversation. Developers know what can be done, and how to do it. Designers know what they want to achieve to solve their client’s problems, and how to craft a pleasing user experience. I’m sure you can imagine the Venn diagram (cross-over area: Effective Solutions). Together you can help each other understand your side of the equation, and develop a more holistic perspective, becoming better at what you do in the process.

The Internet is complicated, and complicated problems are easier with multiple brains. And if one of those brains belongs to a designer, and the other to a developer: look out, Internet.

So should designer’s know how to code? Probably to some degree. But coding knowledge, unless that’s a task you’ll be doing regularly, is simply a means to an end. What’s essential is understanding. You can’t design things that you don’t understand. And understanding comes from experience. You’re reading this on a website. That’s a good start. Now get out of here.

*I’m following a boatload of great web design personalities on Twitter. Feel free to rifle through this list of design and Internet people I follow.

-Matt Griffin

Free WTR Font w/ T-shirt purchase!

Fri, 03 Feb 2012 15:16:00 -0500

woodtyperevival:

You heard correctly! Everyone that places a Wood Type Revival t-shirt order at United Pixel Workers will receive a free font of their choice at woodtyperevival.com!

Spread the word – shirts on sale until February 10!

Everyone that places a shirt order before the deadline will receive an email with details on how to get their free font after February 10. Limit 1 free font per customer.

Take a Break

Thu, 02 Feb 2012 12:52:11 -0500

Breaks are important. At Bearded, we’re often tackling several big, complicated problems at a time. And it can be hard to keep your head straight, and clear your cognitive buffer before moving on to a new task.

What you need, in other words, is a mental sorbet, and taking 5 minutes for yourself won’t ever blow a deadline. In fact, it’ll probably make you more productive.

It’s good to have a list of 5-10 minute break activities to help clear out the cobwebs. Here’s the current Bearded list of palette-cleansers:

Golden Eye: That’s right. The 1997 N64 game. You can do up 4 player matches that end after 5 minutes of game play. It’s amazing how much pretending to shoot your co-workers for 5 minutes re-focuses the mind.

Zombieville USA 2: Co-op zombie-splattering mayhem on the iPhone / iPad. The fast-paced cartoony action really takes one’s mind off of work-a-day concerns.

Rainy Mood: A few minutes laying on the couch with Rainy Mood is great when you’re at your wits’ end. Just close your eyes, and relax, my friend. Everything’s going to be OK.

Get The Led Out: Sometimes cranking the stereo and air-instrumenting to an awesome song while high-five-ing your co-workers Top Gun-style does wonders. I’m just saying.

Meme of the Week: Increase designer/developer understanding via meme education, and laugh really hard. Wins all around.

Write a Quick Blog Post: Natch.

-MG

LISC iPad App Wins at HOW Interactive

Wed, 01 Feb 2012 16:50:00 -0500

The iPad application we designed and developed for LISC was chosen as a winner in the 14th Annual HOW Interactive Design Awards!

You Should Work At Bearded

Mon, 30 Jan 2012 14:20:09 -0500

Bearded Is Hiring an Interaction Designer / Front-end Developer

Bearded is a web design and development agency. We’re a small group of web experts focused on inter-disciplinary collaboration as a means to create great websites and applications. Because we’re a small team working on complex projects, our duties frequently overlap, and the ability to work well with others is essential.

Bearded is looking for an experienced Interaction Designer / Front-end Developer / UX Advocate to help us build websites, web applications, and native OSX and iOS applications. Throughout the project process you’ll be collaborating with the other members of Bearded, designers and developers alike. The problems we tackle are often unique and complicated, and require a diverse array of skills and talents working in concert.

Things you should be excited about:

User experience
Purpose-driven design
Pleasing interactions
Clean, logical, efficient code
CSS3 & HTML5
Web best-practices
Page speed optimization

Specific skills you should be very comfortable with:

Crafting elegant, world-class CSS
Creating valid, semantic mark-up
Using Javascript / jQuery to progressively enhance user experience
Creating accessible, cross-browser compatible code

Bonus points if you have experience with:

MVC web frameworks (esp. Rails)
Programming languages other than Javascript (esp. Ruby, objective-c)
Experience using a VCS (esp. Git)
Experience with HAML and SASS / Less
Public advocacy for best web practices

Like everyone at Bearded, you’ll have your hands in a range of areas related to website and application creation, the flow of which looks something like this:

Project research, strategy, and definition
Interaction and UI design
Front-end development (CSS / Javascript)

You will work with the other Beardeds to imagine the end product that will best serve our clients’ needs; working with our other designers and developers to move beyond static designs, creating unique and satisfying user experiences and interactions. You’ll work to strike a balance between delightful interactions and clear, uncluttered user experiences.

Our current workflow generally includes technologies like Ruby on Rails, the CSS3/SASS framework Compass, and jQuery. We’re diving head-first into responsive design, and love mobile devices.

But technologies are ephemeral. We’re always looking for the best new technologies to push our work and process forward, and are constantly evaluating and evolving our approach. We live, eat, and breathe the Internet, and are always excited about finding new stuff to work with. We don’t expect you to be intimately familiar with all of the technologies we currently use, but you should be pretty good at some of them, and psyched to get to learn the rest.

We’re looking for a kindred spirit who loves building the Interwebs, one project at a time. You should be passionate and self-directed, yet be willing to compromise and collaborate with a rock solid team of like-minded people.

We care a lot about our work, but understand that dedication includes taking care of yourself, too. We’re committed to having a work environment that makes it easy to show up for work every day. We allow flexible hours, periodic remote options, and do our best to keep everyone under 40 hours a week. As long as everyone is meeting their milestones, we allow plenty of flexibility. We offer full health coverage, generous vacation days, 401k, and end of year profit sharing.

If this sounds like what you’re looking for, drop us a line. We’d love to talk. (Please provide a link to your online portfolio, etc.)

Wood Type Revival T-shirts

Fri, 13 Jan 2012 11:45:41 -0500

Wood Type Revival T-shirts:

Go order your WTR t-shirts over at United Pixel Workers!

Eligible Kickstarter backers will get their free shirts once they’re printed.

woodtyperevival: Boom! New in the typeshop.

Tue, 20 Dec 2011 18:14:42 -0500

woodtyperevival:

Boom! New in the typeshop.

Wood Type Revival Holiday Sale!

Thu, 15 Dec 2011 09:42:51 -0500

Wood Type Revival Holiday Sale!:

woodtyperevival:

We’re taking 33% off all font orders from right now until the end of the year! That means all fonts will be $10 each instead of $15.

During checkout, just use the code HOLIDAYWOODTYPE2011

Go ahead and get the designer you love the gift of digital wood type font-ery. Yay!

No limits, buy all the fonts you want through December 31.

Happy Holidays,

Wood Type Revival

Happy Holidays!

Mon, 12 Dec 2011 15:42:25 -0500

Happy holidays to all our friends on the Internets from the Beardeds!

XOXO,

Dominic, Matt G., Lauren, Brett, Michael, and Matt B.

11.11.11: 3 Years of Bearded

Fri, 11 Nov 2011 14:09:24 -0500

Wow. Three years.

Yes sir, three years ago today, we started a little thing called Bearded. We were just two guys working out of our homes with a dream of helping make a better Internet, and I feel quite confident now that we’re well on our way.

This year was a pretty momentous one for us Beardeds. So much so that it will be difficult to condense it to the highlights. But here goes:

In our third year we launched our first Mac OS app, Briquette, on the Apple App Store. We built our first iPad-centric web app for LISC. Matt Braun and I started a Kickstarter campaign that resulted in our excellent in-house Bearded letterpress shop, not to mention Wood Type Revival. WTR struck a deal with the venerable web font service Typekit to carry all our fonts, as well as with Swiss Miss’ temporary tattoo product line Tattly. We began a fascinating consulting job with the enterprise search software company Vivisimo. And in the last quarter of this year we’ve begun to work on some exciting new website projects for RIDC, the American Institute of Chemical Engineers, and (my son Argus’ favorite) the Children’s Museum of Pittsburgh. Oh yeah, and today we launched our brand-new responsive website.

Sometimes I look around at what we’ve created in such a short period of time and I can’t quite believe it. But then I focus my gaze on the extraordinarily talented, frequently brilliant, always tireless people I work with every day – and it all makes sense. I also feel overwhelmingly appreciative to all the clients we’ve had in the last three years for lending us their support, and believing in us, as we believed in their businesses and projects.

I’d like to thank all of our clients, past and present, for trusting us with their work and allowing us to do what we’re best at. I think I speak for all the Beardeds when I say it’s the best job I’ve ever had, and I can’t wait to see where it all goes in another three years. But it’s probably, you know, floating, mind-controlled superconductor mobile apps or something.

Matt Griffin

Bearded Goes Responsive

Fri, 11 Nov 2011 14:09:04 -0500

To celebrate our third anniversary, Bearded just launched a new website! It’s a great new site design (owing much to the hard work of Bearded designer Matt Braun). But just as interesting as the new visual approach is our approach to building the site.

Responsive web design (a term coined by Ethan Marcotte in his book of the same title) is an approach that allows a site’s layout to respond to the size of the browser viewport, allowing a more natural cross-device user experience. It’s something we’ll be employing with a lot of the client sites we’re working on right now. But if you want to see how it works sooner than that, fire up our new site. Flex the browser width, pull it up on your iPhone and iPad, and enjoy a better site experience across all sorts of devices. Pretty cool, huh?

woodtyperevival: Go get the new 2-color DeLittle Chromatic font...

Wed, 09 Nov 2011 21:20:30 -0500

woodtyperevival:

Go get the new 2-color DeLittle Chromatic font from Wood Type Revival!

woodtyperevival: Our very own Tattly of French Clarendon...

Wed, 09 Nov 2011 21:19:53 -0500

woodtyperevival:

Our very own Tattly of French Clarendon Ornamented is online! Go get some wicked spell-your-own wood type temporary tattoos!