Help me design and add content to our site!

I get the trauma created by ICOs and dubious projects’ websites, really I do. But step back a little. Grin’s mission is to enable good private money for everyone and open access to it as much as possible. That includes normal people, who don’t live and breath the trepidations of cryptocurrency. And no, not all normal people are hot heads clueless home traders.

Now I don’t think we can realistically reach “normal people” right now or in the next year, but there are quite a few early adopters that I hope we can convince to check Grin out. And it seems fairly reasonable for them to expect a welcoming website, with a mix of text and graphics that directs them appropriately and gently transitions to more detailed information if they’re interested.

None of that says shitcoin ICO to me.

6 Likes

Ok but no ceo circles or white papers with colored boarders… or time lines with the letter Q… or marketing euphemisms

https://ignopeverell.github.io/site-test/ as of 10/26 afternoon

Grin is launched fairly,

Traditionally, the fairness is up to debate

Decentralized

Grin is developed by a set of open source developers dispersed throughout the world. It’s not controlled by any company, fundation or individual.

has weekly governance meetings

This is neither completely true or a selling point

Past Benefactors

The images aren’t loading, but I suspect these are ceo circles

adding quick acess links to the top is the only upgrade I see as pressing, I attempted this improvement with https://grin.mw for reference. @Paouky I think essentially accomplished it.

Adding to the top a “getting started” portion I think would open it up to more casual people as well. but beyond those things I think grin-tech is already effective.

Nice!

I made some PRs. Nothing major yet. My experimental version: https://sesam.github.io/grin-pages-2018/

I also picked some other font-awewsome icons, but have trouble picking what feels most suitable as decoration for “Scaleable”. Among all font-awesome icons, I have shortlisted:
https://fontawesome.com/icons/balance-scale
https://fontawesome.com/icons/object-signal
https://fontawesome.com/icons/object-group
https://fontawesome.com/icons/object-ungroup

What’s is more “scaleable” do you guys think?

Maybe I overlooked some good fa icons?
Igno’s site uses https://use.fontawesome.com/releases/v5.0.12/js/all.js
so this should be useful to look through: https://fontawesome.com/icons?d=gallery

I might have “boiled the ocean” but I wanted to try redesigning the website using Bulma CSS. It’s a lightweight flexbox framework that’s (imo) really easy to edit while maintaining a responsive website.

I kept dark colors and used a dark green as homage to the green OG dotted line.

You can checkout my attempt at http://hq.grin.ninja

I can continue building this out, but wanted to make something in 30 mins and see what the community thought before putting too much effort into this.


12 Likes

@grin.ninja I quite like it! This is much nicer and keeps much more of the grin personality than I was able to.

4 Likes

@grin.ninja wow great job!! I’ve been toying around at taking at stab at this myself at some point, but seeing as though you seem to clearly know what you’re doing (and I don’t), I’ll just give some general feedback here (which is my own and subjective). Do with it as you please. :slight_smile:

What I really like

  • Its’ responsive and flexible!
  • I love the iconography and how the icons are a play of the logo! Super nice!!
  • Feels lightweight and simple, doesn’t have ICO-scam vibe.
  • Call to actions on donation etc.
  • Nice little status update at the bottom

How I think it might be improved

  • Going in a “less is more” / brutalist style to make it more in line with the hacker ethos. Lots of negative, white space.
  • So less designed, maybe a black text on white background, let the logo (and iconography be what pops out) and the rest ultra minimal.
  • One single font, fixed width like courier or Monaco.
  • I don’t think the animated background is working and might just end up being distracting.
  • Two grin logos at on the landing page is probably one logo too many. Perhaps “big round wobbly” logo could minimise into the smaller logo on the left as you scroll down? And then it could act as the navigation back to “home”?
  • I would avoid the hamburger menu (three bars tap to drop down) in the mobile/tablet versions of the site, they are unintuitive and over designed. Something like a flat simple menu could just be easier.

Questions

  • How does Bulma work with Jekyll? Is it compatible? If not, is it still static-site generated?
  • How easy will this be to maintain for the community?

In addition, here’s how far I got on what could be a site hierarchy that makes sense:

  • HOME (GRIN LOGO)
  • ABOUT
    • mission
    • team / council
    • project history
  • DOWNLOAD
  • FUNDING
    • Funding model etc
    • Addresses
    • Current and previous campaigns
    • Friends of Grin
  • RESOURCES
    • Documentation links
    • Github etc
  • COMMUNITY
    • Forum
    • Gitter
    • Community projects
    • Socials

What do you think? :slight_smile:

3 Likes

Thank you @igno.peverell & @lehnberg, your encouraging feedback has me grinning. I’m not a developer so I’m happy to help where I can.

Here’s where I’m updating the source: https://github.com/JollyGrin/grinhq

  • Going in a “less is more” / brutalist style to make it more in line with the hacker ethos. Lots of negative, white space.
  • So less designed, maybe a black text on white background, let the logo (and iconography be what pops out) and the rest ultra minimal.
  • One single font, fixed width like courier or Monaco.
  • I don’t think the animated background is working and might just end up being distracting.
  • Two grin logos at on the landing page is probably one logo too many. Perhaps “big round wobbly” logo could minimise into the smaller logo on the left as you scroll down? And then it could act as the navigation back to “home”?
  • I would avoid the hamburger menu (three bars tap to drop down) in the mobile/tablet versions of the site, they are unintuitive and over designed. Something like a flat simple menu could just be easier.

Thank you so much for taking the time to write this out @lehnberg. Just took your feedback and made a remix of the current page to test out my interpretation of these changes. Note I moved the entire header to the footer :point_right: http://hq.grin.ninja/lehnberg

How does Bulma work with Jekyll? Is it compatible? If not, is it still static-site generated?

This is a static html/css website.

Upon some googling I see that someone has made jeykll themed with bulma but using jeykll seems unnecessary. The current grin-tech.com doesn’t use jeykll’s blogging features.

Instead, grin.mw links to other dynamic sites: gitter, discourse forum, twitter. Perhaps the blog could be hosted on medium to reduce overhead for maintaining it? Just a thought to keep this easy to maintain, because then (imo) a static html/css website would be more than enough to onboard new grinners :slight_smile: .

In addition, here’s how far I got on what could be a site hierarchy that makes sense:

This is AWESOME. I’m currently on a rocky train making it hard to type, but I’ll add this hierarchy to my todo list so I can add more links/pages to meet these needs.

3 Likes

@grin.ninja This looks super nice. Even though I did like the old, dark design - your approach looks super good as well.

One thing I’d change a little are the fonts. The contrast between h1 and h2 is a little to extreme for my taste. Maybe you could work with the font from the old grin.mw page?

3 Likes

Haha, awesome. I hit “reply” and meanwhile there’s a reply from @grin.ninja with a redesign. Super cool. Already like it much better.

2 Likes

While I personally enjoy the original Abril font, this font conversation reminds me fondly of a conversation I had with my friend who’s a bitcoin developer about preferences for design.

He too very much preferred brutalist designs, which while I can see the appeal, I tend to lean more minimal+delight than brutalist.

Thus, which is more appropriate for Grin? My original design was attempting to appeal to a wider audience, to prepare for mainnet launch come early 2019. Yet at this current state, grin is in testnet and only useable through the terminal. Thus, after doing these edits, I see the appeal of the lehnberg edit because it is targeted towards the type of user that would be capable of using grin today. :slight_smile:

2 Likes

Nice! Yeah I think the rationale you outline makes a lot of sense. And update looks better!

I’m just about to go to bed, will play around some more tomorrow and have a think about it.

Does the framework take Markdown files?

I’ve only been part of this community for a little while, hence I do not claim to understand what the ethos or appearance really should be. But from my personal perspective, I don’t think “appealing to the wider audience” should be very high on the list of priorities :wink:.

However, I do understand your remark regarding brutal and “edgy” designs. But to me it feels as if you took off some of that roughness with “Poppins” in headers. It makes everything a bit smoother and prepares you for that “raw” experience of “Anonymous Pro” in the body.

Long story short: I very much like that @lehnberg-revision regarding fonts :smiley:

@grin.ninja as should be obvious at this point, my design literacy is just about as good as my Klingon (hint: I never watched Star Trek). But I’ll still venture a couple opinions.

  1. You’ll likely find more brutalists in this community. But we should shy away from monocultures and it’s getting time to open up a little more, so my advice would be to hit a bit in the middle. I enjoy minimal+delight as well.
  2. Please please please no fixed width even though @lehnberg says so (sorry Daniel from Grin). I’ve spent my whole life staring at code, I don’t want to see some code-mimicking piece of text anymore. The atrophied sense of aesthetics in me still gets offended.
3 Likes

Thanks for this @grin.ninja! The lehnberg version is awesome :slight_smile:

1 Like

I’m gonna chip in and admit that I much prefer @grin.ninja’s original design. You have done really good work on it. I believe it would be a mistake to pass on the wave-animation background, it gives a fantastic, “dark” feeling to it all and is simply beautiful & aesthetic to look at.

In contrast, lehnberg’s version feels more like an old carpet; grim, depressing and dusty. It gave me a sad feeling in my tummy.

There are small changes that I do see fit though; First, lehnberg’s suggestion to keep the big logo at the landing page, and then have it minimize to the smaller version on the top-left corner while scrolling down.
Second is to reconsider the font / h1 size & boldness.

My own work feels useless next to yours, well done.

2 Likes

Thank you so much for your feedback everyone, super happy to see this discussion.

I will admit that I’m also personally partial to the minimal+delight version.

My next steps were to fine-tune the homepage with more information that’s currently available on grin.mw and build out some of the pages as recommended by @lehnberg’s site hierarchy suggestion.

Since the theming is relatively easy to switch (I simply change the font and background colors with a few CSS link changes), I’ll create both minimal and the brutalist versions (if it doesn’t consume too much time) while the community is still discussing what’s best for grin.

keep the big logo at the landing page, and then have it minimize to the smaller version on the top-left corner while scrolling down.

This sounds like a good feature. I did some light googling and found a few scripts to pull this off. I haven’t built that sort of feature in the past but it looks relatively easy to pull off.

wave-animation background

Note: I’m pulling the wave design from heropatterns.com, so also feel free to browse and make suggestions if the crew likes another animation better.

Does the framework take Markdown files?

Unfortunately not. This is a simple static html/css/js website, which is appropriate (imo) for a landing site that doesn’t have consistent edits. Yet I designed a grin wiki design in the past https://jollygrin.github.io/grinDocs/#/ which allows for a community to update a wiki via markdown files on a github. If using markdown for managing community edits is important, I’m heavily biased towards using docsify (what I made the wiki with). :slight_smile:

I’ll be toying with this in the evenings after work.

2 Likes

Copywriter with UX experience by trade. Will have a go at the navigation/informational copy within the next couple days.

3 Likes

Hey, everybody! I found @grin.ninja design quite nice! I can help to make a Jekyll theme out of it, so the content would be still in markdown. Also, I really like the idea from @lehnberg, that “big round wobbly” logo could minimize into the smaller logo on the left as you scroll down and I can help to implement that as well.

3 Likes