Diseña y publica tus sitios rápidamente

Crea una página de aterrizaje para una app de iPhone

En este artículo recrearemos otro sitio con Breezi. El sitio de hoy es sobre una página de aterrizaje para una app de iPhone: Weather Notifier.

Weather Notifier

Weather Notifier – una página de aterrizaje para una app de iPhone

Video de construcción

Ve este video para saber cómo diseñar esta página paso por paso.

Pasos

Hemos dividido estos pasos en bloques, como en el primer artículo de recreación. Para esta publicación, usaremos:

  1. Header – Encabezado (autor, llamados a la acción)
  2. Intro (título y slogan)
  3. Contenido principal (proceso, app de Slideshow, funcionalidades)
  4. Footer – Pie de página (apps relacionadas)

Antes de empezar, ya debes tener tu sitio creado y utilizar el layout o punto de inicio llamado “Blank” (si no sabes cómo, revisa el artículo que vinculamos aquí arriba para ver cómo se hace).

Fondo de página

Para empezar, necesitamos establecer un fondo para toda la página. Haz clic en el dot de estilo del bloque de Encabezado y selecciona el botón llamado “Edit” en la sección de “Page Background”. Con esto, se abrirán las opciones de estilo.

Opciones de estilo para el fondo

Usaremos una imagen azul para el fondo

Selecciona un fondo azul y asegúrate que su configuración esté en “Repeat”.

Lo que sigue es asegurarnos de que los bloques que usaremos no tengan un fondo; es decir, deben ser transparentes. Abre el Bulk Style Editor al hacer clic en el botón de “Styles” de la barra inferior. Ahí, selecciona la opción de “Page” en el menú de la izquierda.

Bulk Style Editor para los bloques

Haz clic en las casillas de los bloques que deben ser transparentes en “Force Transparency”

1. Encabezado

Empezaremos por escoger un fondo para este bloque. Utilizaremos uno personalizado. Después, haremos que se repita horizontalmente en “Repeat Horizontally”.  Luego haremos que el “Top Spacing” sea de cero pixeles y que el espaciado inferior, “Bottom Spacing” sea de 21 pixeles.

Opciones de estilo para el header

Establece una imagen de fondo y cambia las opciones del espaciado superior e inferior

Ahora sigue preparar el espacio donde irán las apps. Necesitaremos 3 columnas con estos espacios: de izquierda a derecha, la primera debe medir 370, la segunda, 220 y, por último, 370 pixeles para la tercera columna. En la primera, la de la izquierda, instalaremos una app de Text o texto.

Instalando una app de texto

Una app de texto para la primera columna de izquierda a derecha

La tipografía debe tener este formato:

  • Tipografía: Droid Sans
  • Tamaño: 16
  • Color: #58595B
  • Alineación: a la derecha
Texto para el encabezado

Estiliza la app de texto en la primera columna con las características que te mencionamos

Lo que sigue es cambiar el espaciado superior (Top Spacing) a 20 px y el inferior (Bottom Spacing), a 25. Haz que el espaciado lateral (left/right) sea de cero pixeles.

Lo que sigue es instalar dos apps de Image o imagen. Una para la columna de en medio y la otra para la column a de la derecha. Elimina el espaciado superior e inferior para la imagen de en medio.

Dot de estilo de una app de imagen

Elimina el espaciado con el dot de estilo de la imagen

En ocasiones, las imágenes no aparecen del tamaño que queremos. Ajústalas al arrastrar la esquina inferior derecha hasta que la imagen esté al “100%”.

Cambiando el tamaño de una imagen

Si la imagen se cargó con un tamaño más grande que su tamaño original, redúcelo hasta el 100%

Lo que sigue es duplicar esta imagen para usarla en la columna de la derecha. Al duplicarla, nos ahorramos la tarea de tener que volver a cambiar su configuración o estilo.

Duplicando una app

Al duplicar la app, su condiguración y estilo se copiarán también

Cambia la app duplicada de lugar y reemplaza su imagen. Este es el resultado final del bloque de Header o encabezado:

Bloque de encabezado terminado

Así es cómo se verá el encabezado

2. Intro

El bloque de intro también es bastante fácil de llevar a cabo. Solamente necesitamos una app de imagen y otra de texto, en una sola columna, en una sola sección. Antes de empezar, debemos cambiar el fondo y hacer que se repita horizontalmente (“Repeat Horizontally”). Ajusta los espaciados: superior a 50 px y el inferior a 14.

Fondo para el bloque de Intro

Cambia la configuración del fondo del bloque en este panel

Una vez que termines con el fondo, podemos empezar con la app de Image, la cual utilizaremos para mostrar el título del bloque. Si deseas, puedes utilizar la tipografía “Amaranth”, con el color #1D7EA7 y una poca de inclinación al texto para obtener este resultado.

Una imagen como título

Puedes utilizar una app de texto para el título si así lo prefieres

Además, tienes que hacer más pequeño el espaciado inferior y dejarlo a 2 pixeles.

Lo que sigue es el slogan. Para esto necesitamos una app de Text. Instálala debajo de la app de imagen. Las opciones de estilo son: tipografía “Droid Sans” 18 y de color #414042.

Código hexadecimal

Agrega el código hexadecimal para obtener el color exacto en el texto

Para lograr que el slogan esté lo más cerca posible al título, reduciremos su “Top Spacing” a cero.

3. Contenido principal

Este es el bloque más complejo. Así es como se ve en el sitio original:

Weather Notifier

Crea un bloque de “Body” para recrear esta sección en Breezi

Para este bloque, debemos de usar 7 apps en 4 columnas. Las columnas deben de tener estas medidas (de izquierda a derecha): 360, 230, 210 y 160. No es obligatorio que tengan exactamente estas medidas pero queremos que tengan una proporción más o menos similar a las del sitio original.

Separando columnas

Divide las columnas con el signo de más ubicado en sus separadores y arrastra estos mismos separadores para hacer la columna más grande o chica

En la primera columna, debemos instalar una app de texto. Como sabes, utiliza estos estilos: “Droid Sans”, 30, de color azul (#0F4054). Haz que tenga una inclinación y que esté centrado.

Barra de herramientas

Utiliza la barra de herramientas para dar estos estilos al texto

Debajo de la app de texto, irá una de imagen. Después, agregaremos otra de texto debajo de la de imagne. Al final, debe verse así:

La columna de la izquierda

Así debe verse la primera columna una vez que esté terminada

Elimina todo el espaciado superior e inferior para la app de imagen.

Las apps de texto deben tener 25 px para el espaciado superior e inferior (Top y Bottom Spacing). Estilo: Droid Sans, 15, en azul (#0F4054).

En la siguiente columna deberás de colocar una de nuestras apps más atractivas: la app de Framed Slideshow.

App de Framed Slideshow en su forma predeterminada

Utilizaremos esta app para que nuestro sitio sea parecido al original

En “Edit Settings” edita la configuración de la app de la siguiente manera:

  • Frame: iPhone (black)
  • Effect: Slide
  • Stay On Image For (Seconds): 6
  • Fading Speed: Medium

Opciones de personalización de la app de Framed Slideshow

Reduce la app de Framed Slideshow hasta un 34% para que quepa bien en su columna.

Framed Slideshow

Cambia el tamaño para que quepa bien

Luego tenemos que hacer doble clic en cada una de las imágenes predeterminadas en las diapositivas para reemplazarlas por unas imágenes propias. Agrega una cuarta diapositiva (ya que, de forma predeterminada, solamente trae 3) y reemplaza su imagen también.

En la columna de enseguida: una app de texto arriba y una de imagen abajo.

App de texto

Recuerda que estamos utilizando la tipografía de Droid Sans

El texto tendrá el mismo color (#0F4054), tipografía (Droid Sans) y tamaño (18) para el título de la columna. Para el resto del texto, usa el tamaño 14. En cuanto a su dot de estilo, haz que el espaciado lateral (left/right) sea cero; el de arriba, 10; el de abajo, 14.

En cuanto a la imagen, la utilizaremos como botón (es decir, hay que vincularla). Debe verse como en la imagen a continuación.

El editor de imágenes

Haz clic en el ícono del eslabon para vincular la imagen

En la última columna, la de la derecha, agregaremos otra app de texto (Droid Sans, el color azul que hemos estado utilizando todo este tutorial, tamaño 12 para el texto normal y 16 y e inclinado para el título).

Esta es la última columna del bloque principal

Esta es la última columna del bloque principal

¡Hemos terminado el bloque número 3!

4. Pie de página

Y, para el último bloque de nuestro tutorial, necesitaremos 2 secciones y 4 imágenes.

En la primera sección, solamente utilizaremos una imagen y la centraremos:

Dot de estilo para la imagen

Elimina el espaciado superior e inferior

Dividiremos la segunda sección en 3 columnas. Medidas: 400, 160 y 400 pixeles (de izquierda a derecha).

Cambiando el tamaño de las columnas

Cambia el tamaño de las columnas para que el layout se parezca al del sitio original

Agregaremos 3 imágenes, una en cada columna. Cada una tendrá una alineación especial, dependiendo de la columna en la que se encuentre.

La imagen de la columna derecha, estará alineada a la izquierda; la del centro, debe estar centrada y la imagen de la columna izquierda, debe estar alineada a la derecha. Es decir, la alineación debe ser opuesta a la columna que la contiene. Abre el dot de estilo de imagen para alinearla (alignment).

Opciones de alineación

Utiliza estas opciones para alinear las imágenes de acuerdo a las instrucciones que te dimos

Elimina el espaciado lateral de las imágenes. Además, aumenta su espaciado inferior a 50 px para que haya espacio debajo de las imágenes.

¡Eso es todo! ¡Hemos terminado la página de aterrizaje!

¿Te gustó este artículo? ¿Te pareció interesante, útil o inspirador? Háznoslo saber en la sección de comentarios.