Streaming live at 10am (PST)

Redesigning the Tesla Design Studio


#1

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:


Recreate Sessions! Lets recreate a website!
#2

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


#3

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


#4

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


#5

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

#6

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

What is your main source for finding new gigs?
#7

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

#8

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


#9

Research:

and Custom code:


#10