Newpipe: Corporate Design and Identity and UI ideas

[ponypower]

Hey guys,

After a while I looked at the app with a critical mindset again and came up with some improved visuals based on the previous design concept. I wonder what you think of it.

I've checked out the website too and I gotta tell you guys that you are doing a great job. Keep up the good work. I'm kinda short on time in general but maybe I can find some to help out.

[gkeegan]

Eh I prefer the other one more because it has the piping which keeps it true to the NewPipe name. Also this is very block-like and doesn't fit with the rest of the app.

[TobiGr]

Hey @ponypower,
welcome back! It is good to hear from you :)
I agree that we need to change the position of the triangle. As you did it, it should be aligned with the service name., but maybe stay on the right side. You're also right about using only one colour in the header. IMHO the lightgray looks better, but we cannot apply it to the logo. So using white should be fine.
Regarding the background: the current one uses the alpha channel to make the header's colour change with the service colour. How would that look with your background?

---

Speaking of backgrounds: do you have a high resolution version of the background you used here? It took me some time to extract it from your image and remove the other items from it. Unfortunately, you posted a compressed JPEG so the quality isn't that good. I tried my best to reduce the image noise, but using the original would be by far better :D

[ponypower]

@gkeegan Thanks for the feedback. At the very first I did try to go with the pipy thing but it didn't go that way. On the other hand the blocky design approach turned out okay.

The blocks have a lot to do with NewPipe. They represent screens (devices) with different resolutions since the main feature of the app is watching videos (plenty of videos) while the different shades reflect the variaty of the content. I believe it is a well-considered concept. Of course the implementation needs to be good as well.

When it comes to design, it's not just about the app but the website too. The unity of the design language is a priority. The grapic design of each needs to be created around the same concept or it will be a mess and uneasy for the eye. Having a lead graphic designer can help a lot with that but in community driven development that can be tricky.

[ponypower]

Hey @TobiGr :)
The different elements in Android are aligned very nicely in general, especially in the menus. Aligning the logo on the left goes with that concept, since in the menu page all the logos are on the left. Departing from that would look messy. This way the logo even points toward the name, like "look at this!".

I've created a quick yellow version for SoundCloud. There is an other option btw; when the blocks are red on the left but starting with the service block more and more are yellow to the right. I believe it could look pretty good if done right.

In the app in general the NewPipe name isn't shown much. Getting a BIG NewPipe from the side menu can be considered quite intrusive and it imediatelly grabs the attention while the user probably consciously opened the menu to tap on a particular button. So the idea is to get a function focused header. For example VLC ditched the header all together.

I do have the vector graphic design elements of the old website concept but there several blocks were dedicated for particular content. Is there any ongoing thread about the webiste? Or we could start a new one.

[TobiGr]

When it comes to design, it's not just about the app but the website too. The unity of the design language is a priority. The grapic design of each needs to be created around the same concept or it will be a mess and uneasy for the eye. Having a lead graphic designer can help a lot with that but in community driven development that can be tricky.

@ponypower Exactly!
If you have time, we should talk about a corporate design and identity for NewPipe. As we discussed in this thread, we'd like to produce some NewPipe merchandise too. So a balanced and coordinated appearance would be great.

The different elements in Android are aligned very nicely in general, especially in the menus. Aligning the logo on the left goes with that concept, since in the menu page all the logos are on the left. Departing from that would look messy. This way the logo even points toward the name, like "look at this!".

I meant the small triangle next to the service names (YouTube / SoundCloud), not the logo :D But taking a closer look at it, I have to agree that the way you positioned it is better 👍 People might realize and understand its usecase faster now.

I've created a quick yellow version for SoundCloud. There is an other option btw; when the blocks are red on the left but starting with the service block more and more are yellow to the right. I believe it could look pretty good if done right.

The yellow version looks really good too. I am curious to see the transition. The idea sounds interesting and I guess the result could be amazing :)

In the app in general the NewPipe name isn't shown much. Getting a BIG NewPipe from the side menu can be considered quite intrusive and it imediatelly grabs the attention while the user probably consciously opened the menu to tap on a particular button. So the idea is to get a function focused header.

At the moment the header provides a link to our blog. But I guess, nobody knows that. So removing the NewPipe text might be a good idea.

I do have the vector graphic design elements of the old website concept but there several blocks were dedicated for particular content. Is there any ongoing thread about the webiste? Or we could start a new one.

Great! We decided to close the old thread because it got too large and loading all the images slowed everything down. We continued the discussion in a new thread.

[TobiGr]

I like these new designs a lot. I guess they only exist in Photoshop. Correct me if I am wrong @ponypower.

@theScrabi @karyogamy @mauriciocolli How do you feel about it? I think implementing the header like it is done in the first screenshot is a good step forward.

@Somethingweirdhere implemented the drawer. Would you like to implement this?

[theScrabi]

I like the new designs as well :) @ponypower brought up some points. However I am open about which of his suggested designs we should use, I like them equally well :D

[ponypower]

In the last two weeks I gave a lot of thought to this and I've arrived to the conclusion that first we should create the brand identity of NewPipe that @TobiGr mentioned and only after that we should implement the determined concept to all the visual features in a some way uniform but exciting manner.

Developing the brand identity would start with giving some thoughtful answers to questions like:

• What's our mission with this app?
• What are our beliefes and values we aim to promote/reflect with it? What are we against?
• What makes the app stand out and distinguishes it from all the others?
• How would we want the users to describe NewPipe?

After getting our written statements I could sync the logo with it but wouldn't change it much since it's already part of our visual identity. Then I would wrap the whole design approach around our identity to match it and even extend it visually. All the graphic features of the app, the website and everything related to NewPipe (even presentation slides) would reflect the very same concept in slightly different ways.

It will definitelly take some time to get it right and the ugly truth is that it won't be perfect at first for sure but we gotta start somewhere. I've checked the evolution of a bunch of recently renewed company/brand logos and there are significant differences between the versions. We should expect the same in the long run.

I got some idea to slightly improve the triangle shape of our logo.

The vertical section got a grey shade representing a slightly less sophisticated first stage in the development and it also makes it visually a little more exciting. The inner lines of the two other sections have around 1-2° angle with the outer lines so the white stripes are getting leaner and more elegant. We can say that the 3rd section points to the start of the whole thing showing that we actually didn't forget what values drove it in the first place but the difference in shades represent a more advanced way in reflecting to our past. So in short the logo now is all about improvement and core values.

So what do you think?

[gregordr]

In short: I agree that we should align the triangle with the other elements. Also, like @gkeegan said, I also prefer the tubes/pipes over the blocks, but it's also true that we should use the same design in the app and the website.

The logo should definitely stay similar, as I think it's one of the most recognizable things in the app.

Also, I think the shaded triangle would look good inside the app, but I'm not sure if we should also use it in the app icon itself. Personally, I prefer simple app icons with not as many colors (just my opinion though).

@TobiGr I'm not sure how much spare time I will have in the next weeks, but if I'm able to I will happily help out. But first, we really need to decide how to go about everything (and ideally decide on an overall design for all newpipe related things).