Aprende Experience Design CC

Crear columnas y módulos en Adobe XD

¡Prueba gratis durante 10 días

nuestros 1217 cursos !

Prueba gratis Mostrar modalidades de suscripción
Es muy importante trabajar con columnas si queremos tener un diseño proporcionado, armónico y bien distribuido. Además deberemos pensar de forma modular para que, en cualquier momento, la página web o aplicación pueda crecer.

Transcripción

Es importante a la hora de trabajar con el diseño de una página Web o de una aplicación móvil, que lo hagamos por un lado de forma ordenada, que tengamos un buen reparto visual del diferente peso de los elementos para que nos de una sensación de armonía y sobre todo que pensemos que el día de mañana esa página puede crecer, pueden aparecer nuevas acciones, nuevos apartados y tenemos que tener la capacidad de posicionar esos apartados dentro de nuestra página, sin que esto nos rompa toda la estructura que ya tenemos montada o planificada a nivel visual. Para ello es muy útil trabajar con el sistema de columnas. Además de útil es altamente recomendado. Si nosotros queremos crear rápidamente un sistema de 12 columnas, en este caso vamos a diseñar una retícula para una página Web de 1280. Entonces si trabajamos con 12 columnas, podremos tener bastante variedad, tener reparto de módulos. Vamos a crear un rectángulo rápidamente. Le decimos que la anchura sea de 20. Y lo posicionamos en la esquina para trabajar con presición milimétrica 0,0. Entonces... vamos a duplicar 12 veces este rectángulo. Para ello usaremos la combinación de teclas "Ctrl+D". Podríamos ir a "Edición", "Duplicar", pero será más sencilla apretar 12 veces "Ctrl+D". Uno, dos, tres, cuatro, cinco, seis, siete, ocho, nueve, diez, once y doce. Si nosotros seleccionamos rectángulo que está arriba del todo y lo posicionamos en el lado opuesto, ahora podemos hacer una selección de todo y con las opciones del panel superior decir que nos haga una distribución horizontal. Automáticamente nos ha generado esas 12 columnas, donde ahora podemos trabajar de forma modular y de un modo visualmente muy armónico. Vamos a ver un ejemplo. Yo puedo trabajar, por ejemplo, y decirle que vamos a crear una de tres. Vamos a decir que los rellene de color rojo. Entonces voy a poder hacer 4 módulos sin ningún problema. Si en lugar de 4 módulos quiero trabajar con 3 módulos, puedo utilizar el mismo sistema que no me va a alterar en absoluto. y obviamente va a ocurrir lo mismo si quiero trabajar con únicamente 2 módulos. Entonces vamos a suprimir aquí y vamos a posicionar esto por aquí. Duplicamos... Realmente trabajar con un sistema de 12 columnas va a hacer que nuestra página sea muy flexible y que podamos añadir contenido constantemente, sin que esto nos termine de alterar toda la estructura de la página o de la aplicación en la que estemos trabajando.

Aprende Experience Design CC

Descubre esta novedosa herramienta que pone Adobe a tu disposición, Adobe XD, para trabajar la experiencia de usuario y todo el diseño UX e UI de tus aplicaciones y webs.

52 min (18 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:2/12/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.