How can I emulate a website?
- Pinpoint the website platform
- Use a program like Fount to discover the font
- Recreate color palettes to achieve a similar feel
- Ask yourself what you like about the site and DIY using heat maps, product pages, and more
I was strolling through the Minneapolis Institute of Art, completely unburdened by time or a schedule. I saw Georgia O’Keeffe and an uncharacteristically-Picasso Picasso that transported me back to a university Art History class. If I had even an ounce of artistic ability, my hands would have been twitching to create something of my own. Every sculpture or oil-on-canvas that caught my attention would have inspired my own final product—but how could I mimic designs without downright stealing?
How to mimic designs
That question has been around for ages. Now that so much of all design fills screens for digital consumption and admiration, it may be even harder to protect originality. Yet, there are a few core components of every beautiful web page—and they’re up for grabs. Of course, the design you want to copy will differ depending on the project. Is it a portfolio website or product page? A parallax design or more traditional?
These are some things you want to pinpoint if you’re jonesing to duplicate a digital masterpiece without a lawsuit (or bad karma). To help you map these core components out, I’m sharing shortcuts that reveal design details. Plus, I’ll explain how you can use those tools to create your own showstopper.
How to figure out what a website is built with
Here’s a sample technology profile of Apple.
So where does all this information get you? As I mentioned, it gets you to a starting point. If you were aiming to mimic the fixed elements and moving layers of Coin’s website, it’s helpful to know that the innovative credit card service is hosted on Amazon’s infrastructure with a content delivery network, several widgets, and details like these:
How to figure out exact font names
Googling ‘font used on A Cup of Jo blog’ over and over is one way to do it. Luckily, there are easier ways to see exact font names and sizes used on a webpage. For this purpose, Fount is a typography goldmine.
The bookmarklet works in two quick steps: hover and click, then click again. You’ll immediately see a pop-up over the word with the font name, size, weight, and even style.
Of course, you’ll see an exact name, but the goal is to mimic your favorite design. Instead of purchasing or downloading the font you identify, list features that you like about it. Those could be:
- Serif vs. sans serif
- Weight and proportion
- Letter spacing
- Cap height in conjunction with x-height
- Loops, tails, shoulders, and more
Based on the profile of qualities you put together, you can search for (or create!) a font that has everything you like. Scanning a few different fonts on the page can also help you put together a complementary group.
For instance, your chosen inspiration site may combine three sans serif fonts in different sizes and weights, or it may use a mix of serifs and one flashy brush style. If you’re going for playful and relatable, you most likely won’t be browsing pages of old Roman typefaces.
How to mimic a mood through color
As a designer of some sort, color is basic knowledge. But sometimes it’s hard to identify exactly what catches your eye in a design, even if you can name ‘green, tan, yellow’ as the primary, secondary, and background colors. At this point, extrapolating a page’s palette can give you tons of insight.
Pictaculous, a color palette generator that pulls shades right from an image, is one of many tools you can use. Grab a screenshot of your design inspiration and pop it in the search bar. You’ll get back something like this, which was generated from Oscar Health Insurance.
Once your design is whittled down to three or four main colors, it’s much easier to mimic them. Look at the ratio of primary to secondary colors, as well as the tone and shades of each. Based on the colors used on Oscar’s site, the audience can deduce that it’s a personable, simple service—which also aligns with the page’s message.
If you don’t love every single hex code returned from a palette generator, choose one as your anchor and build a new palette around that.
How to tell a similar visual story
Content strategy is all the rage, and design definitely plays a big part in communicating any story. Even if a website is for something service-based (like a travel-booking website versus designer suitcases) visual cues are crucial.
When looking for inspiration, or trying to copy the design from something great you’ve seen, look at the arrangement of ideas. For this step, you’ll want to tune out things like color and fonts to instead focus on the relationship between design elements.
This idea isn’t new. Visual hierarchy and, more specifically, emphasis on the “top third” of a page have been popular subjects since content moved into the utility phase of the digital revolution. Heat maps are excellent ways to weigh where a page gets the most eyeballs. So if your design muse focuses their brand story in the middle of the page, like Dropbox’s product page, and directs the eye vertically onto other ideas, this is the format you’d want to work into your design.
To help figure out the layout you’re attracted to, sketch a basic wireframe of the model site. Afterward, you should brainstorm how your content, designs, or images could fill a similar arrangement—as well as how your content can bring something new to the mix. The design you mimic could contain tons of visuals, but if you’re a witty copywriter, you may want to work a few lines into the wireframe to adjust the tone and story. This is how you personalize.
Stealing like an artist is harder to do if you don’t know where to start. When it comes to web design, these tips and tools will help you piece together essential elements, while still allowing you to add your own twist to the final product.