TWHL4 Design Crowdsourcing Created 8 years ago2016-12-13 09:30:55 UTC by Penguinboy

Requesting help to finally finish TWHL4! The code in this site is really old and that's stopping me from doing stuff. One of the reasons compos were drying up is because creating/editing a compo in the back-end is just a big hassle. Things like MOTM and other stuff are in desperate need of a revamp as well.

I know I keep going on about TWHL4 and it's never coming and blah blah, but it's actually really close to being complete. There's just one problem: It looks crap. And I need your help to fix that!

I'm not a designer, and Ant, who kindly volunteered to help with design, has been really busy recently and I don't want to bother him with extra work. So I'm going to do the best alternative: steal borrow the design from other sites!

Thing is, TWHL is a pretty unique site in that it's all custom code. We don't use PHPBB or other third party packages, and everything is integrated into one system. It's nice because everything fits together nicely, but it's difficult to find other sites that have as much content as we do.

So I would like to ask everyone to help out if they have some inspiration. I don't want you to do any big work (though you're more than welcome to if you want!), I just want to see any cool reference material you might have:

• Websites that display content in a cool and nice-looking way (screenshots for sites that require logins please)
• Mockups or photoshop if you want to pitch some new ideas
• Suggestions or anything else! Everything is welcome!
• Please help! I really want to finish this thing and start adding cool improvements to the site

If you've seen the beta website, please ignore it! I expect the new design might be very different.

The biggest things I need are:

• General style - ways things are displayed, colours, layout, spacing, font size, pictures, that kind of thing. Stuff that looks nice and clean.
• Layout - especially of the front page! There's lots of info to display on the front page and it looks really cluttered and messy no matter what I do. On the front page I want: recent+top maps, wiki edits, forum posts, journals, news, and a poll.
• Once I have some general layout stuff I think the other pages will be easier, since they generally only show one type of content, so that's less important. If you know a good idea for forums/vault/whatever, post it anyway though!
• Square logo. I'm happy to keep with the orange lambda, but it's a bit generic. Any ideas for a TWHL logo?

Important things to keep in mind about TWHL4:

• Modern design. None of this old school stuff! Sorry if you prefer the style of TWHL as it currently is, but it's awful for non-desktop devices and needs to be modernised.
• Looks almost NOTHING like the current TWHL. Content will be the same, though.
• Mobile friendly website, but NOT an app style. If there's an app, it'll be a separate thing. The website will be a similar style on all devices.
• No galleries or big image slideshows on the front page, I went through a phase where I liked them, but I'm not a fan anymore. (Vault pages have an image gallery, don't worry)
• Only maps have thumbnail images, we have a lot of text-heavy content that needs to look good (journals, forums, etc)
• Looking at three main colours in the primary layout: white, dark grey/black, and orange. Other colours for highlights of buttons and stuff.
• Tutorials, VERC archive, and wiki/entity guides are all combined into the wiki.
• All usernames will have an avatar next to them (tiny inline avatars are possible)
• No other new features or screens (for now)

Basically, if you have any websites that have a nice style and you think would be a cool idea for TWHL4, please post it in here! Feel free to discuss any and all ideas. I really want to get this thing finished by the first quarter of next year.

I want to avoid showing the current beta right now, because I want to start from a clean slate. What do you imagine TWHL4 looking like?

TL;DR: I'm stealing designs from other websites for the new TWHL. Feed me websites!

Man, if only the university course I took that was partially about this very thing actually prepared me for this!

I'll try to be back here tomorrow with something(s) for you.

I work as a UI designer and could do some designs but not sure if Id have much to contribute considering free time. I'll see what I can do tho

I hope in some way we can retain the "old style" design at least in a few areas.
I'm getting tired of seeing huge buttons slapped in my face just because it makes it easier to tap on when using a phone. Not long ago i saw a new design that uses small fonts and everything isn't blown up and it looks amazing.

The site layout can be varied by window size (a la Steam) to work on both mobile devices and computers, you know. I don't know if that's the kind of effort Pengy is looking to put in, though (nor do I know how much work that is).

Its called responsive design, yes it can be done.

It's a bit chunkier when using the site via a phone but normal sized on desktops.

I am an expert in these matters. It must use this font.

I was waiting for someone to suggest "Comic <insert any name here>" font

I was waiting for someone to suggest "Comic <insert any name here>" font grin -

Every April 1st, all text on the web site should use the Comic Sans font instead of whatevery it uses normally :/

If that WERE to happen, I would avoid the site like the plague on April 1st...

I think the french website OpenClassrooms could be a great inspiration for TWHL v4.

I imagine the home page of TWHL v4 to be quite similar with the navigation bar being almost identical, the big showcase would be smaller to feature the recent map (like PB, I hate that kind of thing) and the quotes could be replaced by news but instead of taking the whole space on desktop it would take like 80% and aligned to the left leaving some right space for journals, polls, recent forum posts. We could have the footer containing the copyright mention, site version and speed process time and I think the pinned ShoutBox to the bottom right like the current TWHL v4 Beta has is nice. On mobile, we have to use the whole device width so what goes to to the right on desktop goes after the news on mobile.

The "Paths" (Parcours) section could be interesting to categorize stuff, assuming we're speaking of the tutorials section, this could be where "Gold Source", "Source" and "Common" would be. Could also apply to forum sections as well.

The "Courses" (Cours) page (can't provide a link due to their link format, from the Home page, go to "Courses" (Cours) and pickup a random category) is a neat inspiration for the "Map Vault", tiles with small map thumbnails, the author, the game/mod, a rating...

Viewing a forum's topic could be similar as this one but with bigger avatars and having the signatures instead of "skill levels bar".

As for the colors, I think we can keep the ones from TWHL v3 but a little bit brighter as long as it don't hurt people's eyes. Or maybe change that very bright yellow to white.

For "huge textual content" such as Wiki, VERC archive, tutorials... we could just take the suggested home page and remove everything we don't need (polls, journals...) and make usage of the full width.

I'm not saying we should "steal" their design and such, but I think this kind of layout and such could be great for a website like TWHL v4.

What do you guys think about my idea ? (You can say it's crap if you wish, I won't bite you ^^)

Whatever it looks like, it must allow <blink> and <marquee>. Trust me, I'm a back end expert!

@Shep: Looks similar to the generic marketing sites that are all over the place these days. I don't mind it and there's some good ideas to take from it, but there's too much whitespace going on for something with as much info as TWHL. I'm also not too keen on the full-width websites (on desktop, it's too wide).

Some good ideas regardless, keep 'em coming.

PS: no comic sans

I quite like many of the aspects of the Red Giant site. Not the overall design per se, but elements of it like the dropdown menu under "Products" being very, very readable whilst containing a lot of information. Just neat colour organisation and spacing.

The Product pages themselves maybe have some elements that could be borrowed for tutorials, etc.

I'd like to stray away from the "every new website looks exactly the same with bootstrap" thing.

I like the idea of the front page of the red giant site; this being a front-page populated with almost equal sized cells that could represent highlighted or random tutorials; maps from the vault, journals etc - so there is a lot of visible and interesting content on the splash.

Not sure what else after that though, I dabbled in web design for about two months before giving up.

I'd sort of like TWHL4 to improve quotes (ie. actually link to the post quoted whilst also including name and timestamp automatically with a "quote" button under the avatar) and, really minor, but the website title to represent the current thread you are on, as regardless of what page you are on, the title will always be "TWHL: Half-life/2 Mapping Tutorials and Resources"

One feature that I would like to see implemented is the ability to edit your posts an unlimited amount of times for as long as you like, even after someone else have posted.

Is this it? [censored]
I got there by googling something about half life and got there.

I'd recommend you use Varela for headers, its a nice and professional font.

If we're going by [censored], got to say I'd much prefer a darker colour scheme (drastically reducing whitespace or making whitespace a darker color )

For inspiration I'd consider just stalking dribbble.com, designers constantly put stuff up there and i'm sure you can pick a few ideas that look really interesting. As much as I don't like the rest of the page, this idea of tile-like boards on the splash is quite interesting

See my site. The layout is nice and easy on the eyes. I don't like black/white layouts. Also, the preview images for some maps are dark and contrast greatly with the rest of the site. The markup is ugly, but good work on the coding.
Oh, and that search bar

EDIT: crap, I hope I won't get banned for posting the beta site here.

Guys keep the beta site secret please because there's a high possibility that the final result will look nothing like it and I don't want people to get the wrong idea. Not like it's too much of a secret or anything but I just want to keep the slate blank so to speak.

Thanks for the suggestions, keep 'em coming. Not much time to do much over the xmas period but I'm still thinking about designs!

Came back here for the holiday, and I am heartened to see that this community I love is alive and well.

I am eagerly waiting to see the new TWHL, and I will still be around when Half-Life 3 comes out.

SMF (simple machine forums) is really nice too. Just my two cents.
Can be seen at http://sas1946.com/main

Not gonna lie, that looks like its straight from 2005 - I get the feeling that Penguinboy is wanting to go for a more modern feel

I find that design really awful: it's not mordern, not mobile-responsive, and there's too many links/information and greyie shades.
Not sure you'll find it helpful but the only website which visual aspect I like and think would fit with TWHL is this one: http://www.kimballgroup.com/about-kimball-group/
There's far too few content on the website to use it directly for the new version, but it might be of some inspiration. Very few, plain colors, not too much content on every page, very clear design, good font and font size, big buttons and mobile-responsive.
There's also that website I love which has the same qualities but almost everybody I showed it to find it ugly :'( https://www.halifax.co.uk/

The Black Mesa forums are pretty readable, don't leave too much whitespace (blackspace?) and have a sidebar with additional links and content like current TWHL has. Might be able to take a few bits and bobs from there.
Here's what it looks like when you're logged in:

They're all variations of PHPbb which Penguinboy hates

We're talking design here, I don't care what powers the forums. I actually quite like the layout of the BM forum, looks pretty clean. Layout is similar to what's already there currently (borrowed from MapCore)

http://worldbuilding.stackexchange.com/

http://stackoverflow.com

i love thees sites. simple but very useful.

edit: shortened, im not comfortable with old length of my post.

hate hose ^
always liked the simple old-school bbs style. Never really seen a point in changing designs, visually, sure, but functionality-wise, what for if its fine?

I'm with bruce, BBS was the sh1t. Honestly, besides BBSs style id probably design it in windows Vista boarder style. New websites are too optimized for mobile devices, its like the digital cancer of the modern age.

Oh, and also, this.

There's still a huge issue with most websites not or not enough optimized for mobiles, twhl being one of them.

Make it bootstrap/responsive website.. but not too modern since its a FORUM based website.. so use whole width of the screen, but not too minimalistic

ps.

twhl is a good platform for cross engine users

I've been told that using ONLY bootstrap's grid system as a base is a good way to have some customizability whilst having a solid responsive system at the core of it

when it comes to mobile, when reading the WIP thread you have to load all previous images to see the newest post, quite a waste of mobile data, would be cool if there was a way to to skip them

I agree with Bruce and this is very easy to do:

HTML:

<button data-rel="gordon-freeman.jpg">Click to reveal image</button>

JQuery:

[quote]$("button").click(function () {

var imgUrl = $(this).data('rel');
$("#area").html("<img src='" + imgUrl + "' alt='description' />");

});[/quote]

Sorry to bump up an old thread, but this just occurred to me - for the quote function, can we have people's names put in as how SMF does? Eg, when we quote someone (Like above) it just says Quote:

Can we have it like this?

I'll go through this thread when I get the chance.

+1 for Ghost129er about the quote (itself and the system)

Yep, that kind of quoting will be possible.

Something like "tahribat.com" would look better in my opinion.