Website landing page revamp

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

You make a good point, Shubhamttagi.

The hand makes sense on the mobile version of the website because it is clearly holding up the phone in a liberated fashion whereas when I rotated the image 90 for the desktop the hand could be easily interpreted in a negative way, haha.

I’ll add a new version to this comment removing the hand from the desktop version. (The two versions have a slightly different header anyway. There’s a simple embedded-CSS trick to allow the mobile and desktop websites to fetch (immediately) only the image that they need).

Also added the search to the top bars.

Any other thoughts?

I think a Latest section could show the latest 10-15 apps scrolling past, if the user has JS enabled then they can control the scrolling. I think that Latest news might also work in this area too.

I was torn as to whether to rename the News section to Blog, as specified by Redplanet’s friend. Blog has a personal connotation whereas News implies a community. Perhaps I can combine News and Latest apps into a single Latest pane?

Your thoughts are always welcome. Thanks.

Nice… some thoughts…

  • the hand
  • embRaces
  • pls no label on the phone
  • this can be achieved without Javascript?
  • on Desktop the embossed download button looks out of place
  • on Mobile the download button should be on the first screen always

1.Real hand may be replaced with sketched hand.
2.Download button should have text “Download F-DROID” on desktop. On Mobile version it should be “Install”.
3. The phone in hand may be replaced by Download button.

I would have replied about an hour ago but the connection on the Ubuntu is ridiculously sketchy. Retyping this on another device.

Hi Licaron

  • the hand
    Done. Removed from desktop. Kept on the mobile version but flipped it back to the way it was originally approved (I only flipped it horizontally so the lighting matched).

  • embRaces
    (lol thanks)

  • pls no label on phone
    Have changed it from white and extremely high contrast to much lower contrast. Fair call. Keep in mind that we are using Fairphones photos for free, and all they ask, according to their website is that they are attributed somewhere.

  • poss w/o JS?
    Yes.

  • Desktop embossed DL button looks out of place
    It’s a 3D button that I can do with CSS. It is supposed to look like its extruding out of its place, when people hover over it will half press and feel very smart.

  • on Mobile the download button should be on the first screen always
    Done.

Hi Shub,

I feel that adding one handdrawn element might compete too much for the users attention because it might look out of place.
2. I’m trying to avoid all caps. For consistency and legibility.
3. Kinda done, ;), thanks

Here are the two with fixes described in previous reply.

Click to scroll down

7 Likes

The first button (and the general look) is not very 3Dish, hence this one thing looks out of place, imho.

F-DROID is only for Android!

Why button have text “Download for Android”?
It should be simply “Download” or just “Install Now!”

The hand i am referring to is hand vectors.

Hmm… the two buttons match in terms of font, icon and even the white border, the colours match the current interface alongside and the F-Droid logo. Its not matching in terms of size. It could be the size that is throwing your expectation off. Innumerable sites have differently stylized download buttons that reflect the region/pane that they are placed in. For example what I needed to do in this region is match the other bold and high contrast elements and shapes.

I dithered about a bunch of things in this design, but that region is one that I thought just worked. Maybe I’m wrong. There was another guy on here who suggested a 3D button might be neat and so that started as a response to his request and I actually really liked it when I did it.

Shub, have you read this guys Communication Strategy (F-Droid: Communication strategy)?

EDIT: Vectorised fist holding a phone is a cool idea if we were to focus on the ‘take back your privacy’ aspect in a future header image. Maybe for people who have JS enabled we should do this, solely BECAUSE they have JS enabled, :wink:

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