HaxePunk/haxepunk.com

Updating the website, adding new stuff, new design - some ideas!

mistress-of-loft-and-spire opened this issue ยท 29 comments

Since I'm reviving my effort to improve the HaxePunk site I quickly wanted to update this to reflect my current goals:

  • Redesigning the website structure and style to make it a bit more modern and user-friendly
  • Updating the HaxePunk logo
  • Improving on the documentation, updating outdated info, adding more tutorials, faqs etc.
  • Adding more demos and also improving the games page
  • Updating the forum software, maybe even migrating to a different setup -- I personally feel that discourse might be a good idea**
  • Creating some icons and graphics for https://twitter.com/HaxePunk

My working repository can be found here: https://github.com/voec/haxepunk.com/. Feedback is very much welcome.

** (Since I don't have access to the server I'm not sure how smoothly this could be achieved. I would definitely help with setting everything up. Perhaps I could setup the software and style on my local server to be copied over. As for the database I'm not sure how easily it could be migrated, but that's something I could work on as well)


Original post from 2015-10-15:

As I've mentioned before in the forums I feel like the HaxePunk website could use a visual overhaul. I'm not saying that it looks that bad but compared to some of these sites It's not as inviting and modern looking:

http://haxe.org/ - http://haxeflixel.com/ - http://useflashpunk.net/

Also there are a couple of errors on some pages and the tutorial section could use a bit of love. I also feel like the forum software needs to be updated, it's very much out of date and there are a lot of bots registered (even if they don't post).

So I want to use this post to show and discuss some ideas I have and also to see how many people are interested and what others thoughts are.
I'll probably work on this on and off, whenever I have some time to spare, right now I can't quite get the offline server set-up so I can test code etc. Maybe it might be sensible to update the site in tandem with the HaxePunk 3 release, whenever that might be?

Also I'm not quite sure if it's possible to modify the forum? It seems like that part is not in this repository.

So firstly here is a mockup I did, this is only the first version and there is a lot of work still to be done on it, but let me know what you think:

website mockup

Also on top of that I think it would be cool to also redo the HaxePunk logo as well, I have to admit that I'm not a big fan of it, but maybe there are other opinions?

Anywhere here are some ideas for discussing. I was trying to keep it somewhat in sync with the Haxe logo and design, something like origami and layered shapes.

logo mockup 1
logo mockup 2
logo mockup 3
logo mockup 4
logo mockup 5

Yes the website is a bit old, almost two years now and I'm pretty sure even at that time it wasn't much modern ๐Ÿ˜„
It was a slight improvement on the old design http://web.archive.org/web/20130826234003/http://www.haxepunk.com/

In more modern design I like the blender website https://www.blender.org/

Your mockup is a nice start. But yeah, web design takes a lot of time.

The 3.0 would be a good point to also update the website/forum and have better documentation. A new start, a comeback better than ever.
For the forum, yes, something more modern would be better, discourse looks nice.
And no the current one is not on a repository.

Personally I like the logo, when I thought about updating it for the next version I imagined rotating it slightly on the z (up) axis to make it 3D, like haxepunk ๐Ÿ˜‰

My two cents:

  • I really like the mockup and the dark theme.
  • I like the current logo, but I agree that it can be simplified and modernized. I like the geometric design and the colors inspired by the Haxe logo. Maybe something more explicitly steampunk, like gears, would work.

@bendmorris Looking over my old logo designs I feel that there is much room for improvement. I think something in the veins of the current logo, just a bit more reduced or modernized would be best, like you said. Most of my drawings also really change too much not really making them connect well to the current design.

I updated the original post at the top to reflect my current thoughts on what I would like to work on.
I have a quick question though:
As I'm going to work on my own fork, would it be best to make frequent pull requests, or do all the changes only on the fork and then do one extensive pull request when everyone feels good with the result?
Also should I rather post my wip-pictures and thoughts here where more people can see them or keep them over at my fork?

The website builds from whatever's in the gh-pages branch, so we can either create a feature branch here for you to work from and merge to gh-pages as things are ready to go live, or else you can work in your fork and PR as things are ready, whatever you prefer. For visibility we can use this issue for community feedback if you like.

For demos, I'd like to automatically include flash builds of everything in the HaxePunk/HaxePunk-examples repo with their READMEs included on the page. Not familiar enough with Jekyll to know if that's straightforward. If not we might consider switching to another static site generator (Pelican?) which would also let us fix Haxe syntax highlighting (#20)

I don't actually know about the forum or where it's hosted, I'll have to check with @MattTuttle on that. We do have Gitter, but I understand some will prefer a forum. Looks like Discourse has free hosted forums but requires 2000 stars...we have a way to go.

Also - thanks for working on this! Docs/demos have been neglected and will be incredibly valuable.

I think refreshing the logo is a great idea but agree with @bendmorris that it should be steampunk related. The silhouette should be instantly recognizable as HaxePunk. Gears or something similar would be great.

The forum is hosted on my personal web server. I considered migrating to discourse but am not a big fan of running ruby... If you want to move it somewhere I can dump the database at some point.

@bendmorris I don't believe jekyll can pull in content from other repos, but I never tried anything like this so I'll have to look into it.

@MattTuttle I agree completely regarding the logo. Do you have any suggestions for forum software that might be a better choice? I myself don't have a web space so I personally could not host it.

re: forums, I happen to be squatting on https://reddit.com/r/haxepunk. Not exactly a forum, but similar in purpose and hosted.

For jekyll you can through travis,
use a master branch, and on travis pull what you need, custom compile with jenkyll and deploy to the gh_page branch with git.

Great idea @ibilon. I'll see if I can get that working.

Saw it on https://github.com/HaxeFoundation/code-cookbook
looks like once you get a travis secure var for a git push token the rest should be easy.

So, I'm not really sure about it, but here are some ideas for the logo. It's a really different direction than the other ones so let me know if this is really off or if you have any suggestions.
It's based a bit on a mix between the old flashpunk logo (with the heart and general shape):

punklogo1

punklogo12

The heart seems a little out of place - I like how it was coming out of a pipe in the original.

What about using the heart as a "hole" in the gear? Overall I like the gear and font choice.

Here's a concept using your gear/heart and even more inspired by the FlashPunk logo, combining the Haxe colors with FlashPunk pink:

logo3

How about getting rid of the HaxePunk words completely? I like the gear with the pipe coming out of it. Plus, that would make for a better icon anyway.

Here's the icon version:

icon2

And here's the website with this logo and a few tweaks:

screenshot from 2017-04-25 20-50-53

I like having the name in the logo (in some places at least, like on the front page or in the preloader) since people aren't going to recognize it without the name. Do you think changing the font would be better?

The X in that font looks pretty strange. I like the color choices though (I'm no designer so take that with a grain of salt).

Here's a different look:

hxp-logo

I like that font better. Is that something we could use instead of the default pixel font?

Looks like it, the license says "This font is free for commercial or personal use. It's 100% free!" I'll try that out and see how it looks. Edit: probably not a great choice for default font since it's not fixed width. We'd want a fixed width font for the debug console at least.

I'm not sure about the new logo - I like the icon, but I'm not quite sure about the font and the white outline. I think I prefer the more sober look of voec's mockups.

As far as the website goes, perhaps we could add a "snippets" section like there was on flashgamedojo? I don't think it's up anymore, but it contained little code snippets for basic things like moving an entity, changing the background color, etc.
I think it could be useful for users who are just starting out.

As for the logo, I'm open to other versions if people have something concrete to share, and we can try to choose one that satisfies everyone. I just don't want lack of an alternative to hold up the release, which is getting close.

I've been playing around with shapes a bit - trying to come up with something that would also express the "Haxe" part of HaxePunk. I iterated on the gear, pipe and heart concept, and this is what I came up with:
hxp svg
I haven't worried too much about the colors yet, just kept it flat. Any thoughts?

I like @bendmorris's version better. Is the issue mostly with the color/outline? Ben's outline is clearer but I'm not opposed to using @voec's color choices.

haxepunk
Sorry, I didn't know what font was used for the svg so I used Monofonto since we are bundling that font.

EDIT: With Hiragino Maru Gothic Pro (which is close to what @voec was using). I'm using drop caps and -40% kerning.
haxepunk

I like this one as well. Out of the two fonts, I think the first one looks a bit better, seems easier to read.

Closing this as we've now released.