En 2011, no había un blog o revista de diseño web en el mundo que no utilizara? HTML5? o? CSS3? en al menos algunos titulares. Hablamos sin cesar sobre las nuevas posibilidades que ofrecían estas tecnologías, discutimos incansablemente sobre los obstáculos que presentaban y nos divertimos muchísimo creando demos con un soporte vergonzosamente modesto para el navegador.
Aunque CSS3 y HTML5 todavía están en la parte superior de nuestras listas de discusión, decidí mirar a mi alrededor y ver qué otros términos y palabras de moda son temas principales para 2012. Siga leyendo para ver qué están discutiendo y discutiendo los diseñadores web en estos días. A lo largo del camino, encontrarás más de cincuenta excelentes artículos para revisar que te mostrarán cada tema.
RWD
En caso de que no haya escuchado, estamos llamando a Responsive Web Design? RWD? ahora. Es la forma corta y fresca de decirlo, así que súbase a bordo antes de avergonzarse con la versión arcaica en su próxima conferencia de diseño web. También podrías usar una camiseta de Plone.
RWD es sin duda uno de los temas más candentes en el desarrollo web en este momento. Esto se debe a que realmente representa un cambio de paradigma importante que está cambiando fundamentalmente la forma en que abordamos los proyectos de diseño web.
¿Hay demasiada publicidad en torno a RWD? Ciertamente he visto muchos comentaristas en mi propio trabajo cantando esta melodía. Sin embargo, como una de las soluciones líderes para abrir la web y ser optimizada para tantos dispositivos como sea posible sin crear sitios personalizados para cada uno, personalmente creo que merece la atención.
El problema detrás de que se convierta en una palabra de moda es que los diseñadores web ya lo han convertido en un importante eslogan de marketing, ya sea que realmente sepan cómo implementarlo con éxito en un entorno real o no. Desconfíe del exceso de confianza en esta área, es una técnica nueva y todos seguimos aprendiendo cómo será a largo plazo.
Discusión de RWD
- Diseño web responsivo (pieza seminal)
- Guía para principiantes de diseño web responsivo
- Cómo construir una galería de miniaturas sensible
- 5 patrones de diseño web muy útiles
- Diseño web responsivo: qué es y cómo usarlo
Puntos de interrupción (o RWD de dispositivo agnóstico)
Hay muchos sub-términos dentro del ámbito de RWD que están captando mucha atención: consultas de los medios, tipo de respuesta, etc. Uno que ha provocado un montón de conversación e incluso debate es "puntos de ruptura".
La idea detrás de RWD es simple en su núcleo: usar CSS inteligente para redefinir el diseño de un sitio en diferentes puntos de referencia predefinidos. La gran pregunta a la que conduce esto es obvia: "¿Qué puntos de interrupción debo usar?"
La solución popular es mirar a los anchos de dispositivos comunes y diseñar específicamente para ellos. Así que configura una consulta de medios para el iPad orientado verticalmente, el iPad orientado horizontalmente, el iPhone vertical, el iPhone horizontal, etc. Como alternativa, encuentra un buen punto medio genérico y apunta a tres áreas principales: escritorio, tabletas y teléfonos.
Recientemente publiqué un artículo sobre por qué deberíamos dejar de pensar en anchos de dispositivos específicos y comenzar a usar RWD para construir sitios que funcionen literalmente con cualquier ancho posible dentro de lo razonable. Suena difícil, pero en la práctica no es más trabajo que los otros métodos. ¿Lo llamé? ¿Diseño responsivo enfocado en el contenido? porque permite que el contenido en sí mismo determine los puntos de interrupción, no los tamaños de dispositivos comunes. Desde entonces, otros sitios han escrito sobre la misma idea con un nombre quizás mejor: "Dispositivo agnóstico". RWD. Hoy encontré un artículo de Marc Drummond publicado mucho antes de discutir técnicas similares con el término sucinto "Puntos de ruptura naturales".
Independientemente de cómo lo llame, este debate ilustra perfectamente el punto que mencioné en la sección anterior: que RWD no es de ninguna manera una práctica perfectamente definida en este punto. Continuamente surgen nuevos métodos e ideas y puede esperar ver mucha más discusión en el punto de inflexión este año.
Discusión de punto de interrupción
- Diseño responsivo: por qué lo estás haciendo mal
- Enfoque de dispositivo agnóstico para el diseño web sensible
- Los puntos de interrupción predeterminados del diseño web sensible están muertos
- Repensando los puntos de ruptura en el diseño responsivo
SVG
Apple ha decidido que el futuro de la informática es uno con mejor resolución. Guste o no, la industria. será siga esta decisión (deje todos los comentarios de odio de Apple que le gusten, todavía van a suceder amigos). Apple está empujando hacia fuera? Retina? Las pantallas en toda su línea de iOS (iPhone, iPad, iPod Touch) y otros fabricantes importantes de dispositivos ya están descubriendo cómo van a igualar o superar esta tecnología.
Para los diseñadores web, esta es una lata desagradable de gusanos. Ya es bastante malo que tengamos que diseñar para toneladas de tamaños de pantalla diferentes, ahora vamos a rematar con grandes cambios en la densidad de píxeles. Las imágenes de mayor resolución plantean todo tipo de problemas con el tamaño del archivo, cómo y cuándo servir diferentes imágenes a diferentes dispositivos, etc.
Uno de los principales salvadores que estamos viendo en este momento es SVG, o gráficos vectoriales escalables, que básicamente le permiten incrustar los tipos de imágenes que construye en Adobe Illustrator directamente en una página web. El beneficio aquí es que dado que los gráficos se construyen como vectores, son infinitamente escalables y se verán absolutamente perfectos en cualquier dispositivo que Silicon Valley pueda imaginar.
- Ready or Not, Here Comes HD Diseño Web
- Resolución Independencia con SVG
- 20 usos de Svg que harán que tu mandíbula caiga
- Jugando con SVG Design
- Usando SVG para fondos flexibles, escalables y divertidos
Preprocesadores
La rigurosidad del movimiento de estándares web condujo a una industria de diseño web bastante rígida en la que usted sigue las reglas o enfrenta las consecuencias.Esta rigidez se sacudió hasta su núcleo con una idea radical: ¿qué pasa si hay una mejor manera de codificar? Hay cosas sobre CSS, JavaScript e incluso la sintaxis HTML que realmente apestan, así que, ¿por qué no encontrar una manera de deshacerse de ellos sin abandonar los estándares que han hecho de la web lo que es hoy? Además, ¿por qué tenemos que esperar a que un panel de expertos agregue las funciones que queremos a nuestros idiomas favoritos? ¿Por qué no podemos hacerlo nosotros mismos?
Entra en el mundo de los preprocesadores. Algunos rebeldes salvajes y locos han reunido estos sistemas mediante los cuales puedes eliminar los estándares de codificación a medida que escribes, y luego ejecutar tu código a través de un limpiador mágico que emite una sintaxis válida. Imagina CSS y JavaScript sin la incómoda necesidad de puntos y comas, o HTML sin esas molestas etiquetas de cierre. Además, imagina escribir menos código y hacer más con él de lo que nunca fue posible (¿puedes decir las variables CSS?).
Hace unos años, estos preprocesadores fueron recibidos con una bienvenida poco calurosa por parte de la mayoría y un absoluto desprecio por parte de otros. La última parte del año pasado, sin embargo, por la razón que sea, realmente alcanzaron su ritmo. De repente, los preprocesadores son la tendencia más caliente alrededor.
Si aún no lo ha hecho, es hora de conocer a los preprocesadores que están causando tal efecto. Sass, LESS y Stylus extienden CSS con excelentes características como variables, combinaciones, operaciones matemáticas e incluso una simplificación de sintaxis drástica. Los fanáticos de Sass también deberían ver otro proyecto de la misma gente que replantea drásticamente la creación HTML: HAML. Si eres un gurú de JavaScript, no busques más que en CoffeeScript como una forma de ahorrarte cientos de líneas de trabajo de código.
Debate del preprocesador
- Sass vs. LESS vs. Stylus: preprocesador Shootout
- Ahorre mucho tiempo escribiendo su HTML con Haml
- 10 ejemplos de CSS MENOS que debes robar para tus proyectos
- Efectos de texto 3D super dulces CSS con Sass y LESS
- MENOS CSS tiene más con 1.2.0
- Rocking Out Con CoffeeScript
- Escribir mejor JavaScript con CoffeeScript: lo básico
- Entra en MENOS: el lenguaje de hojas de estilo programables
Pinterest es el sitio social nuevo y más de moda en la web. Ha explotado absolutamente en popularidad en el último año y parece estar todavía en una escalada continua. Lo interesante es que Pinterest es conocido por su público particularmente femenino, la mayoría de los cuales parece estar obsesionado con poner fotos de Ryan Gosling envueltas en luces navideñas o abrazar cachorros. Entonces, ¿por qué diablos lo he enumerado como una palabra de moda de diseño web?
Hay dos razones para esto. La primera es que gran parte del éxito detrás de Pinterest probablemente se puede atribuir a su diseño, que está cambiando la forma en que los diseñadores piensan sobre los sitios basados en galerías. Como he descrito aquí anteriormente, la combinación de un diseño de estilo de mampostería con un desplazamiento infinito hace que la experiencia del usuario sea simplemente adictiva y pueda robarle horas de su vida. Tu primera inmersión real en Pinterest probablemente terminará cuando mires hacia arriba desde tu pantalla y te preguntes qué año es y cuánto tiempo has estado bajo este hechizo maligno.
Aparte del interesante caso de estudio de diseño que es, Pinterest está siendo aceptado gradualmente por todo tipo de usuarios, no solo por los observadores de Gosling. Un nicho de usuarios que realmente está empezando a encontrar un hogar en este sitio son los diseñadores. Somos personas con mentalidad visual y Pinterest nos brinda una plataforma fantástica para guardar y compartir inspiración visual. No necesita buscar más que nuestra propia cuenta para ver que esto es verdad (finalice el autocontrol descarado).
Discusión en Pinterest
- UX adictivo: ¿Por qué Pinterest es tan increíble?
- Uso de Pinterest para la inspiración de diseño
- Cómo Pinterest cambió el diseño web
- Pinterest es una bonanza web para diseñadores
- 3 maneras impactantes que los diseñadores web pueden usar Pinterest
CS6
Adobe es casi inigualable en su capacidad de hacer que los diseñadores de la quiebra desembolsen cantidades impías de dinero de manera regular. El desarrollo continuo de Adobe Creative Suite significa que necesita tener mucho dinero para poder mantenerse al día con la mejor tecnología de la industria. Esto es especialmente cierto en el mundo del blog de diseño. Si publico un tutorial en Photoshop y cometo el error de usar algo tan antiguo como CS3, seré castigado sin fin.
Adobe está a punto de sacudir tu mundo una vez más con CS6, la próxima gran versión de Creative Suite. Sé que algunos de ustedes están poniendo los ojos en blanco y se quejan de que solo sólo compré CS5, y comparto su dolor, pero la buena noticia es que Adobe sí realiza mejoras a gran escala con cada versión.
El frenesí por CS6 está en su punto más alto desde que Adobe lanzó una versión beta gratuita de Photoshop. Las nuevas características increíbles incluyen una interfaz renovada (la opción oscura ahora es una opción), estilos de tipo similares a los estilos de párrafos en Illustrator e InDesign, una galería de desenfoque que facilita la simulación de la profundidad de campo y el cambio de inclinación, una herramienta de recorte de reconsideración, búsqueda de capas, Máscaras de grupo de capas y mucho más. Ni siquiera te molestes en resistir, sabes que lo quieres.
Discusión CS6
- Mejoras de Photoshop CS6
- Las 7 principales características de Photoshop CS6
- Photoshop CS6 Blur Gallery Tutorial
- Adobe Photoshop CS6 Beta Hits 500,000 Descargas
- Nuestro primer vistazo a Photoshop CS6
Patrones
Esta es una interesante que puede malinterpretar al principio. Por? Patrones? No me refiero a cuadros, cuadros o cualquier diseño de textura visual repetitiva. En cambio, a lo que me refiero es al análisis sistemático del diseño web y cómo se realiza comúnmente tanto desde una perspectiva visual como de codificación.
Si acabas de responder con un gran, ¿eh? entonces déjame explicarte.El año pasado escribí un artículo titulado 10 Ejemplos de diseño de sitios web de Rock Solid donde comenté los patrones de diseño populares vistos en innumerables sitios en toda la web y por qué funcionan bien. Estos no tienen nada que ver con el color, la textura, la tipografía ni nada que sea específico, sino que le dan un vistazo a la capa base absoluta del diseño sobre el que se basa el resto.
Este tema se expande también a la codificación. El sitio web Pears muestra patrones típicos de emparejamientos de HTML y CSS para elementos de diseño comunes, como menús de navegación, pies de página y cuadrículas de miniaturas.
El reconocimiento, el análisis y el intercambio de patrones es una tendencia que se está calentando y espero que continúe creciendo en popularidad, especialmente cuando Responsive Web Design introduce nuevos paradigmas y prácticas tanto en la codificación como en el diseño.
Discusión de patrones
- Patrones de navegación responsiva
- 5 patrones de diseño web muy útiles
- Patrones de diseño de dispositivos múltiples
- Patrones de diseño de JavaScript esenciales
- Pros y contras de 6 patrones de diseño CSS
Prefijos de proveedores
Todos hemos estado usando CSS3 el tiempo suficiente para acostumbrarnos o hartarnos de la locura de los prefijos de proveedores específicos del navegador. Cuando usas algo que es bastante nuevo en CSS, es probable que tengas que repetirlo una y otra vez para todos los navegadores posibles. Un ejemplo perfecto de lo loco que se vuelve es los gradientes de CSS. Aquí está el código recomendado para implementar un gradiente de dos colores simple:
Loca verdad? Algunos dicen que esto es bueno para la web, otros dicen que es completamente tóxico. Aunque hemos estado usando prefijos por un tiempo, el calor en este debate repentinamente se ha incrementado al máximo. Todos tienen una opinión diferente acerca de por qué los prefijos ayudan o dañan y parece que un consenso o incluso algunas sugerencias sólidas para un mejor sistema no están a la vista.
Discusión Prefijo
- Cada vez que llamas a una característica propietaria? CSS3 ,? un gatito muere
- El Predicamento de Prefijo de Vendedor
- Los prefijos de proveedores no son aptos para desarrolladores (Paul Irish)
- TL; DR en el vendedor Prefijo Drama (Chris Coyier)
- Prefijos de proveedores - A punto de ir al sur
- Gran pregunta: ¿Los prefijos de los proveedores perjudican la web?
- Los prefijos de proveedores de CSS amenazan la web abierta
Mejora progresiva
¿El viejo? ¿Mejora progresiva vs. degradación agraciada? El debate no es nada nuevo. En su mayor parte, parece que todos comenzamos con una degradación elegante y luego pasamos a la mejora progresiva como un método posiblemente superior.
El movimiento de mejora progresiva ha estimulado toneladas de discusión e ideas en los últimos años. Temas como? Móvil primero? El diseño incluye la mejora progresiva como la mejor manera de garantizar que la mayor cantidad posible de personas disfrute de la web al máximo.
La pregunta para el 2012 es, "¿qué viene después?" ¿Es posible que los conceptos inherentes a la mejora progresiva estén realmente retrasando la web en lugar de hacerla avanzar? ¿Debemos evolucionar nuestras ideas o quizás incluso abandonar esta práctica por completo? Echa un vistazo a los artículos a continuación para ver lo último en el debate.
Discusión de mejora progresiva
- La mejora progresiva es una barrera para el progreso
- La mejora progresiva es más relevante que nunca
- Mejora progresiva masivamente móvil | ¿Es su sitio amigable con el futuro?
- Mejora progresiva 2.0 - Nicholas Zakas
- Mejora progresiva: todo lo que necesita saber está aquí
Gamificación
El santo grial de absolutamente cualquier tipo de diseño es el compromiso. Eso es lo que todos buscamos en cada proyecto en el que nos embarcamos. En última instancia, queremos que las personas experimenten, disfruten y, con suerte, incluso regresen a nuestros proyectos.
Han aparecido varias tendencias que prometen ser la clave de esta criatura esquiva, pero la favorita actual es la gamificación. El concepto que impulsa esto es bastante básico: a la gente le encantan los juegos, así que vamos a convertir todo en un juego. Solo necesitas echar un vistazo a Foursquare para ver un ejemplo efectivo. Estas personas querían crear una aplicación que le permitiera compartir su llegada a cualquier ubicación. Era un concepto interesante, pero ¿cómo lograrían que la gente usara la aplicación? ¿Cuál es el incentivo?
La respuesta: que sea un juego! Al registrarte, obtienes insignias (píxeles sin valor pero buenos para jactarte derechos). Ser el usuario que más frecuenta un lugar lo convierte en el alcalde, que a su vez puede obtener descuentos y premios en el mundo real. Incluso hay una tabla de líderes que te dice diariamente cómo te posicionas frente a tus amigos. Resulta que la competencia engendra interacción.
Esta idea está llevando a un replanteamiento dramático de todo tipo de sitios web, aplicaciones y redes sociales. Las nuevas empresas emergentes están apareciendo por docenas que prometen gamificar un área nueva que nadie más ha liderado.En un nivel micro, las compañías existentes buscan gamificar pequeñas partes de su sitio o aplicación para hacer que lo mundano sea emocionante. ¿La gamificación llevará a un cambio a largo plazo hacia una red más divertida o es solo una tendencia pasajera que desaparecerá más rápido de lo que puedes decir Gowalla?
Discusión de la Gamificación
- ¿Gamificación - Nuggets of Wisdom o Fool's Gold?
- El futuro del diseño web es el compromiso
- Los beneficios y escollos de la gamificación
- Marketing Online y Gamificación por Diseño
¿Qué me perdí?
Estoy seguro de que al menos algunos de los temas anteriores están en línea con lo que has estado pensando, hablando y / o preocupándote últimamente. Deje un comentario a continuación y déjenos saber cuál de estos ha sido el que más ha pensado y de qué lado está en los muchos debates anteriores.
Esta lista de diez temas, sin duda, apenas roza la superficie de los conceptos de diseño de hot web en este momento. Háganos saber sobre otras palabras de moda que ha escuchado mucho últimamente y qué piensa sobre ellas.
Fuentes de imagen: Yutaka Tsutano y Phil Roeder.