Hello all,

I have created this LFS Websites Design section so that we can make new LFS sites with your help and input.
I have long wanted to do a whole new look for all LFS sites but it's a difficult thing to do. Hopefully with your help we can make it happen this time. I feel that all sites can do with a big update, because each site has one or more problems :

the common problem
Every LFS site looks completely different. The only commonality is the logo. This should be rectified so that every site has identifiable elements reocurring on every site. That doesn't mean every site should look the same, but there should be small elements that fit in the design of every site.

www.lfs.net
it's actually quite alright still. But its fixed narrow width and pretty much fixed menu make it hard to add new things. I want more room to play with.

www.lfsworld.net
This also has the space problem. Those desktop windows are nice, but within a browser they'll always be small. Unless you maximize them, but then what's the point of having windows?
I want to go back to full page-width displays. But I still want to make it feel more like an application than a website. So think of it more as what a stand alone stats app would be like and then that would be implemented as a website.

www.lfsforum.net
The main problem is its looks, as said earlier. We should give it a new skin to match the look of the other sites. Ideally I'd like to write all new forum software as well, but it's pretty much the last thing on the list.

leagues.lfs.net & news.lfs.net
These are so bad, they don't even exist. But they should, so we need to work on that.

Another problem is the domain names of the sites. I want to make all sites part of the lfs.net domain. So that means that instead of www.lfsworld.net we'll have stats.lfs.net instead (or maybe another name) and instead of www.lfsforum.net we'll have forum.lfs.net and so on.

These are the names I have given the sub sections of this forum. Every site has a section where discussion and development can take place.

In this stage 1 - introduction I wanted to introduce everyone with the whole contept of what should happen. I think we should take things step by step and not just dive into the deep and immediately expect amazing results.

So step one is to think about the big picture.
What content should each site have?
What should be the overall look and feel of each site and all sites combined?

These are questions for visual developers mostly, but ideas for section and section layout are always welcome.

Also I want to use this stage to see if I have explained the big picture clearly enough. If I have and we have come to agree on most of "what should be displayed on each site?" then we'll move on to stage 2.

As such it's important to note that you should probably wait with designing anything until it's clear what should be designed. Also I'm not yet sure how to go about dealing with multiple design inputs on a single topic. Maybe people should post their contributions and then it can be commented on. Maybe that way designs can be filtered out (yes be prepared that your work is not accepted. It's annoying but part of the whole public thing) or perfected through constructive feedback.

Let's say that again : contructive feedback. We don't need single word replies or "ugh that sucks worse than your mother". Posts that do not contribute in any way will be removed without notice. If you don't agree with something you can say that in a normal manner and more importantly explain how you think it can be improved. And yes, sometimes someone will make something ugly and just cannot really be improved easily. Even then it can be said politely.

Ok, so now that official stuff is over with I am looking forward to working with you. I am very curious how this will turn out. It will become a big project and it will take a long time to complete. I hope we will all last that long without wanting to kill each other

Victor

Really clear after reading that Victor and totally agree. Great plan I think and look forward to the changes. I think you're right with the LFS World too.

I've always disliked the forum skin here as it's basically the default vbulletin skin. However, I see no real reason to change from using vbulletin as it does the job well overall. I don't think vbulletin is necessarily still the best for forums but I see no reason to do a huge migration to anything new.

Victor, great idea. But what exactly do you expect from people? Design mockups? Or just ideas? HTML code? Do you want to rebuild all LFS sites, or just add/remove some bits?

Quote from majod :

Victor, great idea. But what exactly do you expect from people? Design mockups? Or just ideas? HTML code? Do you want to rebuild all LFS sites, or just add/remove some bits?

As to what I have understood and as it was discussed before, all the sites will be rebuilt into a more matching sort of design, and with leagues website and stats coming along as a completely new project.

I'm really loving it Victor, it's a really great step forwards asking community to help, I'm sure you will love to work with some of the intelligent people we have over here. I'm hoping to help on ideas and checking WIP stuff if it's any help at all. Every little helps

I think a "metro" style design would work very well for lfsworld, it is modern and could be easily recognized by the web 2.0 generation. I know windows 8 gets a lot of flak but the metro part is actually quite a nice idea although misplaced as frontend for everyday usage on a desktop pc, I do think it fits rather nicely in tablets/phones/htpcs/browsers however which would probably be the primary use for lfsworld.

http://www.itler.net/wp-conten ... en-Gruppen-benennen-1.png

http://surfacethetablet.com/wp ... pic_by_fediafedia-png.jpg

http://www.digitaltrends.com/w ... 11/09/windows-8-metro.jpg

edit: I notice this should have probably gone in stats.lfs.net, or be bald and use the metro theme over the whole lfs.net domains to make it a seamless experience?
edit2: http://droptiles.com/ found this while googling a bit more, nice example of how things could look.

well that came unexpected

I think one mayor theme that all the sites should get is simplicity, as its this sim's biggest plus. Fire up the game, two clicks, and you're ready to race on a server. The site should be the same, one click->forum, one click->world etc. Nothing too fancy, no excessive flash stuff and animation.

League news, and maybe even random server stats could be on the main site, as it gives the impression of activity. Atm, if someone visits the LFS site for the very first time, he is greeted with news that are almost a year old.

And keep in mind that those sites should be easily accessible and readable on todays smartphones and tablets.

imho, lfsw has one of the ugliest UI I've seen. reminds me Solaris in my uni.

I'm +1 for metro style, it's very good for app-styled websites, it's very easy to read and very simple, that's what you're aiming for. You go to LFSW to get some info, see graphs, tables, join hosts...metro would deliver very simple way to show these data.

Quote from majod :

Victor, great idea. But what exactly do you expect from people? Design mockups? Or just ideas? HTML code? Do you want to rebuild all LFS sites, or just add/remove some bits?

In Stage 1, I'm expecting exactly what is going on right here. People discussing the new sites globally. No details yet, but just getting a feeling of people's view on all the stuff I wrote above and in the threads in each section.
So really noone has to make anything yet, it's pretty much all talk. And it gives me time to think on how to progress.

We'll eventually (fairly soon I think) move to Stage 2, which is again all talk. Then it will be about what each section of each website should contain. I'll be keeping track of what contents should be there and people can comment on that. In other words, the number of sticky threads in each section will grow every time we get into more detail about what the site will become.

At the end of Stage 2 we will have documentation on each and every page of every website.

Also I would like to use Stage 2 as a discussion platform on how to continue with Stage 3 :

Stage 3 will be the first stage where actual graphics are involved. It will probably be about the overall looks of each site. So headers or common elements and overall colour choices can be made I imagine. But this is something visual designers can decide better than me. This is a big reason of why I'm involving the public.

So yes, I am hoping for design mockups and more than that, actual designs. But I'm trying to get there step by step. That's what these stages are about. Hopefully that structured thinking will keep everyone on track.

Personally a lighter theme would be predered (like the colors of current forum), sometimes its too dark to read on black

btw, this stage can also be used to consider all the pages / sections of each site. You can do that in the current Style and Layout threads in each section.
If you think a section is missing, or if they should be re-organized, then feel free to post your thoughts.

It might be early to mention this, but I’ve been wondering if it would be worth to try and design the websites (or some of them?) using responsive design, rather than sticking to a fixed layout. A good example of responsive website is e.g. Smashing Magazine. The site changes its layout and contents according to the browser window size / orientation. And I must say I like it! If the layout is well thought, it can improve the user experience a lot in my opinion, especially nowadays, when more and more people browse LFS websites using their mobile phones or tablets.

I’d be interested in reading some comments on this topic from some web designers who might have some experience with this type of designing.

PS: This post kind of belongs to the "Style and Layout" threads, but as long as it concerns all LFS websites, I decided to post it here instead.

MAIN CONCEPT:
ACCAkut said it best: sim's biggest plus is simplicity, in the good sense of the term. So it should be the main focus of design. This is where Troy's idea fits, in my book: "metro" looking style. It may not be very original (and yet, that will depend of the imagination of the actual designer(s)) but it will do the job flawlessly.
If, by all means, will have to have an original approach, then (concept wise, not looking wise) it should be thought not as a site, but as a hub, the central point where you come, and have access to all the sub-domains, within a few clicks, without the need of typing anything else. How exactly.. well that's in the next stage(s)

FORUM:
Functionality: a MUST, in my opinion, is the Like button, with the name appearing under the post. It's not about being FB-ish, but it would allow to avoid lots and lots of spam-posts like: Cool, Nice, Awesome... and still give to the poster the feedback regarding his writings.
Looks: well, would go for something 2.0 like.. even though the forum today does the job, it looks outdated, in my eyes (not talking about the engine).

Offtopic-ish:
Stating this Project inside the Project might've hit at least 3 birds with 1 stone, and personally I enjoy it.
__________________
LE: Flame's example is also nice and clean.

mobile browser support is kind of a must yeah. I was thinking a mobile device should be detected by the server and content should be delivered accordingly, but I'm interested in hearing techniques others have used. Of course JavaScript can detect a lot of things as well and build the site accordingly. But I'm not sure on whether i'll build all site pages with JS or not. So it's a good topic that maybe needs its own thread.

Definitly liking the thought of the metro idea. Possibly lfs.net would take you to a metro screen, and from there all the tabs would represent the different sections of lfs websites, for example the forum, lfsworld.
If this is what was meant by the metro design then sorry for repeating it but i definitly agree with it. But i get the thought that maybe the metro idea was going to be for multiple parts of the website.

Not really got anything to add myself at the moment, but for anyone who has good ideas, Balsamiq Mockups is a program I've been using recently which is great for throwing website ideas together. I sound like a salesman but it's not meant, just trying to help.

Quote from Victor :

mobile browser support is kind of a must yeah. I was thinking a mobile device should be detected by the server and content should be delivered accordingly, but I'm interested in hearing techniques others have used. Of course JavaScript can detect a lot of things as well and build the site accordingly. But I'm not sure on whether i'll build all site pages with JS or not. So it's a good topic that maybe needs its own thread.

Vic.. have a look / read into Media Queries. It's all done with CSS (no JS required) and detects screen size, rather than device.. so you can even test it with a normal desktop browser Also, no need for separate content either.. although you could strip out some aspects with device detection if you wished (cut down on imagery used for mobile etc).



Cheers..

Ian


PS: Interesting project

Media Queries are pretty good for some things, but because they still don't have your functionality react to the screen.. they're a bit limited. There are some Javascript libraries out there that actually couple media queries to javascript so that functionality also is altered based upon screen size.

Building everything out in Javascript can have disastrous consequences. My company had a Javascript developer who rebuilt our website. IE broke all over the place, and even when he declared everything "fixed".. stuff still broke.
That being said, that same person had built a lot of things with flaws that even me with my admittedly limited (but ever expanding) Javascript knowledge can fix and debug.

If there's people that care and know Javascript in the browser with real-world use cases (not hypothetical 'if everything worked like Webkit' land).. then it could be great, but those are my reservations about going too heavily towards Javascript.

A slight tangent... but speaking from experience

Good idea to give a fresh touch to the LFS websites.

In my vision, the LFS HUB (like Luchian said previously) should look like a 3D Sphere or 3D Cylinder, with the previews of all the sub-domains (Eg: Forum, Stats, Leagues, etc.) and by clicking one of them, you are quickly redirected to that website.

Just want to comment on two things :

3d : While great, it is not supported on all browsers (and no mobile browsers). Therefore we cannot make a site entirely in 3d. 3d can only be added as additional and optional features. Also webgl still has security issues. Some people switch it off because of that.

Metro : I like it for mobile devices. It gives you all these animated tiles that are actually very informative and invite you to tap on them. But since these tiles are on _your_ device, you know what all the tiles are. You have installed everything yourself. So when you activate your device's screen, you know what to expect.
Compare that to putting metro on a website and you'll be looking at all the tiles individually to check out what the has to offer. I think that's not very friendly. (ok maybe it's not that bad because you'll get used to it, but the following weighs heavier : )
Also, if a site looks like metro, wouldn't people think they're looking at a microsoft website?

I don't think Metro is the way to go for websites. It's just too simplistic and personal. If all sites would employ a Metro style, they'd all look the same.

Quote from Victor :

Also, if a site looks like metro, wouldn't people think they're looking at a microsoft website?

+1, it looks nice, but im sure there are better things/ideas somewhere. You could possibly interpret a metro style and re-work it for the different sites.

It doesn't have to be -exactly- metro style. I also like the idea posted here:

http://www.lfsforum.net/showthread.php?p=1753572#post1753572

With right combination of metro tyles + large fonts/simlpe graphs and tables you can achieve excellent website providing very rich information in very simple form.

I understand you want to stick to UI as a desktop interface but you don't need it with windows with min/max/close buttons, menu file, edit, etc...

By avoiding confusion with MS website you can simply forget about bright contrast colours used in default metro.

Also GitHub for Win is kind of metro app but you can definitely say it's not MS application. simple as that

Quote from Victor :

Thanks for that. Makes it much more clear.
The lfs.net/forum bit is interesting and certainly have to consider that.

The search word percentages look pretty accurate. I've got the same values here (just using webalizer - don't laugh ).

question - if domain is the same for all sites, we will just log in to www.lfs.net and then automaticly be loged in into all (forum, world,...)?

Quote from DANIEL-CRO :

question - if domain is the same for all sites, we will just log in to www.lfs.net and then automaticly be loged in into all (forum, world,...)?

Yes that would be a beneficial side effect, although as I understand it there may be a technical limitation on putting all of LFS' sites under one domain as that involves changing the server model away from individual machines to a cluster model - which would probably result in some significant recoding of existing systems.

As well as updating the site and content, have you given any thought to how a search for LFS / Live for Speed will look when found by a search engine like google.

Searching for LFS and LFS Forum on google gives 2 different looks. LFS gives one small block of text along with main site link, and minor links to Downloads, creating account, etc., whereas LFS Forum gives you link to main forum along with major links to various sections.

(There's probably a name for this type of design - no idea what it's called - but i've seen it used a lot by banks, etc).

See my image of the search result for LFS as is, and possible design copying similar search result based on LFS Forum.

Image might explain better than I can in words.

yeah I don't really know why it shows minor and major links.
If you search on google for lfs.net then there are major links. Dunno why.