Audi Stock Locator

  • .
    .
    .
    Audi Stock Locator
  • .
    Audi stock locator is created based on a global Audi design system and is targeted to help the potential buyers to find a stock Audi vehicle among the multiple dealers in Baltic states. Fullscreen layout large imagery and detailed car specs allow user to inspect and choose the suitable vehicle. As well, user friendly filtering and search option allows to easily find and purchase the model user is interested in. 

  • Disciplines: #strategy, #webdesign, #ux/ui, #design system
    .
    .
    .
    .
    .
    .
  • .
    .
    Design system
  • .
  • Audi user interfaces are as varied as their uses – ranging from inspiring websites to applications for a particular service. They are based on the principles of the Audi look: variety, honesty and balance. The aim is to create varied solutions and a well-balanced, system-wide user experience – from the app to the vehicle. The basis for this is provided by a joint set of components, modules and animations.
    .
    .
    .
    .
    .
    .
  • .
    .

    Text styles
  • .
    The use of the different type weights enables content to be clearly structured and pages to be showcased in an effective, diversified manner. The text formats provided here are based on the typography basics and can be supplemented and adapted according to the project.
    .
    .
    .
    .
    .
    .
  • .
    .​​​​​​​
    Grid system
  • .
    The flexible and optional grid consists of 12 columns and can be nested. The spacing between the columns is 0.25 rem (one quarter of the basic type size). The maximum width is determined for each project. The minimum spacing to the left and right-hand edge of the viewport is 4 %. On very large screens, the content is centred.
    .
    .
    .
    .
    .
  • .
    .​​​​​​​
    Layout
  • .
    The components and the layout offer wide-ranging options in the application for the inspiring presentation of content and functions. The user is our benchmark. It is the user’s activities and needs that provide the key focus. User interaction options are designed clearly and simply.
    .
    .
    .
    .
    .
  • .
    .
    Design for Small Viewports First
  • .
    If an application is to be made available on different devices, create and design it for small viewports first.
    .
    .
    .

  • .
    .
    .