{"id":934,"date":"2014-05-16T05:34:55","date_gmt":"2014-05-16T10:34:55","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=934"},"modified":"2024-11-01T11:49:24","modified_gmt":"2024-11-01T16:49:24","slug":"diferencias-entre-sketch-wireframe-mockup-y-prototipo","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/diferencias-entre-sketch-wireframe-mockup-y-prototipo\/","title":{"rendered":"Diferencias entre sketch, wireframe, mockup y prototipo"},"content":{"rendered":"<p>La intenci\u00f3n de este art\u00edculo es dar respuesta a las preguntas:<\/p>\n<ul>\n<li>\u00bfQu\u00e9 es un sketch?<\/li>\n<li>\u00bfEn qu\u00e9 se diferencia \u00e9ste con un wireframe?<\/li>\n<li>\u00bfQu\u00e9 aplicaci\u00f3n permite dise\u00f1ar un mockup?<\/li>\n<li>\u00bfHasta d\u00f3nde llega el desarrollo de un prototipo?<\/li>\n<\/ul>\n<p>Preguntas que han surgido en el curso de Multimedia \u2013 Hipermedia de la Universidad de Antioquia, al que asisto como profesor desde hace varios a\u00f1os.<\/p>\n<p>Me animo a escribir esta breve entrada, pues considero que el conocimiento se fortalece cuando se aplica, redunda y comparte con otras personas.<\/p>\n<p>Adem\u00e1s, escribir aporta a la gesti\u00f3n del conocimiento en red, pues considero que el aula de clase extiende sus fronteras m\u00e1s all\u00e1 de un campus universitario y necesita beneficiarse de otros escenarios para expandir sus estrategias y metas de aprendizaje.<\/p>\n<p>Vamos a por ello.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>\u00bfQu\u00e9 es un sketch?<\/h2>\n<p>Pensemos en el sketch como el primer boceto que se realiza sobre el proyecto digital que queremos realizar. Son aquellos trazos (primeras pinceladas) sobre una hoja de papel, un tablero o \u2013incluso- en una servilleta.<\/p>\n<p>El sketch refleja las ideas generales sobre el proyecto. Algunas preguntas orientadoras:<\/p>\n<ul>\n<li>\u00bfQu\u00e9 \u00e1reas de contenidos y servicio queremos presentar en el proyecto?<\/li>\n<li>\u00bfD\u00f3nde estar\u00e1 la zona de navegaci\u00f3n?<\/li>\n<li>\u00bfD\u00f3nde se cargan los sistemas de ayuda para usuarios?<\/li>\n<li>\u00bfSe agregar\u00e1n servicios de redes sociales?<\/li>\n<\/ul>\n<p>El sketch no tiene un trabajo conceptual muy extenso. Aqu\u00ed prima la creatividad, la experiencia y el deseo del dise\u00f1ador.<\/p>\n<p>Personalmente, inicio los dise\u00f1os por un sketch: Tomo una hoja de papel, un l\u00e1piz y un borrador y voy trazando l\u00edneas, n\u00fameros, ideas y expectativas sobre lo que quiero desarrollar. Quiz\u00e1s el producto final no quede igual, pero es un primer paso.<\/p>\n<p>Ahora, como uno debe (de)mostrar lo que escribe, comparto la imagen de un sketch que realic\u00e9 para un proyecto en la Instituci\u00f3n Universitaria CEIPA:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/04\/que-es-sketch.jpg\" alt=\"\u00bfQu\u00e9 es un Sketch?\" width=\"960\" height=\"960\" class=\"size-full wp-image-1448\" srcset=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/04\/que-es-sketch.jpg 960w, https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/04\/que-es-sketch-300x300.jpg 300w, https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/04\/que-es-sketch-150x150.jpg 150w, https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/04\/que-es-sketch-768x768.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/p>\n<h2>\u00bfQu\u00e9 es un wireframe?<\/h2>\n<p>El siguiente paso en el dise\u00f1o de un proyecto digital (al menos desde su componente gr\u00e1fico y arquitectura de informaci\u00f3n) es la creaci\u00f3n de los wireframe.<\/p>\n<p>Para comprender el concepto, pensemos en una representaci\u00f3n b\u00e1sica (en escala de grises) del proyecto, donde se definen con mayor precisi\u00f3n:<\/p>\n<ul>\n<li>Zonas de contenido<\/li>\n<li>Uso de elementos HTML (marcado sem\u00e1ntico)<\/li>\n<li>Servicios de navegaci\u00f3n y ayuda<\/li>\n<li>Flujos de navegaci\u00f3n (c\u00f3mo se conectan las unidades de informaci\u00f3n)<\/li>\n<\/ul>\n<p>Atentos: Los wireframe carecen de elementos gr\u00e1ficos, es decir: no se especifican tipograf\u00edas, colores o cualquier otro elemento que tenga relaci\u00f3n con el tema. En otras palabras, estos non ofrece ning\u00fan acercamiento a una hoja de estilos en cascada ni iconograf\u00eda.<\/p>\n<p>El wireframe es el \u201cprimer paso serio\u201d en el dise\u00f1o del proyecto digital. Aqu\u00ed s\u00ed es necesario tener conocimiento sobre los servicios, contenidos y el p\u00fablico objetivo.<\/p>\n<p>Nota: No tengo una fotograf\u00eda de wireframes sobre el proyecto que utilic\u00e9 para soportar esta entrada.<\/p>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h3>\u00bfQu\u00e9 es un mockup?<\/h3>\n<p>El mockup es una representaci\u00f3n m\u00e1s avanzada del dise\u00f1o gr\u00e1fico y comunicativo (desde una visi\u00f3n de navegaci\u00f3n y AI) del proyecto. Aqu\u00ed se integran elementos con mayor detalle, pues visualiza una aproximaci\u00f3n de:<\/p>\n<ul>\n<li>Contenidos (pueden ser textos <em>dummy<\/em>).<\/li>\n<li>Paleta de colores, tomando como referente lo institucional, misional y el p\u00fablico objetivo del proyecto.<\/li>\n<li>Declaraciones <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/css\/\" rel=\"noopener\" target=\"_blank\">CSS<\/a>.<\/li>\n<li>Dimensiones de \u00e1reas de contenido y servicios.<\/li>\n<li>Iconograf\u00eda.<\/li>\n<\/ul>\n<p>Es de anotar que el mockup incluye los elementos del sketch y el wireframe. Cada uno es una evoluci\u00f3n del anterior.<\/p>\n<p>La evidencia para este \u00edtem, continuando con el proyecto que tom\u00e9 de ejemplo, es:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/04\/que-es-wireframe.jpg\" alt=\"\u00bfQu\u00e9 es un Mockup y un Wireframe?\" width=\"960\" height=\"960\" class=\"size-full wp-image-1449\" srcset=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/04\/que-es-wireframe.jpg 960w, https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/04\/que-es-wireframe-300x300.jpg 300w, https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/04\/que-es-wireframe-150x150.jpg 150w, https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2018\/04\/que-es-wireframe-768x768.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/p>\n<h2>\u00bfQu\u00e9 es un prototipo?<\/h2>\n<p>Por \u00faltimo, el prototipo es una representaci\u00f3n de alto detalle sobre el proyecto digital. En ella se puede identificar y operar:<\/p>\n<ul>\n<li>Sistemas de navegaci\u00f3n.<\/li>\n<li>Paleta de colores aplicada.<\/li>\n<li>Iconograf\u00eda.<\/li>\n<li>Aplicaci\u00f3n de las declaraciones CSS.<\/li>\n<li>Experiencia de usuario.<\/li>\n<li>Servicios de ayuda, b\u00fasqueda, <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/interaccion\/\" rel=\"noopener\" target=\"_blank\">interacci\u00f3n<\/a>, entre otros.<\/li>\n<\/ul>\n<p>Este producto es el paso previo al desarrollo y presentaci\u00f3n final del proyecto. El prototipo sirve para identificar, a partir de pruebas de usuario (beta-tester), las dificultades del proyecto.<\/p>\n<h2>Rese\u00f1a de Balsamiq<\/h2>\n<p>En el siguiente video presento la herramienta <a href=\"https:\/\/balsamiq.com\">Balsamiq<\/a>, un editor en l\u00ednea y de escritorio que permite dise\u00f1ar <em>mockups<\/em> en corto tiempo, gracias a sus m\u00faltiples elementos predise\u00f1ados.<\/p>\n<p>Balsamiq tiene un costo que var\u00eda de acuerdo al n\u00famero de proyectos y la duraci\u00f3n en tiempo de la licencia. El costo m\u00e1s bajo inicia en 9 d\u00f3lares estadounidenses mensuales.<\/p>\n<p>Sin embargo, existe la posibilidad de <a href=\"https:\/\/balsamiq.cloud\/\">utilizar el editor por 30 d\u00edas<\/a>. Solo hace falta crear una cuenta, sea con una cuenta de correo o asociando la herramienta con el perfil de Google.<\/p>\n<div class=\"marco-yt\">\n<div class=\"video-yt\">\n<iframe loading=\"lazy\" title=\"Aprende c\u00f3mo CREAR MOCKUP WEB. Bases del dise\u00f1o digital | [EPW]\" width=\"774\" height=\"435\" src=\"https:\/\/www.youtube.com\/embed\/CtgBSMCooCc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n<p class=\"youtube-video\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/logo-youtube.png\">En el <a href=\"https:\/\/www.youtube.com\/@escuela-digital?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">canal YouTube \u00abEscuela Digital\u00bb<\/a> puedes encontrar m\u00e1s videos sobre el tema.<\/p>\n<h2>Conclusi\u00f3n<\/h2>\n<p>Realizar un proyecto digital de alta calidad requiere dedicaci\u00f3n, tiempo, planeaci\u00f3n, investigaci\u00f3n y claridad, conceptos que \u2013para ser sinceros- a veces escasean en las organizaciones, pues nuestros jefes siempre requieren los trabajos \u201cpara ayer\u201d.<\/p>\n<p>Lo ideal es realizar cada etapa del proceso de dise\u00f1o, as\u00ed existir\u00e1 mayor claridad en lo que se quiere, se evitar\u00e1n re-procesos y se har\u00e1 gesti\u00f3n de conocimiento optimizando los tiempos de producci\u00f3n de futuros proyectos.<\/p>\n<p>Espero que este art\u00edculo haya sido de inter\u00e9s para todos, especialmente para mis estudiantes de  la Universidad de Antioquia.<\/p>\n<p>Recuerda compartir esta entrada en tus redes sociales, con tus amigos y familiares. Es gratis, entretenido y m\u00e1s barato (como dir\u00eda Fito Paez).<\/p>\n<p>Gracias por leerme. Abajo ten\u00e9s la oportunidad de compartir tus comentarios sobre la entrada.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La intenci\u00f3n de este art\u00edculo es dar respuesta a las preguntas: \u00bfQu\u00e9 es un sketch? \u00bfEn qu\u00e9 se diferencia \u00e9ste con un wireframe? \u00bfQu\u00e9 aplicaci\u00f3n permite dise\u00f1ar un mockup? \u00bfHasta d\u00f3nde llega el desarrollo de un prototipo? Preguntas que han surgido en el curso de Multimedia \u2013 Hipermedia de la&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1591,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[66,60],"class_list":["post-934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-hipermedia","tag-rwd","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=934"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/934\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1591"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}