After Web 2.0. To web3. Transition features and trends.

The topic is again relevant with the hype about the Web 3.0 (or Web3) phenomenon. Designers, producers, marketers, and other web specialists will create something new and interesting to attract attention and appeal to Internet users of Gen ZYX and else. Some of them will really succeed, and most of the projects, ideas, startups will turn out to be mediocre, intermediate, over-cost, not accepted by the public. And what are the main categories of Web 2 sites.

Web services

Search engines

Sites for searching web pages and media content (images, videos, etc.) on the Internet at requests of users. Search engine sites often have varied additional services for web mastering, contextual advertising, analytics, and many more.

Social media

Social networks are designed for communication of users. On such sites you can create individual pages, profiles, polls, ratings, upload photos and videos, view and create ads, play games.

Internet forums

Such sites provide abilities to create topics for later commenting. Forums are often limited to specific topics, but there are also universal ones.

Wiki

Sites whose content can be modified by editing users using tools provided by the site itself, such as online encyclopedias.

Hosting sites

On the hosting sites you can place files on the network both for a fee and for free. Specialized web hosting sites host, for example, only photos, videos, podcasts, unlike universal ones. Web 2.0 opened up many online marketplaces where hosting of static content is completely free of charge (web pages, images, etc.) making users almost forget about the harsh realities of web 1.0 hosting.

Web applications

Such sites provide user interaction interfaces in Web 2.0. For example, tools for web mastering, communication, e-mail, contextual advertising, search engine optimization.

Topical sites

Internet portals

Portals provide a variety of up-to-date information. Such sites offer a large number of services and sections: web search, news feeds, blogs, forums, chats, online marketplaces, announcements.

Information websites

They contain information on a specific topic.

Blogs

A blog is a website that hosts relevant web articles in a coherent mode. Blogs are news, specialized and personal. The blog editor adds posts (articles) and thereby constantly updates the site creating a relevance rating in the search. Blogs are an accessible and common type of thematic websites.

Business websites

Landings (business card sites, one-pagers)

A relatively small site of a company or an individual specialist is most likely a landing website. Such a site includes a logo, basic information about the company, photos, some videos maybe, and contact information. The volume of such sites, as a rule, does not exceed five pages, which makes their development simple and causes a lower price. At the same time, a landing website provides an individual web address and basic information about the company on the network, which is a very effective marketing solution.

Corporate websites

Official sites representing companies on the Internet are called corporate sites. This type of site is suitable for small, medium and large businesses. The corporate website contains a logo, information about the company and its activities, media galleries of products and services, contact information. Such sites have a large amount of information and a more complex structure than landings. Corporate sites form the image of companies on the web.

Promo sites

Promo sites are designed to promote products and brands. Such websites have advanced multimedia advertising features: story, bright graphics, creative interface and sound design.

E-commerce

Designed to sell goods online. Such sites host product image galleries, technical specifications, reviews, expert recommendations, promotions, and contacts for consultation and purchase.

The first websites of the Web 2.0 trend appeared in the mid-2000s. Such sites were Gmail, Blogger, Twitter, YouTube, etc.

Essential Web2 design features:

• Clarity, simplicity, usability
• Minimalism
• Short and kinky brands (domains), catchy logos
• Detailed icons and buttons
• Large font sizes (large and x-large)
• Original color schemes, gradients
• Rounded corners of information blocks
• Using AJAX/JS

The first affordable smartphones and tablets with LCD and LED screens made a big splash in the field of web design. Many screen resolutions, for which it was necessary to create the same high-quality and attractive interface, led to the emergence of new front-end and layout technologies.

Adaptive/responsive

The design of web pages, in which the site is displayed correctly and identically on various devices (monitor, laptop, tablet, smartphone, etc.) is adaptive. This design is characterized by similar display of content on different devices using HTML triggers for different types of screen resolutions, browsers, etc. by adding additional CSS and JavaScript files.

Responsive design is seen as a component of an adaptive approach that provides visual perception of content and interface depending on screen and browser size and other features of the user device. Responsive is designed to display content independently via CSS (sometimes JavaScript) and viewport settings.

Main features:

• Applying a flexible grid-based layout (flex-box)
• Use of flexible images and media elements
• Smooth residing (transitions) of blocks when screen size changes (for example, when you rotate the tablet).

The adaptive approach has the following features:

• Incremental enhancement via JavaScript/jQuery
• Ability to design for early mobile devices

Mainly responsive design is more usable than adaptive, but the use of adaptive design is sometimes necessary or just convenient when creating complex advanced interfaces.

Mobile-first

A website design method that is created with priority for use on mobile devices (smartphones) and at the same time does not lose its usability and aesthetic properties on laptops, tablets, etc. is Mobile-first. To understand M-f, you need to know modern design and layout principles, such as Responsive Web Design. This method means that the creation of the site interface begins with the mobile version, and secondary tablets, desktop computers, and etc. This trend in web design is due to the active use of the mobile Internet on smartphones around the world.

Progressive Web Apps

Progressive Web Applications are web applications and sites that use the HTML + CSS + JavaScript stack, and have advanced system integration options, actively use OS design elements, which makes that more convenient. PWAs have improved usability and conversion rates compared to just mobile-friendly websites.

Progressive web apps work like this: a user opens a web link in a smartphone browser or other device, and when the page loads, they get a mobile web app. It is more convenient to work with such an app, because you do not need to use the mobile apps store and wait until it is installed. The “Add to home screen” function allows you to add an app to your desktop. PWAs are mainly created for mobile users and continue the idea of AMP, but also have enough adaptability to work with desktops.

Main characteristics:

• Adaptability — they function equally on all major devices: desktop, laptop, smartphones, tablets, TVs with Internet access
• Offline mode — work offline when there is no Internet connection
• Progressiveness — functional UX for the most effective work with each user and further improvement and upgrade
• Nativeness — UX is familiar to the user
• Engagement — progressive UX design creates conditions for comfortable use, simplified installation and optimal usability
• Self-updates — update is controlled through the Service Worker API
• Identifiability — The W3C standard and Service Worker registration identifies PWAs to search engines.

Long scroll

In the early 2000s, UX experts argued that web pages should be short, ideally no more than 150% of the browser’s active field height. Short pages, on which all priority information is presented at once, not “below the fold”, were considered the best solution.

Blogs had a rather non-trivial design in terms of typical websites, the posts were long and often too numerous for one web page. The rapidly spreading screens of smartphones have brought dramatic changes. In view of the small screen size and the universal ease of scrolling, the design of pages began to be created taking into account precisely such features, but also relatively not too long so as not to disappoint the user’s attention.

This trend has led to the normality of long scrolling sites for laptop and personal computer browsers (for example, based on Bootstrap). Many sites became single-page (landing pages), where navigation was carried out vertically by anchors.

Static top menu and hamburger

Due to the increase of the length of web pages, a navigation problem arose, as the familiar menu on top became difficult to access because of constant scrolling down and up.

Web designers quickly came up with a solution for this problem by adding static positioning to the menus, in which the menu always remains in its absolute (mostly top) position on the browser screen.

Almost simultaneously, a solution was added to the usability problem of such menus, which appeared due to the minimal space of navigation blocks. Now in order to click on menu items you must first click on a special navigation icon, which consists mainly of three small horizontal bars located vertically relative to each other (usually at the top right of the screen). Due to its attractive simplicity and animation (turns into a crosshair when clicked), the icon has become very popular and has become a trend.

Responsive hamburger navigation menu icon

In professional slang, such an icon is called a “hamburger” because of the graphic identity, such as “bun-schnitzel-bun”. All these new details were added with JavaScript/jQuery animation effects, later only CSS, which makes this method as popular today.

New CSS Typography

Internet design in the early 2000s (Web 1.0/2.0) offered several basic methods for working with typography and fonts:

• Using standard OS font libraries. Therefore, almost all sites were developed on the basis of Helvetica, Arial, Tahoma, Verdana, Garamond, etc. system fonts
• Replacing text with images using designer fonts. Despite its lack of elegance and relative inconvenience, this method was quite common, as many web designers yearned for creativity and alternatives
• Flash, which allowed the inexpensive use of any alternative fonts, or special JS libraries that allow you to load external fonts. These methods were not very common and were considered quite unusual even for the heyday of the Web 2.0 style
• A little later, updates to the CSS specs introduced a new @font-face rule that allowed external font files to be loaded. For many designers, this has become a real sensation.

In 2010, Google introduced a radical solution called Google Fonts, which offered the use of their font sets by simply importing @import into CSS files (or adding <link> to HTML). The new fonts from Google were quite good and quickly won the respect of the designer community.

In the late 2016, the first mention of variable web fonts (CSS Variable Fonts) appeared, which offered advanced options for using different font parameters, such as width, weight or style in one file rather than several. Such fonts have gained big popularity nowadays. In general, the present and future of web typography is seen only in a happy and rosy color.

Hipsters

In addition to creating a global youth hipster trend, adherents of this style have also created their own digital fashion, applying its main cultural features, such as conciseness, minimalism, vintage, original typography, etc.

The use of social networks, web services and smartphones by hipsters in the late 2000s and early 10s led to a new trend in the development of web style in general. New hipster sites like Unsplash, Pexels, 500px, Mailchimp have become the dominating trend (or at least a major alternative) of the current digital business style.

Hipsters brought a clear understanding of the design aims for the web, romanticizing globalization through retro-vintage photography, insta culture, illustrations, logos, the main subjects of which were youth life, traveling, creativity, personal freedom, leisure. All this has formed an active alternative to the usual digital marketing. However, hipster culture, being enough ! inherently failed to go beyond its own limitations and will not continue in a qualitatively new style, giving way to updated trends of the past, such as, for example, cyberpunk.

Compared to the tech design of web2.0, the hipster design was focused on its own formation and its users, it can even be called more elegant and minimalistic. The new democratic trend of human-centered updated understanding of user experience (UX) design and new digital product science took the place of the ubiquitous hipster templates in the second half of the 2010s. At the same time, many achievements of hipster web design, like the style itself, are also relevant for the modern trend.

Web 3

The continuation of the Web 2.0 concept was to be the new Web 3.0, which tentatively improved and streamlined the social 2.0 approach based on the semantic web, artificial intelligence (AI/ML), and advanced approaches to data processing.

The spread of blockchain and the ideas of decentralized web systems in the late 2010s led to the proliferation of a concept called Web3, which defined a “blockchain-based decentralized online ecosystem.” For users, such innovations are the creation of metaverses, digital fashion, the popularization of virtual reality (VR), gaming consumer, blockchain, non-fungible token (NFT).

It’s possible to note some kind of formalism in defining the web3 style as a brand-new approach to the design of social web services and e-commerce compared to the previously proposed understanding of Web 3.0, which was based on the restructuring of user content. Web3 trends are currently very ambiguous and are actively developing.

Main features of web3 design:

• High-tech — using both advanced front-end and hi-tech and sci-fi images
• HQ detalization — a high level of detail and quality, reaching the level of digital studios
• Creativity — concept art, science fiction, avant-garde graphics, cyberpunk
• Animation effects — the widespread use of animation effects for CSS / JS interfaces (navigation, typography, preloaders, scrolling, backgrounds, etc.)
• 3D — hardcore three-dimensional graphics, video, animation, interfaces and effects
• Virtual reality — virtual environments, metaverse, VR/AR/MR elements
• Gamification — is the use of gaming technologies, storytelling, including for the consumer
• Blockchain — offers to make transactions through blockchain technology, NFT.

While web3 producers, developers, and designers show up new ways of online entertainment and customer engagement, it is still not clear whether the major web trend will keep such advanced investments of creativity and design or come up with something new, easier and more sustainable in the metaverse.

Thanks for reading. In addition you can look up for me on the search and click some of my links. Thanks!