Archivos de la categoría Diseño

Como podría ser el nuevo Dashboard de WordPress

Matt Thomas y el equipo de UI están trabajando con esta nueva infertaz

Diseño del dashboard para la siguiente versión de WordPress 3.6
Nuevo UI interface

Si quieres probar como va esta nueva interfaz puedes usar este plugin

Aunque esta propuesta por parte de DevPress personalmente me guta mas:

Propuesta de DevPress par el WordPress dashboard
WordPress Dashboard by DevPress

Y si eres miemtro de DevPress puedes probar su plugin

La fuerza de la gestión mobile cada vez se nota mas en lo que a interfaces de gestión se refiere.

Si pruebas alguno de estos plugins no olvides dejarnos un comentario 🙂

Presentaciones : WPmallorca Meetup en Palma Activa

El día de ayer celebramos una meetup fantástica, lleno absoluto, gracias a todos por asistir 🙂
Y como lo prometido es deuda, aquí tenéis las presentaciones de las charlas de ayer.

De la nube a la Tierra. por @lonchbox

Gráfica. De la nube a la tierra
Ilustración que representa un proceso para la creación de un proyecto web

 

 

Responsive Design. por lonchbox.com y monok.es

Sobre los frameworks para desarrollo responsive:
http://twitter.github.io/bootstrap/
http://foundation.zurb.com/

 

 

WordPress SEO. por @coterillo

 

 

WooCommerce. por @Kamalyon

 

Déjanos un comentario o sugerencia para la próxima meetup, cualquier idea o propuesta es bien recibida.
También queremos agradecer a @PalmaActiva por el apoyo.

 

Hasta la próxima!

Iconmoon.io App

En un post anterior hablamos sobre los Font Icons, que tiene una gran ventaja en comparación de los íconos en formato imagen.

Pero, nos compensa descargar una fuente de íconos que por un lado pesa lo suyo y que por otro trae una gran cantidad de íconos que no llegaremos a usar en su totalidad.
Muchas veces utilizas solo relacionados a las redes sociales mas utilizadas.

Para evitar esa sobrecarga de peso y opciones tenemos IcoMoon.io y su App, que además de permitirnos crear nuestros propios íconos también nos permite filtrar los que queremos usar, crear los archivos de fuentes necesarios y descargarlos en un archivo .zip que nos ofrece una demo y un style.css con el ejemplo de como integrar la fuente en nuestro proyecto.

Y que mejor que unas capturas 🙂

El pase de diapositivas requiere JavaScript.

Aspectos a tener en cuenta en un proyecto web responsive

Vamos a analizar en que pensar cuando queremos hacer una web responsive como dios manda.

Por supuesto en el Diseño. A la hora de pensar en el diseño debemos tener en cuenta que debe poder adaptarse a los diferentes dipositivos como móviles, tablets, etc.. en algunos casos encontramos frameworks en los que primero se diseña la versión móvil, luego se va a la versión tablet y es al final cuando diseñamos la versión desktop.

Pero claro, luego están los diferentes formatos de pantalla a tener en cuenta, con lo que que debemos saber que podríamos mostrar vídeos o fotografías de mayor tamaño a mayor tamaño de pantalla, o ajustar un diseño específico para laptops.

Y que pasa con los SO?
Podemos mostrar contenido sólo para iOS o sólo para android o Windows Phone  sabiendo que los “selects” funcionan de manera diferente en cada caso y teniendo en cuenta que algunos efectos que van bien en desktop como los “mouseover”,”rollovers” o “dropdowns” en “mobile” no van bien.

Y los iconos o gráficos?
Pues éstos se tienen que hacer para cada dispositivo, porque un icon para iphone 3G no tiene el mismo tamaño y resolución que un icon para “iphone retina” o “ipad retina”, incluso ahora que hay macbook retina hay que hacer el ícono adaptado a su tamaño. Además todos los íconos deben estar en un sprite para que la web cargue una sola imagen con todos los elementos. Este sprite se va mejorando y editando mientras se maqueta.

Por otro lado, es una buena opción es usar fonticons, lo que permite controlar los íconos como si fuesen fuentes tipográficas, controlando así su tamaño, color o permitiendo algún efecto CSS3 o de animación de forma mas fácil. Aunque esto no remplaza el usar íconos de imágenes para casos donde no exista una fonticon aplicable. Algo que por ejemplo se debería preparar para diferentes resoluciones de pantalla sería el logotipo de tu página o algún simbolo especialmente diseñado.

OJO: Esto no se aplicaría a las fotos que se suban al sistema, es decir al repositorio de Media del mismo WP, sólo a las fotos que se carguen desde el CSS y no desde el CMS.

Debemos también saber que hay dos tipos de slider, fluidos y responsive.

  • En el fluido el alto del slider se ajusta según el ancho de la imagen que varía según el ancho de la pantalla del dispositivo. Ej: Orbit de foundation.
  • En el responsive el alto no varía y se ve mas o menos imagen según el ancho de la pantalla. Ej: Ver spacebox.

 

Importante la tipografía. Aquí entramos en un aspecto complejo ya que no sólo hay que controlar el tamaño de las fuentes, sino decidir el tamaño adecuado según el tamaño de monitor. Teniendo en cuenta que la distancia que tiene la pantalla de un portátil a los ojos del usuario no es la misma que la distancia que hay con la pantalla de un móvil, una tablet o de un monitor en sus diferentes tamaños, sin hablar ya de una SmartTV.

Por otro lado y como una buena opción podemos usar webfonts, las cuales se pueden cargar desde servicios de terceros o desde el mismo CSS como archivos de fuentes usando @font-face.  

Elegir un Framework con el que te sientas cómodo Debemos intentar encontrar un framework que nos aporte un entorno agradable a fin de usarlo también en futuros proyectos los que nos facilitará bastante la vida. Una vez que nos hemos familiarizado con uno en concreto podemos evolucionar con él y usarlo de la forma mas efectiva.

Yo cada vez me decanto mas por foundation, para íconos Font-Awasome, jQuery, Less, Sass y algún que otro minified (reductores de peso de archivos).

Usar foundation no nos limita a fijar el ancho de la web a 960px ni a sólo 12 columnas con un espaciado de 30px cada una, podemos definir nuestro grid y crearlo. Ej: 18 col, 10px gutter, fluid + fix.

Foundation Icons Fonts - ZURB Playground - ZURB.com

Nunca olvidemos el Contenido & SEO Esencialmente todo el contenido será gestionable, TODO, aunque luego al cliente le demos acceso a unas partes y otras no. Podemos crear todo tipo de campos y funcionalidades, pero hay que definir bien que creamos y como funcionará.

El análisis SEO del contenido se debe aplicar en el Theme, y es necesario que el diseño indique que tipo de tag usa, H1, H2, a, ul, ol, etc. Necesitaríamos el informe de análisis SEO para aplicar las keywords también en el código si así lo indica el analista.

Sin olvidar los PSDs Un psd bien organizado ahorra mucho tiempo.

Enlaces:

Font Icons y deja de usar Gif icons.

Desde hace poco la tendencia para usar íconos en un diseño web cambió al uso de fuentes, la ventaja principal al no usar GIFs es poder escalar los íconos usando el atributo Font-size dentro del CSS. El “icono” que en realidad es una Fuente se carga desde el atributo :before o :after y como content: “”; , lo que permite insertar un objeto dentro de un tag html sin necesidad de ponerlo directamente en el html. De esta forma al ser una fuete puedes cambiar el color, añadir efecto CSS3 sin necesidad de crear una nueva imagen.

 

Genericons

Son los íconos creados por el Theme Team de Automattic y son usados actualmente en el nuevo Theme TwentyThirteen.

 

FontAwsome

Está basado en Less y tiene una variedad de iconos muy amplia, originalmente pensado para trabajar con el framework BootStrap.

Font Awesome, the iconic font designed for use with Twitter Bootstrap

 

Foundation Icons

Obra de los creadores del framework Foundation Zurb (Sass + Compass). Todavía con pocos íconos.

Foundation Icons Fonts - ZURB Playground - ZURB.com

 

Symbolset (Premium)

Symbolset

Una aplicación diferente, de la mano de oak.is tenemos Symbolset, una aplicación semántica, donde la palabra que usemos cambiará por un ícono. Puedes comprar las fuentes según la necesidad, además de estar bien diseñados su calidad es impresionante.

 

Fontello (generador)

Fontello - icon fonts generator

No lo he probado aún, aunque la idea de poder generar tus propios font icons usando esta webtool es mas que interesante. ¿Alguien se anima a compartir su experiencia con esta webtool?