Website landing page proposal 1 and 2

#1

Persuant to the message from a few days ago i have put together a sketch of a

p roposal for the main landing page. I was unable to open the thread from two days ago for some reason.

Because I’m a new user i could only put one image in this opening post, see below for the About, Find Apps and Donate sections. It is still rough at this stage. Interested in whether people like the layout. Basically it shows apps florishing from the phone.

OPTION 1 is with curved organic lines linking the apps as shown in the images.

OPTION 2 would use straight lines to link the apps together.

What would you prefer, if any?

As part of this holistic design process I am recommending offering a mustard colour polo top at the HELLOTUX shop rather than a green polo. The F-Droid logo will stand out more on a mustard color. Such a polo would make an effective background for the donate section, as shown below.

The aim here is to help the new visitor to get a feel of and fully appreciate the lively and diverse open-source, free software ecosystem. My intention will be to design the page to not require javascript to be enabled. So the hamburger icon in the top-left will have an elegant fallback, for example.

Please tell me your impressions. This is a design for mobile only at this early stage.

4 Likes
Website landing page update
#2

3 Likes
#4

I like the dynamic and light-hearted spirit of these sketches. Definitely a lot more lively. How do you see the top menu vs hamburger menu working across the whole site? My initial thought is that the existing top menu works, but that might purely be because I’m used to it.

1 Like
#5

Glad you like it, Hans. I’m trying to build a bit more excitment into the offering that is F-Droid. I was thinking that with some CSS animations the “branches” that hold the apps might sway a tiny bit. I don’t have software to automate the production of CSS animations though. Although I’m not certain, I’m under the impression that the only software that exports that kind of animation is currently proprietary (ie. Adobe Animate) but I could be wrong.

I considered that an update to the menu might be in order. The main problem that I have with the current menu. Is that it is not very applicable to the new user. For example, “Forum”, “Issues”, “Docs”, “Contribute”, they simply consume too much attention for the prospective user. They are good and important things to have, but other things need to come first. I must admit that “ABOUT” need to be the first item in the menu, not the last. Also,I’m not a big fan of the “BROWSE” menu item. For example, why not just “Apps”? I also see nothing wrong with putting the “Find Apps” form in the hamburger menu, in addition to it being on the page.

It is entirely possible that the hamburger menu might be useable on sub-pages. However instead of the large header with the logo on every page we would probably put the logo in the top-left and hamburger icon in the top right. I’m also interested in trialing the F-Droid logo on yellow to add a greater sense of play to the experience. This might also translate to yellow being the background colour for the adaptive icon versions.

What do you think?

#6

@webDev I think you’re making a very valid point. I totally agree that our website is probably a bit much to process for new users. It’s probably worthwhile experimenting with our landing page, if you’re willing to take up that task. Our team is already spread thin with our ongoing daily business.

Would you be interested in implementing this as an experiment? I’m thinking this could be an independent project, like Firefox’s previous landing page used to be. We could setup something like https://get.f-droid.org once the project is ready and see how that works out. Given of course the rest of the team is on board.

#7

Hi Uniqx.

The idea to have a different url is useful, but only during the development stage. During that stage noone should point a user to the page, it should only be for testing and assessment by the community.

After the page is complete it should become the landing page. The reasoning behind this is that the existing page does need to be modernised and improved, regardless of who does it.

In other news, I’ve explored possible phone imagery for the top header. Fairphone have an inspiring image on their flickr album. Check it out here (https://www.flickr.com/photos/fairphone/29836781180/in/album-72157654222299268/). It’s available to the press in high resolution. I have sketched an alternate design for the header based on this. In their documentation, Fairphone say they want to be attributed for the use of their image and so we can do this in the footer (on large screens I am considering attributing Fairphone in very small semi-transparent text below the header tilted 90 degrees and off to the side with simple css transform. If there is not a manufacturer preferred over Fairphone I recommend that we go with this design. It is even more aspirational than the original designs (1 and 2). The curved arcs that link the apps will not be black (as it is sketched) but background colour of the icon to which its attached or white.

For reference, call this DESIGN 3 (recommend by me)

DESIGN 4 is the same but imagine straight lines linking the apps together, rather than fluid arcs.

Although the logo is drawn at an ascending angle in this sketch it may not be necessary in this design. In fact it may look better on the horizontal.

2 Likes
#8

Hi folks, I’m unsure whether people are not responding because they don’t like the design or they don’t know whether I am a competent web developer/ designer.

A few examples of my work are below (and there’s more where these came from).

If folks are not interested in developing the website then I am concerned that F-Droid will remain a system that will only be adopted by the very computer-savvy Android users. This would constitute a massive lost opportunity for positive change.

If you are interested having your say and influencing this project please see the above reply from 5 days ago (Website landing page proposal 1 and 2)

#9

(IMHO, logo & seo should be resolved first;)

#10

Hi!
I’m a very new f-droid (website) contributor.
Your sketches of the f-droid website are pretty impressive!

I guess F-droid could use some good artwork as a over-the-fold design element on the landing page.
Maybe also some good slogan?

Hi folks, I’m unsure whether people are not responding because they don’t like the design or they don’t know whether I am a competent web developer/ designer.

I guess you didn’t get a lot of response yet because this looks like a lot of work and it’s also a major design decision. … and at least I have no idea how it will look like in the end:
For example, at first i thought about an scribble-ish freeline artwork,… now it seems more like a mix of a photo and an artwork overlay.

I also had the plan to take a step back and analyze the whole status quo of the communication as a basis for developing a new design language before coming up with specific drafts.
So, from my perspective … if you want to work with me on a new landing page (proposal) together, I just need a few more days for a good analysis and collecting more thoughts and ideas. :slight_smile:
Then, i can give you also more serious feedback on your drafts.

1 Like
#11

Good to hear from you, Red Planet.

Yes, I thought a slogan might be wise. I slipped “FREE + OPEN SOURCE” under the F-Droid in the logo. You might have another idea. I was worried that on a small display with this design, an isolated slogan might clutter the presentation too much.

The end result will not look hand-drawn. They are only (very rough) design sketches to stimulate discussion, not final artwork. Sorry I should have made it clear that the apps bursting out of the phone would be in the “infographic” style, ie simple, flat, no border. The only thing fancy will be that icons in the background will be blurred slightly. Easy to do. Inkscape can do blurs and even the jpg format itself can do blur to reduce the filesize of an image.
: )

Yes have a think about what might need to be in the design and provide your thoughts. I’m looking forward to hearing more from you. If you don’t mind me asking what are some sites that youve done in the past?

Mastodon