November 10, 2015 Erin Bernhard

Before & After: The W3 Project

The Before & After Redesign Series is a Legendary Lion Web Design project aimed at showcasing an overview of our web design process through the lens of well-known existing websites. 

Before & After: The W3 Project

At Legendary Lion, our mission is to build a better Internet one website at a time. As such, it was only natural for us to explore where the Internet all began. Behold, The W3 Project:

Legendary Lion | Before & After: The W3 Project

Thanks to CERN, the Internet exists. Looks like they haven’t done much updating since 1989.

Style Tile

We immediately felt inspired to dive into this site and expedite 25 years of updating in one take. To start things off, Kayla created a style tile to help propel us in the right direction:

Legendary Lion | Before & After: The W3 Project

Kayla is the first to admit that she’s not the greatest speller, but Erin sure is glad to have her at the helm of art direction and design!

To create a style tile, we collect each design element that we plan to incorporate into a website and arrange them in a quick document to give the team (and the client) an at-a-glance view of the direction we hope to take for the final design. This is a great way to communicate the aesthetic feeling that a client is trying to achieve. For style tiles, we focus solely on:

Font Choices
Menu and Button Shapes
Header, Subheader and Body Copy Size
Inspirational Images


While Kayla is working on the style tile, Erin is spending time with the existing copy, reorganizing it to make it accessible, interesting, and appropriate. She creates a new sitemap to ensure that each page is fully incorporated while still keeping the new site simple, straight-forward, and navigable.

“The W3 Project legacy site was laid out in an incredibly convoluted way. The original designers built pages upon pages into one another with no clear menu to navigate back and forth between pages. It’s like the forefathers of the Internet always intended for the World Wide Web to be a forceful rabbit hole.” – Erin

For the sitemap, Erin pulls the original sitemap out into a document and renames pages to be more intuitive. Then, she adds submenus where appropriate. When there’s a lot of information to incorporate, she creates a copy matrix as a basic outline of each header on each page.

Home Page Design

When logic and inspiration collide, we call it design. After Kayla has finished the style tile and Erin has finished the sitemap, the two are combined to create a new home page.

Legendary Lion | Before & After: The W3 Project

Here’s a snippet of how we would recreate the first website that was ever published on the Internet. Cool, eh?

“For this design, I was inspired by the clean and simple feel that the original site was already portraying. I thought that a crisp new design was the best approach. I chose the imagery because, to me, the Internet encompasses the entire universe, which is what is also being shown by this powerful display.” – Kayla

And there you have it! The W3 Project Redesigned.

Like what you see? We’re always taking suggestions for future projects to include in this series. We’d also be happy to work towards giving your company its lion’s share of the web. Feel free to schedule your first appointment to find out more about what we can do for you.

Tagged: , , , , ,

About the Author

Erin Bernhard Having dived in to her love affair with words at an early age, Erin is no stranger to writing great copy. She has arrived in the Lions’ Den wielding a Bachelor’s degree in English Language and Literature from the University of Michigan and extensive experience in content development, digital marketing strategy, and social media management — and she’s always hungry to learn more. Erin has a knack for storytelling and a passion for listening that have proven to be the winning combination when it comes to great client relations. Communication is the key to success in any business and Erin stops at nothing to ensure that her clients’ voices are heard

View all posts by Erin Bernhard


Building websites and web applications since 2010.