Engineering Wiki
  • Introduction
  • Top level Overview of the application
  • FAQs
  • Back End
    • Agent Pipeline
    • Mention Pipeline
    • Profile Pipeline
    • Errors
    • Overview of the Mention/Profile/Cluster Process
    • Adding a New Service
    • Activity and Status Tracking
  • Setup
    • Overview
    • How to Setup Your Local Machine
    • Setup - Cloud Machine
    • Infrastructure
    • Docker
    • Bash Commands
    • Setting up front end in Ubuntu 16.04 desktop
  • Gems/Libraries
    • Bax
    • Creating fixtures for Unit Tests
    • Audienti-Retriever
    • Scour
    • Haystack
    • Audienti-Indexer
    • Audienti-Api
    • Handler
    • Blackbook
    • Allusion
  • Code
    • Multi-step Modal Wizard
    • Structure
    • Audienti DataTables
    • Javascript
      • Passing Props From Root
      • Looping in JS
      • Binding Actions to App
      • CSSTransitionGroup
      • Code Best Practices
      • Reducer Updating an Array with Item in Middle
      • Organizing Javascript
      • Filter Array by Id
    • Design Language
  • Working
    • PostgresSQL
    • S3
    • Terminology
    • Interview Tests
    • Application Descriptions
    • Best Practices
      • Code Organization
      • Code Documentation (using Yard)
      • Git Workflow
      • Tasks and Queues
      • Working in Backend
    • Profiles & Enrichment
      • Profile ID Rules
  • Management
    • API Management
    • Bastion
    • Splash Proxy
    • Rancher
      • OpenVPN Server
      • Traefik Reverse Proxy
  • Teams & Interviews
    • Interview Questions
  • Culture
    • What Makes a World Class Engineer
  • Situational Statuses
    • 2017-11-03
    • 2018-01-09
  • Operations
Powered by GitBook
On this page
  • What things are called
  • Design these 5 States
  • Design for Mobile(ish)
  • Use minimal number of external plugins/libraries/modules
  1. Code

Design Language

PreviousFilter Array by IdNextWorking

Last updated 7 years ago

Building Audienti, we follow some key design patterns and language.

What things are called

Design these 5 States

For each view we have, we should have a design for the following:

  • Empty state - generally speaking, this will be a notification card that states there are no items in this list.

  • Loading State - indicates that something is happening, usually a single spinning circle. Though, we might and likely will change this out, so this should be a component. It also can be "paragraph" looking component that is shimmering.

  • Full state - the layout of the page

  • Error State - The page when there was an error retrieving content.

  • Offline state - we do not have access to the Internet.

Design for Mobile(ish)

We are using Bootstrap 4 and have a design for mobile philosophy. That said, if there are opportunities to make the UI more user friendly for desktop users which WILL Be the most common use case, then we should take these steps.

Use minimal number of external plugins/libraries/modules

We hope to move to a Native version of the application. Given this, we should try to NOT use too many external plugins or dependencies, as they reduce the flexibility of of the front end.