+234 802735 9445 info@webtriiv.link

[ad_1]

Every business owner wants a unique website that shows quality and leaves a lasting impression on visitors. Your website design layout choice is essential in determining whether you’ll achieve these goals.

 person observes website layout

However, it’s not as easy as it seems. With seemingly endless layout options to choose from, it can quickly get overwhelming.

Free Download: 77 Examples of Brilliant Web Design

To help you, we’ve compiled a list of common website layouts. You’ll learn what makes each layout stand out and how to start creating yours.

1. Single-Page Layout

The single-page layout is an uncomplicated layout you can use for your website. This layout fits all the information you want to show your audience on one page. Then, with the aid of clickable texts, link them to other pages containing more information about your brand or business.

Here’s an example of the single-page layout:

Alex Tkachev

V48ENvtfHaE c o7izPiwWzejhv23oRH5aCJmoJOcU Q4fMIKq1jd9

What we like: Alex Tkachev is a freelance digital designer who uses his website to showcase his brand and portfolio. What makes the site unique is its static layout. Alex fits all the necessary information into just one page. As every portfolio website should, the brand image and services take center stage while everything else comes to the side.

Another unique thing about this website is the animation page that appears when you click the “MENU” button. Clicking this button pops up a different layout showing relevant information about Alex.

If you’re a freelancer or someone looking to build a personal website to advertise your brand, take a leaf from Alex’s book and implement this layout in your website’s design.

2. Text-Based Layout

The text-based layout design focuses more on copy and text than visuals or graphics.

You should go with this layout design if you don’t want images or graphics on your website or are faced with choosing suitable images or graphics. It’s easy to design and relatively cost-effective. Here are some examples:

Between The Ears

o2911saMkC02P99bT00g4TaiYmIbBYclOTWc7AV32 A1FNxmso uNsDcv5PqxLk6Lg NUSgGKz3IqJDsEjvxcyMpaDXq7 Z95ySzZS ToJKDFylYohV3pm8dMR9NG83jgwiB0oXLe1AyBN3gTBXPhD0

What we like: Between The Ears is a fitness and wellness brand whose website informs its visitors and users about health and wellness while advertising its services.

Between The Ears does nothing over-the-top with its design or color scheme. It chooses a simple black and white color combination to tell its story without losing finesse.

7YneBOaZAPViV H4AEJ1cOUis8aSLHnzVRkqfjQiTpvkMBlHHK4EEdHau6vD1fTl3QMR6dUJVrkX78FrUpaW4e56kNLiR4XQ4HgKKir0dqheUZ1MbXtwsS7wXYQrkctNZddNF52nbkC7ulDfVEoB80A

The Shift

What we like: The Shift’s website layout tells you everything you need to know about the brand with just one look. The Shit prioritizes communicating its brand to its audience over implementing multiple design elements.

You can see a small text under the opening banner on its homepage that reads “(SCROLL),” a simple CTA pointing the audience towards the relevant sections containing the business products and services.

6JOOQfKsJgjuSE 2mBhd3ju4n9PxAT7PE0uY7EZjB TfrqIb6tO 3d3XxmNPM9T7blvqX

What is fantastic about The Shift’s design layout is that it chooses a simple color blend of white and black to focus more on informing visitors about the brand’s products and services.

3. Fixed Navigation Bar With Section Layout

You’ll find the fixed top navigation bar on most websites. Many designers opt for this layout style because it allows the viewers access to the site’s important pages.

Synchrodogs

What we like: Synchrodogs is an online gallery showcasing the work of artist duo Roman Noven and Tania Shcheglova. The site contains all of the duo’s work and upcoming projects.

The site’s layout is an immediate attention grabber. It uses artistic design by matching numerous colors, fonts, and text sizes to create a more creative style of the sectional layout.

d 4bEz Kz04cCmZyMqVvJ EvoZVnIk62YNtB dj8VYL5RACictmQKkH0y8f3i3tULbgWzTl

The site contains relevant content, allowing you to see all the necessary information about Synchrodogs’ art. The layout is artistic and resonates with the duo’s brand.

Apple

ataN7G PSZae9GtzEfMIu51sQg6FcBkh35cIvWpsbeGQmcIkjYbaxH3zG UQVoeIhln1doZVin5ZpdDNz0L2J7OBkXUCyNEm1JKb4kElkMVCABobzpj7h8I0EYyZE lPF9R90B8PCwIXaXloRi77FU

What we like: Apple also uses a sectional layout with a fixed, minimalist navigation bar at the top. The navigation bar opens a pop-up page when you hover over each text.

Apple centers an image of its recently released iPhone 15 Pro, along with a simple copy and CTA, directing its site visitors to either learn more about the phone or buy it. The presentation is efficient and straightforward, showing that Apple is well aware of how the fusion of imagery and copy can affect visitors.

Overall, the sectional layout is simple and effective. Putting your product in your audience’s face becomes easier because this layout design centers images of your product expertly merged with a short and compelling copy and then the CTA.

4. Scrollable Animation Layout

A scrollable animation layout can make for a stunning experience. It relies on the user’s interaction to function — as the user scrolls, the site responds visually in unconventional ways.

Though this design may be cost-intensive, if you want your website to transport your visitors into a world of your creation, you can consider implementing it.

KPR

uSshK1VTOTTjsT51SCECBFNnc5QekglOw4ubyv9StDVke71Y188ha

What we like: You’re submerged into the world of KPR immediately after you open the KPRverse homepage. You get the feel of the world with the design and interactive panels.

KPR checks every box by making every part of its website interactive. It even features a complementary sound that plays immediately after you launch the site.

Storia

hHA3mF76n23hmi dQ3obrW15 sYXVN2AWLGFO0Fvvq5h6lSeFlV1uVeKkXn747 Ekc7rmrytyHyfkhtPf9kKBKo2sBhHLSGi1UhKQKnM99M4Is8Sp8XQsFHdLUfDEN3GhvTsZro8O89V37f2OHWAQfk

What we like: Another website that implements this layout style is Storia. Storia uses animated images to tell stories (literally) with its website layout design.

Storia offers animation services to writers and creatives, allowing them to bring their stories to life with animated images. Using an animation layout design, Storia showcases its services to prospective users.

You’ll see various animation styles as you scroll through Storia’s homepage. Instead of a one-page scroll animation, Storia uses different animations for each section of its website.

5. Single-Page Video Effect Layout

The single-page video effect layout is even more technical than the scrollable animation layout. It works like the animation layout but uses video effects instead of animation.

This layout is perfect if your brand is a parent brand to other smaller brands and you want a singular website for all these brands. You can create this layout using your major brand and link to the other brands.

Ensure that you use graphics or video images that immersively tell your brand’s story and transport your viewer into a world of its own.

LVMH-The Journey

tVaLjqaY1h8kZIRxpYeU GQgzIqJxBxKXhb21AFJVkZ1X8BphFRynQfXs1H3Daq8ll7ehizD9FWoJGglbxCf S4ix2i0G7 A0Z CiV2ZqWP5eNxvzh41Amfr88D fbnV9M nOfFSr6EflqrJ9sqlGgE

What we like: The layout of LVMH’s The Journey website is beautiful. Its immersive design would take anyone into a world of its own.

Immediately you enter the website, you can see how much thought was put into designing its layout. It features an interactive video layout with responsive icons and images that link to other pages.

4PhlLhlcm585DviIwag2ag452ze9x87H WuSfbtYhEWDBcYPwpFqLoNkgkktOQ6v45hOQ0E2PvvEB221WD

LVMH’s The Journey homepage acts like an access portal to all the brand websites of the LVMH brand. The platform uses interactive video effects and sound to guide users through the page’s content.

6. Grid Layout

Grid-style site layouts are found all across the web, including online marketplaces and music websites. It’s relatively easy to implement and visually simple, if you need a layout done on a budget.

iHeart

3QWRMUm5dADQHDGSa7OsVkHdMABGtvRQvS66l7Mi98SRfUOkcjBWDmue6RB1EgeAUQ5BO PYKszKC4wNpWYZfC1RM3QiOG1QmxkZg0mKPRt 0qIM4muNuU1b9dmS7RIWv4HTmihccqbLY60C9D8NpEo

What we like: iHeart is one of the websites that executes the grid style perfectly. It’s pretty apparent why iHeart chooses a grid layout for its website — it’s simple to show your audience what you want them to see if you put it in a box.

iHeart’s grid layout is typical. Each box in the grid contains a different product and links to another page containing relevant content about the product.

Google Play

f8GKZ81EgLPg6ldRwR9hjg4p3K HSmu12l2PxD5 psoFHeH8e2Xn 2UxFDPKF8CMJJBDf2ESlwLnvZxjnZ2 v

What we like: Google Play does the same on its marketplace. You’ll notice how every app or product is put in a box and laid out grid-style when you visit the Google Play website. The only difference is that Google Play categorizes its products and uses a separate grid style for each category.

Who should use this layout: This layout works well for ecommerce sites and brands with many product offerings.

However, don’t just put texts in a box; place them side by side and call it a day. Design the box, and style your texts. Use high-quality images and graphics to get your audience’s attention.

7. Asymmetrical Layout

An asymmetrical layout is popular among news sites, magazines, gossip blogs, and journals. As the name implies, the layout has no set structure. If you are designing an online publication, consider using an asymmetrical layout. Embrace the creativity in disorganization.

The New York Times

Nr7NnTcw5o ORkTGEjpnxHGRSNiGu idmqe3XOCeeOAtPTZWy 0hIjuSyHJUSAb5ckWJpbWFhMCoy PV1dpHPV9fUhh6ep

What we like: The New York Times’ layout is one where the order and structure change daily depending on its content. The constantly changing layout is referred to as asymmetrical.

Recently, asymmetry has been synonymous with edginess and progressiveness. That’s why most progressive news sites like The New York Times have embraced the chaos of asymmetry in their site layouts.

Bloomberg

JgQpE ubytaVerWa4nz4RXlrHgBhcqw7wKHE6C4CGaB Yqfw BD8u1chitkkgG NDwI4vbiv9KbUMlSogu8PDgRD9o9BPlkKYS1MZhO6x pNx8TzP 4HlRWRrQ

What we like: Bloomberg uses asymmetry differently. Even though you can still see the chaos in the layout, it does it in a more organized way. Bloomberg orders content in every section using a fixed order.

The non-uniformity of the sections of the layout is what makes the design unique. If you pay attention, you’ll notice that the page is split into three sections — although this changes further down the page — but each section is organized differently.

8. Static Sidebar/Navigation Bar Layout

The static sidebar or navigation bar layout is another style that is easy to design and usually takes one page. Try the static sidebar/navigation bar website layout if you run an online kitchen or a restaurant, or if your site will include many categories.

Arbor

1kZGOXs

What we like: Arbor does nothing over the top design-wise with its restaurant website layout. All it does is make sure it centers its brand with slideshow images showing its services and a fixed sidebar.

The site removes the typical top-style navigation bar in favor of a fixed, scrollable sidebar. What that gives you is a simple website layout masterpiece. It is a simple way to cut out the noise and focus solely on advertising your products and services.

9. Single-Column Layout

The single-column layout is the easiest layout to design. It’s consistent with social media sites, online forums, or pages with lists.

If you are a small business/brand or looking to build a forum or news feed, consider implementing this layout. You can also implement this design for a personal blog or online journal.

X (Formerly Twitter)

R6sD7ufP0J 8KBwvraj8yQC5p IT9HturpdK55IecLcZzIeqkDDztqnIyeHY6yQoJCLD6n30CYReLl2EfrSTsQdkPeefz1Eaj0azFWzq0C TKafj8apOdNAq3TrWvPp77ZOJru72tXhEONYeWinFTFY

What we like: X uses a single-column layout to order posts on its website. One thing we love about X is that it uses a single-column layout for both its mobile and desktop versions. Although the page of its desktop version uses a three-section split layout, each of these sections uses a single-column layout.

Reddit

G6sqXHl2VMopSE7JMeHfwGxzgj0HRnQTVShWpRxH3zMIvQ5Zg4k auUMZy3mvJiARpqARRUb4kqGFLwuVWUVftVA7qxScYo 7n lLHhnLKZw1h291nfybjAgNWcegtNgE6o9Mn1eOmiPVSBvimsufbg

What we like: Reddit is the perfect example of the single-column layout design. It is consistent with both its mobile and desktop versions. Although the homepage uses the three-section style like Twitter, every other page uses the single-column layout.

And, like Twitter, Reddit doesn’t separate its posts with spaces. They are all separated by a single line and merged to allow flow.

10. Fullscreen Hero Page Media Layout

If the primary aim of your website’s design is to capture your viewer’s attention, a media banner on your homepage is an excellent choice. Start by making a bold statement, then follow up with a gallery of your top products and a section showing how your product or service can help people achieve their goals.

Tracksmith

BU1rjqI0HU9BaG3tbanwswe7fIqdz64l

What we like: Tracksmith makes a noticeable statement about its brand and services on its homepage with a video background. It then overlays the video with a clickable CTA.

The website design doesn’t stop at that. It follows with a section showcasing images of its products with visible CTAs under it. Next is a section featuring stories showing the brand’s goals and accomplishments, outreach programs, etc.

Gotham

LQxIM4WfSoPuxQ8zR2dw0kLAQqmWklUx4E62XtaFauFp7BSPRvqxxA9p nwV2 7fD8za9WQ0h8Ufw3Wo1CJyEcriUIHwD719u Ne2hGXzq FUn7LVsrYOqqvKkwFd tL6z6E61DegNwGyC7msRi8RF0

What we like: Gotham implements the full-screen media layout style differently, by using sliding images. The first section of the website layout features a sliding animation image background and a responsive navigation bar. Each background features a different center text and clickable CTA at the bottom.

Instead of a regular section-after-section layout, Gotham uses a single-page layout with interactive clickable texts on its top navigation bar. Plus, the site uses a zoom response animation when you hover over the buttons in its navigation bar and draw out new pages showcasing Gotham’s collections with largely visible CTAs.

11. The Z-Style Layout

The Z-Style layout is another simple layout. The idea behind this layout is to imitate the pattern the eye follows when reading — left to right. This means your site visitors will read your site from left to right or in a zig-zag pattern.

Artykul

EcTzPV2YjKB6pkEDInGvCCmy88 UkWCQxPRp0pPSfmKZoYQDcKK9XGhE1GFgkvPTzpc5d9dnx2hU S4PU5alESn1xZW9OkCwKd681F1DvIOXUPu02Bfg2onYO3C umQU a kJgVBJKooDlXTjXOwbDwbcebwe6paaVCFE1MFWZh7FxIXiEj 2rXxswKQkmJkqBAUaIIb1d5nWhC3FtIZ6fmHNMavPxS8L9ZKawkXqKYKpp2vSSNdyW iClyzuB3v ayf5

What we like: Artykul is an RSS app for internet readers. The page uses an alternating style for each section in its layout. The first section has an image placed on the left side of the page, followed by text beside it. Then, it alternates it with texts on the left and an image on the right — the zig-zag pattern.

Trip Advisor

marPYHSvt72Vrtepa4J2h1TdN96xoI7wevfEfLUvAl1gfFnt13 qD33Al4Q10tS6baWCF3tKrrCA5HcXbYPIFzmoPwy7VnmVV84LFl08uj4eYmmHnT44CXm o3RITR FqVb

What we like: On the Trip Advisor homepage, you can trace a quick zig-zag with your eyes. Starting from the brand logo on the left to the “Sign In” button on the right, walk your way down to the “Search All” button and finally to the “Vacation Rentals” button.

You’ll often find this Z-style layout on the homepage of corporations. While you can use it as a stand-alone design for your layout, you can also use it along with other layout designs.

12. Section Page Layout

Like its name, the Section Page layout assigns a page to every section. This means that every section of your website will take up the full width of the user’s browser window.

Digital Present

aLKxxYDmbCr4lFFLCjNGnu9khDaEZh8fYFuNT8LSlzSinYMTo9baqFmWJr0nVEYizbzG tu02svfMRpVM2J8xlwKRnkvN

What we like: Digital Present is a creative digital agency, and its homepage does well to let any visitor know. The banner on the homepage infuses every element of making a captivating copy in its design. It shows a block of text artistically overlaying a graphic with moving particles, instantly capturing the viewer’s attention.

One fascinating thing about Digital Present’s website layout is its understanding of color combinations. It shows this on the services section of its homepage.

How to Choose Your Website Layout Design

1. Define your site’s purpose.

As stated earlier, you must determine your site’s purpose before drafting designs. To find your site’s purpose, ask questions like:

  • What is the purpose of my website?
  • What do I aim to achieve by designing a website for my brand?
  • How can I achieve my brand/business goals with my website?

Your answers will be the foundation for your site’s design and layout.

2. Determine your content.

You can’t create a layout without determining the content of that layout. So, think up content for your website. A simple best practice is to create content from whatever service or product you’ll offer on your website. Plan the content to fit your website and create a story from it.

Choosing a layout before creating content would force your content to take whatever layout you’ve chosen. However, when you have your content first, you can then carefully choose what layout would be the best way to present it to your audience.

3. Check what others are doing.

While you don’t want to copy, checking how others, especially your competitors, designed their websites is essential.

As you research these other websites, you’ll likely see design choices you like or dislike. You might also notice things like how much white space a website uses, the animations, or how they use videos and images.

All the “experience” you gain by examining other websites can help you make better decisions concerning your site.

4. Choose a layout design.

When you have figured out your site’s purpose, set realistic goals, and curated or created the right content for your site, it’s now time to choose a layout design.

However, don’t get carried away with aesthetics. Design your layout and map out an appropriate framework by mapping out page placement and where each element will go.

You can draft your layout on paper or use wireframe software — whichever allows your creativity to flow and makes your job easier.

5. Take your site live.

Finally, make your idea come alive. After creating a content plan and a design sketch for your layout, the next step is to bring your idea to life.

You can pay a professional website designer to help you bring your idea to life or leverage a tool like HubSpot to do it yourself.

The good thing about using a website builder to design your website layout is that they constantly update their design tools and themes, so you will always have themes and design ideas for your website design.

Get Inspired for Your Website Layout

Picking the perfect website layout design is one of the first major decisions you’ll encounter in the website building process. It can be daunting, especially if you’ve never done it before. Refer to the examples above and go with the layout that feels most aligned with your site’s goals — after all, why reinvent the wheel when the perfect layout is already out there?

examples of brilliant homepage, blog, and landing page design



[ad_2]

Source link