SavePoint V1 Design is Here!
· Portfolio, SavePoint, Web Dev, Astro, Vue
SavePoint’s design has been finalized! 🚀 I’ve created 7 completely new components and updated 3 original designs all with a new a blue and purple a color theme.
- Each component has a dark blue shadow, with rounded corners, thin borders, and an emphasis on a game’s box art. 🖼️
- Clickable buttons are coloured purple, while other static information is colored blue.
- Components are designed to be simple, clean, and mobile-friendly. 📱
My site has 3 main components:
-
The products component, designed to quickly showcase a game’s art and name .🎨
-
The video preview components, featuring a game’s box art as well as a spot for a video. 🎥
-
The stack component, designed to visually showcase collections/lists (such as a favorites list) visually, which just displays a game’s box art with multiple of these box arts stack on top of each other like a playing card deck. 🂡
The Home and Products page have been updated to feature these new components and theming, while I’ve also created all-new Lists and Inventory pages.
-
Home displays filtering options and all 3 main components (products, video preview, and stacks) 🏠
-
The product details page displays a game’s related information, such as a description, screenshots, videos, box art, reviews, platforms (such as Xbox, PS5, or Steam), and a ‘Retailers’ section (more below) 📋
-
The ‘Retailers’ section within product details showcases a list of stores where you may buy that game (Best Buy, eBay, a local game store, etc.). It displays the number of games and in what conditions (ex. 3 Excellent, 2 Poor, 5 New condition games), and brings up a map with the store’s details once clicked. 🏬
- The lists page displays lists, like ‘Trending’, ‘Top Rated’, ‘Currently Played’, etc. including your own lists such as ‘Favourites’. Its designed to be a simple view that conveys a lot of information using a special ‘List’ component, which details a game’s description, price, and platform among other things. ❤️
- Inventory is designed for businesses. This is still a work-in-progress, as SavePoint V1 isn’t intended to have business-oriented features just yet. It is planned to display quick shortcuts to functions like ‘Add Inventory’ and ‘Scan SKU’, showcase ‘Recently Sold’ and ‘Hot Items’ among other lists, a sales graph with different selectable platforms to browse through, and a list view which would display all inventory. 📊
My current plan was to create/update the designs for SavePoint V1, implement them into the Nuxt frontend, then connect the backend to complete my site. I’m also considering re-doing my backend in .NET, but that’s low priority. A launched site is better than no site!
These design updates took me a long time, and now I’m fully ready to implement these into SavePoint!
What do you think of my updates? Let me know!
