METODOLOGÍA (7)


Lettering acuoso de la mano de Seb Lester

Seb Lester, es uno de los calígrafos y letristas más populares de la actualidad gracias a Instagram donde acumula mas de 1.1 millones de seguidores. A través de esta plataforma ha logrado mostrar sus diferentes proyectos personales al mundo que van desde recrear famosos logotipos con una pluma paralela, hacer lettering en el iPad con el Apple Pencil o crear intrincadas mandalas con la app iOrnament.



Recientemente, el diseñador inglés se puso a hacer diferentes experimentos con agua al reemplazar la tinta de algunos estilógrafos por agua para después aplicarle algunas gotas de acuarela o tinta china, los resultados son dignos de admiración.




Las 10 tendencias para el diseño web en 2015

Ya iniciamos un año nuevo y con ello todas las industrias se preparan para poner tendencias en cualquier ámbito posible de nuestras vidas. En el diseño por suerte las tendencias surgen gracias a las mejores prácticas que van saliendo y que con el tiempo se van haciendo populares entre todos los diseñadores.
A continuación les presento 10 tendencias para el diseño web en 2015. Tendencias que nos muestran que ya llegamos a un punto donde no vamos a crear nada nuevo, sino a utilizar lo que ya existe para crear algo mucho más eficiente y atractivo a la vista. Ya tenemos un estándar HTML5 consolidado y lo único que falta este año es seguir explotándolo y mejorando la forma en que hacemos sitios web.

1. Sitios web con mucho scroll

En un mundo donde debemos tener sitios web para diferentes tipos de dispositivos la nueva tendencia ha sido la de implementar cada vez más sitios web de una sola página. Esto facilita la administración del sitio y por supuesto que para el usuario la carga de datos disminuye.
No todos los sitios son elegibles para que sean de una sola página, pero si va en incremento el número de diseñadores que optan por esta técnica.

2. Más interacción e historia

image

Algo que pasaba anteriormente es que los sitios solo colocaban su contenido pero no había tanta coherencia entre un espacio y otro. En 2015 la tendencia es seguir haciendo los sitios web más interactivos y menos estáticos, pero también proporcionar al usuario una historia que contar. Son muchos los sitios web que conforme vas viendo el sitio web vas descubriendo partes de lo que hace u ofrece una empresa u organización. Al final de tu recorrido ya sabes qué hace la empresa, que beneficios puedes tener si usas su servicio y que puedes llegar a perder si no lo haces. Eso es una historia y es la forma más convincente de vender y tener entretenidos a los usuarios de un sitio web.

3. La ausencia de grandes imágenes de fondo

image

Son muchas páginas que todavía tienen imágenes de fondo como portada principal, pero dado que nos estamos moviendo a una web mucho más ligera la intención es también eliminar esa parte de nuestra forma de trabajo. La tendencia dicta que para el caso de imágenes siempre va a ser mejor reemplazarla por colores sólidos neutrales con grandes tipografías, y dejar de lado las imágenes que no sean logos o imágenes representativas que no puedan ser obviadas por ningún motivo.

4. Remover elementos innecesarios de nuestros sitios

image

Hoy en día los sitios son muy pesados y es porque aunque ya no usamos tantas imágenes si tenemos elementos que no son tan útiles. Tenemos ejemplos por ejemplo de íconos para compartir en redes sociales que nadie usa, un exceso de menús, exceso de publicidad, etc. Todos estos elementos que no aportan tanto valor a nuestro sitio web causarán más impacto si los eliminamos y dejamos a la vista del usuario solo los elementos que realmente ocupa.
Ahora, ¿Qué elementos realmente son útiles? los que le ayuden a buscar contenido, que le ayuden a ver categorías y que le permitan compartir solo en las redes sociales que realmente usa.

5. Ancho fijo y centrado

image

Con el boom de las mega pantallas y las resoluciones llegando a los 4k tener un sitio web que cubra toda la página no es mantenible este 2015. Con tantas pantallas con diferentes resoluciones la tendencia marca a tener un sitio web donde el contenido esté concentrado en un contenedor que tenga un ancho fijo y que se encuentre centrado. Esto permite que para dispositivos donde la resolución es mucho menor sea más fácil adaptar el sitio reduciendo ancho porque de otra forma sería un caos tener un width: 100% para manejar.

6. Mejores tipografías

image

Personalmente creo que ya estamos en una etapa donde hay muchos sitios que ofrecen grandes tipografías para poder usar en nuestros sitios web gratis. Todavía tenemos la opción de usar CSS3 para instalar en nuestro servidor la tipografía que queremos, pero es todavía más recomendable usar servicios como Google Fonts para instalar una fuente y olvidarte de las compatibilidades entre navegadores y sistemas operativos.

7. Diseños estilo menú

image

Hoy en día el estándar es tener capas totalmente horizontales para mostrar contenido. Este 2015 pinta para tener varias capas agrupadas en línea, como si fueran elementos de menús. Esto facilita hacer más responsivo el diseño web porque sin necesidad de hacer nada estos bloques de contenido se van a ir acomodando a medida que el contenido vaya haciéndose más estrecho. Al final supone tiempo ganado y ahorrado.

8. Menús ocultos

image
Podremos tener pantallas con resoluciones muy grandes, pero para dispositivos como tabletas y smartphones las pantallas siguen siendo pequeñas, por lo que es importante ahorrar a como de lugar espacio y eso se ha logrado con los menús ocultos. Así como los menús de las aplicaciones pusieron de moda el ícono famoso de la hamburguesa también esa tendencia se ha ido mudando a la parte web, y aunque personalmente creo que aumenta considerablemente el número de clics que podríamos usar para un menú (clic para abrir y clic para seleccionar + clic para cualquier submenú) es muy útil si queremos ahorrar ese espacio.

9. Tipografías grandes

image

No solo tenemos mejores diseños de tipografías, también para que destaquen dichos diseños se necesita aumentarle el tamaño de la fuente a tal manera que tengan que ser lo bastante grandes para que cada línea y curva se vea realmente bien. Lo bueno de tener fuentes muy grandes es que no son recursos demás o algo extra de recursos o peso en la página, lo que habla de una gran ventaja.

10. Mejorar el rendimiento y velocidad

A nivel general el internet a nivel mundial no ha mejorado de un año a otro, sin embargo el contenido que consumimos va en incremento, lo que quiere decir que debemos encontrar mejores formas de hacer más eficiente un sitio web. Este año marca la tendencia de mejorar el rendimiento y velocidad de nuestros sitios web con menos código, más reutilización, menos peticiones http, menos imágenes, optimización de imágenes y un sin fin de cosas que podemos hacer para lograrlo. A lo largo del año veremos algunas de ellas para hacer nuestro sitio web optimizado para las conexiones más lentas posibles.




Las 7 leyes fundamentales de la experiencia de usuario en interfaces gráficas

Las 7 leyes fundamentales de la experiencia de usuario en interfaces gráficasLa experiencia de usuario no se trata de saber dominar ninguna herramienta, o saber lenguajes de programación, es un área mucho más conceptual que está presente aunque en teoría no pueda verse. La usabilidad que también forma parte de la UX ayuda a que los elementos de una interfaz de usuario sea lo más concreta y usada por el usuario sin que le suponga problema el manipularla.
Por eso, les traigo lo que son para mi las 7 leyes fundamentales de la experiencia de usuario en interfaces gráficas. Leyes que a mi gusto todos deberían de cumplir si se llegan a encontrar con un proyecto donde el usuario tiene que manejar acciones y elementos de forma constante, además de sólo bajar el scroll y dar uno o dos clics.

1. Ley de claridad

image
El usuario evitará los elementos de interfaz que no tengan un significado claro. El ejemplo es la imagen que aparece, donde Gmail tiene como ícono para mostrar todas sus aplicaciones unos simples cuadrados, cuando en realidad debería tener un ícono mucho más visual que le diga al usuario que ahí puede ver sus aplicaciones.

2. Ley de la acción principal

image

El usuario se sentirá más cómodo cuando saben cual es la acción principal que deben hacer. En otras palabras, es hacer que el usuario sepa lo que va a hacer sin que alguien le diga. Por ejemplo el sitio de Twitter en su versión anterior, si un usuario llega no sabrá qué hacer, ya que la acción principal es crear un nuevo tweet pero no hay una opción sumamente visible que le diga al usuario eso. Hay dos opciones para escribir, pero estoy seguro que nadie las habrá notado al ver la imagen.

3. Ley del contexto

image

El usuario espera ver elementos en la interfaz de usuario cercanos al objeto que quiere controlar. Un ejemplo muy bueno de la práctica de esta ley es LinkedIn, la cual te permite editar con un ícono de lapiz el elemento que quieras cambiar. También está un botón de una cámara en señal que puedes cambiar tu imagen de perfil, es decir, hay controles cerca de los elementos que se pueden editar.

4. Ley de los defaults

Los usuarios raramente cambiarán las configuraciones por defecto. La ley de los defaults dice que un usuario muy rara vez cambiará o personalizará todos los elementos que tiene a su alrededor, por lo que es importante que nosotros creemos configuraciones por defecto que sean lo más útiles y prácticas y poco deseables de cambiar.

5. Ley de la acción guiada

image

El usuario probablemente hará algo si se le es pedido que lo haga. A veces necesitan un pequeño empujoncito nuestros usuarios para que realicen un poco de actividades secundarias en nuestro producto o servicio, y si le mostramos sorpresivamente algunas recomendaciones para hacer es muy probable que las haga. Otro ejemplo claro es LinkedIn al pedir calificar o añadir nuevas habilidades a los contactos recién añadidas.

6. La ley de la retroalimentación

image

El usuario se sentirá más confiado si se le provee de una retroalimentación clara y constante. Es un efecto humano el esperar una respuesta a una acción realizada, y en nuestro servicio o producto es lo mismo. Si le damos una retroalimentación a nuestros usuarios de que su acción provocó algo bueno, o malo, lo más probable es que se sientan más confiados en el uso del sistema, lo que les permitirá un mejor uso del mismo.

7. La ley de la facilidad

image

El usuario se inclinará a hacer acciones complejas si éstas son divididas en pasos más pequeños. La imagen da cuenta del principio, ya que mientras a la izquierda tenemos un montón de campos que llenar y poca información o ayuda para saber si está bien llenada, a la derecha tenemos pocos campos con una mejor explicación de lo que tenemos que escribir en cada campo. Esto causa un efecto mucho más agradable a la vista y en general de usabilidad porque el usuario no quiere tener muchas cosas que hacer en una sola pantalla, y de preferencia en muchas páginas tampoco, pero dividir un todo en partes pequeñas es una muy buena forma de acomodar contenido, y más cuando el usuario tiene que intervenir.

¿Son consejos o leyes universales?

A mi parecer no podría llamarlos consejos, porque el hecho de no seguirlos en ningún tipo de proyecto se está arriesgando toda la interactividad y hará que el usuario pierda todo el interés en lo que está usando. Así que sí, son leyes necesarias que deben existir cada vez que hagan un proyecto en donde ustedes tengan que diseñar una interfaz de usuario agradable a todas las personas.

Vía stumbleupon




5 consejos para aprenderse todas las propiedades CSS de forma muy sencilla

Mucha gente odia CSS porque son muchos estilos que aprenderse, y además cada propiedad puede tener diferentes valores, y cada valor puede ser diferente en muchos sentidos al funcionamiento ya en el sitio. La verdad es que a diferencia de HTML, donde sólo usamos una minúscula cantidad de etiquetas del total que nos ofrece, en CSS podemos llegar a ocupar la mayoría de las propiedades CSS si queremos que nuestro sitio esté estilizado hasta el último pixel de la pantalla.
Es por eso que les traigo 5 consejos para aprenderse las reglas y propiedades CSS sin tener que memorizarlas y tener que recurrir a un librito salvador o en todo caso a internet cada vez que no recordamos cuál es la propiedades que queremos saber.

1.  Práctica, no copies tus estilos

Mucha gente se cansa de pensar y mejor copia de los proyectos que tiene los estilos y los adapta. No es mala la práctica de hecho, pero es una práctica que debe hacerse cuando ya se domina CSS, no cuando se está aprendiendo. Si se quiere aprender de verdad a usar los estilos la única forma es practicar y practicar hasta el cansancio, ya que de esa forma el cerebro se acostumbra a ver las propiedades a tal punto que ni siquiera tendrás que pensar en qué usar para estilizar tu sitio.

2. Piensa en lo que quieres conseguir

Mucha gente que empieza no sabe ni lo que quiere diseñar con CSS pero ya está buscando la propiedad para hacerlo. Lo primero es pensar muy bien como se quiere el sitio, para después partir con base en esa idea. Por ejemplo, si lo que quieres es cambiar el color de fondo, lo más seguro es que uses la propiedad background-color.
Los nombres de las propiedades son en inglés, por lo que lo más seguro es que si queremos aumentar el margen de un elemento lo que necesitemos es usar la propiedad “margin”, así de sencillo. Hay propiedades como la de “clip” o “display” o “position” que son poco directas en el uso, pero el resto si lo es, por lo que tampoco es difícil en aprenderse las reglas.

3. No uses herramientas visuales, mejor solo código

Otro gran problema es que la gente se acostumbra a usar Dreamweaver o cualquier otra herramienta que ayuda a preparar estilos sin tener que escribir el código. Es una práctica que solo recomendaría cuando ya las dominas y no dispones de mucho tiempo, quieres diseñar muy rápido pues. La gente que no sabe y aprende a usar estas herramientas aprender a usarlas, mas no aprende CSS, y luego con el problema de los sufijos pues hace que el desarrollador o diseñador se confunda mucho más.

4. Trata de imitar el diseño de otros sitios

No hay mejor forma de aprender que imitando el diseño de otros sitios. Yo aprendí así, viendo sitios con diseños muy bonitos o elementos diseñados muy atractivamente, y como yo quería lograr un efecto similar me propuse imitar ese resultado. No es copiar literalmente el CSS de ese elemento, es imitarlo sin tener que ver sus propiedades, porque un elemento o diseño puede verse igual con 20 propiedades o con 5, todo depende de cuanto detalle puedas encontrar en el. Todo esto hará que mejores en el uso de las propiedades, y por ende que las aprendas.

5. Obtén un patrón para trabajar

La gente que no sabe programar tiende a programar de varias formas cada vez que lo hace, pues no encuentra una forma de programar que se adecue a sus necesidades. En CSS es lo mismo, la gente que no sabe diseñar con CSS tiende a usar diferentes estilos para las mismas partes de un sitio web. No es malo pero si para hacer un fondo usas diferentes propiedades lo más probable es que nunca aprendas correctamente a diseñar un fondo para un sitio.
No es que todos los sitios sean iguales, pero con la práctica aprendes que ciertas reglas CSS son para partes específicas de un sitio, como por ejemplo el box-sizing para la etiqueta body y html. Todo esto se aprende leyendo, viendo el formato de expertos, pero al final teniendo un estándar de trabajo, donde tu sabes y aplicar estilos de acuerdo a las etiquetas y secciones de tu sitio.




Libro para ayudar a los niños a entender cómo funciona internet.

Vivimos en una época donde los niños además de usar la tecnología deberían entender cómo funciona. Es fácil abrir una cuenta de Facebook, escuchar música en Spotify o leer una revista interactiva para niños, pero son pocos los que conocen lo que ocurre detrás de estas aplicaciones para que todo funcione mágicamente.

Por tal motivo una fundación suiza consciente de esta necesidad lanzó un libro para los niños para ayudarlos a entender cómo funciona internet. Es un libro bastante entendible a nivel técnico para darles un acercamiento a la infraestructura que tienen las empresas para poder dar servicio a millones de usuarios que se conectan. Lo más interesante es que aunque está enfocado en que los más pequeños entiendan sobre estos temas también los adultos que no saben absolutamente nada de tecnología pueden leerlo.

 Descargar




Las tendencias en Diseño Web para 2015


Las tendencias en Diseño Web para 2015
A pesar de que el 2014 nos está enseñando mucho en cuanto a diseño web se refiere, creemos que no hay mejor momento para hablar sobre qué nos deparará el 2015.
Con este post me atrevo a augurar cuáles serán las tendencias en el diseño web para el año que viene.
Cada vez más avanzamos hacia diseños menos complicados y más sofisticados.
Así que si estás pensando en cambiar el diseño de tu web aquí te muestro algunas de las características que más se van a llevar en los próximos meses.
Imágenes grandes
Como dice el refrán, una imagen vale más que mil palabras y es por eso que la tendencia será a sustituir contenido por grandes imágenes. Las imágenes a toda pantalla poseen gran potencia a la hora de comunicar algo y permiten mostrar con todo lujo de detalles lo que en la web se está ofreciendo. Podríamos decir que este 2015 el contenido visual va a ser el rey. 
Aquí te dejo un ejemplo de web que ya están aplicando este tipo de diseño:
Vídeos a toda pantalla
Ya está comenzando a utilizarse este recurso y va a ser uno de los más vistos el año que viene: El de utilizar un vídeo a toda pantalla en la Home de la web. Vídeos no demasiado largos y reproducidos en bucle, que hacen una breve sinopsis sobre el tema del que trata la web.
Aquí te dejo algunas de las webs que están comenzando a utilizar esta técnica:
Responsive design o el adiós a las webs para móviles 
Con la llegada del Responsive Design las versiones web para móviles están comenzando a desaparecer. Para 2015 este tipo de webs deberían conformar una minoría notable y quien no tenga una web adaptable estará fuera.
Menús mobile desde la versión escritorio
Sí has leído bien. Los menús, de entre todos los elementos de la web puede considerarse uno de los más estandar y que menos cambios ha sufrido a lo largo del tiempo. Al ser un elemento fundamental en la estructura de la web, que sitúa y guía al usuario en todo el recorrido por la web, no podía sufrir demasiadas modificaciones ya que, si no, el usuario podía ser despistado y por lo tanto, perder su cometido.
Sin embargo, como el aumento de tráfico a las webs desde dispositivos móviles continúa progresivamente en aumento, la forma como mostramos el menú o nav de las páginas webs va a cambiar. De hecho ya está cambiando en muchas webs.
El usuario ya ha interiorizado que tres rayitas en la parte superior de la pantalla significa que cuando pinchas ahí las diferentes secciones de la web van a aparecer desplegadas. Y aprovechando esta situación y la tendencia a simplificar el diseño, cada vez será más común ver este tipo de menú en las webs.
Aquí te dejo algunas webs en las que puedes ver cómo utilizan ya este recurso:
Iconos
La tendencia a simplificar el diseño, como ya he comentado antes, traerá como consecuencia la utilización de la iconografía para sintetizar la información. 
La ventaja de los iconos no es solo estética sino que además, al poder insertar estos iconos como si se tratase de una tipografía más en tu web, esto te permite escalarlos como tu quieras sin perder resolución. Además de que ayudan a que tu web pese menos y el tiempo de carga sea menor.
Menos Click y más Scroll
Los sitios voluminosos que fragmentan la historia de su marca a lo largo de decenas de páginas ya han hecho historia. Los usuarios ahora esperan ser capaces de desplazarse a través de todo lo que se ofrece en una sola página. A pesar de que los sitios con varias páginas son más amigables para el SEO, los diseños que ofrecen contenido en forma de una única página se están ganando a los usuarios de smartphones y tablets. 
Desorden ordenado
Una de las tendencias más marcadas para este 2015 va a ser el de la apariencia de desorden. Los elementos de la web se muestran de manera aparentemente caótica aunque en el fondo existe un orden y un concepto detrás. Imágenes de diferentes tamaños, que se disponen por toda la ventana del navegador de forma aleatoria. Textos que pisan las imágenes y que se desbordan de las mismas. Una tendencia aparentemente caótica pero que, sin embargo, dota de personalidad y de originalidad a tu web.
Algunos ejemplos: