Posts

Go Out and Do Nothing

by Jared Enrondu

A few weeks ago, I wrote on a lesson I had learned from designing Evomail. Today I’m going to expand on another.

Lesson #2: Go out and do nothing

Late September 2012, I had began designing a certain interaction for Evomail. I did my raw sketches on the Paper app for iPad, then finalized with pen and paper in my Moleskine. The look and feel wasn’t ideal, but it was a decent start. I waited a day (always good to flush out areas), then hopped in Photoshop with high hopes of conquering the design within a few hours.

Didn’t happen that way

I ended up spending day after day shifting, scrapping, and re-sketching. It became a cycle. “It just isn’t happening for me,” I thought. Had I seriously been conquered by 2-squared inches of an intangible interface? Jon and Dave (co-founders) were scratching their heads at the delay. After all, turnaround time was pretty quick everywhere else. What was going on here? I imagined that was what they thought.

But it wasn’t that simple. My “design juices” had been maxed out, burnt out. I needed some rest. And the day after day routine wasn’t helping at all.

On design and exercise

Ruth Clark, 95, goes through her daily aerobic exercise routine in Pompano Beach, Florida, on April 24, 2012. (Carline Jean/Sun Sentinel/MCT) ORG XMIT: 1122368

Ruth Clark, 95, goes through her daily aerobic exercise routine in Pompano Beach, Florida, on April 24, 2012. (Carline Jean/Sun Sentinel/MCT) ORG XMIT: 1122368

You see, designing is like exercising. We use a mental muscle when we create.

In exercise, there’s what’s referred to as the “3 Rs.” They are Recover, Rebuild, and Replenish (may vary from source to source). We’re really good at the last two. Rebuilding is the workout phase. Where we tone our design muscle by the constant reps, or code deployment and pixel pushing. We build the muscle when we challenge ourselves to widen our design capabilities through learning. For example, when graphic designers learn front-end languages (HTML/CSS/JS) to build out their own designs. And we replenish when we seek design inspiration and learn from others with tools like Twitter, Behance, Forrst, Dribbble, books and magazines.

However, we often neglect the first and most important one, recover. That’s when the muscle actually grows. In exercise, that’s when you rest and sleep. And in design, that’s when you simply breakaway. Ditch the computer, the desk, the office, the building. It’s when you get out, and do nothing.

I skipped that. And I suffered the consequences. I wasn’t going anywhere with the interface except backwards, and that wasn’t only detrimental to my productivity, but also the company’s and our goal of shipping Evomail.

So go outside

2inline_jared_24440201927640_raw

 

Mid-October, I went to Brooklyn Beta with my friend Josh Long from Treehouse. We stayed in my hometown for a solid week. And during that time, I kept my work at Evomail to a bare minimum. And I began to feel the mental tension gradually dissipate. My eyes were opened to more elements of design. I noticed the nice balance of typography and kerning at a local diner. The whitespace on billboards. The famous graffiti. The “artsyness” of Etsy’s office (top-left photo). The intricate nature of Aymie Spitzer’s Neighborwood carvings. Even the geometry of Manhattan. I noticed physical product design. And as a digital product designer, this was a welcomed change.

Unbeknown to me, this “break” gave my brain time to actually formulate answers to questions I had not been thinking about at the moment. That seemingly senseless act of wandering the streets of NY was actually the inspiration I needed most.

On night three of our Brooklyn visit, I opened Photoshop just for the heck of it. I deleted the folder group that held the design elements for this “trouble section” of the interface. Instantly, all the design cues I had noticed from earlier in the week began to muster together and amalgamate themselves into something sensible. Within minutes, the design was finished.

3inline_jared_24441173541414_raw

 

In excitement, I quickly took a before (always have a backup .psd file just in case you do crap) and after screenshot of the section. I then dropped them in Campfire for the team to see. The response was great. I was happy. I signed off. Fact: that section of the interface hasn’t been touched since.

And do nothing

The key to the breakaway is to not look at work. But in today’s society, it’s often encouraged to do just that even while on vacation. I just came back from mine this past Monday, and during my break, I made sure to not even open Photoshop. Why? Because rest isn’t only a physical thing, it’s equally mental. You have to give your brain a break once in a while. That means to not look at anything remotely associated with work.

While in New York, Josh and I ate enough good food to have us longing for another visit, for months. We rode the trains, visited the startups (some work exposure, but hey, we chatted with staff about where to eat next), and simply lived. We didn’t let our work dictate us.

And in the end, that break even helped me get work done. Essentially, no time was lost. I had been recharged, I had recovered. And all it took was a close of the Mac lid.

So when was the last time you got away?

4

I’m on Twitter, Instagram, and Dribbble a lot.

Jared will also be at the re:think design conference on June 8th. It’s gong to be awesome! Why not join us?

map-location2logo_vmastoryboardlogo_sfdw

 

 

Why Are Ad Agencies So Poor At Appointing Their Creative Leaders?

Ad agencies have a dreadful record in appointing new creative leadership.

by Michael Lee for Forbes

Agencies proudly announce a new star hiring, that is a “great creative and cultural fit with the agency,” only to announce 18 months later that person has decided to “pursue other opportunities” but, they have uncovered another “star” who is really going to turn the agency work around this time and lead them to the promised land.

There’s a reason Agency Spy has a section called Revolving Door.

The Creative Director, Executive Creative Director, Chief Creative Officer, call it what you will, is the heart and soul of an agency, basically the sexiest job in the agency.

It’s also the most volatile. Probably up there with the tenure of a CMO.

It’s the job everyone in the creative department wants, although I have a theory that deep down they don’t actually want the job, but they sure as heck don’t want anyone else to have it.

Most agencies assume that if you are a very good creative, you will make a very good creative leader. Wrong. It’s a different job, different skill sets, different needs and abilities.

Very few great creative people make good creative directors.

So I thought it would be interesting to chat with friends at Wieden + Kennedy who seem to get these appointments right more often than not, and see if we can pick up a few pointers.

I spoke with Karl Lieberman, who has recently moved from Wieden + Kennedy in Portland to assume the role of Executive Creative Director in the Wieden + Kennedy’s New York office.

Karl and his partner Neal Arthur (WKNY’s Managing Director) run the 200 people WKNY office together, reporting back to Colleen DeCourcy, Global Executive Creative Director and Dave Luhr, President. Their client roster includes Bud Light, ESPN, Delta, the Jordan Brand, Equinox, Sprite and Spotify.

Karl was one of the originators of the Dos XX “Most interesting Man in the World” campaign… (no really, many people have attached their name to that campaign, but Karl was one of the original team who came up with it) and has been with W+K Portland since 2007 where he was recently running KFC, Yoplait, the P&G Olympics “Thank You, Mom” brand work and Travel Oregon.

I hired Karl to work on Volvo when I was ECD at EURO/RSCG. Some people you feel are not only going to have stellar creative careers, but have the personality and focus to become a great creative leader.

Karl, I believed even then, was one of the latter.

As we’re in a political year, I thought it would be worth a chat and see how his first 100 days were going as a freshly minted Executive Creative Director.

Michael Lee: You’ve been ECD now for about four months, is it different than expected?

Karl Lieberman: I’ve actually found that the jump from CD to ECD is not too dissimilar from the jump from being a creative to being a CD.

When you’re a creative, you’re basically trying to drive a 2007 Buick LeSabre that’s on fire down a winding mountain road in a blinding hailstorm.

When you’re a creative director, you’re trying to do the same, but you’re in the passenger seat and you’re not supposed to touch the steering wheel.

And when you’re an ECD, you’re still trying to do the same thing, but now you’re in the trunk and everyone keeps texting you.

This article originally appeared in Forbes.

MichaelLee  Michael Lee writes about creativity in marketing.

 

 

 

 

 

Join us for more creative talk at re:think design conference, June 9 in San Francisco.map-location2

logo_vmastoryboardlogo_sfdw

Bold and Beautiful

Historical Typeface Goes Digital to Honor Historical Gift

The new revival display typeface Prince Bold will be available shortly through the Shakespeare Press Museum at Cal Poly San Luis Obispo. It was named and created to honor and thank Raymond J. Prince, who recently donated $2.3 million to Cal Poly Graphic Communication Department to preserve printing industry history.

According to Professor Brian Lawler, the designer/developer of Prince Bold, “We were trying to think of something to give Ray to honor him for his many contributions to our program and to the industry. Someone suggested a plaque. I reminded the faculty that Ray and his wife are trying to get rid of things, not get more. So, we talked about a variety of other gifts.

“Then I remembered that I have a type design in progress that is a revival of an antique font in the museum. In the past I have named finished fonts for the student curators who give a year of their time to the Shakespeare Press Museum. I have Alix Gothic and Pan Black so far, named for former student curators.

“I suggested the Prince Bold idea to the faculty, and they thought it was a good idea. Then we planned the presentation at our annual banquet. All of the students and faculty would wear a bright red T shirt with a big P on the front in Prince Bold. The students printed over 300 shirts, and we made the presentation.”

“Ray Prince has become an icon at Cal Poly for the support he has provided to the Graphic Communication Department through wisdom and resources,” said Ken Macro, chair of the department. “He is a philosopher of printing, and it is befitting that his name will live on in perpetuity through a revival display typeface.”

A Thing of Use and Beauty

It was an excellent choice. Prince himself says, “When I heard about it I sat down and had no words. I only wish my father (a printer) could know about it. I always had a love for great display type faces and have in my early career set as well have printed many posters using wood type.

“Yes it is a nice thing to do,” he continues. “The best thing to do is what Cal Poly did and that is to provide a place and people to care for the printing industry library. This library has approximately 25,000+ books, thousands of magazines and journals covering the entire industry. In addition the library is up to date. This is a tremendous asset for industry, teachers and students. Thanks to a lot of donations of books and money from individuals, many friends and associations, the library is funded for the next 50 years and it is still growing. I have been a strong supporter of the industry since I entered it in 1958 and will continue to do so.

“A statement that Dr. Harvey Levenson made many years ago has stuck with me. ‘ Printers create items of use and beauty.’ I have no ability to create sculpture, paintings or any form of art but do have the ability to create things of use and beauty. That is what printing allows me to do. Why do I do this? Inspiration comes from many places but for me it comes from the thinking and ideas of previous years. History can open the mind and get one thinking. Likewise a library remembers better than any person and also contains far more information than anyone.’

Tech Notes

Prince Bold, an Open Type font, is a digital recreation of a wood type font originally named Roman XX Condensed. The font was first offered by George Nesbitt Company of New York in 1838. It is likely that the type was manufactured by Edwin Allen in his Windham, Connecticut factory.

“We have two incomplete fonts – one is two inches tall (in wood type terms that is called 12-line), the other is three inches tall. Between the two there were enough letters to draw a complete alphabet with numerals and punctuation,” Lawler writes. “Prince Bold is a design intended for display, not for text, as the thin letter elements are too delicate to hold up in small sizes. The fact that these thin elements were cut into the wood without breaking off is a feat of engineering.”

Historical Process

Wood type is made in a series of steps beginning with cutting logs from hardwood trees into circular blanks about one inch in thickness. After the blanks are cut, they are put into a drying oven for several months. The moisture in the wood slowly evaporates, leaving rock-hard wood that is ready for planing and polishing. After planing and polishing, the blanks are then coated with a thin varnish, which is rubbed-in by hand. Once the varnish is dry, the wood is ready for cutting into blocks, then routing into letters.

Wooden or paper-board master patterns of the letters are made about six inches tall, and mounted on a block of wood to bring them to the correct height. The prepared type blocks are then locked into a pantograph router, and individual letters are cut by an operator who uses the pantograph to follow the pattern by hand, while a spinning router tool cuts the fresh block in the shape of the letter.

In the early 19th century the router would have been steam-powered. After factories were electrified, these machines would have been powered by compressed air or electric motors. The benefit of a pantograph router is that letters of different sizes can be cut from one master pattern by adjusting the arms of the pantograph. The finished letters are perfected with hand tools –gouges and files – to repair small defects, and then the blocks are cut on a table saw to their finished width, according to the size of the letter.

From Old to New

To make the digital version, we proofed the wood type on super-white proofing paper, then scanned the proofs and drew each letter, being faithful as possible to the original letter shapes and side-bearings. After the letters were drawn, we un-condensed the design to make it normal width. Small changes were then made to the letters to standardize them, to thicken some of the too-thin strokes, and to enlarge the round letters to give them equal visual volume against their geometric counterparts.

Drawing and modifying the font was done in several steps. First a faithful tracing was made of the proofs from the wood type using Adobe Illustrator with its Template function (that makes a very light image of a photo that you can draw over). There are a number of characteristics of the original that needed to be adjusted to make the type look better in a modern typographic setting. Once the drawings were finished, each character was enlarged to about 12 inches vertical, then pasted into a program called FontLab Studio. In FontLab, the letters were placed on their baseline, then assigned natural side-bearings – the white space that accompanies each letter on the left and right sides.

After all the characters were inserted into FontLab, the process of drawing all of the new and missing characters began. To complete a font, there are over 250 individual glyphs. Accents are automatically added to characters to make the more common accented letters, but all the accents must be drawn for this to work.

Obscure glyphs including the Euro, the Yen, the percentile, and many more must be drawn, and they all have to match the style and weight of the other letters.

When complete (and no font is ever complete!) the font must be tested for exceptions to normal spacing. This process requires analysis of every possible pair of letters – no matter how obscure – to be reviewed and adjusted as necessary. From this process grows a kerning table, which becomes part of the final font. FontLab makes much of this task easy, but it must be done. It’ s laborious – but it’ s a labor of love!

Note: Tech Notes are taken from a section of the Prince Bold Monograph prepared by Professor Lawler.

 

More design talk will be happening during SF Design Week at the re:think design conference on June 9 in San Francisco. Join us!

logo_vmastoryboard

 

logo_sfdw

 

map-location2

 

What’s the Difference Between UX + UI Design?

Many thanks to AIGA and author Dave Benton for clarifying!

In a world where “flat” web design is ever-present, it can be tough sometimes to tell the difference between a wireframe from a final deliverable. Which is one reason I hear this question over and again: “Exactly what is the difference between UX and UI?”

The devil is in the details, so let’s make sure we’ve got the basics covered first. UX stands for user experience and UI stands for user interface. According to user experience consultant Jakob Nielsen,  a user experience designer is someone who “encompasses all aspects of the end-user’s interaction with the company, its services, and its products.” While Nielsen may be the leading UX guru, that definition doesn’t exactly clear things up for most people.

Loose wireframes courtesy of metajive.

 Loose wireframes courtesy of metajive.

One reason there’s so much confusion around UX and UI designers is because they’re joined at the hip.  The line between where one discipline ends and the other starts is blurry, to be sure, and to add to the confusion, different teams take varying approaches as to how the teams should interact. Over the past few years, UX designers have risen in their roles in the interactive team. Anton Repponen of interactive design duo Anton & Irene,  stated “Before UX designers were a solidified role, UX was still happening. It might not have been good UX, but it was still happening.”

For years web and app designers ruled the roost. What, you may ask, has changed so significantly that you now require a whole new person on your team? The simple answer is that interactive design has evolved from a few page brochure-style site to complex digital products and experiences; as it has grown, so has the role of UX designers.

Let’s break down what, exactly, a UX designer does. The UX designer’s main deliverable is a wireframe. In case you’re not familiar with wireframes (and bear with me if you are), they’re blueprints for an interactive experience. Wireframes essentially lay out all the content for a website or app and establish a visual hierarchy.

Wireframes serve two key roles: to clarify how a site or app will work and to think through the more complex problems. Wireframes are intentionally bland, with grey boxes and a simplified framework in order to provide focus to the content, and in many cases to allow sign off from the client. They are vital in confirming  all the content planned to go on the site so you don’t find yourself  adding “that missing paragraph” in round three of design.

fantasy wireframes

pixel perfect courtesy offantasy

With tools like Axure, Framer, and Invision, UX designers are also adding value for teams and their clients by taking on prototype creation. By creating clickable interactions, a wireframe feels more like an end product and user testing can begin immediately. A great UX designer is looking for innovative and surprising solutions to problems. Prototyping is becoming a bigger part of the UX role, which helps everyone understand the project before there are pictures, nice fonts, and colors in the layout.

The second role of wireframes is to set a framework so UI designers can do what they do best: provide visual emotion and context to the content. Typically, UI designers pick up the design from the intentionally bland black text and grey boxes and explore fonts, colors, sizing, and placement. This is where the content is brought to life by pairing images and copy, refining type hierarchies, and setting things on a grid. UI designers are concerned with the overall aesthetic of the brand and the way it will make users feel.

“Hang on! Didn’t you just say the UX designer planned the hierarchy? Why is the UI designer re-doing all this work?”

This is where the partnership between UX and UI really comes into play. Some teams consider the UX job done once the wireframes are approved, while others have the UX involved all the way through to launch. Some teams make pixel-perfect wireframes, some make sketches, and others leave things loose and open to interpretation for the designers. Like many areas of design, there’s no right answer for this process besides open communication.

With the rise of the UX designer’s role, we’re also seeing new tools arrive on the scene to accommodate this process. Apps like Sketch have created the ability to make one file that can start with UX and go all the way through to design. This has prompted Adobe’s much-anticipated Project Comet, the first product designed to embrace this new paradigm and allow users to wireframe, prototype, and design in one app.

When I think about the difference between UX and UI, I think of left brain vs. right brain. And although the lines can sometimes cross, UX and UI designers really do carry out different jobs. Whether you’re making rough sketches to quickly communicate an idea, or are creating pixel-perfect wireframes, the UX designer is trying to solve functional problems, plan content, and organize site data. The UI designer is responsible for conveying the brand and making the site a more pleasant and human experience.

Yes, we might see some overlap from time to time, but the inclusion of both makes for far better projects and superior outcomes. (And if you’re looking to up your UX game there are loads of resources, like this wireframe inspiration post on Medium.)

 

This article was originally published by AIGA. You can see their story here. And join us on June 9 for an AIGA SF Design Week event called re:think design conference for more incites into our design world.

logo_sfdwmap-location2logo_vmastoryboard

The Pros, Cons, and Future of Flat Design

We came across this article by Janie Kliever which seemed timely and relevant. Hope you’ll agree.

What is flat design, anyway?

You’ve likely heard its praises sung on blogs and in lists of design trends. This visually simplistic style has its roots in minimalism and can take a variety of forms, but is better defined by what it isn’t.

It isn’t 3D. The style’s name comes from its two-dimensional qualities, including flat shapes and the absence of details that create depth and dimension — such as shadows, highlights, and textures.

It isn’t skeuomorphic. Flat design started as reaction against skeuomorphism, an embellished style intended to suggest or resemble real-world objects or processes. Skeuomorphism makes generous use of effects like drop shadows, realistic textures, reflections, beveling and embossing, etc.
Flat Design’s Popularity Spikes

Flat design really started becoming a recognizable style in 2012 and 2013. Those were the years this trend became highly visible (and easier to emulate) thanks to the release of Windows 8 and iOS 7.

flat1
Upper, used with permission from Microsoft
Lower, ios 7iOS 7 (left) vs. iOS 6 (right). Via OS X Daily

From Windows’ modular layout with vivid blocks of color to Apple’s use of clean shapes and simplified icons, you can see some of the influences that shaped development of flat design and the evolution of the trend that followed suit.

The staff at UXPin, writing for Fast Co. Design, points out that “The ‘sweet spot’ in the evolution of flat design is somewhere between the original trend and the skeuomorphic ideals that were abandoned.”

But since flat design has been around for several years now and is still going strong, it’s likely more than just a passing trend. So let’s look at its pros and cons and where it might be headed in the future.

The Pros

Compatibility With Responsive Design

Since Microsoft and Apple jumped on board with flat design, the style was quickly adopted as a fresh approach to user experience. It was and continues to be popular for web and mobile design — and for good reason.

Flat design’s principles can be applied to other design categories, but its grid-based layouts and simple graphics are particularly suited to web and mobile design since they’re easily able to be resized or rearranged to display on different devices and screen sizes.

This example from Sergey Valiukh shows an example of simplifying and rearranging a design to provide a consistent experience between web and mobile:

flat2web and mobile Sergey Valiukh

On the other hand, skeuomorphism’s highly detailed style with lots of shadows and textures, along with fixed-size imagery, often doesn’t translate well when shrunk down or enlarged to fit various viewing methods.

As Ryan Allen at design agency Dapper Gentlemen puts it in his article titled Flat 2.0,

“Flat design can be built to dynamically scale to a content-appropriate size much simpler than a pixel-perfect design.”

Flexible Framework

Call it what you like — a grid, cards, modules, or blocks — many designs going for the flat look tend to have compositions organized by uniform geometric shapes. This type of layout, where every design element has its place, is easy to scan and navigate quickly.

Grids are also a flexible framework that can be shaped into many configurations. This allows designers to create an arrangement that best suits and showcases their content, rather than squeezing content into a limiting pre-determined layout.

For example, this grid-based brochure design by the Bureau of Betterment features different sized squares and rectangles to highlight various design elements such as typography and icons. The blocks of uniform color and simple illustrations add to the flat effect.

Flat3
grid Bureau of Betterment

This website, on the other hands, uses grids in a variety of ways, from the menu to the staff photos to the list of services:

flat4

flat5

 

 

Clean, Readable Typography

Flat qualities also extend to designers’ approach to typesetting, which often results in larger, more streamlined typography. The absence of shadows and other effects makes text easier to read.

flat6

There is much more to this article – including the “Cons”. Check out it’s original publication here at Canva. And join us June 9th for more design discussions at re:think design conference in San Francisco during SF Design Week.

 

logo_vmastoryboardlogo_vma_clogo_sfdw