There are several studies on the benefits of language learning on the brain, from fighting aging, to boosting cognitive functions. The fact is, it remains really hard, especially with a full time job, and limited opportunities to travel.

To motivate myself to study I decided to sign up for the HSK exam about a year ago, and that’s how I started reviewing decks of flashcards. Answering to flashcard prompts correctly brought me great satisfaction, but I started asking myself… is there a way to make the process more fun?

Overview

Back in the Middle Ages, must have been a spectacle to lay eye on an Illuminated Manuscript.

The fine illustrations, the rich decorative elements, and the beautiful capital letters, bring typography and art together.

After visiting the Getty’s Manuscripts I started asking myself - what would a script look like on a web page?
Given the incredible amount of minute details, how much could it be appreciated on different form factors?

Like when engaging in conversation, if our interlocutor speaks with a monotone and flat voice it becomes harder to pay attention to what they’ve to say and enjoy the exchange. Similarly, a static interface, without any dynamism, is bound to lose some of its users, or at the very list fell dull and unattractive.

Micro-Animations, or Micro-Interactions, can be the inflexion in the voice, the hand gesture, facial expressions, that help the good orator to tell a story.
Through micro-animations the interface can feel more “human”, convey some of those emotions, as well as feel more cohesive.

For my daily job at Trulia I had to recently build an affordability calculator to help home buyers find out how much they can afford.

To make the calculator more lively and fun to use, I had the opportunity to add some animations using the GreenSock Animation Platform. Working with the design team is among the most rewarding parts of my job, and I wrote a blog for the company’s tech blog to document the collaboration and the technology behind the calculator:

Bringing Trulia’s Affordability Calculator to Life with Animations

Hope you enjoy the read!

Overview

Pull to Refresh is a widely adopted mobile pattern, used to refresh a list fetching the latest entries.
It was originally introduced by Twitter, (for which they hold the patent) and is widely used in applications with a feed or timeline where the data is refreshed often.
In this post I’ll compare some libraries to implement Pull to Refresh in your Universal Windows Platform application.

A case for Pull to Refresh

Despite the wide spread of the pattern, a case could be made is at times not the best user experience:

Avoid When

• Is not immediately discoverable
• The user is responsible for
• Being a mobile first pattern the UX will be different for different platform
• If the content refresh rate is not frequent enough

On the other hand, there are cases where pull to Refresh is a great choice:

Great When

• Content updates frequently
• Content follows a chronological sorting
• Is a familiar gesture on mobile
• Provides the opportunity to leverage the area above the list for branding and custom animations

Pull to Refresh offers the ability to embed your personality and create fun animations, beyond the simple spinner, offering a moment of delight to the users.

Overview

In this post I want to explore the interoperability between UWP XAML apps and Unity. Specifically, I wanted to embed my Unity view inside a UWP app, and be able to call methods from UWP to interact with the Unity view.

After some research, I found the Atmosphere weather app example, demonstrating interoperability between UWP and Unity. Is a fantastic resource and I recommend checking it out. We’ll go over step by step and create something similar, building a small low poly town.

A Familiar UX

When thinking about user navigation we often look at the top of the page, scouting for navigation links, a menu, or a search bar somewhere in the top header.

Try playing a round of Design the Web, where you’ve to guess the site from its mocks, to see how many desktop applications display a prominent header at the top.

Familiarity can be good and in this post I will go over implementing a shrinking sticky header. After scrolling our page the header will shrink and remain visible, anchored at the top.

An animated galaxy

In this article we’re going to create a small galaxy using some of the available animation systems available with the Windows.UI.Composition. Here’s a quick look of what the completed project is going to look like.

By default some UWP components have subtle animations, ListView and GridView for example will animate the entrance and removal of items.
Additionally, you can define storyboard animations directly in your XAML code and trigger them with VisualStateManager’s states.

In some other cases, you might want to animate visual elements directly, accessing individual properties, or maybe orchestrating multiple animations together.
For those scenarios Composition animations come in handy as they allow for direct access to Visual Layer, granting greater flexibility.
Composition animations come in two flavors: Keyframe animations and Expression animations. For our galaxy demo we’re going to employ both. So let’s dive into the code.