A brief history of web design
Web design is one of the important means to attract visitor’s attention and boost your business. The site with a trendy minimalist design is a perfect way to present the company to the target audience and sell the product or service.
The approaches to web design have changed throughout the years and the sites we come across now differ greatly from the pages that existed earlier.
The so-called dark ages of web design took place in the late 80s. When Tim Berner-Lee invented the world wide web, the pages were created with hypertext and looked like the black screen with few monochrome pixels. The design of these pages was created with the use of tabulation (Tab key) and symbols.
- The first web pages
- When was the web introduced?
- When did the world wide web come out?
- A brief history of HTML
- World Wide Web Consortium
- First development: Tables-designs
- Commercial web pages; a future for color and animations
- Flash; beyond HTML
- Dynamic HTML; Rising alongside Flash
- Fast 3D websites with 3DML
- Rise of CSS-Based designs
- Web design in the 21st century
- The mobile era
- Mobile-first design
- Mobile-first design VS responsive design
- Tips on mobile-first design
- Flat design
- The emergence of responsive design
- Modern web design
- The future of web design
The first web pages
The first full-fledged websites appeared at the beginning of the 1990s and these pages were looking quite simple – the text was organized in tables and occupied much of the sites’ space.
There were no visual elements
The sites were not customer-oriented, there was no interactivity, the web pages did not have an appropriate content management system. The main focus was made on the content and the links. The updates were made rarely and were not related to the appearance of the site.
The beginnings of the web design
When was the web introduced?
The website design history is vast and interesting; from the dark ages of web design to interactive web pages on every smartphone. Table-based designs paved the way for the Flash, and now CSS-based designs are here. Here, we’ll review a simple timeline of web design through the years.
When did the world wide web come out?
The worldwide web (WWW) was invented in 1989 by Tim Berners-Lee. He was a British scientist, and his intention for creating the WWW was to automate the process of information sharing between institutes and universities. He wrote his final proposal for the World wide web in May 1990 with Robert Cailliau, a Belgian system engineer.
By the end of 1990, the first-ever web server was up and running at CERN, on a NeXT computer. Since this computer was the sole server of The world wide web, it had to be kept on 24/7. Berners made a handwritten label for the computer, which read: “This machine is a server. DO NOT POWER IT DOWN!!”
A brief history of HTML
The first worldwide web page was published in August 1991 by Tim Berners-Lee. This website was simply introducing itself, and its future: The world wide web.
The first website also introduced its platform: Hypertext Markup Language, also known as HTML. The website was very simple: Single-column text, a few dozen links, and headings. Early web pages were basically just texts. Later on, HTML progressed and it was possible to have photos and tables on websites.
World Wide Web Consortium
It did not take long for us to realize that a sort of “unity” was needed to officially use and create on the web. In 1994, World Wide Web Consortium (W3C) officially came into existence, and HTML was set as the standard for marking web pages. W3C is present and active today as well, setting standards for programming languages and open web markup.
First development: Tables-designs
It might not seem like much, but with the table markup in HTML, many designs came into existence. The table design was originally made to display tabular data and tables, but creative designers were quick to utilize this new ability to make actual designs for web pages. Multi-column layouts were the gift of this new improvement. Complexity followed table-based designs, and soon enough, sliced-up background images were used to give a simple yet pleasing aesthetic to websites.
Commercial web pages; a future for color and animations
In the second half of the nineties, the commercial web pages started to appear. The appearance of the sites started to play a more serious role and the designers began to apply a wider set of tools, including:
- Adobe Flash;
- GIF-animation turned into the widespread practice that was used for serious purposes.
These tools were soon incorporated, and gave life to the next generation of web design, which starts with flash-based websites:
Flash; beyond HTML
Adobe flash was beyond anything anyone had imagined for websites; it allowed animations, video games, and applications to be put on web pages. It was first introduced in 1996, and its first name was “FutureSplash Animator”. Later, it was renamed Macromedia Flash, and finally, it became known to everyone as Adobe flash. This software platform might be gone today, but it marked the beginning of commercial pages. Adobe flash was not the first-ever platform to allow massive changes in web pages. Before flash, Macromedia Shockwave was developed and used:
Macromedia Shockwave; predecessor of Adobe Flash
Multimedia content, such as menus, was created using Macromedia Shockwave for CD-ROMs. This platform was later renamed Adobe Shockwave. Although this new platform had many exciting new features, it had one huge drawback: Shockwave files were enormous. This might have not been a problem when it came to CDs, but for the dial-up internet of the time, these files were extremely impractical. Adobe flash offered files that were small enough to be used with the slow connection of the time.
Advantages of Adobe Flash
HTML had come a long way from its original single-column format, but still, if a developer was to create any sort of interesting design, they had to either use spacer images or come up with a crazy table structure or both. With Adobe flash, everything got extremely simple: Interactive sites were made with animated features, and there was no need to go above and beyond for writing the code of a website.
Dynamic HTML; Rising alongside Flash
As Adobe Flash opened the doors to animated and interactive websites, a new form of HTML was also being developed and popularized: Dynamic HTML, also known as DHTML.
Fast 3D websites with 3DML
In 1996, Micheal Powers invented 3DML, a type of non-valid XML language. 3DML was used to create worlds or scenes known as “Spots”. Although Flash had made it possible to create 3D worlds, the files that were created with 3DML were much smaller and this led to 3DML being faster than Flash. Flatland Rover was a browser that was independently developed for the sake of 3DM. Naturally, plugins were also designed and available for other browsers (Internet Explorer, The AOL browser, Opera, and Netscape Navigator) as well.
This language did not last very long and development was stopped in 2005, and a plugin for Firefox was never introduced. Even so, websites that are built on 3DML are still out there, but it is not possible to view them without Flatland Rover or the plugins.
Rise of CSS-Based designs
CSS was already introduced long before it gained popularity, as we saw DHTML was already utilizing it. Major browsers rarely supported CSS, but the dot-com boom in the early 2000s led to CSS gaining popularity. Before this era, many designers were unfamiliar with CSS, and some even found it intimidating.
There are many reasons as to why CSS grew as much as it did, but here are a few of its advantages in short:
Pros of CSS
- In Table-based or flash designs, the visual aspects of the website were integrated with its contents. This meant that it was impossible to separate these two in these languages. CSS was different; design elements and contents are separated in this language. This means that maintaining a website will be easier, as it is possible to change either aspect of the website without touching the other.
- Laying out a webpage is best done with a CSS-Based design, compared to using a Flash or Table-Based design. With CSS, markup clutter was reduced and the final webpage was more semantic and neat.
- Document sizes of a CSS design are generally smaller than the document size for a Table-Based design. This means that faster loading was possible. The only downside of CSS designs is that the first time that a website is visited, the bandwidth might take a blow for loading the stylesheets of the website, but CSS designs will be cached by the user’s browser, and the following visits will be faster-loading.
Web design in the 21st century
In the 21st century, people realized that the web pages should not only be convenient from the technical side but also attractive and user-friendly from the visual point of view. The CSS2 allowed separating the visual presentation and the content of the site.
The rise of blogging
In 2003, Matt Mullenweg and Mike Little created WordPress. The first release of the platform offered users to create blog posts that provided little visual personalization and very simple design. Later WordPress provided the customization, so the users received the ability to alter the appearance of their pages without changing the content. Nowadays WordPress is one of the most popular content management systems that provide the open-source software for web-designers, and also a widely used blogging platform.
The year 2004 was memorable for the rise of MySpace. This platform was the first that provided the users the ability to customize the layout with their pages with the help of HTML. Thus, coding has become more mainstream.
The launch of MySpace and personalized web pages appearance was another important milestone in the establishment of web design. There were layouts with a great number of images, glittery graphics and the text divided into blocks. MySpace pages were an example of expressing personality through DIY design.
Early approaches to web design
The first web designers who started taking steps to improve the layouts of the sites realized that it is easier to perceive the information that is grouped into units. Also, it is hard for the reader to consume too much information on the page. The designers started dividing the content by placing it on different pages. They applied the navigation by the tables and menus. The landing page became a central element of the cite containing a little amount of information but redirecting the visitors to the other pages. Some other innovations in the sphere of web design were bright colors and blinking text.
While the Internet and software were developing rapidly, the monitors with a big screen, faster processors and the increased speed of connection had a positive influence on the website design. Due to the larger screens, sidebars and multi-column layouts gained more and more popularity. The emergence of Web 2.0 led to the development of customized and interactive features on the pages.
The mobile era
The launch of the iPhone in 2007 opened new possibilities for web designers. Now the priority number one was to create the websites compatible with the mobile screens. Smartphones influenced the way we use the Internet greatly. The demand for browsing on mobile phones affected the popularity of 12-column division and 960-grid systems.
After the declaration made by Steve Jobs that the iPhone was not supporting Flash, the designers had to search for the other means for the website development. The search engines became a common thing and the Flash content became inaccessible for them. The need for Flash was reducing and it was gradually being substituted by more kinds of content created on the basis of HTML. In ten years Flash technology became outdated.
Eric Schmidt the CEO of Google in 2010 introduced mobile-first design in the same year with the main agenda to put mobile users first and focus more deeply on design practices that are targeted at mobile users.
The main reason for this announcement was that since the mobile phone screens are smaller than pc or laptops it requires a more minimal approach. You need to use vital elements with the sole purpose of answering mobile user’s needs. Compared to larger screens that have more ground for advanced features this was a challenging era.
In mobile-first design, the name is self-explanatory. In this development, approach companies tend to answer mobile user’s needs and requirements first. Designing for small screens first and then getting to larger screens, has a significant impact on the user experience.
For instance, instead of having your team create that website for the desktop users first, have a mobile-first design approach.
In summary, mobile-first design approaches website development in a way that is adjustable for every device and not just optimized for mobile devices, this way satisfying user experience is possible for users with any kind of device.
Responsive web design
Web design has various methods and responsive web design is one way to do it. In responsive web design web pages are able to automatically adapt to different types of screens no matter wide or small with any kind of device. This way the content you’re trying to display to users is customized to their device and users don’t have to zoom in or out, pan, or even scroll too much while going through your website.
As we mentioned above, In responsive web design you can display your content on various devices like desktops, tablets, mobile devices, etc. the goal is to respond to user behavior on different screens while maintaining flexibility. In responsive design, all features like images adapt to your user’s screens and resolutions to maintain a successful UX.
Progressive advancement means that the prototype we build and design is meant for a smaller version of the browser, such as mobile phone browsers. The first version of the design contains basic and crucial elements and in the further versions, we move on to more advanced features for larger screens by adding complex effects and interactions. The main goal of progressive advancement is to create a better user experience.
In progressive enhancement, the design we create is simpler than the advanced version and creates a better user experience for users who are using older versions. In addition, progressive advancement is a design that makes the user experience more Powerful, full-featured user experience New browsers and devices with a wider range of functions.
Graceful degradation in design means that the designing process begins with larger screens and high-end desktops with the goal of creating a fully functional design from the starters.
Web designers will cut off some features and functionality from the designed product to make it operable for mobile devices as well.
So far the progressive advancement is succeeding compared to graceful degradation. Any UX/UX designer is going to have to use the advantages of the advanced end version of the product while designing for desktop.
For instance, high-definition images, the hovering effect, and complex graphics can be only visible normally when a recent bandwidth is available.
Designers will be forced to cut off some features from a completed advanced product and dismiss their ideas so that the product becomes adaptable for mobile devices. This leads to the final mobile version looking incomplete and not well thought.
However, if you put the design of the final mobile product first, then of course, under the constraints of screen size and bandwidth, designers automatically go for the key points of the product design and put their main focus onto fashionable and clean products with priority functions.
And after the expanding process of the development for devices like tablets or PCs, designers will use the specific features of these devices to gradually enhance the product.
The explanation might don’t seem necessary, however, mobile-first design is in the progressive advancement category, mobile-first is that we start product design from the more restrictive mobile terminal, and then expand its functions.
Mobile-first design VS responsive design
There’s this confusion about the concepts of mobile-first design and responsive design. People often mistake these as one concept and it’s safe to say that they have their share of differences. So let’s have a brief look at them real quick:
Responsive design’s starter point is desktop, the resolution is at its max capacity and then they slowly adapt it to smaller screens. Even though the goal is for mobile devices, the download speed, content, and navigation are more suitable for desktops and classic websites.
Mobile-first design as the name explains is mainly aimed at smartphones and at first, they adapt and design the product so that it can be displayed without further trouble on tablets and desktop devices. However, the main goal is to give the best user experience possible for mobile users.
Responsive design or mobile-first design
Making this decision isn’t very complex. You need to take a look at your audience and see their mainly used device. If around 80% of your audience are using mobile devices you can go ahead and choose the mobile-first design and if it’s the other way around and 80% of them are using the desktop design you can go with responsive design. And if your audience is split in half, you need to consider other factors and follow the path that the trends are headed. Factors like budgeting and your career path for the next three years are important to consider as well.
User experience is a crucial and vital factor for a completely digital business. You may want to create two different websites tailored specifically for smartphone users and desktop users.
Using your own google analytics can help with providing this information. This way you can get valuable insight into how users enter your website or when is the peak of their visit and put it to use. You’re also going to need to learn industry statistics that are focused on your market. User testing also provides valuable information that you can get from your consumers. Bad user experience lowers the chances of users coming back to your website.
Tips on mobile-first design
Optimizing your website’s user experience in a way that it’s operable on your audience’s devices has significant importance. If you have made the decision of going with a mobile-first design you need to take the required steps. In the following, we’re offering some tips on having a functional mobile-first design:
In mobile-first design, It’s important to design and place your call to action buttons well-thought and strategically. The main thing to consider is that your users aren’t using a mouse but they’re using their fingers.
That’s why your call to action button needs to be easily recognizable and also easy to click. So it’s best to pick a larger font for your call to action buttons. It’s also important that as soon as your website loads the CTA button shows up and be viewable.
Most mobile users enjoy large buttons that they can easily trace and click on.
A more simple approach will bring you better results rather than complexity. Since the screens of mobile devices are smaller than desktops it’s more important to have a simple approach. Mobile device users often expect easy and fast access and they mainly have a specific goal when they’re surfing. They also want to see the content without any trouble and a simple design approach can provide it for the users.
Stick to your crucial features and only keep the essentials, also limit your use of pop-ups and ads since users aren’t very fond of these. Use your limited visual space to include only their content on the website.
Testing is vital
When you’re designing no matter whether it’s responsive design or mobile-first design, it’s important to test the product on various screens with different sizes. It’s also important to test the product rapidly and not be satisfied with a one-time testing process.
The importance comes from the rapid growth of technology since there are always new models of phones being introduced. So testing on one device isn’t the wisest decision. Your website might look good and without trouble on one phone but display differently on another phone.
Another important factor is the variety of browsers, visitors will be using different types of browsers so it’s worth the testing.
Navigation is an important part of every website, it makes it possible for users to move around your website from page to page without any trouble. Poor navigation probably leads to losing more visitors than you think and has a direct impact on the success of your website.
No matter what your design approach is, your navigation should make it easy for your users to surf. For mobile-first navigation, you need to narrow down your navigation options to a few essentials, and the hamburger menu is the easiest way to do it.
Mobile users prefer simple navigation but how easy it is a debated issue. The hamburger menu is what most users prefer. It’s characterized by multiple rows stacked together to form a drop-down menu. Understanding the demographics of your website is an important point; older viewers who are not used to the menu method are unlikely to recognize this menu style.
Cut the unnecessary content
Mobile users want a clean layout, and this has been the main focus in the mobile-first design recently. The clean layout we’re talking about is mostly defined as the usage of white spaces on the website to make your content pop and the most important things on the page.
You don’t want any jargon and unnecessary content to get in the way of making mobile device conversions easy. The content of the six form fields can be a feast for the eye and cause visitors to not convert to simplified forms with drop-down menus to help users fill in the information.
While a mobile website is loading and the time exceeds three seconds, 53% of the visits will still be abandoned, and according to google the average time it takes to fully load a mobile landing page is 22 seconds. There are a few ways to avoid the low loading time, for example, you can start with minimizing the page size or you can reduce the number of images on the page and the size of the images. You can use larger and more valuable fonts instead to attract the visitor’s attention so that they are more likely to not only see the site but stay there.
Pay attention to videos
Videos are the future trend, even though we’re mainly used to seeing images on the websites. Statistics show that more than half of the displayed videos are played on mobile devices. And it’s predicted that the numbers are going to increase.
Companies need to use content-creating methods like video blogging and introduce their product and facilities through videos added to their homepage to motivate their visitors to become more than that. This works wonders for mobile users that are after specific content and this way you won’t solely rely on written content. This is also an innovative way to improve the mobile user experience and increase conversion rates.
Simplify the engagement
No matter if you’re going with conspicuous front-end style, hamburger menu, or how the form should be displayed on a particular page, keep it simple and avoid going too abstract with the interaction and navigation path. Constantly try out different methods to attract more visitors and encourage them to become customers.
In this digital era, the main focus and the main usage is on smartphones and mobile devices. Mobile data traffic continues to increase and will not stagnate in the foreseeable future. Just a responsive website isn’t going to cut it for mobile users and won’t answer their needs you got to give them an easy and pleasant experience. So begin your mobile-first design process, make it SEO-friendly, and do your best to give the best user experience.
In the mobile era, the design of websites was simplified. Designers refused the use of 3D effects and traces of depth to make the pages more adaptable for different screen sizes. The so-called ‘flat’ design appeared in response to the new requirements. The content came to the forefront and became the priority. The visual elements were simplified. Years ago, flat design and grid-based layouts still remain popular tools in the design of the webpages, both for mobile devices and desktop.
The emergence of responsive design
Smartphone browsing led to the development of responsive design. This trend took place in the year 2010. People experienced the need for Internet access available from various devices, from television to watches and other gadgets. At first, the webpages were available in two versions but it was a headache both for the developers and site visitors.
The responsive design allowed creating technologies to make pages adjustable to different screen sizes. Due to this approach, the same page can be viewed from different devices. CSS3 and HTML5 are used by the browser to define the hardware on which the site is running. The separation of the DOM or document object model from the appearance and the content of the page helped to develop the website designs that may be combined with any appearance and content.
Responsive design is no longer a trend but a standard for web designers and developers. The broad-based use of smartphones makes designers create sites that can be optimized for various devices. The owners of businesses realized that the expansion in the number of devices for viewing the companies’ websites increases the potential of buying the product or service.
Modern web design
Many technologies described above as responsive design, HTML, and CSS are still in use today. However, there is no universal concept of how the perfect site should look like. There are many various trends, styles and approaches that are applied in modern web design. Nevertheless, modern websites often contain sharp illustrations, beautiful typography, well-designed layouts, and high-quality photos. The buttons are often replaced by icons, the users often apply vector images.
Some designers even draw inspiration from the previous periods of web design development, for instance, the late 80s which were known as the dark era of design when the pages looked like dark screens with pixels. The designs inspired by that period stand out from the other web pages due to the primitive layout, icons, blocky texts and pixelated background.
One of the trends that are extremely popular is the aesthetics of minimalism. Web designers replaced the crowded layout with the white or negative space containing few elements. The pages that were overburdened with colors and text turned into more simple and laconic versions. Typography, images and calm color palettes came to the fore.
Nowadays the sites often have the minimalist look. They have hidden navigation buttons, a lot of white space, interesting design of fonts and user-friendly interface. The reason for the popularity of minimalism is the easiness of perception. The short-term memory of humans cannot handle more than seven units of information at once. That is why the text grouped in blocks works better than the solid piece.
Minimalist design has a lot of advantages. The loading of such web pages is less time-consuming because the sites with fewer elements have faster downloading speed. One more benefit is the ability to hold the focus of the viewer on the content. The other benefits are the increased compatibility with different devices and easier navigation. In addition, minimalist website maintenance is quite easy.
The future of web design
Modern websites contain different types of elements that affect the different channels of our perception. These are images, animation, video and sounds. Also, many websites have interactive elements like navigation.
Technology is developing very rapidly. Virtual and augmented reality, chatbots, and artificial intelligence have become common things. Digital design is transforming together with the trends and technologies, so we can predict that in the future people will use headsets and VR glasses to view websites. So, web design would have to adapt to the new requirements and demands of the time.
However, something new is often related to experience. Now the designers are inspired by the web pages created in the 80s and 90s. History tends to repeat itself, so maybe in a decade, the future generation of designers would implement the trends of the year 2020.To read more about a brief history of social media click on the blue link.
Web design is often affected by trends and the growth of technology, even though it’s not a solid thing it’s good to know about the upcoming trends and gain insight on how web design is going to change with the market, in the following, let’s take a look at the possible future trends of web design:
A website isn’t the only option for businesses to offer their services and brand exposure. In this digital era, everything is in connection and the internet of things is just another factor of a completely functioning system for the best CX for users.
By using analytics tools and adapting to environmental changes you can manage the excessive data flow that web design is based on. This change is very similar to the mobile response wave, but there’s a difference to it. It’s not bound to mobile phones, and it can be used on conventional machines such as refrigerators and cars. In the near future, data scientists and web designers will be working closely, so that they can communicate and collaborate.
AI and chatbots
There has been a lot of debate on artificial intelligence. Of course, we can benefit from some aspects of artificial intelligence now, but when machines and AI have more roles to play in the future, the way web design is going to work is determined by artificial intelligence. One thing that you might be familiar with is chatbots.
Many companies are already using this feature to keep their customers busy around the clock. Chatbots can report complaints, answer common questions, and make customer service resources easier.
E-commerce users will have chatbots and artificial intelligence as automated personal shoppers as the technology grows, and it’s going to be a new era in web design. Human interactions and artificial intelligence are going to work side by side.
Augmented reality is the trend of the future and in order to make it work, we’re going to need supportive software and hardware for devices. Designers need to create and keep an interactive environment so that the location-based elements and overlap of the daily aesthetics run without further trouble. Some features like facial recognition and Google lenses that require scanning are going to keep the popularity. In that case, the adjustment of websites should be done properly. It adopts a minimalist posture and can be browsed without disturbing the user’s line of sight. So the content and contrast should maintain a balance.
Just like Netflix, keeping your website up and running requires atomic storytelling, attracting users in all aspects. You can call it the design of an experience map and design your system in a way that it records each click or tap in a meaningful aspect. The web design is based on strong key information and finds the best possible customers with the right pieces of information and required formats.
Voice assistants like Google Assistant, Siri, and Alexa have been accepted throughout the years. Many people love the fact that they can just give a simple voice command and get their required results. This way they don’t have to keep their eyes on the screen for so long and voice assistants eliminate it. So how is this related to web design?
It’s best if web designers adopt this type of dialogue in the design process and content. This will completely overthrow all the foundations that the concept represents. Frequently asked questions and long-tail keywords should constitute a central content strategy in order to break the classic framework of web design.
Another variation of web design is pageless websites. Meaning that instead of having multiple pages you’ll scroll through the website. Pageless websites are mimicking social media platforms like Instagram to create a similar experience in the terms of addictive engagement and responsive user interface. This way web designers will put extra focus on ultra-fast, auto-responsive websites and the main attention center will be the element’s fluency and productivity.
When you take a look at these three decades of web design, you’ll notice that it has come a long way and the progress is significant. Our day-to-day lives are tangled with web design, from the moment we turn off our phone alarm, reading the news, or even a simple shopping process, it’s all online! The history of website design has undergone exciting changes, enriching our lives and connecting the world in ways we never thought possible.
When did web design start?
Who invented web design?
CERN and the world’s first website were dedicated to the World Wide Web project itself and hosted on Berners Lee’s NeXT computer.