My Design Process
Here are the steps I usually take when creating a website or web app. This will give you an idea of how I approach a new project and the various tools I use.
1. Sketch on paper
I start with a few drawings, just to get the creative juices flowing. I enjoy this phase of the design process and it's just a way to get my thoughts together on paper.
During this stage, I also start gather existing designs/websites that serve as inspiration for my new design.
2. Create Sitemap
After I get the initial sketches done, I move everything to my favorite tool for creating sitemaps and wireframes, Relume.
The sitemap helps me refine the flow of the website or app and allow me to easily collaborate with the client and other team members. I'm able to gather feedback and suggestions all in one place.
3. Create Wireframe
With Relume, I'm able to create a wireframe from the sitemap with just one click. This used to take me days or weeks to create, before discovering this tool.
Powered by AI, I'm also able to create placeholder text instead of using Lorem Ipsum text.
4. Design in Figma
After the client and other stakeholders are satisfied with the flow of the website or app and approves of the general design direction, this is where the fun begins.
I use Relume's Figma plugin to create a Figma file with just a few clicks. I then use the references I gathered for inspiration to create a unique design.
At this stage, I also gather images, videos, brand colors and other assets from the client to create a high fidelity wireframe.
5. Develop in Webflow
If the client has another development team, then I simply hand them the Figma file along with a style guide.
If the client is looking for a production ready website or app, I continue to develop using Webflow. This is my favorite coding tool because I'm able to have granular control of the website design, mobile responsiveness and page animations.
I also use Relume's Webflow component library instead of a template-based approach because it allows for a more flexible build.
The Handoff
Because I'm proficient in using Figma and Webflow, I'm able to jump into a project no matter which phase it's in. After I complete the development in Webflow, I then use Semrush to make sure the website or app is optimized for search engines and start the final testing phase using my phone, tablet and desktop devices. I make all of the refinements and make sure the client is completely satisfied before handing off their beautiful new website or app.
Case Study #1
Living Artist Auction & Gallery
This is a side project I'm currently working on. It's an online art gallery and auction platform and I'm using Webflow, Wized and Xano to build it. This project is set to launch in early 2025.
Case Study #2
U Speakers Landing Pages
This is a series of landing pages I'm currently working on for a speaker company. The design and animation sequences are inspired by Apple's website.
Case Study #3
Organic Food Nearby App
This is a web app I'm currently working on that would allow organic food lovers to easily find organic food stands, farmers and growers in their area. I'm using Webflow, Wized and Xano to build it and set to launch in early 2025.
