Honey Butter

Posted by Honey Butter on November 30, 2024

Tools of the Trade: What I Use to Build Beautiful Websites in 2024

Categories

Let’s face it: building websites can be chaotic.

Between brainstorming design ideas, troubleshooting code, and steering clients toward font choices that align with modern aesthetics, I need tools that keep everything running smoothly. Thankfully, my digital toolbox is packed with resources that make the process efficient—and even enjoyable.

1. My Setup: 2024 MacBook Pro for Everything, PC for Browser Torture

First things first—my hardware setup. I rely on my 2024 MacBook Pro for coding, designing, photo manipulation, and pretty much everything else. With its blazing speed, crystal-clear display, and reliability, it handles all my tools like a champ and makes the workday a lot smoother.

But, of course, not everyone lives in the Mac world. Enter my sad little PC, which exists solely for browser testing. It’s not pretty, but it gets the job done when I need to see how a site behaves on outdated or quirky browsers. Think of it as the underappreciated sidekick in my design journey.

2. Adobe Creative Suite: The OG of Design Tools

You can’t talk web design without mentioning Adobe. Photoshop, Illustrator, and the rest of the crew have been around forever, and for good reason—they get the job done.

  • Photoshop: Because resizing images in Paint is not an option.
  • Illustrator: For when I need to whip up logos or vector graphics (and I use a lot of vector graphics) that don’t look like clip art from the ’90s.
  • XD: I occasionally poke at XD, but let’s be real—it mostly gathers digital dust while I’m over in Figma.
  • Adobe Fonts: The font library is a lifesaver for creating unique, professional typography that adds character to every site.

Adobe’s tools may be expensive, but they’re like that one fancy kitchen knife: once you have it, you’ll wonder how you survived without it.

3. Figma: The Cool Kid on the Block

Figma has totally won me over. It’s sleek, intuitive, and makes me feel like a modern-day design wizard.

  • Collaboration: Clients can leave comments directly on designs, which saves me from trying to decipher cryptic email feedback like “make it pop.”
  • Cross-Platform: Works anywhere, so I can jump from laptop to desktop without a hitch.

Figma is like that effortlessly cool coworker who’s always organized and on top of things.

4. Visual Studio Code: My Code Editor BFF

When it’s time to get down to business, VS Code is where the magic happens. It’s simple, powerful, and doesn’t try to do too much.

  • Live Server: Because hitting refresh a thousand times is for amateurs.
  • Prettier: Formats my code so I don’t cry when I open it later.
  • Extensions Galore: There’s one for pretty much everything, which is great because I like shortcuts.

VS Code is like a Swiss Army knife—if a Swiss Army knife could debug your JavaScript.

5. GSAP: Animation Made Easy

Animations can elevate a website from good to “wow,” and GSAP (GreenSock Animation Platform) makes creating smooth, professional animations painless.

  • Simple Syntax: Even for complex animations, GSAP keeps it manageable.
  • Browser-Friendly: Works like a charm across all modern browsers.

Whether it’s subtle hover effects or full-page transitions, GSAP adds that extra polish.

6. WordPress: The CMS MVP

WordPress is the backbone of most of my projects. It’s flexible, reliable, and lets me build everything from simple blogs to complex business sites without reinventing the wheel.

  • Themes from Scratch: I’m a purist. If I can build it myself, I will. I code my sites from scratch every time.
  • Plugins:
    • Gravity Forms: For powerful, customizable forms that don’t make me want to pull my hair out.
    • Mailgun: Ensures form submissions actually get delivered (because what’s worse than a form that doesn’t work?).
    • Imagify: Compresses images to keep sites lightning-fast without sacrificing quality.

WordPress might not be the flashiest tool, but it’s the workhorse that gets the job done (and keeps my clients happy).

7. Topaz Labs: Fixing Small Images Like a Pro

Let’s be honest: clients often send images that are way too small to use without turning into a pixelated mess. Sometimes, well-meaning photographers try to help by resizing images “for web,” but their idea of web resolution is stuck in 2005, leaving me with files that are far too tiny for today’s high-resolution designs. That’s where Topaz Labs’ AI-powered tools come in to save the day.

  • Topaz Gigapixel AI: This tool rescales tiny images while maintaining sharpness and quality.
  • Why It’s Essential: It saves me from awkward conversations like “Do you have a larger version of this?” when I know they don’t.

Topaz ensures that even the smallest, grainiest images can shine on a modern, high-resolution site.

8. Vimeo: Sharing Work in Progress

When I’m developing a site locally and can’t share it live just yet, Vimeo comes to the rescue.

  • Design Walkthroughs: I record videos showing clients how their site is shaping up, walking them through the design, functionality, and features.
  • Private Links: Clients can easily view the progress without dealing with messy file transfers or complicated staging setups.

It’s a simple way to keep clients in the loop and avoid the endless back-and-forth of screenshots and emails.

9. Google Fonts: Free and Fabulous

Fonts can make or break a design, and Google Fonts offers a massive library of free options that are easy to implement.

  • Wide Variety: From clean and modern to playful and decorative, there’s a font for every project.
  • Easy Integration: Works seamlessly with CSS, making it a no-brainer for web design.

Paired with Adobe Fonts, I always have the perfect typography for every site.

10. ChatGPT: My Code Whisperer

Sometimes, JavaScript decides to stop making sense. When that happens, I call on ChatGPT for a little help.

  • Debugging Partner: It’s great at finding the typo I swore wasn’t there.
  • Explainer-in-Chief: Not only does it solve problems, but it makes me feel like I understand the solution.

ChatGPT is like having a genius Robin to your Batman—always ready to assist, never asks for a coffee break, and occasionally (more like always) saves the day.

11. Local by Flywheel: WordPress in My Backyard

Local by Flywheel is my secret weapon for WordPress development.

  • Fast Setups: I can spin up a new site faster than you can say “localhost.”
  • Safe Testing: Break things on a local site instead of a live one. My clients appreciate that.

It’s the perfect mix of convenience and peace of mind.

12. Browser DevTools: The Unsung Hero

When things aren’t behaving on the front end, Browser DevTools comes to the rescue.

  • Inspect elements, tweak CSS in real time.
  • Debug JavaScript like a pro without breaking a sweat.

It’s not glamorous, but it’s essential.

13. TMDHosting: Fast, Affordable, and Industry-Friendly

When it comes to hosting, finding a provider that’s both reliable and supportive of the adult industry can feel like hunting for a unicorn. Enter TMDHosting—a company that checks all the right boxes.

  • Speed and Affordability: TMDHosting offers fast servers and competitive pricing, making it a great choice for clients who need performance without breaking the bank.
  • Industry-Friendly: Unlike many hosting companies that shy away from adult industry websites, TMDHosting remains welcoming and supportive, which is a huge relief.
  • Ridiculously Fast Tech Support: Their support team is next-level. I’ve had issues resolved within minutes, not hours, which is practically unheard of in the hosting world.
  • Server Location Options: TMDHosting allows you to choose where your server is located, including international options. This is especially helpful for sites needing to operate outside the reach of regulations like FOSTA/SESTA.

TMDHosting has become my go-to recommendation for clients looking for a reliable hosting solution that won’t throw unnecessary roadblocks in their way. It’s a rare gem in an industry that often feels more like a minefield.

Why These Tools Work for Me

This lineup isn’t about being fancy—it’s about getting things done efficiently and creatively. Whether it’s scaling up tiny images with Topaz, testing browser quirks on my trusty PC, or troubleshooting code with ChatGPT, these tools help me bring beautiful websites to life without losing my sanity.

Got a favorite tool I didn’t mention? Let me know—I’m always on the hunt for something that might make this wild ride a little smoother.