Running a website design business with Sparkle
A little about my past
I am a designer with very minimal knowledge of HTML and CSS, but I have worked on several web design/development projects for years. I have tried editing HTML templates with Dreamweaver, fidgeting around inside a CSS box with Blocs, trying to tame the infamous dinosaur (WordPress), and paying a monthly fee for each website I create in Wix and Webflow. Though the websites I delivered were good enough, I always felt someday I would find a tool to help me design a website as I quickly move around objects on a Pages document. One fateful day, I stumbled upon Sparkle, and suddenly, my web design/development workflow changed. Now, I deliver 90+% of the web projects using Sparkle.
Challenge into profit
When I switched to Sparkle as my go-to website builder, my biggest challenge was that most clients wanted a website they could edit on their phone or PC without paying an additional app fee. The majority of clients had a WordPress/Wix mindset. To solve this issue, I chose clients who chose custom design beauty over template use and did not have the time to manage their websites; then, I offered a separate monthly website management fee, which was a win-win situation for me.
My design workflow:
Moodboard:
I create a Figma file that includes the company logo, color theme, font usage, and sample website designs on a Moodboard in a Figma frame. I give my customers access to view and comment on the Figma file.
Copywriting:
Usually, most of my clients do not come with their copy prepared, so I conduct an interview to write website copy and then provide it to them for comments. I use AI tools to generate the first draft. Then, I place all the generated website copies on another Figma frame next to my mood board so customers can see and edit it.
Page Designs:
I use Figma to design web pages and give access to my clients. I start with a 1200px frame for the page designs. After getting feedback from my clients, I use the Figma2Sparkle plugin to export my design to Sparkle. And voila! All the design elements are now in my Sparkle app and placed into a currently open Sparkle file on a new page.
Editing in Sparkle
1200px (Desktop):
If your selection was a frame while exporting from Figma, the frame would be considered as an element, and all the elements would be grouped in Sparkle. I will ungroup the elements and delete the frame, which is now converted to a box with the entire page size from Sparkle.
Next, I edit my color palette in Sparkle and copy hex codes from Figma to place them in the Sparkle color palette. Then, I define text styles in Sparkle and give all the text I have in the file a defined text style.
Then, I choose elements that I want to be full page width and edit them. I select elements to move to a layout block and edit the elements inside accordingly. I usually use a trick to give the layout blocks my desired size. I create a box with the size I need around the elements I need to move into a layout block, select the elements with the newly created box, move them to a layout block, and delete the box.
I might have a rectangle background created in Figma before moving items to a layout block, but once I do, the layout block will have its color, so I delete the former rectangle background because it won’t have any use now.
Moving all related elements into a layout block makes resizing sections easier for later. Say, for example, you want to add elements in the middle of your design. If you place your design elements in layout blocks, you can resize the block you want to put your new elements in, and Sparkle will move down all the rest of the layout blocks so you get space in the section you wish to place.
After that, I add some Sparkle fairy dust to give some items animation and button functionalities. I create a Thank you page for my form “Submit” button. I check that my buttons and forms are functional and take me to the desired page sections. I avoid using scroll location because, thanks to Sparkle, since the addition of layout blocks as scroll location elements, this feature helped me not move around scroll locators each time I change element locations. Now, my 1200px website is ready to go.
320px (Mobile):
Since Sparkle introduced layout blocks, editing Sparkle’s mobile site design has become even more accessible.
The first thing I do here is to edit my text styles and update the mobile version text styles across my Sparkle file. Then, I resize each layout block to my estimated size and resize text boxes to fit their content. I do this from bottom to top since this is the more manageable approach to editing mobile-size designs. At this stage, I focus on something other than how my mobile design looks. It might look messy for now, but that’s the beauty of designing.
Then, I resize buttons and images, rearrange element placements, and start seeing the design I wish my mobile website version to have. I often use Sparkle’s Arrange tab here, so similar elements are resized uniformly. I sometimes memorize how wide and tall my buttons are and at which pixels most of my images and text boxes start and end.
Finally, I touched up some final looks and activated auto-scaling for the rest of the devices. Unless mandatory, I usually leave the other viewports to be automatically scaled, but sometimes I custom edit for 768px (portrait tablets).
Final Words
Sparkle has become an indispensable tool for me, enabling me to create beautiful websites with ease and efficiency. With its various features, Sparkle has helped me streamline my web design process, reducing the time and effort required to create visually appealing websites. I strongly recommend it to anyone who wants to design websites without getting bogged down by technical details.
if I use one of those apps I have to do 2 steps even with the integrations.
