EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Prototipos en el diseño de interfaces web

            Prototipos en el diseño de interfaces

            Prototipos en el diseño de interfaces web

            Los prototipos web son dibujos o diseños de las diferentes páginas y secciones que van a componer un sitio web.

            Contenidos del artículo

            • 10. Prototipos web (web prototypes)
            • 10.1. Boceto (sketch)
            • 10.2. Esquema de página (wireframe)
            • 10.3. Maqueta (mockup)
            • 10.4. Prototipo (prototype)

            Una vez que se han estudiado los componentes de una web y comprendido la importancia de la guía de estilo, el siguiente paso es estudiar los prototipos web. Los prototipos son versiones interactivas de un sitio web o aplicación que se utilizan para probar y mejorar el diseño y la funcionalidad antes de su lanzamiento. Al trabajar con prototipos, podemos experimentar con diferentes opciones de diseño y recibir comentarios de los usuarios para mejorar la experiencia del usuario final.

            10. Prototipos web (web prototypes)

            El diseño conceptual de una web está formado por representaciones de las páginas y secciones que van a componer el sitio. Los procesos que se incluyen dentro del prototipado son una parte esencial a la hora de definir los menús y los elementos que constituyen una web.

            Hay distintas fases dentro del prototipado web. No es necesario llevarlas todas a cabo pero sí muy recomendable para detectar cualquier problema de concepto. Las fases del prototipado sirven para definir los procesos, realizar cambios y pruebas antes de subir a producción una aplicación web. Además, el uso de prototipos nos ayuda a involucrar al cliente en la fase previa al desarrollo y así adecuar el proyecto a sus necesidades.

            Las diferentes fases del prototipado web son: boceto (sketch), esquema de página (wireframe), maqueta (mockup) y prototipo (prototype). En inglés se conoce a este proceso como SWMP, tal y como se puede ver en la siguiente figura.

            SWMP

            Prototipos SWMP
            Figura 10.1 SWMP

            10.1. Boceto (sketch)

            El sketch es un dibujo o boceto inicial de un sitio web. Este dibujo poco detallado puede estar realizado sobre papel, pizarra o cualquier formato que permita realizar cambios de manera rápida. Se trata de un diseño de muy bajo detalle en donde se visualiza por primera vez el conjunto de elementos fundamentales de una web.

            10.2. Esquema de página (wireframe)

            Un wireframe es la representación de la estructura básica de la página web en la que se especifican los elementos de forma esquematizada. Es un diseño a bajo nivel en el que se establece claramente la jerarquía de los elementos, los contenedores y la organización del contenido.

            Se suelen utilizar herramientas como las siguientes:

            • Balsamiq Mockups: balsamiq.com
            • Gliffy: gliffy.com
            • Wireframe: wireframe.cc

            Tambien existen los wireflows o árboles de navegación. Se trata de una representación del conjunto de wireframes estructurados en un flujo que nos indica el comportamiento y la navegación entre las distintas pantallas de la web.

            Prototipos: wireflow
            • Draw.io: app.diagrams.net
            • Omnigraffle: omnigroup.com/omnigraffle
            • Wireflow: app.wireflow.co

            10.3. Maqueta (mockup)

            Un mockup es una representación a medio nivel en el que se incluye imágenes, tipografías y colores, aunque no tiene por qué ser definitivos. La finalidad del mockup es conseguir una versión avanzada del diseño de la web que nos permita evaluarlo en su conjunto, la detección temprana de puntos débiles y la realización de cambios sin que sea demasiado costosa.

            • Balsamiq: balsamiq.com
            • MockFlow: mockflow.com

            10.4. Prototipo (prototype)

            El prototipo es la representación más detallada de la web y dispone de interactividad para comprobar el comportamiento y la experiencia de usuario. Es, por tanto, un diseño al más alto detalle y la última fase de conceptualización antes de la implementación web.

            Por norma general, los colores, las tipografías, los iconos, y demás artefactos gráficos utilizados en el prototipo serán los que se utilicen en la página web. Sin embargo, en muchos casos, se llama también prototipo a una versión con menos detalle pero que dispone de interactividad.

            • Proto.io: proto.io
            • Sketch: sketch.com
            • Adobe XD: adobe.com
            • Figma: figma.com

            Los prototipos interactivos permiten la realización de pruebas más completas y profundas del diseño web, descubriendo aspectos de esta que de otra manera no habrían sido planteados.

            • Marvel: marvelapp.com
            • InVision: invisionapp.com
            • Figma: figma.com

            ¡Esperamos que hayas encontrado este artículo sobre prototipos útil e inspirador! Si deseas sumergirte más en el mundo del diseño y llevar tus habilidades al siguiente nivel, explora el tutorial de Figma.

            Navegación de entradas

            ← Guía de estilo, importancia en el diseño de interfaces web
            Mapas conceptuales, mapas de navegación y sitemaps →

            Tutorial de Diseño de Interfaces

            • 1. Evolución del diseño web
            • 2. Interacción persona-ordenador
            • 3. Elementos de identificación, navegación, contenidos e interacción
            • 4. Componentes de una interfaz web
            • 5. Elementos conceptuales: punto, línea, plano, volumen
            • 6. Elementos visuales: forma, medida, color, textura
            • 7. Elementos de relación: dirección, posición, espacio, gravedad
            • 8. Elementos prácticos: representación, significado y función
            • 9. Guía de estilo: color, tipografía e iconos
            • 10. Prototipos web
            • 11. Mapas conceptuales y mapas de navegación
            • 12. Características: usable, visual, educativa y actualizada
            • 13. Tutorial Figma
            • 14. Gestores de contenido: los CMS más utilizados

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados