As we refine our methods of responsive web design, we’ve increasingly focused on measure (another word for “line length”) and its relationship to how people read.
The popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and reduce font size for small screens.” While a good measure does improve the reading experience, it’s only one rule for good typography. Another rule is to maintain a comfortable font size.
Take any new interface design or display technology, and chances are that someone somewhere has already compared it to Minority Report. The 2002 dystopian film, with its see-through screens and gesture-driven interfaces, is remembered more for its futuristic tech than for the insidiousness of the technology — pre-crime prediction — that was its actual focus. It continues to be the standard by which we judge new interfaces.
But inspiration doesn’t only come in the form of flashy, futuristic interfaces. At Typeform, we were inspired to simplify online forms by a movie that’s decidedly a blast from the past: the 1983 film WarGames, which centers around a student who remotely logs into a research computer and, through its terminal interface, nearly sparks a nuclear war. Its computers are hardly state of the art, yet the computers’ question-driven interface inspired us to reinvent forms. Instead of a list of questions, how much better would it be if forms presented one easy-to-answer question at a time?
These days you have an awful lot of options for hosting your website, so many that it’s easy to get lost. How much should you pay? Is support important to you, or are you a tinkerer who likes to do your own thing?
Put in different terms, are you a master chef who can cook a delicious meal with the right assortment of ingredients, or would you rather go to a nice restaurant and just sit back and enjoy the experience?
People use their mobile devices everywhere: on the train, while waiting in line, sitting on the couch. As much as we aim to design our mobile apps and websites for contextual use, testing their usability in context can be challenging.
While getting out in the field for user testing is not always realistic, simulating much of that contextual experience in a lab is possible. One approach to mobile testing is participatory design.
Many people know that Fireworks is a great tool for web design, prototyping and UI design. But what about icon design? Icon design is a very specific skill that overlaps illustration, screen design and, of course, visual design. An icon designer needs to understand lighting, proportions and, most importantly, the context of the icon itself.
The BBC published an interesting article about icon design and skeuomorphism one year ago, titled "What Is Skeuomorphism?" It’s definitely worth reading because it explains why icons often reflect the real world and the thinking behind it.
Similarity and contrast, connection and separation, grouped and ungrouped are all ways to describe the varying sameness and difference between elements. Based on the information they carry, we’ll want some elements to look similar, to indicate that they are related in some way. We’ll also want to show that some elements are different and belong to different groups.
Key to showing both is the visual characteristics of elements and their relationships. If two elements are related in some way, then they should show similar visual characteristics. If the elements are different, then they should look different.
As mobile designers, we have a stark decision to make: do we spend time learning new tools and changing our design processes to create our own transitional interfaces, or are the tools that we've been using good enough? There's an old writing adage that advises writers, whenever possible, to “show, don't tell” when bringing characters to life. The goal is to reveal the story through the character’s experiences instead of the author’s.
When designing mobile products, we share a similar burden. Dammed up inside our heads are creative waterfalls of fresh interactions, transitions, and animations. But how are we supposed to communicate them to our teams, our developers? How do we get them out of our heads? Through a game of charades?