Graphic Design

When two of the world’s biggest publishing houses, Penguin and Random House, merged in July of 2013, they were faced with a challenge: designing a graphic identity that honors the long legacies of two companies–Random House was founded in 1925, Penguin in 1935–while also celebrating their new union.

So do you somehow put the beloved penguin, based on a doodle by a junior executive in the ’30s, inside Random House’s house, originally drawn by famed illustrator Rockwell Kent? Scrap both the old logos for something entirely new? What about the distinct logos of the 250 imprints within the new corporate parent, from Puffin to Fodor’s to DK? Penguin Random House decided to bring out the big guns, tapping Pentagram partner Michael Bierut and his team to solve its identity crisis.

“We tried birdhouses, igloos, every combination of a bird and a house,” Bierut tells Co.Design of their quest for a perfect merger logo. Ultimately, the team settled on a simple, elegant solution (involving neither birds nor houses): a wordmark, three lines tall, spelling out Penguin Random House. The mark can systematically and flexibly pair with any of the original 250 imprint logos, and it acts as an anchor for this diverse family. “The wordmark signals that the autonomy, authority, and energy of each of these imprints wouldn’t be compromised or neutralized,” Bierut says. “Each would be strengthened rather than weakened by the new relationship.”

Selecting a typeface for the wordmark was no simple feat. Pentagram had to find something that would pair flexibly with 250 radically different symbols; some of Penguin Random House’s imprint logos are old-fashioned, some modern, some are wordmarks themselves, some monograms, some pictures. “The thing you’d normally do, because it’s easy, is default to a sans serif,” Bierut says. “But we felt that looked too cold and clinical.” And because the company sells literature, Pentagram wanted to find a serif typeface–historically preferred in book printing–to subtly channel the world of writing. Ultimately, they settled on Shift, a typeface originally designed by Jeremy Mickel as a makeover of the classic typewriter font Courier (and named for the shift key on your keyboard).

The new identity replaces an interim identity, also designed by Bierut, which featured our friendly Penguin standing, slightly awkwardly, as penguins are wont to do, next to a house. It appeared a bit, well, random, and coupling this doubled-up logo with imprint logos made for claustrophobic design. The binary pairing system avoids that.

Pentagram’s new identity for the merger will be used mainly in corporate communications. Readers might encounter it on a copyright page, or in ads, or in the digital world, on the company’s Twitter feed, for example. Imprints’ individual logos will still be printed on the spines of books, as they have been for decades, without the wordmark pairing. So those whose hearts warm at seeing squat illustrated puffins on yellow backgrounds or the DK logo, used for countless beloved children’s illustrated readers, won’t be denied this nostalgia as the publishing giants fuse.


From Co.Design

Graphic Design, Typography

Italian design legend Massimo Vignelli, best known for designing an iconic-yet-controversial version of the New York City subway map in the 1970s, died in his New York City home Tuesday morning at age 83.

Working firmly within the modernist tradition, Vignelli aimed for design that was “visually powerful, intellectually elegant, and above all timeless”–a slogan of sorts for his New York design studio, Vignelli Associates, which he founded in 1971 with his wife, Lella.

“If you can design one thing, you can design everything,” Vignelli had been known to say, and he lived by this maxim. He helped shape the visual and cultural landscape of the 20th century with work ranging from branding for the likes of American Airlines, IBM, and Bloomingdale’s, to housewares, signage, books, furniture, exhibitions, architecture graphics, and interiors.

As one of the most influential designers of the past century, Vignelli won some of the industry’s most prestigious awards, including the AIGA Gold Medal (1983, with Lella), the first Presidential Design Award, presented by President Ronald Reagan (1985), the National Arts Club Gold Medal for Design (2004), and the Lifetime Achievement Award from the Cooper Hewitt National Design Museum (2005).

Born in pre-World War II Milan in 1931, the young Vignelli and his classmates would regularly have to leave school after hearing bomb alarms and run to a shelter. “I don’t know how I existed,” he told theEpoch Times in 2012 of his life before discovering design but “children grow up no matter what.” Vignelli also remarked on his luck, believing that if he had been born in the generation before or after his own, he would have either been part of the war or part of the national rebuilding effort, and not a designer.

Vignelli first became design obsessed as a teenager, after visiting the home of his mother’s interior designer friend. He’d never fully realized that most everything around him had been dreamt up by a human being, and became captivated by the idea. He started reading all the design books and magazines he could get his hands on, and sketching ideas for furniture he wanted in his room.

At age 16, he began studying and working in the office of a local architect. Since design schools didn’t exist at the time, at 18, he left Italy to study architecture at the Politecnico di Milano, then the Universita di Architettura in Venice. Soon, he was running in the same circles as architecture greats like Le Courbusier, Mies van der Rohe, Alvar Aalto, and Charles Eames. In an interview with Bigthink, he called his young self an architecture “groupie.”

Vignelli met his future wife, Lella, at an architecture convention and they married in 1957. Three years later, they opened an “office of design and architecture” in Milan, designing for European firms like Pirelli, Rank Xerox, and Olivetti. The pair moved to New York City in 1965, and by 1971, they’d established Vignelli Associates.

He made his arrival in New York known in a big way, with his drasticredesign of the New York City subway map. After the map’s introduction by the MTA on August 7th, 1972, complaints from straphangers started flooding in–about stations that seemed misplaced, about its weirdly square-shaped rendering of Central Park, about water that was beige instead of blue. (Vignelli was strongly opposed to focus groups, and they’d released the map without prior consumer research.) Instead of striving for geographical accuracy, Vignelli had turned the labyrinthine tangle of subway lines into a neat, clear diagram. Color-coded lines ran at 45- or 90-degree angles, and each station was represented as a dot. Design geeks loved this elegant translation of a messy reality into a sleek “System Map,” as Vignelli called it. Michael Bierut, now a partner at Pentagram, remembers keeping a copy as a souvenir on a trip to the city. Though the MTA ultimately opted for a new design in 1979, Vignelli was tasked in 2011 to create an interactive interpretation his System Map for the MTA’s “Weekender” program.

Vignelli was as skilled at articulating his design philosophy as he was at actually designing–his aphorisms are as distilled and elegant as his visual work. “The correct shape is the shape of the object’s meaning,” he once said, describing his preference for a creative process that investigated its subject from the inside out. He wrote books aimed at sharing his wisdom with younger creatives, such as The Vignelli Canon(2009) and Vignelli A to Z (2007). Speaking to Debbie Millman for her book How to Think Like A Great Graphic Designer, he offered an eloquent explanation of what design, in its broadest sense, is really for:

It is to decrease the amount of vulgarity in the world. It is to make the world a better place to be. But everything is relative. There is a certain amount of latitude between what is good, what is elegant, and what is refined that can take many, many manifestations. It doesn’t have to be one style. We’re not talking about style, we’re talking about quality. Style is tangible, quality is intangible. I am talking about creating for everything that surrounds us a level of quality.


In his last, gravely ill days, Vignelli’s son, Luca, sent out an unusual and touching request: that anyone who had been influenced or inspired by his father’s work send him a letter. Designers from all over the world penned notes of appreciation, awe, and gratitude to the man who’s been called the “grandfather of graphic design,” and many posted those letters online as well, with the hashtag #dearmassimo. The outpouring of love from the design community is perhaps a stronger testament to Vignelli’s influence than even the most prestigious award.

[Photo by John Madere]
From Co.Design
Graphic Design

Quality stems from intellectual elegance, and is precluded from the vulgar mind.”

“We’re all going from point A to point B — how we get there is the conductor’s problem,”legendary graphic designer Massimo Vignelli once said at an event we both attended several years ago. Heartbreaking as it is to learn that, after a long illness, Vignelli has reached his final point B, he lives on as a masterful conductor of design and life, whose legacy endures as a luminous reminder that there is no greater feat of the creative spirit than the marriage of good work and good personhood, talent and integrity, poise and principle.

It is that singular spirit that imbues the 2007 monograph Vignelli: From A to Z (public library) — a sort of alphabet book of the Vignelli ethos, spanning from big-picture philosophy to the practical particulars of various projects.

One of the most poignant parts of the book appears under the letter D, for “Discipline.” It is a message that applies not only to design but to just about every endeavor — an iteration of a sentiment shared by creators as diverse as celebrated composer Tchaikovsky (“A self-respecting artist must not fold his hands on the pretext that he is not in the mood.”), novelist Isabel Allende (“Show up, show up, show up, and after a while the muse shows up, too.”), painter Chuck Close (Inspiration is for amateurs — the rest of us just show up and get to work.”), beloved author E.B. White (“A writer who waits for ideal conditions under which to work will die without putting a word on paper.”), and Victorian novelist Anthony Trollope (“My belief of book writing is much the same as my belief as to shoemaking. The man who will work the hardest at it, and will work with the most honest purpose, will work the best.”). Vignelli gives the notion his own uncompromising touch:

This is the most important virtue for a designer to possess. Discipline is the god of design that governs every aspect of a project… Without it, it is total anarchy, total randomness, pure chaos. Discipline is the attitude that helps us discern right from wrong and guides us to achieve consistency of language in whatever we do. Discipline is what helps us navigate through the social context in which we operate. Discipline is what makes us responsible toward ourselves, toward our clients, toward the society in which we live. It is through discipline that we are able to improve ourselves, mentally and physically; to offer the best of ourselves to everything around us, including every project on which we work…

Discipline is the supreme state of mind, the master of passion, and the governing structure of nature.

There is no design without discipline. There is no discipline without intelligence.

Vignelli returns to another aspect of the subject under the letter Q, for “Quality or Quantity?,” exploring the relationship between discipline and quality. He shares an anecdote of his formative philosophy that, while rooted in the client business, applies equally to any type of work that involves an external “other” — a client, a collaborator, an audience. Vignelli writes:

Early in my professional life I had to make a decision about clients. I realized that only certain types of clients can produce a consistently high level of quality in their [work]. Other clients never seem to reach any satisfactory level of quality. I noticed that what we call a good client — the one that has vision, courage, and clarity of mind — usually gives a good briefing and lets you do your work. Invariably, they get the best results. The only problem is that this kind of client is rare. The other kind, the bad client, is the one that has no briefing, changes course during the process, continuously interferes with you and most of the time, at the end, is also unhappy with the results. Most clients tend to belong to this category. Therefore, early on I had to make a decision — whether to have a large quantity of bad clients or a few good ones… So I made the decision to pursue quality, even if it was less profitable…

To work for quality requires discipline and determination, from both the designer and the client. It is important that the client understand that your efforts are aimed to achieve the best possible quality for the product, company, or institution. Quantity often follows quality; rarely does the opposite happen. In other terms, quantity almost always follows success. To strive for quality is an attitude that demands tremendous rigor toward ourselves and toward the entire process of a project.

Vignelli considers the notion of “intellectual elegance,” which he discussed with exquisite eloquence in his fantastic interview with Debbie Millman, at the root of quality:

Quality stems from intellectual elegance, and is precluded from the vulgar mind. The great utopia is to have quality in great quantity. To some extent, industrialization can multiply an object of quality in great quantity and make it accessible to large numbers of people. This is the aim of our profession. This is the responsibility of the designers and their clients. This is the ethical commitment that every designer should make and follow. The moral imperative should be to reduce the ugliness around us, the vulgarity that surrounds us, and replace it with decent, unselfish designs. Every day we face this opportunity and we should not lose the chance to take it.

In the section headed S, for “Style,” Vignelli echoes Schopenhauer and returns to this notion of intellectual elegance vs. vulgarity:

Style is a byproduct of a person’s being. It reflects a way of thinking; behavioral patterns, attitudes and, above all, a culture… A person can be primitive and illiterate, but still have a lot of style, because style (or intellectual elegance) is the projection of a person’s intelligence. Lack of intelligence generates vulgarity. We could say that an object has style if the intelligence that generated it had style, had intellectual elegance. Very humble objects, like old tools, had the direct elegance generated by a culture sensitive to the requirements of that tool and its user. Style is the way things, ideas, attitudes take form. Style is the tangible aspect of intangible things.

Vignelli: From A to Z, though presently hard to find, is a spectacular read and well worth the hunt. For a deeper dive into Vignelli’s expansive mind and spirit, see Debbie Millman’s interview with him on intellectual elegance, education, and love, then bid one final farewell with their live conversation, filmed by the late and great Hillman Curtis:

You are missed, Massimo, and thank you for everything.

Graphic Design, UX/UI

Steve Krug famously said, “Don’t make me think.” This statement is simple, profound, and especially true in the case of mobile interfaces. With smaller screen real estate, increased app fatigue, and decreased user adoption rates, there has never been a better time to revisit these words.

The key to keeping apps ticking, alive, and successful is captured right in that statement. Create an intuitive user experience; don’t make the user think.

User experience is the art of weaving together context, design, ease of use, uniformity, context, relevance, and consistency. On mobile, this experience is what sets apart the successful apps from the rest. Every interaction that the user has with the app turns into an opportunity to be seized to turn it into a deeper, longer relationship. This can be accomplished in two ways:

  1. Through colors, design, and typography—the purely visual end of the user experience spectrum. Designers can use these elements to create visual continuity, pleasing interfaces, readability, and functionality.
  2. Another equally important and oft-overlooked aspect is controlling the front end of mobile apps (the mobile UI, screen layouts, and elements) from a back-end (such as the server or Content Management System or Web application). This philosophy makes it so that screens can be built at runtime allowing them to be either data or user driven.

Reams of digital paper have been written on achieving user experience through purely visual elements. Let us delve a little deeper into the latter approach.

The Over-Arching Process

  1. The back-end, be it the server or CMS first identifies the context.
  2. Depending on context, this back-end generates screen element information and selects thecontent to be displayed in the app.
  3. This information about the screen elements and content is sent to the front end, which is the mobile app.
  4. The mobile app renders the screen accordingly.

What Impact Will this Have on Users?

A superior and more convenient user experience. Period.

By getting rid of screen widgets that are not needed for a particular kind of user or a kind of data, we can offer users an uncluttered app interface. We can re-use the same screens for different use cases. We can make the application scale automatically and enhance functionality without having to deploy new code.


Getting rid of screen widgets that are not needed … can offer users an uncluttered app interfacetweet this


Check out a few real world contextual usage scenarios:

Context 1: Users

Identify user groups based on login and display screens accordingly. Let’s take the example of an enterprise iPhone app being used by employees of a company to fill in timesheets.

  • Upon login, an employee views just his or her timesheet and has the option to fill in the fields with hours spent and project worked on before submitting it.
  • If the user is a senior manager, however, upon login, his or her screen would show his or her own timesheet and additional links or buttons to see the timesheets of team members and approve them.
  • The back-end identifies not just that this user is a manager but also the employees that are in his or her team, allowing access to only their timesheets.
  • For managers, the screen could also throw up a dashboard for analysis such as a chart of employees vs. time spent on work.

Back-End Mobile DesignBack-End Mobile Design

Context 2: Data

Identify the data structure and display content accordingly. Let’s take the example of a mobile app that requires users to fill a form with different fields.

  • The back-end application can be built in such a way that it allows for fields to be added with names and their types. For example, Name would show up with a text field, whereas a “need pick-up” option would show up with a toggle switch with “yes” or “no” options.
  • If we take another case where the data type is a list, this is identified and sent to the mobile app along with the list contents. The app will then display a widget that can hold a list.
  • The fields can also be reordered exactly the way the mobile app has to display them.
  • When the business requirement changes to show new fields in this form or to hide this form altogether from the mobile app, it can easily be accomplished using the database or a content management application.

Back-End Mobile Design

Context 3: Input Fields

Identify the input field and display appropriate attribute field. For example, an admin user uses a CMS to create a form for patients to fill up in their mobile app.

  • This user can create a field “Registration Number,” which is a text field, and specify its attribute as “numeric input.”
  • Accordingly, in the mobile app, that form displays a text field that shows up with a numeric keypad when user tries to enter information.

Back-End Mobile Design

Context 4: Geo Location

For this example, a mall has an app that visitors have downloaded.

  • As they move around, visitors will see trending offers and coupons on their screens related to the stalls they are closest to.
  • Also, depending on where they are, they see screens getting refreshed with relevant content. So, if they were close to an apparel store, the UI would be a product catalog whereas if they were near a restaurant, they would see a menu listing.

Back-End Mobile DesignBack-End Mobile Design

Context 5: Operating System

For cross-platform apps, this could be a real boon.

  • The app could show iOS style buttons if the device is detected as an iPhone or hide the “back” buttons if it is an Android phone that has the device “back” option built in.
  • The true advantage lies in retaining the native feel even with cross-platform or web-based apps.
Context 6: Screen Resolution

Let us take the example of an app that has images coming into the app via web services.

  • The exact number of images would be known only at runtime, so a single image will have to be shown and centralized on the screen, but multiple images would require an image gallery.
  • Similarly, large devices can show a grid of thumbnail images and allow users to pick one to see full screen view. For small devices, the grid would not work because each thumbnail is too small for the user to make out anything.
  • So, the best UI would be to use a carousel or a horizontally scrolling set of images for the user to browse through the entire set. Another option would be to have the same grid style, but bigger-sized boxes in it.

Back-End Mobile DesignBack-End Mobile Design

Dissecting the Pros and Cons

The advantages that this approach offers designers and users vary from more innate user interactions to reduced code deployments. Specifically:

  • Reduced number of screens in the application
  • Reduced number of clicks to get to a feature/functionality
  • Gets rid of unwanted screen elements making for a cleaner UI
  • Enhances user experience by keeping content contextual to user/data
  • Retains flexibility to introduce new screens or new screen elements by giving a few user controls in the back-end system, which also allows for scalability
  • Reduced need to deploy new code on the web/mobile application each time you want the screen to look different—especially true with mobile apps, where every code change will need a new version of the app to be uploaded on to the app store
  • Give clients the power of self-styling their screens
  • Render widgets according to the OS, browser and screen resolution of the device

That said, there are a few data points to abide by:

  • Stay away from introducing unnecessary complexity
  • Try not to integrate unnecessary logic into the screen-building, keeping in mind that since this happens at runtime, you don’t want screens to take ages to load (Take the case of inheritance of widgets: if widget A is present show widget B with X content else if widget A is absent, show widget C with Y content—avoid this kind of logic if not really necessary)
  • Use intelligent data structuring—building web response templates in a way that the mobile app can easily use means processing time on the mobile device can be kept at a minimum
  • Use this approach only in cases where it makes sense to do so—there’s no need to follow this approach of building screens dynamically at runtime if: functionality can be easily achieved by controlling it at the front end; functionality can be easily achieved by hard-coding the screen layout; there are not too many varying contexts in the scope of the application


When the goal is an app that delights and engages, user experience is the key—this is a universally acknowledged truth. But, with mobile apps, decoding user scenarios and coding your app accordingly will surely get you on the path to a longer user commitment.

Illustration of smartphone coutesy Shutterstock.


From UX Magazine

Graphic Design, Other, UX/UI

Mobile is here to stay, with its own set of rules and constraints. At the same time, it’s a rapidly evolving platform, with new technologies and capabilities being added by the quarter. We can’t design for mobile like we used to do for posters and Web pages. So what toolkit and mindset does a mobile designer need to thrive?

Challenges and Constraints

Every medium has its limitations. Even mobile—one of the richest canvases a designer can dream of—still has particularities that need to be addressed:

Device fragmentation

There are countless smartphone and tablet models out there, each one with a different screen size, pixel density, and physical input (not to mention screen orientations). This means we can’t just pre-assume an iPhone 5 screen-size and design tightly to it. In mobile Web, responsive design allows us to plan for variations and make the design adjust to different screens with little effort. In native mobile design there is less liquidity, so we need to think our designs as tolerant to screen differences, and document the way such variations impact the layout.

OS fragmentation

As of today, we have three major mobile operating systems to consider: AndroidiOS, andWindows Phone, in order of usage. Every OS has its own set of interface patterns, externalinputs, and guidelines, not to mention variations between OS versions as well. Within Android things are even more complex: the version of Android a device will use is going to be influenced by the device maker, which can overlay its own layer of UI on top of it, and the device itself and its processing capabilities (not to mention the upgrade delays imposed by some carrier companies).

Even if this fragmentation does not make the design vary too much, it does influence how users experience an OS and what they expect from it. Consider, for example, that the experience of Android that most users have is actually the TouchWiz or Sense interfaces.


The way an app is designed can influence the amount of energy it uses. To put in other words, our design can leave our users without battery juice. Certain unnecessary visual effects or animationsmay need intensive graphic processing to run; a JavaScript-intensive Web page can also use a lot of power. And while our newly purchased device may be running our app smoothly, a 2-year old device may be struggling with it. These are just examples to illustrate the idea that a mobile designer needs to understand the impact that their decisions have in how an app performs and uses the device’s resources.

Development and cost constraints

Just because we saw it in that cool new app the other day doesn’t mean that it can be easily implemented. The way we design an app can make the difference between meeting and missing a deadline. If we don’t clearly understand the cost of the design decisions we make, we are basically putting the burden on the developers and creating an opportunity for friction later on.

Things to Unlearn

Many of us have been trained as designers in an era where a digital mindset was still incipient. That has historically caused us to approach digital design from a static point of view (exporting HTML directly from Fireworks, anyone?), and the misalignments that result from this perspective are still being taught in design schools. With mobile design the gap is even wider, as mobile brings a language for which nearly all of our current tools and methods fall short. So it’s time to update our mindset.

Mobile is not a canvas

HTML isn’t a canvas either. You can’t just throw things at it like you’re designing a poster. I suspect that designing in Photoshop is not helping us in making the switch, because we have been using it to design posters and illustrations and retouch photos for more than two decades. We’re still “painting” our interfaces, when screen size fragmentation and the dynamic nature of mobile call for a different approach to design.

Mobile is not a canvas … You can’t just throw things at it like you’re designing a poster

Stop thinking of screens and start thinking of transitions

We are just starting to realize that the “screens” approach doesn’t cut it when it comes to mobile design. Thanks to apps like Facebook Paper or Yahoo! Weather that showcase a different way of designing, we know we need to design based on transitions rather than still images.

Transitions, once just disposable eye-candy, are becoming the center of a mobile experience. They not only give a live, interactive tone to the interface: they are an interface element in their own right. Transitions convey movement, space, change, and hierarchy and are a great ally in communicating the underlying app structure to the user. They also render a static approach useless.

Put your designer ego aside

You don’t need to be unique or original, especially when being “unique” means redesigning a known interface pattern just for the sake of uniqueness. More often than not, sticking to native UI elements and patterns is the smartest move to get the app completed on time. Rather than pushing your designed-from-scratch set of UI controls, focus on creating a simple, effective interface and create branding that shines.

For inspiration, real apps are better than designer portfolio sites

Many designers go to the likes of Behance or Dribbble in search for inspiration for their next mobile project. While you will always find beautifully crafted artwork on such sites, if you are not a seasoned mobile designer, those mockups can be misleading. Many of them are just that—mockups that have never met reality, and they can bias your judgment toward believing that you must create an entirely customized UI every time.

Get inspired by real, successful apps. There you’ll find the designs that have made products thrive. Their interface patterns have been tried and tested in the real world, and you know for sure they can be replicated.

New Skills to Learn

Know the platform

Just as you need to understand HTML/CSS to be a good Web designer, you need to understand the underlying structure of mobile apps too, and they are totally different from Web pages. For instance, they don’t “flow” the content as HTML/CSS do, and that changes a lot the way we should think about the layout. You won’t have the magic of CSS inheritance (at least not nearly as polished and not out of the box) to separate markup from presentation. Oh, I almost forgot: there’s no “markup” either.

You will need to get into some documentation for developers, read the manuals and understand how mobile apps are assembled, compiled, and published. Understand how a mobile device works and which things drain the battery the most. You may even need to learn some code basics, which pays off in the long run: you’ll be able to learn the developer’s language and you will design with efficiency and feasibility in mind.

Know the nuts and bolts of mobile technologies

Here’s a laundry list to get you started: location services (Wi-Fi- and GPS-based), Bluetooth, Low-Energy Bluetooth, beacons, front and rear camera, microphone, gyroscope, accelerometer, vibrator, fingerprint scanner, eye trackingvoice recognition, face recognition, tap detection, and the list goes on and on. Every new technology opens the doors to a whole new breed of apps. Your responsibility as a designer is to be aware of the cutting-edge.

Discover how far you can get with native components

Native UI components actually give lots of freedom to customization efforts, but you need to know exactly how to use them. If you can do most of your UI with native controls with a few tweaks, you’ll save a great deal of the developer’s time, which they will be thankful for.

Know the mobile workflow

Learn about mobile SDKs, install them and get them to run. Learn about mobile frameworks, such as RubyMotion, Xamarin, or Titanium. Get familiar with IDEs, where the graphic assets are located within a mobile project, how they should be named, etc.

Learn mobile interface patterns

All three major mobile platforms have similarities and profound differences on how they understand mobile interaction design. Their users expect different things from them. As a mobile designer, you should be completely aware of these differences and able to detect them on the spot.

Don’t stick with a single mobile platform. Try all three, or at least use Android and iOS on a daily basis for at least 6 months each. I did it, and it’s great—you get insights from each platform you’ll never get with casual use or looking at screenshots. And switching is good: being a fanboy is bad for a mobile designer.

Document and explain your UI

Since screens don’t tell the whole story anymore, you will have to document different states, transitions, and animations as well as how the app reacts to data and to the environment. Annotate your mockups, provide animation examples, and plan for device orientation.

Embrace Lean UX in the design phase

A modern designer should be a strategic designer. So your goal, rather than just come up with something beautiful, is to infuse into the design everything the team has learned about the product. Prioritize rapid prototyping in order to get early insights of what the users want. Save the detailed artistic work for later. Ensure that everything that is designed is aligned with the core value proposal and with the users’ needs.

Embrace Agile UX when implementing

You can’t just hand your mockups to the developer and forget about it, as most of the graphic requirements will arise when developing. There will be always screens not previously considered, new transitions and state changes that require new graphic assets. You need to be there and respond in real-time. So bring your chair next to the developers and be ready to step into the design when needed. Make sure that the developers only have their mind in development and that they don’t have to make UX decisions to fill your gaps.

Some Extra Tips for Mobile Web

Be responsible with responsive

For mobile Web, responsive design is not the one-size-fits-all solution. In some cases it makes sense, in others it doesn’t. It’s your responsibility to know where mobile demands a dedicated solution and where a few responsive tweaks are enough to maintain a single code base. Even if you are designing for “traditional” Web, plan your layout so it adapts gracefully to different screen sizes. And mind asset sizes: that nice full-screen 1Mb background image can make your mobile visitors waste money in cellular data consumption.

Use CSS and JS candy with caution

Yes, CSS animations, gradients, transitions, and shadows are great and incredibly easy to implement. And parallax is neat, plus all the cool guys do it, right? But these elements can take a toll on a mobile device battery. The more “live” visual effects you pile up, the more sluggish the scrolling will feel and the more power it will consume.

Even innocent CSS3 selectors can impact performance on low-end devices. Prefer ID’s and classes when possible, and try to keep your descendant selectors low. So if you can go with #submitinstead of .main .container .form > div .submit, it’s a good idea.

Use the Right Tools for the Job

This is not at all a definitive list, and you will find great alternatives for many of them, but these are some good tools suited for mobile design (some of them are free, most of them are Mac-only):

  • Sketch for graphic design and @2x hi-resolution export. This is arguably the heir of the now discontinued Adobe Fireworks, and it has been done with mobile in mind.
  • LiveView and Sketch Mirror (a companion for Sketch) for mirroring your screen to your phone. Things look and feel very differently in a device. You’ll be able to easily test the size of interaction areas and controls.
  • Origami (by Facebook) and Quartz Composer for mobile interaction and animation prototyping. This is the closest you can get to a native UI prototyping without coding, and will give you a good introduction of the kind of logical thinking that programmers use.
  • PaintCode for creating UIs and graphics and exporting them directly to Objective-C.
  • Mockup web software. There’re plenty: Balsamiq, just to name a few.
  • Flinto for creating mobile interactive mockups that can be installed in your iPhone, mimicking real apps (taking advantage of Safari’s Add to Home Screen feature).
  • ImageOptim for compressing your PNG and JPG files without loss of quality.
  • Version-control software, preferably Git or Mercurial. Commit your assets and changes directly to the repository and in real time, rather than e-mailing a ZIP to the developer.

All of this is Already Obsolete

Not really, but the pace of progress in mobile technology is incredibly rapid. In no time we will be faced with the challenge of designing for wearables, smart appliances, and sensors connected to our mobile apps. New challenges and innovations come out daily. So ,if anything, being dynamic, flexible, and ever-curious as a designer is what will ensure you grab a seat in this roller coaster.

From UXmag

Graphic Design

Cover by Rob Vargas

Following Richard Turley’s departure in April, Bloomberg Businessweek has promoted two of its design team, Rob Vargas and Tracy Ma, to creative director and deputy creative director roles. We talked to them about the moves and what it means for BBW…

As editor Josh Tyrangiel revealed earlier today, Vargas, who moves from his role as art director to creative director, was part of the design team Turley headed up in 2010 and that conducted a complete overhaul of the magazine’s design; while Ma moves from her role as assistant creative director to deputy creative director having been at BBW since November 2011.

Also announced was that design director Cindy Hoffman is set to become more involved with the Bloomberg Visual Data department, a move that Tyrangiel says will enable the design team to work more closely together.

“[Vargas] is already well known outside this building for his stunning covers,” Tyrangiel wrote in an email to BBW staff. “From the fishnet legs of Ashley Madison to his recent re-creation of a Marvel comic [shown above], Rob’s ability to turn any concept into something worthy of a poster makes him one of the most unique talents in our business.”

Ma, he continued, has been responsible for “the psychedelic tea-sipping Ted Cruz cover and our Lenovo tech-scavenging raccoon” and had also been behind all the branding for BBW’s 2014 Design Conference in San Francisco. “She also holds the distinction of being our first Hong Kong-born, Toronto-raised, mime-studying deputy creative director,” he added.

We spoke to Vargas and Ma about the announcements and what we can expect from BBW and its design team – CR’sStudio of the Year in 2013 – under its new creative direction.

Cover by Tracy Ma

CR: Appointing new CD and Deputy CD roles from within the existing BBW design team would suggest some pretty firm continuity in terms of the look of the magazine – you’ve both been working on the title from between three to four years. A new opportunity also gives you a chance to change things again – is there anything that you think you’ll now do, or approach, differently?

Rob Vargas: Since the initial redesign, it’s been an incremental evolution towards how we look today. If you take a recent issue and compare it to our first one, or even an issue from two years ago, there are dramatic differences, and none of this happened in one shot.

In terms of moving forward, I’d like us to keep that spirit of continual evolution. Things that end up changing will occur because we’ve determined that they’re pushing the boundaries of what you expect in a business magazine, and engaging the reader more effectively with strong visuals and richness of content. These are the principles that guided us from the very beginning.

Spread by Rob Vargas

Cover by Rob Vargas

Tracy Ma: I think appointing the roles to people within the existing team suggests that there is a really solid team in place here. In terms of what we want to do differently, we’re still trying to figure that out together. Businessweek has always been a safe place to experiment and push our voices. Going forward I’d love to figure out a schedule outside of the weekly cycle and a separate, larger studio space where we can experiment on longer-term projects and hone our visual storytelling skills.

CR: The radical redesign that Richard oversaw (with you Rob) was rightly celebrated for a number of reasons, but are you conscious of aspects of this approach as being thought of as ‘the BBW way’ of doing things? How do you keep things interesting, for yourselves as a team and for readers.

RV: Businessweek definitely has a distinctive voice. I think there is something to the way we approach stories that feels uniquely “us.” What’s so appealing about this as a designer is that part of that approach is the elimination of many parameters that can exist at other magazines.

Every story, whether a feature or front- or back-of-book story, is an open opportunity to be expressive, and to experiment. The amazing thing about the staff here is that everyone is eager to continually use their abundant talent. Every challenge is seen as an opportunity. It would be infinitely worse if laying out this magazine required minimal thought.

Spread by Tracy Ma

TM: The rigour of our grid and the ability of Helvetica to basically absorb all personalities being put into it help us put together layouts really quickly. The fast pace at which we make things and send the book to the printer really gives us a distinctive look and has made us learn to trust our instincts.

But overall I never considered the structure of the magazine as having any direct influence on the way to we do things – the bigger phenomenon at work here is that we have a dream team of kids who enjoy hanging out with one another. So many companies spend a bunch of money trying to figure out how people can collaborate better, but we seem to do it seamlessly.

A big part of our job is just trying to make each another laugh. Moving ahead we’ll continue seeking out more like-minded people and have more drunken naked meditation rituals expand our visual vocabulary.

Feature opener by Rob Vargas

CR: Can you tell me a bit about how the design team will work, in light of your new roles? Also, you’ve always had a very close working relationship with Josh in terms of coming up with cover ideas etc – I’m guessing that will still be a key part of how you work?

RV: The team will be structured similarly for the time being. Tracy and I will work mostly on covers and features, and have further input into the rest of the book. Cindy Hoffman, our design director, has taken on an increased role in the graphics department. Cindy, Dorothy Gambrell, Evan Applegate, and the rest of the graphics team continuously contribute to all facets of the magazine.

Jaci Kessler art directs the back-of-book lifestyle section. Chris Nosenzo, Chandra Illick, Shawn Hasto, Lee Wilson, and Braulio Amado work on the front-of-book news section. That being said, there’s tons of cross-pollination, and when things like special issues happen, everyone contributes. Josh will continue to be a key part of the design process – especially covers.

Feature opener by Tracy Ma

TM: Having a combo, double-trouble leadership duo instead of the singular leadership of Richard will change the dynamic of the place. I see a lot more collaboration between the departments in the future, which will work out well for our team because we all have overlapping skills.

We’ve all learned from Richard (sniff cry tears river river) that the best way to tell a story isn’t always the most beautiful or necessarily the most photographically/typographically inventive way.

Working closely with Josh and the other editors is the most important part of how we work. Josh’s vision when he created the magazine was that art directors and editors would have equal weight, and it’s proven to be the key ingredient of our success.


From CR Blog