Redesign TeamSpeak Client

TeamSpeak 6 Client
1

Hi, TeamSpeak team and community!

My name is Polina, I am an application interface designer. Having studied your app, I offered ideas on how to make its interface more modern and user-friendly.

I would like to show you the concept I made. I offer you to finalize the redesign of the application for free. If you like the result, you can use it and start development, and I will add this case to my portfolio.

I will be glad to discuss details.
I am waiting for your reply!

App
App1300×716 117 KB

MacOS
MacOS1524×957 211 KB

Windows
Windows1920×1080 96.2 KB

22 Likes
2

I don’t know if TeamSpeak will change much in the UI in the near future as there was a UI refresh in January. If you’re so keen, you could try rebuilding your approach with a CSS theme.

I don’t think your general approach is bad at all, but in some places it still looks strange as if desktop/mobile UI had been mixed, e.g. in the sidebar with the toggle tabs. And the fact that the server icon hangs halfway in front of the banner is also strange.
I would be very interested to see what the chat would look like in your vision.

3 Likes
3

Yes, tabs (nav bars) that are located on the left side of the app are often used in mobile apps. Right now, the teamspeak design looks quite cluttered, especially the left tab. I solved this problem by breaking it up, using tabs. You can meet such design elements often in different interfaces.

Perhaps now some solutions look unfamiliar, but it will be convenient, you should get used to them. UI is important.

I am open to criticism and ready to work out solutions together with the community, it will make it more useful and thoughtful

If people are interested, I’m willing to rework the ux ui in the chat

Thanks for your comment.

2 Likes
4

Looks clean and comfortable

3 Likes
5

The rest of the UI change I’m indifferent towards, but the left side I really like, I would like to use it in an official capacity or even as a CSS theme. Nice work.

1 Like
6

Im glad you liked it, thx

7

This is very cool. Very good reworking UX

1 Like
8

Thx Pupscky

9

It looks great, better than what it is now)

1 Like
10

Very interesting and beautiful work! A tremendous amount of work has been done! Well done!

1 Like
11

Looks cool! Its time to be updated, hehe. Very good idea.

1 Like
12

That’s an interesting direction for a redesign. Great job on putting this together — it’s clear you put a lot of thought into it. Opens up room for some great discussions

1 Like
13

Google Translate:
I’ll try to describe my first impressions. I’ll say right away that I’m not a designer and know very little about color theories, I rely mainly on feelings, not knowledge. As a plus for me, I’ll highlight the generally familiar design style, a pleasant background palette. However, in some places there are problems with contrasts. I’ll compare with Discord (I don’t know if it’s possible to mention it here), because with it I didn’t experience problems with color contrast, which I felt here.

  1. For example, here:
    image
    I decided to check on the first site I came across to check the contrast and the results showed that the contrast is weak:
    image
    image422×257 5.81 KB

    I don’t know by what principle this indicator is calculated, but in your example, this combination of colors gave a result of only 1 point. In Discord, in the basic color options, the contrast of this button does not fall below 2.5 points. Moreover, the red one, which contrasts with your background even better in Discord than in Discord itself - 3.36 points.
  2. Here is another example:
    image
    It’s a little harder to notice here because I highlighted a certain fragment and it may be larger than in the app itself. It seems to me that links will be hard to read on such a background, although it’s more likely that server owners will often leave links there. The contrast check gave about 2 points. Yes, it’s better than with the button, but it’s text and it’s quite small. Discord has 4 and 4.6 points in its two lightest themes, and 5.48 points in its darkest theme. I think low contrast strains your eyes more, especially when it comes to reading. That’s probably why it’s not recommended to read books in poor lighting.

I think if your redesign had a little better contrasts, I would be more likely to choose your theme if I had a choice.))
And yes, I only used old versions of TeamSpeak, so my experience does not allow me to compare your redesign with the current version of TeamSpeak, so I used Discord for comparison. And I would also like to see what the chat looks like in the redesign (in old versions there was something like a channel chat).
p.s. If something in my message seems unclear, then take my original message in Russian and translate it through your favorite translator:

my message

Гугл переводчик:
Попробую описать свои первые ощущения. Сразу скажу, что я не дизайнер и в теориях цвета знаю очень мало, опираюсь в основном на ощущнения, а не на знания. Ну и я не исключаю что у меня могут быть проблемы со зрением :wink: Как плюс для себя выделю в целом знакомый стиль оформления, приятная фоновая палитра. Однако, в некоторых местах ощущаются проблемы с контрастами. Сравнивать я буду с дискордом (не знаю можно ли тут его упоминать), т.к. с ним я не испытывал проблем с контрастом цветами, который я ощутил здесь.

  1. Например вот тут:
    image
    Я решил проверить на первом попавшемся сайте для проверки контраста и результаты показали, что контраст слабый.
    Я не знаю по кому принципу высчитывается этот показатель, но на вашем примере это сочитание цветов дало результат всего 1 балл. У дискорда в базовых вариантах расцветки контраст этой кнопки не падает ниже 2.5 баллов. При чём, тот красный, который у дискорда контрастирует с вашим фоном ещё лучше чем в самом дискорде - 3.36 баллов.
  2. Вот тут ещё пример:
    image
    Тут немного сложнее это заметить т.к. я выделил определённый фрагмент и он может быть больше, чем в самом приложении. Мне кажется, что ссылки будут плохо читаться на таком фоне, хотя скорее владельцы серверов будут часто оставлять ссылки именно там. Проверка на контраст выдала около 2 баллов. Да, это лучше чем с кнопкой, но это текст и он довольно мелкий. У дискорда в двух самых светлых темах 4 и 4.6 баллов, а у самой тёмной темы 5.48 баллов. Думаю с низким контрастом глаза напрягаются сильнее, особенно когда речь идёт о чтении. Наверное именно поэтому не рекомендуют читать книги при плохом освещении.

Я думаю, если бы в вашем редизайне были немного лучше контрасты, то я бы с большей вероятностью выбрал вашу тему, если бы у меня был выбор.))
И да, я пользовался только старыми версиями тим спик, так что мой опыт не позволяет мне сравнить ваш редизайн с актуальной версией тимспик, поэтому я взял для сравнения дискорд.И я бы ещё хотел видет как выглядит чат в редизайне (в старых версиях было что-то вроде чата канала).

1 Like
14

This looks awesome! As someone who uses Discord a lot, this design feels super familiar and easy to get into. Way more modern than what we have now. Hope the dev team considers it!

1 Like
15

wow, looks much better than now! TeamSpeak developers please pay attention!!

1 Like
16

thank for such a detailed comment, it is very useful for me
I will definitely work on paying attention to these points

1 Like
17

Im glad to hear it

18

thx

19

Thx for ur interest

20

thx!!!