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

AirPods Pro

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)

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

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

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

Scroll Gallery

Gallery

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

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

d.kele :: The Portfolio of Kele Dobrinski | Freelance Art + Design Director

Kele Dobrinski :: Art Direction & Design

d.kele | Freelance Art + Design Director Portfolio

Recreation of the new cursor interactions in iPadOS 13.4

iPad Cursor Interactions

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

Apple Style Grid

This redesign was created by Web Desire for practice purposes and to show that such a project can be created in Webflow. All rights for the content are reserved by Google.

Original:
https://www.apple.com/airpods-pro

100% Webflow

Discover apple websites built by the Webflow community

Discover apple websites built by the Webflow community