Website landing page revamp

Yes, I just changed the size of the paragraph (to match the slogan in the top header) and also the button to match the other button and it does look better. Thanks.

One is flat and one embossed/3D…far from matching…

I really like that design.
As developer it’s always hard to get a good design or UI, so I’d really appreciate this.
You wrote earlier that you’re waiting for people to reply: I haven’t had any idea what to say, as I’ve got nothing to contribute to this :wink:

1 Like

Hi Licaron, Matching design elements is maybe more correct, yes. You’ll see the design soon, then you can tell me if the resize is effective.

Thanks Ox0p54, haha understood.

Not far from having an initial design.

EDIT: N/A see below.
(Does anyone have F-Droid apparel from Hellotux that isn’t black that they can photograph from above? If so lay it down on a white or grey surface. It doesn’t have the be a great surface because I can trim the it from the image if needed. You don’t need to get the entire piece of apparel in the shot either, I’m thinking portrait shot that gets neck hole, 1.5 shoulders, 0.5 sleeve and F-Droid icon should be fine. Throw it down so the folds appear somewhat natural.

NA (I need it for the background of the Donate pane. If you are willing and able to photograph it, tell me and I’ll wait for it. If I don’t get an affirmation from anyone here I’ll see if Hellotux can do it. )

EDIT: Gabor of Hellotux has very kindly offered me an item to photograph and I have chosen the green tee. Hellotux are to be commended. In the meantime I will use a placeholder image.

1 Like

Hey @webDev,

I’m agreeing to @Ox0p54. I also just want to chime in shortly and say that your screenshots posted 5 days ago look absolutely amazing! Thanks a lot for your work on this!

Thanks Nicoalt,

A full initial design is below. I expect people to have ideas to improve it.

I felt the copyleft symbol would need explaining for the new user so I also did that. The learning more button will load the GNU page. The only external link.

Still need to finish the top artwork and properly place the app image onto the phone.

I assume that the footer can be improved/made more hekpful? Redplanet, your friend? Also will put the (c) 2010 2019 F-Droid Limited and Contributors. Is the website also copyleft?

7 Likes

Wow, @webDev, I love your proposals! They looks so refreshing yet not overwhelming.

Some outstanding questions I have:

  • Does everything work without JavaScript? From my personal webpage (mobile version) I know those navigation bars can be expanded and closed without JS.
  • How do we start to implement it? I have absolutely no idea on how to do it. How did you design those proposals? I guess we need to collect your graphics somewhere. Do you also have some CSS/HTML stuff we can use or did you make it completely with image manipulation (Gimp, Inkscape etc.)?
3 Likes

Thanks NicoAlt,

Yes the plan is for this to be fully functional without Javascript. Thanks for the link to your page. Yes I have explored a couple of JS-free menus, so your example is another helpful addition to that. Thanks. I look forward to exploring your website in more depth.

Inkscape is what I used to get this done. I anticipate that after some consolidation and touch-ups, I’ll be ready to start building it.

During development the page address should be something that search engines cannot easily find. Maybe landing-page-dev then some random numbers “24578” dot F-Droid.org? Then in PHP I will tell search engines if the URL is that one, that they should not index it or crawl it, if they do see it.

Also, the tee in the photo is actually not a Hellotux tee. I just did some basic masking and colour overlays, to fake it, until I photograph the genuine article.

Wow, that’s even nicer! Thanks so much for working on the web page!

Regarding my web page, that’s the theme I’m using:

It’s licensed beyond MIT, what means we can freely use it for our purpose at F-Droid (while mentioning its creator). Even if it’s just the tiny little navigation bit.

However, our website is still based on Jekyll. If I remember correctly, the plan is still to migrate to Hugo, but we aren’t there yet. This leaves you in a difficult situation: should your design get implemented in Jekyll, which sooner or later gets dropped, or should you start with Hugo, which puts the burden of finalizing the transition from Jekyll to Hugo on you. I opened an issue to check and track the progress on the transition, but so far I haven’t received any feedback. To recap what happened in the past for you shortly: @Coffee started to create news.f-droid.org (source repo) with the intentions to one day move all Jekyll stuff to Hugo. At the same time, they also moved the website of the Guardian Project (source repo) to Hugo. When working on the transition, @Coffee at one moment stated that the build time of F-Droid’s website dropped from some hours to some seconds. Differently said, the website only needed less than 10% of the time to build. This makes it really worth to migrate to Hugo.

Hopefully, @hans can comment on this.

If you fork fdroid/fdroid-website on GitLab, it comes with a nice goodie: it automatically creates and deploys the page with GitLab Pages. See Hans’ page for example: eighthave.gitlab.io/fdroid-website. Therefore, no need to create something at f-droid.org.

I’d say that the non-JS menu on Nico’s web is not only an example of the checkbox hack, but a quite elegant one, from those I’ve seen.

1 Like

I like the design as a whole!
I’d just highlight the menu (background) and download button a little.

Desktop:
9760d5130a096fc3e9d2e31f9b3697922649a5f0_2_624x500

btw. I have registered especially for this purpose

NOTICE:
sorry, as a new user I can’t post more than one picture.

4 Likes

Response to everyone with pictures has been penned on another device but Wifi is playing up. Expect a response soon, or in about half a day.

Thanks NicoAlt for your help with this background info.

The gitlab site deployment thng is neat, so basically I can treat it like a git branch? That is useful.

I will need to learn more about this Hugo from the resources that you’ve provided. I am happy to use Hugo but didn’t really intend to do any “model” changes (model as in Model View Controller/MVC) if I do have to do any Model changes I may probably request that someone else do it or that the code/SQL(?) patch be checked by someone, just because I’m not familiar with the architecture of the website nor the app. If there is up to date documentation on the model and architecture then I’ll read it.

It will be soon be time for me to start reading the docs and code.

Yes @roboe, the Hugo example is a nice example indeed. On Tor the Hugo theme does seem to run into a few problems, Font Awesome is not great for Tor users, so I’ll do the hamburger icon manually with span elements.

Similarly, the social links, if we want to use them (see updated footer design below) will need to either not use fontawesome or have an appropriate fallback, as shown in the updated design.

Hi F-D fan, good suggestions! With the top bar I have added a blue grdient to ensure that the text is legible. The topbar is not really supposed to be attention grabbing at all, so I am avoiding a hard background. I felt that we need to exude and open-sky simplicity. I did the same on the mobile version and I really like it there especially because it guides the users eye downward towards the “Open source made easy” message. Great suggestion.

Re the Download button I understand your interest in helping it to stand out a bit more. I have updated it to match what I did with the mobile version (ie. put in that dark-glass effect). I know that you wanted to use a bright green colour but there is a bolder download button in the pane immediately below. You may need to click the image above to see that. That button is designed to get attention if the user does happen to miss this one. For the very thorough, who read the entire page, there’s also a DL button in the footer.

Updates…

Updated Header with FD-fan’s ideas integrated.

Footer updated (plus matched the Copyleft content on the desktop to the more recent content I wrote, woops)


10 Likes

cool! it is more convenient if websites have a download banner in bottom of screen on Mobile site (eg as on chrome,opera websites).

“this can be achieved without Javascript?”

For a browser old of 30 years? :smiley:

On the screenshot of the T-shirt:

I think there are too much rounded buttons and rectangles, hiding the most important button: Download button.

Maybe use a unique color (background-color) for the Download.

@webDev first of all, your drafts look really good!!!

is somehow invisible. Personally, I prefer the “strict” separation of menus/footers from the actual content, but maybe I’m from old school :blush:

Yes thansk, I saw it.
I’m fine with dark-glass effect, but isn’t one superfluous? Why two buttons practically side by side?
Someone mentioned that F-Droid has only an android version. So, “Download F-Droid” is sufficient (imho).
Based on the F-Droid icon (shadow), I have changed the perspective of the button.

Personally, I prefer the sketched hand and not the real picture, but it’s a little detail.

You can maybe play around with my new mockup (only one download button and w/o hand):

Personally, I’m absolutely against including any third-party stuff. If so, then only locally. Though, there can be some downsides.

There’s a similar discussion at signalusers[dot]org:

@webDev Very nice looking! :tophat:
Even more interesting that you used a tool like Inkscape to do this. Do you use it also for more final visuals or just for these very good looking initial drafts?

(…merging here)

I think dark orange would suit well 9 years old F-Droid : strength + endurance (?), versus blue ( cool + fresh ?).

@webDev , there are few I don’t find in your artwork :

  • android is now heavily focusing on multi screens : auto / tv … (and so should F-Droid ?)

  • vocal command emergence (no hands required)

  • reproducible-builds

(Back to orange,) F-Droid is not explicitly Gitlab dependent, but it seems there is no other “viable” solution to maintain the whole project. So orange could link to Gitlab without need of mentioning it (?). Also there should be somewhere a permanent “bridge” to encourage users to become Gitlab active members (especially for missing metadata ?) ?

1 Like

UPDATE

TBC

  • Social icons
  • A Privacy page with instructions on how to access Privacy apps from Guardian project, and how to setup the Panic mode, a link to encryption apps, a link to other privacy resources? (More on this is mentioned)
  • (EDIT: Add RSS icon to social/community icons in nav)
  • (EDIT: Maybe add a ‘Tell a friend’ pane (see below))
  • (EDIT: Reduce contrast and arc/circle numbers in top artwork (see reply #49 below).)
  • (EDIT: add a “Javascript is enabled in your browser. Learn about how JS may impact your device and privacy.” message to users who have JS enabled in the browser?)

Mobile (click to see full page)

Mobile menu

Desktop

Desktop menu

@shubhamtyagi thanks and agree. A download button at the bottom is important.

@hotlittlewhitedog, there are security and privacy reasons for blocking JS.

There is no DL button in the donate region, look closer ; ). I tried removing the rounded donate buttons but it made the pane look very cluttered, interestingly.

@fd-fan, sounds fair. I won’t include Font Awesome.

The problem with the distinct separation is it make the top message appear cramped.

@ggruber, inkscape is pretty great, despite a few issues, I plan to use it to the end, : )

@oF2pks, I like ur idea of using design motifs (in this case colours) to link F-Droid to Gitlab. The problem is blue is a good, calming colour for F-Droid. Keep in mind with your design that colours in different proportions can do different things. So an entire wall painted orange has a different effect than a few small elements in orange. I feel like over-hauling the logo is a bit outside the scope for this project. All I did is shapern a few bits and add a shine. What would be good in the future might be a design competition to develop a new robot. The new robot would need to get a 70% approval rating over the existing robot, to justify the change. As I said before though, you dont need to worry about the blue colour damaging your screen because F-Droid doesnt need to be on your screen, especially for a long period of time. If it really bothers you have you tried talking to the people who make that Amexia app? They might do a version in colours that are less damaging to screens. I’m interested in learning about this problem myself. Might you please provide a link to the scientific studies?

NEW NAV LINKS:

NEW CONTENT LINKS:

AFTER F-DROID PAGE IS DONE:

OTHER MINOR SITE IMPROVEMENTS:
For pages that are not the landing page, I am keen to keep the same layout (ie. content in the wider left column and news, donate, and latest content on the narrower column on the right). The top navigation bar, language and App Search functions may be updated to match this landing page.

‘Docs’ page (Docs | F-Droid - Free and Open Source Android App Repository)
Slight rework may be desirable:

  • Docs => Documentation?
  • General FAQs could be on this page, but collapsed (checkbox hack to reveal them without JS).
  • App FAQ could be on this page, but collapsed as above.
  • Tutorials could be listed on this page under a “Tutorials” heading, thus completely eliminating one page load/click.

‘Security Model’ page Security Model | F-Droid - Free and Open Source Android App Repository

  • Grammer (minor): A comma at top of page has white space before it. Therefore comma can (and does) appear on a separate line.

EDIT: Wiki page (https://f-droid.org/wiki/page/Website_home/en-proposal)

  • This page is interesting. Its about redesigning the home page! The writers had a different approach to explain in greater detail some of the abilities and features. We should seek to ensure that all the information that is presented (and still valid) here is featured within the FAQs (About | F-Droid - Free and Open Source Android App Repository). If no one volunteers this then I will do it another time and re-edit this reply to list the recommended changes. Some of the info on this page may be obsolete, or self-explanatory these days but not all of it. If the content on this page is updated a bit it may be useful today on a ‘Tell a friend (about F-Droid)’ pane. The text could read, "F-Droid is 10 years old and has become a trusted, FOSS app repository. Share your passion for FOSS apps and [get your friends and family up to speed with F-Droid]. On click, a text area appears with words, “Copy/paste the text below into your message.” (??? EDIT: Thoughts on this ???)
9 Likes