website icon indicating copy to clipboard operation
website copied to clipboard

Design and Concept

Open TobiGr opened this issue 6 years ago • 26 comments

Follow up of #10.


@theScrabi @TheAssassin This needs some improvements, but overall, what do you think of the concept? We could then also remove the slides Lightweight, Open Source and Price/Free and add them as separate tiles below / above multiple services.

main page desktop

TobiGr avatar Feb 28 '18 16:02 TobiGr

I would move the downloads to the bottom of the page, even below the "user voices" slideshow thing. That causes "potential customers" to actually read the website.

TheAssassin avatar Feb 28 '18 21:02 TheAssassin

Yeah, sounds reasonable. I think we will need a different navigation bar for this "one-pager" too. Maybe something fixed to the right side of the page containing icons which expand to texts when you hover them. I could also imagine a "second" nav bar that fades in when the header isn't visible anymore.

TobiGr avatar Mar 01 '18 07:03 TobiGr

The page isn't long enough to need a navbar for vertical navigation in my opinion.

TheAssassin avatar Mar 01 '18 08:03 TheAssassin

Here are two screenshots I'd like to share with you.

mobile version desktop version

I won't add the multi services tiles to the next PR because some I do not have a good idea what to put in them :) My idea is to add them after 1.0 is released. I have not read the c't articles about NewPipe. If someone of you did it, can you tell me whether there is anything that I can place in the "user voices" section?

TobiGr avatar Mar 11 '18 11:03 TobiGr

Looks awesome! Great job, @TobiGr.

There's just a little issue with the word "OpenSource"... actually, it's "open-source" or "open source". But I'm sure @theScrabi would prefer "free software", "free and open source software" or "FLOSS" a.k.a. "free/libre open source software". I'd go for "free software", as it's the shortest option. It'd be great if you could fix that. Also, on the bottom of the page, there's some lowercase "buzzwords", whose casing should probably be fixed.

TheAssassin avatar Mar 11 '18 12:03 TheAssassin

"free and open source software" was god i think. However the pannels for each service, what would you like to put into these?

theScrabi avatar Mar 11 '18 16:03 theScrabi

"free and open source software" was god i think.

Can I skip the "software"?

Also, on the bottom of the page, there's some lowercase "buzzwords", whose casing should probably be fixed.

@TheAssassin Do you mean the footer?

TobiGr avatar Mar 11 '18 17:03 TobiGr

"bring NewPipe forward" and "support our developers".

TheAssassin avatar Mar 11 '18 18:03 TheAssassin

What would you like to change there? I think it is good to have lowercase words at the beginning and end. Both are not "complete" sentences and it looks good the way it is right now. And which words would you like to highlight?

TobiGr avatar Mar 11 '18 20:03 TobiGr

I would change the first words' casing to uppercase nevertheless. It's a style thing: these are not complete sentences, but they're independent "fragments", therefore it makes sense to have a "sentence-like" start. Imagine there was an exclamation mark in the end of these fragments, then they're imperative form sentences.

TheAssassin avatar Mar 11 '18 22:03 TheAssassin

Re. highlight: I have no idea where you picked that up.

TheAssassin avatar Mar 11 '18 22:03 TheAssassin

I have changed this now, but it feels like the uppercase words draw the attention more to the words itself instead of the donate button. That's what I meant with "highlight".

TobiGr avatar Mar 12 '18 13:03 TobiGr

I don't think that's the case. @theScrabi I guess we need a third opinion.

TheAssassin avatar Mar 12 '18 14:03 TheAssassin

I don't think this is so important, however I like it lowercase, I guess its more symmetric.

theScrabi avatar Mar 12 '18 14:03 theScrabi

@TheAssassin @theScrabi We need a new footer to include the privacy link. Just adding it to the list looked strange. That's what I've got. Do you have any other suggestions? bildschirmfoto vom 2018-05-29 um 17 58 39

TobiGr avatar May 29 '18 18:05 TobiGr

It does not, I kind of like it. @TheAssassin what do you say?

theScrabi avatar May 30 '18 06:05 theScrabi

I think it's okay, too. But if you want to, we could combine both Licensing and Privacy Policy to a Legal button, and create a Legal page linking to such documents. Then future pages can just be added to that page.

TheAssassin avatar May 30 '18 17:05 TheAssassin

@theAssassin That sounds like a good idea. I'm in Berlin for a couple of days. Await my PR within the next week.

TobiGr avatar May 30 '18 19:05 TobiGr

Thanks. And have fun in Berlin!

TheAssassin avatar May 30 '18 20:05 TheAssassin

Visit C-Base near Alex or the ccc hacerspace if you are there :D

theScrabi avatar May 30 '18 21:05 theScrabi

Our blog looks like 💩 atm.

I won't have time to implement this now, but I made some quick drafts for a lighter and more user-friendly design. I tried to stick to the tiles like layout we use on the other sites.

@TheAssassin @theScrabi @ponypower Any ideas/thoughts on this?

blog main page blog post page

TobiGr avatar Feb 08 '19 03:02 TobiGr

Generally looks good to me. I like the new style much more than the current one.

The mix of shadow for nav/bottom bar and no shadow for the main element is a bit inconsistent (half flat, half "3D"). I think it might be nice to introduce a little shadow for the main element, too, or just drop all shadows like on the second picture (flat designs are still more popular than shadowed ones, aren't they)?

I'll have a closer look in #111 and will add more comments there.

TheAssassin avatar Feb 09 '19 00:02 TheAssassin

I just took the working website and modified it in the browser. So yes, this design isn't finished yet and still needs to be implemented properly. E.g. I didn't take a look at the correct container width and heights, shadows, etc. I just removed things when I came across them. I guess, I'll remove the shadows completely.

TobiGr avatar Feb 09 '19 13:02 TobiGr

Ah, okay. I already saw that this wasn't implemented in #111 yet, but my assumption was it wasn't committed yet. Looking forward to it!

TheAssassin avatar Feb 10 '19 02:02 TheAssassin

Btw. what do you think of creating thumbnails with the current NewPipe version? We used the same thumbnail for a dozen posts. The new thumbnails could be in the style of the old NewPipe beta icon, but insteat of the "BETA" we can insert the version number. This could be done for the old posts as well without much effort. Another advantage: when linking the posts on "social" media or other platforms, the preview thumbnail would be more meaningful. Take a look at the 0.15.1 post thumbnail to see what I mean.

TobiGr avatar Feb 10 '19 11:02 TobiGr

It would be great to have the option to sort the new videos section by time and date (not the latest video of each channel sorted by the channel names).

Basti1512 avatar Jul 08 '19 03:07 Basti1512