Top 10 most popular Webflow sites of 2015

Check out the 10 most popular sites built in Webflow in 2015—based on your likes in our Discover section.

John Moore Williams
January 14, 2016
Web design

Webflow’s passionate design community inspires us every day. And these 10 websites show the amazing range of what you can do.

10. Solar Wars by Vincent Bidaux

Vincent Bidaux’s CSS-powered Solar Wars
A solar system in CSS.

Vincent Bidaux’s Solar Wars offers a quiet, but eye-popping, example of what you can do with CSS and animations in Webflow.

Want to know how he pulled it off? Clone it in Webflow and dig in!  

9. Douglas Pinho’s Portfolio

A portrait humanizes Douglas Pinho's portfolio site
Including a portrait humanizes your portfolio site.

Douglas Pinho’s gorgeous portfolio greets you with a full-screen black-and-white photo and some rotating text that introduces his skillset. I personally love the giant portrait — which persists as you scroll through the site — because of how it humanizes the site, never letting you forget there’s a person behind this code.

I’m also a big fan of Douglas’ project section, which really digs into all the meticulously detailed work it takes to build a robust, on-brand website.

Showing various stages of your design process adds depth to your portfolio website
‍I love it when people show their work! Here, Douglas shows how he translates early sketches into the final product.

8. UNIQLO Responsive Experiment by Timothy Noah

Timothy Noah's responsive redesign of UNIQLO

England-based designer Timothy Noah has done a ton of amazing work with Webflow, ranging from his handy UI kits Slinkey and Leafee to the free Foundation template. But he’s really hit his stride with this responsive redesign of UNIQLO’s site (which is in no way affiliated with UNIQLO).    

I’m into the persistent multi-level nav menu, which lets you find just the product you’re looking for without navigating all over the site. And it expands on click, not hover, so it’s easier to use on desktop and works just as well on mobile.

But I may like the nicely visual shopping cart even better, which again saves you clicks by showing you what you’ve already picked without going to a new page.

Very nice, very mobile-friendly, work, Tim!

7. moreofthesame by Shane Hurt

If you're going to present users with a loading screen, you might as well give them interesting copy to read in the meantime

Okay, so no one wants to pull up a site only to see that dreaded word: Loading ...

Thankfully, Shane Hurt makes good use of moreofthesame's loading screens by by presenting us with a series of pithy, memorable lines of copy. Plus, once you start scrolling, you’ll find it was worth the wait.

The on-hover interaction displays a full-screen background image

There, an understated list of projects (for some big-name clients) explodes into vivid, fullscreen-images on hover, teasing the next page’s content. It’s a creative and immersive choice that really focuses you on what you’re doing, but does interfere with your ability to read other link text.

Copy above the hero image contextualizes the image

Once you pick a project, you’re greeted by a beautiful intro that nicely inverts the (Medium-reinforced) trend of massive, context-less hero images. Then, as you scroll down the page, sticky blocks of concise but useful content scroll with you, contextualizing the background images and creating a really unique layout.

Sticky copy blocks scroll with you
Shane puts stickiness to creative use with copy modules that follow you as you scroll.

Shane also makes creative use of CSS cursors by changing yours to a downward-pointing arrow, subtly encouraging you to keep exploring.

Sleep restlessly. Create for sanity. Reinvent the wheel. Keep your chin up. Get your hands dirty. Cherish the accidents. Compartmentalize everything. Then go back and do it all again.
‍Words to live by. Though I prefer to sleep like I’m dead.

6. R.V. Krishna’s portfolio

Your site's main headline should clearly explain what you do

R.V. Krishna’s portfolio site wins with clarity — as you can see in his site’s hero section, which immediately tells you what he does. It’s not the most motivating copy in the world, but with 5 simple words, you’ve already learned a lot about him.

Possibly my favorite detail of this site is the infographic-like experience section, where R.V. clearly communicates both his responsibilities and skills with animated bar graphs. Not the kind of thing you want on a resume, but for the web, it’s just about perfect.

Using infographics to convey work experience

R.V. also shows admirable restraint with his typography, which sticks to various weights of Google’s humanist-grotesque Roboto.    

5. Color Theory by Taylor Poe

Color Theory's intro animation shows all the devices they design for.
Use intro animations wisely.

While making your users wait is never something you want to do lightly, Taylor Poe's Color Theory greets you with a beautiful intro animation that does a great job of visually setting up the agency’s story.

Remarkable experiences on screens of all sizes.

When the animation’s done, it slides up to reveal the tagline, delivering on the intro’s promise. Then the narrative flow continues as the colorful triangle first indicates “scroll down,” then animates to take a place in the design.

While the site’s typography gets a little busy at times (featuring Sorts Mill Goudy, Montserrat, and Fira Sans), the case study pages settle down to a calm combo of Goudy headers and Fira body copy. These pages also break up the copy with illuminating looks at process deliverables (like the sitemap below).

Color Theory's site includes great case studies
‍Again, showing all stages of your work can highlight your process and strategic thinking, helping set you apart.

4. History of Animation by Hung Vinh

The History of Imagination site combines Open Sans and Georgia in fresh ways
It's quiet, it's beautiful, it's type.

Hung Vinh’s engaging History of Animation offers a dynamic overview of animation’s development through time. It’s the sort of site you just want to scroll through in search of beautiful details, and Vinh makes sure to reward your effort.

I’m a type nut, so my favorite aspect of the design is the careful combo of Georgia for headings and Open Sans for body copy. There’s no denying that these are two of the most widely used fonts on the web, but they somehow come across as fresh here.

Hung Vinh puts a common design technique to creative use to inform about how animation works

Vinh also makes creative use of a common design technique (isometric layered design elements) to communicate an important fact about how classic animation works — the overlaying of cells to build complex scenes.

Hung Vinh uses a scroll interaction to illustrate animation techniques
Scrolling adds color to the Bugs Bunny sketch, paralleling the production process.

I’ve also got to call out the site’s unique take on the mega-menu, which presents page sections with a grid of associated images. Not sure why the section titles only show up on hover, but it’s a creative menu.  

The History of Animation uses a grid of linked images as a navigation menu
The site's menu consists of a grid of related images, with section titles revealed on hover.

3. Creative Agency Template by Evan Jones

Bold headline + epic photo = Agency website template!

Evan Jones’ Creative Agency Template presents a one-page agency website, with appropriately pithy headlines and subheads.   

Animating text can be an effective way to draw people's eyes
The italicized subheads animate into place, drawing your eye.

While we wouldn’t usually recommend animating copy much, this template’s animations draw you in to worthy lines you might otherwise miss. It’s an interesting technique, and might be worth playing with for important content you want noticed, like calls to action.

The template is a little typographically busy, with three different faces popping up across the site — though, to be fair, Vollkorn only shows up in those animated subheads.

2. Overton Graphics by Josh Overton

Labeled icons provide a better navigation experience than icons alone.

Josh Overton’s Overton Graphics is another one-pager with anchor-based navigation, though Josh has placed his navigation on the left side of the screen (a good location based on Fitts’ law). Though the icons aren’t incredibly clear, the on-hover labels add a lot of clarity.

Visually, Josh has created an interesting combination of Delaunay triangulations photos, adding a bit of character to standard graphics like an epic shot of mountains and, later, a laptop.

I’m also a fan of form fields’ subtly colorful active state, and smart use of labeled icons to replace a dropdown of options.

1. Geospace by João Paulo Teixeira  

João Paulo Teixeira’s Geospace offers an inspiring example of how a content-focused site might be done a little differently than your average vertical list or grid. Here, articles are listed horizontally, with big, dramatic photos.

The equally bold typography feels like something you’d see in a magazine, though I have to wonder why the article titles only appear on hover on the homepage.

‍Nice design for author cards or “characters in this story.”

Once you click into an article, content slides in from the left or right. As you scroll through content, the article’s cover photo stays fixed, while the content pane reveals tons of beautiful design elements like related videos, comments, articles, and callouts.

A variety of editorially inspired typographic styles add interest to the textual content.

What will be the top sites of 2016?

It’s up to you to decide — so be sure to share your sites in our Discover section and be sure to give your favorites a like!

6. Networking and word of mouth

The number-one way to find quality clients is to get out and meet people (figuratively and literally) at non-design events

Once up a time, I’d spend all day at home, applying for mechanical engineering jobs in isolation. I was unsuccessful for months.

I did, however, make serious headway on my Netflix backlog. Serious progress, people.

Eventually, I gave up and focussed on pursuing a career in web design and development (which I was much more passionate about), and started getting out and socializing. 

Within weeks, I had job offers coming in from my loose-knit network of new acquaintances. It’s not rocket science: People prefer to hire people they already know and like — not the faceless folks clogging their inbox with links.

Notice how I didn't specifically describe who the people I met were? That’s because you need to meet all kinds of people. You have no idea who your next client will be.

But they probably won’t be at a web design meetup — those are filled with jobless designers. 

All of this is worth repeating: Go to any and every meetup that matches your interests, and simply tell people you’re a web designer. Watch what happens. Everyone needs a website, or knows someone who does. That's what’s so great about freelancing in this industry.

people eating and talking
Get outside. Talk to the humans you meet there. Repeat.

Some places to start meeting people:

  • Meetups
  • Sports events and classes
  • Cafes
  • Abroad (for some reason, people are a lot more open to talking to strangers while traveling)
  • Parties
  • Twitter
  • Slack groups
  • Conferences and conventions

Just keep in mind that, no matter the event type or place, you have to actually talk to people you don’t already know. 

Tip: Don’t be the typical “business networker.” Don’t bounce from person to person shaking hands, fake-smiling, repeating first names every sentence, and handing out business cards. Be legitimate. Make real connections. 

The other side of the networking coin — word of mouth — comes from building up a client base, having lots of contacts, and building your personal brand (with your blog, portfolios, and templates). This takes time. Do great work, treat your clients with respect, keep in touch with past clients, and follow the rest of the advice in this article, and you'll absolutely be fine.

With networking and word of mouth, you can easily reach a state of having more work offers than you can sustain—without ever actually working for it. When this happens, you can increase your rates. Ka-ching.

Personally, I turn down contract offers on a weekly basis. And they’re all the result of word of mouth and networking I did months ago.

It honestly doesn't take long to get to this point if you produce quality work and put yourself out there.

7. Hustling

Hustling is the art of working extremely hard and extremely smart. In the context of freelancing, hustling involves going out and finding work directly. For example: finding websites or businesses that desperately need your services.

Does your favourite pub have a terrible site? Why not talk to the owners and convince them they need you to fix it?

If you have the right personality, and the drive, this can be an extremely effective way to whip up some initial work. It just isn’t particularly glamorous. It also requires your repeated, hands-on time and energy. (In contrast, writing blog posts or setting up a portfolio one time can attract customers for years to come.) The success rate of in-person contact, however, is much higher. The trade-off is lower volume.

Bonus: Freelance.tv

Fresh out of the studio (or maybe his cool van) Dann Petty released Freelance.tv. It’s a series of 10-minute interviews with freelancers that explores how they find, work with, and keep clients (and much more).

As you may have noticed from reading this post (or maybe not), hearing from other freelancers about their experiences can be extremely helpful. Check out his new episodes and also his upcoming documentary, Freelanced.

Now get out there and find your next gig

If you’re sitting at home, desperately hoping clients will come to you, I have news for you: They won’t.

You have to put yourself out there to start, and show prospective clients that you have tangible, valuable skills to offer.

Luckily, this is an industry where skill and contacts trump all — education is irrelevant. So take advantage of that.

So to summarize, here are your next steps for getting clients and building your freelancing business:

  1. Build your portfolio. Make it gorgeous. Share it everywhere. You can use Webflow to do it yourself without coding.
  2. Create profiles on Behance, Dribbble, and Webflow to connect with other designers and potential clients. Use their SEO advantage to drive more traffic to your website.
  3. Create a profile on Upwork and Design Inc, and bid on contracts. Be confident, and don’t be scared by inexpensive competitors. Also use AngelList to find contracts with promising or established startups.
  4. Start meeting people. Get out, meet, and befriend as many non-designers / developers as possible. Be legitimate.
  5. Start a blog to complement your portfolio. Write thoughtful, useful content to establish yourself as an expert in your discipline. Let your personality shine through.
  6. Convert your websites designs to templates, and release them on sites like Webflow, CreativeMarket, and ThemeForest to earn passive income and awareness.
  7. If it’s your style, start hustling. Find people who legitimately need your services and tell them why.

But most of all:

"Do something! Even if it's wrong."

– My friend's dad

When you’re starting out, it can be better to do the wrong thing than nothing at all. In the process, you’ll learn, and you might just stumble into something that works beautifully.

Just try to not to be so wrong nobody will ever work with you again. Ever.

Now, stop reading, and get out there and land some clients!

Oh — and If you’re a freelancer, how do you find clients? Is there anything I missed?

John Moore Williams

Head of Content Strategy at Webflow. Nice to meet ya. Follow me @JohnAMWill.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.