Video as background

Una colección de 25 sitios que se las han ingeniado para tener video como fondo en su layout. Aunque la gente piensa que los anchos de banda actualmente facilitan el streaming de buena calidad, realmente sigue siendo todo un reto hacer un sitio que contenga video en constante flujo, y en formatos tan grandes como los de estos ejemplos (que están a full screen, de hecho).

Quizás hay que estar un poco involcrado con el desarrollo web para apreciar la belleza de estas piezas. Pero el resultado es notoriamente un producto de vanguardia  para cualquiera, digno de una web 3.0

Despite everything that could go wrong with embedded video, if a picture is worth a thousand words, video is worth a thousand pictures.

There are many pages where video goes right. But rarely does it have the impact it can gain through flawless integration with the other elements, as part of a page’s background. When done right, video can be downright jaw dropping…

http://bit.ly/RC768p 

Web Platform

Es bueno para cualquier desarrollador (o interesado en Internet) ver que ahora las principales empresas de el ramo de la tecnología están trabajando junto con la W3C como administradores en este proyecto que busca ser un repositorio de los principales recursos y estándares web.
Por fin, un intento de estandarización en lugar de privatización y competencia. Una sola referencia. Un solo cúmulo de conocimiento. Esto puede traer cosas muy buenas…

W3C along with the Web Platform Stewards, who are currently Adobe, Apple, Facebook, Google, HP, Microsoft, Mozilla, Nokia, and Opera, have launched this effort to centralize web practices in a wiki and preserved to foster sharing and reuse.

The site will include best practices for feature usage (including syntax and examples), cross-platform interoperability, standardization status of specifications, and feature stability and implementation status. Each section, in true wiki style, can be rated and links back to original sources. The site appears very much in the developmental stage at this time of launch…

 http://bit.ly/RbprbD

Web Platform

Procrastination

Un pequeño artículo sobre este  síndrome  –procastinación– y como lidiar con él cuando se manifiesta. Es interesante que, aunque es fácil de explicar, prácticamente carece de un uso equivalente en español (personalmente lo traduciría como “decidia”, pero no sé si sea totalmente correcto).

Me gustó que además la nota está aplicada a situaciones dentro del mundo de la creatividad y el diseño, donde a veces sufrimos este y otros tipos de frustraciones…

First of all, you should realize that procrastination, despite being an annoyance and a major waste of time, is perfectly normal. Really. You’re not some lazy freak of nature if you procrastinate now and then. There’s no real cure for procrastination, and to be honest, as a creative person, you probably wouldn’t want the cure even if there was one. Why? Because procrastination is a major source of distraction, and distraction is what allows you to be creative in the first place. Think about it. If your life was merely a series of tasks from your to-do list, which you did flawlessly all the time, where would you find the time to be creative? And what are you usually doing when you’re at your most creative? Are you getting things done productively, like a good little automaton? Or are you goofing off – staring into space, doodling aimlessly, thinking about crazy, abstract things that have nothing to do with the task at hand? If you’re anything like me, the answer is almost always the latter.

The problem comes when your procrastination lasts longer than the period it’s required to be useful. If you find yourself avoiding your work for no other reason than you’re just not motivated to do it, there are a few things you can do to get yourself back on track and complete the work that needs to be completed. First of all, it’s important to understand the nature of human emotion. Don’t worry – this isn’t some esoteric psychology lesson. It’s actually quite simple: there’s no way you can maintain the same level of enthusiasm for the entire duration of a long-term project. It’s just not possible. Your brain will eventually run out of energy, and you’ll find yourself exhausted and demotivated. This is normal. And like procrastination, there’s nothing you can do about it. What you can do, however, is something that many people refuse to do: accept that it’s normal and that you can’t do anything about it…

 http://bit.ly/N9Hwsw

Procrastination

Native vs. Web apps

Un interesante infográfico, con datos recientes sobre el eterno debate entre las apps nativas (las que se descargan a un dispositivo) y las web (las que viven totalmente en internet). Lo único de lo que no cabe duda es que pronto será mejor negocio hacer aplicaciones que hamburguesas…

I’m assuming that you already know the basics of native apps and web apps – that’s why I won’t go deep into them. Native apps are built using a specific programming language (like Java, Objective-C etc), which means one native app can’t run on different mobile platforms and every platform needs to have its own native app. With an ability to run without using the Internet, they can use all the features of a mobile device and also can be distributed in different application stores like Google Play etc after approval. Almost all the games you play in your smartphone are native apps.

Web apps, usually written in HTML5 and CSS3, are one-for-all apps – ie they run across all platforms. They can only partially use features of a mobile phone. They are not available in an application store, so they don’t require any approval process. Web apps can be used without being downloaded and installed in a mobile device – contrary to native apps…

http://bit.ly/OFbC5F 

Native vs. Web apps

Parallax Top40

Aquí una buena recopilación de los 40 sitios que mejor sacan provecho del efecto Parallax (o de mapeado por paralaje), que es una técnica de scroll que mediante la superposición de varias capas y el movimiento independiente de estas, crea una sensación de profundidad. Para entender mejor este aparente sinsentido, vamos a Wikipedia.

Este efecto se utiliza tipicamente en los videojuegos, sin ir mas lejos, el primer ejemplo lo encontramos en el Moon Patrol de 1982 y desde entonces se ha usado para suplir la carencia de profundidad que nos dan las representaciones bidimensionales, ya sea un videojuego, o como en este caso una web…

 

In this round up, we have some fantastic examples and uses of the parallax effect for you. The parallax scrolling effect, now a firm design trend, is a technique that uses multiple background images that move at different, yet synchronized, speeds as the user scrolls down (also, less popularly, horizontally) a web page. The overall effect gives the viewer a seamless and intriguing browsing experience that just looks damn good!

At the bootom of the page we have also included a selection of tutorials to help get yopu started…

http://bit.ly/M7fMWq

Parallax Top40

40 world maps

For today’s gallery, we have 40 uniquely designed World maps for you. Some maps have been designed using only the creative imagination of the designer allowing you a brief glimpse into how they each view the World and using, at times, some uncommon art materials such as water, a tangerine peel and, even Lego.

Others, while no less creative, have been designed to highlight a product or service, a global historical event/time, or to make a political statement…

http://bit.ly/NgKR3M

Fireworks tutorials

Es una monserga tener que andar por el mundo del diseño web defendiendo este programa de Adobe y teniendo que explicarle a cada diseñador que no sale de su Photoshop las ventajas de uno sobre otro. Comúnmente los mas tercos son los de la vieja escuela (ATL) que no entienden nada de digital, de interfaces, de maquetaciones, mock-ups, propototipos, layouts, UX, optimización para html, Front-end, CSS, jerarquías de estilos, browser components y un largo etcétera.

Es como querer hablar del Big Bang con una monja. Guardo aquí este post como referencia para esos momentos de frustración…

Adobe Fireworks is one of the most popular application choices amongst web designers for wireframing and prototyping. There are many reasons as to why you should use Fireworks over any other graphic editor, but we won’t go into them with this post (perhaps you could try this one: A Case for Adobe Fireworks against Photoshop and Illustrator).

What this post will offer is a comprehensive starting point and reference for any designer who would like to take those first Fireworks steps and are not very sure were to begin.

We promise, once you start using Fireworks for wireframing you will never go back…

http://bit.ly/uEdAoA

Fireworks tutorials

Responsive layouts

Cómo diseñar para varias plataformas – Lección 1: Diseño responsivo (que en este caso se refiere específicamente a layouts adaptables al ancho de cualquier display).
Este artículo explica tan claro el concepto anterior que no hay que decir mucho…

Hagan el siguiente experimento: abran alguna de las páginas ejemplificadas en este artículo y hagan mas grande y/o mas chico la ventana su explorador, para ver lo que cambia. Eso es diseñar para mobile.

Responsive web design become a very popular trend in 2011. It’s likely something we’ll see continuing well into 2012 as designers are beginning to support a myriad of mobile devices. Building layouts for the web can be tough, but inspiration is a huge factor.

In this gallery I’ve collected 40+ amazing responsive website layouts. These designs are built to support a set of different resolutions and re-size accordingly. It’s tricky building this functionality in HTML5, even advanced web developers may not understand responsive design trends. But check out some of our examples below and you’ll pick up techniques very quickly. Additionally let us know your thoughts or questions in the post discussion area…

http://bit.ly/yk30AY

Responsive layouts

Creative Web Layouts

En publicidad es común hablar de creatividad en varios niveles: conceptos, insights, logos, keyvisuals, displays y otras cuestiones visuales, formas de elegir y aplicar una tecnología, slogans, selling lines y demás aspectos comunicativos… todo esto se espera siempre que sea innovador y creativo en algún sentido.

Incluso en cosas que parecen ya mas ajenas a las areas de arte y/o creativas de una agencia: la elaboración de una estrategia de marketing, la búsqueda de nuevos canales y plataformas de comunicación para el plan de medios de una campaña… en todo esto se puede ser creativo’, correcto?

Dentro del diseño web hay una forma de creatividad muy específica de esta disciplina (y que curiosamente, no a tantos diseñadores les gusta explorar), relacionada con la experiencia del usuario al navegar un sitio (UX). Creo que la mejor manera de referirise -en español- a esta forma de innovar es “creatividad en la forma de resolver una interface”.

Aquí hay una pequeña colección de Speckyboy.com con ejemplos de layouts bastante originales en ese sentido…

Web design does not have to be limited to a typical grid structured layout. It sometimes feels like we are locked in an endless cycle of header, content, sidebar and footer. That is it. It would be great if we could to tear away from convention sometimes and also force ourselves to break some usability rules. Just imagine what we could create.

In today’s post we have for you a selection of sites that do exactly as described above: They break convention and the result is that they have built some amazingly creative layouts which, in most cases anyway, are a little unusual as well…

http://bit.ly/rsc29Q

Creative Web Layouts

Design for newbies

Primeros tips para los pocos que aun no se han aventurado por sí mismos a tener un blog o sitio web (actividad intelectualmente sana y por demás gratificante, si no es que lucrativa). Este tipo de recapitulaciones siempre son buenas para no perderse entre tanta info sobre qué hacer, porqué, cómo… Bienvenidos a “la biblioteca” , )

If you have a business and you don’t have a blog, WHAT are you doing? A blog boosts your credibility and gives you a forum for company updates, but also acts as a magnet for search engine traffic. Blogs are, hands down, one of the best ways to maintain repeat traffic, improve sales conversions and grow your business. A good web design firm can set you up with a custom blog with all the bells and whistles or build something more basic in WordPress. Now, before you get around to thinking “Thanks for the tip, Captain Obvious,” consider some of the web design add-ons you can use to enhance your WordPress blog:

For navigation’s sake, try:

  • Related Posts (to keep your readers clicking through your site)
  • Most Viewed Posts (to solicit more comments and give you a sense of what’s hot)
  • Breadcrumbs (to show readers their navigation path for easy back-clicking)
  • Category Icons (to help readers find information visually)

For an improved design, try:

  • Improving your sidebar
  • Creating an attention-grabbing subscription button
  • Massive Amount Of Inspiration For RSS Suscribe Icons
  • Adding more images to break up the text

For performance, try:

  • Keeping images restricted to five per post for faster loading time
  • Separating posts of 1,500+ words into several pages
  • Using the “Read More” line after the first paragraph
  • Upgrading outdated plugins and deleting ones you don’t use

For SEO, try:

  • Using an SEO plugin
  • Including keywords in your title and headline tags
  • Writing longer blogs that are 400+ words
  • Giving images Alt-tags to improve your site’s search-ability

http://t.co/VXEgTzc

Design for newbies