Blog

The History of Web Design

Ever wondered how and when web design took over the online world? This comprehensive guide will answer all of your questions about the history of web design.

Photo of Kristi Ray
Kristi Ray
-

Around 4.72 billion people use the internet every day. That’s more than half the global population!

Whether it is to find out what’s going on around the world or in your friend circle- we cannot go a day without using the internet. But, how did it all start? Was there a time when kids didn’t simply use search engines to find all the answers and complete their assignments?

History Of Web Design

In this extensive guide, we’ll be travelling back in time to unearth the history of web design and how web designers have transformed the World Wide Web that we experience today.

The History Of Web Design

World Wide Web

Three decades ago, Tim Berners-Lee, the English computer scientist, invented the World Wide Web and designed the first website. He created the former as a global hypertext project on August 6, 1991. Although he began working on the website for CERN (European Organization for Nuclear Research) in 1989, it was only in November 1992 that the entirely text-based web page was ready to be published.

Here’s the link to the world’s first web page: http://info.cern.ch/hypertext/WWW/TheProject.html

Screenshot Of The Worlds First Website

HTML

Tim Berners-Lee continued being the torchbearer of all-things-internet by creating the Hypertext Markup Language (HTML), the code that built the CERN website. Soon, he founded the World Wide Web Consortium, which develops web standards even today.

Back then, web designers used HTML tables to organise various visual aspects of a website. However, “web design” was limited to basic black-and-blue text, nothing close to what we see on most websites today.

Want to receive updates? Sign up to our newsletter

Each time a new blog is posted, you’ll receive a notification, it’s really that simple.

The First Search Engine

In November 1993, ALIWEB (Archie Like Indexing for the WEB) was launched as the first search engine. Did it work like Google search? Not really. But, it certainly paved the way by providing useful links for categories like research, entertainment, shopping, etc. Additionally, ALIWEB was the first site that used colour- a yellow table to catch the users’ eye and bring attention to the important parts of the website.

The Beginning Of Landing Pages

As web design started being used for business and commercial purposes, designers began creating landing pages with more colours and images. MTV can be regarded as the trendsetter with its landing page depicting a colourful and quirky layout.

Homepage Vs Landing Page Breakdown

Banner Ads

Online marketing was a thing back then, too. However, not only were these ads an eyesore but also took ages to load. That’s when Hotwire (now, Wired) incorporated a banner ad on their website. With fewer texts and more graphics, web design was evolving and getting more complex.

Introduction To Banner Ads On The Web

JavaScript

Speaking of evolution, JavaScript introduced Responsive Design. It was the world’s first web programming language that emphasised the distinction between web design and web development.

By using JavaScript, a web designer could incorporate motion on a website through a “pop-up” window. But, by adding a layer on top of the website, the loading time became significantly slower.

CNN 1996 Review

Since the number of internet users doubled in 1996, CNN created a digital review of the year. The web page remains iconic even today as it portrays a balanced use of text and images, along with a few ads.

Additionally, the year saw massive growth in the number of websites, i.e., from 25,300 to 257,601.

Flash

The long-gone Adobe Flash Player was released on January 1, 1996, and allowed more creative freedom for web designers. They could add objects and animate them, form layouts, use multiple fonts, and other design elements. These additions made web pages more interactive and engaging.

However, users could experience the full potential of this software only if they had a Flash plugin installed. Plus, the complex elements took painfully long to load. No wonder Apple dropped it before releasing the iPhone in 2007.

Google Beta

Finally, something Gen Z can relate with! In 1998, Google released a minimalistic search engine, contrary to the list-view of ALIWEB. Clearly, the strategy worked, considering how the word “googling” is a verb now. Don’t believe us? Google it!

Google Result Define Googling

Cascading Style Sheets (CSS)

The increasing number of internet users was taking a toll on the server, which in turn made loading even slower. This problem called for a more streamlined layout for better speed. CSS detached content from presentations, allowing web designers to concentrate on more graphic elements for a more appealing and organised look.

Although CSS faced its fair share of issues with browser support, it soon grew to become the most important coding language.

PayPal- The Advent Of Online Marketing

Although “The Y2K Problem” was a potential threat in the late 1990s, the year 2000 turned out to be a turning point for businesses. This is when PayPal, the leading online payment system, gained traction after a year of its release in December 1998.

Thereafter, the requirement for a well-organised and aesthetically pleasing website design increased. Consequently, the demand for skilled and talented designers shot up, and most of them began shifting to neutral colours and designs. User experience became the priority while designing a website.

Additionally, businesses started offering online services, which made them a lot more relevant.

Paypal Statistics Infographic

WordPress

The following years allowed “regular” users to be a part of the web design history as those with little to no technical knowledge could create blogs, thanks to Wordpress (2003). Even now, this content management system (CMS) helps bloggers and content creators publish their work through plugins and templates. You can also customise your WordPress websites with the correct knowledge and skills.

MySpace

Following WordPress’ mantra, MySpace (2004) gave its users the first-hand experience of web designing. Users could now create their profiles using simple HTML codes and connect with anyone.

But, with so many amateur “designers,” a.k.a. MySpace users, the site was filled with flashy designs, similar to the websites in the mid-1990s.

Facebook

Launched in 2004, Facebook used to be exclusive to college students only. Two years later, the website became accessible to the public, and undoubtedly, its web design and user-friendly interface have made it a successful multinational conglomerate.

Although Facebook users were deprived of the freedom to personalise their profiles, the cohesive look allowed better branding.

Mobile Web Design

Today, mobiles are the most used electronic devices, and in 2007, the release of the first iPhone transformed web design history for good!

Understandably, most of the websites during that time were not compatible with mobile browsing. Although users could check the desktop layout on their phones, the vast web page being squished in the wrong ratio made the experience rather frustrating.

As a result, web designers began brainstorming on ways to make web pages more “mobile-friendly.” From scaling down to increasing the ability to scroll - designers finally developed the 960 grid system and the 12-column division. Additionally, the CSS framework, Bootstrap, regulated the design elements of web pages and allowed designers to create long scrolling designs, skeuomorphism, and more.

Share Of Mobile Traffic Worldwide

Skeuomorphism vs. Flat Design

Remember what the widgets on an iPhone screen looked like before 2013? The shiny gradient, albeit outdated now, allowed the early user to get acquainted with the never-seen-before interface. Even now, some games and drawing apps opt for skeuomorphism to replicate real-life user experience while reducing the learning curve.

Skeumorphic Ui Vs Flat Ui

Steve Jobs advocated for the skeuomorphic design of the iOS, which was soon changed to a flat design after his demise.

With the user becoming more familiar with mobile website design and touchscreen technology, there was no need for icons and widgets to mimic real-life objects. And the minimalist trend further negated the need for a cluttered and inelegantly glossy skeuomorphic interface.

Additionally, the clean-cut flat design offered consistency and shifted the user’s focus on functionality.

Flickr

By 2009, connecting with people online was no more a foreign concept. That’s when Flickr was announced as one of the best websites of 2009 by Times Magazine. It falls under the category of Web 2.0, which includes social media, video-sharing platforms, and more.

Also, Flickr was the first website that allowed people to share their pictures and try out collaborative tagging.

Responsive Web Design (RWD)

In 2010, Ethan Marcotte released an article on Responsive Design, which involves using HTML documents to optimise web content. The idea is to present the same content in different layouts without reducing its efficiency.

While this concept increased the workload for the web designer, the user enjoyed a website that’s uniform, versatile, and accessible on any device.

Inbound Marketing

Ads and pop-ups are as annoying today as they were back in the day! Thus, with the popularity of online marketing, brands realised that they must resort to other interactive measures to convert prospects into customers.

That’s when businesses shifted to the inbound methodology, which is a practical concept that aims to engage customers with valuable content and create lasting relationships with them. Unlike the repetitive and often spam-y outbound methodology, inbound ensures better ROI and creates a strong foundation for your business.

Hubspot is the perfect example for understanding the difference between inbound and outbound marketing and how the former is more effective and relevant in today’s scenario.

Growth-Driven Design

In 2015, Google began adjusting its algorithm to cope with black hat linking, which became common due to the increased number of websites emerging on the internet each day. Even the smallest company knew and understood the importance of an online presence, and the desire to stand out became intense.

Growth-Driven Design aims at understanding human behaviour, make improvements accordingly, and focus on peak performance. A website created with this SEO approach adapts to the prevailing trends and the customer’s ever-changing demands.

Social Media

SNS platforms like Instagram, Twitter, Facebook, and YouTube created a demand for content, which required relevant backlinks for Google. Accordingly, the reliability and quality of the website context are analysed.

Search Engine Optimisation

While web design is essential for creating the first impression, SEO is what brings the viewers in the first place.

Thus, web pages must incorporate SEO best practices on images, use meta descriptions, and so on. This is the only way to remain in Google’s good books, in spite of the constant algorithm adjustments.

Additionally, website designers can use Google Analytics to amend various aspects of the site according to the insights, like website ranking in search engines.

Build A Website

In 2020, companies began searching for ways to continue their business and retain their customers. The internet became their marketplace; hence, website builders like WordPress, Webflow, and Wixgained popularity.

Present Scenario Of Web Design

User Experience

Although user experience was prioritised throughout the history of web design, today, when businesses are being conducted from home, every detail of the website must be created with the user in mind. This is when website designers and SEO specialists must work together to appeal to users (humans) as well as Google (the bot).

Design Thinking And Directional Design

Design thinking takes this approach and uses technology to fulfil the requirements of the user. This concept works hand-in-hand with directional design to offer a pleasant and enriching user experience.

Less is more, so websites began focusing on creating visuals that appeal to the user without being too in-your-face (unlike the early animations created on Flash)!

Micro-interactions And Micro-personalisations

Micro-interactions also play a pivotal role in enhancing user engagement. It can be as simple as double-tapping a picture on Instagram to see the heart pop up. Minor additions like these allow the brand to express itself efficiently. Some common examples of micro-interactions include drop-down menus, the scroll bar, playable game ads, etc.

Micro-personalisation is another recent concept in web design that aims to use AI to recognise user behaviour and provide a web experience accordingly. For instance, a shopping site having different sections for men, women, kids, and more. In fact, if a brand offers “free US shipping” and the user clicks on it, then they might, indeed, be browsing from the US.

Notice how you search for something on Google, Facebook, or Instagram, and in the next few days, the site keeps “suggesting” you relevant posts, products, and more? That’s the magic of micro-personalisation! But is this advancement in technology a boon or a bane? Only time will tell...

What’s Next?

Web design and development is a dynamic domain, which improves with time or even goes back in history (just like fashion trends)! With newer technology, more sophisticated systems, and bustling ideas - there’s a lot more to explore on the world wide web. After all, we’ve only seen the tip of the iceberg till now.

Web Accessibility

Website accessibility acknowledges diversity, encourages representation and provides a safe space for all. And looking at the progress till now, it would make sense if web design becomes more accessible to specially challenged people in the near future. For instance, adding captions to videos and alt text to images.

How To Make Website More Accessible

AI And Chatbots

Chatbots are expected to dominate the internet in the coming years, considering how most of us expect businesses to be online 24/7. According to Drift’s State of Conversational Marketing report published in 2020, there was a 92% increase in the use of chatbots for brand communication since 2019.

3D Design

The journey of web design may take a turn towards the 3D route. This immersive technology has always been a fascinating concept, paving the way for VR. However, expecting VR to be adopted by websites is still a farfetched idea.

Consequently, 3D seems to be the more feasible yet practical way to go. Apart from 3D elements, think about websites that cover the entire screen, blurring the lines between reality and the virtual world, for an immersive user experience.

Micro-personalisation Or Invasion Of Privacy?

The present generation wants stuff to be done quickly, like finding nearby hang-out spots, booking cabs with the touch of a button, ordering food in a jiffy, etc. Micro-personalisation can be seen in many websites today, and its relevance only seems to grow with customers demanding instant gratification.

However, this web design technology can threaten user privacy if taken “too far.” Thus, as an informed user, you should check the permissions and privacy policies of the apps on your mobile and other devices.

Voice Interface

Adding to the breach of privacy are voice assistants like Alexa and Siri that use voice commands to provide desirable results. So, you don’t even need to look at the screen or pick up your device to make a call, play a song, or send an email.

How Many Consumers Use Voice Search

However, recently, much anecdotal evidence points at the possibility of our devices listening to us all the time.

The Evolution Of Web Design

The history of web design has experienced astonishing growth, and there’s no looking back.

From complex HTML pages to template-based websites - what Tim Berners-Lee created as a research project ended up becoming an indispensable part of our lives. With all of these improvements in design happening in merely three decades, we can only expect the unexpected in the future!


Photo of Kristi Ray

Kristi Ray

Kristi is head of content production and editing at sitecentre and joined the team in early 2021 based out of our Sunshine Coast office to deliver higher-quality content to our partners. Kristi has a vast knowledge of copywriting styles and experience to accelerate the production of SEO friendly content at the highest levels.

Find them on their website: sitecentre and LinkedIn.

The History Of Google Search

The History Of Google Search

Photo of Kristi Ray

Curious to know about Google’s history and how it all began? Check out our comprehensive guide to learn more about one of the biggest companies in the world.

How Often Does Google Crawl Websites?

How Often Does Google Crawl Websites?

Photo of Kristi Ray

Google will often crawl your website to keep data fresh, up-to-date and detect changes. But, how often does Google crawl your site? We break it down here.

What Are Internal Links In SEO?

What Are Internal Links In SEO?

Photo of Brodey Sheppard

Want to know all about internal links and their importance in SEO? Read our in-depth guide on the topic to gain the required insight.

Ready to get started?

Ready to grow to the next level with sitecentre?

Get Started 1300 755 306

© 2014 - 2021 sitecentre PTY LTD. All rights reserved.

Made with in Australia.

Australian Small Business Champions Finalist