I want a website like Apple If I got a dollar for every time I hear this sentence I could probably afford the new Mac Wheels right now But for reals tho, no excuses here Today we're gonna design and build a website... ...like Apple Hi, I’m Bart and together with Dave we create "overskill" a channel where we INSPIRE you and ENERGIZE to just create better looking awesome interfaces. BACK to the topic of this sweet episode. How does one actually design a website like Apple? Let's start with research We can see that if we say “website like apple”, that’s a pretty broad spectrum. We have a typical e-commerce here AND what is more important in our case, we have PRESENTATIONS. When we open the presentation, let’s say “iPad Air” we can see a SWEEET presentation. OMG it’s sooo good. Like I just scroll and scroll it’s all flowing and there’s not a single seam. If you don't know what a seam is This is a seam And this See Apple? No seams It's a seamless experience So I learned this: to get the "Apple Look", one has to showcase a product and its features seamlessly ...goosebumps, people... Ok, the IDEA I started browsing the web to find inspiration for the style of 1984 Mac ad campaign I collected some of it in a folder. I didn’t use any fancy moodboarding technique. Inspired by this site I thought “What if the old Mac from 1984 was released... ...TODAY?" And how would you show in 1984 that something works? Simple as a this you might as well just make it say “Hello”. At least that’s what Steve Jobs did. ...in his presentation. ...It's warm, and it's playful... ...and it needs to say HELLO It needs to say hello because IT CAN but you know, who would listen to this dude!? *whispers* I'm sorry Steve I didn't mean it, it was just a joke The idea in my head was super simple I din't really do any previous design in Figma or any UI design tool There was just one thing that I needed Renders! So I went to Blendswap.com and downloaded this super simple model and started playing with it The author did most of the job with the modeling here Kudos to you! The idea was: "I want the animation start and show HELLO" Like the computer was just starting up. ...and then to get the seamless transition between the sections I decided to create this effect of light flooding the screen to make room for a message which is copied too I spent a lot of time tweaking the animation Tweaking the lights just to get a simple effect of the scene being lit up from AROUND the product At some point, I felt I was really overkilling it so I simply rendered the animation in JPEG and called it a day, for this part. The last part of preparing the assets was turning this sequence of frames into an animation that I would control on scroll just like Apple does it to do that, I used Bodymovin, also known as Lottie (plugin) that is able to export almost anything into JSON and... ...simply make an animation out of that so we went through the research, ideation, To build the actual website I used Webflow I love this tool so much. OMG. Love it! I wanted a beautifully rendered animation and a seamless transition The Mac was supposed to appear out of pitch dark and say "Hello!" to us Then the "Think different" slogan would appear right after that And THEN on scroll the slogan would move out of the way... ...and showcase our product. then we invite users to dive right into this brace new world of computer magic the more they scroll the lighter everything gets until it's fully lit This is where the second section enters Ok, so since we're on this topic I did try to do a funky animation where... a hand would be clicking on the mouse It fell flat. Kicked it out. Kept it simple. Two sections. I won't go into the details of how I timed my animation... and so on and so on. This is the result Here it is. 1984 ladies and gentlemen! I had so much fun working on this exercise. And now, the big question is: Would I do it for my client? Should YOU do it for client? Should you design a website like Apple As always: it depends. As you may have noticed, the majority of this "website" was actually art direction Even if you scroll hard, I will still make sure you see exactly what I want you to see. Even if it's not a video You cannot just click and skip it. No. It's a full-blown presentation where you just scroll and see everything That's what makes it beautiful To actually create it, you need to wear so many hats. From direction to 3d modeling, to 3d rendering, programming even. To tell you how much it took me to create just the animation... 1 hour of setting up a scene and like 4 hours of tweaking there are so many things that can go wrong here! We need a beautiful render and a seamless transition between sections If only one of the elements is falling flat, the whole presentation will fall flat You will not have an Apple website To design such a site it means team work. You basically need to team up with a lot of talented people That's the secret of Apple They have no problem with doing all the photorealistic stuff with animation No. It's "When should we show what?" "How long should we make users... ...see, — let's say —.. an iPad?? "How long is enough?" I have learned so much doing this exercise If I were to design a website like Apple for my clients I'd first make it very clear that there's no "Apple website" without beautiful renders This is what I would really love to know when I started out. I saw these websites and I though: "OMG, if they did it, I definitely can do it too" Except NO. Sorry. If you use some PNG, move it around, will it be an Apple website Not really, but it's still gonn be beautiful It's gonna be yours, and... ...yeah. If you like this video, give a thumbs up and subscribe to this channel so that you can learn more about beautiful interfaces UX and design in general Thank you and see you in another episode!
It's great how Apple creates a separation: shop vs showcase. One site does not try to be both. To sell their products, they create a website which is actually a well-thought presentation with a header a CTA and a footer. They do not make UX sacrifices. They simply Draw a line between shopping and "just browsing".
Can you do Amazon next?? Asking for a friend with business partners who won’t stop asking for “the Amazon prime experience”
This was great. Thanks for sharing!
Great video!!!
Legendary stuff, loved this vid!