+234 802735 9445 info@webtriiv.link


Since the first one went live in 1991, websites have generally looked better and become more functional over time.

woman builds a modern website

For instance, consider this screenshot of HubSpot’s homepage. It’s probably not hard for you to tell that this screams 2010.

While maintaining the basic principles of making a website, modern websites today feature eye-catching animations, new font styles, playful colors, horizontal navigation, and more that allow you to continue to achieve your business goals.

Whether you want to give your current website a facelift or create a new website for your business, we’ve done the work by tracking down some of the best modern website design examples to inspire you. Plus, you’ll learn what to do when designing a modern website.

Free Download: 77 Examples of Brilliant Web Design

1. Pixelflakes

lgsgclPfZNCW3yH0jCVX6229zFiP8 Sesl2XaBAChJztqnwsD8r8sqS0jWF3b5izIscxg0bxAAJMDdwfcSUiLJwcnehpd4E4xERhuzrWthw8QYJwNEfMwCYhLZ pLv3aq TbRYcISbhiCbJeHR OQw

What we like: Pixelflakes is a London-based studio specializing in architectural visualization and animation. Once you land on the website, you can immediately tell what the company does. The clear copy, smooth transitions, and stunning imagery that show examples of their work all combine for a modern website feel.

This website also effectively uses white space, as the entire homepage doesn’t seem cluttered or overwhelming.

2. Mate Libre

iQ7R 8o UzrZ tfupLQ1 hG372 fCP7PYHSSN2IESxVfWZxrQesW0 h2o7xV0q yp7m 8nOU8js8qNDzHFAImV2IC

What we like: Mate Libre is a beverage company that makes drinks from the Yerba Mate plant commonly found in South America. As an ecommerce website, we love how the homepage uses neat animations to highlight the drink’s benefits. Without scrolling, visitors can tell that the drink can help boost their creativity and energy levels.

The typography is consistent across the page, and the site features large call-to-action buttons that are hard to miss.

3. Lusion

uq2GBJz7ow70wrKOeYpVObJSsAcLE0402AJe mOLoUe9npldrii 5W7JVAq5nrW8fpymYccSqQG8MX P1ZllFgDaD5v16AcQ9vBBZ36dXK5UGpp9WEuBjgKXhAkmTtB8

What we like: Lusion is a digital production studio that focuses on creating interactive experiences for brands. And it’s pretty clear how well they do it, considering how interactive the website is.

The site’s cursor hover animation engages visitors and makes them look forward to the animation the next mouse swipe will create. As you scroll, you’ll meet a 3D full-screen video highlighting the digital experience Lusion creates.

4. To Be Honest

6jrXDB8CrLB8L5GGi5USUPzzw53V94dixpijDqRarHnvpdSF1n0Opve9DIWd2 HVOxibedx7Y aN2XL5GsOGMCnHAJ2lgACmvlUmDXZQWjD64va0K5t4ADhgV3uba0SIMPT 6tAbX8 FSiOrytgi W4

What we like: To Be Honest aims to change the narrative about mental health for students — its website does an excellent job of helping students imagine their outlook once they’ve gained good mental health conditions. The site uses bright colors that convey joy and happiness, playful animations and stickers, and smiling faces all around.

The site is also mobile-friendly, which is excellent since it’s focused on a demographic who spend a considerable amount of time on their phones.

5. Cuberto

3CMyFh6Vi97ZRF8VUdUiqK9JB712q8pBSGz8gaydEorbhBlkWiPZlJA4UlqX6wM89HJbCb93f2H26BgWCV8ZWDO5iRmMVnFmOmS217CxNP7HaRwGHJ18nzIsN09kebE5BqpdQMj hSs0XAURCmoH lY

What we like: The Cuberto team creates websites, native apps, and other digital experiences for individuals and brands. Its website provides ample evidence that they do know a thing or two about creating digital experiences and solutions.

You can find most of what you’ll expect from a modern website here. Their site uses a hamburger menu that follows you as you scroll from the top to the bottom of the page.

Hamburger menus declutter the navigation and create space for other elements on the screen.

The site also uses playful but meaningful animation throughout and immersive imagery.

See also  Types of Zoning Codes List

6. Modern Muses

What we like: Modern Muses helps creatives to build unique identities online. This website uses texture, shapes, and colors to engage the crowd.

The fonts used here are easy to read and clear. Although the website uses two different fonts, they combine well to give the website a modern look.

7. Decimal Studios

What we like: Like other studios on this list, Decimal Studios uses its website as one of its selling points.

The site takes a bold step by using a black background color matched with bright and colorful images that showcase the company’s works. The images are separated by clean lines and grids, making them easy to follow.

8. The Choose Kindness Project

YD98C6VKfIrhLbRINvnQ ad Y6EoR23BJD NqZR62Y0fntcubzht4HkobSTxLDSazqOFNtoDd3LXKKBxgCpMcPgMcT Mn6sTrZ7PD6GuXdlY9tu4oc9oqPC8slc3wmlmY9Ajmg3H2bHZRe4wBaL7PA

What we like: Modern websites aren’t only about animations and nice fonts. These websites must be helpful or achieve the purpose for which they were created. And that’s precisely what The Choose Kindness Project website does. The fonts are clear, the call-to-action buttons are noticeable, and the navigation is easily accessible.

What I especially love about this website is that the emergency services and mental health crisis helplines are constantly on every page and available for use with a single click. This design makes it easier for the website to serve its purpose.

9. Korty EO

qeBIZ3x4FXvMZf 0e2PuZjvZsR5zdXYTKhIpVUW5dXb6BaAnCr4ovkpGWTBg6yIIdjLfZgTEe4HzGR7bWBKenh0TzemuXk1NTb9OweZCxQL1uSeveAjEr8Azgac8FwLNHdNV7whsJCviP ylK8D5a0

What we like: Korty is a Nigerian-based model, filmmaker, and YouTuber. The design choice to have a single screen as the homepage is interesting. Without moving your mouse cursor, all you’ll see are three headings that read “Vlogs + Interviews,” “Video Mashups,” and “Modelling.”

However, as you hover over each heading, you’ll find small boxes of short videos showcasing her incredible portfolio. This intuitive navigation lets users get familiar with her work without being bombarded by many videos.

10. Akolkar Waterproofing

aE47ekoBOW29Yh3o41tH1YouTlLpxs0aVP gca1VVgUaYkBbjxG1KV2qnbIsfGWYCZCy3SMnzKlFCSXWhVqMB8ww1bpiFBQIKHMGgaOPiYaDSoM 10SsU7yX4R9BDILCX7RcPD rAU4clK LCk4fZYc

What we like: It’s not every day you see waterproofing companies with modern website designs. While most tend to use boring templates, Akolkar Waterproofing decided to do something differently with its website.

There’s a lot of white space that allows visitors to focus on the site’s core message. The animations are also meaningful as they expand into blueprints of the type of building Akolkar works on.

11. Oatly

z3SQ8 NaIjswNiQNvF6zOWUSMHXrA78qAI47nA4FqE3uXht6IV8fsxiY8sv6wrzTJFnYLctOXp3

What we like: Oatly is a Swedish food company producing dairy product alternatives. The most popular of their products is the oat milk. A significant part of Oatly’s selling point is how they differentiate themselves from other brands. So, it doesn’t come as a surprise to see how the brand switched things up with its website.

While most brands use vertical navigation, this website uses a horizontal one (the website goes from left to right instead of up and down). The entire website has branded animation and imagery showcasing the brand’s latest news and products.

Visitors can also use the hamburger menu to find what they want in case the homepage gets too overwhelming.

12. Muteza

S5Cz11aNXCkYQFBSqRHzueh0AfpYdi6WwGacHh1HnZxALBBa5aurncZC7hYco2nvTHi21j7AR74DlZuQktz8REnx15nS7sAMdqHCfs07trYNfUu9SApwM UvFaxa2t2jIheUZB42Rz rW6hVn9qQsEA

What we like: Muteza is a skincare brand that creates personalized serums for individuals with skin conditions like acne, blackheads, and sun damage. The website accurately conveys the transformation effect the serum delivers. It uses high-quality images of the products and the faces of individuals who have used the serum.

Additionally, the warm color palette, smooth transitions, and fast load time make it an excellent example of a modern website.

13. Six Fields

FxjE 6NtWHPiOsGnN0ShABg4IMO SdVTTPAddAvzIGg270gMp5aayfIqS0GBVVIeRhoGZwCOkqnkuHGHQcc1o00OOGNZg2FBh V yUH uCJkY5QPhSZQpDZNYtapB5sG5eHo6NwhQFaJnnU3tXK3Ck0

What we like: Six Fields is a Belgian wheat-style beer made in India. Once you start scrolling on the website homepage, you’re met with a can of beer rolling into an open hand. I don’t know about you, but the neat animation makes me want to pop open a can.

The rest of the website also uses different animation styles to showcase the brand’s cans, bottles, and kegs and a feature video showing how to use the keg.

14. Kasar Design

c438KQ Dx1 lsfR2njLu9HA 4urXUDYbXxSmIRC9 zmjtgy zLoXbXJjp2iLRAOkw0GLfvlPoyVT4uMdy9fiN us0kBp9rgDUclRhNNnyaTpD4MmtkmDNGWJC

What we like: Kasar Design is an Indian-based creative design studio. The brand uses a clean and minimal website layout to display its portfolio.

As far as imagery goes, a moving collage of images pops up as you move your cursor through the site’s hero section. This design choice makes ample room for white space — used generously throughout the site.

15. Fitsole

What we like: eCommerce websites must make a lasting first impression on visitors. And that’s what Fitsole, an Egyptian sneaker and lifestyle store, does. Right off the bat, visitors are met with a large, high-quality image of a pair of sneakers. I like to think of it as a show of what’s to come.

The neat arrangement of the sneakers in rows and white space makes it easy for visitors to browse and choose what they want from the lineup. You’d find even more crisp and clear images on the individual product pages.

See also  Digital Nomad 101: The Ultimate Starter Guide (2024)

16. Now For Tomorrow

dhXAAdRujUNM5Wc4t6O04yxfXjlzIl0Vrd6IA5SlMTtgyoJRy3UXhfxOVEbuIoY ir9nHYomtGt0EE2cbhX3TAk5mJQHazhJzHGiBooR JnLw3W0bO98uDoQ6c4dhvI7my35I0Hfn04MNYZwIvVyaU8

What we like: Now For Tomorrow is a sustainability initiative focused on saving the planet and its resources. The website design is clean, and it has a fast load time.

There’s a short video explaining the Now For Tomorrow program right on the hero section of the homepage. The rest of the website contains vivid imagery highlighting efforts to restore nature and wildlife.

17. Vivici

NhneoP oeM u9Q57rbSVQtdKMouvh4uNhu3s8c B9PJa1ZAIJEihTJ0dE0M3ot dbxmi9o6sc7k8 Cr

What we like: Vivici specializes in manufacturing ingredients used for animal-free dairy protein. The idea of making animal-free dairy isn’t a popular one. As such, Vivici gets right into explaining how they do it.

To give the website a modern feel, Vivici uses short videos, bold typography, an attractive color palette, and white space. The website’s call-to-action buttons are also large and of a color different from the website’s background, which makes them stand out easily.

18. Citymapper

e1s6oFvYYY0VCPNsU TsV mbnQhuBrhpCo8K9821uP8wGHeBg99p0xly iCOkQ5 LteqXGD5J 8VmbbR5U0SEUKFXxX cFbEZyc1LiY71iHuxLleptyaHY1San6o ZET1qglQD9ER4TfElPzjtZT8JU

What we like: Citymapper helps people find their way around a city, showing the best routes to follow to reach a particular destination.

Using this website is intuitive as you immediately have to enter your current location and destination right when you land on the site. While there are no pictures, the website contains engaging graphics consistent with the rest of the page.

19. Silencio

yr4QIP8MtzMay70sQ3bAlEUUr4Z8sXEUFcy3gqUUJnb8Lvo7QCE8HdliWsq1aZLMbNZkE ZBydhzW3nRGRWlOig6gloh7YmfHjzFvfBVG ytE3 rBrZDd5FkH

What we like: Silencio is a visual design studio that creates interactive websites and visual languages, among other things, for contemporary brands.

Each of the brand’s services has its own section with smooth UI animations. In addition to the animation, the site uses bold typography. Here, all the letters are capitalized but have different sizes to draw visitors’ eyes to vital sections of the site.

20. Hyer

nrxpOgWJxlrkLs3hajOG3vONQB vOaKLmFMDZ1mK9RPqR43SDOaw7s ck54smbF nSPkhbXVFyyMqFSh9PaxqxWFYT H6jWsCE0ARG6g2 VIeO2FhsO1H nC

What we like: Hyer offers a service allowing people to book private jets. Although this is a luxury service, the Hyer website remains clean and minimal. There’s excellent use of white space right from the homepage. On the hero section, you’ll find a clean animation of a private that flies through the sky as you scroll down the page.

The website is easy to navigate and focuses on the chartering service it offers.

21. Duolingo

UsT3VrBxX4VBonUx8rIFlHi0DTlhUUzWS55IuXvJQoTpLPWdrh3m704V 4Y38rtk zxosXSUaV4JL2vKWwEsN657Q 9m lb2FgVgF3vzbvOvs12Ci0 ucNxhjqYCRf dv7Va GXIX5ub1FJEE77ZJs

What we like: Duolingo is one of the world’s most popular language-learning apps. Its website is playful and includes all the “characters” we’re used to from the language learning app.

Since the site’s goal is to make you continue or start learning a new language, the site uses vibrant animations and calls to action that make you want to take a quick language course. The use of bold colors (keeping up with the company’s branding), easy navigation, and excellent use of typography make the site’s modern feel pop.

22. Partake Foods

2R97W OMbIzLs30l5TtaSJX8ehppupjnMqQKjwLXkJkp2AY NXEUCDiqslJIXwZs4SGhtAiFtfAtlgOTeRcG0iPJocYHfV0o0

What we like: Partake makes gluten-free and vegan cookies and snack packs. It’s not surprising that the website features fun and vibrant colors because cookies are meant to make you happy, yes?

Hovering over the different products on the homepages unveils other products in the lineup that visitors might want. This frees up space and declutters the homepage. The font style stays consistent throughout the website. However, it varies in size to denote headers and essential sections.

23. The Sip

wfSyh0Q5kQ9tSHae4u7KFdqaRQ7ZUg2ZUHQ5pmxAwxlel0FLcQ3l4AKhlUfwjGmBwBDtzctlDOcgsmituq5LfD3ugP6 hvfQvMCbax5ZMzY3

What we like: Want an unlimited supply of champagne to your doorstep? The Sip’s got something that might interest you.

Although it doesn’t feature animations, this site still has a modern feel thanks to its color combinations. The green, gold, and beige color palette brings to mind dining halls where hushed conversations are had over a glass of wine. The sharp images also contribute significantly to making the site look modern.

24. Superlist

Avp3aKYulHKHHhJQMbYkEXVTbaT4Ds YPUuWeQWnHOLGcuoC5I xBR6gnVpunbpWx1i gTUPsZnwLxn4IOcVTaJA 1LqLAvGTfiCsZkohMgOBCk ATJdRbiur1g4 TZgdhpzTGTcNkJpnVeZQpVrWLM

What we like: Superlist is a project management tool that helps individuals and teams improve productivity. Visitors can quickly find the core message of each section of the website thanks to the exquisite use of white space.

All over the website, you’d find large animations that serve as demos — showing what’s possible with Superlist. Plus, the short copy accompanying each visual element helps highlight the tool’s benefits and motivate them to use it.

25. Youssri Rahman

jp0pxblbSwYV2ahMrx hQaXM1iqJc97Ei1WSTkV 2YX tQ0g9ikcMe0YN40lb1wzi5hraAbZ5x9 3YMxxHmha3eMD8RVOM6HQjavDx2hibZSqqa xG3JfRC3MEBoXG7TauWWY u0qzGobvNl1pf3rXM

What we like: This is the portfolio website for talented marketing director Youssri Rahman. His website features a horizontal navigation, allowing you to see Youssri’s work.

Projects are arranged on a slider grid on the homepage. The grid system makes it easy on the eye while making maximum use of the white space. Like Korty’s website, listed earlier, you can find more details about Youssri’s projects by hovering your mouse cursor over each grid.

See also  Top 8 eBay Inventory Management Tools

26. Hono Ramen

Ymg0wIKlVI6zJgPKYUEXdZFDUWk1yp0WLqBqecyBiVmsy6ubst4PF8vL5Wlujbd6cWqKJ3k6wDGN9Y 9HHDQahJxRtnHgE7qDiSrgN1Trrz PYWK

What we like: Hono Ramen is a Canadian-based restaurant offering Japanese-inspired meals like ramen and tori paitan.

The restaurant’s short website contains all the information someone needs to look up the menu, know the business’ opening/closing hours, make an order, or buy something from the shop.

Images of the restaurant’s space and food go a long way in helping visitors know what to expect. This restaurant website design is also minimal and uses complementary fonts.

How to Design a Modern Website

1. Define why you’re creating the website.

Before creating a modern website or redesigning an existing one, you must define what you want to achieve with the site.

Do you want to sell products? Showcase your portfolio? Build brand awareness? Or something else?

The site’s purpose significantly affects the design choices you eventually make.

2. Look to other websites for inspiration.

Since you’re starting from scratch and likely have little to no design experience, we recommend looking up existing websites with modern designs.

The list we’ve provided in this article is an excellent place to start. So, whether you want to create an ecommerce, portfolio, or small business website, you’ll find something that can inspire you.

When looking up these websites, take notes of general principles and trends that make them work. For instance, do they use a lot of white space, custom animations, or bold typography?

While these websites can inspire, it’s vital not to make your website a direct replica. Instead, note what you like and infuse your identity into them.

Speaking of identity.

3. Create your brand identity.

Your brand identity is like your fingerprint that separates you from every other brand. Without an identity, your brand becomes like a needle in a haystack — hard to find.

Your website has more to do with the visual aspect of your brand identity, which involves defining your brand’s color scheme, fonts, imagery, and voice.

The color scheme includes your choice of the website’s background, button colors, etc. Most people prefer a white background because it complements other colors nicely. Others choose their brand colors. No matter your choice, the colors must be compatible and evoke the proper emotions in your visitors.

Your site typography or font is another branding element to pay attention to. People can tell what kind of brand you are from your font, whether you are a serious, playful, or casual type of brand.

While you might want to make unique typography choices, you must remember that your fonts need to be clear and readable and no more than three on the site. You should also use different font sizes to draw a visitor’s attention to important information.

Imagery, too, plays an essential role in your brand’s identity. This includes the animations, graphics, videos, and photography you use on your website. Your imagery should be visually appealing and draw visitors’ attention long enough to help them decide whether to take a specific action.

Your identity must be consistent with other channels where people might find your brand, like a physical store, emails, or elsewhere.

4. Choose a website builder.

You’ll need a software tool to bring what you have in mind for your website to life. This is where a website builder or Content Management System (CMS) comes in. Common examples of these builders include WordPress, Wix, Squarespace, and HubSpot.

Most of these tools have drag-and-drop builders and pre-designed templates you can use.

You can select a theme, edit your theme, create and customize pages, etc.

Since you already have a brand identity, you can replace the default placeholders and designs in these templates with yours.

5. Add modern website design elements.

Now that it is coming together give your website a modern look by adding modern design elements.

Some common design elements that characterize modern websites include,

  • White space. This shifts the visitor’s attention to the most crucial part of your website.
  • Grid designs. Grouping imagery into a neat grid design or format lets visitors access information individually.
  • UI animations. These animations are crucial in keeping visitors engaged or glued to your website.
  • Hamburger menus. You’ll need this menu to keep your homepage clean and clutter-free. It also makes it easy for visitors to find what they want quickly.
  • Large hero sections. Full-page headers draw visitors in and help them identify a page’s specific purpose.
  • Mobile optimization. A modern website must be responsive and optimized for any screen it might appear — whether on a mobile device, desktop, or tablet.

Other modern website design elements to consider are call-to-action buttons and website speed.

Over to You: Create A Modern Design for Your Website

Your modern website serves as your business’s digital storefront. As such, it’s vital to make a lasting impression on any visitor’s mind so that they can keep coming back.

While each website is different in its own way, they still have the foundations that make people want to visit a website. So, as you add bells and whistles to your site, ensure it remains simple, responsive, and serves its original purpose.

examples of brilliant homepage, blog, and landing page design


Source link

error: Alert: Content selection is disabled!!