Guía esencial para aprender diseño web pt. 2

Publicado el 04 / 02 / 2014
Un diseñador web nunca se detiene, nunca se acomoda, nunca deja de ver más allá. Nunca. Más les vale que todos los que quieran ser diseñadores web les guste leer y mucho, porque de eso depende estar al tanto de todas esas nuevas tecnologías y conceptos que nos mantendrán al día de la industria de la web.

Hace casi dos años publiqué una guía para aprender diseño web. Dos años después mucho ha cambiado al respecto. Muchas herramientas han surgido en beneficio de los diseñadores que siguen creciendo a la par de la web. Así que es bueno actualizar esta serie de recursos que vislumbran el mañana.

Artículos y tutoriales

A List Apart

A List Apart
Fundado por Jeffrey Zeldman en 1998 (uno de los padres de la estandarización web), este blog se mantiene constantemente al día de las innovaciones y los fundamentos de la web, principalmente usabilidad y experiencia de usuario. Un sitio que a todos les conviene seguir.

Codrops

Codrops
Este sitio es una joya de tutoriales y experimentos con CSS3 e imágenes vectoriales en formato SVG que podrían utilizar en algún momento. Por su misma naturaleza experimental, mucho de los efectos y transiciones sólo funcionan en los exploradores más actualizados, así que si los usas, que sea con medida.

Medium

Medium
En general en Medium se tratan temas de todo tipo, pero hay una cantidad de artículos sobre diseño web, diseño de interfaces y experiencia de usuario que vale la pena leer. Les aseguro que una vez que empiecen se hará una agradable costumbre leerlos todos los días.

Editores de código

Codepen

Codepen
Codepen es un editor de HTML, CSS, y JavaScript en tu navegador con pruebas instantáneas del código que veas y edites. Este sitio es ideal cuando experimentas con código y quieres guardar transiciones o funciones para despuer implementar en futuros proyectos.

JSFiddle

jsFiddle
A diferencia de Codepen, este sitio está más enfocado para desarrolladores, con más herramientas respecto a las versiones de los lenguajes. Vale la pena como recurso para encontrar snippets específicos que no involucren usar un plugin completo.

Pre-procesadores

Haré un paréntesis aquí para explicar que son los procesadores y porqué los contemplo aquí. Si ya han aprendido a usar CSSy HTML quizás se hayan dado cuenta que muchas veces han tenido que repetir código para asignarle un estilo. Imaginen ahora que pueden ahorrarse tiempo repitiendo atributos y asignarlos de una forma cómoda y controlada. Para eso son los pre-procesadores.

Eso si, para hacer uso de estas bellezas es necesario que aprendan a usar un poco su línea de comando ya que estos archivos deben compilarse para que se puedan leer como CSS.

Sass

Sass
Este es mi pre-procesador de CSS favorito, que a través de reglas sencillas uno puede asignar variables (como colores, por ejemplo), anidar clases y id’s y realizar ecuaciones dentro de tu mismo css para mantener una proporción entre márgenes y paddings en vez de andarle atinando y asignar márgenes de 8, 10 y 5 pixeles aleatoriamente.

Less

Less
Pariente de Sass, con ciertas diferencias para nombrar variables, tiene la ventaja de crear “mixins” interesantes para que sólo escribas una línea de css para hacer referencia a un atributo como “border-radius” (que por lo regular se deben agregar dos líneas más para -moz y -webkit).

Front-end Frameworks

Han surgido muchas herramientas para facilitar el proceso de armar un sitio desde cero. Entre ellas están los front-end frameworks que contienen una cantidad enorme de clases predefinidas y funciones para trabajar sobre columnas proporcionadas, estilos base e incluso funciones responsive. Cuando el tiempo es un factor, esta opción es muy recomendada.

Bootstrap

Screen Shot 2014-02-04 at 12.36.32 PM
Este es el framework más popular al día de hoy. Este sistema desarrollado por Twitter tiene una estructura muy sencilla de utilizar y adaptar a tus necesidades. Quizás el único detalle al respecto es que es tanta la gente que utiliza este framework en su forma más básica que es muy fácil detectar si usó Bootstrap.

Foundation

Foundation
Framework favorito de los diseñadores, es uno de los sistemas más sólidos para crear sitios web con funcionalidades estándar y de diseño responsivo. Cabe destacar que su estructuración reticular está fundamentado en em’s en vez de las típicas medidas de 320px, 480px, 768px, etc, lo que implica que los elementos fluyen y se adaptan a la pantalla en vez de ajustarse a los parámetros estándar de dimensiones de pantallas. Si gustan ver las diferencias principales entre ambos, chequen este artículo en Medium.

Icon Fonts

We Love Icon Fonts

We Love Icon Fonts
Un recurso muy útil y práctico para sitios web son las fuentes de íconos que ya están preparados para ser usados sólo asignando una clase a tu HTML. En este sitio encontrarás una pequeña galería de fuentes listas para utilizarse en tu sitio web gratis.

SymbolSet

SymbolSet
SymbolSet ofrece fuentes de íconos con costo. La diferencia respecto a las fuentes que verán aquí es que ofrece íconos para conceptos más específicos que no ofrecen la mayoría de los gratuitos, por ejemplo, íconos para niños, transporte, clima, etc.

Galerías de inspiración

Mobile Design Inspiration

Mobile Inspiration
Un sitio web dedicado sólamente al diseño de interfaces e iconografía para aplicación en móviles. El sitio ofrece imágenes de buen tamaño para el deleite de nuestros ojos. Y la calidad de esas recopilaciones es simplemente bella.

Dribbble

Dribbble
Dribbble se ha cimentado como una comunidad de diseñadores a base de invitaciones para conocer el trabajo y los procesos de cada uno a través de pequeñas imágenes. Si buscan inspiración de diseño de interfaces para móvil o escritorio en este sitio encontrarán close ups de elementos muy interesantes.

SIX UX

Six UX
Este es un pequeño compendio de interacciones salido de diversos sitios. En verdad es muy interesante apreciar esas interacciones a través de videos de 6 segundos (vines).

¿Qué les ha parecido esta recopilación? ¿Les gustaría saber sobre algún tema en específico? Dejen sus comentarios y opiniones.


Escrito por

Te puede interesar

  • Carlos

    Muy bueno!

  • Carlos

    Muy bueno!

  • Miguel Gómez

    Excelente entrada, precisamente en la universidad estamos tocando el tema de diseño web, y créeme que me servirá de mucho tu aporte. Saludos.

  • Miguel Gómez

    Excelente entrada, precisamente en la universidad estamos tocando el tema de diseño web, y créeme que me servirá de mucho tu aporte. Saludos.

  • Fernando Martínez

    Muy buen aporte, solo 1 comentario: en SASS también puedes manejar mixins 🙂 saludos!

  • Fernando Martínez

    Muy buen aporte, solo 1 comentario: en SASS también puedes manejar mixins 🙂 saludos!