Presentamos Launchpad para Sketch

Publique sitios web directamente desde Sketch, sin necesidad de codificación.

Launchpad convierte su diseño a HTML y CSS y publica su diseño como un sitio web real en vivo.

Actualización: Launchpad ahora es parte del kit de herramientas Anima, que permite a los diseñadores crear sitios web interactivos y receptivos, todo dentro de Sketch.
Cree prototipos interactivos e interactivos de alta fidelidad, todo dentro del boceto

Hace 4 meses lanzamos un nuevo producto que cambia la forma en que los diseñadores diseñan. Auto-Layout for Sketch permite a los diseñadores crear diseños receptivos de manera fluida.

Hace 2 meses presentamos una nueva función llamada Pilas. Las pilas son Flexbox dentro de Sketch. Esta poderosa característica hizo que diseñar diseños receptivos fuera aún más fácil y mejor.

Estos hitos han allanado el camino para nuestro nuevo producto.

Nuestro nuevo producto permite a los diseñadores publicar sitios web con un solo clic, directamente desde Sketch.

Visite el sitio web: https://launchpad.animaapp.com

Hasta ahora, los diseños de Sketch no eran más que píxeles. Hoy se vuelven vivos. Los diseños de bocetos de sitios web se convierten en sitios web reales. Los diseños que se hicieron receptivos con Auto-Layout ahora responderán de la misma manera en un navegador en un sitio web real.

Launchpad es una plataforma como servicio para diseñadores. Toda la interfaz se integra perfectamente en Sketch para que pueda sentirse como en casa.

Launchpad for Sketch es una herramienta de publicación web para:

  • Páginas de aterrizaje
  • Sitios web de marketing
  • Sitios web estáticos

Launchpad no es compatible actualmente con:

  • Sitios web dinámicos con Javascript
Es perfecto para las páginas de destino y los sitios web de marketing.

Descripción general de las características principales

  • Puntos de interrupción: una forma de hacer que su diseño se vea genial en dispositivos móviles, tabletas o computadoras de escritorio.
  • Enlaces: cada mesa de trabajo es una página web. Puede configurar enlaces entre mesas de trabajo o sitios web externos.
  • Formularios: puede configurar formularios y permitir que los visitantes del sitio web envíen información como su información de contacto.
  • Videos: puede incrustar un reproductor de video en el sitio web. YouTube, Vimeo, MP4 o GIF son compatibles.
  • Análisis: realice un seguimiento de los visitantes con su proveedor de análisis favorito.
  • SEO - Metaetiquetas para motores de búsqueda y sitios web de redes sociales.

¡Vamos a sumergirnos en cada una de estas características!

Puntos de corte

Los puntos de interrupción son una forma de hacer que su diseño se vea genial en dispositivos móviles, tabletas o computadoras de escritorio.

Para crear puntos de interrupción

  1. Diseñe una página web en múltiples mesas de trabajo donde cada mesa de trabajo sea para un ancho de pantalla específico.
  2. Con el botón Puntos de interrupción, marque las múltiples mesas de trabajo como la misma página web.
Diseño por Zhenya y Artem

Campo de golf

Hay 3 tipos de enlaces:

  1. Enlace de página: un enlace entre diferentes mesas de trabajo
  2. Enlaces de anclaje: un enlace dentro de la misma mesa de trabajo
  3. Enlaces externos: un enlace a un sitio web externo
Crear enlace a diferentes mesas de trabajoCrear un enlace de anclajeCrear un enlace externo

Formas

Los formularios permiten a los visitantes del sitio web enviar información como su información de contacto.

Un formulario se compone de:

  • Entradas de texto: una o más capas de entrada de texto
  • Botón Enviar: una capa de botón Enviar

Al configurar una capa como botón Enviar, las opciones del formulario revelarán:

  • Correo electrónico: dirección de correo electrónico opcional para enviar notificaciones cuando los visitantes envían información
  • Hoja de cálculo: un nombre opcional para una hoja de cálculo que puede ver y descargar como CSV de todas las entradas
  • Página de éxito: opcional Dónde redirigir al visitante una vez que su envío ha sido exitoso.
  • Página de error: opcional Dónde redirigir al visitante en caso de que falle el envío.

Ejemplo

Formulario de contacto en vivo
Archivo de boceto

Basado en el formulario de contacto de Sophinie Som

Videos

Puede incrustar un reproductor de video en su sitio web configurando una capa como video.
Al seleccionar la capa de video, podrá proporcionar un enlace a un video, que se presentará en el sitio web.

Las URL de video admitidas son: YouTube, Vimeo, MP4 y GIF

Ejemplos

Demostración de página de destino

  • Sitio web en vivo abierto
  • Descargar archivo de croquis
  • Video por Coverr

Demostración de reproductores de video

  • Sitio web en vivo abierto
  • Descargar archivo de croquis

Analítica

Para rastrear el tráfico entrante en su sitio web, puede suscribirse a cualquiera de los proveedores de Analytics y pegar el fragmento de código que proporcionan.

Resumen de pasos:

  1. Regístrese para obtener un proveedor de análisis de su elección.
  2. Cree un proyecto de seguimiento de sitios web en el panel del proveedor de Analytics.
  3. Copie el fragmento de código de seguimiento que proporcionan a su mesa de trabajo.
  4. Pegue el fragmento de código de seguimiento en la sección Launchpad Analytics en Administrar sitio web.

Google analitico

Más información sobre Analytics está disponible aquí.

SEO

Las metaetiquetas son parte de HTML. Permiten proporcionar información sobre el sitio web que en realidad no se presenta a los visitantes, pero que es utilizada por un software que puede leer estas etiquetas y usar su información.

  • Los motores de búsqueda como Google usan Meta Tags para indexar el sitio web en su base de datos.
  • Los sitios web de redes sociales usan Meta Tags especializadas para permitir la vista previa de páginas web dentro de sus feeds.

Puede editar estas etiquetas para optimizar la forma en que los motores de búsqueda, los sitios web de redes sociales y más ven su sitio web.
Una mejor información, como una imagen y una descripción clara, puede aumentar el tráfico a su sitio web.

Cree prototipos interactivos e interactivos de alta fidelidad, todo dentro del boceto
  • Empezar
  • De tus amigos en Anima App
  • Para debate, siéntase libre de unirse a nuestro grupo de Facebook