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.
- Current site: https://my.teslamotors.com/models/design
- My previous version (that I never finished): Designer Tool V2 - Tesla Motors
- Notes in Google Drive
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.