Vade: Power Up The Future Of Cities

Vade

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>What is Vade</p></div><p class="h3-style">Vade is an American company that collects real-time data to analyze the demand and manage curb space. To highlight their digitalization we’ve made a cutting-edge and slick website. The color scheme represents the asphalt to communicate better what Vade does.</p><div class="pb-80"></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b1104b499da1154951c36_vd-2.webp" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b11045a16302651c2bf77_vd-3.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr mb-200"><div class="g-7-15"><div class="pt-13"><p>Testimonial</p></div><div><p class="quote">“Their ability to understand concepts and our vision and converting it to a beautiful graphic or design blew me away. The UI / UX team was also surprisingly fast with their output.”</p><div class="mt-24 mb-48"><p>Ritwik Pavan, COO & Co-Founder</p></div><a href="https://clutch.co/profile/embacy?page=1#review-1826821" class="link-l undrln-bl">Full Review</a></div>

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Web Process</p></div><div><p class="h4-style">We work in sprints, and our process is fully transparent for our clients. Here's how we've created a state-of-the-art website from first to last in only 4 sprints.</p></div>

<div class="p-lr mt-24 mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">1. We grasped the sense of Vade's brand, found the best-suited design references, and built wireframes. By the end of this sprint, we approved the sitemap and came up with the copy.</p></div></div></div>

<div class="p-lr mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">2. Next, we developed three style directions, and when Vade chose one, we finalized the Home page with all the visual elements included.</p></div></div></div>

<div class="p-lr mb-16"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">3. Our team proceeded to the Technology and Impact pages, where we explained how Vades makes urban life easier.</p></div></div></div>

<div class="p-lr mb-200"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">4. Finally, we've created the About us, Portfolio, and Blog pages, and made sure everything was ready for the development stage including mobile versions and the Ul-kit.</p></div></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="pt-13"><p>Sitemap</p></div><div><p class="h4-style">We've decided what pages are needed to explain Vade at its finest. Next, we've specified the structure of each page based on the priority of brand messages to be shared.</p></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b110302efa9f9e16a081e_vd-4.svg" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr mb-80"><div class="g-7-15"><div class="pt-13"><p>Copywriting</p></div><div><p class="h4-style">Vade accelerates urban mobility, thus we’ve created a tone of voice that catches up with the brand’s speed. Confident and short titles draw the customers’ attention and keep them scrolling until the end.</p></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b1104454cce7aa44998f3_vd-5.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr mb-80"><div class="g-7-15"><div class="pt-13"><p>Prototyping & Wireframes</p></div><div  class="transp-bl"></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b11057d04e644042bc051_vd-6.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr mb-80"><div class="g-7-15"><div class="pt-13"><p>Typography</p></div><div><p class="h4-style">We’ve chosen the round bold title font that contrasts the thin typography of body texts. It let us make the friendly look and feel corporate but not too much so.</p></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b1104f0eb1c57cb77d00d_vd-7.svg" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr mb-80"><div class="g-7-15"><div class="pt-13"><p>Color scheme</p></div><div><p class="h4-style">The palette includes black, white, and yellow representing the asphalt. Blue is an additional color that helps us arrange accents.</p></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b1103fc73fba2caa73f3c_vd-8.svg" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b1104454cce30d84998f4_vd-9.png" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr mb-80"><div class="g-7-15"><div class="pt-13"><p>Grid</p></div><div><p class="h4-style">The grid for screens with the must-read information implies a large content zone.  We’ve used this grid for cover screens and contact forms to make sure target action will be done.</p></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b110491115355120535dc_vd-10.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Concepts</p></div><div><p class="h4-style">The look and feel is chosen to meet the spirit of Vade’s target audience —public bodies. Thus, we stuck to a product-oriented and corporate style with a bit of friendliness to ensure the trust factor.</p></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p><a href="https://www.figma.com/file/slcijEpYOta9ul8opBsWIl/Vade.-Web." class="link-l underline">Check our process in Figma</a></p></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b1104bd15d1f735a04b45_vd-11.webp" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b1104454cce12d84998f5_vd-12.webp" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631b1104bdadc481f83f9135_vd-13.webp" loading="lazy" alt="" class="s_image_full">

</div></div><div class="p-lr pt-200"><div class="team-case"><div class="mb-4"><p><b>Project Management: </b>Natalia Kolchina, Aleksandra Chuguevskaya</p></div><div class="mb-4"><p><b>Art Direction: </b>Elisey Soloviev, Nastya Galeeva</p></div><div class="mb-4"><p><b>Design: </b>Polina Rykova, Nikita Sobolev, Miroslav Liamkin</p></div><div class="mb-4"><p><b>Motion Design: </b>Anton Maydurov</p></div><div class="mb-4"><p><b>Illustration: </b>Vladislava Dolzhenko</p></div><div class="mb-4"><p><b>Webflow development: </b>Artem Kuznetsov, Nikita Zinevich, Stanislav Vegasov</p></div></div></div>

You might also like

Dropdown
success. see you soon ;)
Oops! Something went wrong while submitting the form.