redesign "TeamSpeak3"

Redesign einer Kommunikationssoftware

 startscreen_teamspeak_alt

 

Team Speak

Teamspeak ist eine Kommunikationssoftware für Sprachkonferenzen die momentan hauptsächlich von Zocker genutzt wird.
Die Software ist Server basierend. Wir denken, dass dies ein gutes Prinzip für z.B. Firmen ist, die Videokonferenzen halten wollen. Man bekommt seinen Zugang z.B. per eMail geschickt und kann sich dann direkt auf dem jeweiligen Server einloggen. Auf dem Server befinden sich verschiedene Gruppen (einzelne Konferenzräume) denen man beitreten kann. Im Konferenzraum selber hat man dann die Möglichkeit zu sprechen und zu chatten.

 

Redesign

Für unsere Redesign wollen wir unbedingt noch weitere neue Funktionen mit einarbeiten, die wir für ein Konferenzprogramm als sehr wichtig empfanden.

- Video übertragen
- Bildschirmfreigabe
- Video aufzeichnen
- "Konferenzraum"

 

 

icons

 

Icons layouten

Um die Bedienung der Programmoberfläche so einfach wie möglich zu halten begannen wir als erstes mit der Neugestaltung der Hauptfunktionen in Form von Icons.
Hier war es uns wichtig, klassische klare Icons zu entwerfen die durch Funktionalität auffallen.

 

 

buttons

 

Buttons erstellen

Nachdem wir mit dem layouten der Icons fertig waren ging es mit dem entwerfen der Buttons weiter. Wichtig hier war es uns, dass der Button in den verschiedenen Zuständen gut ablesbar und erkennbar bleibt. Zusätzlich zu den Icons haben wir bei den Buttons die jeweiligen Funktionen noch durch Typografie verstärkt. Dies dient hauptsächlich dazu um alles verständlicher zu machen.

 

 

raster

 

Gestaltung Programmoberfläche

Hierfür entwickelten wir uns ein Gestaltungsraster um klar strukturierte und einheitliche Screens erstellen zu können. 

 

 

startscreen_neu

konferenzraum

 

"Konferenzraum"

Im Konferenzraum hat man die Möglichkeit sich seine "Besprechung" individuell anzupassen. Einzelne Mitglieder können beliebig platziert und skaliert werden. Auf der Linken Seite findet man die verschiedenen Einstellungen für die Konferenz.

 

Simulation

Um einen besseren Eindruck zu bekommen, haben wir eine kleine Simulation erstellt.
(Video Simulation)