Landing page redesign

Question

Landing page redesign

JacobBennett opened this issue 9 years ago · comments

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

Create a Gist with Markdown
Paste your Gist url into Gistlog
Share your Gistlog link (Celebrate)

Features section (some ideas)

Responsive out of the box
Easy and Fast
Powered by Github
Built in comments (and notifications by giscus)
Written with Markdown
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...

Matt Stauffer · Answer 1 · Sat Mar 05 2016 05:49:12 GMT+0800 (China Standard Time)

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

Jacob Bennett · Answer 2 · Sat Mar 05 2016 05:55:03 GMT+0800 (China Standard Time)

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

Jacob Bennett · Answer 3 · Fri Jun 03 2016 22:08:34 GMT+0800 (China Standard Time)

@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.

Matt Stauffer · Answer 4 · Sat Jun 04 2016 03:02:47 GMT+0800 (China Standard Time)

@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!

Sebastian Walker · Answer 5 · Thu Oct 06 2016 01:38:12 GMT+0800 (China Standard Time)

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

Jacob Bennett · Answer 6 · Thu Oct 06 2016 01:45:39 GMT+0800 (China Standard Time)

@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.

Sebastian Walker · Answer 7 · Thu Oct 06 2016 05:19:43 GMT+0800 (China Standard Time)

@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?