This project was started to learn about designing and development of responsive information dashboards. The dashboard will be built using React.js and Material-UI. The dashboard is used to visualize the data from the server and provide a user-friendly interface for the users to interact with the data. This will be a single page application, with the following features:
-
User authentication
-
Data visualization using charts and graphs
-
User-friendly interface for the users to interact with the data
-
Responsive design for different screen sizes
Since the project was started as a personal learning project no user research was done as the goal was the project on to polish my skills on designing and development of responsive information dashboards. The wireframing steps will be discussed in the next steps.
I used Excalidraw to create wireframes, mainly due to its simplicity and ease of use. It allows me to quickly sketch out ideas and concepts, making it an invaluable tool for brainstorming and collaboration.
As the first I designed the sitemap for the dashboard. The site map is a visual representation of the website's structure and layout. It helps to understand the relationship between different pages and sections of the website.
Then before moving in to Excalidraw, I scribbled some paper wireframes to get a better understanding of the layout and design of the dashboard.
After that, I started designing the wireframes for the dashboard. The wireframes were designed for both desktop and mobile devices. The wireframes were designed to be responsive and to adapt to different screen sizes.
This part of the project is still in progress. But to practice agile methodologies I decided to develop each interface that I designed in the wireframes. For prototyping I used Figma, mainly due to its simplicity and ease of use. It allows me to quickly create interactive prototypes and to test the user experience.
Currently I have mocked up the login interface. The rest of the interfaces will be mocked up in the next steps.
As mentioned above, prototyping and development will be done in parallel. For the development part, I am using React.js and Material-UI. The dashboard is built using React.js and Material-UI. This site will be hosted in Vercel.