La tecnología se vuelve más envolvente y los usuarios continúan demandando una gratificación instantánea. La capacidad de atención promedia de los visitantes de la web es de 8 a 10 segundos. En ese corto período de tiempo, tenemos que decirles que están en el lugar correcto, y que nuestro es más atractivo e innovador que el de la competencia.
A continuación destacamos las tendencias que se implantarán este año y que harán de tu website o aplicación móvil, un lugar cool y agradable para pasar horas y horas:
Esquemas de colores simples
Simplicidad. No hay nada como impactar como un mensaje claro en un website acogedor. El Silencio puede ser interpretado de diferentes maneras. Olvídese deblanco y negro o tonos de gris. Piensa en verde, amarillo o incluso rojo como sucolor principal. Sin embargo, limitar la paleta a dos o tres colores. Trabajar dentro de los tonos de cada color para la variedad. Puede ser realmente notablelo que algunos colores pueden hacer por su mensaje. Observe:
Nombres de dominio llamativos e intrigantes
Aunque no en el sentido estricto es cuestión de diseño web, esperamos cada vez nombres de dominio más creativos e ingeniosos. Piense que si su nombre de dominio es innovador y sorprendente al igual que sus contenidos, sus clientes querrán volver a verle.
Efectos 3D
Está pegando muy fuerte las sensaciones y efectos ópticos de profundidad, a veces hasta el punto donde los sitios web es como una película o un juego. Estamos todos para el uso de capas, sombras, degradados, transparencias y texturas para crear dimensión. Sólo asegúrese de no distraer al lector ni de perder la sutileza.
Ejemplo: Nike historia de las más famosas zapatillas
Nike te lleva a una línea de tiempo interactiva de su relación con Michael Jordan en el estilo de un libro pop-up.
Parallax Scrolling
Scroll parallax es una técnica que se ha utilizado en los juegos de vídeo durante años, y con respecto al diseño web, consiste en hacer que las imágenes de fondo y primer plano se mueven o cambian a velocidades diferentes para crear una sensación de profundidad. Todo lo que necesitas es imaginación jQuery y CSS3. Para llevarlo aún más lejos, los elementos pueden salir o moverse según el usuario se desplaza o se mueve el ratón. Las posibilidades de hacer una página web creativa e interesantes se multiplican. Esta técnica comienza a ser utilizada también en las aplicaciones móviles y pega otra vez fuerte en el mundo de los videojuegos.
Ejemplo: el escolta Ben
Este sitio web es una página para una aplicación iPhone, difumina la línea entre un juego y un sitio web.
HTML5 y CSS3
No es cuestión de que HTML5, CSS3, Javascript y jQuery ya se estén convirtiendo en norma y cannon de diseño web, ya que Flash aún tiene funcionalidades insuperables, pero es muy aconsejable la utilización de Html5 ya que crea un código más legible y diseños que ayudan a la estructura de mark-up. Cada día más y más usuarios inventan con las herramientas de Htm5 nuevas formas de llegar y conquistar a sus clientes, la tipografía, las herramientas sociales, la funcionalidad de arrastrar y soltar y nuevas API son tus nuevas armas. Con CSS3 el diseño destacará por sí solo, esquinas redondeadas, menús desplegables, botones animados, fondos múltiples, aplicaciones web y tecnología de @ font-face. Ya tenemos todo!!!
Ejemplo: Arcade Fire Wildness DownTown
Una experiencia cinematográfica interactiva que convierte el navegador todo en una pantalla de cine. PS. Mueva su ratón sobre las aves.
Grandes imágenes de background
Con cámaras de alta definición, una mejor optimización de la imagen, los métodos más inteligentes de carga y las conexiones rápidas a Internet, fotos y grandes ilustraciones intrincadas ya no son tabú en la web. Teniendo el fondo de pantalla como lienzo, podrás establecer el estado de ánimo, tus habilidades y deseos. Mientras que sea relevante y no compita en protagonismo con el contenido, una imagen vale más que mil palabras.
Con el año 2012 ya instaurado, es hora, como cada nueva temporada, que repasemos las nuevas tendencias para el desarrollo de páginas webs y de aplicaciones móviles. En 2010, el diseño web comenzó a moverse hacia el minimalismo y esta tendencia está siendo adoptado plenamente en 2011. El minimalismo no es nada nuevo en diseño gráfico, pero cuando se aplica a los sitios web, hay más espacio para respirar y una información directa. Más importante aún, la atención se centra en el contenido.
El minimalismo no muestra señales de detenerse en el año 2012, la tecnología se vuelve más envolvente y los usuarios continúan demandando una gratificación instantánea. La capacidad de atención promedia de losvisitantes de la web es de 8 a 10 segundos. En ese corto período de tiempo, tenemos que decirles que están en el lugar correcto, y que nuestro es más atractivo e innovador que el de la competencia.
A continuación destacamos las tendencias que se implantarán este año y que harán de tu website o aplicación móvil, un lugar cool para quedarse:
HTML5 y CSS3
No es cuestión de que HTML5, CSS3, Javascript y jQuery ya se estén convirtiendo en norma y cannon de diseño web, ya que Flash aún tiene funcionalidades insuperables, pero es muy aconsejable la utilización de Html5 ya que crea un código más legible y diseños que ayudan a la estructura de mark-up. Cada día más y más usuarios inventan con las herramientas de Htm5 nuevas formas de llegar y conquistar a sus clientes,la tipografía, las herramientas sociales, la funcionalidad de arrastrar y soltar y nuevas API son tus nuevas armas. Con CSS3 el diseño destacará por sí solo, esquinas redondeadas, menús desplegables, botones animados, fondos múltiples, aplicaciones web y tecnología de @ font-face. Ya tenemos todo!!!
Ejemplo: Arcade Fire Wildness DownTown
Una experiencia cinematográfica interactiva que convierte el navegador todo en una pantalla de cine. PS. Mueva su ratón sobre las aves.
Efectos 3D
Está pegando muy fuerte las sensaciones y efectos ópticos de profundidad, a veces hasta el punto donde los sitios web es como una película o un juego. Estamos todos para el uso de capas, sombras, degradados, transparencias y texturas para crear dimensión. Sólo asegúrese de no distraer al lector. Sutileza puede ir una manera larga.
Ejemplo: Nike historia de la aviación
Nike te lleva a una línea de tiempo interactiva de su relación con Michael Jordan en el estilo de un libro pop-up.
Websites de una sola página
Dado que el 80% de los visitantes del sitio web no navega por otras secciones que no sean la página de inicio, es tendencia el ajustar todo el contenido en una página web. De sabor a su vida, HTML5, CSS3 y Javascript puede hacer que esa única página atrape a sus visitantes con un dinamismo único, pestañas, las animaciones y los pop-ups están a vuestro servicio .Esta tendencia es mejor para los sitios con poco contenido, tales como eventos, sitios personales, productos y sitios de micro.
Ejemplo: Interactive día de San Diego
Hemos tenido un montón de diversión la creación de este sitio de una página para el evento de San Diego de conferencias más interactivo. Lo mejor es que no utiliza flash!
Parallax Scrolling
Scroll parallax es una técnica que se ha utilizado en los juegos de vídeo durante años, y con respecto al diseño web, consiste en hacer un uso brillante de la misma. Es cuando las imágenes de fondo y primer plano se mueven o cambian a velocidades diferentes para crear una sensación de profundidad. Todo lo que necesitas es imaginación jQuery y CSS3. Para llevarlo aún más lejos, los elementos pueden salir omoverse según el usuario se desplaza o se mueve el ratón. Las posibilidades de hacer una página web creativa e interesantes se multiplican. Esta técnica comienza a ser utilizada también en las aplicaciones móviles y pega otra vez fuerte en el mundo de los videojuegos.
Ejemplo: el escolta Ben
Este sitio web es una página para una aplicación iPhone, difumina la línea entre un juego y un sitio web.
With 2012 fast approaching, it’s time we took a look at where web design is headed for the coming year. In 2010, web design started to move towards minimalism and it’s being fully embraced in 2011. Minimalism is nothing new in graphic design, but when applied to websites, there’s more breathing room, a distinguished hierarchy and straightforward information. More importantly, the focus is on the content. Minimalism shows no signs of stopping in 2012 as technology gets more immersive and users continue to demand instant gratification. The average attention span of web visitors is 8 to 10 seconds. In that short amount of time, we have to tell them they’re at the right place, then organically lure them in. While part of that is having a “cool” website, the minimalist concept of “less is more” needs to be applied where aesthetics marries function. Based on popularity, visual appeal, effectiveness and awesomeness, we believe the following web design trends are here to stay. HTML5 and CSS3 It’s no question that HTML5, CSS3, Javascript and jQuery are already becoming web design standards that can do pretty much everything Flash does, but better. HTML5 creates more readable code and builds layouts that help the structure mark-up. It features smarter forms, typography, social tools, drag and drop functionality and new APIs. CSS3 functions include rounded corners, drop down menus, animated buttons, multiple backgrounds, web applications and @font-face technology. EXAMPLE: The Wilderness Downtown An interactive film experience that turns your whole browser into a movie screen. PS. Hover your mouse over the birds. 
Mobile Ready With the number of mobile users increasing every year, having a website that is both mouse-friendly and touch-friendly is more of a necessity than a trend. But have no fear, CSS3 can accommodate mobile technology in web design. In fact, mobile sites play a major influence in the minimal web since it calls for simpler pages, faster loading times, interactivity and quicker messages. Omniture found that mobile-optimized experiences produced an average 75% higher rate of engagements per mobile visitor. EXAMPLE: Mindgruve Mobile Site When you type “mindgruve.com” on your mobile browser, you get directed to our mobile site where our portfolio is available at your fingertips. Also note how it’s consistent with our website. Sliders A large, interactive header with a slider makes a great first impression and inserting them has never been easier with jQuery plugins. Sliders reduce the need to go through the navbar by visually summarizing the entire site into a smaller space. Their interactivity and easy navigation also translates well onto the mobile web. EXAMPLE: Visit Carlsbad For one of our loyal clients, Visit Carlsbad, we used a slider at the top of their website to showcase all this city has to offer. 
3D Effects The web is also delving into the illusion of depth, sometimes to the point where websites are like a movie or game. We’re all for using layers, shadows, gradients, transparencies and textures to create dimension. Just make sure they don’t distract the reader. Subtlety can go a long way. EXAMPLE: Nike History of Flight Nike takes you on an interactive timeline of their relationship with Michael Jordan in the style of a pop-up book. 
One-Page W
ebsites Since 80% of website visitors don’t navigate away from the homepage, fitting all the content onto one webpage can be efficient. To spice it up, HTML5, CSS3 and Javascript can make the page multi-faceted with tabs, animations and pop-ups. On the other hand, it isn’t suitable for all websites. For instance, e-commerce sites wouldn’t do so well if they were one page. This trend is better for sites with less content such as events, personal sites, products and micro sites. EXAMPLE: Interactive Day San Diego We had a lot of fun creating this one-page site for San Diego’s most interactive conference event. The best part: No Flash! 
Parallax Scrolling Parallax scrolling is a technique that has been used in video games for years and web design is making brilliant use of it. It’s when the background and foreground images move or change at different speeds to create a sense of depth. All you need is jQuery, CSS3 and good imagery. To take it even further, elements can pop out or move as the user scrolls or moves the mouse around. The possibilities can make one-page websites creative and interesting. EXAMPLE: Ben the Bodyguard This one-page website for an iPhone app blurs the line between a game and a website. 
Grid-Driven Layouts Inspired by print, editorial web layouts are perfect for constantly updated content and SEO. They add structure and organize information so it’s easier to scan and comprehend. Big, link-filled headers and footers also make finding information a cinch. The 960 grid system is the most popular to use since it’s adaptable to all screens. It simply uses CSS to help streamline web development workflow based on a width of 960 pixels. EXAMPLE: Good This multimedia news source treats its website as an interactive print publication. 
Typography As more browsers support font-replacement methods, web designers can integrate custom fonts without having to make them image-based. That means we don’t have to stick to the overused Arial, Times and Century Gothic fonts all the time. We can use bolder, bigger and funner typography that’ll be crisp and indexed to grab the user’s attention. Typography has the power to make or break a design. So we advise to use 1 or 2 fonts that are legible on all devices, and to save the big typography for headers, sub-headers and the like. EXAMPLE: Joel Andrew Glovier This developer’s portfolio stands out with colorful and impactful typography that isn’t overbearing. 
Large Backgrounds With high definition cameras, better image optimization, smarter loading methods and faster internet connections, large photos and intricate illustrations are no longer taboo on the web. Having them as a background can draw in the user, set the mood and have a lasting impression. As long as it’s relevant and doesn’t compete with the content, the imagery can tell a story faster than a paragraph of content. EXAMPLE: Mindgruve Our website incorporates large photo backgrounds that reflect our content and company. PS. Watch for the trolley on the home page. 
So there you have it, our top picks for web design trends. With the user in mind, they practice simple, intuitive and clever design with emphasis on content. However, everything needs a purpose for the message to be properly conveyed. Being too minimal and holding back information is just as bad as being cluttered. More importantly, if the technique doesn’t help your business goals, then there’s no point in using them either. With that said, as web design continues to explore new possibilities and break barriers (and us right there with it), we don’t see these design trends going anywhere for a while.Con el año 2012 ya instaurado, es hora, como cada nueva temporada, que repasemos las nuevas tendencias para el desarrollo de páginas webs y de aplicaciones móviles. En 2010, el diseño web comenzó a moverse hacia el minimalismo y esta tendencia está siendo adoptado plenamente en 2011. El minimalismo no es nada nuevo en diseño gráfico, pero cuando se aplica a los sitios web, hay más espacio para respirar y una información directa. Más importante aún, la atención se centra en el contenido.
El minimalismo no muestra señales de detenerse en el año 2012, la tecnología se vuelve más envolvente y los usuarios continúan demandando una gratificación instantánea. La capacidad de atención promedia de losvisitantes de la web es de 8 a 10 segundos. En ese corto período de tiempo, tenemos que decirles que están en el lugar correcto, y que nuestro es más atractivo e innovador que el de la competencia.
A continuación destacamos las tendencias que se implantarán este año y que harán de tu website o aplicación móvil, un lugar cool para quedarse:
HTML5 y CSS3
No es cuestión de que HTML5, CSS3, Javascript y jQuery ya se estén convirtiendo en norma y cannon de diseño web, ya que Flash aún tiene funcionalidades insuperables, pero es muy aconsejable la utilización de Html5 ya que crea un código más legible y diseños que ayudan a la estructura de mark-up. Cada día más y más usuarios inventan con las herramientas de Htm5 nuevas formas de llegar y conquistar a sus clientes,la tipografía, las herramientas sociales, la funcionalidad de arrastrar y soltar y nuevas API son tus nuevas armas. Con CSS3 el diseño destacará por sí solo, esquinas redondeadas, menús desplegables, botones animados, fondos múltiples, aplicaciones web y tecnología de @ font-face. Ya tenemos todo!!!
Ejemplo: Arcade Fire Wildness DownTown
Una experiencia cinematográfica interactiva que convierte el navegador todo en una pantalla de cine. PS. Mueva su ratón sobre las aves.
Efectos 3D
Está pegando muy fuerte las sensaciones y efectos ópticos de profundidad, a veces hasta el punto donde los sitios web es como una película o un juego. Estamos todos para el uso de capas, sombras, degradados, transparencias y texturas para crear dimensión. Sólo asegúrese de no distraer al lector. Sutileza puede ir una manera larga.
Ejemplo: Nike historia de la aviación
Nike te lleva a una línea de tiempo interactiva de su relación con Michael Jordan en el estilo de un libro pop-up.
Websites de una sola página
Dado que el 80% de los visitantes del sitio web no navega por otras secciones que no sean la página de inicio, es tendencia el ajustar todo el contenido en una página web. De sabor a su vida, HTML5, CSS3 y Javascript puede hacer que esa única página atrape a sus visitantes con un dinamismo único, pestañas, las animaciones y los pop-ups están a vuestro servicio .Esta tendencia es mejor para los sitios con poco contenido, tales como eventos, sitios personales, productos y sitios de micro.
Ejemplo: Interactive día de San Diego
Hemos tenido un montón de diversión la creación de este sitio de una página para el evento de San Diego de conferencias más interactivo. Lo mejor es que no utiliza flash!
Parallax Scrolling
Scroll parallax es una técnica que se ha utilizado en los juegos de vídeo durante años, y con respecto al diseño web, consiste en hacer un uso brillante de la misma. Es cuando las imágenes de fondo y primer plano se mueven o cambian a velocidades diferentes para crear una sensación de profundidad. Todo lo que necesitas es imaginación jQuery y CSS3. Para llevarlo aún más lejos, los elementos pueden salir omoverse según el usuario se desplaza o se mueve el ratón. Las posibilidades de hacer una página web creativa e interesantes se multiplican. Esta técnica comienza a ser utilizada también en las aplicaciones móviles y pega otra vez fuerte en el mundo de los videojuegos.
Ejemplo: el escolta Ben
Este sitio web es una página para una aplicación iPhone, difumina la línea entre un juego y un sitio web.
With 2012 fast approaching, it’s time we took a look at where web design is headed for the coming year. In 2010, web design started to move towards minimalism and it’s being fully embraced in 2011. Minimalism is nothing new in graphic design, but when applied to websites, there’s more breathing room, a distinguished hierarchy and straightforward information. More importantly, the focus is on the content. Minimalism shows no signs of stopping in 2012 as technology gets more immersive and users continue to demand instant gratification. The average attention span of web visitors is 8 to 10 seconds. In that short amount of time, we have to tell them they’re at the right place, then organically lure them in. While part of that is having a “cool” website, the minimalist concept of “less is more” needs to be applied where aesthetics marries function. Based on popularity, visual appeal, effectiveness and awesomeness, we believe the following web design trends are here to stay. HTML5 and CSS3 It’s no question that HTML5, CSS3, Javascript and jQuery are already becoming web design standards that can do pretty much everything Flash does, but better. HTML5 creates more readable code and builds layouts that help the structure mark-up. It features smarter forms, typography, social tools, drag and drop functionality and new APIs. CSS3 functions include rounded corners, drop down menus, animated buttons, multiple backgrounds, web applications and @font-face technology. EXAMPLE: The Wilderness Downtown An interactive film experience that turns your whole browser into a movie screen. PS. Hover your mouse over the birds. Mobile Ready With the number of mobile users increasing every year, having a website that is both mouse-friendly and touch-friendly is more of a necessity than a trend. But have no fear, CSS3 can accommodate mobile technology in web design. In fact, mobile sites play a major influence in the minimal web since it calls for simpler pages, faster loading times, interactivity and quicker messages. Omniture found that mobile-optimized experiences produced an average 75% higher rate of engagements per mobile visitor. EXAMPLE: Mindgruve Mobile Site When you type “mindgruve.com” on your mobile browser, you get directed to our mobile site where our portfolio is available at your fingertips. Also note how it’s consistent with our website. Sliders A large, interactive header with a slider makes a great first impression and inserting them has never been easier with jQuery plugins. Sliders reduce the need to go through the navbar by visually summarizing the entire site into a smaller space. Their interactivity and easy navigation also translates well onto the mobile web. EXAMPLE: Visit Carlsbad For one of our loyal clients, Visit Carlsbad, we used a slider at the top of their website to showcase all this city has to offer. 3D Effects The web is also delving into the illusion of depth, sometimes to the point where websites are like a movie or game. We’re all for using layers, shadows, gradients, transparencies and textures to create dimension. Just make sure they don’t distract the reader. Subtlety can go a long way. EXAMPLE: Nike History of Flight Nike takes you on an interactive timeline of their relationship with Michael Jordan in the style of a pop-up book. One-Page W
ebsites Since 80% of website visitors don’t navigate away from the homepage, fitting all the content onto one webpage can be efficient. To spice it up, HTML5, CSS3 and Javascript can make the page multi-faceted with tabs, animations and pop-ups. On the other hand, it isn’t suitable for all websites. For instance, e-commerce sites wouldn’t do so well if they were one page. This trend is better for sites with less content such as events, personal sites, products and micro sites. EXAMPLE: Interactive Day San Diego We had a lot of fun creating this one-page site for San Diego’s most interactive conference event. The best part: No Flash! Parallax Scrolling Parallax scrolling is a technique that has been used in video games for years and web design is making brilliant use of it. It’s when the background and foreground images move or change at different speeds to create a sense of depth. All you need is jQuery, CSS3 and good imagery. To take it even further, elements can pop out or move as the user scrolls or moves the mouse around. The possibilities can make one-page websites creative and interesting. EXAMPLE: Ben the Bodyguard This one-page website for an iPhone app blurs the line between a game and a website. Grid-Driven Layouts Inspired by print, editorial web layouts are perfect for constantly updated content and SEO. They add structure and organize information so it’s easier to scan and comprehend. Big, link-filled headers and footers also make finding information a cinch. The 960 grid system is the most popular to use since it’s adaptable to all screens. It simply uses CSS to help streamline web development workflow based on a width of 960 pixels. EXAMPLE: Good This multimedia news source treats its website as an interactive print publication. Typography As more browsers support font-replacement methods, web designers can integrate custom fonts without having to make them image-based. That means we don’t have to stick to the overused Arial, Times and Century Gothic fonts all the time. We can use bolder, bigger and funner typography that’ll be crisp and indexed to grab the user’s attention. Typography has the power to make or break a design. So we advise to use 1 or 2 fonts that are legible on all devices, and to save the big typography for headers, sub-headers and the like. EXAMPLE: Joel Andrew Glovier This developer’s portfolio stands out with colorful and impactful typography that isn’t overbearing. Large Backgrounds With high definition cameras, better image optimization, smarter loading methods and faster internet connections, large photos and intricate illustrations are no longer taboo on the web. Having them as a background can draw in the user, set the mood and have a lasting impression. As long as it’s relevant and doesn’t compete with the content, the imagery can tell a story faster than a paragraph of content. EXAMPLE: Mindgruve Our website incorporates large photo backgrounds that reflect our content and company. PS. Watch for the trolley on the home page. So there you have it, our top picks for web design trends. With the user in mind, they practice simple, intuitive and clever design with emphasis on content. However, everything needs a purpose for the message to be properly conveyed. Being too minimal and holding back information is just as bad as being cluttered. More importantly, if the technique doesn’t help your business goals, then there’s no point in using them either. With that said, as web design continues to explore new possibilities and break barriers (and us right there with it), we don’t see these design trends going anywhere for a while.Con el año 2012 ya instaurado, es hora, como cada nueva temporada, que repasemos las nuevas tendencias para el desarrollo de páginas webs y de aplicaciones móviles. En 2010, el diseño web comenzó a moverse hacia el minimalismo y esta tendencia está siendo adoptado plenamente en 2011. El minimalismo no es nada nuevo en diseño gráfico, pero cuando se aplica a los sitios web, hay más espacio para respirar y una información directa. Más importante aún, la atención se centra en el contenido.
El minimalismo no muestra señales de detenerse en el año 2012, la tecnología se vuelve más envolvente y los usuarios continúan demandando una gratificación instantánea. La capacidad de atención promedia de losvisitantes de la web es de 8 a 10 segundos. En ese corto período de tiempo, tenemos que decirles que están en el lugar correcto, y que nuestro es más atractivo e innovador que el de la competencia.
A continuación destacamos las tendencias que se implantarán este año y que harán de tu website o aplicación móvil, un lugar cool para quedarse:
HTML5 y CSS3
No es cuestión de que HTML5, CSS3, Javascript y jQuery ya se estén convirtiendo en norma y cannon de diseño web, ya que Flash aún tiene funcionalidades insuperables, pero es muy aconsejable la utilización de Html5 ya que crea un código más legible y diseños que ayudan a la estructura de mark-up. Cada día más y más usuarios inventan con las herramientas de Htm5 nuevas formas de llegar y conquistar a sus clientes,la tipografía, las herramientas sociales, la funcionalidad de arrastrar y soltar y nuevas API son tus nuevas armas. Con CSS3 el diseño destacará por sí solo, esquinas redondeadas, menús desplegables, botones animados, fondos múltiples, aplicaciones web y tecnología de @ font-face. Ya tenemos todo!!!
Ejemplo: Arcade Fire Wildness DownTown
Una experiencia cinematográfica interactiva que convierte el navegador todo en una pantalla de cine. PS. Mueva su ratón sobre las aves.
Efectos 3D
Está pegando muy fuerte las sensaciones y efectos ópticos de profundidad, a veces hasta el punto donde los sitios web es como una película o un juego. Estamos todos para el uso de capas, sombras, degradados, transparencias y texturas para crear dimensión. Sólo asegúrese de no distraer al lector. Sutileza puede ir una manera larga.
Ejemplo: Nike historia de la aviación
Nike te lleva a una línea de tiempo interactiva de su relación con Michael Jordan en el estilo de un libro pop-up.
Websites de una sola página
Dado que el 80% de los visitantes del sitio web no navega por otras secciones que no sean la página de inicio, es tendencia el ajustar todo el contenido en una página web. De sabor a su vida, HTML5, CSS3 y Javascript puede hacer que esa única página atrape a sus visitantes con un dinamismo único, pestañas, las animaciones y los pop-ups están a vuestro servicio .Esta tendencia es mejor para los sitios con poco contenido, tales como eventos, sitios personales, productos y sitios de micro.
Ejemplo: Interactive día de San Diego
Hemos tenido un montón de diversión la creación de este sitio de una página para el evento de San Diego de conferencias más interactivo. Lo mejor es que no utiliza flash!
Parallax Scrolling
Scroll parallax es una técnica que se ha utilizado en los juegos de vídeo durante años, y con respecto al diseño web, consiste en hacer un uso brillante de la misma. Es cuando las imágenes de fondo y primer plano se mueven o cambian a velocidades diferentes para crear una sensación de profundidad. Todo lo que necesitas es imaginación jQuery y CSS3. Para llevarlo aún más lejos, los elementos pueden salir omoverse según el usuario se desplaza o se mueve el ratón. Las posibilidades de hacer una página web creativa e interesantes se multiplican. Esta técnica comienza a ser utilizada también en las aplicaciones móviles y pega otra vez fuerte en el mundo de los videojuegos.
Ejemplo: el escolta Ben
Este sitio web es una página para una aplicación iPhone, difumina la línea entre un juego y un sitio web.
With 2012 fast approaching, it’s time we took a look at where web design is headed for the coming year. In 2010, web design started to move towards minimalism and it’s being fully embraced in 2011. Minimalism is nothing new in graphic design, but when applied to websites, there’s more breathing room, a distinguished hierarchy and straightforward information. More importantly, the focus is on the content. Minimalism shows no signs of stopping in 2012 as technology gets more immersive and users continue to demand instant gratification. The average attention span of web visitors is 8 to 10 seconds. In that short amount of time, we have to tell them they’re at the right place, then organically lure them in. While part of that is having a “cool” website, the minimalist concept of “less is more” needs to be applied where aesthetics marries function. Based on popularity, visual appeal, effectiveness and awesomeness, we believe the following web design trends are here to stay. HTML5 and CSS3 It’s no question that HTML5, CSS3, Javascript and jQuery are already becoming web design standards that can do pretty much everything Flash does, but better. HTML5 creates more readable code and builds layouts that help the structure mark-up. It features smarter forms, typography, social tools, drag and drop functionality and new APIs. CSS3 functions include rounded corners, drop down menus, animated buttons, multiple backgrounds, web applications and @font-face technology. EXAMPLE: The Wilderness Downtown An interactive film experience that turns your whole browser into a movie screen. PS. Hover your mouse over the birds. Mobile Ready With the number of mobile users increasing every year, having a website that is both mouse-friendly and touch-friendly is more of a necessity than a trend. But have no fear, CSS3 can accommodate mobile technology in web design. In fact, mobile sites play a major influence in the minimal web since it calls for simpler pages, faster loading times, interactivity and quicker messages. Omniture found that mobile-optimized experiences produced an average 75% higher rate of engagements per mobile visitor. EXAMPLE: Mindgruve Mobile Site When you type “mindgruve.com” on your mobile browser, you get directed to our mobile site where our portfolio is available at your fingertips. Also note how it’s consistent with our website. Sliders A large, interactive header with a slider makes a great first impression and inserting them has never been easier with jQuery plugins. Sliders reduce the need to go through the navbar by visually summarizing the entire site into a smaller space. Their interactivity and easy navigation also translates well onto the mobile web. EXAMPLE: Visit Carlsbad For one of our loyal clients, Visit Carlsbad, we used a slider at the top of their website to showcase all this city has to offer. 3D Effects The web is also delving into the illusion of depth, sometimes to the point where websites are like a movie or game. We’re all for using layers, shadows, gradients, transparencies and textures to create dimension. Just make sure they don’t distract the reader. Subtlety can go a long way. EXAMPLE: Nike History of Flight Nike takes you on an interactive timeline of their relationship with Michael Jordan in the style of a pop-up book. One-Page W
ebsites Since 80% of website visitors don’t navigate away from the homepage, fitting all the content onto one webpage can be efficient. To spice it up, HTML5, CSS3 and Javascript can make the page multi-faceted with tabs, animations and pop-ups. On the other hand, it isn’t suitable for all websites. For instance, e-commerce sites wouldn’t do so well if they were one page. This trend is better for sites with less content such as events, personal sites, products and micro sites. EXAMPLE: Interactive Day San Diego We had a lot of fun creating this one-page site for San Diego’s most interactive conference event. The best part: No Flash! Parallax Scrolling Parallax scrolling is a technique that has been used in video games for years and web design is making brilliant use of it. It’s when the background and foreground images move or change at different speeds to create a sense of depth. All you need is jQuery, CSS3 and good imagery. To take it even further, elements can pop out or move as the user scrolls or moves the mouse around. The possibilities can make one-page websites creative and interesting. EXAMPLE: Ben the Bodyguard This one-page website for an iPhone app blurs the line between a game and a website. Grid-Driven Layouts Inspired by print, editorial web layouts are perfect for constantly updated content and SEO. They add structure and organize information so it’s easier to scan and comprehend. Big, link-filled headers and footers also make finding information a cinch. The 960 grid system is the most popular to use since it’s adaptable to all screens. It simply uses CSS to help streamline web development workflow based on a width of 960 pixels. EXAMPLE: Good This multimedia news source treats its website as an interactive print publication. Typography As more browsers support font-replacement methods, web designers can integrate custom fonts without having to make them image-based. That means we don’t have to stick to the overused Arial, Times and Century Gothic fonts all the time. We can use bolder, bigger and funner typography that’ll be crisp and indexed to grab the user’s attention. Typography has the power to make or break a design. So we advise to use 1 or 2 fonts that are legible on all devices, and to save the big typography for headers, sub-headers and the like. EXAMPLE: Joel Andrew Glovier This developer’s portfolio stands out with colorful and impactful typography that isn’t overbearing. Large Backgrounds With high definition cameras, better image optimization, smarter loading methods and faster internet connections, large photos and intricate illustrations are no longer taboo on the web. Having them as a background can draw in the user, set the mood and have a lasting impression. As long as it’s relevant and doesn’t compete with the content, the imagery can tell a story faster than a paragraph of content. EXAMPLE: Mindgruve Our website incorporates large photo backgrounds that reflect our content and company. PS. Watch for the trolley on the home page. So there you have it, our top picks for web design trends. With the user in mind, they practice simple, intuitive and clever design with emphasis on content. However, everything needs a purpose for the message to be properly conveyed. Being too minimal and holding back information is just as bad as being cluttered. More importantly, if the technique doesn’t help your business goals, then there’s no point in using them either. With that said, as web design continues to explore new possibilities and break barriers (and us right there with it), we don’t see these design trends going anywhere for a while. Leer más …
