Newpipe: New Website for NewPipe

[theScrabi]

• [x] I carefully read the contribution guidelines and agree to them.
• [x] I checked if the issue/feature exists in the latest version.

We need a new Website for NewPipe.

SkyTubes website looks like this.
Our website looks like this.

Anyone interested?

[ponypower]

Well, there are already some design ideas: https://github.com/TeamNewPipe/NewPipe/issues/277. With some polishing and adding some "pipeness" I can make it look like a website. On the other hand I can't code to get it work so we will need someone else for that part.

Also, picking a logo would give a better direction design-wise.

[ghost]

@ponypower: I'd be able to code the site…

[ponypower]

@theScrabi the skytube guys use a simple website template from here http://www.scoopthemes.com so no magic there.

[nate2014jatc]

I also have some HTML5/CSS3 experience that I'd be willing to loan y'all

[phly95]

I personally like the current website, better than SkyTube's. It's simple, plain, not trying to market or convince you to download it. Also, SkyTube's seems like a heavier website on resources. Of course there are plenty of improvements to be made on the website without copying SkyTube's design (for example making the site more mobile friendly). Anyways, what I want to see is the ability to watch 1080p60 through newpipe instead of 720p.

[TobiGr]

Besides my studies, I am a web developer. Therefore, I would be happy to help developing the new website.

[TobiGr]

What about a responsive design of the new website?
I just started to implement the good design in #277. Here are two snapshots:


Is this okay or should I wait until the whole design is finished?

[theScrabi]

I think thats cool :)

Is it working HTML?

[TobiGr]

@theScrabi: It's out of HTML5, Javascript, JQuery and CSS.
I'm using Bootstrap so everything is responsive and we won't have to much work to do.

Perhaps it's a good idea to create a new repository so @ponypower can upload the images and everyone like @wb9688 and @nate2014jatc can code, too.

[theScrabi]

Deffinetly.

Should we make it public?

[KeizerDev]

Yeah, you should. I want to check it out too!

[ghost]

I think this should be public, since NewPipe itself is also public, so
could you create a repo for the website and add write access for us? Btw do
we have a Slack/Gitter/whatever channel to discuss this?

[TobiGr]

Yes. Public should be better.

[nate2014jatc]

Discord with a trello board could work.
Or there's also Telegram, but that's more for one on one communication

On Tue, Feb 7, 2017, 2:22 AM Tobias Groza [e-mail] wrote:

Yes. Public should be better.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/TeamNewPipe/NewPipe/issues/435#issuecomment-277943822,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALSd3YeJwtbSlIFIcbnCCClXli86Y0kaks5raDfpgaJpZM4Ly8LT
.

[TobiGr]

I think Slack is the most common way to communicate, because Slack's features make developing more comfortable (group and private massages, filesharing, ...).
Is there a Slack channel for NewPipe?

[ghost]

I'd suggest a GitHub repo (TeamNewPipe/website or something like that)
with GitHub Issues/Projects and a Gitter channel.

[theScrabi]

Well why not, so here you go:
https://github.com/TeamNewPipe/website
@TobiGr whant to do the initial commit?

[TobiGr]

I just finished the simple things. Now I need the information / answers to my questions in #277 and everything specific (font-family, font-size, images, ...). After that it won't look as ugly as now ;)

[ghost]

@TobiGr: I think we should plan before we start actually working on the
website. So, does everyone agree with my suggestion? If so, could
@theScrabi set it up?

[TobiGr]

@wb9688 I agree with you. I just copied an old project and changed the colors and content. So there wasn't much work jet.

[theScrabi]

Well I set up a repo so you can send the pull request when ever you want.

[TobiGr]

I can't send a pull request because 'access denied'. The repo is empty, so I can't fork it.
Any suggestions?

[theScrabi]

All right i have to do an initial commit.

[TobiGr]

@theScrabi Did you do the initial commit?

[theScrabi]

No sorry ... um busy.

[theScrabi]

Done

[TobiGr]

@theScrabi thanks.
I had lot of other work to do, so I did the pull request only know.

[theScrabi]

Ok no problem :)
There is progress, and that's fine :)

[TobiGr]

@ponypower the main work is done. Now we need all the specific stuff like fonts, colors and graphics. If you want, just upload the Photoshop- / Gimp- / whatever-file and I'll do the rest. Of course, you can also upload all files to the repository.

[ponypower]

Awesome! I'm bringing all the stuff the upcoming week!
Important question; do we wanna dump the existing logo or not? ... since the logo has a significant influence on the design overall.

[theScrabi]

Uh good question I got used to the logo and I like it, but still we have this "Arbeitsamt" issue :/

[theScrabi]

Should we vote for a Logo?

[ponypower]

I think we should vote. My idea is that the dev team picks the best ones including the current logo and then make a public vote about it. We would also participate in it ofc.

[ponypower]

NewPipe, something, something, NewPipe :)
Basically this is the concept what I thought would be simple enough for a small screen and still look good.
(The idea of using rectangles is coming from the shape of screens/videos. I'm a genius ... I know ... and a masochist.)

There are some things we gotta discuss:

• Do you like it?
• What are the necessary things we want to display on the site. Am I missing anything?
• I need a decent smartphone template ...
• ... and cool mobile screenshots matching the ratio of the template (and no copyright issues)
• I gotta improve the feature logos and fine-tune the font size, the general spacing and everything.

So, what do you guys think?

[ghost]

@ponypower: "Main Features" isn't very readable, because of it's color, I
recommend having it pass at least WCAG 2.0 Level AA (or even better: Level
AAA), which you could check with eg.
http://webaim.org/resources/contrastchecker/.

[theScrabi]

@ponypower but it's just awesome as always 👍

[TobiGr]

@ponypower It's a good starting point :+1:

But it could be a little difficult for the costumer to focus on the important things (logo, titile, subtitle / slogan) because the important first view is to busy / full of eye-cathcing elements.

Even so I thing the idea of using red colred blocks for the header-background is great and they are something you will remeber. To make the header or the second container with rectangles more organized, you could reduce the number of retangles and make them all bigger.

We should also name all features off the app because phone user will always use small devices. After the visited site with a phone, the won't visit the site with an other device.

It's also difficult to change the whole site for phone sizes, because reducing the browser window on a computer will create the smaller site. And it will be really confusing for costumers when they see to different websites with different information and different images for the same product.

At the moment there is a (not good - but working) design for small devices included in the website in the repository for the website. If you want, have a quick look. Maybe it can help you designing.

[ponypower]

@theScrabi Thanks!

@wb9688 Yeah, I'm aware of that. It was a conscious decision since it holds no real information so I use the text just as a design element. I will consider changing it.

@TobiGr
I admit it's a little too busy. I will make the background of "NewPipe" darker to get a better overall contrast with the text making it less busy. On the other hand the inspiration behind looking chaotic is that noone watches videos in an organised way :)
As I mentioned before I'm going to implement these design elements into the regular screen version so there will be a pretty decent similarity between the appearance of different screen sizes. Don't worry.

Just for the note; everyone has a different taste and everyone would design the website differently. In the end I'm doing it the way I find it good and the way I can, just as always. Cheers!

[TobiGr]

@ponypower I'm sorry if it sounded rude to you. It wasn't meant like this.

[ponypower]

I've asked for your opinion and you gave me yours. All good. Thanks for the input.

[nate2014jatc]

@ponypower, have you posted this on a repo?
I'd like to have a look at it if I may.

Have you got it set up as a responsive site?

[TobiGr]

@ponypower you mentioned in #277 that

the "Main Feature" blocks would be click sensitive bringing up some extra details about the selected feature

Do you have any ideas for the details?

What do you thing about some more pictures of the app at the website?
For example we could include images of the settings, downloads, dark mode (which could be mentioned as feature, too).

[TobiGr]

Here are some screenshots.
First desktop, second tablet, third and fourth mobile. For touch devices additional information in the features container will expand by clicking on them.
Maybe we can join both designs to make a perfect one. For example, I can't find a good way to include the screenshots on small screens :(

[TheAssassin]

The look itself is nice. It's getting closer to "done" with every commit. But it doesn't appear too professional yet, there's a few naming issues (e.g. it is F-Droid and not FDroid), a lot of half sentences, inconsistent capitalization (especially in the "main features") and a few other minor problems that I'd like to see fixed before finally deploying the page. Also, until the copyright question is solved (#3), we should not deploy the page.

Regarding project management, I have close this issue and ask you to continue these discussions in the website repository. I am also going to close #277 as it is redundant to the website repository's issue tracker, too.

@ponypower: you might be able to add features of your design to the website repository, too. I like both designs, and a merge would be neat.