site design

[cbrake]

@kdsch @kraj lets continue site design discussion here.

I have already merged #5

[cbrake]

Examples of other OSS projects sites.

• https://elm-lang.org/
• https://kubernetes.io/
• https://istio.io/
• https://www.yoctoproject.org/
• https://www.terraform.io/

I like the elm site how they make a few key points about the project. It appears the other projects follow a similar pattern.

[cbrake]

Would it make sense to center the CTA (call to action) button under the email form? It seems like it is a little lonely off to the right. I'm not sure if we need to keep the powered by tinyletter link -- I can't see anything in the tinyletter/mailchimp terms of service that indicate we need to keep it.

[kraj]

I think they must want you to buy a subscription in lieu of removing their ad.

[kdsch]

@cbrake @kraj Thanks for the feedback. I'm also not a designer; I've just read Practical Typography from cover to cover a few times, and played around with HTML and CSS long enough to be dangerous.

The circle indicates a hyperlink more subtly than coloring the text. I'm open to changing it.

I also like Elm's site, however I think it could use space more effectively. I love the tangram logo, but it pushes down the arguments for Elm without telling me much. I see no reason that three of the core arguments for Elm (no runtime exceptions, great performance, semver, small assets, JS interop) could not be shown above the fold on any device. It respects readers' time to get to the point.

CTA button

I'll present an argument against centering it, but I'm happy to entertain counterarguments.

I actually wanted to get the input box and button on the same line (on wider screens), but couldn't figure out how to get the input box to take up the full remaining width; these seem to have atypical behavior compared to an ordinary div. If we like this idea, I'll try again to devise an implementation.

One reason to keep the button on the right is to keep it in the mobile device sweet spot. Centering can work for narrower screens; but on wider touch devices, the corner is better. If we cannot get rid of the TinyLetter link, and we center the button, maybe we can put it beneath the button.

Yoe logo

I'm not opposed to a logo, but I also don't think it's critical at this point. If we want to do a logo, I suggest adapting the current graphic as follows:

• Remove the text; keep the sheep
• Use SVG format for the master graphics; generate bitmaps from these

One way to achieve a clean-feeling design is to minimize the use of non-informative symbols. Words and letters often suffice. A logo seems to be most useful as a means of brand recognition. If we ever need to fit the brand into a small, square space (such as a favicon or thumbnail), it could be useful. Nevertheless, the word "yoe" is already small and nearly square. But I do like the sheep pun.

Most corporate branding is highly controlled and consistent (consider Go's recent rebranding). Community or grassroots efforts can contrast themselves to this by employing a range of different symbols, which could evoke values such as diversity and independence, potentially meaningful to an open-source project. How we approach this is a conversation to have, maybe to revisit.

[kdsch]

One more thing. The images I rendered before used my system fonts, which are not typical. I have Fira Sans as my default sans serif, an open-source font originally commissioned for Firefox OS. It's a well-designed font with a welcoming feeling that I find apt for open source projects.

To avoid system fonts, we can serve any font statically via HTTP and use @font-face in CSS to specify it. Just have to abide by the license.

[cbrake]

@kdsch good input -- I've not processed everything yet, but will try to do so tomorrow.

the source of the Yoe logo is here in SVG:

https://github.com/YoeDistro/yoe-distro/blob/master/docs/yoe-logo.svg

I created it with inkscape.

It may make sense to move the source for the logo to this repo.

I think removing the text from the logo makes sense.