Looking for the right type pattern

I’m on the hunt for the right type pattern. So I’m in the midst of designing a new concept that provides a great experience for users when questions are asked, to entice them to respond, and just to be THAT much different from the next new thing.

The question could look like “So how are you doing today?” Well actually, it’s far from that but I’ll use that as a proxy to test the different patterns that are out there.

Let’s start.

Typewriter

Source: Thiago Teles Pereira’s Pen Typewriter animation pure CSS.

The humble typewriter was what I originally had in mind. I like the classic simplicity of this effect and it’s global appeal.

Have to do something about those extra spaces

Computer type

Source: Stathis’s Pen Typing & erasing effects, plus a blinking cursor.

A variation of the typewriter but has very specific appeal to nerdy users. Still it’s good to have in the back pocket should I go for the user group.

Command line

Full screen transitions

Source: Anton Petrov’s Pen Basic 3D Fullscreen Transition.

Here’s something a little bit different — full screen transitions! This might be a little over the top for what I need (i.e. letter animation) particularly since I wanted to include images too. But saved nonetheless.

Let’s move all of it

Drop

Source: Rich’s Pen Letter Drop jQuery Plugin.

So I really like this one. The animation is silky smooth and on a more personal design level, I quite like the type, tracking and colour. Nice!

Pretty dope

Stars

Source: Matt Edwards’s Pen jQuery Star flashing effect.

This one is so flashy, I’m not sure how people will take to it — even if I expand the stars to take up the entire phrase (well, that might make it worse). But saving it here for reference anyway.

//Make it stretch and scatter

Letter by letter

Source: Andrew Burton’s Pen Letter by letter animation.

Another potential candidate for what I want. The transition is slow and random enough to keep people guessing. It kept me entertained when I first saw it.

Hypnotic

Jitter

Source: ZeroSpree’s Pen JS/CSS3 Jittery text effect.

Ignoring the type, this one is subtle. Whilst the design I have in mind isn’t all the flash, I’m not sure whether I wanted it to be this subtle. That said I could adjust the keyframes/scale for added oomph.

Jitterbug

Rotating Text

Source: Rachel Smith’s Pen Rotating text.

This one is a little miss fancy pants of the lot and could prove to be very useful for long questions. I like this one and will keep it as one of my design options.

Nice

And so these are my design options for now.

Before you say ‘forking hell, what is this post all about?’ — this is a personal post because as a product and design guy, I like considering options during early design and I was thinking of ways on how to save these options for later reference.

Sure I could’ve just hearted / forked it in CodePen without writing this post. But I can scroll to this post later on to see where I landed.

Thought about dropboxing, Gdriving, getpocketing or writing an old email to myself for these design options/inspiration but I just want to read it later on.

Yell out If I missed a great piece of animation!

I’m sure I have as there’s so much inspiration out there on CodePen. Speaking of which:

<! -- I must thank all the authors of the pens that I forked and the CodePen dudes - ->

/* You guys rock! */

//and have given me time back!


About this post

I’m iterating through a design in Sketch and have come to the point of testing it with users. But since I have time between now and testing the prototype, thought to take it one step further and consider design options out there for the questions.

I’m a hack at UI. My pipe dream is to have more time to play around with UI dev, but I’d rather have a product out there than spend playing (ouch, I really hate admitting that).

Show your support

Clapping shows how much you appreciated Perry Carbonell’s story.