Help me design and add content to our site!

We need to start improving our current grin.mw site so it’s not outright scary. I’ve tried to do a first pass, with some graphics and some minor writing, but it’s definitely not my forte (I would personally say I suck at it):

https://ignopeverell.github.io/site-test

I do think we should try an incremental approach and build on this to get something more respectable instead of trying to boil the ocean. So to this end:

  • Submit PRs to https://github.com/ignopeverell/site-test. It’s all based on Github pages and Jekyll using the so-simple theme.
  • Anyone can submit graphical, layout and writing improvements, as well as add content. I’ll merge everything that’s clearly better, and otherwise invite discussion.
  • Nothing that’s in there right now is particularly good, so everything and anything can be improved upon.

Once we have enough improvements, the result should be published on grin.mw. Unless the whole approach fails miserably. But I’m counting on you to not let that happen.

8 Likes

grin.mw site so it’s not outright scary.

Hmmmm? Do you want to look like a shitcoin?

I find fancy shit is inversely correlated with quality

Anyone can submit graphical, layout and writing improvements, as well as add content. I’ll merge everything that’s clearly better

Is this an open invitation for me to write the holy stone tablets flaunting my political views?

Here is my humble attempt, which is more accommodating to regular users while retaining the current simple design we love and respect.

This proposed adjustment will allow a more native/familiar approach to ‘discovering’ grin as a new-comer.

A couple of notes:

  • I had a bit of fun with the logo, not meant to be taken seriously. I loved the sketch posted in the logo thread and couldn’t decide between using it’s original yellow version or it’s white version. I ended up playfully combining them both, & I admit it turned out pretty cool.
  • All of the icons presented here are slight modifications of google search images. I assume an original sketch is preferable due to copyright laws.
  • More professional & clean icons with thin strokes would perhaps be more fitting to the theme.
  • Obviously the text content needs to be re-organized and re-written but I’m not the right person for the job.
  • I’m aware that my attempt is OK at best. It is not meant to be a long term fit, but rather a decent, simple option to go with for the next couple of months, until broader changes in the website’s content and layout are warranted and actually produced.
2 Likes

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

Grin 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: GitHub - JollyGrin/grinhq: designing a new website for grin-tech.org

  • 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