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

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.

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.

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.

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.

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.

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.

Two headers, fully-optimized for their respective devices.

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.

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 product — no 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!

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.