20 beautiful Kinetic (motion) typography examples

Published

on October 21, 2008

. 2 Comments

Kinetic typography is the technical name for “moving text and is an animation technique mixing motion and text. It’s a typographic motion design which I really like.

So here I have some examples of Kinetic typography

Pulp Fiction in Typography

Barack Obama in Kinetic typography

Look What You’ve Done

Kill Bill Kinetic Typography

The Hush Sound

Who’s on First

Wedding Crashers

The Big Lebowski Typography

Zoolander Typography

Choose (Trainspotting)

DEVIL’S ADVOCATE

The 8 rules of Fight Club

Reservior Dogs kinetic typography

Snatch Kinetic Typography

Oceans 11

ARE YOU GONNA BE MY GIRL?

Knife Party - America

Superbad Typography

Streetlight Manifesto

Typography explained in Kinetic Typography

Did you like the examples?
If you want to learn how to make something like this in Adobe After effects you can check it out here. http://www.crookedgremlins.com/09/01/2008/kinetic-typography-tutorial/

Some Resourses:

http://en.wikipedia.org/wiki/Kinematic_typography
http://www.cs.cmu.edu/~johnny/kt/
http://www.marcofolio.net/video/15_stunning_motion_typography_videos.html
http://www.typophile.com/node/36484
http://www.crookedgremlins.com/09/01/2008/kinetic-typography-tutorial/
http://www.ahcom.nl/tag/kinetic-typography/
http://www.xenius.nl/weblog/2008/08/30/kinetic-typography/

The Carsonified Golden Ticket

Published

thaisie

on September 29, 2008

in events

. 36 Comments

Carsonified is giving away a Golden Ticket to one of their events in 2009, so thats FOWA, FOWD, FOM and of course FUEL conference. The Golden Ticket will also contain a flight and a hotel.

It would be great if can go to the future of webdesign, in 2009. I was there last year and i’ve made allot of posts about it. You can see my future of webdesign post here.

To win this contest I have to get 25 comments on this blog post. So it would be great if you can place a reaction on this article.

And here is my presentation about the future of webdesign. (part 1)

The future of webdesign (london 2008)

View SlideShare presentation or Upload your own. (tags: marketing online)

UPDATE: There’s a winner and it’s not me

it is Jakub Congrats to you!

Toekomst van de popmuziek

Published

thaisie

on September 15, 2008

in music

. 4 Comments

Bij 3voor12.nl hebben ze nu de vraag, bedenk je eigen seminar en win kaarten voor Noorderslag 2009 Zie hier de actie >

Toen ik die vraag las, zette het mij aan het denken. Hoe zie ik de toekomst van de (pop)muziek?

Ik zie het online, ik gebruik namelijk last.fm om nieuwe bands te beluisteren en download de muziek van de artiesten als ik ze op mijn ipod wil luisteren. Verder download ik livesets als deze beschikbaar zijn, meestal van liveacts waar ik zelf bij was. Dit omdat ik die beleving weer wil oproepen en het nogmaals wil ervaren. Maar soms ook juist van acts waar je goede verhalen over gehoord hebt.

De 3voor12 livesets luister ik vaak terug. Bijvoorbeeld de lowlands livesets, sommige liveacts had ik gemist, deze kon ik dan online terug luisteren. Ik zie het luisteren van muziek als ontspanning en het ervaren van een liveact als een beleving. Ik denk dat die belevingen van concerten alleen maar groter zullen worden.

Mijn ingestuurde Stelling is dan ook:

De toekomst van muziek is online! Cd’s worden promotie materiaal.

Best een revolutinaire titel, maar toch denk ik dat dit het zal gaan worden. Ik heb pas geleden de film Good Copy Versus Bad Copy zitten kijken. Daar hebben ze het over “The tecno brega movement” een Braziliaanse formatie die cd’s gratis weggeeft aan de straatverkopers. De straatverkopers verdienen er alleen geld aan, zij zelf niet. Zij zien het verkopen van cd’s niet als een goed verdienmodel, ze zien de cd’s meer als een advertentie middel. Want ze organiseren feesten waar rond de 5000 bezoekers geen uitzondering is. Op die feesten verdienen ze hun geld.

Door downloads en sociale media gaan artiesten niets meer verdienen aan albums maar aan concerten. Zij moeten zich ook steeds beter gaan mengen in de sociale media platformen zoals last.fm, myspace, youtube, vimeo, pandora etc. Daar krijgt men recomendaties op basis van andere artiesten. Artiesten moeten daar gaan uitblinken met speciale tracks. Bijvoorbeeld met steeds meer exclusieve tracks opnemen voor de sociale netwerken, of het laten “uitlekken” van tracks via sociale netwerken.

Verder je cd gratis weggeven of “geef zelf aan hoeveel je ervoor wilt betalen” methode toepassen zal je zeker vaker zien. Radiohead deed dat met het laatste album In Rainbows. Maar dan nog zie je dat het Radiohead album In rainbows gratis nog niet gratis genoeg was. Ze downloaden masaal (2.3. million) de albums via torrent sites. Mensen zijn namelijk gewend om te gaan in hun vertrouwde omgeving. Zij downloaden al hun albums daar, waarom moeten ze dan voor het Radiohead album naar hun site. Een optie over is om je album dan ook gelijk via torrentsites te seeden. Maar waar verdienen ze dan mee? Er zijn genoeg traditionele dingen te bedenken, concerten, merchandise, commercials en uiteraard optredens.

Het zal meer de beleving van de muziek en de concerten worden, dan dat het om het cdtje zal gaan. Ze gaan nog meer touren, en ze gaan de cd’s (bijvb live cd’s) gratis weggeven bij concerten. Want het zal niet meer om de cd’s gaan maar meer om de concerten. Uiteraard kunnen ze ook bij het kopen van het kaartje iedereen een unieke code geven. Met die unieke code kan iedereen een week na het concert hun live set gratis downloaden. Zij kunnen hem dan downloaden en het concert herbeleven, en de artiest/band heeft er een nieuwe digitale fan (fan-account) bij want men laat wat gegevens achter voor de download. Vanaf dat moment moet de band/artiest ze warm houden want dat zal hun verdien model worden. Mensen op de lange termijn aan hun binden. Want het zal in mijn optiek meer om de beleving van een band of artiest gaan.

Ik heb mijn stelling iets korter geformuleerd ingestuurd, en ben benieuwd of het niet te vroeg is voor zo’n revolutionair onderwerp, maar ik denk dat het nu wel tijd wordt dat de bands/artiesten meer en meer online aanwezig zullen zijn.

Nieuwe projecten

Published

thaisie

on July 18, 2008

in portfolio

. 0 Comments

Het is weer tijd voor een update. Heb een tijd niets van me laten horen.

Dus hierbij wat projecten waar ik recent aan heb gewerkt.

Hartstichting Collectenspel
Heb meegwerkt aan de concept en samen met collega de game ontworpen en ontwikkeld.

www.collectespel.nl

Re-Lead
Re-lead is een concept van Villa DM en KEGA | group. Ik heb voor dit project samen met collega’s het ontwerp voor de website neergezet en uitgewerkt.

www.re-lead.nl

Centrum Vitamine
Voor Centrum Vitamine hebben we een nieuwe website ontwikkeld. Ik heb meegewerkt aan het concept en heb de site ontworpen en doorvertaald.

www.centrumvitamine.nl

Cultra Aalsmeer
Is eigenlijk al te lang online om nog te noemen. Maar deze website heb ik enige tijd geleden ontworpen.
www.cultra.nl

Overigens alle projecten hier boven genoemd zijn uitgevoerd bij KEGA | group te Sassenheim

Binnenkort meer updates. Van o.a. events waar ik geweest ben, en een aantal artikelen waar ik nu aan werk. Uiteraard als er dan nieuwe projecten live zijn gegaan, zal ik daar ook hier weer over schrijven.

FOWD - Workshop from product to service

Published

thaisie

on April 18, 2008

in events

. 0 Comments

The future of webdesign event of carsoniefied. I attended the workshop from product to sevice by Hannah Donovan. Here you can see my notes about the workshop.

Hannah Donovan (http://last.fm)

1. Touchpoints

For example last.fm
in control
google search results, email, web/print marketing, application on other site, word of mouth
out of control
Catalogue page, Home page, Profile page, player, software, customer service,

2. Proces maps
Takes toutch points a little bit further..
Like I have to check in for the plane, and then I have to go through the security etc.. there’s not other way to check in the plane..

Proces maps have 3 steps:
- places (toutchpoints)
- Actions (what is the action on the above toutchpoint)
- Problems (what are the problems of the actions and toutchpoints.)

3. Blueprints
you create a sort of flowchart. But you only go to

4. experience prototype
You never know abroad how the user is going to experience your design. So you have to test it.
User testing. Think about the toutchpoints and process maps.

Project task planning.
- Designer
- Back-end developer
- Front-end Developer

5. Personas
Designers want to talk about the details. Like to talk about the 14years old..
Your arguments must be based on the thoughts not on the stats.
Scenarios and personas for service design are important..

6. Scenarios
Create scenarios about your personas and keep on roll playing when you are designing..

FOWD - Unconventional ways to promote your site

Published

thaisie

on April 17, 2008

in events

. 0 Comments

Here i’m going to show some life draft of the future of webdesign event. So keep in mind that there can be typo’s and weird sentences. But feel free to comment..

Paul Farnell (http://litmusapp.com/)

What is conventional
- Blogging, Google adwords, SEO
- Visitor figures

What’s unconventional?
1. Satellites
2. Content
3. communities
4. Human

1.Build Satellites
Small
Free
Valuable (need to give a solution for a problem)
Complementary (make quality valuable visitors)

Example Tadalist Free list and complements 37Signals Basecamp applications. So the visitors are qualified visitors.

Example Gapingvoid.com widget.
A small cartoon wich you can place on a blog.

2. Put value on your Content
- Dichotomy
- Our Model
(put something online .. It’s 7 days for free and after that it would cost a small amount of mony. Than there’s a sense of urgence. Because you only have 7 days.)

3. Join Communities
- make connections and develop relations
- your company > your name > helpful, interesting
- Build trust (be your self not commercial)
- Meet them in person at meetups

Start your own community.
- cant always find the perfect community elsewhere.
- Easy to develop, hard to make popular
- seed it on the communities where you already have the trust..
(www.seeed.org)

4. Be Human
- Respond as actual person. Don’t have info or service mail adres but a real persons email adres.
- Enthusiasm
- How?
- Build trust!
- Passionate users
- Ambassadors

FOWD - From design to deployment

Published

thaisie

on April 17, 2008

in events

. 0 Comments

John hicks (johnhicks.co.uk)

Example project which will be online soon on
www.cheesophile.com

Preset folder for projects
[css]
[img]
[dev] (photoshop/firewroks etc)
[js] (js sample etc)
[swf]
[library]
index.html

Settup a localhost
Headdress and mamp voor a localhost..

Before you think about styling think about your content.
Open up your fireworks or your photoshop and create in the toplayer title of where you want which html element. Where does the H1 go or the menu will be a UL ist etc..

Then build up your (x)html
Do this on your favorite way. And put a skip to content element in the beginning.

Define the browser support

Y! grated browser support
Support does not mean that everybody got the same website.
www.Developer.yahoo.com/yui/articles/gbs/

Basic structure
- basic HTML
- basic css
- use a lyout.css (layout with @import/**/
- Use a reset.css (reset stylesheet)
- use a typography.css (typography stylesheet)

Typeface choise
example1. Helvetica, Calibri, verdana, arial, sans-serif
Example2. Gill sans, trebuchet, Helvetica, arial, verdana
Both examples gives weird results.

Some typeface tricks
- Try letterspacing letter-spacing { -1px;}
- Heading line height Line-height{ 1.4em;}

Design a grid for the site
Design the grid with grid calculator
www.29digital.net/grid/

Or use Grid layout script
www.gridlayouts.com
Where you can show the grid patern behind your html. With ctrl-shift-G you can switch it on or off.

After that the worse part bughunting.
Haslayout is the key to understanding all your problems in the browsers.

For ie6.css
Div, li {

Zoom:1;
}

—

John hicks
http://www.hicksdesign.co.uk/

FOWD - Get your design approved in 12 simple steps

Published

thaisie

on April 17, 2008

in events

. 1 Comment

Here i’m going to show some life draft of the future of webdesign event. So keep in mind that there can be typo’s and weird sentences. But feel free to comment..

Larissa Meek (agencyNet Interactive)

And here you can see the presenation on Slideshare.

And here you can see my notes of the presenation

1. Make friends with your client
- They are not your enemy.
- Keep realizing the paying money for your work.
- They have another variety of resposibilities

2. Ask allot of questions
- get to know the clients industry and business objectives
- Perform a competitive analysis.
For example: Hotdog
what are they, what are the best way, why hotdogs associated with baseball games, what are the most popular topping, can you eat them cold,

3. Ask more questions (who will be using the site?)
- What is the target age range?
- the user needs can be different as the business objectives.
- use real people for user profiles by your process

4. Use wireframes. But don’t be tie to them!
- use it as an conversation starter
- use them to indicate content priority
- it’s ok to make small changes
- get you clients to think about the functionality for your site.
- make you wireframe to scale
- walk your clients to the wireframe. The see it as lorum ipsum and blocks. Clients see it visual nog functional. You have to help them to walk though it.
- For flash site you don’t do wireframing but storyboarding

5. Talk about your design before you open photoshop.

- Before you start the design, you have color palets, a moodboard a styleguide references of other websites which were discussed with the client
- As and designer you have to understand the style guide.
- Use site examples & Color palettes to show what will be you design direction

6. One design direction will do.

Give them allot options is not a good option. Because then you are going to combine two concepts.

7. Present in the browser.

- show it in a browser.
- don’t show it through a email. You have to link them to the browser.
- Provide notes. Provide proper documentation.

8. Prototyp as needed.

- If you do a webapplication it can be very handy.
- you can check the user experiences.
(Fireworks allows you to make rapidly fast prototypes. )

9. ask for consolidated feedback. Limited rounds of revisions.

- educated your client on the importance of providing consolidated feedback.
- collect al the feedback and combine them to one document.
- too many cooks in the kitchen. Limit the feedback possibilities of the client.

Tips to get the feedback you need.
help you r clients to focus on the user needs.

10. be confident in your work

- Don’t fall in the trap of asking your clients what’s right.
- be a friend and be teaching them

11. time will tell
- With time your client will understand the design
- The client will understand the revisions

12. make the most of a difficult situation

- Stay positive
- be optimistic
- work with them not against them.

FOWD - Design The user experience

Published

thaisie

on April 17, 2008

in events

. 4 Comments

Here i’m going to show some life draft of the future of webdesign event. So keep in mind that there can be typo’s and weird sentences. But feel free to comment..

Andy budd (clearleft)
You have to focus on the whole experience. You can define the user experience within 7 experience points.

The 7 points of experience.

1^st. First impressions count.
- People judge on looks
- good design can create more value to a website
- iPod is a good example. They make the unpacking of the product an experience.
- Create a nice design

2^nd Attentive services
- the waiter refilling your class
- opening a new line at the checkout
-It’s just usability
- Apple for example, build the first shop inside a big hall and just tested it with customers and checked how they reacted. After that they changed it. And opend 6 flagships stores at ones with the definitive layout of the shop

3^rd Person
- the barman knows your name
- at Starbucks, for example they don’t say a café late. Now they for your name when your order. And when it is ready they say your name. A café late for Paul.
- customize your website.
- like flickr, say hey paul, welcome back.

4^thAttention to detail
- Like chocolates on your pillows in a hotel.
- Or in a hotel they have a written letter on your bed with the weather forecast
- In a theme park for example. Even the trash cans are customized. This is attention to detail.
- create delightful experiences
- threadless, they e-mail you if the shirt is almost sold which you have in your shopping cart.
- Personality is important.
- build in easteregs. Because then you can create great user experiences. Because people who mentioning them will be telling it to friends.

5^th Feedback
- Like a gambling machine which is giving feedback with sounds.
- Like a American mailbox. The mailbox gives you feedback, if there’s new mail.
- Like a phone que that you are waiting and waiting. The better way is to giving you info about how many people are in front of you so that you can think about the time it will cost you.
- Help people to solve your problems
- buttons have to give your feedback, they must look like buttons and acts as buttons.
- the process bar at linkedin. Like how many procent you have to complete.
- show you the process of a search. (Like kayak search)
- like google maps. Gives feedback.. when you click you get action and reaction.
- give friendly feedback, on errors.

6^th Make it fun
- Look at the game industrie, they make great user experiences
- We love collection, and we can share them . we love that and we get feedback from friends.
- We love collecting photo’s on flickr, we love to collecting friends on facebook or on last.fm.
- People love it to get feedback and to get regards.

7^th Create the experience
- Look at vegas a place where there are a lot experiences
- look at the trainstation ticket machine. Look at the experiences..
-look around

andy@clearleft.com
www.clearleft.com

www.Ratemyarea.com

FOWD - User Experience vs Brand Experience

Published

thaisie

on April 17, 2008

in events

. 0 Comments

Here i’m going to show some life draft of the future of webdesign event. So keep in mind that there can be typo’s and weird sentences. But feel free to comment..

Andy clarke (Stuff and Nonsense) & Steve Pearce (poke)

Steve pearces
There is now competition against each other. Because there is no winner or loser..
Client and studio most be in harmony. There is now war.. User experience is brand experience visa versa.

See it as an iceberg..
I see the top but I want to see the whole iceberg..
The most designers create a great top of the iceberg but have an poor bottom of the iceberg..

So your homepage is great. But you have to make the whole website great.
Because the bottom of the iceberg must also be good for the great user experience..

An example google..
Not great designer but great coding.. So they have the bottom of the iceberg right but not the top of the iceberg.. so the process (user experience is great) but the brand experience is poor..

Andy clarke
People talk about something how great something is. That’s the userxperience. Think about why we going to drink starbucks in stead of going to drink a Nescafe coffee.

We consume media now a days allot diffent as 30 years ago. We get less more people to catch. For your user experience. Or it’s going to be more difficult to create something remarkle

Inspired design?
A usable design must be a safe design?

Books to read
Designing for interaction http://tinyurl.com/4tbtf8
Purple cow http://tinyurl.com/4vpgu