Learn 5 Key Web Design Principles from the World’s Most Recognized Brand

Author
Tony   10

Want to know 5 key web design principles used by the most successful brand on Earth?

This video reveals how a non-designer like you, can use the same techniques to sell your online products using Thrive Architect.

To find out who the brand is, and what you can learn from their website  — keep reading!

More...

Who is it?

A brand that I can’t help but nerd out over is Apple.

Why?

Because their products just work.

And Apple does a great job of reflecting the flawless, minimalistic way that they build their products into their website design too.

web design principles that apple uses

Apple's homepage on July of 2022.

This is what Apple’s website looked like when I shot this video in July 2022.

Even though it changes all the time, the layout, flow and general aesthetic have been consistent for years — because it works!

So, how do they do it?

1. Content Sections

Content sections — Blocks or Background Sections in the visual building context of Thrive Architect — help you arrange your pages with a combination of background sections and content boxes that contain different types of elements such as images, text and any calls–to-action.

Background Sections

Apple often visually breaks up the sections of their landing pages by switching background colors. For the most part, they stick to a monochrome palette — black, white, and very subtle grays.

Contrast in background on Apple.com

Contrast in background color on apple's website.

Using high contrast background colors to break up your page sections makes it easy for website visitors to process the transition from one idea to another.

Content Boxes

Interestingly enough… Apple isn’t actually changing background colors on their current homepage (circa. August 2022) when transitioning between products. Yet, their page still flows extremely well. Why? Because their internal padding game is on-point.

Using Thrive Architect, you can apply internal paddings to your background sections and content boxes to create breathing room in between sections. This is what makes Apple’s website look so clean.
Use of paddings on apple.com

Apple uses paddings and crystal clear copy to transition between sections.

Notice that the images are accompanied by headings that are literally the names of Apple’s products. This is clean and easy to follow — you instantly know what each section is about without having to pay more than a moment of attention to it.

Combine this with a good use of internal paddings and your page comes out neat and tidy.

2. Smart Responsiveness

Smart responsiveness is how you alter your website layout to optimize for different screen sizes.

We can analyze how Apple is making use of smart responsiveness in two main ways on their current homepage. Let’s take a look at their images and page header.

Images

Whether you’re on your Mac, an iPad, or your mobile device — the size of your images matters. A landscape image isn’t going to display as well on a portrait device and vice versa.

To accommodate this, Apple has optimized their image sizes and uploaded completely separate image files for various screen sizes — now that’s smart responsiveness!

This is super easy to do with Thrive Architect. You can simply switch between desktop, tablet and mobile device views while visually editing your page to make sure the correct image displays on different screen types.

responsive setting in thrive architect

Select which device you'd like to customize your page for and change the image if it doesn't look good.

Apple’s Header

Apple’s site header looks great on all screen sizes.

For desktops, you can see ALL their product categories listed in the header. And as soon as you switch to a smaller screen, the menu completely changes to accommodate it, including a sandwich menu, the Apple logo and a shopping bag icon.

apple optimized header

Apple's header on both desktop and mobile devices.

Two headers, fully-optimized for their respective devices.

With Thrive Architect, this is super easy to replicate. Because, in the “Responsive” tab of the left sidebar in the Thrive Visual Editor, you’re able to show and hide different elements on the Desktop, Tablet and Mobile views.
responsive settings thrive architect

Using Thrive Architect you can adjust whether you want a section or element to show up on a particular device.

Inside your header section, using content boxes or columns, you can also create different Custom Menus for various screen sizes.

To create the sandwich style menu for mobile devices, add a Custom Menu element and switch on the ”Toggle Hamburger” menu option so it will collapse and expand on click.

3. Conversion-focused Pages

Apple is completely focused on building conversion-focused pages.

Each content section on their landing page has a clear message, accompanied by 2 simple calls-to-action.

In my opinion, having two call-to-actions on the main hero section of your landing page will distract from your primary conversion goal.

You should instead make it crystal clear what you want people to do when arriving on your website — by displaying 1 call-to-action only.

BUT, because Apple sells such high-end products, it makes sense in their case to give customers the option to get more information before heading straight to the checkout.

So, for Apple, I’ll let this one slide.

4. Fonts

DESIGN HACK: there is a free Google font called Inter — it looks exactly the same as the font that Apple uses… do what you want with this information 😉

Apple makes amazing use of fonts — because they use only 1.

inter font apple

To use a font similar to the one Apple uses, look for the google font "Inter".

To differentiate between their headings and paragraph text, instead of changing the font type, Apple just changes the font styling (e.g. font size, font weight, boldness, etc.).

You can do this too by alternating the size of your text, or applying bold to selected text.

5. Amazing Product Shots

I cannot emphasize how important it is that you get amazing shots of your productno matter what you’re selling.

Investing in high-end pics of your physical or digital products — as well as editing them to achieve professional production quality — will totally transform your website.

The design edits that Apple makes to their product shots are always stun-ning!

grid layout on apple.com

Great use of column layouts and product imagery from Apple

To replicate how Apple uses awesome product shots on your website is not difficult with Thrive Architect. Create multiple columns and then simply drag and drop your product images onto the page — easy!

Your Turn

Hopefully, you learned something from this video post.

If you want to replicate Apple’s web design on your WordPress website, just install Thrive Architect to get instant access to all the content and page building tools you need to do so and much more!

But before you leave, a word of advice… This post is showcasing the design principles you can learn from Apple.

Don’t just copycat what big companies are doing, as it’s often not conversion focused and can even hurt your business!

So are you ready to put these web design lessons to work on your website? Let us know which principle you’ll apply first in the comments below.

by Tony  August 17, 2022

10

Enjoyed this article ?

You might also like:

Leave a Comment

    • Hi, Ryan. I’m not sure if we’re looking at the same section… But you could potentially do what Apple is doing as a gif and upload it as a background image for your background section? You can also achieve a similar effect with parallax using Thrive Architect.

  • I love it when you guys analyze good designs, point out what makes them work, and how to do it with Thrive tools. Excellent!

  • I don’t understand why there is no option to watch in fall screen what is the point sowing a video where you can’t see it clearly?

  • Very impressed with the Menu creation tutorial, Tony I would love to have a video on how to create a Mega menu like Thrive Themes page it looks great on both PC and Mobile. I’ve tried but can’t get it.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >