Categoría: Diseño

Probando sitios responsivos desde Chrome

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… Continuar Leyendo

Tags: , , , - Continuar Leyendo

Cómo crear gráficos increíbles con la Triangulación de Delaunay

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: 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…. Continuar Leyendo

Tags: , , - Continuar Leyendo

Creando el botón perfecto con CSS

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… Continuar Leyendo

Tags: , , - Continuar Leyendo

Visualiza como se verían tus Paginas o Aplicaciones en dispositivos reales

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… Continuar Leyendo

Tags: , , , - Continuar Leyendo

POP: App para crear prototipos hechos en papel

Una de las etapas que mas me gustan a la hora de arrancar un nuevo proyecto es la de la creación de Wireframes, Mockups y prototipos. Para mi, definen en gran medida como funcionara  nuestro sitio web o aplicación. Como crear un Mockup o Wireframe sera decisión del responsable de dicha tarea. Hay quienes solo requieren un papel y lápiz otros prefieren un software. Para los que aman los dos mundos POP les encantara. POP es una aplicación disponible en la Appstore que aprovecha lo mejor de los dos mundos en la creación de Wireframes y… Continuar Leyendo

Tags: , , , - Continuar Leyendo

Interface Sketch: Plantillas para crear Mockups de forma rápida

El tema de los Mockups es algo que tocado muchas veces en este blog. Una de las ultimas entradas con respecto a este tema fue la recomendación de Moqups, el cual es servicio web que nos permite crear mockups fácilmente. Hay mucha gente que prefiere el papel en lugar de algún software para realizar este tipo de elementos. Para esa gente existe Interface Sketch. Interface Sketch no es más que un conjunto de plantillas de los dispositivos más utilizados en la actualidad: iPhone, iPad, Android, Windows Phone, entre otros. Cada una de las plantillas viene… Continuar Leyendo

Tags: , , , - Continuar Leyendo