Help me design and add content to our site!

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

The yellow icons are inspired! feeling a lot better about the redesign now, it still is minimal and not too flashy while giving more simple description of what the project is. I prefer the green background, don’t like moving backgrounds in general, and also prefer the single font style versus the changes in headers.

I will give a go at the copywriting, I think some of it is a bit clunky. @Unit sounds like you could spruce it up a bit too. we don’t want to sound too idealistic I think in the wording.

actually reading the latest ninja version the wording is very succinct and to the point already.

Glad to see the sketch logo of mine making the rounds. The designs look good, especially @grin.ninja

I think it’s important though for the border of the logo to not be washed out. A lighter background / contrasting border would do well.

I’ve got a few ideas for the site, I’ll try to chuck something together later this week.

3 Likes

I agree.

Definitely not about embellishing what grin.ninja already wrote, but perhaps cutting down on headline or sub-headers/sub-copy in some places, etc. to clean it up. For example (see below). I’ll give it a shot and see where I end up.

What’s Grin?
Grin builds electronic transactions for all, without censorship or restrictions.

to

What’s Grin?
Electronic transactions for all. Without censorship or restrictions.

Note that the copy on the site wasn’t really thought through, I just added something that made sense and seemed to have to right length. We discuss the message and copy in parallel as that’s easy to update once we have it. Discovering the right message is likely to take a little bit…

1 Like

@grin.ninja wow, great work! Good balance between modern web design and Grin personality. I strongly prefer the original font, it’s responsible for Grin personality part I mentioned. Next iteration feels a bit soulless/corporate - even fore me - and I’m a fan of clean fonts and watched Helvetica documentary twice in my life.

3 Likes

This would be wicked, @i1skn! :smiley:

That’s awesome! Feel free to fork the source

Thoughts about a white border?

I like this, added.

Other Updates

Didn’t have too much time yesterday or today, but I fixed up the margins, added a swag button next to funding options, and added a more usable footer. You can check out the changes via either of the 2 styles.

Next I want to:

  • work on the grin logo resizing into the navbar
  • adding additional pages (such as the funding page)
  • adding sections for current call-to-actions (grincon, security audit, etc).
2 Likes

Awesome, thanks! I think “Learn” and “What’s MimbleWimble” should also be their own pages with content a little more basic than the intro to start with.

Maybe defining some colors in hex format will ease the building of, not only the website, but all grin-related content.

Here are some samples:

The green font in grin.mw: #86E153
The grey of grin-forum: #222222
The black of grin-forum: #111111

1 Like

@grin.ninja I have created a PR to implement your design as a Jekyll theme. Please take a look! https://github.com/ignopeverell/site-test/pull/4

1 Like

This is great!

I’m in favor of your decision to implement this PR asap so that other community members can visualize their edits. Yet going forward, are you okay if I continue to make updates to hq.grin.ninja?

For designing the funding pages (and others), I’ll focus on enabling blocks of text so that it’s more markdown friendly than the homepage (which uses a lot of columns).

@grin.ninja I think that would fine if you would still make updates to hq.grin.ninja.
But to integrate the changes into Jekyll would require a bit of work. If you want I can add a Readme file with description how to run Jekyll locally. It’s pretty easy and you would know how pages are rendered right away with live-reload :slight_smile: Tell me how this sounds, otherwise, I’m ok to “cherry-pick” the changes from your repo to the main one. Thanks!

1 Like

Sorry for the delay everyone! I haven’t forgotten!

I’m busy at conference for a week, yet I cleared up my weekend to finish my proposed pages :slight_smile:

2 Likes

Howdy crew! I have some updates!

  • Navbar is fixed to the top of the page and the smiley shows up after scrolling past the hero.
  • Added dropdowns to the navbar items
  • Fixed the menu to expand in mobile
  • Added Call-To-Action Community Initiatives
  • Added Security Audit page
  • Added a template for markdown friendly files (pinging @i1skn). Example funding page. I basically made a div where the markdown can be placed. Let me know if I can improve it.
  • added @grinmw twitter to footer

You can check the updates in your favorite style and start clicking around:

5 Likes

@grin.ninja Great work!

I played around with the site theme a few days ago and just published my changes:
https://cr33vey.github.io/site-test/

If there’s any interest in the design I’ll keep at it.

I think it would be good if we started a Telegram group for those interested in contributing to graphics/web design side of things. That way we can work more collaboratively on ideas easier.

If you’re interested, shoot me a DM with your @TelegramHandle and I’ll start one :slight_smile:

2 Likes

Looks really good, I think I still like the brutalism version best.

1 Like

Very nice @grin.ninja !

And about the brutalist version: argh. Is there a font that’s not fixed-width that’d still match the brutalist design? That might help me.

1 Like