Tips (5)


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.




HTML5 ya es declarado como un estándar

  • 1 enero, 2015
  • Tips

Después de casi 6 años en que surgió la idea y concepto de la siguiente evolución de HTML fue que todo el mundo en internet empezó a prepararse para adoptar en sus sitios y aplicaciones web la tecnología de HTML5. HTML5 no solo es la siguiente versión de lo que fue HTML4, también representa un nuevo paradigma donde prácticamente cualquier cosa que quieras construir y mostrar al público es posible. Ya no hay un límite sobre lo que un sitio puede ser o puede tener, además de que la integración con cualquier tipo de dispositivo hace posible todavía más expandir este estándar hacia mucha más gente.
El World Wide Web Consortium (W3C) le ha dado luz verde al HTML5 como estándar, de tal forma que para este día cualquier navegador, sistema y aplicación que haga uso de ello puede estar seguro que los ajustes ya son multiplataforma. Para los usuarios representa que debería ver los sitios y cualquier contenido web de la misma forma en cualquier dispositivo, claro, con diferente experiencia de usuario para unos de acuerdo el medio, pero la funcionalidad debe ser la misma.

La verdad es que si no estamos involucrados en el avance de HTML5 no podríamos darnos cuenta que con HTML4 sólo teníamos acceso a sitios web estáticos y un poco de Flash. Ahora tenemos toda una gama de aplicaciones y usos que no hubieran sido posibles sin esa evolución de internet y estos estándares.




The magic of CSS, un sitio perfecto para aprender CSS de forma muy profesional

A principios de año les decía que este 2014 era un año donde ya el tener que aprender CSS no debería ser un problema. Hay miles de tutoriales donde podemos aprender HTML y CSS, tantos sitios que ofrecen clases y cursos en vivo que el poder decir que no encuentra recursos es porque no tiene ganas de aprender.
Hoy les presento un sitio más donde podemos aprender CSS pero de una forma mucho más profunda y teórica. El sitio se llama The magic of CSS, es un proyecto de Gihub el cuál trata el tema de CSS de una forma completamente diferente. En vez de enseñarnos como tal las clases y estilos que estamos acostumbrados a aprender, el sitio trata esos mismos temas desde categorías, de tal forma que lo que aprendemos no es solamente a usar las propiedades, sino la teoría de diseño detrás de ellas.

El sitio trata los temas como si fueran capítulos de un libro. Hasta ahorita hay 6 capítulos y en lo personal la forma en que enseñan a usar CSS es bastante sencilla pero muy comprensible. Por ejemplo, para los colores uno pensaría que no hay demasiado que contar, y sin embargo nos platican un poco sobre la teoría del color, su significado y los colores que corresponden a las reacciones humanas ya establecidas de una forma psicológica, algo que ningún otro sitio te platica cuando aprender a poner colores en formato hexadecimal.
En fin, un buen sitio para aprender si es que quieren empezar con algo sencillo. También para los que buscan un poco de más teoría es un buen recurso para que también conozcamos las bases de las mejores prácticas de uso de estilos con CSS.
Enlace: The magic of CSS