Discover the best apple websites created by professional designers. Get inspired and start planning your perfect apple web design today!

iPhone 11 Pro

iPhone 11 Pro Website

Update to my personal site. Took heavy inspiration from classic macOS. There are some fun experiences for visitors to find. 

Everything is done natively in Webflow using interactions including the color palette changes. I'm using CMS collections to drive the projects, tutorials, videos, and Webflow Weekly contents.

The whole site is a single static page and then the collection pages.

The UI is the same no matter where you are thanks to symbols which makes edits much easier.

Class naming and combo classes were huge for making the interface and interaction work smoothly.

EDIT 2020-11-10: this can now be cloned

mattOS

Another year, another iPhone, another website rebuild!

iPhone 12 Pro

iPhone 12 Pro Rebuild

I found the effect on the iPhone 14 Pro (2022) site (the site is deleted by Apple every year if a new iPhone comes out.). 

Watch the Tutorial to see how I build the effect: https://youtu.be/w0tJnjrRTlg

Apple like Gradient Text Scroll Effect

Apple like Text Gradient Scroll Effect (iPhone 14 Pro Page)

AirPods Pro

I'm on a mission to prove that you can build practically anything with Webflow and nocode tools. So I natively developed the entire PS4 experience for desktop and included nearly every feature.

Protocore develops websites and advanced software prototypes for startups.

PlayStation

Rebuild → Playstation 4

Inspired by the Apple International Women’s Day Special:
https://www.apple.com/go/iwd2020/

Scroll Gallery

Gallery

Winner of Honorable Mention on awwwards
Winner of WOTD - Best UX - Best UI - Best Innovation on CSSDA

Moon UltraLight. 
Meet Mobile’s Most Revolutionary Lighting Device

Live Site:http://moonultra.com/

I took on this brief unsure if I could bring the clients idea's to life. Apple was my only reference but these animations and interactions are truly bespoke to Moon UltraLight. 

Check it out. 

Design by @danielacuttdesign
Build by Joseph Berry

MOON Selfie

Moon UltraLight

Trying out remaking and animating this shot done by me: https://dribbble.com/shots/5366442-Minimal-Portfolio-Exploration

*Done for learning purposes, clients are not real.
Let me know what you think.

Minimal Portfolio

Minimal Mouse Portfolio

Sticky, stackable cards, like the ones used in the nocodeconf.com site. Free to clone and play around.

Stack Cards

Sticky, stackable cards

I created a YouTube tutorial here (german): https://youtu.be/QU6Ux3yZW4U

apple-card

Apple Card Scroll Animation

If you watch the tutorial, you'll notice that the best performance and sharpness of the lettering can only be achieved with an SVG.
That's actually the way Apple uses it as well. The disadvantage is that you have to export an extra SVG image for your own wording.

Animating text elements with scale does not work, because Chrome renders the font blurry 😟

Effect works well on mobiel too!

Apple.com Zoom In Typo Animation

Apple.com Zoom In Typo Scroll Animation

Apple changed its homepage for a short period to support International Women's Day. To make it special, I recreated it and replaced some of the images with the women in my life. You can compare it to the original here:

https://web.archive.org/web/20200309051055/https://www.apple.com/

It's not a perfect replication, for instance, Webflow's mouse move interaction doesn't translate to mobile. But I'm happy to hear suggestions on how to improve it. 

Regardless, feel free to clone and make it your own!

Apple - International Women's Day

Apple International Women's Day 2020

Finsweet

You can now create localized calendar invites for Google, Outlook, and Apple directly from Webflow. Compatible with Weglot and Google Translate. Cal-Invite works for custom static events, dynamic lists, and CMS template pages!

Finsweet Calendar

Webflow Calendar Invite

Another fun project today,

This Apple Keyboard is purely made out of html elements and css using Webflow


ps: I Love Feedback!

Pure CSS Apple Keyboard

An apple style feature grid that you can clone and customise how you like!

Here's my Webflow tutorial on how this was done: https://www.youtube.com/watch?v=fAkGkF-w1gI

Discover apple websites built by the Webflow community

Discover apple websites built by the Webflow community