I’m not saying that we shouldn’t use gradients or grained textures anymore, nor that we shouldn’t put our navigation links on the top right anymore. My point is: use it if you know what you are doing and what’s the purpose of it. Put thought into your work. Otherwise you’ll end up with a good-looking but – as said before – soulless result. It makes the all the difference – even in the serious-approach companies websites, where you have a more strict guideline to follow.

Jumping from websites to games, I’ve spotted a nice game that made me think about how details and thought are important. The name is Little Red Riding Hood, and it’s a classic find-the-differences game. As you find the differences, you help the little girl – thus moving on with the story. What caught my attention is that the game has no dialogs nor narration, just nice illustrations. The nature of the game makes you pay attention to details, and consequently get immersed into its atmosphere.

This is only possible because of the thought put into the illustrations. The main objects of each image have their own reason to be there, and most of the little ones too. And they tell the story by themselves with the collaboration of the player.

It’s as the greatly talented David Lanham says: My artwork is made to be fun and enjoyable as well as a bit open-ended to invite the viewer to add their own story to the imagery.

Recommended readings (and games!):

[Article] Easter eggs

[Article] Cookie cutter websites

[Website] Tim Van Damme

[Website] Jason Santa Maria

[Website] Vitor Lourenço

[Game] Black Forest Game

[Game] Trauma Game

Janeiro já se foi, e estamos no segundo mês do ano. Como estão suas metas? Bom, uma das minhas era fazer um redesign completo do meu portfolio. Estava querendo algo simples, onde pudesse brincar um pouco com gráficos aqui e ali, além de usar algumas coisas de CSS3. O resultado:

The test tubes have animated bubbles powered by jQuery, and I played a bit with CSS3 and Opacity for the footer  social links.

Check it out – all cool things made with care. And oh, there’s an easter egg there. Can you find it?Os tubos de ensaio foram animados com a ajuda do jQuery. Também brinquei um pouco com CSS3 e a propriedade Opacity nos links do rodapé:

Dá uma olhada lá - foi feito com carinho. Ah, e tem um easter egg escondido por lá. Consegue achar?

Em primeiro lugar, a impressão que tive é que o iPad é o primeiro produto “não-obrigatório” da Apple. Quer dizer, tudo o que eles vendem é com a premissa de que você precisa daquilo, seja o que for. Quer um tocador de músicas portátil? “O iPod é o melhor, você precisa da tecnologia dele porque…”. Precisa de um notebook que aguente uma carga pesada de trabalho? “MacBook Pro, porque…”. Já o iPad não é um must-have. Suas funções se dividem entre o iPhone e um MacBook. A única coisa que sobra são os eBooks.

Mas não dá pra negar que é um aparelho que, querendo ou não, vai dar um gás enorme no ramo (principalmente dos eBooks). Se isso será positivo ou negativo – com cópias a perder de vista, como foi com o iPhone -, só o tempo mesmo pra dizer.

Interface

A interface foi a maior responsável pelo apelido de iPhonão ou iPhone de Itu – e com razão. É a interface do iPhone aumentada. Nada mais óbvio, afinal o sistema operacional é o iPhone OS. Mas não é aquela coisa “wow” que a Apple geralmente traz. E como @deaxon apontou na imagem abaixo, o espaçamento dos ícones também me incomodou um pouco.

Outra coisa que me chamou a atenção foi o app de gerenciamento de eBooks nativo do iPad, que lembra muito (muito mesmo) o do Classics, para iPhone.

Como sempre, a segunda versão trará mais aperfeiçoamentos e novidades. Até lá…

Leitura recomendada:

Hands on do iPad @ Engadget

Texto do @Neto

Released in 2008 (!) by Nicholas Zambetti, LiveView for iPhone is a free tool that allows you to select a portion of your screen, which will appear immediately in your iPhone or iPod touch.Everyday tons of apps are submitted to AppStore. Everyday tons of links are posted on Twitter, sites, blogs et al. We can’t filter it all, and because of that we end up missing some gems in the process: that’s what happened with me and LiveView Screencaster.

Released in 2008 (!) by Nicholas Zambetti, LiveView for iPhone is a free tool that allows you to select a portion of your screen, which will appear immediately in your iPhone or iPod touch.

The difference between this and a VNC app is that LiveView displays the selected portion of the screen as it really would look on the iPhone display, so you can make  detailed prototypes and polish your design with a more accurate preview.

All you have to do is install the app on your iPhone or iPod touch, download the Liveview screencaster and start both, assuming that your Mac and iPhone are connected to the same WiFi network.

The difference between this and a VNC app is that LiveView displays the selected portion of the screen as it really would look on the iPhone display, so you can make  detailed prototypes and polish your design with a more accurate preview.

All you have to do is install the app on your iPhone or iPod touch, download the Liveview screencaster and start both, assuming that your Mac and iPhone are connected to the same WiFi network.

Stéphane Massa-Bidal redesigned web services as retro books. Cool thing is that you actually can buy them – as posters, of course! Check it out at Stéphane’s Flickr.

Stéphane Massa-Bidal fez uma versão retro books de serviços populares da internet. O legal é que dá pra comprar as capas em formato pôster! Veja lá no Flickr da Stéphane’s.

And this is what I’m doing today by gathering a roundup of cool hidden features in websites and design-related software. Some of them may already be known by some of you, nevertheless I hope it provides inspiration as much as it did to me – not by the secret itself, but by the act of putting more thought on our work. Who doesn’t like good surprises? I’m sure you do, and so do I. Hidden messages and features add a touch of humor and/or cleverness to a work, which captivates the user. These things makes us want to show our findings to friends, thus spreading a website or a work.

And this is what I’m doing today by gathering a roundup of cool hidden features in websites and design-related software. Some of them may already be known by some of you, nevertheless I hope it provides inspiration as much as it did to me – not by the secret itself, but by the act of putting more thought on our work.

Web design

Let’s start with W3.org, home of the famous World Wide Web Consortium. The website recently suffered a complete redesign, and with that a cool feature: if you resize your browser window, there’s a point where the design changes to its mobile version.

Speaking of window resizing, Paul Annett pointed out this one in his SXSW’09 talk: Twequency site has an easter egg based on that:

@iamkhayyam also added an easter egg in his Twitter background, but this time you can only see by expanding your browser window (or if you have a huge display):

Up, up, down, down, left, right, left, right, B, A.

Is the code above familiar to you? Well, maybe not to you, but it is for thousands of people who played (and still play) Konami games. It’s a famous cheat code created in 1986 and since then it’s been used in many games, giving extra lives and other bonuses when performed. Many websites incorporated it through JavaScript:

PHP.net. The classic and famous PHP language official website displays a different logo if you type the code and hit enter.

The Globe And Mail, a Canadian newspaper website:

Cheat codes aside…

There’s another kind of hidden secrets in websites: the ones discovered by observation and interaction.

Another tip from Paul Annett: let’s look at Kyan Media website’s footer. An illustrated footer – apparently the side ends there. But if you click the worm…

Now let’s look at Meomi studio website. It’s a very cool illustrated style, full of interaction points. While some of them are not really hidden, it shows that the creators put a lot of thought and hand care into the site.

Depending on your browser window, you won’t see the evil guy hidden in the midst of the sheeps of Miro’s website.

Dave Werner’s portfolio also has hidden videos among the photos of his works. I’m highlighting one – can you spot the other?

Some easter eggs aren’t visual. Instead, they’re hidden in the website coding, like Atmosphir’s:

And to finish with websites, the classic one: Yahoo’s “YahooOOOoo!” choir if you click the logo’s exclamation.

Software

There’s a lot of easter eggs hidden in softwares, specially the ones we use everyday. Just to show a few of them:

In Photoshop, go to Photoshop, hold Cmd and click About Photoshop. If you’re a Windows user, go to Help, hold Ctrl and click About Photoshop. It will show Photoshop’s codename splash screen (Stonehenge), and if you hold Option/Alt, the credits will scroll faster. Wait for the end and see a little surprise dedicated to you.

In Illustrator, repeat the same process above but holding Option/Alt instead. You’ll see the splashing screen with Venus’ face, from Sandro Botticelli’s Birth of Venus.

Still in Illustrator, if you hold your Option/Alt key and click on the selection menu at the bottom, it shows you how the number of shopping days until Christmas. Why? Don’t ask me!

That’s it, I hope you liked and feel a little more inspired about putting more thought on your works. And of course, to hunt more easter eggs out there!

Web design

Let’s start with W3.org, home of the famous World Wide Web Consortium. The website recently suffered a complete redesign, and with that a cool feature: if you resize your browser window, there’s a point where the design changes to its mobile version.

Speaking of window resizing, Paul Annett pointed out this one in his SXSW’09 talk: Twequency site has an easter egg based on that:

@iamkhayyam also added an easter egg in his Twitter background, but this time you can only see by expanding your browser window (or if you have a huge display):

Up, up, down, down, left, right, left, right, B, A.

Is the code above familiar to you? Well, maybe not to you, but it is for thousands of people who played (and still play) Konami games. It’s a famous cheat code created in 1986 and since then it’s been used in many games, giving extra lives and other bonuses when performed. Many websites incorporated it through JavaScript:

PHP.net. The classic and famous PHP language official website displays a different logo if you type the code and hit enter.

The Globe And Mail, a Canadian newspaper website:

Cheat codes aside…

There’s another kind of hidden secrets in websites: the ones discovered by observation and interaction.

Another tip from Paul Annett: let’s look at Kyan Media website’s footer. An illustrated footer – apparently the side ends there. But if you click the worm…

Now let’s look at Meomi studio website. It’s a very cool illustrated style, full of interaction points. While some of them are not really hidden, it shows that the creators put a lot of thought and hand care into the site.

Depending on your browser window, you won’t see the evil guy hidden in the midst of the sheeps of Miro’s website.

Dave Werner’s portfolio also has hidden videos among the photos of his works. I’m highlighting one – can you spot the other?

Some easter eggs aren’t visual. Instead, they’re hidden in the website coding, like Atmosphir’s:

And to finish with websites, the classic one: Yahoo’s “YahooOOOoo!” choir if you click the logo’s exclamation.

Software

There’s a lot of easter eggs hidden in softwares, specially the ones we use everyday. Just to show a few of them:

In Photoshop, go to Photoshop, hold Cmd and click About Photoshop. If you’re a Windows user, go to Help, hold Ctrl and click About Photoshop. It will show Photoshop’s codename splash screen (Stonehenge), and if you hold Option/Alt, the credits will scroll faster. Wait for the end and see a little surprise dedicated to you.

In Illustrator, repeat the same process above but holding Option/Alt instead. You’ll see the splashing screen with Venus’ face, from Sandro Botticelli’s Birth of Venus.

Still in Illustrator, if you hold your Option/Alt key and click on the selection menu at the bottom, it shows you how the number of shopping days until Christmas. Why? Don’t ask me!

That’s it, I hope you liked and feel a little more inspired about putting more thought on your works. And of course, to hunt more easter eggs out there!

Do you remember when blogs gained the spotlight? If you do, then you probably also remember how it suffered from huge amounts of criticism: “it’s just a virtual diary”, “just for teens”, “futile stuff” and things like that. Not that every person on the internet hated it, but there was a strong aversion to the so called blogging. Time passed as we watched blogs gain tremendous importance. It wasn’t different with Twitter.

And it’s not being different with Google Wave – the new target of mass criticism.  Some people who tried the new invention from Google are now saying it’s useless. I would like to make an invite to those people: think about a way of using it! Create your own way to use Wave’s resources and innovation. Twitter didn’t start with hashtags and RTs: it was user’s invention. We can do the same with Google Wave. It’s not only about the tool, it’s about the hand that moves it.

There’s a lot to say about that, but the reason I made this post is Mashable’s article about 5 Impressive Real-Life Google Wave Use Cases. Worth reading – and start thinking how you can work with Google Wave!

Você lembra quando os blogs ganharam destaque? Caso sim, também provavelmente se lembra de como foi alvo de um monte de críticas: “é um diarinho”, “só para adolescentes”, “coisas fúteis”, entre outros. Não que todo mundo odiasse, mas havia uma enorme aversão ao “blogging”. O tempo passou e vimos os blogs ganharem enorme importância. Não foi diferente com o Twitter.

E não está sendo diferente como Google Wave – o novo alvo de críticas. Algumas pessoas que testaram a nova invenção do Google agora dizem que é algo inútil. Pois eu convido essas pessoas a pensar em uma maneira de fazê-lo útil! O sistema do Wave dá bons subsídios para se fazer algo, basta a boa vontade. O Twitter em seu começo não tinha hashtags nem RTs: foi uma invenção dos usuários. Podemos fazer o mesmo com o Google Wave. Depende de como usamos a ferramenta.

Esse é um assunto longo, mas o motivo pelo qual fiz este post é um artigo do Mashable (em inglês) sobre 5 notáveis casos do Google Wave sendo colocado em prática. Vale a leitura – e começar a pensar em como usá-lo!

Feel free to share and give me some feedback! I hope you enjoy them.

Aqui está um pequeno pacote de wallpapers que fiz ontem, o qual compartilho com vocês! Ontem estava experimentando alguns efeitos “submarinos” enquanto ouvia Beatles, e eis que essa idéia surgiu. O peixinho é uma versão orgânica (se é que podemos chamar assim) do Yellow Submarine, misturado com uma cor de fundo tranquila e agradável de se olhar. Eles são minimalistas com um pequeno toque de bom humor, inspirados pelos ótimos trabalhos do Vlad Studio.

Fique à vontade para compartilhar, bem como me dizer o que achou deles. Espero que goste!

Leo Babauta from Zen Habits offers a nice reading about making things happen.

Leo Babauta, do Zen Habits, escreveu um bom artigo (em inglês) sobre colocar as coisas em prática, também conhecido como vai lá e faz.