Landing page redesign

[JacobBennett]

super rough and low fidelity on purpose

Wanted to get some ideas out of my head and on to paper while talking through thought process and goals for this.

I would like to establish the tag line for what Gistlog is. One idea I had was "Your DevBlog Delivered", with a subtitle hook of, "Create your first (blog) post in 45 seconds" to emphasize how quick it is to get it up and running. This is the reason I use it and I think why other people would use it as well.

Mockup walkthrough: On the right hand side, this would be a small html5 video or gif showing the process for creating a gistlog or showing off a gistlog post.

To the left below the text and tag line is the input field to paste a gist url to create a gistlog.

Below the main hero, we have the three steps to getting started

1. Create a Gist with Markdown
2. Paste your Gist url into Gistlog
3. Share your Gistlog link (Celebrate)

Features section (some ideas)

1. Responsive out of the box
2. Easy and Fast
3. Powered by Github
4. Built in comments (and notifications by giscus)
5. Written with Markdown
6. FREE

We could also have a docs page that would be separate and would explain some of the nuances like author pages, options inside of the gistlog.yml file, etc...

[mattstauffer]

This is fantastic!
I don't like "Your DevBlog delivered". i'll try to think of something.

But I love this mockup. it's BROOOOTIFUL

[JacobBennett]

Thanks Matt :) I've done a little more work on it since the last screenshot, Here is a new one.

Not sure yet if the three across or the staggered three down the middle is going to be easier. Think it probably depends on how detailed we want to be with the getting started steps

[JacobBennett]

@mattstauffer what are your thoughts on this? Worth pursuing or should I just drop it? I know you are a busy dude so totally understand either way.

[mattstauffer]

@JacobBennett I love it man. I think I actually prefer the current Gistlog logo (which is intentionally similar to the Gists logo) but I love everything else. Thanks!

[sebwalk]

I worked on a landing page prototype.

Screenshot

https://github.com/hiwye/gistlog/tree/landing-page-work

Feedback would be much appreciated.
Please note that I still need to do a LOT of cleanup work and make it responsive. I only quickly prototyped it this afternoon.

Cheers,
Seb

[JacobBennett]

@hiwye great job on this! Off to a good start. Looks like you are planning on implementing your own flex-box grid instead of using bootstraps? If that is the case, is there anything on this landing page that uses bootstrap styles? If not you could remove that dep I suppose.

[sebwalk]

@JacobBennett Bootstrap isn't used on the landing page, I think it's being used on the create page.
I created a seperate less file for the landing page to avoid having all the blog styles in there aswell.

Plain flexbox is perfect for this case since it allows for easy alignment both horizontally and vertically without the bloat of a framework like bootstrap.

Any more feedback?