GitHub page for innerself

[wrick17]

We already have a lot going on in this library. As soon as we have a logo, we could have a page up (built in innerself of course), to showcase itself.

We already have a lot of devs. If someone good with designing stuff, could mock up something, we're golden. 😃

[stasm]

That would be great! I'd be happy to put something up on gh-pages for innerself. I likely won't have much time to work on this myself for the next two weeks. I'd love to see a PR :) I guess I'd like to apply the same principles as for the logo: minimalist, taking advantage of what the browser provides natively.

Should we move the docs from the README to the gh page when it's ready?

[wrick17]

@stasm For the minimal part, that's what would be the basic design principle for the webpage.

For docs, the basic usage can stay in the readme. Detailed docs can go in the GitHub pages.

I would have done something and generated a PR, but I'm horrible with designs 😅. That's why I was looking for someone who has a good design sense. If someone can sketch up some mock-ups, I can sure spend some time and make the pages.

[f1yn]

I have a concept in mind, I'll upload what I consider to be a mock soon.
The issue is that for my actual job, I rarely use mock-ups, so I'm not exactly sure what you are expecting.

If you'd like, I'm willing to do the design (and CSS) if someone could come up with the content. Working on a rudimentary layout as we speak.

[wrick17]

This looks cool. By mock I meant this (almost). What would be a better addition to this, is like choice of colors and images ( if applicable), fonts and all. Basically I am better at making a website than visualising one. That's all. This should be great. I think @stasm should be the perfect guy for the content. After all this is his project.

[ben-styling]

If you're open to ideas, here's a quick concept for an introductory page.

Copy is just taken from the readme, some of it has been cut down to help it fit for now, just to get the basic layout

[f1yn]

@GoldenRust That's fantastic!! I'm more than willing to help with this if help is wanted @wrick17.

I could likely make the styling and markup for this page within a couple of hours.

[ben-styling]

@flynnham Thanks!
Right now that's a really rough concept, there's no grid system used and I doubt any of the spacing is consistent, it's all pretty much eyeballed.
If people like it I can refine it some more and add the necessary sections needed for all the content.

I'm not sure what sort of imagary should be used, that's just some stock from pexels, but I'm sure there's something more fitting we could add there.

I'm also a front end developer, so I can help out with the build too once a design has been agreed on.

The chosen font is Work Sans. I think it fits the current logo quite well. Open to other suggestions.

[stasm]

I really like this, @GoldenRust, well done! Some of the copy from the README actually reads pretty well in your mock-up :) The layout easily guides me through a brief intro and a bullet point list of features; the call to action buttons are right there above the fold, the background info is prominent (which I think is important for this project b/c it exaplains its raison d'etre). And those Docco code snippets with explanations look great too. I'm impressed!

I don't know what imagery would fit best; let's explore different options. Perhaps a one-sentence claim without background would be sufficient?

Thanks to everyone for participating. I love seeing such passion from all of you!

[wrick17]

Oops. That was by mistake. Sorry.

@GoldenRust, the design looks amazing. Love it. I have a few pointers though.

For images, why don't we use something like an SVG instead of a regular image, like a vector art. That way it can stay pretty lightweight and fast. Good example would be the webpages they have for jetbrains and their products.

Also if we could use one of the default fonts, we could save a lot of rendering time.

[wrick17]

Also if we could add a link to @flynnham's article, that would be great. We owe a huge thanks to him, as that article was the one that brought me here, along with many others. 😄

[ben-styling]

I thought using some kind of svg vector art, but I concluded that would introduce too many defined shapes which could compete for attention.
I'd like to use an image because it makes the entire section look initially less flat, yet still be a secondary element.
Later today I'll mock something up with some geographic vector art to hopefull demonstate what I mean by this.

I use Google fonts a lot in production, I find that a lot of the time the load time is not noticable. However, if you're concerned about it, we could chose a similar system font (needs to be on ios, android, mac, windows + linux) and async the Google font?

If we have several individuals opinions about innerself, that could fit in a 'testimonials' or 'notable mentions' section?

[wrick17]

@GoldenRust sounds good to me. 👍

[ben-styling]

Here are two alternative ideas for the hero section.

The first is using some simple shapes, I personally don't like this attempt. The jetbrains example that was mentioned only really works because it fits their brand, which is very stylistic. Creating something similar for something that doesn't have a defined brand yet, is out of my design scope for me to visualise/create.

The second uses a heavily blurred image, and a lighter font.
Regarding the second, I like the font change for this section, but I think it would only work in white, which means the background has to be dark, this slightly negates the impact of the 'background' section further down.
I'm undecided on the blurred image.