The Art of Copying

I see a lot of founders and builders approached web design like art, they aim for originality and authenticity. Unfortunately, web design is like art, and achieving an original masterpiece on your first try is almost impossible, and completely unnecessary. No one is asking you to be an artist.

Your GOAL: deliver the message about:

1. WHAT is your product?
2. WHY your product?
3. HOW to start?

As long as these 3 things are conveyed properly, you’re good to go. Focus on your product friends!

So, how do we achieve that? It’s fairly simple. Just like learning anything, you start by copying. Here’s an analogy:

• Listen to music
• Singing your favorite ones
• Improvising in the shower
• Releasing covers
• Writing your own song
• Look & appreciate other websites
• COPY other sites EXACTLY
• Tweaking the sites
• Combine 2-3 sites together to make your site
• Make a completely new site from scratch

In this scale, getting to level 3 is usually enough, while getting to level 4 is what almost every website does.

Still not convinced? Take a look at these major sites:

Like seriously, they’re all the same... Check out this blog for a check list of what you need to put in your website.

But right now, we’re focused on the styling part, the feel, the look. You might say, “Oh yeah, simple enough: A heading, some subtitle, and a button

But it might not look the way you want it unless you have the “design feeling”. This is where attempting level 3 is safe. So let’s get you there by the end of this blog post

Step 1: Copy other sites, EXACTLY

Remember, copying it EXACTLY is very very important. Even use their words, just try to recreate it in your favorite tool and see how it looks.

1. Pick a nice looking site, and copy it exactly. I recommend you to pick from this list:

• Apple Card
• Stripe
• Airtable
• Or you can search for “Web Design” on Dribbble. (But be careful, pick a normal looking one, it’ll be hard to do a funky one)
• Go to your favorite website building service. Now if you’re looking to build your site fast and being able to tweak it easily, pick a tool that’s friendly to beginners. I’d recommend using Typedream since it’s beginner friendly but unlike Squarespace/Wix, it’s also customizable. But you’re free to choose whatever you want, it doesn’t really matter as long as you know how to use it.

Of course, without using pure code, there will be limitations on what you can recreate. So just try your best, if the button is originally square, but you tool’s button is round, just use the same color.

2. Start building, try using the original site’s texts first. Using your own site’s copy might not work because the design might have been made for the exactly words being put there 😉. Also use their pictures for now, we’ll dive into building mockups later on.

3. Once you can somewhat copy the site, pause and take a look at that site. It should look pretty good and you’d be happy to use it as your site.

Step 2: Follow the layout, change the texts

1. Now it’s time to use your own copy on your site! If you don’t already have a copy, now is the time to make one. Follow what they wrote as a placeholder. For example:
   1. “Slack is your digital HQ” = “<Product Name> is a <something descriptive>”.
   2. “This is Intercom: The best way to connect with your customer” = “<Product Name> is the best way to <what your product solves>”
2. Check out this guide to decide what to write on your site
3. Adjust your text length to about the same as the original one.

Step 3: Take a mental note of the font sizes, font weights, spacing, site colors

This exercise helps you actually see what the font size and weights are for each part of the website. Usually, you’d have:

1. The whole site is white, the texts are black, and there’s ONE accent color through out the site.
2. The whole site would have the same font
3. There’s a very big and bold heading followed by a small & regular text, and a button with an “accent” color, aligned left, then there’s a mockup of the product on the right
4. Below, there’s be a section for 3 features/benefits of the product: Medium big/bold heading, followed by the same small & regular text, with some links that has that accent color
5. Lastly there’s be a call to action, usually put on top of either a dark background color or the accent color. This is followed by an action button, either an email form or get started button.
6. The footer usually employs a smaller text than the rest of the site.

Step 4: Try to tweak things a little

1. If your brand color is different than the site you copied, this is the first thing you can try. Pick ONE accent color that you want, then apply that to ALL the accent colored parts of your site. This should only appear on important places, like buttons or links.
2. Take a step back, does it look good? In fact, does it look good enough already? Changing a color is usually enough that you don’t need to change anything else!
3. Now of course you’d need to change the images, use your own screenshots. We’re not going to go into how to do this now, but you can employ the same methods! COPY their mockups ins your favorite design tools, then replace the screenshot with your product’s screenshot. Then, change the accent color with your own color.

That’s it! Your site should look mint & fresh, following the current trend of sites, with consistent typography and colors.

Now, if you’re ready to step up, you can try combining 2-3 sites with a similar style together, and you’d have a site that’s perfect for your product.