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.
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.
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.
Recuerda
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.
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.
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.
¿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.
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
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.
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
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.
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
- Sitio web Gridset
- Sitio web Gridpak
- Sitio web Twitter Bootstrap
- Sitio web ZURB Foundation
- Sitio web Inuit.css
Tipografía
Estilos de Guías y Bibliotecas de Patrones
- Sitio web Styletil.es
- Sitio web Brad Frost´s Pattern Lab
- Sitio web Paul Robert Lloyd´s Barebones
- Sitio web Pea.rs
Casos de Estudio
- David Bushell: Un caso de estudio del Diseño Flexible
- David Bushell: Gloople: Una revisión del Diseño Flexible
- David Bushell: Diseño Flexible para Reyes del Transfer
- Caso de estudio Diseño Flexible NHS
- Y nuestra propia sección Casos de Estudio tiene algunos excelentes tips sobre diseño flexible.
Varios
By
