New concept mockup for DBHub.io landing page

[justinclift]

Been thinking over what our DBHub.io landing page should be, as the current placeholder one isn't fit for purpose. :wink:

So far, this is what I've come up (concept wise):

This is modelled after places which (I think) have good landing pages:

• Vue.js

• Hexo

• Laravel

• Redash

• Metabase

The key things seem to be:

• a very simple description of the project, in large text. Preferably just a few words
• lots of white space (eg opposite of info overload)
• a "Get started" button, generally located with the above project description
  • leads to an intro for new users
• A "features" area underneath, showing capabilities

So, for ours I'm thinking we could have an intro animated gif (eg a few slides showing key things), a "Get Started" button leading to a new user intro, and a features area below it showing things like DBHub integration (eg screenshots), dio command line examples, and screenshots or similar of other key pieces.

What do people reckon so far? :smile:

[justinclift]

Hmmm, we should probably make the "Save your databases online, share and collaborate with others, and generate graphs" text much larger. And maybe drop the "DBHub.io" text completely. :thinking:

Done (pic updated above).

[justinclift]

Not 100% a fan of the current simple text. Using "and" in the sentence twice is bad English. Maybe drop the "and generate graphs" fragment, instead adding it to the features list?

Something like this:

[chrisjlocke]

As in the 'hexo' example, the most popular headings are the 'x, y and z' way of describing.
I'd argue that sharing is similar/analogous to collaborating. They're different, but overlap. So, you could use "save your databases online, share with others, and generate graphs". I'm not 100% sure on the 'generate graphs'. 'generate online graphs'. On what? why?
Collaboration and sharing is the main benefit of the software, so I'm leaning back to your last example... Well, that was a pointless post of mine! At least it showed I thought about it! haha!

[justinclift]

At least it showed I thought about it!

:smile:

Maybe some mix of:

• Share your data
• Collaborate
• Create graphs / Visualise it / Graph it

?

[justinclift]

Next variation:

[chrisjlocke]

Y O U R D A T A - Share it! Visualise it! Improve it with others!

lol...

[chrisjlocke]

(gah - there should be more spacing between 'your' and 'data', but obviously that's not HTML friendly! You get the gist though... 'your data' is large, with the three blobs underneath? maybe?

Not 100% sure on 'improve it' - will peruse the thesaurus when I'm sitting on the loo!! haha!

[justinclift]

:wink:

k, trying with the "Get Started" button moved up a bit:

[justinclift]

If you want to try out some things yourself, the above mockups are created using the desktop application version of Balsamiq (Win/macOS). It's no cost to us, as we're an OSS project.

Our source files are here.

[justinclift]

From the Hexo approach, maybe something like "Fast, simple database sharing"?

[MKleusberg]

I think this is looking pretty good. Just two thoughts I had: 1) What about active users of the site? We should offer them an obvious to locate and easy to use way to log in. 2) "Improve your data" sounds a bit strange to me. Collaboratively working on the data/on the database/on the user's project seems to fit better because it also incorporates collecting and aggregating data.

[justinclift]

Actually nearly finished implementing a first version of it. :wink:

It turned out that a single "features" column looked too sparse. Too much space to either side when on a desktop sized browser. So, went with two columns instead.

Just working on the last piece now, which was going to be an animated gif but will probably be a (small) movie file instead. Better file sizes, and pretty much every browser supports the <video> tag these days.

What about active users of the site? We should offer them an obvious to locate and easy to use way to log in.

Was thinking to have the login/register buttons in the "standard" top right spot still. I just left off the top row of buttons in the mock up, as it's not the bit I was focusing on. :smile:

2. "Improve your data" sounds a bit strange to me. ...

The wording I'm using in the real code (thus far) is:

Share your SQLite data
Visualise it
Improve it with others

Improvements are definitely welcome. :smile:

[sky5walk]

Change all "Graph" TO: "Chart" or "Plot". Graph's meaning is more dominant in mathematics and data structures.

[justinclift]

Good point. Already using different wording now anyway. :smile:

Almost done here. Just battling some video conversion problems with libtheora. Can't get a valid output video in .ogv (needed for backwards compatibility) format. Grrrr.

Probably time to start getting creative. :wink:

[justinclift]

Ok, new landing page has been deployed. There are lots of pieces that could be improved, but it should be a reasonable starting point. Hopefully. :smile:

With the .ogv video, I just skipped it. Every major browser supports either mp4 or WebM these days, so those two should be good enough.

[justinclift]

Oops. "Graph" was still used on the page further down. Fixed.

[justinclift]

Closing this now, as the new landing page seems to be working ok. :smile:

[MKleusberg]

The video is pretty well done by the way :+1: Looks rather impressive!

[justinclift]

Thanks. :smile:

It took quite a few goes to get reasonable. In theory it should be edited down a bit to remove some of the pauses... but meh, later. :smile: