Émile Cohl is the father of the animated cartoon. In 1907, Cohl was hired as a scenarist by Gaumont to generate one-page story ideas for movies.
Between February and May 1908, Cohl created <a href="http://en.wikipedia.org/wiki/Fantasmagorie_%281908_film%29">Fantasmagorie</a>, the first fully animated film. To create the animation, Cohl placed each drawing on an illuminated glass plate and traced the next drawing, reflecting the variations needed to show movement. The animation contained over 700 illustrations.

The Story of Fantasmagorie (1908)

Georges Méliès was the first cinemagician for his early use of special effects in cinema.
In 1902, he appeared in one of his own films, l'oeuf du sorcier (The Prolific Egg). The groundbreaking exploration of scale, multiplication, and transitions truly sealed his reputation as a "cinemagician".

Georges Méliès (The Prolific Egg)

McCay is considered the father of "true" animation.
His 1911 film, Winsor McCay, the Famous Cartoonist of the N.Y. Herald and His Moving Comics, or Little Nemo contains two minutes of pure animation using sequential hand illustration in a novel way.

Winsor McCay (Little Nemo)

British filmmaker J. Stuart Blackton is credited with creating the first animation in America. He was the first to use stop-motion as a storytelling technique.
In The Enchanted Drawing, Blackton sketches a face, cigars, and a bottle of wine, then "removes" these last drawings as real objects so that the face appears to react.

The Enchanted Drawing (1900)

The animal locomotion studies of Eadweard J. Muybridge are among the earliest visual experiments in creating an illusion of motion. The "persistence of vision" principle laid the foundation for later forms of videography.

Muybridge: Waltzing couple (1893)

A look back at the early-20th-century inventors of a new art form, from Émile Cohl to Eadweard J. Muybridge

history

History

movies

Movies & Shows

artsandculture

Society, Arts & Culture

Before Walt Disney: 5 Pioneers of Early Animation

It takes courage to grow up and become who you really are.

You can blame bad luck or enemies for your dissatisfaction, but the real reason is cultural gravity. Cultural gravity is the invisible force that sways you in the direction that society wants you to go. This default path is a socially approved narrative about how to live: Study hard, go to college, get a good job, save money, get married, have kids. Then, when you're old, relax and enjoy the utopia until you die. Yet, this path, with all its promises, crushes your sense of well-being and dampens the joy of existence.

Cultural gravity is to blame

You know life is short, that you should avoid trivial pursuits, that you want to be happy. You know that you should choose the alternative path, but choosing to follow that path starts a war with cultural gravity. <ul><li>Your parents may tell you to get a real job and give up trying to be an artist.</li><li>Companies tell you to try and get ahead in the grind.</li><li>Friends smirk when you tell them about your startup idea.</li></ul> The alternative path is never smooth. You will face difficult moments and doubt if you're doing the right thing.

Pursue an alternative path

When you start on an alternative path, you will take many psychological punches. Eventually, you may wonder if you made the wrong decision and give up. So you return to the default path but feel empty. You turn to stimulants, sugary foods, philosophy, therapy and meditation and work harder, but nothing soothes the dissatisfaction. If you're brave, you will accept that cultural gravity will always be there, so you start to take its powerful punches. But you're not phased. You know to keep going and become a person that you admire.

Staying on course

People blame bad luck and political enemies for their dissatisfaction, but cultural gravity is the real culprit.

personaldevelopment

Personal Development

mindfulness

Mindfulness

Defying Cultural Gravity - Calvin Rosser

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like: Dialogs, Forms, Toolbars, etc. The distinction between buttons and links matters:<ul><li>Links are used when you’re navigating to another place, such as: “view all” page, “Roger Wright“ profile, etc.</li><li>Buttons are used when you are performing an action, such as: “submit,” “merge,” “create new,” “upload,” etc.</li></ul>

Buttons vs Links

<ul><li>Normal — communicates that component is interactive and enabled.</li><li>Focus — communicates that the user has highlighted an element, using a keyboard or other input method.</li><li>Hover — communicates when a user has placed a cursor above an interactive element.</li><li>Active — or pressed state communicates that the user had tapped on the button.</li><li>Progress/Loading —used when action is not performed immediately and communicates that the component is in the progress of completing the action.</li><li>Disabled — communicates that component is currently noninteractive but can be enabled in the future.</li></ul>

The button state communicate its status to the user

Most common are rectangular buttons with rounded corners, that are easily identifiable and look good next to the input field. Choosing the right style for the button will depend on the purpose, platform, and guidelines. Here are some of the most popular style variations:

Buttons come in various colors, shapes, and sizes.

Styles are primarily used to differentiate more important actions from less important ones. Create a hierarchy of actions that will guide the user where there are multitudes of choices. Usually, you can have a single prominent button(that style is often called “primary“), and several medium “secondary” and low emphasis “tertiary“ actions.

Styles communicate the importance of an action

Generally, you want to make the most commonly selected button the “default” (use primary styles) and put it in a focused state. This helps the majority of users finish their tasks faster and points them in the right direction.The exception is when all choices are equal, or action is particularly dangerous, in those cases, you want users to explicitly select the button rather than accidentally.

Sometimes there is no “default”

Keep in mind how important it is to make the interface obvious for users, not creating puzzles or mazes. Based on years of using various devices and other products, we have formed a certain expectation of how buttons look and function. A big deviation from what is considered “standard” will create a delay and confusion for users.

Don’t Make Me Think

Consistency improves speed and accuracy, helps avoid errors. Create predictability that helps users feel in control and capable of achieving their goals in your product. When you creating primary, secondary and tertiary styles try to find some common elements like color, shape, etc. Try not only to be consistent inside your design system but be conscious about the platform you design for.

Consistency improves speed and accuracy

Pressing a button should be a simple task and if a user is unable to successfully tap on a button or in the process tap on a neighboring element by mistake, it will lead to a negative experience and loss of time.For most platforms, consider making touch targets at least 48 x 48 dp. A touch target of this size results in the physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen elements is at least 7–10mm.

Make buttons large enough for reliable interaction

Gestures let users interact with the application using touch. Using touch as another way of performing a task can save time and give tactile control. As some gestures like swipe to trigger contextual actions, double-tap to like or long-press, being used more widely every day, they still are not very apparent for the average user.

Gestures become fairly widely adopted

What your buttons say is as important as how they look. Using the wrong label can cause users confusion, loss of time, and possibly some big mistakes.A good button label invites users to take action. Best to use verbs, and label the button with what it actually does. It's like the button is asking the user — “Would you like to (Add to basket)?” or “Would you like to (Confirm order)?”. Avoid using Yes, No or labels that are too generic - like Submit.

Good button label invites users to take action

Both are just choices, and designers can argue for hours about their preferences.<ul><li>Having OK action first supports the natural reading order. It may help to save some time if we know that most likely this is what uses will select. Windows puts OK first</li><li>Listing OK last improves the flow. Some may argue Ok as the next button will move the user forward. Putting OK last, help users evaluate all options before taking action, and help to avoid mistakes and rush decisions. Apple puts OK last.</li></ul>

Ok/Cancel or Cancel/Ok? Either is fine

Disabled controls are used to indicate a component is currently noninteractive but can be enabled in the future. Disabled buttons are used because removing the button from its native location and revealing it in a later context could confuse users.

Disabled buttons suck

In order to design the right interactions, we need to look back at the history and origins of physical pushbuttons, a direct predecessor of the UI component so heavily used in all digital products…

product

Product & Design

The anatomy of a button — UI component series

In this cheat sheet we will cover: <ul><li>Types of patterns </li><li>Like </li><li>Save </li><li>Favorite </li><li>Rate </li><li>Views & listens </li><li>Closing thoughts </li><li>Further reading </li></ul>

UI cheat sheet: The 5 love languages of the web

Liking: Used for non-referenceable appreciation showing.Favourite: To earmark content, to show its importance, or to reference easier.Save: To bookmark content that isn’t yours to reference later.Rate: To give users the opportunity to say they dislike something as well as like it.Views: To track the number of people who have viewed something.

Types of patterns

As a pattern, liking is just an action a user takes on someone else’s content that doesn’t do anything apart from increase a tally. This means, there is also no way to reference the things you have liked. For example, you can’t go onto Instagram and easily see a list of all the content you have ever liked.

Like

The word ‘ like’is also a good example of ‘ real world’language being turned into a Ui. You wouldn’t say you ‘ heart’or ‘ Star’an Ice-Cream shop, you would say that you ‘ like’it. There has also been a shift away from the thumbs up icon and towards the heart icon. According to Wikipeida — it wasn’t Facebook who invented the like button (gasp!)

Standard liking

In the olden days, Facebook used to have the old school like button with the thumbs up. The idea that you could just ‘ like’something without any effort took off, and then came in the awkward social interactions. This is where ‘ reactions’come in. They provide the user with options other than ‘ like’to better express their emotions towards a subject. Reactions are ‘ like ’, ‘ love ’, ‘ Haha ’, ‘ Wow ’, ‘ sad ’,

Reacting

Clapping hands is a way to show that you really like something. If you see something with 100 claps, it could have come from just 100 people or two people. If you have a crush on medium, go give their stories 50 claps. They will think you are weird, but at least they will appreciate the effort.

Claps

Saving is generally understood as a way to avoid losing something. While it was traditionally thought of as a method to protect your work, the meaning has broadened to include saving something you have seen online. For the sake of this section, we will be ignoring ‘saving work,’ and ‘saving your place in a game’ and just focus on saving content online.

Save

Icon: Bookmark icon or the word ‘ save’. Some sites allow you to save content to a collection or a group. This makes Referencing a lot easier. Y'all, I remember when the Pinterest button used to say ‘ pin it’. But then (Cue dramatic thundercloud sounds) they changed it to just say ‘ save ’.

Save to a collection

Adding to a Wishlist or a Registry is used almost exclusively in Ecommerce. If something is added to a Wishlist, it gives you an opportunity to continue interactions with your users about the product that they have their eye on, until you push them over the edge. If you are a fan of ye old dark patterns, you can even tell the users when you are about to run out of that product. The heart icon is more Emotive and less ‘ committal’than the save icon ..

Add to wishlist or Add to registry

You probably first became acquainted with Bookmarking in your Browser’s Bookmark bar. While it doesn’t work differently to saving, Bookmarking is usually used for something you have to complete like a movie or an article. Youtube also lets you add a Video to a ‘ watch later’list, but it is more like the ‘ save to collection’pattern.

Bookmark

On Spotify you ‘like’ a song. You then go navigate to ‘Liked Songs’ and replay it 23 times.

Rulebreaker example 1: Spotify & Youtube

Facebook used to use the classic like button and are fairly synonymous with it, although now they use reactions. However, you can still just hit the ‘like’ button as opposed to choosing a reaction. Instagram uses a heart-shaped icon. Twitter used to have a favourite (star) icon but moved over to using a heart button to align with everyone else. (<a href="https://en.wikipedia.org/wiki/Like_button#:~:text=Facebook,-Main%20article%3A%20Facebook&text=The%20Facebook%20like%20button%20is,introduced%20on%209%20February%202009.">source</a>) Vimeo are the original like button creators. TikTok apparently also uses the like button. But being on the wrong side of 25 I can’t confirm this. Dribbble also uses a like button.

The Way The Like Button is Used

Like ‘saving’, ‘favoriting’ is referenceable. But unlike saving, it is usually used on your own content. Favoriting is usually used to help the user organize their own ‘things’ like emails and files.

Favorite

The Star icon is usually used to indicate importance in your own content, as opposed to content owned by others. Email services like Gmail use the Star icon to group important Emails.Google photos uses the Star icon to group your favorites.

Standard

The product I work on is a) science-based and, b) collaborator sourced. So while we initially wanted to put star ‘ratings’ on our content, it wasn’t a good move for our collaborators. We didn’t want their content getting ⅕ starts (even if it deserved it). So, the next option was ‘liking’ which felt a bit too unprofessional for the brand. Leaving our last option which was favoriting. It works for the product, even though users were favoriting content that wasn’t their own.

Rule Breaker

Ratings are kinda like the people of the world trying to help other people of the world out. Movie is 3 stars? Wait till it comes out on Netflix. Restaurant is 4.5 stars and only has one $? Count me in. Not sure what to read on your holiday with your in-laws to make yourself seem clever? Rank those business books according to popularity.

Rating

Generally speaking, when you rate something it will usually be out of 5. Why 5? I’m not sure, but here are a few of my best guesses: <ul><li>It is easier to Substatize 5 stars than it is to count to 10.</li><li>5 stars are easier to work with than 10. </li><li>5 is an odd number, which means that a neutral score is possible. E.g. If you say something is 3 stars, you neither love it nor hate it. </li></ul>

Standard five-star rating

When rating something, it is seldom that you will do it without attaching a written review alongside it. More and more sites are also using multiple ratings to get an overall score. A rental property could be perfect except the host wasn’t very good at replying to messages, which should affect the whole score. As a general rule, the less specific the products are (for example on Amazon) the less detailed you can be with your rating and review form. Sometimes, you see Brand-Specific ratings,

Rating and Reviewing

Youtube in 2010 moved away from a Star rating system to a ‘ Like/Dislike’one. The staff said the change was because users seldom used the numbers 2,3,4 and preferred the 1 and 5 stars. This style creates quite Polarising opinions of a piece of content.

Like vs Dislike

Up/down voting is a really interesting method of surfacing content that other users would find interesting. Like the ‘ Like/Dislike’pattern it can be fairly polarizing. One of the big disadvantages of this is quickly burning through interesting or controversial content due to early down voting.

Up/down voting

Images and short text posts don't usually get view counts that are publicly visible. Instagram counts something as a view after 3 seconds according to Matthias Funk for Tubics. Music apple music and Spotify both don’t show the amount of views, while Soundcloud does. If you are on one of the first two, you are already ‘ famous’and if you are on Soundcloud you are more ‘ Garage-Bandy’in which case, Listens/Views count.

Views & listens

Encourage users to sign up for pro accounts, and then distribute the fee across the artists that they spend the most time interacting with. Back 2017, the service paid $0.0064 per stream. By last year, that number had risen to $0.00783. Today, that number has settled at $0.00735. Spotify’s Per-Stream rate ranks as one of the worst, and it appears to be falling.

But how does the money work?

You like? You love? You favorite? You five stars? Well, whatever your love language is, let’s explore them together. So, why is it a good idea to have more than one way to show appreciation? Well, a…

<ul><li> Are you ready for social pressure? If you have friends and family who are not entrepreneurs, they won’t truly understand what you are trying to achieve.</li><li>Are you single or do you have an extremely supportive partner? Make sure your partner understands it’s sometimes normal not to have a mindset even for a simple kiss.</li><li>Do you have enough cash to last at least a year? Good, then multiply that amount at least by three because you will be running out of your savings way faster.</li><li>Are you ready to sleep only few hours a day?</li><li>How do you define success?</li></ul>

Five questions future entrepreneurs should consider

is good to have an end to journey toward; but it is the journey that matters, in the

An SMS hitting my BlackBerry on Sunday evenings used to decide my destination and client for the coming week. A life packed in a suitcase. A consulting life where you miss out on everything and…

Discover the world of business and economics.

economics

Economics

technologyandthefuture

Technology & The Future

How Quitting My Corporate Job for My Startup Dream Messed My Life Up

Since Ios 7, App Icons went from being rounded squares to something more complex and refined. Apple has created design consistency between their hardware and software. If you’ve been designing Icons, you know that they’re something different.Apple has created design consistency between their hardware and software.<h1>Apple’s icons are not rounded rectangles because their hardware products aren’t.</h1>

The Shape Of Apple Icons

A ‘secret’ of Apple’s physical products is that they avoid tangency (where a radius meets a line at a single point) and craft their surfaces with what’s called curvature continuity.This small design upgrade ensures seamlessness in how their software and hardware products look, without any sudden break or interruption on the surfaces.

Apple’s icons are like their hardware products

Apple products are described as minimalistic, but ‘minimalistic’ shouldn’t be confused with ’simple.’ There’s nothing simple about the surfacing efforts on their hardware products. It’s not something the average Apple product owner is likely to be aware of unless pointed out by their Industrial Designer friend.

Minimalistic Is Classy

If you haven’t been immersed in iOS interface design, you might look at Apple’s icons and think that they’re just a rounded square or a ‘roundrect’. If you’ve been designing icons, you know that…

Before Walt Disney: 5 Pioneers of Early Animation

Defying Cultural Gravity - Calvin Rosser

The anatomy of a button — UI component series

UI cheat sheet: The 5 love languages of the web

How Quitting My Corporate Job for My Startup Dream Messed My Life Up

Veronica Neal