Build out your designs yourself.

How Readymag can help designers transform ideas into reality.

I often talk about how freelancing is a great way to work, but it’s important to have an offer that solves the problems of your clients. That means that if they’re looking for a website design, they are likely also looking for someone to code it.

Today I want to show you one of the ways of how you can do it.

This article is sponsored by Readymag.

Let me give you a quick example, when we launched our first book, Designing User Interfaces back in early 2020 on Gumroad, we also made a dedicated landing page for it. It was a lot of coding, and it was done in a way where for every change I had to request it from the developer.

Now we’re going in a different direction, using tools like Readymag to create the sites quickly ourselves, as that allows us to track how they perform and quickly make changes.

Here’s how I used Readymag to create a dedicated minisite for my UX book. If you’re making products, or working with clients — chances are going with a full dev team for some kinds of sites is going to be overkill — it’s a lot faster with these nocode tools, and seeing how robust they’ve become is awesome for any designer.

Let me take you through the process here.

From start to finish

Once I set up the right grid, both horizontal and vertical I can start pasting in the image assets. Yes, you read that right. I go to sketch, copy an entire group — like the ebook cover- and just paste it into Readymag. Then it’s a matter of some scale tweaks and positioning and in mere seconds you can get all the assets in.

Once the images are in it’s time to add some text. With the layout lines being both horizontal and vertical it actually gave me ideas for an even better alignment than I had in my original Sketch file.

Similar items, like these testimonial cards, can be made into groups, with text-styles created for the content within them. You can also align all the groups together to the horizontal center of the page.

With that workflow established it was quite easy to create the rest of the page, including the overlapping photo.

The last step was adding links to the buttons and creating some nice hover animations — including the precise length, easing and all the necessary modifiers.

Animating some content in was also quite easy, but as I always say don’t go too far with it — animate only a couple of sections, even if the tools allow you to animate everything. Having the effect of everything sliding in from every direction is too overwhelming.

Make animations subtle and meaningful.

Super fast!

In about 20 minutes I was able to transform my Sketch design into a fully functional website with animations and hover effects.

That is insanely fast!

If you’re working on client projects ask yourself whether it’s actually necessary to go the full-on dev route with each project, or whether you can make it yourself, faster and easier.

If you want to try the tool, the links are in the description under the article, and there’s also a promocode so you can get it cheaper.

Let me know what you think, and as always have a beautiful day!

You can use the code malewicz at readymag.com to get the Freelancer plan for just $16. And you can preview the site I made here.