iphone-mockup-macbook

Rebuilding Apple Website in Blocs 4

A couple of years ago, I have recreated Apple's Mac mini website in Blocs 3. I did it for fun, so I was amazed at how much interest this project spurred across my followers and even people who have never heard about Blocs.

Since then, the developers of Blocs have introduced the next version of my favorite web design tool, Blocs 4. So, I thought why not give it another try and rebuild an even more complex page from Apple's website.

Today, I am happy to share with you my new mockup of the Apple.com website. This time, it is a very long graphic and video-heavy website for iPhone 12 Pro.

iphones

Not everything on this page is a carbon copy of the original website, but it is quite amazing how much I was able to recreate using Blocs. I didn't do my best to optimize for performance, so if you are one of these people who like to run tests on everything (I do that all the time myself), let me disappoint you - my goal was to archive the closest visual resemblance of the Apple's website.

That being said, I have compared the GTMetrix scores of my website to the original, and surprisingly, my version showed a better rating.The most important things you need to keep in mind are the following:

- I have rebuilt this website without writing a line of code
- I have not used any 3rd party plugins (custom brics)
- Everything on that page is created with a bare-bone version of Blocs 4.

I think it is very impressive!

View the live demo of my mockup
View the video overview

View the original on Apple's website
Download the Project from Blocs Templates
Learn more about Blocs app

P.S. Obviously, I don't have any rights to sell this as a template, so it's not available for purchase. I am only sharing this project file with Blocs Templates members (only for educational purposes).

Previous Post
6 / 96
Next Post

Blocs Master Courses

blocs 4-free

Introduction to Blocs 4

Start learning the basic features and design workflows in Blocs 4.

blocs 3-website-course-blocs-store-thumb

Blocs 4 Website Course

Everything you need to build a beautiful multi-page website in Blocs 4.

blocs 3-website-course-blocs-store-thumb

Blocs 4 Commerce Course

Learn how to build a fully functional e-commerce website in Blocs 4.

Coming Soon...

blocs 3-website-course-blocs-store-thumb

Blocs 4 Blogging Course

Learn how to build and manage a blogging website in Blocs 4.

Coming This Summer...

blocs 3-website-course-blocs-store-thumb

Email Marketing Course

Learn how to build and manage an Audience using Email Marketing.

Coming This Summer...

blocs 3-website-course-blocs-store-thumb

Blocs 4 Business Course

Learn how to set up and run a successful web design business with Blocs 4.

Coming This Fall...

Subscribe to Eldar's Newsletter to receive news and updates.

Templates for Blocs 4

A collection of premium templates for Blocs app, a visual web design app for Mac. Build beautiful websites fast.

BLOCS MASTER

The ultimate resource for every Blocs user.

Not related to the developers of the Blocs app.
Blocs Master is the project of Eldar Gezalov.
FAQ, Privacy Policy, Terms of Use

Copyright © 2021 Eldar Gezalov