Mockup y wireframe: visualiza el concepto de tu proyecto online

Debido a que, ini­cia­l­me­n­te, una nueva apli­ca­ción o página web no son más que una idea, en el de­sa­rro­llo web, la vi­sua­li­za­ción y co­n­ce­p­ción del diseño son bases in­di­s­pe­n­sa­bles para toda im­ple­me­n­ta­ción técnica. Es así como se persuade al cliente o se muestra al pro­gra­ma­dor cómo se verá y cómo fu­n­cio­na­rá el proyecto. La ma­que­ta­ción web también permite descubrir anomalías que pueden ser so­lu­cio­na­das de antemano. En este contexto, dos conceptos que suelen me­n­cio­nar­se con mucha fre­cue­n­cia son mockup y wireframe. Ahora bien, ¿en qué consisten estos modelos de co­n­ce­p­ción web?

El término mockup también proviene del inglés y significa maqueta o prototipo. Este modelo de diseño sirve para vi­sua­li­zar el concepto y pla­ni­fi­car un proyecto web, co­m­ple­me­n­ta­n­do los wi­re­fra­mes con elementos de diseño y, a menudo, basándose en ellos. Un mockup web no solo se concentra en el diseño básico, in­clu­ye­n­do la de­s­cri­p­ción de los pro­ce­di­mie­n­tos y pre­se­n­ta­n­do ma­r­ca­do­res para el po­si­cio­na­mie­n­to del contenido, sino que re­pre­se­n­ta la primera versión de los diseños po­s­te­rio­res. Así, la ma­que­ta­ción web con mockups se encarga de definir

• colores,
• ti­po­gra­fía,
• imágenes
• y elementos gráficos

que darán vida a la totalidad del diseño de la web y fa­ci­li­ta­rán la vi­sua­li­za­ción del proyecto final en di­fe­re­n­tes na­ve­ga­do­res y di­s­po­si­ti­vos. Co­mú­n­me­n­te, programas gráficos como Photoshop son los pre­fe­ri­dos para crear mockups. Adi­cio­na­l­me­n­te, existen he­rra­mie­n­tas como Balsamiq que permiten la creación de di­fe­re­n­tes páginas con sus re­s­pe­c­ti­vos enlaces. Los mockups complejos son muy similares a los pro­to­ti­pos de diseño in­ter­ac­ti­vos (p. ej., click dummies), que, sin embargo, sí incluyen código sobre la base de HTML, CSS y cía.

El hecho de utilizar he­rra­mie­n­tas de vi­sua­li­za­ción en etapas tempranas del de­sa­rro­llo web aumenta si­g­ni­fi­ca­ti­va­me­n­te las pro­ba­bi­li­da­des de éxito de tu proyecto web. Además, el trabajo en equipo en­co­n­tra­rá más rá­pi­da­me­n­te un común de­no­mi­na­dor. En caso de que hayas puesto tu proyecto en manos de de­sa­rro­lla­do­res externos, la ma­que­ta­ción web te ayudará a presentar mejor tus ideas. También serás capaz de de­te­r­mi­nar qué funciones son rea­li­za­bles, dónde podrían surgir problemas y qué aspectos están co­m­pro­me­tie­n­do la usa­bi­li­dad de la página web. Fi­na­l­me­n­te, los bocetos rea­li­za­dos en papel son la mejor manera de presentar tu proyecto online a clientes po­te­n­cia­les e in­ve­r­so­res.

Por otra parte, el camino que va de la idea a la pro­gra­ma­ción, pasando por la vi­sua­li­za­ción, no siempre tiene lugar mediante la apli­ca­ción de ambos modelos de ma­que­ta­ción. Hay algunos es­ce­na­rios en los que el wireframe ya es su­fi­cie­n­te: preparar un mockup es in­ne­ce­sa­rio si, por ejemplo, estás planeando una subpágina in­ter­ac­ti­va para un proyecto web ya existente, pues la mayor parte del diseño de la web ya ha sido co­n­fi­gu­ra­do. Esto también es válido en el de­sa­rro­llo de apli­ca­cio­nes web. Sin embargo, un wireframe es la mejor forma de vi­sua­li­za­ción si se ha co­n­tra­ta­do a un diseñador gráfico y se le quiere dar la mayor libertad posible. 

Ahora bien, la creación del mockup para una web es in­e­vi­ta­ble cuando se trata de presentar las ideas propias respecto a los elementos gráficos del proyecto. Cuanto más detallado sea el diseño de tu wireframe, más fácil será la pre­pa­ra­ción de la plantilla de diseño web. Ló­gi­ca­me­n­te, la creación de un mockup in­ter­ac­ti­vo con un gran número de páginas y una es­tru­c­tu­ra de enlaces compleja implicará una mayor inversión de dinero, tiempo y esfuerzos. Sin embargo, en algunos casos evita la uti­li­za­ción de pro­to­ti­pos basados en código.

El enfoque cada vez mayor hacia el diseño re­s­po­n­si­vo ha aumentado no­ta­ble­me­n­te la co­m­ple­ji­dad de los wi­re­fra­mes y de los mockups. An­te­rio­r­me­n­te, un simple boceto era su­fi­cie­n­te, pero ahora la pro­du­c­ción de di­fe­re­n­tes versiones de­pe­n­die­n­do del tamaño de la pantalla es un paso im­pre­s­ci­n­di­ble dentro del de­sa­rro­llo web. Adi­cio­na­l­me­n­te, dentro de la vi­sua­li­za­ción del diseño, también se deben co­n­si­de­rar las di­fe­re­n­cias fu­n­cio­na­les, como medios de entrada (ratón, teclado, pantalla táctil), y los re­qui­si­tos técnicos (de tra­n­s­mi­sión de datos, etc.).

Las ci­r­cu­n­s­ta­n­cias actuales han llevado a que muchos usuarios pre­s­ci­n­dan de un mockup y prefieran la creación in­s­ta­n­tá­nea de un prototipo re­s­po­n­si­vo que cubra las ne­ce­si­da­des de los di­fe­re­n­tes di­s­po­si­ti­vos. Como co­n­se­cue­n­cia, los de­sa­rro­lla­do­res de he­rra­mie­n­tas de creación de wi­re­fra­mes y mockups han reac­cio­na­do rá­pi­da­me­n­te a la demanda del mercado, si­m­pli­fi­ca­n­do si­g­ni­fi­ca­ti­va­me­n­te la creación de di­fe­re­n­tes versiones para un mismo diseño. Así, quien quiera crear su wireframe a mano, no tiene más opción que crear in­di­vi­dua­l­me­n­te borrador por borrador.