Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Muse CC práctico: Diseño de landing page

Hacer responsive nuestra landing page

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Generamos los puntos de rotura o breakpoints en las posiciones 768 px y 480 px para luego realizar los ajustes necesarios, los cuales incluyen ajustes de tamaño y fijación de posiciones respecto a la página.
06:04

Transcripción

Vamos ahora a generar los diferentes "break points" o puntos de rotura. Los puntos de rotura o "break points" son los puntos donde va a haber un cambio de diseño importante, con el fin de adaptar el contenido a otros dispositivos. Vamos a ubicarnos entonces en esta regla. Hago un clic derecho, selecciono la opción de Añadir punto de rotura, y el tamaño que voy a utilizar es 768 pixeles. Hago clic y aquí tenemos el punto de rotura o "break point" de 768 pixeles, y aquí "break point" de 768 pixeles. Tomo este formulario y lo desplazo hacia la parte inferior. Tomo esta caja, ajusto el borde izquierdo tendiendo en cuenta el margen, y lo mismo hago en la parte derecha. Arrastro teniendo en cuenta este margen. Tomo esta caja, realizo el mismo proceso. Tomo estos tres elementos, los desplazo hacia la parte inferior. El formulario de contacto lo vamos a centrar, entonces utilizo el panel de alinear. Lo centro, desplazo un poco más estos elementos y vamos a verificar cómo se están comportando en el momento en que su tamaño sea flexible. Observen lo que está pasando con el formulario de contacto. Eso está pasando porque, recuerden, anteriormente nosotros habíamos seleccionado este elemento y le habíamos dicho que mantuviera una posición en la parte derecha. Observen, vamos a seleccionar este "widget" o el formulario, vamos al panel Transformar y en el área Fijar a página está activa la función de la derecha. Vamos a activar esta función o el ícono del centro. Entonces lo que le estamos diciendo es que este elemento que está centrado mantenga también su posición respecto al centro de la página. Miremos el cambio. Está funcionando perfectamente. Ahora tengamos en cuenta que este punto de rotura de 768 pixeles está orientado a tipo "touch". Vamos a seleccionar este campo, vamos a mirar el tamaño, y el alto de este campo es de 26 pixeles. Las recomendación es que estos campos tengan al menos 40 pixeles de ancho. Esto es para facilitar la interacción del usuario mediante el "touch". Así que vamos a cambiar a 40 pixeles de ancho. Antes de eso, desmarco esta casilla para tener la proporción deshabilitada. Observen como amplía también la casilla que tenemos en la parte inferior. Y voy a hacer lo mismo con el botón. Todos los elementos con los cuales interactuemos, voy a modificarles su tamaño. Ahora, como tenemos espacio, entonces vamos a cambiar el tamaño a 350 nuevamente; 350 y 350. Por supuesto, los espacios verticales se perdieron. Entonces desplazamos estos elementos. Perfecto. Verificamos qué pasa cuando esto sea flexible. Ahora vamos a agregar otro punto de rotura. El tamaño en este caso va a ser 480 pixeles. Hago clic en OK, hacemos los ajustes necesarios y nuevamente vamos a cambiar el tamaño de estos campos, básicamente porque cuando veamos este sitio web en algunos dispositivos "smartphone" de forma vertical, los 350 pixeles van a ser demasiado al ancho. Y listo, tenemos entonces los elementos que hacen parte del "break point" de 960, los elementos que hacen parte del "break point" de 768 pixeles "break point" de 480 pixeles. Vamos a previsualizar todo el sitio y vamos ahora a simular los diferentes "break points". Este es el de 980 pixeles, 768 y 480. Yo veo algo raro con este de 768, parece que no está correctamente alineado este formulario. Vamos entonces al "break point" de 768, verificamos la alineación. era un error en la parte de diseño. 960, 768 y 480 pixeles. De esa manera terminamos tanto el diseño del "landing page" como el proceso para hacer este "landing page" responsive. Dado el objetivo de conversión del "landing page", debemos asegurarnos que el usuario pueda utilizar cualquier dispositivo para acceder al mismo.

Muse CC práctico: Diseño de landing page

Lleva a la práctica tus conocimientos de Adobe Muse CC con este ejemplo sobre la creación de una landing page con comportamiento responsive y correctamente estructurada.

47 min (15 Videos)
Actualmente no hay comentarios.
 

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.