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):
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:
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.
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.
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.
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.
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.
@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.
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:
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 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 .
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.
@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?
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.
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 .
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
@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.
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.
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.
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.
.
.