Interaction design and web animations

Animation timing and interaction design

Animation timing and interaction design

Have you ever thought about what makes a particular app great? You know, something about the design just feels right?

All of the design decisions- from fonts to colors to graphics to motion effects- on an app or website work together to create a consistent feeling in users. Sometimes the combined effect is positive and we love to shop, visit, play at a particular site and other times it just feels wrong and we are not likely to purchase or visit that site again.

According to this article, Guidelines for Animation Timing, a lot of our perception of great design comes from what happens in the in between states, which is called interaction design. Think of hovering, clicking, motion animations- those sorts of things. Some examples of interaction design is how the page turns when we are reading a Kindle book or how an app reacts when we click on an internal link. Continue…

Data is necessary for design decisions

Netflix redesign relies on dataAs graphic designers, we often feel like we know instinctually how to best design a website, logo, or brochure. It is true that the more practice you have in any art, the more you develop keen instincts on how to create better artwork, but it is probably a little dangerous to rely solely on instinct when designing successful client projects.

Have you noticed how often Google services change the layout of their products? Sometimes the constant changes are enough to drive you crazy, but sometimes you go to the page and think “wow, they must have heard my thoughts, this site is so much easier to use now!” Continue…

ClemsonGC attends Front End Design Conference

With two seniors from the Clemson Graphic Communications  program, I attended Front End Design Conference & Workshop in St. Petersburg, Florida this week #frontendconf. Not only was it one of the most well developed (pun intended) conference I have ever attended, it also had the perfect mix of inspiration and information. My brain is saturated, but I now know where to head to sort out all the amazing ins and outs of Front End Design.

So what is “Front End Design?” Every job has to have a name describing it, right? In this case, front end becomes the go-to term for website design and development and includes a wide range of related specialties and careers. But before I get in to any of the technical info we absorbed, I want to share what I think emerged as the underlying theme throughout the conference- community.


Automatic Table of Contents Built with Javascript

Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. This is true for several reasons:

  • It’s easier – write the JavaScript once and it can create the Table on Contents on every page you need it.
  • It’s more reliable – the JavaScript isn’t subject to authoring errors.
  • It’s still accessible – A table of contents is good for the general concept of accessibility, but it is a bonus (not having it doesn’t ruin the page) and nearly all screen readers run JavaScript.

This kind of thing has been done many times and many ways. But this time is ours! Plus it makes for a good tutorial.

A live example of this can be found on CodePen’s PRO feature pages like this one for Professor Mode.


Prototyping Responsive Typography

As a designer, I want everyone who sees my work to see it exactly as I intended it to display. If the font changes size or family, the colors don’t display right, the images are squished, my intention as a designer has not been conveyed well to the viewer. In other words, you are not seeing my design. How do we make sure that the type we create for websites looks like we intend it to?

The history of typography dates back about 5,000 years. It starts from a series of pictograms, which then evolved to hieroglyphs in Egypt and later around 1,200 BC to Phoenician alphabets. Almost 2,500 years later the Chinese invented first movable type which later revolutionized everything in the west when Gutenberg invented latin movable type. Many of the basic concepts of typesetting are still the same as 500 years ago.

Web typography, and digital typography in general, is a huge step forward in this history. It has made setting type fast and easy compared with hand-setting metal type. Responsiveness, when added on top of this, makes this period of change we are living very fascinating. Not only is centuries old design theory being rewritten, but the process of how design happens is now changing too (as Mark Boulton states it). Continue…