Website landing page revamp

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.

9 Likes

6 Likes

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.

2 Likes

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?

@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.

1 Like

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 (Fairphone 2 | Fairphone | Flickr). 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.

10 Likes

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 revamp - #7 by webDev)

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

1 Like

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.

4 Likes

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?

Very cool designs! I like the slide down design better. People are using mobiles nowadays so it should be mobile friendly.

1 Like

Good to know you like em, Chris. Btw I’m unsure by what you mean by slide down design. The intention with all designs was to enable the user to easily scroll down the page on mobile. In fact if you visit the existing page on your mobile, it is not bad in this department, but in my opinion needs some improvement to reach today’s expectations and to generate the excitement and user experience it so richly deserves.

Btw all, I just noticed that people have been clicking on the heart icon of my replies. I didn’t see that on the other browser at all! That gives me a bit more confidence moving forward. Of course, I am still open to suggestions and awaiting a reply from Red Planet before starting on a more realised design.

1 Like

Looks great!

How about the “Download F-Droid” button to Glow like the Bike indicator and have 3D design? What say?

1 Like

Hi Binnyrog,

Yes, good idea. Both glowing and 3D styling techniques have been used by me in the past.

With some CSS tricks I once made 3D buttons that slowly oscillate between unpressed and half-pressed. It looked good and could work really well for the DOWNLOAD F-DROID button.

Dear all, I feel that I’m at the stage where I am almost ready to do this. Unfortunately the motherboard on my main computer seems to have died. Ugh. It lasted many years but it’s still a pain when stuff like this goes down.

I am contacting Hellotux about whether they can do a mustard or light yellow tee for us. As stated previously I feel that a yellow tee could be featured in the background of the Donate band/pane. Yellow or white ares the correct backgrounds for the F-Droid logo.

Talk more soon,
D

Hi folks,

Here’s something that I did in Inkscape. It’s still rough, the keyboard symbols will be actual apps. Fairphone’s photo wasn’t loading so I used the rough sketch of the hand instead as a placeholder.

What do people think of the slogan, was just something that came to me as I typed, nothing too outrageous, haha.

I thought the icon looked very nice on yellow but I didn’t use yellow in the hero image. Whenever I added warm colours to anything it just made the header feel cluttered.

Here’s the icon on yellow.

5 Likes

White on darker version after looking at it with fresh eyes

.

4 Likes

I like your images :slight_smile: and think that the smartphone and the hand should be something like this because I did not see it was a smartphone:

On the screen you can also display that logo:

Hi Hotlittle,

Thanks, its a decent photo you found. A fair idea too.

When I started looking for photos I decided to use Fairphone’s photos because it’s free and all we only need to do attribute Fairphone… a nice idea in itself, given Fairphones symbiosis with F-Droid.

In comment #7 I linked to this photo, now integrated into the design. It does look more like an actual phone and the image can be used for free. I like this photo also, because it feels liberating and freeing… the way free, open-source software should help us to feel.

What do you think?

I did try add warm tones and the yellow background version to the logo but it simply made the design seem cluttered. In this version you’ll see I even removed the purple gradient also. I think the design needs to be cooler and flatter to counter-balance the complexity of the arcs.

5 Likes

As promised here is the progress so far on the website design, I would like to add a small section below about some of the numbers/metrics/scale of the F-Droid network. After that I’m thinking a footer with the donate links organised in that.

This is a design based on the great work of Redplanet’s friend, find his work here (F-Droid: Communication strategy) and the reason behind some of the decisions that I’ve made so far.

In the below designs I have yet to add the tens of app icons in the top artwork, so you’ll see placeholder glyphs instead. Also I have yet properly place the app screen on the mobile phone (Inkscape cannot distort raster images with perspective, afaik). I’ll do it in another program at some point.

Also the dark bar is the fold line (ie. bottom of the screen) it will not be on the actual website.

Desktop view (click to load the full image so you can scroll down):

Phone view (again, click to load the full image so you can scroll down):

Any thoughts and/or complaints are welcome.

5 Likes

What is the purpose of that suspicious human hand? :grin: Is it making any sense!

3 Likes