RFC: hood.ie redesign

[espy]

What's going on? 🤔

We'd like to redesign hood.ie, for a variety of reasons (see below). We'd like your input before we get started.

Why? 😱

When we launched the current, second version of hood.ie, we had a larger team and really ambitious goals for the website. The first version had been a quick afternoon hack, basically one enormous page that included everything, and we'd always meant to replace it and do it properly. We all know how those things go. When we tackled the relaunch, we overdid it, plain and simple.

🆘 Problems and Goals 🎯

First off, we put in too many features and too much content, which led to a complicated navigation (both in terms of content and code) and a confusing structure.

• The site is too big: there's too much content.
• The structure and content is confusing: the navigation is complicated, fragmented and intransparent. From now on: page links at the top, fixed, and page anchors in the left sidebar, fixed. Done.
• We're going to ditch translations. This is painful for us, because we really wanted to be internationally accessible, but we have to come to terms with the fact that we're simply too small a project to justify the additional complexity. For now.

Secondly, we tried to be too clever for our own good and have reusable CSS across all our web real estate. So we had a separate repo for styles, but all the blog content (images!) was in the website repo. This led to problems when people tried to contribute to the site: the setup was complicated, the repo was massive, and it wasn't clear which changes needed to be made where. Contributors were scared off. And that includes us.

• The setup needs to be much, much simpler.
• Contributing to the site needs to be straightforward and simple.

Thirdly, design. The original Hoodie logo had six strong, contrasting colours, and while they were nice for stickers, adapting them for use in layout has always been problematic. In short, the colours need to go.

• Far fewer colours, no more individual styles for separate sections of the site.
• We still love our animals, and they're all pretty colourful and whimsical. We think they're probably going to end up being the primary splashes of colour.
• Fonts: Fira out, Bariol in. Fira is too light for our copy text, and too neutral for the project in general. We'd like to go back to using Bariol Bold (the font from the logo subline) for headlines, and use system fonts for everything else (Helvetica/Arial/Sans + Menlo/Monospace). So we only load one webfont, not three.
• We make code. We want super amazing syntax highlighting.
• No fancy tricks. Less but better.
• URLs should stay alive, we are going to make heavy use of the redirect jekyll plugin

Finally, the index page. It also currently does too many things at the same time. We want to go back to

• a clearer initial ("above-the-fold") message.
• a single-column layout with a single visual flow and clear focus points. This will also make mobile-first layout easier.

Who does this well? 🔭

We really like the PouchDB site for its neatness and clarity. Also, Ember is really nice with its versioned guides and docs and increasingly powerful examples on the index page.

Process 📈

As stated above, we're currently looking for initial feedback and experimenting with layouts and designs. After that, we'd like to build the foundations and the design ourselves, and then see if we can find anyone who'd like to support us with contributions.

RFC 🙌

So, what do you think? 🐶

[NickColley]

I think this is a great idea, I agree that the current site is really complicated and with a lot of content.

It'd be good to see this done from a user first approach, let me know if you want any help with that. 👍

[chrisdemars]

I think it is a good idea as well and I would love to help out.

On Tue, Jul 19, 2016 at 11:57 AM, Alex Feyerke notifications@github.com
wrote:

What's going on? 🤔

We'd like to redesign hood.ie, for a variety of reasons (see below). We'd
like your input before we get started.
Why? 😱

When we launched the current, second version of hood.ie, we had a larger
team and really ambitious goals for the website. The first version had been
a quick afternoon hack, basically one enormous page that included
everything, and we'd always meant to replace it and do it properly. We
all know how those things go. When we tackled the relaunch, we overdid it,
plain and simple.
🆘 Problems and Goals 🎯

First off, we put in too many features and too much content, which led
to a complicated navigation (both in terms of content and code) and a
confusing structure.

• The site is too big: there's too much content.
• The structure and content is confusing: the navigation is
  complicated, fragmented and intransparent. From now on: page links at the
  top, fixed, and page anchors in the left sidebar, fixed. Done.
• We're going to ditch translations. This is painful for us, because
  we really wanted to be internationally accessible, but we have to come to
  terms with the fact that we're simply too small a project to justify the
  additional complexity. For now.

Secondly, we tried to be too clever for our own good and have reusable
CSS across all our web real estate. So we had a separate repo for styles,
but all the blog content (images!) was in the website repo. This led to
problems when people tried to contribute to the site: the setup was
complicated, the repo was massive, and it wasn't clear which changes needed
to be made where. Contributors were scared off. And that includes us.

• The setup needs to be much, much simpler.
• Contributing to the site needs to be straightforward and simple.

Thirdly, design. The original Hoodie logo had six strong, contrasting
colours, and while they were nice for stickers, adapting them for use in
layout has always been problematic. In short, the colours need to go.

• Far fewer colours, no more individual styles for separate sections
  of the site.
• We still love our animals, and they're all pretty colourful and
  whimsical. We think they're probably going to end up being the primary
  splashes of colour.
• Fonts: Fira out, Bariol in. Fira is too light for our copy text, and
  too neutral for the project in general. We'd like to go back to using
  Bariol Bold (the font from the logo subline) for headlines, and use system
  fonts for everything else (Helvetica/Arial/Sans + Menlo/Monospace). So we
  only load one webfont, not three.
• We make code. We want super amazing syntax highlighting.
• No fancy tricks. Less but better.
• URLs should stay alive, we are going to make heavy use of the
  redirect jekyll plugin

Finally, the index page. It also currently does too many things at the
same time. We want to go back to

• a clearer initial ("above-the-fold") message.
• a single-column layout with a single visual flow and clear focus
  points. This will also make mobile-first layout easier.

Who does this well? 🔭

We really like the PouchDB https://pouchdb.com site for its neatness
and clarity. Also, Ember is really nice with its versioned guides and docs
https://guides.emberjs.com/v2.6.0/ and increasingly powerful examples
on the index page http://emberjs.com/.
Process 📈

As stated above, we're currently looking for initial feedback and
experimenting with layouts and designs. After that, we'd like to build the
foundations and the design ourselves, and then see if we can find anyone
who'd like to support us with contributions.
RFC 🙌

So, what do you think? 🐶

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#312, or mute the thread
https://github.com/notifications/unsubscribe-auth/AGfActDv9-FNwWoXPlmmJ5OHit9elyS7ks5qXPP3gaJpZM4JP4hY
.

[toh82]

Aye, very good idea. Would love to see a clear/smaller navigation and a more focused content, the old navigation and content are a bit complicated to focus on, IMHO.
Dunno yet if I like getting rid of the logo colors, sure it looks nice in white but I like the colors a lot.

Yeah nice, do it 👍
Would love to help/contribute, too

[HipsterBrown]

I absolutely love the current Hood.ie design but understand and appreciate the goal of simplifying the overall content, discovery, and user experience as the entry point for most folks to learn about the Hoodie project.

URLs should stay alive, we are going to make heavy use of the redirect jekyll plugin

Super 👍

Contributing to the site needs to be straightforward and simple.

Also really ❤️ this. I liked the hoodie-css idea and still believe there can be reusable utility classes, as exemplified by Tachyons and Basscss, that makes prototyping and contributing to the site a bit more approachable and maintainable.

a single-column layout with a single visual flow and clear focus points. This will also make mobile-first layout easier.

I want to see some concepts for this idea before fully judging it but, initially, this sounds like over-simplification and losing some of the personality that exists in the current Hoodie site.

Some of my favorite open-source project site designs:

• Johnny-Five
• Electron
• Terraform
• Atom
• Travis.ci

There a lot of great examples via Beautiful Open.

Also, It would be cool to see some open prototypes or designs via live examples like on CodePen.

I'm very excited to watch this process and learn from it. Keep up the great work, friends!

[gr2m]

this is great, thanks for the RFC @espy!

Maintainability and easy for contribution is something that we care a lot about, happy to help with that in any way I can

[espy]

@HipsterBrown Great examples, and that's basically what I mean by single-column, not an actual single layout column, but only one really meaningful item of content at any given vertical level. Not too many things next to each other.

The Atom header is very close to what I'd like. Logo, description, video button, code example, interesting background. Bam.

[jameswestnz]

Sounds good to me!

Ditching translations is an interesting one - although I understand the complexity, could we find a way to make it so translated versions of the sites could be add via contribution? I know this makes updates hard - if the english version get's updated, it's hard to justify keeping an outdated version of the site in another language...

I myself only speak/read english, but I have built a number of sites where it was worth the pain having other languages - so I know it's a tough one to consider.

The other point of view is that most developers find it normal for these sorts of sites to be in english, especially when code is written in "english"...

Just thought I'd put this out there to hear other points of view!

[jennwrites]

From an editorial perspective I think this is a fantastic idea, and I've just been nodding along as I've seen these responses come through. Huge fan of simplifying things and making the ideas presented on the site much clearer.

I reviewed @HipsterBrown’s recommended sites and the Electron one stood out the most to me. I think we have some great visuals and could do a lot with some strategically placed animal characters and icons.

👍

[gr2m]

nice example we could learn from to visualize what Hoodie does / how it works / benefits https://www.talater.com/upup/

[espy]

Just had another look around, and I'm also quite taken by craftcms.com:

Clean, warm, nice.

[gr2m]

awwwman one day I dream to have something like this for Hoodie: https://auth0.com/docs/quickstart/spa

[verpixelt]

Yes to all of it! Especially the technical part has to be much much easier/cleaner to enable ppl to contribute. Also simplifying the design and content flow is an A++ decision.

[kouryuu]

This sounds amazing!

I believe we have to focus on four different types of users:

• Users who have never used hoodie before and would like to know what hoodie is about.
• Users who are looking to contribute/help the hoodie project.
• Users that already use hoodie and are looking for docs and things related to hoodie development.
• Power Users that use hoodie in big projects and would like to give talks/ showoff use cases and software using hoodie etc.

So based on these assumptions I think it could be a good idea to structure the site such that these users find whatever they need as quickly and simple as possible.
(Of course I would suggest running a survey to really have an insight as to how the use the site)

I would love to contribute to this vibrant community so if you need anything I am rodkings on the Slack channel.