Bocetos de páginas web
Ejemplo de sitio web
El wireframe de un sitio web conecta la estructura conceptual subyacente, o arquitectura de la información, con la superficie, o diseño visual del sitio web[3]: 131 Los wireframes ayudan a establecer la funcionalidad y las relaciones entre las diferentes plantillas de pantalla de un sitio web. Como proceso iterativo, la creación de wireframes es una forma eficaz de realizar prototipos rápidos de páginas, al tiempo que se mide la viabilidad de un concepto de diseño. Los wireframes suelen comenzar entre “el trabajo estructural de alto nivel -como los diagramas de flujo o los mapas del sitio- y los diseños de pantalla”[1]: 167 Dentro del proceso de construcción de un sitio web, el wireframe es el lugar donde el pensamiento se hace tangible[4]: 186
Los wireframes pueden ser utilizados por diferentes disciplinas. Los desarrolladores utilizan los wireframes para tener una idea más tangible de la funcionalidad del sitio, mientras que los diseñadores los utilizan para impulsar el proceso de la interfaz de usuario (UI). Los diseñadores de la experiencia del usuario y los arquitectos de la información utilizan los wireframes para mostrar las rutas de navegación entre las páginas. Los analistas de negocio utilizan los wireframes para apoyar visualmente las reglas de negocio y los requisitos de interacción de una pantalla. Los interesados en el negocio revisan los wireframes para asegurarse de que los requisitos y objetivos se cumplen a través del diseño[1]: 167 Entre los profesionales que crean wireframes se encuentran los analistas de negocio, los arquitectos de la información, los diseñadores de interacción, los diseñadores de experiencia de usuario, los diseñadores gráficos, los programadores y los jefes de producto[2].
Bocetos de diseño web
A continuación se muestran algunos ejemplos de bocetos de sitios web. Los bocetos pueden ser muy variados, desde los rápidos “bocetos de servilleta” hasta los más elaborados, realizados en color y con reglas. Le recomendamos encarecidamente que haga muchos bocetos rápidos para aportar ideas sobre el diseño de su sitio web.
Al presentar los bocetos para la revisión de un proyecto, debe centrarse en las mejores ideas de sus bocetos rápidos. Dedique tiempo a elaborar bocetos que sean nítidos y que incluyan tantos detalles como sea posible. Si los haces a mano, utiliza una regla e incluso papel de dibujo.
Sitio web de sketch gratis
De hecho, he oído hablar de una creciente reacción contra el desperdicio de horas facturables en el desarrollo de composiciones de Photoshop completamente renderizadas. Hacer bocetos te da la flexibilidad necesaria para perfeccionar y generar diseños iterativos y evolutivos sin tener que gastar el presupuesto en un trabajo de especificaciones totalmente realizado y en composiciones digitales.
Además, he comprobado que los clientes tienden a encontrar el trabajo lo suficientemente informal como para poder sugerir cambios y hacer ediciones. Las composiciones totalmente renderizadas parecen “acabadas” o casi completas. Creo que eso puede dificultar la voluntad del cliente de sugerir mejoras o cambios. Los bocetos son sueltos, amigables, informales… se pueden borrar y cambiar.
Los wireframes tienden a estar muy cargados de texto y rara vez comunican la dirección artística y el tono. Especialmente para la fotografía y los activos visuales. ¿Cuándo fue la última vez que una gran “X” dijo algo sobre tu fotografía?
Al dibujar, puedes hacer un desarrollo rápido, casi como un tren de pensamiento, para plasmar tus ideas rápidamente. Funciona sobre la marcha, por lo que puedes pasar menos horas facturables frente al monitor y más tiempo generando ideas. Sólo tienes que remangarte y encontrar soluciones.
Bocetos de alambre
Antes de comenzar el diseño de un sitio web,hay que tener en cuenta algunos puntos importantes como conocer el propósito del sitio web,investigar el público objetivo de la empresa o recopilar información sobre los productos,etc..Después de obtener toda la información que necesitas,la visualización comienza en tu mente.Así que el siguiente paso es coger un bolígrafo y un papel y comenzar a dibujar el concepto.Sin duda,hacer bocetos tiene muchas ventajas como ahorrar tu tiempo,mostrar el concepto a tu cliente para conocer sus pensamientos y por supuesto nada es más sencillo que el bolígrafo y el papel.
