Si te encuentras diseñando aplicaciones para iOS o Android, una de las cosas que sueles hacer es ver como se ven los diseños en los que estas trabajando: ¿el color de tu icono se ve como quieres en el dispositivo? ¿Las texturas se ven en alta resolución?. Tareas como estas generalmente conllevan guardar tu imagen, importarla al teléfono y así observar como se ve tu aplicación o interfaz en tu dispositivo.

Skala Preview nos ayudara a agilizar este proceso, Skala esta formado por dos aplicaciones Skala Preview(aplicación en la mac) y Skala View(aplicación de el dispositivo móvil .

Su funcionamiento es sencillo, tenemos que abrir las dos aplicaciones y estar en la misma red. Una vez cumplidos estos requisitos solo bastara con arrastrar la imagen al programa Skala Preview y veremos como esta imagen aparecerá en el dispositivo. Skala Preview también permite conectarse con Photoshop, de esta manera puedes ver en tiempo real lo que estas trabajando en Photoshop en el dispositivo. Hasta hace un tiempo Skala era de pago, pero ahora es totalmente gratis. Sin duda una herramienta que no puedes dejar fuera de tus herramientas de trabajo.

Descarga Skala

Cuando nos encontramos desarrollando un sitio web responsivo (adaptativo – adaptable) una de las acciones más comunes que realizamos es ir probando como se ve nuestro sitio en diferentes resoluciones. Lo más común es ir redimensionando nuestro navegador para observar dichos cambios, lo “malo” de esta tarea es la perdida de tiempo que esto puede suponer. Hay un tip que comparte James Young en su blog que puede significar un ahorro significativo de tiempo en esta tarea.

Se trata de utilizar el inspector de código que Chrome usa. Por defecto el inspector de código de Chrome, se muestra en la parte inferior, pero también nos permite cambiar esa posición por defecto y cargar el Inspector de código de lado derecho del navegador, a partir de ahí podemos redimensionar el inspector, esto provocara que la resolución del sitio web en el que estemos trabajando varíe, pudiendo probar como se ve nuestro sitio en las diferentes resoluciones. Es un tip sencillo pero que seguramente agilizara tu proceso de trabajo.

Pinche aquí para ver el vídeo

En el ultimo sitio en el que he estado trabajando, decidí cambiar un poco los elementos visuales que he venido utilizando últimamente. Llamo mucho mi atención los elementos visuales que se conformaban a raíz de polígonos, seguramente este tipo de elementos visuales vienen inspirados del Arte Cubista. Una de las técnicas que más llamaron mi atención es aquella que se representaba por medio de triángulos, por ejemplo:

Por Antony: Dribble

Después de investigar un poco descubro que esta técnica esta basada en un algoritmo matemático llamado Triangulación de Delaunay, la cual es muy usado en los gráficos 3D. Investigando un poco más descubrí que varios desarrolladores y diseñadores han trabajando en ofrecer una manera sencilla de trabajar con la Triangulación de Delaunay, una de las herramientas más populares es la creada por Jonathan Puckey: Delaunay Raster; esta herramienta fue implementada en Illustrator lo cual ayudo a que se vuelva popular, lamentablemente el autor ya no pudo seguir dándole soporte en la versión de CS6.

En mi búsqueda por encontrar la herramienta que me ayudara a probar esta técnica me encontré con Poly una app para el iPad, Poly te permite usar la técnica de Delaunay, pero carece de un zoom para las partes más complicadas de una imagen, otra alternativa fue Tres, una aplicación con las mismas características que Poly, pero con la opción de zoom y mejor aun gratis. El problema con ambas es que el iPad no es lo más cómodo para obtener los mejores resultados y por otro lado solo exportan una imagen como resultado final, lo cual no ayuda a la hora de querer pulir el resultado en otras herramientas como Illustrator y Photoshop.

Siguiendo con la búsqueda de la herramienta “perfecta” me encontré con una pequeñita aplicación web creada por Igor Borisenko, la cual te permite subir tu imagen e ir marcando los puntos para crear tu imagen con la Triangulación Delaunay, al estar usando una computadora tenemos un mejor control en la figura que estamos trabajando, lo mejor de la herramienta es que te genera un archivo svg, el cual podemos usar en una aplicación como Illustrator, de esta manera podemos corregir posibles colores y alinear uno que otro triángulo, después  podemos exportar a Photoshop para agregar detalles y pulir más el resultado.

Pinche aquí para ver el vídeo

Con un poco de dedicación, un toque de illustrator, mas una pizca de Photoshop se pueden obtener resultados interesantes. Este es el mio, inspirado en el trabajo de Delo Studio.

Descargar Script de Igor Borisenko

Los términos y condiciones de un sitio o servicio web son ese tipo de cosas que uno no quiere leer, en la mayoría de los casos se trata de largos textos llenos de términos jurídicos que pocas veces leemos y entendemos. Sin embargo, siempre será importante saber que hacen los servicios o paginas web con nuestros datos.

Hace unos días en twitter Lea Verou una reconocida chica en el mundo de diseño y desarrollo web publico un excelente ejemplo de términos y condiciones más amigables para el usuario final. El sitio en cuestión era Codepen un servicio creado por otro actor muy importante en la web Chris Coyier. Básicamente se trata de mostrar los Términos y Condiciones en un lenguaje mucho más sencillo de interpretar para los usuarios.

Great idea by @chriscoyier: Terms of Service, translated from legalese to plain English, paragraph by paragraph! blog.codepen.io/terms-of-servi…

— Lea Verou (@LeaVerou) 26 de febrero de 2013

El resultado final resulta ser una gran idea que resume todos esos términos legales difíciles de entender en palabras más claras para el usuario. Con esto no tenemos pretexto para leer esos aburridos y largos términos y condiciones.

Otro ejemplo que sigue esta linea lo podemos ver en : 500px

Las extensiones en los navegadores web son herramientas perfectas para añadir nuevos funcionamientos a un navegador. Google Chrome cuenta quizás con las mejores extensiones. Chime es una de ellas. Chime es una extensión que nos permite tener un centro de notificaciones en el navegador, los diferentes servicios que podemos configurar para que trabajen con Chime son: Gmail, Facebook, Twitter, Reddit, entre otras.

Como es costumbre al momento de instalar una extensión en Chrome esta nos generara un icono de acceso rápido, el cual nos permitirá ver las nuevas notificaciones de los servicios que hemos añadido.

El diseño de la extensión es muy bueno, separando por colores cada uno de los servicios que tenemos configurado, con un click en la notificación esta nos manda al servicio en cuestión, su configuración es muy básica: solo permite añadir o eliminar un servicio, si usas muchos servicios en la web y deseas tener un centro de notificaciones prolijo en tu navegador Chime es una opción que deberías de probar.

Descarga: Chime para Google Chrome

Por mucho tiempo los botones en los sitios web eran hechos a base de imágenes, cuando la moda de los bordes redondeados llego a la web, se inventaron varias soluciones para lograr dicho efecto. Hoy en día, salvo algunas excepciones, usar imágenes para los botones no tiene sentido.

Hoy, quiero mostrarles algunos tips para crear un buen botón.

Usando Padding

Este es el método que solía utilizar. La técnica consiste en agregar un padding a nuestro contenedor principal de tal manera que el texto quede alineado vertical y horizontalmente. El problema con esta técnica es que no tenemos control en el tamaño final de nuestro botón. Esto sucede por la forma en que el modelo de caja funciona: width+padding+border = tamaño final de la caja.

Imaginemos que queremos crear un botón con unas dimensiones de 140px X 40px. Tomando como referencia el modelo de caja tradicional tenemos que crear un ancho de 120px y agregar un padding de 10px para lograr obtener el resultado deseado.

Como mencione en un principio el problema con esta técnica es que no tenemos un control en las dimensiones de nuestro botón, en este caso creamos un botón de 140px X 40px, el cual funciona cuando el tamaño de la fuente es el predefinido por el navegador (comúnmente 16px), ¿Qué pasa si aumentamos el tamaño de la fuente?, en el siguiente ejemplo vemos lo que sucede.

Si lo que queremos es no preocuparnos por las medidas podemos usar la propiedad box-sizing:border-box; la cual básicamente viene a cambiar el modelo de caja tradicional con esta propiedad las medidas definidas se mantienen fijas y el border y padding se aplican de manera interna.

Veamos ahora como se verían nuestros botones, con esta propiedad y definiendo por defecto una medida para nuestro botón de 140px X 40px:

Si bien podemos observar que las proporciones de nuestros botones se mantienen también vemos que el tamaño del texto sigue siendo un problema.

Usando line-height

Este es el método que ahora utilizo y el que a mí entender es el que mejor funciona. Con la ayuda de la propiedad line-height podemos alinear verticalmente el texto del botón y su vez podemos jugar un poco con el tamaño de la fuente, no afectando el tamaño de nuestro botón.

Lo único que tenemos que hacer es definir un valor igual al tamaño que deseamos de alto en nuestro botón, por ejemplo, si nuestro botón es de un alto de 40px entonces el valor de line-height será: 40px. Como dato mencionar que en esta técnica podemos omitir el alto de nuestro botón pero para fines prácticos me gusta definir el ancho en el código CSS. A continuación podemos ver nuestro botones con diferentes tamaños de fuente, los cuales mantienen las medidas perfectas, logrando un buen resultado.

Como se observa en el ejemplo el resultado es satisfactorio. Ahora la pregunta es: ¿Utilizan otra técnica para realizar sus botones?

El modelo de negocio en una Startup es una de las etapas más difíciles, no tener claro este aspecto a la larga puede traer problemas, el ejemplo más reciente es el caso de Instagram el cual quiso cambiar sus políticas de uso para poder vender tus imágenes, las nuevas políticas no fueron bien recibidas por la comunidad, obligando a Instagram a dar un paso atrás.

¿Como hacen dinero algunas Startups? La gente de Seer interactive ha hecho un sitio sencillo en el cual muestra de manera escueta cual es el modelo de algunas de las empresas Tecnológicas y de internet más populares. Puedes consultar la pagina en el siguiente enlace.

Entre los modelos de negocio más comunes en esta lista podemos observar: Servicios Freemium y Publicidad. Si estas pensando en lanzar una Startup es importante definir cual es el modelo de negocio que se adecue a tu Startup, en lo personal el modelo Freemium es uno de mis favoritos.

A finales de mi vida universitaria comencé a conocer el mundo de los emprendedores y las Startups. A partir de ese momento tener una Startup se ha convertido en un sueño que deseo alcanzar. Hoy es el comienzo de ese sueño, por suerte en este sueño no estoy solo, me acompaña un gran amigo de la Universidad y un ninja programador: Alberto Pat (@apmsuperior en Twitter). Juntos queremos contribuir nuestro granito de arena a esta comunidad de Startups que están naciendo en nuestro Pais: México.

Findiner

En la Universidad Alberto y yo, tuvimos la oportunidad de trabajar juntos en nuestros primeros trabajos de manera profesional, no tarde en darme cuenta que teníamos perfiles que se complementaban, en esos años platicábamos sobre la posibilidad de poder crear algo juntos, varios años después aquí estamos queriendo crear “algo”, hoy ese “algo” tiene por nombre Findiner. La idea detrás de Findiner es sencilla: Me gusta conocer nuevos restaurantes. Vivo en Playa Del Carmen, Quintana Roo. Esta ciudad es una de las ciudad más importantes del turismo en nuestro país, por ende la oferta de restaurantes es alta, los hay de todos los tipos de cocinas y precios. Actualmente en la ciudad no existe algún medio digital lo suficientemente bueno que le permita a uno conocer a que nuevos y mejores lugares ir a comer. Tratando de resolver esta necesidad es como nace Findiner.

Findiner será una plataforma con dos objetivos principales, por un lado ser  una plataforma que te ayude a descubrir y compartir los mejores restaurantes de tu ciudad. Por otro lado le permitirá a los dueños de restaurantes poder ofrecer sus servicios y tener una presencia más fuerte en su ciudad. Con estos dos objetivos Findiner busca atacar un mercado que creemos aun tiene muchas áreas de oportunidad, tanto de manera técnica como de manera operativa.

Por supuesto que el objetivo final no es satisfacer una necesidad personal y local, sino una necesidad que día con día los visitantes de esta ciudad como de muchas otras tienen, es por ello que nuestro objetivo final es llegar a todas las ciudades que deseen utilizar el servicio.

Quiero desayunar!! a donde recomiendan en playa? rico barato y k lugar lúdico p nenes..quiero todo ja @vivoenplaya @twittplaya @yoamoplaya

— Karina (@karinaalday) diciembre 30, 2012

Esperamos lanzar Findiner el primer cuarto de este año. Por el momento pueden seguir informados visitando la pagina de Findiner y seguir la cuenta oficial de twitter en @findiner, pronto más novedades al respecto.

Una imagen como la anterior es muy utilizada en portafolios o Landing Pages de algún servicio o aplicación web. Generalmente si se desea realizar este recurso tendrás que conseguir una imagen en alta resolución de el dispositivo, posteriormente hacer la “magia” en photoshop. Algo que tal vez un programador le cueste trabajo, por suerte hay gente que ayuda a resolver este problema de una manera elegante. Si entramos a la siguiente dirección , nos encontraremos una serie de imágenes de diferentes productos de Apple en diferentes tomas.

Ahora tan solo tenemos que arrastrar la imagen de nuestra web o aplicación que deseamos visualizar, teniendo como resultado final una espectacular presentación de tu producto.

Fuente: Breezi

El titulo de esta entrada es una pregunta que me he estado haciendo en los últimos meses. Actualmente mi proceso de trabajo a la hora de diseñar un nuevo sitio es: Crear los mockups, diseñar en photoshop, maquetar. La etapa de diseño en Photoshop suele demandarme algo de tiempo, pero a su vez es una etapa importante para mi, ya que  a la hora de maquetar me permite tener claro como quiero que se vea mi diseño final en el navegador. Sin embargo, con las posibilidades que nos regala CSS3 mucha gente se comienza a preguntar ¿es necesario dejar de diseñar en Photoshop y pasar a diseñar directamente en el navegador?.

Hasta hoy es un debate con pros y contras. Para ser sincero creo que la idea de diseñar directo en el navegador no es una idea muy descabellada. En los últimos trabajos que he realizado he notado que de poco sirve pasar horas detallando ese botón que atraerá a nuevos usuarios  o decorar con bordes y sombras  ese contenedor que tiene la información más valiosa de tu sitio. Si al final del día uno termina tratando de replicar ese estilo visual con CSS3, bueno eso si usas las capacidades de CSS3, de lo contrario exportar la imagen y colocarla en tu sitio será suficiente. Sin embargo, creo que tenemos que aprovechar lo que las nuevas tecnologías nos permiten.

El argumento más escuchado de por qué seguimos utilizando Photoshop para diseño web es “Diseñar en Photoshop me permite ser más creativo”, la mayoría de los que nos dedicamos al diseño web  aprendimos sobre diseño web con un software como Photoshop, así que es lógico pensar que Photoshop nos permite ser más creativos. Pero seamos sinceros cuando estas desarrollando  un proyecto mediano o grande  diseñamos lo mismo 3 o hasta 4 veces; ¿recuerdan mi proceso de trabajo? diseñar mockups, diseñar en el navegador, y maquetar lo diseñado, si a eso le sumamos la gente que también crea wireframes y prototipos, estaremos hablando de mucho tiempo invertido en diseñar lo mismo, por su puesto que cada una de esas etapas tiene un porqué en el proceso del diseño, pero creo que la etapa de diseño web en photoshop es una etapa que poco a poco puede  ir desapareciendo. Pasar de un Wireframe o Mockcup a la maquetación es quizás el proceso a seguir.

Hay varias razones por las cuales aun nos cuesta trabajo dejar de diseñar en photoshop y lanzarnos al navegador, algunas son:

• Control: Si algo me gusta de Photoshop es el control que uno puede tener. Elementos como las capas y las carpetas  nos permiten controlar las diferentes vistas y secciones del sitio que estas desarrollando, esto es algo que a la hora de diseñar en el navegador ya no será tan sencillo como lo es en Photoshop.

• Dinamismo: Las herramientas de diseño digital nos permiten cambiar formas y colores en un par de clicks, si no te gusta como se ve un elemento borras la capa, si no te convence el color de un elemento lo rellenas con un nuevo color , si no te gusta la posición de un elemento lo mueves. Alguien con habilidades en Photoshop puede realizar todas estas acciones rápidamente.

• Tiempo:  Diseñar en el navegador va más allá de aplicar tus conocimientos en diseño. Diseñar en la web implica conocer un poco de HTML y CSS, aprender las técnicas basicas de maquetación. Si no tienes las nociones básicas en estos temas, tendrás que invertir horas en aprenderlas. Finalmente si tu cliente rechaza tu propuesta el tiempo dedicado a la maquetación habrá sido en vano.

Entonces ¿diseñar o no diseñar en el navegador?, creo que la respuesta  dependerá de tus habilidades. Si conoces los elementos básicos para maquetar una web y dominas Photoshop, diseñar directo en la web puede ser una opción viable para ti, por el contrario si no tienes las nociones básicas de maquetación aventurarse a diseñar directo en el navegador puede ser una mala decisión. Aun no tengo una postura clara con respecto a este debate, pero estoy considerando diseñar directo en el navegador en el próximo proyecto que me toque trabajar, solo una vez he diseñado directo en el navegador, fue en un Startup Weekend, para los que no lo conozcan la idea es desarrollar un producto en 2 días, este fue el resultado:

Comparte tu opinión, ¿haz considerado diseñar en el navegador?