Posts about Visual design


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

Design > Critique > Repeat

There’s a lot of writing out there on how to run a productive critique.

One of my favorites is by Jake Knapp of Google Ventures where he lays out nine rules to follow. For example, one great rule is to write it before you say it - this requires 5-10 minutes of silent time to look at the work and write down your initial reactions. It allows you to respond to the work individually – eliminating groupthink. Scott Berkun also wrote a great guide on setting up a critique and goes into the details of specific questions to ask and what materials you’ll need.

So you’ve followed the best practices and just had a super productive critique.

 

Now what?

Read More

There’s a lot of writing out there on how to run a productive critique.One of my favorites is by Jake Knapp of Google Ventures where he lays out nine rules to follow. For example, one great rule is to write it before you say it - this requires 5-10 minutes of silent time to look at the work and write [...]

Read More

Your Flat Design is Convenient for Exactly One of Us

Illustration built on creative commons 2.0 Portrait of a Man by Flickr user and photographer Yuri Samoilov

I’m OK with fashion in interaction design. Honestly I am. It means that the field has grappled with and conquered most of the basics about how to survive, and now has the luxury of fretting over what scarf to wear this season. And I even think the flat design fashion of the day is kind of lovely to look at, a gorgeous thing for its designers’ portfolios.

 

But like corsets or foot binding, extreme fashions come at a cost that eventually loses out to practicality. Let me talk about this practicality for a moment.

In The Design of Everyday Things, Donald Norman distinguished between two ways that we know how to use a thing: information in the world, and information in your head.

 

 

Information in the world is stuff a user can look at to figure out. A map posted near the subway exit is information in the world. Reference it when you need it, ignore it when you don’t.

 

 

Information in the head is the set of declarative and procedural rules that users memorize about how to use a thing. That you need to keep your subway pass to exit out of the subway is information in your head. Woe be to the rider to throws their ticket away thinking they no longer need it.

For flat design purists, skeuomorphism is something akin to heresy, but it’s valuable because it belongs to this former category of affordance: it is information in the world. For certain, the faux-leather and brushed-aluminum interfaces that Apple had been pumping out were just taking things way too far in that direction, to a pointless mimicry of the real world. But a button that looks like a thing you can press with your finger is useful information for the user. It’s an affordance based on countless experiences of living in a world that contains physical buttons.

Pure, flat design doesn’t just get rid of dead weight. It shifts a burden. What once was information in the world, information borne by the interface, is now information in users’ heads, information borne by them. That in-head information is faster to access, but it does require that our users become responsible for learning it, remembering it, and keeping it up to date. Is the scroll direction up or down this release? Does swipe work here? Well I guess you can damned well try it and see. As an industry now draped in flat design, we’ve tidied up our workspace by cluttering our user’s brains with memorized instruction booklets for using our visually sparse, lovely designs.

So though the runways of interaction design are just gorgeous right now, I suspect there will be a user-sized sigh of relief when things begin to slip a bit back the other way (without the faux leather, Apple). Something to think about as we gear up our design thinking for the new year.

Illustration built on creative commons 2.0 Portrait of a Man by Flickr user and photographer Yuri SamoilovI’m OK with fashion in interaction design. Honestly I am. It means that the field has grappled with and conquered most of the basics about how to survive, and now has the luxury of fretting over what scarf to wear this season. And I [...]

Read More

1 2 3 4 5 6