Last week, I started my first web design project for a client. This project includes the basic construction of a full dashboard, complete with grids, data analytics, and options to create items in the grids.
The backend will be done with Xano, which will handle all databases and authentication with the API requests. In the logic layer (middleware), I’m using Wized. As it works best in combination with the front-end designing program, Webflow
The primary project consists of developing an event management dashboard. The dashboard will allow users to create events, view attendees of specific events, and view general statistics.
I started the project by laying out the primary webpages that needed to be constructed. In this project, I wireframed some of the basic sites using Figma. Which I primarily learned from the Meta front-end web design course
The main dashboard wireframe consists of the header, statistics graphs, events table, and sidebar navigation.
Next is similarly designed, is the “create event” page, including basic functionality like an event information form and a way to walk through several steps of the form. As having a step by step form both feels cleaner and easier for the user to understand, as well as being able to seperate the steps into their own respective components.
Next is the desigining within webflow. I went through several different methods for some of the more difficult aspects, which you might not expect would be difficult. One such case is buttons – buttons with icons are a lot more difficult to execute without having extra divs and blocks inside eachother.
The primary problem being that Webflow does not allow buttons to have images within it’s block. While still being technically possible – I resorted to using an external library, which will both help solve the custom buttons problem, but also keep things consistent across the site without having to manually code html elements.
The library which seemed most useful in this case is the Shoelace web component library. All Shoelace requires is a seat in the head tag, and it preloads their library which you can call using custom code Webflow components.
Using this library also allows easy adding of icons that are included in the Shoelace library.
To keep this post short, I’ll be splitting the main couple of problems I had into seperate smaller blog posts, stay tuned for more posts…
Leave a Reply