Last week, I started designing an application called Made with Xata where users will be able to share projects that they…well…made with Xata.
It’s funny, how you can start with a “simple” idea, like a gallery, and it quickly inflates into a much large project:
We’re showcasing projects, how do those projects get added?
Once the projects are added, someone will need to approve those projects before they go live on the site. That means we’ll need an admin screen and users.
Now, we’re talking about authentication, which means a user will also need to be able to do all the standard stuff: forgot password, reset password, logout. Not to mention, managing their account. Or, approving a user’s account, granting them access.
Are we showing profile pictures (avatars) for each user? We need to store those images somewhere.
What if an entry changes? Or, there’s a typo that needs to be corrected? We need a way to manage the information.
Suddenly, we have a lot of features that we need to take into consideration. 😅
UI Flow Diagram
Anytime I start building an application and thinking through all the various states, one of the tools that I’ll reach for is a UI Flow diagram. Web applications are different than marketing sites. — Granted the lines are blurring, but generally a web application has multiple states within each page, dependent on a user’s interaction. Therefore, a UI Flow diagram displays more information than the traditional site map.
This helps illustrate how all the data that flows through the application.
Where are users entering the application?
What decisions are being made?
What the jobs that a user is trying to accomplish?
How is the user moving through the application? How many clicks does it take to accomplish their goal?
What happens when the user follows the happy path? What are the edge cases?
Where can guests go? Where can logged-in users go?
Stubbing out a New Project within Figma
Once the UI Flow Diagram is in a good place, I started designing screens within Figma. If it were a larger application, I would have started with low fidelity wireframes instead. But, this is a smaller project and an area where I could save a little bit of time.
One of the hardest parts in design is getting started. This project was a little easier because it matches Xata’s existing branding and there were existing design patterns that I could reference. I went through their entire site, looking at typography, iconography, and various treatments, taking screenshots as I went.
I’ve always been able to overcome a blank canvas, by dumping all my reference images and branding elements on the screen. Then, it feels like I’m trying to solve a puzzle instead of building something from scratch.
Sometimes, it’s about building momentum, going through the motions, and starting with something easy. This can be as simple as setting up the page structure within Figma.
I organize every project the same way. This level of consistency makes it easy to come back to projects and easily find what I’m looking for.
Another tip? Don’t always start with the “thing” that makes the most sense. Logically, I should start at the top and work my way down the page. Or, start with the hero or the featured section, building supporting elements around it. But, those can also be the hardest sections to put together, especially when you’re still trying to build a library of styles and components.
A lot of times, I’ll start with the footer, because it’s one of the easiest elements to design. I know I need the copyright information, links to the legal pages, and social media icons.
Disclaimer: I didn't design this footer ☝️
I’ve come to realize that a big difference between juniors and seniors is that seniors have developed a process that they know works for them. I’m a designer, but I don’t feel creative every single day. I’m not sitting around waiting for inspiration to strike. But, I have routines and processes in place that help me produce results regardless of what mood I’m in.
So, if you’re interested in following along, I’m designing and building as much of this project in public. I’m live streaming three days at week on Twitch, blogging here on Hashnode, and dropping videos on YouTube. I’ve also put a project page together in Notion to track progress. All code is open source and on GitHub.