Mock-up of a slightly different look for the home page

matterhorn103 · April 15, 2024, 10:04pm

A little something I worked on a few weeks ago:

With the milestone 2.0 release not lying too far in the future, it won’t be long before two.avogadro.cc becomes the main landing page for the Avogadro program.

The website is reasonably nice already, it’s clean and simple, but it doesn’t really show off Avogadro’s beautiful rendering and sleek interface all that much, which I think is a shame. The screenshots are only shown in a small carousel, and the GUI not at all! Avogadro is a very competent tool imo and I thought maybe the website ought to convey that and sell it more, make it look as professional as it is. Since Avogadro makes molecules look really, really nice, that should be easy, just by showing them off!

So since @ghutchis had expressed some admiration of the Blender installation options widget, and KDE had their recent 6.0 release, I looked to both for some inspiration, as well as other big open-source projects.

I spent a chunk of time on it to get consistency and a good appearance at different screen sizes, and I think the result looks pretty nice. As a preview:

It gives a bit of a tour and a breakdown of the key selling points. I included a big install button that could be replaced with the planned implementation. It could look even better with some visually stunning, high-resolution screenshots, and I’d like to show the GUI more. The ideal thing would be some GIFs of things like bond vibrations and molecule manipulation. For now I just used a few pics I could find.

I would love feedback and ideas and to know what others think!

This branch contains my idea, and I opened this PR for it.

(Note that not all the commits there are specifically for the proposed home page, I’d take them out of the PR later.)

matterhorn103 · April 15, 2024, 10:09pm

In light mode:

In a narrow window to simulate a phone:

ghutchis · April 16, 2024, 1:44am

Sure - definitely some nice ideas.

It’s been ages (and ages) since I’ve really done much web design. I think the first question is “what is the intended audience” for the website.

For the current iteration, I think I was borrowing from a previous iteration of the https://bokeh.org front page, since I liked the PyData Sphinx theme.

I agree with the top part - a quick summary, screenshot / image and “Get Avogadro” button / widget. But I think in addition to the flexible, intuitive, etc. sections you want to help people get to documentation and the forum.

matterhorn103 · April 16, 2024, 2:10pm

Glad you like them! I’m also very much open to improvement suggestions.

It’s a very nice theme, was a good choice I think, looking at https://sphinx-themes.org/. It lends itself well to looking not too techy and more than just a documentation site, which I think is important since it’ll be the project’s home as well, and it makes it more friendly and approachable.

Sweet, I’ll hang on to those things then. The screenshot does need to be a different one (bigger, lighter/higher contrast UI) so elements are a little more visible, and I wanted one with a complex system loaded, this was just a placeholder for now.

But you like the whole thing with the sections? I couldn’t quite decide whether the headings are good for catching attention and emphasizing Avogadro’s strengths, or sort of meaningless platitudes. I felt like it works well at blender.org though, and Apple does that sort of thing plenty, hence the attempt here.

Well the top bar is permanently shown and has quick links for the user guide and the discussion forum, right? And I would also add links within the little text snippets, for example where I have written “The Avogadro community is friendly and ready to help.”

But in my mock-up they are also still there right after the gallery, just as it is now!

And indeed once the nice drop-down install button is implemented I would suggest the Install boxes can go – the drop-down will be better for quick access, and presenting alternative, historical, or obscure installation options is better done at two.avogadro.cc/install/index.

That in turn will mean the Resources section comes immediately after the gallery. And again, the top links bar already provides convenient quick access for return visitors.

Agreed. Primarily people who don’t know Avogadro yet, I would suggest, because people who know it will go straight to the docs or forum or installation options from the links at the very top of the page without looking at the rest. So my instinct would be (I may be wrong) a mixture of predominantly:

relatively early career (computational or otherwise) chemists, who I guess need
1. to know that Avogadro can handle everything they need for their work i.e. “is this the tool for my task?” – tried to address this by starting straight out with the Flexible text snippet
2. to see that Avogadro is actively maintained and developed – achieved by showing a modern program interface and having a website in a modern style
3. to see that Avogadro can produce high-quality graphics – easily shown with big, eye-catching images of beautiful molecules placed front and centre
BSc/MSc students who have been told/recommended to download it, either for courses/assignments or as a paedogogical tool; they need
1. reassurance that Avo is also for them, not just career scientists – made sure the very first sentence contains a reference to students
2. not to be frightened by the software (comp chem is already scary enough as an undergrad, right?) – made the second section an emphasis on Avo’s ease-of-use regardless of academic level, and again, a website that is friendly and modern helps to dispel any idea that Avogadro is a typical highly complex tool only for people with technical expertise.

Those are just my own rambling thoughts, feel free to contradict or add!