Crea un diseño responsive de forma sencilla con LayoutIt!

Hace poco estuve probando un servicio online llamado LayoutIt! que permite crear de forma sencilla diseños adaptables (responsive) y fluidos (fluid) con JavaScript, HTML5 y CSS3. Se basa en el framework Bootstrap el cual seguramente algunos de ustedes ya conozcan.

Puede ser muy útil para diseñar una web sin tener grandes conocimientos de programación, simplemente hay que seleccionar una plantilla como base o bien comenzar desde un contenedor en blanco y arrastrar (drag-and-drop) los distintos elementos que formarán el diseño.

servicio layoutit

A medida que vamos creando la estructura podremos ver una vista previa en el navegador y finalmente descargar el código completo incluyendo la estructura de directorios, imágenes, css, less y js.

descarga del frontend creado con layoutit

LayoutIt! no es un constructor de sitios propiamente dicho, sólo genera el frontend o diseño que verán los visitantes de la web… cabe mencionar que el código que se genera es muy limpio y por supuesto se puede seguir editando y adaptando para ser integrado con nuestro backend, es decir todo lo que funciona del lado del servidor como por ejemplo el lenguaje PHP.

El servicio lo descubrí gracias a un artículo de Pablo (@kabytes) y como él lo menciona puede ahorrarnos algunas horas de trabajo sobre todo si no somos muy hábiles con el maquetado web.

Enlaces: layoutit.com | @Layoutit

5 comentarios en «Crea un diseño responsive de forma sencilla con LayoutIt!»

  1. Espera, y disculpa que este tan poco informado, tengo mucho tiempo sin bloguear mucho y ademas no se bien sobre ello pero… ¿Estas plantillas pueden ponersele a un sitio de Blogger? Agradezceria tu pronta respuesta Ale.

    Responder
    • Eso creo que se tendría que hacer de forma manual.

      La herramienta crea un diseño adaptable a cualquier pantalla, es decir que la misma versión web se utilizaría para los móviles porque los elementos se ajustan. Es una de las ventajas de usar un diseño adaptable, no tener que crear otra versión del sitio exclusiva para los móviles.

      Responder

Deja un comentario