#(Which honestly is a really big point t of the heros journey that's often missed)

[backpackingspace]

Jorge writing a whole musical about when does a man become a monster only for Penelope to go it doesn't matter because that man is ALWAYS my husband

[njawaidofficial]

If You’re Not Watching “The Magicians” At This Point, You’re Missing Out On Something Great

https://styleveryday.com/2018/04/03/if-youre-not-watching-the-magicians-at-this-point-youre-missing-out-on-something-great/

If You’re Not Watching “The Magicians” At This Point, You’re Missing Out On Something Great

Hale Appleman as Eliot, embracing Summer Bishil as Margo in The Magicians.

Syfy

When it comes to the shows that hog all the attention in our era of peak TV, The Magicians is nowhere near the top of the list. Mainstream conversations about fantasy TV are often limited to the wild success of Game of Thrones, and The Magicians is nestled into an underrated corner of TV on the Syfy network. It’s easy for any series to get a little buried when there are 500+ shows and the Stark family around. But if we’re judging on ambition and inventiveness, The Magicians is one of the most notable shows on television — and its third season, which wraps up this week, proved that point over and over again. It’s a show that plays with story convention so consistently it blows up any boundaries that might hold it back.

Technically, The Magicians is built on the familiar. Based on Lev Grossman’s book series of the same name, the show began in 2015 as a sort of advanced-age Harry Potter meets Chronicles of Narnia. Unlike Hogwarts, the Magicians’ magic school — Brakebills — serves grad school students instead of children. When the characters discover and eventually become kings and queens of Fillory, their own version of Narnia, the escapist world operates as a Technicolor meditation on what it means to embrace adult responsibility. The series is also a direct descendant of Buffy the Vampire Slayer: It follows a group of ragtag young people as they repeatedly try to save the world. The characters fight through depression, sexual assault, addiction, and the general sense that things may never get easier. That’s all classic, well-trod territory. Which makes it all the more impressive that The Magicians inspires the feeling that it’s doing it all for the first time.

Here are just a few of the elements that make it stand out.

It’s one of the best ensemble shows about a group of twentysomethings.

From left: Stella Maeve as Julia, Olivia Taylor Dudley as Alice, Appleman as Eliot, Bishil as Margo, Jason Ralph as Quentin, and Arjun Gupta as Penny in a promotional shot for The Magicians.

Syfy

The Magicians has always had a stellar cast of characters on its side — a group of friends brought together via Brakebills and overlapping heroes’ journeys. They’ve fought moth-faced villains and conquered gods, each character an integral part of a larger and pretty magnificent whole. Eliot (Hale Appleman) has a palpable regality in both his look and his soul; Margo (Summer Bishil) has blossomed as a brazen queen; Quentin (Jason Ralph) is steadfast and earnest, buoyed by Ralph’s deep pleasantness, an energy that’s completely transformed the character from what he was in the books. And that’s only the tip of the iceberg — Julia (Stella Maeve), Penny (Arjun Gupta), Alice (Olivia Taylor Dudley), Kady (Jade Tailor), and Josh (Trevor Einhorn) are all worthy of their own odes. In a strange way, through them, The Magicians sits right alongside Insecure, New Girl, and Girls — it’s a sexy ensemble show about a twentysomething friend group. They muse on responsibility and the big life decisions you’re forced to make as you become a true grownup. They just do so while having hoversex, battling literal manifestations of their depression, and trying to run a kingdom or two.

And it has the kind of diversity that so many of the shows it riffs on lacked.

Candis Cayne as the Fairy Queen and Bishil as Margo in The Magicians.

Syfy

Beloved as Buffy may have been, it was also notoriously white. The Magicians, on the other hand, very much lives in a socially conscious 2018. A significant portion of its main cast is made up of people of color. Not only that, but every single one of them — from Maeve’s Julia, to Gupta’s Penny, to Bishil’s Margo — is the kind of complex, specific character you won’t find anywhere else on television.

Bishil as Margo in The Magicians.

Syfy

A sizable portion of the characters also appears to be sexually fluid. Quentin, who on most shows would be the straightest white man on the planet, has a threesome with a man and a woman. He hooks up again with that same man in a later episode. There are no coming-out storylines, no hemming and hawing about labels — intimacies just happen to manifest in all types of ways on this show. On the one hand, there are always downsides to a lack of labels, including perpetuating the erasure of orientations like bisexuality. On the other, it’s kind of freeing to watch a show where it’s genuinely possible that anyone could sleep with anyone else and everyone treats that pretty casually. It goes well with part of what makes The Magicians so fun to watch: It actually does feel like anything could happen. The story options are wide open when everyone’s at least a little bit queer.

The Magicians’ third season has also heavily featured Candis Cayne, a trans actor who previously broke ground with her role on Dirty Sexy Money — the first time a trans actor had a recurring role playing a trans character on primetime television. Here, she plays the Fairy Queen, an intimidating force and a standout of the season. Another standout: Marlee Matlin’s Harriet — a deaf actor playing a deaf character who gets a beautiful moment in the spotlight with Season 3’s “Six Short Stories About Magic.”

What’s more, most of the show’s inclusivity goes unremarked upon on the show itself. Race, gender, and disability aren’t invisible to any of the core characters, but neither are they the focus. Characters will call out white supremacy and sexism without the show bragging about having a queen (and king!) of a magical realm be played by an actor of Mexican, Indian, and European heritage. Or a black man as the king of their neighboring kingdom. Or a mixed Native American woman on the path to becoming a goddess. And so on. Which is not to say The Magicians shouldn’t brag — if they want to spend all of Season 4 bragging about their magnificent ensemble, that would work too.

The show has a true sense of playfulness.

Appleman as Eliot and Bishil as Margo singing “One Day More” in The Magicians.

Syfy

When Buffy aired its iconic musical episode in 2001, it had a ripple effect. Scrubs, Grey’s Anatomy, Psych, That ’70s Show, and even 7th Heaven all turned themselves into musicals for an episode. The Magicians, for its part, has been following in those same footsteps since its first season. Only instead of just one designated episode, they’ve peppered musical numbers into every season so far. In Season 1, Quentin sang Taylor Swift’s “Shake It Off” while trying to break out of a spell that had him trapped in a psychiatric hospital. “One Day More” from Les Misérables made a magnificent appearance in Season 2, as Eliot prepared for a duel to save his kingdom. (That one resembled what Game of Thrones might look like if Game of Thrones liked to party.) And this season, The Magicians did finally designate a full episode to several numbers. It culminated in the show’s main ensemble joining together in a rousing rendition of “Under Pressure.”

Integrated throughout the show, these moments stand as a declaration: This is just what The Magicians is, at its core. These scenes aren’t just an aside, a whim to break through the mundanity for a single episode — though The Magicians is also very good at that. With this show, narrative is twisted like a rubber band and then flung across the room. This is a series where talking sloths serve as top political advisers, party gods get banned from Instagram for posting too many shots of nipples, and messenger rabbits say things like “eat my ass.” It’s a blast.

And the fun they have with the story will also punch you in the heart (in a good way).

Sebastian Billingsley-Rodriguez as Rupert, Kylee Bush as Arielle, Ralph as Quentin, and Appleman as Eliot in the episode “A Life in the Day.”

Syfy

Wrapped up in all of its magical elements, The Magicians also happens to be wildly convoluted. Here, though, it’s at least in a way the show seems to truly delight in. As things grew more complex in Season 3, every week felt like the writers were taking the series’ classic fantasy tropes and conducting science experiments on them. Sometimes the effect is that aforementioned playfulness. But their characters are still on a variety of heroes’ journeys — which means this show is also willing to rip your heart out and tap dance all over it. Honestly? It feels great.

Eliot comforting Quentin and Rupert in “A Life in the Day.”

Syfy / Via whitefluffyyeti.tumblr.com

If there was one shining highlight of the season — and the show overall — it was the Feb. 7 episode, “A Life in the Day.” In it, Quentin and Eliot are tasked with completing a mosaic puzzle as part of a season-long quest to bring magic back to their world. To do so, they have to travel to a past version of Fillory. But unable to leave until they complete their mission, they wind up staying in the immediate vicinity of that puzzle for…well, the entire rest of their lives. The show plays this out in an extended montage. The two grow restless. They fight, they bond. They hook up. Quentin meets a local girl, settles down, has a son. When she’s gone, Quentin and Eliot spend the rest of their lives raising the kid and growing old together. Like the opening montage of Up, it’s the kind of sequence that really hits you with everything that it means to be human. It stays with you.

By the end of the episode, Quentin and Eliot had completed the puzzle and found their way back to their youths and their usual timeline. But the show made sure the impact of their time together was felt. These two characters had lived out an entire life as loving partners, side by side. It was an emotional beat that packed a hell of a wallop, and payoff has been sprinkled through the episodes that have followed. Sometimes it’s in small asides between the two characters; sometimes it’s just in knowing the way they look at each other. It’s hardly the first time characters in a genre show have lived out their entire lives in a separate timeline. But “A Life in the Day” was indicative of what The Magicians does best: It uses its magical setting and all-star cast to mold itself into different forms. Sometimes, like in that episode, it knocks you off your feet in the process.

In another episode, called “Six Short Stories About Magic,” the narrative is split into six vignettes sorted by character. The final one is centered on Harriet, a freedom of information activist and magician who runs a BuzzFeed spoof called FuzzBeat (hi, guys!). As Harriet is deaf, 10 minutes of the episode take place in silence. The segment includes some long-awaited exposition into Harriet’s backstory, which we get through her perspective before the series explodes back into sound in its final moments. The effect is stirring.

Gupta as an ailing Penny in The Magicians.

Syfy

In “Be the Penny,” we get another play on perspective as Penny finds himself separated from his body with his friends believing him dead. We spend the episode with his astral self, watching people react to his death as he tries desperately to contact them. In both of these, the show plays with form to reveal depth. Penny doesn’t get a normal death, so it follows that the episode focusing on that would be just as off-kilter as the story itself — and just as sad. Penny watches his friends grieve, though not always to his satisfaction, and he can’t reach them to tell them that he’s still there.

This kind of experimentation is not new to fantasy. Supernatural, in its seemingly 500th year on television, has employed practically every genre and meta twist there is. Most recently, the characters crossed over with Scooby Doo and literally became animated. And Buffy was groundbreaking in this field before that, not only for the aforementioned musical episode but also for forays into silent filmmaking with “Hush” and character experiments like “Tabula Rasa.” One of the joys of sci-fi and fantasy is that it gives you a built-in excuse to fuck with convention. The Magicians has reveled in that from day one — and from the ground up. And with this third season, it took itself to a whole new and thrilling level.

Appleman and Ralph behind the scenes on the episode “A Life in the Day.”

Hale Appleman / Via instagram.com

[jamiekturner]

6 Animation Guidelines for UX Design

Useful is better than delightful.

If you’ve read my previous article you’ve probably already figured out that I’m quite fond of animation (aka motion design). Besides giving life to a static image, animation can help you tell a story much more effectively.

Just look at the millions of people glued to their screens watching animated series (myself included…wubba lubba dub dub!). However, that’s not all animation can do, that’s precisely why I decided to write this article.

Before I start, a little bit of context. In the beginning of 2015 I gave a presentation where I framed animation as an essential discipline to design a good user experience, I talked about the 12 basic principles of animation, underlining which ones make sense in UI animations and all that shebang.

The 12 basic principles of animation beautifully animated by Cento Lodigiani

More than two years later I’m more than aware that this is not exactly breaking news or is it going to shatter any ceilings. Companies like Apple & Google really made the effort to integrate animation in their products and by consequence facilitating and encouraging Developers & Designers across the world to do the same, and so they did.

This was definitely a step in the right direction but along the way I think we’ve accidentally stepped on something brown, and it stinks a little.  WAIT! Don’t pull out your pitchforks and torches just yet, let me first explain what I mean with a personal story.

Let’s go back in time to 2003. I was just getting started in graphic design and had little to no knowledge about it. I remember the first tool I learned how to use was Macromedia Freehand, and it was mind blowing. The possibilities were endless. Gradients, drop shadows, comic sans, you name it and I was using it all together. The result? Well, as you probably can imagine it looked like a mess. But don’t give the young me a hard time, I was an unsupervised kid in a candy store, so I ate all the candy that I wanted and ended up with a belly ache. Just like John Snow, I knew nothing.

Back to the present. You’re probably asking: What does this have to do with animation? I think, EVERYTHING. Developers and Designers are the young me in this story, and in many apps and websites they’re using animation recklessly, defeating the whole point of improving the user experience with animation.

Now, I could go through a series of examples and point out what they’re doing wrong but, honestly, that sounds kind of lazy. Instead I thought it could be more useful for you, reading this article, if I point out how (in my humble opinion, of course) animation can be integrated in a way that is not superfluous but rather an essential piece of a good user experience. So, after some time thinking and researching I came up with a list of 6 guidelines that I hope can be helpful for your animation endeavours.

Let’s start with the obvious one.

1. Animation shouldn’t be an afterthought

You have all your interactions defined and visual design locked down to the pixel but you feel like something is missing. Then you might think “time to flair it up with some animation”. Big mistake and one of the reasons why animation is being so misused. It’s been considered at the end of the design process with the same consideration you would put into a transition effect in PowerPoint, and that’s just wrong.

Think of the user experience as a cake. In most cases animation is being thought as the cherry on top of the cake but I completely disagree with that approach. I think animation should be just another ingredient that you need to mix into the cake batter.

Quick sketch I made for the animations in this article.

This to say that animation should already be in your head when you are sketching your wireframes. It can be as simple as an arrow indicating where a certain object is going to go after a button is pressed or a simple note. Keep it simple, this will help you find a purpose for the motion (or a motion for a certain purpose) without focusing too much how it looks. This also helps you not to become too attached, because animation won’t always be the solution to your problem. Just discard it if it’s not helping you accomplish something, unnecessary animation will just be an obstacle for the end user.

This takes us straight to the next guideline.

2. Animation must serve a purpose

Gratuitous animation will just take your user’s precious time and after the first initial delight the user will get tired of it, that’s why animation needs to be functional. If you’re wondering what animation can help you with, here are some examples.

Soften harsh cuts

No transition vs Horizontal slide transition

Designer or not, we’re all familiar with this. You are in screen A, you press a button and BAM! A completely different screen (B) suddenly appears. Then you’re left wondering, where did you come from? Did I press the right button? What now? What if “B” is visually similar to A? The user might even think that nothing happened. This shows one of the most suitable candidates for animation, moments of change. Consider the time that takes to make the «journey” from screen A to B, what objects are kept in the screen and show your users how they got there. Don’t overdo it though, as you’ll discover further down, animation is better served “invisible”.

Provide context

No transition vs Slide-in from the bottom

Sometimes you land on a screen and you’re not quite sure how to interact with it straight away. A good way to help the user is to provide a clue of the proprieties of a certain object when it is introduced. If you have a list of posts, for instance, sliding them could help the user understand that he can keep swiping to see more.

You can even add another layer to this by timing their appearance in a way they slide one after the other, this will reinforce that these items are separate and you can interact with each one individually.

Let’s say that you decide to tap one of them and it opens to display the entire content for a specific post. Now the information that was previously at the same level of others is now the principal. To animate this transition is a good way to reinforce the user’s selection and also to show that you’re still interacting with the same object but in a focused state, which also gives you more screen real-estate.

Provide Orientation

When all the obstacles between the UI and the user are removed from the equation the UI becomes more physical, therefore it’s important to give the user a sense of spatial orientation. You can accomplish this by being consistent with your animations and keep your app structure simple to digest.

Consider an object that moves out of the screen to the left, if it reappears, logically, it should come from where it exited. This will help your users understand the app physiognomy and by consequence make them feel more comfortable when interacting with it. If you do it otherwise it will just create confusion and your users might even think that they’re looking at a different object.

Content entering from the bottom vs Content entering from the right (where the arrow is pointing)

The same applies to the visual hints present in the screen. Imagine that you pressed a list item with an arrow pointing to the right, the logical transition should be a slide from right to left, as if the user view port was moving right, reinforcing the visual clue in the UI. Many times you’ll see the UI elements contradicting the transition. Personally I find this very annoying and I think it’s something we should avoid, otherwise the animation will look intrusive to the users since it defies what they expected to happen.

Provide instant feedback

Have you ever asked yourself, did I press that button? Did it do anything? Should I press it again? The answer probably is yes and you probably pressed it again just to realise that you actually pressed it in the first place. That’s why providing instant feedback is important, even if the app doesn’t respond instantaneously.

In a world where your finger often covers the button you’re pressing, animation plays a huge roll in providing the user the reassurance they need.

Subtle color change vs Quick animation

In some cases, you can even take it one step further and jazz it up a bit. Let’s say you have a “star” button in your app which is one of your “hero” actions (never seen before, I know). This is exactly when you can be playful and delight your user. Make it feel rewarding and the user will want to repeat the action. Be mindful with time, the animation needs to feel instantaneous or it will become old and annoying soon. Also, don’t jazz it up too much.

Make the content feel alive

No transition vs Slide in from the top

If your app or website has live content, like pictures, comments or some sort of counter, animation can help you accomplish two things. Smooth the addition of new elements and cushion the possible delay of loading such elements.

Storytelling

In almost every application, there’s a place where we need to explain something that went wrong or introduce a new feature. Illustrations play a huge roll here, providing a more visual and immediate way to understand a problem and how to fix it. If an image is better than a thousand words, imagine an animation, that’s like 30 images every second.

Trying to put a smile in the user’s face, despite the negative message.

This type of screen is really the time and place where animation can shine, be memorable and bring a smile to the user’s face, especially if something went wrong. However, if your app is constantly showing an error screen, then you might want to ignore this point. The last thing you need is for your user to remember all the times that error came up.

Now that you have some clues on when and where animation can be used we must proceed to the how.

3. Animation must reflect the brand

Consider a simple motion of an object from left to right. There are virtually endless ways to make this motion just by tweaking it’s easing curve. With this you can add a personality to your animation. See the example below, all use the same animation and timing, the only difference is the easing curve.

A: Quick & snappy, B: Smooth & natural, C: Bouncy

The possibilities are endless but, before going crazy and make all your transitions bounce like gelatine, consider your brand, your user and the tone you want to transmit. If the animation doesn’t fit the tone your users might feel out of place and lose their trust in your brand. Imagine if your banking app had the same bouncy style of animation you find in a game. Would you trust it?

It’s important that your animation reflects the brand but something you must keep in mind when designing your animation is the next guideline.

4. Animation shouldn’t be the hero

Animation is here to save the day, not like a standalone hero but more like the Ninja Turtles, fighting as a team playing on each other’s strengths. If your animation takes the centre stage, you’re not designing an experience, you’re just forcing the user to watch a movie.

Flashy vs Consistent

Animation needs to be part of the whole experience, complementing the visual design and a supporting the interactions, to achieve this restraint is key. In most cases a good animation is the one that users don’t even notice.

If you’re designing, your job is not to entertain the user but rather help him accomplish something in the easiest, most intuitive and natural way possible, and the next guideline comes to help with that.

5. Animation must feel natural

Linear animation vs Ease-in & out

I know that the word “feel” might be ambiguous, but bear with me. Since the user interacts directly with the UI there’s a certain expectation that the UI follows, to a certain extent, rules of physics. A list that responds to the speed you’ve interacted with is a perfect example, but the same applies to other objects.

However, this doesn’t mean that all the apps should react the same way. In the real world if you kick a ball they don’t react the same way. A football will fly away but a bowling ball will probably just hurt your foot. As I mentioned in the previous guideline, it’s all about the tone and the weight you want your brand to transmit.

You have to define what’s your app’s “material” and weight, and make it behave accordingly, but remember to always adjust it if necessary so it doesn’t go against the next guideline.

6. Animation must not waste time

Both animations take 6 seconds.

Animation can be used to tweak the user’s perception of time, so use this in your favour. For the human brain, anything below 0.1 seconds will seem instantaneous and below 1 second will seem seamless. So, if you have a process that takes 6 seconds for instance, you can break it down in a few separate animations. This trick should make the process feel a lot faster and keep your user engaged.

You can also use animation to fake an instant action that will actually take bit longer in the background. This will make the app feel more responsive even though the process still takes longer than what the user sees.

You can’t mimic everything in the real world, you need to take into account the user’s expectations. If you press a button in the UI you expect an instant feedback, thus it’s not the best place to apply physics, so don’t ease-in an animation in cases like this.

Ok, if you made it this far I truly believe that, if you apply these guidelines, you’re in a good path to make the best of animation and improve not only how your UI looks and feels but also how your user experiences it. Now that you know the guidelines, you still need to go over a few more jumps.

The last hurdles

If you want your user engaged you need to provide a seamless experience and, if used right, animation can definitely help you to accomplish that. It’s not going to be an easy journey though, as with anything design related you need to be prepared for an iterative process.

You also need to know how to prototype and collect feedback, if your colleagues lack the vocabulary it’s going to be hard to communicate. They won’t be able to comment on your animation without using an onomatopoeia (e.g. “That button could go more like swoosh and then kablam, you know?”), for that reason I think it’s good to introduce people to the 12 basic principles of animation, so they get familiar with the terms allowing them to express themselves in a way that you can understand.

One last hurdle to go, the effort that your development team can/wants to put into animation. You really need to push through and show them that in a world where animation is becoming an intrinsic part of a good user experience the question is not if, but when are you going to have to catch up with the herd? The sooner you do it the better. Your user will appreciate it and you will reap the benefits.

There you have it, my 6 Animation Guidelines for UX Design. If this sparked your interest and you want to dive deeper in this subject I can recommend a few other articles and authors that inspired me to write this.

Transitional Interfaces by Pasquale D’Silva UI Animation and UX: A Not-So-Secret Friendship by Val Head Invisible animation by Steven Fabre Creating Usability with Motion: The UX in Motion Manifesto by Issara Willenskomer

I really hope that you find this article useful, I know that I’m not the first (or will be the last) to talk about animation in the UI, but I tried to take a slightly different approach, not focusing so much on how the animations looks like but rather how they can help the end user.

I invite you to participate in the discussion in the comments below, I’m always interested to know your thoughts and happy to answer any questions you might have in your mind.

Thanks for reading! :)

The post 6 Animation Guidelines for UX Design appeared first on Design your way.

from Web Development & Designing http://www.designyourway.net/blog/user-experience/animation-guidelines-ux-design/