Personal Finance Website Prototype
For the past 4 weeks I have been going through Adobe XD design challenges on Behance. I’d like to share some of that progress with you today. Here before you is a prototype for a finance website. Let’s walk through it shall we?
Landing Page
Starting with the landing page, I got my feet wet creating buttons with hover states, learned how to use plugins to quickly find icons and graphic assets for faster mock ups, and how to use the blobmaker app for general shape creation and exploration. It’s amazing how fast you can lay down initial ideas to test different concepts out quickly without getting too caught up in the details with different plugins. These new techniques will be a life saver in real world scenarios.
Live Support
Moving onto the live support widget, I got to see how to mock up floating elements on a website. (Surprisingly easy actually.) I learned more about prototyping with this widget. With components, you can build out wildly different visual states to create collapsible windows and other interactive elements. Watching the prototype come to life and become interactive is such a fun process. I’m hooked.
Features Overview
Expanding the website was as simple as dragging the bottom of the frame down like a window shade. This simple act brought a twinkle to my eye. Suddenly more canvas was available to paint on. It may sound obvious, (and it was) but I think it’s important to enjoy the little things. With the new section ready to be populated with content, I learned about stacks and padding. These two features help maintain spacing and organization in such an elegant fashion. I never thought I would be so excited about organization in software. It just works so well.
Sign In and Sign Up
Adding one more section to the website, we reach the current build. Utilizing a little bit from the other 3 sections, the sign up screens come to life. Animated buttons, stacked text fields, and even an anchor link to bring us back to the landing page. I’m really enjoying the process, and find the workflow speeding up. Looking forward to seeing what else I can do with this software.