Ziel des einheitlichen Designs ist ein durchgängiges Benutzererlebnis durch alle Apps der DropNet AG. Die einheitliche Bedienung macht es dem Benutzer einfacher, die Apps intuitiv zu verstehen und zwischen den Apps zu wechseln. Wer eine App der DropNet AG kennt, kann sich innert Minuten in alle anderen Apps einarbeiten. Damit das gelingt, sind einige grundlegende Definitionen erforderlich. Auch kundespezifische Apps halten sich wenn immer möglich an diese Konventionen. DropNet AG stellt diese Definitionen frei zur Verfügung, damit Partner auch die Möglichkeit haben, Apps im einheitlichen Design zu programmieren. Fast alle Apps beginnen oben mit dem grauen Searchbar.
Alle Elemente in diesem grauen Design sind nur für die Selektion der Daten und nie für die Bearbeitung zuständig. So kann der Benutzer in dieser Liste Selektionen treffen, Parameter umstellen oder einfach Klicken, ohne Angst haben zu müssen, dass irgendwelche Daten verändert werden. Es wird immer nur die Darstellung verändert.
Wie bei allen Applikationen üblich, setzt auch DropNet Buttons zum Klicken ein. Hier sind sie aufgelistet und beschrieben. Grundsätzlich orientieren sich die Buttons am Design des Font Awesome und Bootstrap. Die Höhe ist aber auf 26px reduziert, damit die Knöpfe nicht all zu viel Platz einnehmen.
Die Buttons haben die Klasse “dropnet-button”, welche auch die Dimensionen definiert.
 | button-continue.gif | Für mehrschrittige Formulare. |
 | button-continue-inaktiv.gif | |
 | button-back.gif | Dieser Knopf führt den Benutzer immer auf die vorhergehende Seite. |
 | button-goback-inaktiv.gif | |
 | button-edit.gif | Bearbeiten eines Datensatzes |
 | button-delete.gif | Löschen eines Datensatzes. Es braucht immer eine Sicherheitsabfrage. |
 | button-ok.gif | Ok |
 | button-not-ok.gif | Abbruch |
 | button-plus.gif | Neuer Datensatz erstellen |
 | button-help.gif | Hilfe |
 | button-lost.gif | Projekt verloren |
 | button-mail.gif, button-send.gif | Abschicken einer Mail |
 | button-prepare.gif | Für Zukunft vorbereiten |
 | button-preview.gif | Vorschau |
 | button-search.gif | Suchen |
 | button-print.gif | |
 | button-save.gif | Speichern |
 | button-save-mail.gif | Speichern und als Mail versenden |
 | button-saveback.gif | Speichern und zurück |
 | button-mail-ok.gif | Mail mit Annahme (DropTours) |
 | button-mail-declined.gif | Mail mit Ablehnung (DropTours) |
 | button-save-as-template.gif | Als Vorlage speichern |
 | button-save-add.gif | Speichern und neuer Datensatz erstellen |
 | button-upload.gif | Hochladen |
 | button-bill.gif | Rechnungen in DropDebi erstellen |
 | button-maillist.gif | An DropMailing Daten übergeben |
 | button-pdf.gif | PDF exportieren |
 | button-doc.gif | Word exportieren |
 | button-excel.gif | Excel exportieren |
 | button-vcard.gif | Vcard exportieren |
 | button-fritzbox.gif | Export der Daten für die Fritzbox |
Farben
| rot | #ed696f |
| dropnet blau | #3366cc |
| grau inaktiv | #cccccc |
| grau aktiv | #555555 |
| standard | dropnet | date | filename |
|---|---|---|---|
 |  | 2010-10-23 | album-next.gif |
 |  | 2010-10-23 | album-prev.gif |
 |  | 2007-06-01 | arrow-down.gif |
 |  | 2007-06-01 | arrow-left.gif |
 |  | 2007-06-01 | arrow-right.gif |
 |  | 2007-06-01 | arrow-up.gif |
 |  | 2019-02-05 | close.gif |
 |  | 2011-05-14 | closer.gif |
 |  | 2015-02-01 | closer.png |
 |  | 2019-11-29 | doc.gif |
 |  | 2010-09-14 | document-add-bottom.gif |
 |  | 2010-09-15 | document-add.gif |
 |  | 2008-12-27 | document-archive.gif |
 |  | 2013-10-19 | document-clip-blue.gif |
 |  | 2013-10-19 | document-clip-grey.gif |
 |  | 2012-01-25 | document-clone-inaktiv.gif |
 |  | 2007-03-19 | document-clone.gif |
 |  | 2007-08-24 | document-comment-inaktiv.gif |
 |  | 2007-08-24 | document-comment-plus.gif |
 |  | 2007-08-24 | document-comment.gif |
 |  | 2015-07-10 | document-component.gif |
 |  | 2008-06-25 | document-computer.gif |
 |  | 2008-07-03 | document-download-zip.gif |
 |  | 2012-10-02 | document-droptime.gif |
 |  | 2014-07-18 | document-edit-ckeditor.png |
 |  | 2007-08-23 | document-edit-inaktiv.gif |
 |  | 2007-03-26 | document-edit.gif |
 |  | 2007-04-18 | document-error.gif |
 |  | 2009-05-19 | document-folder-close.gif |
 |  | 2009-05-19 | document-folder-open.gif |
 |  | 2009-05-19 | document-folder.gif |
 |  | 2010-05-18 | document-hide.gif |
 |  | 2017-04-04 | document-image-inaktiv.gif |
 |  | 2017-04-04 | document-image.gif |
 |  | 2008-07-17 | document-info.gif |
 |  | 2015-07-03 | document-link.gif |
 |  | 2007-03-19 | document-list.gif |
 |  | 2008-11-07 | document-mac.gif |
 |  | 2019-02-01 | document-mail-inaktiv.gif |
 |  | 2012-03-14 | document-mail-settings.gif |
 |  | 2019-02-01 | document-mail.gif |
 |  | 2011-01-02 | document-navigation-inaktiv.gif |
 |  | 2011-01-02 | document-navigation.gif |
 |  | 2009-11-30 | document-new-inaktiv.gif |
 |  | 2007-08-23 | document-new-payment-inaktiv.gif |
 |  | 2007-08-23 | document-new-payment.gif |
 |  | 2007-03-19 | document-new.gif |
 |  | 2018-09-09 | document-panorama.gif |
 |  | 2007-08-03 | document-pay.gif |
 |  | 2015-10-08 | document-photo.gif |
 |  | 2008-10-29 | document-print.gif |
 |  | 2007-07-29 | document-reminder.gif |
 |  | 2008-10-29 | document-restore.gif |
 |  | 2018-09-17 | document-rotateccw.gif |
 |  | 2018-09-17 | document-rotatecw.gif |
 |  | 2010-05-18 | document-settings.gif |
 |  | 2013-09-06 | document-slideshow.gif |
 |  | 2014-12-31 | document-snippet.gif |
 |  | 2020-03-31 | document-statistic.png |
 |  | 2018-12-13 | document-stats-blue.gif |
 |  | 2018-12-13 | document-stats-grau.gif |
 |  | 2015-01-07 | document-stats-green.gif |
 |  | 2008-08-11 | document-stats-inaktiv.gif |
 |  | 2015-01-07 | document-stats-orange.gif |
 |  | 2008-08-11 | document-stats.gif |
 |  | 2013-08-15 | document-template.gif |
 |  | 2010-05-19 | document-user-add.gif |
 |  | 2008-02-18 | document-view-inaktiv.gif |
 |  | 2007-03-19 | document-view.gif |
 |  | 2008-11-07 | document-win.gif |
 |  | 2014-03-06 | folder-edit.jpg |
 |  | 2008-08-19 | folder-new.gif |
 |  | 2019-02-05 | folder.gif |
 |  | 2015-05-08 | menu-black-closer.png |
 |  | 2015-05-08 | menu-black.png |
 |  | 2015-05-08 | menu-blue-closer.png |
 |  | 2015-05-08 | menu-blue.png |
 |  | 2015-05-07 | menu-grey-closer.png |
 |  | 2015-07-08 | menu-grey.png |
 |  | 2015-05-08 | menu-red-closer.png |
 |  | 2015-05-08 | menu-red.png |
 |  | 2016-03-16 | menu-violett-closer.png |
 |  | 2016-03-16 | menu-violett.png |
 |  | 2015-05-08 | menu-white-closer.png |
 |  | 2015-05-08 | menu-white.png |
 |  | 2019-02-05 | open.gif |
 |  | 2018-10-04 | pdf.gif |
 |  | 2015-02-01 | photo_next.png |
 |  | 2014-10-23 | photo_next_white.png |
 |  | 2015-02-01 | photo_prev.png |
 |  | 2014-10-23 | photo_prev_white.png |
 |  | 2016-02-23 | public-login.png |
 |  | 2016-02-23 | public-logout.png |
 |  | 2016-02-23 | public-settings.png |
 |  | 2018-08-03 | rotateccw.gif |
 |  | 2018-08-03 | rotatecw.gif |
 |  | 2008-03-03 | search_delete.gif |
 |  | 2007-03-29 | search_first.gif |
 |  | 2007-03-29 | search_last.gif |
 |  | 2013-05-05 | search_lupe.gif |
 |  | 2007-03-29 | search_next.gif |
 |  | 2010-09-22 | search_pause.gif |
 |  | 2010-09-22 | search_play.gif |
 |  | 2007-03-29 | search_prev.gif |
 |  | 2009-12-28 | search_today.gif |
 |  | 2010-10-09 | search_up.gif |
 |  | 2014-06-09 | shop-waegeli.gif |
 |  | 2011-04-07 | status-declined.gif |
 |  | 2008-11-07 | status-error.gif |
 |  | 2008-11-07 | status-info.gif |
 |  | 2009-08-21 | status-not-ok.gif |
 |  | 2009-08-21 | status-ok.gif |
 |  | 2007-08-02 | status-smiley-0.gif |
 |  | 2007-08-02 | status-smiley-1.gif |
 |  | 2007-08-02 | status-smiley-2.gif |
 |  | 2015-08-10 | status-smiley-3.gif |
 |  | 2007-08-02 | status-smiley-4.gif |
 |  | 2018-09-24 | status-smiley-9.gif |
 |  | 2008-06-24 | status-wait-big.gif |
 |  | 2008-06-25 | status-wait.gif |
 |  | 2008-11-07 | status-warning.gif |
 |  | 2009-12-28 | status_busy.gif |
 |  | 2009-12-28 | status_free.gif |
 |  | 2009-12-28 | status_reservation.gif |
 |  | 2007-05-29 | tab_settings.gif |
 |  | 2007-08-23 | team-admin-inaktiv.gif |
 |  | 2007-08-23 | team-admin.gif |
 |  | 2007-08-23 | trash-bin-inaktiv.gif |
 |  | 2009-01-07 | trash-bin-warning.gif |
 |  | 2007-03-19 | trash-bin.gif |
 |  | 2017-03-17 | triangle-down-black.png |
 |  | 2017-03-17 | triangle-down-grey.png |
 |  | 2007-08-02 | triangle-grey.gif |
 |  | 2007-05-15 | triangle_down_blue.gif |
 |  | 2007-05-15 | triangle_down_grey.gif |
 |  | 2016-01-27 | triangle_left_blue.gif |
 |  | 2016-01-27 | triangle_right_blue.gif |
 |  | 2007-05-15 | triangle_up_blue.gif |
 |  | 2007-05-15 | triangle_up_grey.gif |
 |  | 2019-02-05 | w3c.gif |
 |  | 2013-10-25 | weather-1.gif |
 |  | 2013-10-25 | weather-2.gif |
 |  | 2013-10-25 | weather-3.gif |
 |  | 2013-10-25 | weather-4.gif |
 |  | 2013-10-25 | weather-5.gif |
 |  | 2013-10-25 | weather-6.gif |
 |  | 2019-11-29 | xml.gif |
