Redesigning the Tesla Design Studio

So Tesla Motors has yet to update their Design Studio. So, being a fan of Tesla (and anxiously awaiting for the pre-orders to open up for the Model 3) I am going to redesign it and make it mobile friendly for fun. (#BecauseWebflow)

I’ll be documenting my process as I go along. Feel free to ask any questions along the way.

Step 1: Make notes, gather data, organize your thoughts.

Step 2: Wireframe on paper

When I wireframe, i just turn up the music and let my mind wander. These wireframes are just VERY loose ideas on layouts and UI design. Basically just a brainstorming session on paper that I know I’ll be changing later in Webflow.

Step 3: Gather Assets

I took a good hour just downloading all images I could out of the official site. I took another 30 minutes to find some videos and edit them down for the background treatment.

Step 4: WEBFLOW!!!

Read-Only Link: https://preview.webflow.com/preview/tesla-design-studio?preview=cd8f3b260609626af49516483c50d5b6

Live Link: http://tesla-design-studio.webflow.io/

The fun part. :wink:

9 Likes

This is great, I’m interested in seeing how it turns out! :smiley:

1 Like

That looks awesome so far. Very inline with the stuff on other car sites that they pay over 100k for. Reach out to them!

1 Like

Aww Nelson! It looks so impressive :smiley: Looking forward for seeing more

1 Like

Updates

  • Added “selected” classes for the Model names. So when you click on one, it stays “highlighted” (Let me know if you want to learn how to this trick in Webflow :wink: )
  • Added intro text for each Model (Used jQuery for this)

Next

  • Make placeholder images for Model 3 and Y
  • Start on the layout of the Design Studio App
1 Like

http://tesla-design-studio.webflow.io/

Updates

Next

  • Make placeholder images for Model 3 and Y
  • Make a reservation page for Model X
  • Start on UI card design for the options

Finally got back to working on this project.

http://tesla-design-studio.webflow.io/

Updates

  • Added tooltips for the options
  • Replaced background videos with the Background Video element
  • Started on the first option screen

Next

  • Make placeholder images for Model 3 and Y
  • Make a reservation page for Model X

Looks great! I loved the review video of the existing tesla site too.

How did you make order creation process?
Is it a form element or custom divs with interactions.

and how does those selections can effect the total sum in the bar at the top?
https://teslamotors.webflow.com/designer-tool-v2

Best,
Erbil

1 Like

Research:

and Custom code:

2 Likes