Redesign home page

[TheCom3di4n]

Ideas

• Replace the first parallax with a screenshot of the desktop like papyros.io or elementary.io to give visitors directly a little overview about what they can get there.
• information near download button
• a grid with the official apps of Liri
• replace <h1> with a lettering logo (see Logotype lirios#25)

[TheCom3di4n]

I guess the whole home page needs a new look, so I renamed this issue and added a ToDo with the current ideas. I also created a screenshot with laptop frame, which would replace the first parallax. (If you like it, I'll create a pull request.)

Futhermore there should be some information like version and size near the download button, maybe as a little grey text below it.

IMHO another good thing would it be to create/have a Material Design lettering logo (Materialize.css logo), to replace the <h1> ("Liri"), because it looks a little bit boring at the moment.

I agree with @plfiorini, as he mentioned in #2, a grid with the official apps would look very cool, and I think I have some nice ideas for the grid but I haven't implemented it yet, so unfortunately I can't showcase you something.

( Sorry for the bad English, I'm very tired. 😪 )

[TheCom3di4n]

Which apps should be in the grid?

[TheCom3di4n]

Very basic grid

-> Icons needed.

[plfiorini]

@TheCom3di4n Sorry for the delay. I like the grid, the apps we currently have although not all are 100% ready are (core apps and cross platform apps included):

• Files
• App Center
• Terminal
• Settings
• Browser
• Text
• Player
• Music

EDIT: And Calculator

@TheCom3di4n BTW did you send me an email? I have seen a mail in the spam folder but I accidentally cleared the folder before reading it entirely.

[plfiorini]

And +1 for the lettering logo

[TheCom3di4n]

@plfiorini Yes, i resent the email.

I also created a new issue for the logotype in the lirios repository.

[crutchcorn]

So we're just copying Elementary's site without consideration for how their design language is different from ours?

Okay, that was a bit mean. My point is this though:
Material design and the HIG from Elementary are very different in nature. Different goals, different philosophy, different implementation, and different limitations. Now, sure we could copy over the site, add some css and fix up a few things, but it would be doing two things:

1. Limiting our abilities, preventing us from doing better (in terms of matching our design goals)
2. Harming our identity. If we are to be a "Material Distro", we have to engage in that and make it our priority as the first thing people see

[crutchcorn]

Updated comment to be more helpful and relevant

[TheCom3di4n]

@crutchcorn I agree with you, to copy a side wouldn't be a right step, but I don't see where we "copy" their site? I've seen things like the apps grid and the "screenshot-in-laptop-frame" on many sites and also before elementaryOS used it, furthermore they have nothing to do with the design language of elementaryOS and I think they don't harm ours (Material Design). I'm not saying that I haven't took some inspiration from their site(...I hope they don't take it mad...), but everyone and everything has to start anywhere and the website of Liri is more under cunstruction than finished and at a point where it's (IMHO) not bad at all to look around and get some ideas and inspirations from others and then start to combine these with our "philosophy", as you have formulated it beautifully. And I'm sure the site will meet our design goals more and more as the project progresses.

I've collected a lot of ideas and inspirations and already combined them with the MD concept - at least in my head because unfortunately I'm more the guy who can implement things than design them, so I hope that soon a few designers will spot this project and create a few concepts for the website.

[crutchcorn]

Mate, I wasn't trying to say that you're copying their site or anything. I'm playing devil's advocate (and I guess the devil too, but we all knew I was satan anyway :P) and thinking things through. I know that others have done the same and it doesn't make it the same (elementary would likely agree. I've heard the same about the dock and such from their OS). However, there has to be a point of looking at what makes our design language our design language. Inspiration is good, but can easily mislead. Their design and our design are VERY different. Even down to the underlying layout system that both languages use differ in many ways.

Instead of focusing on a grid, why not use a card based system, or something from spec?

Why not follow the layout styling as a guideline to start with?

This way, not only will it be more similar is basic aspects, but you can use code written by Google themselves in order to achieve proper visual response.

I'm able to help with design and with implementation if needed (Full Stack Developer is my job title). Let me try to see if I can grab a minute to do some redesigns this weekend (or as soon as I can, I'll still stay for conversation any time, as that's much quicker to do)

[TheCom3di4n]

Thank you for the links!

Although I'm not very good at designing stuff as i mentioned before, I'll try to bring my ideas on paper, too, and I'm looking forward to see your concepts!

@plfiorini Does the Liri logo exist in the svg. format?

[plfiorini]

@TheCom3di4n there's one in Illustrator format here: https://github.com/lirios/artwork

This is one cancept that me and @pierremtb worked on:

The background is going to be changed because it's too busy with the mountains and red feels weird to me

[TheCom3di4n]

The yellow/red combo looks good, but we should be careful with new colors, because I guess there's a point where we need to define a final color palette.