Share
A menos que seas totalmente nuevo en la industria, o hayas vivido bajo una roca en las lejanas tierras de otro planeta, habrás oído hablar del diseño responsivo. Incluso si no lo entiendes completamente, es probable que sea algo con lo que te habrás encontrado o interactuado de alguna manera u otra..
En resumen, el diseño web sensible es el arte del diseño de sitios web para una gran cantidad de dispositivos y tamaños de pantalla, para que haya una experiencia óptima para cada usuario en cada tamaño posible.
El diseño web sensible está en su mejor momento cuando se trata de un dispositivo agnóstico; donde no tiene la intención de diseñar para resoluciones o tamaños particulares, como los tamaños de iPhone o iPad solamente. En su lugar, debe apuntar a diseñar teniendo en cuenta el contenido y el diseño, y cómo este contenido fluye y se adapta a los distintos entornos en los que se puede ver o utilizar..
Solía ser el caso de que para acceder a Internet tendría que probar a través de una computadora (generalmente muy grande), con los sonidos familiares del módem sonando mientras se conectaba. Ahora, sin embargo, puede acceder a Internet a través de computadoras, computadoras portátiles, teléfonos móviles, teléfonos inteligentes, tabletas, televisores, consolas de juegos; la lista parece casi infinita..
Responsive Web Design, escrito por Ethan Marcotte y publicado por A Book Apart, es una brillante introducción a los principios de Responsive Web Design.. Ahora, por un lado, esta es una gran noticia. Más que nunca, podemos estar conectados a Internet en cualquier momento o lugar que deseemos. Si bien esto se da por sentado, para muchos también es necesario. Y con la necesidad y el acceso a menudo también nos presentan con impaciencia y la necesidad de que las cosas funcionen y trabajen rápidamente..
Debido a que los sitios web receptivos son cada vez más comunes, incluso el público en general (por lo tanto, todos los que están fuera de la web y las industrias creativas) casi lo esperan cuando navegan por la web. Así que, en definitiva, el diseño web sensible es definitivamente una gran cosa.
Trabajar con un diseño responsivo no está exento de desafíos. En primer lugar, hay una multitud de dispositivos y tamaños de pantalla que debemos atender. Desde pantallas extragrandes hasta pantallas grandes, desde pequeñas a medianas (y todo lo demás) hay mucho en que pensar. Y, como estoy seguro de que ya sabes que eres un desarrollador, trabajar con un diseño sensible desde el punto de vista técnico también puede convertirte en una pesadilla y ser extremadamente difícil de manejar.
El sitio web mediaqueri.es ofrece mucha inspiración para algunos diseños web de primera categoría.. Al igual que con cualquier proyecto, las principales cosas en las que debe pensar con un diseño web responsivo son el contenido del sitio web, cómo este contenido encaja en el diseño y cómo fluye el contenido de una página a otra. Debe observar cómo los diferentes elementos de diseño que tienen trabajan en conjunto y asegurarse de que todo se sienta coherente y coherente..
La diferencia con el diseño web adaptable es que también debe pensar en cómo funciona todo esto de un tamaño a otro, ya sea en base a la anchura o la altura. Debe pensar detenidamente cómo todo esto se traduce en una pantalla más pequeña o más grande y cómo funcionan todos sus elementos de diseño, su flujo de contenido y todo lo demás. Debe mantener la experiencia consistente, sin importar el tamaño del sitio web.
Nosotros, como diseñadores y desarrolladores en una industria tan acelerada, tenemos mucha suerte. Trabajamos en algunos proyectos increíbles y, por lo general, siempre trabajamos a la vanguardia de las tecnologías nuevas y emergentes. Trabajar con un diseño web sensible es solo una de esas cosas emocionantes que podemos hacer, pero con eso, viene un precio.
El Greenbelt Festival es un gran ejemplo de diseño web sensible. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es.. Pensar en
Al comienzo de cualquier proyecto de diseño, debe tratar de establecer exactamente qué es lo que su cliente desea obtener del proyecto y cuáles son los resultados que espera obtener. Gestionar las expectativas de sus clientes puede ser una tarea difícil, pero es importante que se mantenga en ellas para asegurarse de que sus clientes entiendan completamente su proceso..
Un hermoso ejemplo de diseño web sensible en acción se puede ver en el sitio web de Modern Green Home. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es.. Cuando se trata de diseño web sensible, y especialmente si han venido con una de estas palabras de moda, debe intentar y ayudar a educar tus clientes Muy a menudo, estas palabras de moda se han escuchado al pasar, o se han representado incorrectamente, y depende de usted asegurarse de que su cliente tenga una comprensión adecuada del tema..
Por ejemplo, a veces es posible que algunos clientes potenciales acudan a usted diciendo que querían un sitio web que funcionara en "iPhone y iPad". En este caso, diría: "Bueno, eso está perfectamente bien, pero lo que sería genial es que podemos centrarnos en crearle un sitio web perfectamente receptivo en el que funcionará". alguna dispositivo y no solo estar restringido a esos dos ". Eso es un gran rompe hielo en el tema y es algo que lo deja muy abierto para que pueda explicar con más detalle las etapas de planificación..
Si su cliente entiende correctamente el diseño responsivo, entonces me imagino que estarán más contentos con el proyecto..
El sitio web de Stuff & Nonsense es un gran ejemplo de diseño web sensible, que también presenta diferentes ilustraciones en diferentes tamaños de pantalla. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es.. Si se toma el tiempo de educar adecuadamente al cliente, solo puede funcionar a su favor. Por ejemplo, en mi propio trabajo, siempre trato de asegurar que mis clientes sientan que estoy trabajando con ellos, en lugar de simplemente para ellos. Esto ayuda a facilitar el proceso de trabajar con sus clientes al diseñar para la web receptiva.
Me parece bien hablar de por qué es importante educar a los clientes y contarle cosas que quizás ya sepa sobre el diseño web sensible. Ahora para el meollo de la cuestión, donde puedo decirles las mejores formas de diseñar sitios web receptivos.
The Great Discontent son bien conocidos por sus entrevistas, y su sitio web es un gran ejemplo de diseño de revistas en la web, además de ser un ejemplo brillante de diseño web sensible. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es.. ¿Y la respuesta? Bueno, desafortunadamente no hay una correcta! Lo siento si eso no es lo que estaba buscando, pero como probablemente entenderá con su desarrollo y codificación, los procesos de todos son diferentes y nadie parece funcionar de la misma manera. Esto, a su manera, es genial, ya que significa que siempre podemos encontrar nuevas formas de trabajar.
Sin embargo, no se preocupe, le daré algunos consejos principales para diseñar sitios web receptivos que debería poder poner en práctica con bastante facilidad. Siéntase libre de elegir y elegir entre todos estos, además de combinarlos donde crea que podría ser apropiado. también experimentar! Pruebe un montón de formas diferentes para diseñar sitios web receptivos y ver qué se adapta tú mejor.
La creación de una maqueta para un sitio de ancho estático en Photoshop (o cualquier otro software de gráficos) solía ser la forma en que la mayoría de las personas diseñaban sitios web, y para algunos, todavía lo es. Eso es absolutamente bien! Si te sientes cómodo usando una aplicación de gráficos para diseñar el aspecto de tu sitio web, está bien..
El sitio web UX London 2013 es un hermoso ejemplo de diseño que se adapta con gracia de pequeño a grande. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es.. Pero no intente diseñar una maqueta para cada resolución o ancho; Te volverías loco y estarías allí por mucho tiempo. En su lugar, piensa en el artículo de wireframing. Piense en cómo observamos el flujo de contenido de esos wireframes y cómo decidimos que todo debería encajar. Intente traducir esto a sus diseños y piense en cómo esos elementos fluirán y se moverán cuando cambie el tamaño de la pantalla.
Algunos de estos cambios serán importantes, y para esos entonces puede ser adecuado crear una pequeña maqueta para mostrar esto, pero para cualquier otro cambio, como la adaptación de texto, entonces me limitaré a observar este tipo de cosas en el Navegador una vez que empieces a codificar prototipos. Si prefiere diseñar una maqueta para cada etapa principal de su diseño, entonces, adelante, tenga en cuenta el tiempo que esto agregará a su proyecto..
Ahora, por un poco de controversia. Es posible que hayas oído hablar del conjunto.
El sitio web de WWF es un magnífico ejemplo de diseño web que también funciona con brillante capacidad de respuesta. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es.. Diseñar en el navegador es cuando pasas de una etapa de alámbrico (si lo has hecho) directamente al navegador para iniciar la etapa de diseño, en lugar de trabajar con cualquier software de gráficos. Si usa muchas herramientas en línea para ayudarlo a crear diferentes elementos de su estructura de diseño (como crear grillas o refinar su tipografía), entonces esto puede funcionar realmente bien..
Sin embargo, muchos diseñadores pueden sentir que luchan con el diseño en el navegador, especialmente si son más un diseñador que un codificador. La razón de esto es que sienten que restringe un poco más su creatividad, lo que dificulta que sientan que pueden crear ideas creativas, únicas y visualmente emocionantes..
Next Web se las arregla para mostrar el contenido de una manera fácil de digerir y seguir, incluso en pantallas pequeñas. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es.. Pero como desarrollador, lo más probable es que te sientas extremadamente cómodo usando el código y, por lo tanto, sería una buena idea jugar intentando diseñar en el navegador y ver qué resultados obtienes..
Este es probablemente mi favorito personal. Decidir en el navegador significa que puedes trabajar un poco en el software de gráficos y un poco en el navegador. Personalmente, creo que no puede obtener un mejor resultado de cómo funcionará un diseño hasta que esté en el propio navegador. La tipografía siempre se representará de manera diferente en las aplicaciones de gráficos que en el navegador, y es mucho más fácil crear prototipos e iterar rápidamente a través de las etapas de diseño cuando está en el navegador (aunque todo esto podría estar a punto de cambiar con la introducción de aplicaciones como
El sitio web de Microsoft utiliza hábilmente el movimiento de contenido y el recorte de imágenes en función del tamaño de la ventana gráfica. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es.. Trabajar con una combinación de maquetas y trabajo basado en navegador significa que puede dar mucha flexibilidad a su diseño y las decisiones que debe tomar. Sin embargo, la clave de este término "decidir en el navegador" es la primera palabra. Aunque se pueden tomar muchas decisiones creativas importantes en el software de gráficos, el navegador es donde se puede hacer su elección final.
Cuando trabajo de esta manera, encuentro que a menudo termino con una mezcla de maquetas, bibliotecas de patrones diseñadas (en software de gráficos y en HTML y CSS) y prototipos completos de HTML y CSS. Una mezcla es excelente y muestra la evolución del sitio web desde el principio hasta lo que, con suerte, está comenzando a convertirse en un sitio web completo..
En primer lugar, si aún no ha aprendido de mis artículos en la sección "Antes de comenzar", siempre, siempre, siempre comience a trabajar en el contenido de sus diseños primero. Todo lo que esto significa es asegurarse de que está trabajando con contenido real y el contenido que se pretende utilizar en el sitio web que está diseñando..
Philip House es un gran ejemplo de cómo puede cambiar y mover diseños cuando trabaja con diseños web sensibles. Capturas de pantalla proporcionadas por cortesía de mediaqueri.es.. En segundo lugar, si trabaja con el dispositivo móvil primero (comenzando con diseños más pequeños) o con el escritorio hacia abajo (comenzando con los diseños de escritorio de ancho completo), depende completamente de usted. Hay muchos debates al respecto en línea, pero en realidad esta es tu propia decisión. Si te sientes más creativo yendo de un tamaño más grande a uno más pequeño, incluso si lo construyes de la manera opuesta, entonces está bien. Como está haciendo lo contrario, y va de pequeño a grande.!
Vamos a resumir las cosas con algunos recursos útiles. Hay tantas herramientas por ahí que pueden ayudarlo cuando esté diseñando sitios web receptivos, eche un vistazo:
Accentsconagua