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

Created 7 years ago2016-12-13 09:30:55 UTC by Penguinboy Penguinboy

Posted 7 years ago2016-12-13 09:35:14 UTC Post #332679
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!
Penguinboy PenguinboyHaha, I died again!
Posted 7 years ago2016-12-13 09:52:13 UTC Post #332680
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.
Jessie JessieTrans Rights <3
Posted 7 years ago2016-12-13 10:48:04 UTC Post #332681
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
Posted 7 years ago2016-12-13 12:03:57 UTC Post #332682
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.
rufee rufeeSledge fanboy
Posted 7 years ago2016-12-13 12:18:35 UTC Post #332683
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).
Jessie JessieTrans Rights <3
Posted 7 years ago2016-12-13 12:27:23 UTC Post #332684
Its called responsive design, yes it can be done.
rufee rufeeSledge fanboy
Posted 7 years ago2016-12-13 12:34:28 UTC Post #332685
It's a bit chunkier when using the site via a phone but normal sized on desktops.
Penguinboy PenguinboyHaha, I died again!
Posted 7 years ago2016-12-13 13:04:48 UTC Post #332686
I am an expert in these matters. It must use this font.
Alabastor_Twob Alabastor_Twobformerly TJB
Posted 7 years ago2016-12-13 13:55:32 UTC Post #332688
I was waiting for someone to suggest "Comic <insert any name here>" font :D
rufee rufeeSledge fanboy
Posted 7 years ago2016-12-13 18:09:02 UTC Post #332690
I was waiting for someone to suggest "Comic <insert any name here>" font grin - :D
Every April 1st, all text on the web site should use the Comic Sans font instead of whatevery it uses normally :/
Dr. Orange Dr. OrangeSource good.
Posted 7 years ago2016-12-13 20:59:30 UTC Post #332691
If that WERE to happen, I would avoid the site like the plague on April 1st...
monster_urby monster_urbyGoldsourcerer
Posted 7 years ago2016-12-13 23:06:38 UTC Post #332695
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 ^^)
Posted 7 years ago2016-12-14 02:49:36 UTC Post #332698
Whatever it looks like, it must allow <blink> and <marquee>. Trust me, I'm a back end expert!
Posted 7 years ago2016-12-14 03:02:44 UTC Post #332699
@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
Penguinboy PenguinboyHaha, I died again!
Posted 7 years ago2016-12-14 06:11:51 UTC Post #332701
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.
Archie ArchieGoodbye Moonmen
Posted 7 years ago2016-12-23 11:57:08 UTC Post #332818
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"
Instant Mix Instant MixTitle commitment issues
Posted 7 years ago2016-12-23 12:03:46 UTC Post #332819
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.
Dr. Orange Dr. OrangeSource good.
Posted 7 years ago2016-12-23 12:20:13 UTC Post #332820
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.
Posted 7 years ago2016-12-23 13:05:42 UTC Post #332821
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
Instant Mix Instant MixTitle commitment issues
Posted 7 years ago2016-12-23 13:32:06 UTC Post #332823
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 :heart:

EDIT: crap, I hope I won't get banned for posting the beta site here.
Posted 7 years ago2016-12-23 13:56:27 UTC Post #332824
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!
Penguinboy PenguinboyHaha, I died again!
Posted 7 years ago2016-12-23 14:35:36 UTC Post #332826
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.
satchmo satchmo“Ever tried. Ever failed. No matter. Try again. Fail again. Fail better. -- Samuel Beckett”
Posted 7 years ago2016-12-23 18:09:49 UTC Post #332829
SMF (simple machine forums) is really nice too. Just my two cents.
Can be seen at http://sas1946.com/main
Ghost129er Ghost129erSAS1946 Certified Nuisance
Posted 7 years ago2016-12-23 20:16:36 UTC Post #332830
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
Instant Mix Instant MixTitle commitment issues
Posted 7 years ago2016-12-23 23:46:37 UTC Post #332834
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/
Posted 7 years ago2016-12-24 02:25:56 UTC Post #332835
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:
User posted image
Notewell NotewellGIASFELFEBREHBER
Posted 7 years ago2016-12-24 03:19:05 UTC Post #332836
They're all variations of PHPbb which Penguinboy hates :P
Posted 7 years ago2016-12-24 03:43:45 UTC Post #332837
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)
Penguinboy PenguinboyHaha, I died again!
Posted 7 years ago2016-12-26 17:14:05 UTC Post #332853
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.
Posted 7 years ago2016-12-26 19:02:05 UTC Post #332860
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?
Posted 7 years ago2016-12-26 22:29:58 UTC Post #332861
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.
Stojke StojkeUnreal
Posted 7 years ago2016-12-27 01:44:22 UTC Post #332862
There's still a huge issue with most websites not or not enough optimized for mobiles, twhl being one of them.
Posted 7 years ago2017-01-01 22:31:26 UTC Post #332944
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
Posted 7 years ago2017-01-01 23:02:14 UTC Post #332945
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
Instant Mix Instant MixTitle commitment issues
Posted 7 years ago2017-01-12 13:07:00 UTC Post #333041
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
Posted 7 years ago2017-01-12 18:13:37 UTC Post #333045
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]
Posted 7 years ago2017-03-03 20:26:11 UTC Post #333851
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?
User posted image
Ghost129er Ghost129erSAS1946 Certified Nuisance
Posted 7 years ago2017-03-03 21:45:40 UTC Post #333853
I'll go through this thread when I get the chance.
Posted 7 years ago2017-03-03 22:35:27 UTC Post #333855
+1 for Ghost129er about the quote (itself and the system)
Posted 7 years ago2017-03-04 01:47:02 UTC Post #333860
Yep, that kind of quoting will be possible.
Penguinboy PenguinboyHaha, I died again!
Posted 7 years ago2017-03-04 09:54:44 UTC Post #333864
Something like "tahribat.com" would look better in my opinion.
You must be logged in to post a response.