Empiezo nuevo proyecto, esta vez , como excusa para indagar y aprender sobre el diseño y la programación de una web. Esta web va a ser construida desde 0, pasado por todas las fases del desarrollo, es decir, desarrollo Full-Stack.

La idea

Para empezar describiré el proyecto de desarrollo web que quiero hacer. Creavelas, como su propio nombre indica, es un espacio donde la gente crea y comparte velas virtuales. Al registrarse, puede encender una vela, en la que tiene que seleccionar un tipo de vela (vela de la suerte, vela del amor, vela del dinero, etc), escribir la leyenda de la vela, y, opcionalmente, elegir hacia personas esta destinada la vela. Al crear la vela, esta se queda encendida durante un día, tras esto automáticamente se elimina. Mediante un botón en la vela, otros usuarios pueden aumentar el tiempo de vida de las velas. Es decir quiero que la web tenga un enfoque de red social.

Bien, una vez definido lo que quiero hacer es hora de pensar los primeros diseños y logotipos para tener una base hacia la que empezar a desarrollar. Lo primero que hice fue diseñar el logotipo.

Quiero que mi página sea muy sencilla por lo tanto el logotipo tiene que ir en consonancia. Un logotipo tiene que ser legible independientemente del tamaño que elijamos por eso decidí hacerlo con formas muy sencillas de forma que se apreciara perfectamente que se trata de una vela. Mas que un logotipo, he diseñado un isotipo ya que únicamente tiene un icono. Decidí hacerlo redondo porque el círculo representa la propia luz que emite la vela. Quiero que la web tenga colores pastel, colores suaves que transmitan tranquilidad.

Diseño UX & UI

Toca hacer los mockups, una parte muy importante del desarrollo web, para tener una idea de como va a ser el diseño de la web. Para hacer los mockups yo utilizo Photoshop aunque también hay otras herramientas mas especializadas.

Para el navbar, he decidido poner el logotipo junto con las letras de Creavelas, la barra de búsqueda, el botón para crear velas, y la imagen de nuestro perfil si hemos iniciado sesión. Como veis es un diseño muy simple e intuitivo , sin recargar el navbar.

Para la página principal he decidido mostrar las velas. Para facilitar la navegación en puesto un pequeño menú con tres opciones, inicio, para ver las velas populares, suscripciones, para ver las velas de las personas a las que sigues y cercanas, como su nombre indica, para ver las velas de la gente vive cerca nuestra.

A la derecha he puesto un sidebar, o menú lateral para dirigirse a nuestro perfil, o a los ajustes, entre otros. Este menú es provisional y estoy pensando en quitarlo ya que ocupa demasiado espacio.

En cuanto al diseño de cada vela, una imagen a la derecha, representando el tipo de vela que es, ya que cada vela tiene asociada una imagen, y a la derecha el texto de la vela con el autor. Todavía falta por incorporar un boton para aumentar la duraccion de la vela o el tiempo que queda hasta que la vela se apague, como digo no es el diseño final ni mucho menos, simplemente lo voy a utilizar de referencia.

ux ui desarrollo web

Para la página personal para cada usuario, he decidido meter una imagen de cabecera la cual se puede personalizar para cada usuario. La página, por ahora, simplemente muestra las velas de cada usuario.

ux ui desarrollo web

Por último he diseñado la página de registro, simplemente un formulario para rellenar con los datos y una imagen de fondo.

ux ui desarrollo web

Quedan por diseñar mas páginas pero con lo que tengo me sirve para empezar.

Esto es todo por este episodio espero tener las ganas y la inspiración suficientes para seguir adelante con el proyecto. Para cualquier duda o sugerencia puedes contactar conmigo desde la sección contacto. Un saludo.




También te puede intersar...