EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Guía de estilo
            Guía de estilo, importancia en el diseño de interfaces
            24/08/2019
            Mapas conceptuales
            Mapas conceptuales, mapas de navegación y sitemaps
            25/08/2019

            Prototipos en el diseño de interfaces web

            Prototipos en el diseño de interfaces

            Prototipos en el diseño de interfaces web

            Tabla de contenidos

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

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

            10. Prototipos web

            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
            • Figma: figma.com

            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

            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
            Compartir

            UD1. Planificación de interfaces gráficas

            • 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. Gestores de contenido o CMS
            • 14. Pasos para crear una página web
            • 15. Referencias y recursos para la planificación de interfaces gráficas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results