Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Diseño Web Flexible

by
Length:LongLanguages:
This post is part of a series called Design School for Developers.
Video in Web Design
Design School for Developers: It's a Wrap!

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

A menos que usted sea totalmente nuevo en la industria, o haya estado viviendo bajo una roca en unas tierras muy lejanas de otro planeta, pero usted habrá escuchado acerca del diseño flexible. Incluso, si usted no lo entiende completamente, esta obligado ha hacer algo para encontrar o interactuar con él en alguna manera o en otra.

En breve, el diseño web flexible es el arte de diseñar sitios web para multitud de dispositivos y tamaños de pantallas, así que hay una experiencia perfecta para cada usuario en todos los tamaños posibles.

El diseño web flexible es el mejor cuando es un dispositivo agnóstico, en donde usted no esta intentando diseñar para una resolución o tamaño en particular, tal como solo los tamaños para iPhone o iPads. En cambio, usted debería intentar diseñar con el contenido y diseño en mente y como este contenido fluye y se adapta a varios ambientes en los que podría estar o ser utilizado.


Diseñando para una Web Flexible

Utilizado para ser el caso que para acceder al internet tendrías que probar por una (y por lo general largo) computadora, con el familiar sonido del módem sonando mientras estas conectado. Ahora, aunque usted puede accesar al internet por medio de las computadoras, laptops, telefónos moviles, tablets, televisores, consolas de juegos, bueno, las lista es casi fin.

Responsive Web Design, written by Ethan Marcotte and published by A Book Apart, is a brilliant introduction to the principles of Responsive Web Design.
El Diseño Web Flexible, escrito por Ethan Marcotte y publicado por A Book Apart, es una brillante introducción a los principios del Diseño Web Flexible.

Ahora, con todo esto disponible a la mano, son grandes noticias. Más que nunca antes podemos estar conectados al internet a cualquier hora o lugar que podríamos querer. Si bien esto se da por hecho, para muchos esto, también, es necesario. Y con necesidad y acceso a menudo también se nos presentamos con impaciencia y la necesidad por cosas para trabajar, y trabajar con rápidez.

Debido a que los sitios web flexibles se vuelven mucho más comunes, incluso, para el público en general (todos fuera de la web y de las industrias creativas) que casi han llegado a esperarlo cuando están navegando en la web. Así que, resumiendo, el diseño web flexible es definitivamente, algo enorme.

Los Desafíos que Trae una Web Flexible

Trabajar con diseño flexible no es posible si sus desafíos. En primer lugar, hay un sinnúmero de dispositivos y tamaños de pantalla que tenemos que satisfacer. Desde extra-grandes hasta grandes pantallas, desde pequeñas hasta medianos (y todo intermedio), hay mucho en que pensar. Y, como estoy seguro que ya conoces bien un desarrollador, trabajando con diseños flexibles desde el lado técnico de las cosas, también puede volverse una pesadilla y hasta extremadamente difícil de manejar.

The mediaqueri.es website offers lots of inspiration for some top-notch responsive web designs.
El sitio web mediaqueri.es ofrece muchas inspiración para algunos diseños web flexibles de alto nivel.

Como con cualquier proyecto, las principales cosas en las que usted necesita pensar acerca del diseño web flexible son acerca del contenido del sitio web, es decir; cómo este contenido se adaptará en el diseño y cómo fluirá desde una página a otra. Necesita examinar cómo unirá los diferentes elementos de diseño con los que usted trabaja y asegurarse que todo es coherente y consistente.

La diferencia con el diseño web flexible es que también necesita pensar sobre cómo todos estos funcionan desde un tamaño a otro, o si esta basado en el ancho o la altura. Necesita pensar cuidadosamente sobre cómo trasladar todo esto a una pantalla pequeña o grande y cómo todos sus elementos de diseño, su contenido funcionará y todo los demás también. Necesita mantener la experiencia consistente, no importa el tamaño del sitio web.


Trabajando con Clientes y Manejando las Expectativas.

Nosotros, como diseñadores y desarrolladores en una industria tan acelerada, somos bastante afortunados. Tenemos que trabajar en algunos proyectos asombrosos y, por lo general, siempre estamos consiguiendo trabajo a la vanguardia de las tecnologías nuevas. Trabajar con el diseño web flexible es solamente una de esas cosas emocionantes que tenemos que hacer, pero con eso, viene un precio.

The Greenbelt Festival is a great example of responsive web design. Screenshots provided courtesy of mediaqueri.es.
El Greenbelt Festival es un magnífico ejemplo de diseño web flexible. Las capturas de pantalla fueron proporcionadas por cortesía de mediaqueri.es

Recuerda el artículo acerca de las tendencias y piense en las conclusiones que pudo tener acerca de si son buenas o malas. Piense también acerca de las palabras de moda, esas palabras que usted ve en un parpadeo en los negocios o en los sitios web de noticias acerca d estas tecnologías nuevas, emocionantes y crecientes. Bien, algunos de los clientes que usted tiene, pueden ser un poquito educados acerca de la web y entenderlo. Incluso, ellos mismos pueden trabajar en la web y solo necesitan una ayuda extra. Algunos de los clientes, sin embargo, pueden no estar tan bien educados acerca de la web y pueden ver estas palabras de moda como un fundamento, si o si. Voy a hablarle, brevemente, acerca de esos tipos de clientes en esta sección.

Estableciendo Lo Que un Cliente Quiere

Al principio de cualquier proyecto de diseño, usted debería estar probando establecer exactamente lo que su cliente quiere para salir del proyecto y los resultados que ellos esperan. Manejar las expectativas de los clientes puede ser algo difícil de hacer, sin embargo, es importante que usted siga seguro que su cliente entiende su proceso por completo.

A beautiful example of responsive web design in action can be seen on the Modern Green Home website. Screenshot courtesy of mediaqueri.es.
Un magnífico ejemplo del diseño web flexible en acción se puede ver en el sitio web Modern Green Home. Capturas de pantalla proporcionadas por cortesía de mediqueri.es

Cuando se trata del diseño web flexible, y particularmente, si han venido a usted con una de esas palabras de moda, usted lo que necesita es probar y ayudar a educar a sus clientes. Muy a menudo, estas palabras de moda se han escuchado en el transcurso, o se han representado equivocadamente, y depende de usted asegurar que sus clientes tiene un entendimiento apropiado del tema.

Por ejemplo, algunas veces usted podría, incluso, conseguir clientes potenciales viniendo hacia usted diciendo que quieren un sitio web que funcione en “iPhone y iPad”. En este caso, yo diría “Bien, eso es perfecto, pero sería estupendo que podamos enfocarnos en crearle un sitio web perfectamente flexible que funcionará en cualquier dispositivo y no solamente se restrinja a esos dos”. Ese es una estupenda manera de romper el hielo acerca del tema y es algo que deja abierto para usted a explica más hacia las fases de planeación.

Si sus clientes entienden apropiadamente el diseño flexible, entonces imagino que ellos estarán felices con el proyecto.

The Stuff & Nonsense website is a great example of responsive web design, also introducing different illustrations at different screen sizes. Screenshots provided courtesy of mediaqueri.es.
El sitio web Stuff & Nonsense es una excelente ejemplo del diseño web flexible, también introduce diferentes ilustraciones en diferentes tamaños de pantallas. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es

Si se toma el cliente adecuado para educar a los clientes, esto solamente puede funcionar a su favor. Por ejemplo, en mi propio trabajo, siempre trato de asegurar que mis clientes sienten como si estoy trabajando con ellos más que simplemente para ellos. Esto ayuda a facilitar el proceso de trabajar con sus clientes cuando esta diseñando para la web flexible.


Consejos y Técnicas para DWF

Esta bien para mi hablarle acerca de por qué es importante educar a los clientes y decirle cosas que usted, incluso, ya podría saber acerca del diseño web flexible. Bien, para la parte esencial, donde consigo decirle la mejor manera para diseñar sitio web flexibles.

The Great Discontent are well known for their interviews - and their website is a great example of magazine design on the web, as well as being a brilliant example of responsive web design. Screenshots provided courtesy of mediaqueri.es.
El Great Discontent son bien conocidos por sus entrevistas y su sitio web es un excelente ejemplo de diseño de revista en la web, así como también es un brillante ejemplo del diseño web flexible. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es

¿Y la respuesta? Bien, desafortunadamente, en realidad, ¡no hay un respuesta correcta! Siento mucho si eso no es lo que estabas buscando, pero como usted probablemente entenderá con su desarrollo y código, todos los procesos son diferentes y nadie parece trabajar de la misma manera. Esto, en su propia forma, es excelente ya que significa que siempre podemos encontrar nuevas formas de trabajar.

Sin embargo, no se preocupe, voy a darle algunos magníficos consejos para diseñar sitios web flexibles que usted debería ser capaz de poner en acción muy facilmente. Siéntase libre de escoger y elegir de entre todos estos, así como combinarlos dónde usted crea que podría ser apropiado. Pero también, ¡experimente! Pruebe diferentes maneras de diseñar sitios web flexibles y el que mejor se ajusta a usted.

Bocetos

Crear un boceto para una anchura estática de un sitio web en Photoshop (o en cualquier otro software gráfico) solía ser la forma en que la mayoría de las personas diseñaban sitios web, y por alguna razón, lo sigue siendo. ¡Y eso es perfecto! Si usted se siente cómodo usando una aplicación gráfica para diseñar el aspecto de su sitio web, entonces eso esta bien.

The UX London 2013 website is a beautiful example of design that scales from small to large gracefully. Screenshots provided courtesy of mediaqueri.es.
El sitio web UX London 2013 es un excelente ejemplo de diseño que cambia su tamaño desde uno muy pequeño hasta uno más grande y, lo hace de forma elegante. Capturas de pantallas proporcionadas por cortesía de mediaqueri.es

Sin embargo, no vaya a tratar de diseñar un boceto para cada ancho de cada resolución, se volvería loco y estaría ahí por muchísimo tiempo. En vez de eso, recuerde lo que aconsejaba el artículo sobre la estructura. Piense acerca de cómo miramos el contenido fluir en esas estructuras y cómo decidimos que todo debería ponerse junto. Prueba y translade esto a sus diseños y piense acerca de cómo esos elementos fluiran y se moverán cuando la pantalla cambie de tamaño.

Algunas de estos cambios serán mayores, y para esos puede ser adecuado crear un boceto pequeño para mostrar esto, pero para cualquier otro cambio, tal como adaptar el texto, después me quedaría viendo este tipo de cosas en el navegador una vez que empiece con el código prototipo. Si prefiere diseñar un boceto para cada fase de su diseño, entonces solamente hágalo, adelante, solo este consciente del tiempo que agregará a su proyecto.

Diseñando en el Navegador

Ahora, para un poco de controversia. Es probable que haya escuchado acerca de la discución acerca de diseñar en el navegador que ha estado dando vueltas los últimos meses, si es que no ha sido por más tiempo que eso.

The WWF website is a gorgeous example of web design that works brilliantly responsively as well. Screenshots provided courtesy of mediaqueri.es.
El sitio web WWF es un ejemplo magnífico del diseño web que, también funciona genialmente flexible. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es

Diseñar en el navegador es cuando vas de la fase de estructura (si es que ya ha hecho eso) directo hasta el navegador para empezar la fase de diseño en vez de trabajar con algún software de diseño gráfico. Si usted usa muchas herramientas en línea para ayudarse con la creación de diferentes elementos de su estructura de diseño (tal como crear una guías o refinar su tipografía) entonces este puede funcionar bien para usted.

Sin embargo, muchos diseñadores pueden sentirse como si batallan mientras están diseñando en el navegador, particularmente si hay más diseñadores que un codificador. La razón es porque se sienten restringida su creatividad un poco más, sientiendo que es más dificil para ellos sentirse como si pueden aparecer con ideas creativas, unicas y visualmente emocionantes.

The Next Web manages to display content in a way that is easy to digest and follow, even down to small screens. Screenshots provided courtesy of mediaqueri.es.
El sitio web The Next Web logra mostrat el contenido en una manera que es fácil de comprender y de seguir, incluso hacia abajo hasta las pantallas pequeñas. Capturas de pantallas proporcionadas por cortesía de mediaqueri.es

Aunque como un desarrollador, es lo más probables que sea extremadamente confortable usar código y, así que, podría ser una buena idea probar un poco con tratar de diseñar en el navegador y ver los resultados con los que aparezca.

“Decidiendo” en el Navegador.

Personalmente, este es mi favorito. Decidir en el navegador, significa que, tienes que hacer un poco de trabajo en softwares de diseño gráfico y otro poco en el navegador. Personalmente, creo que puedes conseguir mejores resultados de cómo ser verá un diseño hasta que el mismo diseño esté en el navegador. La tipografía, por supuesto, siempre se representará muy diferente en las aplicaciones gráficas que en el navegador, y es mucho más fácil crear prototipos y luego iterar rápidamente a través de las fases de diseño cuando usted esta en el navegador (aunque todo eso podría cambiar con la introducción de aplicaciones tales como Macaw).

The Microsoft website cleverly makes use of moving content and cropping images depending on the size of the viewport. Screenshots provided courtesy of mediaqueri.es.
El sitio web de Microsoft, ingeniosamente, hace uso al mover el contenido y recortar las imágenes dependiendo del tamaño de la ventana. Capturas de pantallas proporcionadas por cortesía de mediaqueri.es

Trabajar tanto con una combinación de maquetas y un trabajo en el navegador significa que usted puede darle mucha flexibilidad a sus diseño y a las decisiones que usted tenga que tomar. Aunque la clave para este término “decidir en el navegador” está en la primera palabra. Aunque muchas decisiones creativas se pueden hacer en los programas de diseño gráfico, el navegador es en dónde su elección final puede ser hecha.

Cuando trabajo en esta forma, encuentro que a menudo termino con una combinación de bocetos, diseñando patrones de bibliotecas (en programas de diseño gráfico y en HTML & CSS) y prototipos completos en HTML & CSS. Una combinación es excelente y muestra la evolución del sitio web desde el comienzo hasta lo que es, por suerte, empezar a llegar a ser un sitio web completo.

¿El diseño del Contenido primero, o el Diseño para Móviles primero o para el escritorio?

En primer lugar, si todavía no has aprendido de mis artículos en la sección “Antes de Comenzar”, bueno, siempre, siempre, siempre empieza trabajando en tus diseños con el diseño del Contenido primero. Esto significa que debería de asegurar que está trabajando con el contenido auténtico y que está previsto para ser utilizado en el sitio web que usted esta diseñando.

Philip House is a great example of how you can shift and move layouts when working with responsive web designs. Screenshots provided courtesy of mediaqueri.es.
Philip House es un excelente ejemplo de cómo puede cambiar y mover formatos cuando trabaja con diseños web flexibles. Capturas de pantallas proporcionadas por cortesía de mediaqueri.es

En segundo lugar, ya sea que usted empiece a trabajar con el diseño móvil primero o con el diseño para el escritorio (empiece con formato que tengan el ancho completo del escritorio) eso dependerá completamente de usted. Hay muchos debates acerca de esto en línea, pero en realidad, depende de usted tomar esa decisión. Si usted siente que es mucho más creativo empezando a trabajar con un tamaño grande y luego con uno más pequeño, o incluso, si lo construyo a la inversa, no hay ningún problema. Si empezará haciendo lo opuesto, y va desde un formato pequeño a uno grande!


Herramientas que lo Ayudarán a Diseñar Flexiblemente.

Vamos a resumirlo todo con algunos recursos útiles. Hay tantas herramientas que pueden ayudarle cuando usted está diseñando sitios webs flexibles, eche un vistazo:

Guías

Tipografía

Estilos de Guías y Bibliotecas de Patrones

Casos de Estudio

Varios

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.