small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

Published on <a href="http://ift.tt/2tvcma3">| Prototyping: From UX to Front End &mdash; Medium</a> George Frigo <img alt="" src="http://ift.tt/2sctduq">Car dashboard by George Frigo
What happens when a desire to create something really useful meets technologies?
It become not the daily routine, but almost like infinity inspiring moments, which becomes the main goal. And the process to achieve that goal is absolutely spectacular.
If we are talking about the cars, what part of it attracts your attention so much, that you would like to improve it? I guess we can easily highlight 4 categories:
<ul>
<li>exterior</li>
<li>interior</li>
<li>technical parameters</li>
<li>interaction</li>
</ul>
And interaction means not only how you feel the steering wheel, or gear shifting, but visual content also, like displaying the speed, route, music, etc.
<h3>1. HEADLIGHT</h3>
Considering my love of interfaces, especially in animation, the choice was obvious. But the very first part of interaction visualization was not the dashboard, not the gear shift/joystick, but the headlight.
We are living in a modern world, where implementation almost of each idea is just a question of time. There are some concepts and real cars with the digital headlights in real life, and that`s why it becomes a challenge for me.
For sure, instead of the classic lamp headlight the digital version allow you to implement the bravest ideas. However, for the first version I chose acquainted silhouettes, which somehow reminds me of BMW headlights.
<img alt="" src="http://ift.tt/2tveWNu">Headlight by George Frigo
As I described previously, the process is so important and interesting for me, as is the result. That`s why I can`t show it to you. For sure I could use a 3D model for the hood and bumper, but I decided to draw the simple shapes in Photoshop with shadows and several bevel effects. Even though the animation has 48 frames, it has just several milestones.
<img alt="" src="http://ift.tt/2sc2Cxx">Headlight milestone frames by George Frigo
<h3>2. DASHBOARD</h3>
The dashboard was the second on the way. And working on it was truly fascinating.
<img alt="" src="http://ift.tt/2tuUvjD">Car dashboard animation by George Frigo
<h3>But where does each process starts from?</h3>
<h3>Exactly. Research!</h3>
And it does not matter, if it`s about the medicine, military, constructions or vehicles. The very first question we should ask ourselves is “What exactly are we going to do?”. And this is not just a one question, but it includes a ton of others, like:
<ul>
<li>What kind of issues are we trying to solve?</li>
<li>What instruments, methodologies and resources we are going to use?</li>
<li>and many more</li>
</ul>
Answering on those questions, the list of main and secondary functions and components for the dashboard was created.
<img alt="" src="http://ift.tt/2sc87wj">List of components by George Frigo
And here is where the UX comes into play!
Not the whole list of the components was selected for the dashboard, but only the most important. That`s why the “Map” and “Sound” were removed from the dashboard to do list.
Iterating, iterating and iterating!
Select the right size, right place, right transition. All of these components should work like an orchestra, they should not interfere with each other, and exist in harmony.
<img alt="" src="http://ift.tt/2tv2s8v">Car dashboard exploration by George Frigo
<h3>3. TACHOMETER</h3>
The dashboard consisted of many components, and each one deserved special attention. So, the tachometer was next. The main idea was trying to not copy the existing visualizations, but find a new solution. How good is it, you decide. But replacing the classic scale with the color indication was simultaneously bold and provocative.
<img alt="" src="http://ift.tt/2scjhRD">Tachometer animation by George Frigo
For the animation base particles were used that react to the number of revolutions, and changed their physics by accelerate, color and shape.
<img alt="" src="http://ift.tt/2tuZNLW">
Here some milestones of this process. And in real life, if you are brave enough, then you`ll see the magic!
<img alt="" src="http://ift.tt/2scmvER">
<h3>4. FULL THROTTLE!</h3>
This is so cool when you drive and the passing clouds only emphasize your speed. The driver should not be distracted by analyzing the data on the dashboard. It should be clear and easier for perception. So, why a lot of existed dashboards consist from really huge amount of data. Are they wanna try to admire you? Even so, the company`s should sell as much cars as possible. Or having the whole imaginary data on the dashboard is the new trend? I guess not. Driving a car should not be difficult.
<img alt="" src="http://ift.tt/2tv2kFU">Speed acceleration animation by George Frigo
But adding of some non-shaking effects, which will work at the subconscious level, could increase the general perception and increase driving experience. In the middle of the dashboard, there are a road lines, which react to speed. They`re changing their shape a little bit, with some smooth fractal noise effects. At the example above, this action does not look too bright, to avoid distracting the driver with unnecessary effects, but it add an natural and interaction filling. That`s why below you can see this effect like an X-ray to observe the fine details.
<img alt="" src="http://ift.tt/2scdBXZ">
Perhaps in the not-too-distant future, cars will easily achieve 240 miles/h in 1.5 seconds. After all, soon mankind will travel to Mars, and such steps mean only one thing — progress does not stand still.
<h3>Dream, create, embody your ideas!</h3>
You can follow me or check back sometime later to see where our experiments lead us! Rock on!
<img src="http://ift.tt/2tvxVay" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2scvLsw">Car dashboard &amp; headlight design process</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Car dashboard & headlight design process

Car dashboard & headlight design process

Top Stories