Una vez que aceptas nuestro presupuesto, comenzamos el proceso de diseño del boceto para tu sitio web. Basándonos en el contenido y las ideas que aportes, así como en las que surjan durante el proyecto, creamos el boceto para tu nueva página web. En este artículo queremos explicarte dicho proceso, para responder a posibles preguntas como ¿qué es?, ¿cómo lo hacemos?, ¿por qué es importante? y terminaremos con un ejemplo de diseño del boceto de página web, en este caso para empresa inmobiliaria.
El diseño del boceto en imagen lo realizamos según las preferencias que tiene el cliente para el diseño de la web y en el caso que no tenga preferencias específicas Ailon Webs realiza el diseño web que se adapte a la imagen corporativa y material aportado.
¿Qué es un boceto de página web?
El boceto web es la primera fase del diseño web, representa de forma visual una página web de forma sencilla dejando establecida la interfaz gráfica de la web y su organización. Siendo una pieza fundamental en el proceso de creación del sitio web.
Por lo tanto, el boceto de tu nueva página web nos sirve para visualizar la web antes de tenerla codificada evaluar la usabilidad y ver cómo fluyen los componentes.
Objetivos del boceto de tu nueva página web
Los objetivos fundamentales del diseño del boceto de las páginas web son:
- Obtener un esquema gráfico para representar como se visualizará la información en las páginas del sitio web.
- Definir el flujo del contenido de la interfaz de usuario, para planificar el diseño y los patrones de interacción de los usuarios.
Cuando iniciamos un proyecto web debemos confeccionar un listado de requisitos para ese proyecto web específico. Tomando en consideración las metas y la funcionalidad que queremos ofrecer a los usuarios.
¿Cuál es el proceso de diseño del boceto que realizaríamos para tu nueva página web?
Proceso
Este es el proceso que seguimos para realizar el diseño del boceto web:
- Análisis del proyecto web.
- Creamos el organigrama de la web o mapa del sitio.
- Diseño del boceto. Diseño gráfico para visualizar páginas web en formato de imagen.
1 Análisis del proyecto web
Analizamos las ideas, objetivos y material (logo, imágenes, textos, etc.) que nos aportó el cliente para el proyecto web.
¿Por qué es importante el diseño del boceto de página web?
Así procedemos a identificar:
- Requisitos del proyecto.
- Objetivo principal.
- Definir la llamada a la acción (lo que queremos que hagan los visitantes cuando lleguen a la web).
- Elementos destacados.
- Los elementos visibles en el área de pantalla 'Above the fold' (área de la página web que es visible sin necesidad de desplazarse por ella).
2 Creamos el organigrama de la web
Creado el organigrama de la web que es un diagrama de la estructura del sitio web, nos facilita hacer el mapa del sitio o lista de páginas del sitio web accesible a los usuarios.
El objetivo es tener un esquema de toda la web, un listado de las páginas y de las interacciones de cada página entre sí.
El sitio web lo dividimos por su contenido, así podemos dar estructura a el flujo de la información construyendo el mapa del sitio.
Por ejemplo, este podría ser el contenido de un sitio web:
- Inicio: es la parte más importante de una web. Es la que ven tus visitantes si escriben tu nombre de dominio y que además sirve para consolidar tu marca corporativa e informarles lo qué ofreces.
- Productos o Servicios.
- Otros apartados específicos.
- Contacto.
- Política de privacidad. Es un apartado requerido para informar a tus visitantes sobre cómo realizas el procesamiento de los datos y si se recopilan a través de tu sitio web.
- Política de cookies. Si tu web usa cookies también debes especificar las cookies que usas e indicar a tus usuarios cómo gestionarlas en su navegador web.
3 Diseño del boceto de tu nueva página web
Para el diseño del boceto para un sitio web comenzamos con un dibujo del esquema neutro que se realiza con papel y lápiz en el que reflejamos la estructura de la página web que vamos a representar. Y con este boceto esquemático ya podemos diseñar el boceto gráfico final que presentamos a nuestro cliente.
¿Cómo hacemos el diseño del boceto de página web?
Para comprender el diseño del boceto web necesitamos explicar la estructura básica de las páginas web.
3.1 Estructura de la página web
La estructura básica de las páginas web es:
- Cabecera (header): área superior de la página web donde es fundamental mostrar el logo y la información de la empresa, junto al menú de navegación principal que permite al usuario orientarse y navegar por el sitio web.
- Cuerpo (body): área intermedia de la página donde se muestra el contenido. El contenido varía según la página del sitio web.
- Pie de página (footer): área inferior de la página podemos mostrar el logo, el menú de navegación entero o los enlaces principales, también es donde se puede posicionan los enlaces a las redes sociales y siempre se colocan los enlaces legales como política de privacidad, condiciones y política de cookies.
La cabecera y parte del cuerpo se encuentran en el área de la página web que será visible sin necesidad de desplazarse por ella, llamada 'Above the fold'.
Esta imagen muestra la estructura básica de la página web, la cabecera y el pie se repiten en todas las páginas del sitio web esto da consistencia y tiene por función también orientar al usuario en la navegación web.
Todas estas estructuras pueden ser mucho más complejas, cada proyecto web tiene características que lo hacen único por ello el mejor diseño de páginas web es el diseño web a medida.
Si tienes un proyecto en mente puedes solicitarnos presupuesto sin compromiso para tu página web.
Solicita presupuesto sin compromiso
3.2 Dibujo del esquema neutro (wireframe) para el boceto de tu nueva página web
En esta fase dibujamos esquemáticamente el boceto. El dibujo debe ser neutro bien con papel y lápiz, o bien, con un software de diseño gráfico, es lo que se llama 'wireframe'.
Sin distraernos con los detalles, el objetivo es diseñar los pilares de la web colocar las estructuras o componentes más grandes y marcar las posiciones de los elementos básicos, como cabecera, cuerpo, pie y menú de navegación de la web. Es decir, tener una visión global de la estructura de la página web que estamos diseñando.
Elaborando el wireframe de un sitio web diseñamos los pilares de la web que nos guiará en las fases iniciales cuando construimos la estructura del sitio web.
En la siguiente imagen puede verse un ejemplo del dibujo del esquema (wireframe) del boceto para una empresa inmobiliaria ficticia con diseño web responsive, es por ello que representamos tres anchos de pantalla o dispositivos.
¿Qué pasos realizamos para crear el wireframe?
Nosotros seguimos estos pasos en el proceso de diseño del esquema neutro o wireframe de páginas web responsive.
Dibujamos tres marcos: para móvil, tablet y ordenador de escritorio, cada uno representa un dispositivo y el tamaño la relación de aspecto de la ventana en el navegador web. El foco lo ponemos en plasmar la idea. Si hacemos el dibujo a mano no es necesario que sea preciso, en los siguientes pasos ya marcaremos las dimensiones precisas.
A la hora de realizar el boceto de las páginas web tenemos que tener presente el contenido de toda esa página y también de la pantalla 'Above the fold', aquella primera pantalla que muestra cuando cargamos la página web sin necesidad de desplazarse por ella.
Para entender como se verá el boceto llevado a código web debemos explicar el concepto de 'breakpoints' o puntos de interrupción son anchos específicos de pantalla en los que cambiamos el diseño (o layout). Los usamos para aplicar un estilo específico según sea el ancho de la pantalla del dispositivo. Los breakpoints los definimos en la hoja de estilo (CSS) mediante el uso de los media queries y así aplicamos el estilo para cada ancho de la pantalla.
Pensamos la mejor forma de mostrar el menú de navegación, para que sea clara, usable y escalable.
Comenzamos usando un simple cuadrado con 3 rayas horizontales en el móvil o un rectángulo en el resto para representar el menú de navegación y posicionarlo horizontal o vertical, y lo colocamos en la posición correspondiente en la página web. Si es necesario añadir búsqueda a la web, entonces se representa con el icono de búsqueda o icono de una lupa, con o sin un rectángulo o caja de búsqueda asociado.
En el caso de un dispositivo móvil por lo general es necesario usar un menú de navegación oculta con un botón tipo hamburger (comúnmente representado por 3 rayas horizontales). Podemos también mostrar el menú de navegación expandido dependiendo del contenido o necesidades del proyecto web.
Para mostrar que estamos en un enlace de navegación específico podemos ponerle el color de enlace activo, subrayado, con un recuadro o con fondo sobre el enlace.
Colocamos el contenido en el boceto de las páginas web dibujando los elementos más grandes, por ejemplo, títulos o encabezados, párrafos de texto, imágenes, etc.. En el boceto a mano podemos representar títulos con rectángulos sólidos o trazos de líneas gruesas, el texto como líneas finas y las imágenes como un rectángulo con 2 líneas que lo atraviesan desde cada esquina formando una X.
Podemos también dibujar detalles específicos, para así tenerlos presentes en el boceto final, como por ejemplo, tarjetas o cajas con imagen, texto y botón, un carousel con testimonios de clientes, elementos de un formulario (radiobutton, checkbox, etc), menú de navegación secundario que se despliegue (dropdown), botones de llamada a la acción (CTA), cajas de diálogo y muchos más. Los representaremos de forma esquemática según el componente para recordar su posición y por ende su interación en el flujo del diseño web responsive.
Usabilidad: Todos los componentes de la web con los que sea posible interactuar, como por ejemplo, los enlaces de navegación o los iconos serán de un tamaño suficientemente grande para que sea posible tocarlos fácilmente en una interfaz de usuario que permita interacción con los dedos y también deben funcionar correctamente con el cursor del ratón o bien de un panel táctil (touchpad).
3.3 Diseño del boceto (mockup) de tu nueva página web
Con el dibujo del esquema neutro terminado pasamos a diseñar el boceto final que vamos a mostrar al cliente. Nuestro objetivo es elaborar un boceto con un diseño gráfico que permita visualizar la web de manera gráfica al cliente.
El wireframe - dibujo del esquema neutro - nos proporciona una conexión entre la estructura conceptual y la visual. Y el mockup es necesario para realizar el diseño visual del sitio web.
El proceso de diseño del boceto final de la página web lo realizamos con una herramienta de diseño gráfico, tomando como referencia los pasos anteriores del proceso de diseño del boceto web y así obtener como resultado el diseño gráfico de la/las página/s web.
Puesto que es un diseño web responsive vamos a necesitar tres áreas de trabajo tal como muestra la siguiente imagen, una por cada dispositivo al que asignamos un ancho de pantalla representativo (viewport). Si lo medimos en píxeles sería, por ejemplo, algo así como: para los moviles un ancho de 576px, las tablets un ancho de 992px y ordenador de escritorio más habitual un ancho de 1400px.
En esta fase del boceto web realizamos el diseño de manera precisa, asi los marcos de los dispositivos se dibujan con las dimensiones más precisas y todos los componentes de la estructura también.
Finalizado el diseño del boceto para la nueva página web, tendremos representados los tres anchos de pantalla que corresponden a móvil, tablet y ordenador de sobremesa. El ancho de cada uno de ellos muestra los puntos de interrupción o breakpoints, que hemos explicado antes y que nos sirven para cambiar el estilo de la web en función del ancho de pantalla.
¿Qué sucede cuando hemos finalizado el diseño del boceto?
Lo más común es que procedamos a publicarlo, generalmente en un archivo con formato .PDF para poder enviárselo al cliente por correo electrónico.
Conclusiones
Cada proyecto web es único y el diseño del boceto de tu nueva página web nos permite a los desarrolladores y al cliente visualizar el proyecto web de manera gráfica. Este es un buen motivo para decir que el boceto para tu nueva página web es un elemento imprescindible en el proceso de desarrollo de un sitio web y el paso previo para pasar el diseño gráfico a código de programación web.
Hemos visto en este artículo que aunando los requisitos del proyecto, objetivo y contenido diseñamos el mapa del sitio para visualizar la distribución del flujo de la información del sitio web y así poder iniciar el boceto de las páginas web.
El diseño del boceto web tiene como finalidad que tanto el cliente como los desarrolladores podamos visualizar el contenido web antes de iniciar la codificación del sitio web y es fundamental para realizar la programación de las páginas web.
El boceto de tu nueva página web es un buen punto de partida para la interacción constructiva entre el cliente del proyecto web y el desarrollador web.
Debemos recordar que partimos de cero y conseguimos un sitio web sencillo o complejo, pero siempre buscamos que sea usable, bonito y que funciona como el visitante espera que lo haga.
Cada proyecto web es diferente y nosotros estudiamos las mejores posibilidades para llevar adelante tu web. Consúltanos tu idea sin compromiso.
Solicita presupuesto sin compromiso
Categorías: Diseño páginas web
Etiquetas: Diseño web