Posts about Visual design


Winning the Primary Election with Data Visualization

Cooper has just published the second in a six article series about Elections for UX Magazine. Below is an excerpt from the article "Winning the Primary Election with Data Visualization" written by Jim Dibble. Read the full article on UX Magazine

In addition to following your favorite candidate’s progress during election season, as a UX designer, you can find new inspiration for ways in which to help your users explore data.

Election season offers UX designers lessons and inspiration for helping users understand and explore data. In addition to following your favorite candidate’s progress during election season, as a UX designer, you can find new inspiration for ways in which to help your users explore data. In this article, I’ll take a look at a couple of the different news and political sites, and see how they’ve used interactive data visualizations to help readers better understand the complex data behind election predictions and results.

There are myriad ways to present election data. As with all information and interaction design, your method of presentation depends on the type of reader you’re trying to reach and the types of questions you’re helping them answer — do you want to help them understand the likelihood of future results or to help them interpret how demographics and behavior influenced votes in the past?

I’ll take a look at several strategies for presenting data, depending on whether the user is looking forward to predict potential results or looking backward to understand how demographics and issues influenced results. During election season, readers want to examine data from several perspectives:

  • Looking forward to upcoming primary results
  • Understanding election results as they arrive
  • Looking back to understand the meaning of what has happened
  • Predicting the future
  • Playing “what if” scenarios with the data
  • We’ll look at good and bad examples of each in this election cycle, and then pull out some general principles for data visualization that can be applied for any examination of data.

Read all of Jim's article here on UX Magazine.

In addition to following your favorite candidate’s progress during election season, as a UX designer, you can find new inspiration for ways in which to help your users explore data.

Read More

A Public Display of Interface

Graphic Design from the Collection, May 14–October 23, 2016, SFMOMA, Floor 6

The last time I visited SFMOMA was 3 years ago, just before they closed for a major expansion of the museum. I worked on an interface that had just won an interaction design award several months prior to my visit and was on a designer’s high, daydreaming as I walked through the museum, wondering, would a modern art museum, like SFMOMA ever feature the design of something like an interface? Maybe I could be part of that history, contributing to an innovative interface or at least one little icon. 


Amused by the idea that one day there could be an exhibition detailing the mode of interface style throughout the years, I imagined the possible exhibits celebrating a functional, digital aesthetic.

Consenting Affordances: Web vs. Desktop and their Lovechild, Mobile

Wistful Analog: Skeuomorphism and the Rise of Flatland

Extravagant Limitations: Evolution of the Application Icon

Window Shopping: The Armors of Netscape, Explorer, Firefox, and Chrome


Could something like a 16x16 icon be on display in a modern art museum? Would something so tiny and digital be considered too silly and insignificant to rest under the same roof as a Rauschenberg, O'Keefe, or Warhol? With the awakening of a new SFMOMA, the interface daydreaming stopped and revealed a new reality: the recognition of an artform whose infancy rivals that of Pop Art but until now has yet to be collected, to tell a new story, found on floor 6 in the exhibit: Typeface to Interface.

Typeface to Interface.

I was reunited with those interface exhibition dreams during the opening of the overwhelmingly airy and far-too-much-to-see-in-a-day new SFMOMA. The 170,000 square feet of exhibition space turns the museum into one of the largest art museums in the United States (larger than the New York MOMA and The Getty Center in Los Angeles) making SFMOMA one of the largest museums in the world specifically focusing on modern and contemporary art. 

The exhibit takes selected work from the museum's permanent graphic design collection (spanning as far back as 1950) and joins it with examples of graphic design that has shaped the development of the interface – our modern day means of visual communication. Posters, visual communication systems, and annual reports are interwoven with a variety of technology platforms: the desktop interface, the stylus, and the mobile touchscreen – the tools and methods we’ve used to communicate via the interface. Underlying all of this are the foundations of visual design and as a result an understanding of human behavior.

Read More

With the awakening of a new SFMOMA, the interface daydreaming stopped and revealed a new reality: the recognition of an artform whose infancy rivals that of Pop Art but until now has yet to be collected, to tell a new story, found on floor 6 in the exhibit: Typeface to Interface. 

Read More

Presidential Election 2016: The Best UI

With each leap year comes a new race to the White House. Candidates are constantly being compared with regard to their positions on health care, international policy, civil rights, and the economy. However, one important issue has fallen off the radar this election: the strength of design of the leading candidates' websites. In this article, I'll compare and assess the designs of the five leading candidates' official campaign website homepages.

Disclaimers 

  • Candidates were selected based on their performance in the primaries at the time of this writing.
  • Candidate names are displayed in alphabetical order.
  • The messaging and imagery of candidate sites can (and do) change on a daily basis.
  • Content may appear differently depending on when you view the site.
  • The websites were viewed in New York City using Google’s Chrome browser. Content may appear differently depending on where you are.

Splash Pages

With the exception of Donald Trump, nearly all of the candidates’ websites use a redirect to a splash page in an attempt to solicit campaign donations or get users to join their cause. All of these splash pages appear on a user’s first visit to the site and most contain a hard-to-find call to action to reach the actual website.

Besides Donald Trump, who does not have a splash page at all, Hillary Clinton has the least obtrusive splash page -- mainly because it isn’t truly a splash page. Most times her site displays a small, easily dismissible pop-up, over a full-screen, transparent background. On rare occasions, after clearing cookies for the site in order to view it as a first time user, an actual splash page appears, asking for donations.

Ted Cruz and Bernie Sanders sometimes display a splash page to promote an upcoming state’s primary or to gather support and collect donations after a win.

Marco Rubio appears to have a persistent splash page for first time visitors, which is always displaying a donation module.

Splash Page Comparison 

Read More

With each leap year comes a new race to the White House. Candidates are constantly being compared with regard to their positions on health care, international policy, civil rights, and the economy. However, one important issue has fallen off the radar this election: the strength of design of the leading candidates' websites. In this article, I'll compare and assess the designs of the five leading candidates' official campaign website homepages.

Read More

Designer’s Toolkit: Motion Design Storytelling

Many think motion design is just about creating delight, but it's so much more than that. User experience is an ongoing story, and motion design helps create the flow of that story. Motion design is an essential tool in the designer's toolkit that extends the visual language and evokes the emotion of the brand. 

When selling an idea to your client, static screens don’t always communicate your vision clearly, but incorporating well-designed motion helps show the bigger picture and the experience users are having.

Read More

Motion design helps your users’ brains orient themselves within any given screen and guides them to the actions they need to make.

Read More

The color of empathy is not flat: Insights to Color Blindness & Design.  

Line, motion, space, texture, size , form, shape, typography, and color.

As a member of the 9 structural units, or elements of visual interaction design, the role of color is integral to the way we communicate, parse, and enhance information on and off the screen. In an attempt to simplify human interaction with the digital interface, designers have pursued the style of a “flat UI”. This bare-bones approach relying mostly on rectangular shapes and solid, flat color is meant to place a user’s focus on content. The visual shift from skeuomorphism to flatland also helped to foreshadow a product’s ease-of-use by dramatically simplifying how the interface looked. 

Read More

Designing for color blindness (aka Daltonism) is an example of how designers can practice visual empathy and learn to experience the world from someone else’s perspective.

Read More

How to Design & Lead a Brand Experience Workshop in 6 Steps

Most stakeholders aren’t versed in the language of branding. That’s dangerous because word of mouth and first-hand experience have more of an effect on user love than celebrity endorsements or well-toned advertisements. Branding is more important than ever. How do you get stakeholders into productive conversations about it?

Problem: Finding the brand through trial and error

You could take the trial-and-error tack: just make stuff to see how they react, and go through round after round of presentation and feedback, each time learning a little bit more about what the brand is supposed to be. But this is expensive, tedious, and demoralizing. It’s like hacking away at a beehive to make a sculpture. You end up with a lot of stings.

Solution: Get those brand attributes out and vetted with a Brand Experience Workshop

Cooper has faced this challenge with its clients head on for 5 years with a workshop to solve this problem. It’s fun and works like a charm. Here’s an introduction to how it works, followed by some tips and tricks to making them awesome.

A Brand Experience Workshop in 6 Steps

The workshop should feel pretty magical to the participants, and of course that takes some work on your part, but it’s worth it. Find below the key six steps.

Read More

Six (6!) new ways to push your practice

You asked. We answered. Bringing you SIX new workshops and courses in customer experience, brand strategy, leadership, product definition and design, research, ideation, personas and more—each chock full of skills for taking your professional game to the next level (and maybe even the level above that). Stay current, get smarter, make an impact, effect the bottom line, and teach your team a thing or two (or ten) about your new-found knowledge. We've saved you a seat.

Read More

Visual Design for White Labelled Products

Designing a product with the intention of being “white labelled” means that you are creating a software for a client to incorporate into their existing (visual language) system. Every now and then design consultants are hired by another consultant to work on a third party’s existing system. This what you call a super white label. Here, you not only have to consider your client’s needs, but your client’s client’s needs, too. It can be easy to start designing with everyone’s goals in mind and eventually lose focus, leaving no one satisfied in the end. These are some basic tips I’ve found that to help start and manage a white labelled project. 


It can be easy to start designing with everyone’s goals in mind and eventually lose focus, leaving no one satisfied in the end.

Read More

Teaching by Design

Last year at Cooper U, we took the plunge and completely redesigned our Visual Interface Design course to better serve the design community. By applying the same user-centered design approach that Cooper U is built upon, the redesign became an interesting case study for how teaching and practice influence each other.

The impetus for the redesign came from student feedback and a sense that the course didn’t fully convey critical parts of Cooper’s visual design process. Though the former course was successful in many ways, it tried to do too much and appeal to too many to fully reach its potential. This resulted in an overwhelming, lecture-heavy classroom experience that felt out of place compared to our other workshop/activity driven courses. And while students left with a lot of great information, they didn’t have a clear direction on how to apply what they learned back at their workplace.

Read More

Why Design Documentation Matters

At Cooper we design products that empower and delight the people who use them. Design documentation is integral to our process because it communicates the design itself, the rationale for decisions we made, and the tools for clients to carry on once the project wraps up.

Good design documentation doesn’t just specify all the pixel dimensions and text styles and interaction details (which it must). It can also tell the high-level story, stitch together the big picture, and get internal stakeholders excited about the vision. One of our primary goals as outside consultants is to build consensus and momentum around the design—documentation can speak to executives as well as developers. After all, we’re usually leaving a lot of the hard work of design implementation on the client’s doorstep, and building great software starts with getting all the stakeholders on board.

Design documentation should create trust and provide consistency for future iterations of the design thinking. We believe it’s important to give the rationale and context behind design decisions. Answering the “why?” of design helps new team members get on board down the road, prevents wasted effort later when old questions get rehashed, and provides the starting point for prioritization and roadmap discussions. This facet of the process is too often overlooked or omitted for expediency, but trust us: clients will thank you later.

The best design documentation gives the client a unified design language, a framework for talking about the design, and a platform for improving the design over time. Static documentation is quickly becoming a thing of the past—we’re always looking for new documentation techniques and delivery mechanisms because we want to equip our clients with the most approachable and actionable information possible. Delivering design documentation marks the beginning of the client’s journey, not the end.

At Cooper we design products that empower and delight the people who use them. Design documentation is integral to our process because it communicates the design itself, the rationale for decisions we made, and the tools for clients to carry on once the project wraps up.Good design documentation doesn’t just specify all the pixel dimensions and text styles and interaction [...]

Read More

1 2 3 4 5 6