Style
Since this site is LFS’ storefront, it needs to look nice and inviting. The first look of the frontpage when it loads will give the new user their first impression of LFS. The essence of LFS should be portrayed in the visuals of the site and in particular the front page. Excitement, Speed and Varied are words that spring to mind. Of course that can be augmented with Beautiful as well, in the way the graphics on the front page are used. But since we’re not a fairytale RPG, of course we’re not looking for curly ornaments and sprinkles. The looks should instead be focussed on tech, mechanics and action. Modernism. Cutting edge.

This look should be continued throughout the site, although the front page looks will be more elaborate than most of the other pages that contain more text and accompanying imagery. I guess you can imagine what I mean by thinking of the differences between for example the front page and the registration page.
That two real opposites though. There are other pages that should be dressed up real nice as well, like the contents pages. Many fun things can be done there like 3d views for browsers that support it.
So there’s a difference between some pages that use a lot of graphics and other pages that are just plain text. But those plain text pages should still be in the style of the whole site of course.

One more thing about the style - though each individual site should have familiar style elements, they don’t need to all look the same. But those familiar elements are important. The sites should all look like they belong to each other. So another challenge is to find the balance between (1)make a site that pops out but (2) use elements that can be reused in other sites that will be all different in overall layout (ie. not a store front).

Pages
-front page

-about : the simulation
-about : Live for Speed

-contents : overview
-contents : cars
-contents : tracks

-gallery : screenshots
-gallery : videos

-download : LFS
-download : addons

-buy LFS : license information
-buy LFS : buy license
-buy LFS : additional services
-buy LFS : commercial use
-buy LFS : license agreement

-support : manual
-support : FAQ
-support : links
-support : contact us
-support : imprint

-account : settings
-account : profile
-account : status
-account : delete

Additional pages : (directly linkable)
-log in page
-log out page
-registration page

Additional pages : (not directly linkable)
-registration confirmation page
-payment result page
-site / db down page

I like typography-based websites. The non-cluttered pages are better for viewing, in my opinion. I attached a quick mockup (I'll make something nicer when I get on my laptop.)

Here's a little rundown by what I drew:

Header: contains Logo, user information (avatar [universal to lfsf, lfsw, lfs], username, and license status), and main links. This would stay on all the pages, sorta like an iFrame.

Intro: seperated in two columns. On the left, you'd have a big title, on the right (in this example) a video. This could be for big announcements (for example, S3) or stay static with a LFS promo. When I tell my friends how awesome LFS is, I want them to go to the main page and see how right I am. The video to the right would showcase LFS at it's greatest.

News: this would contain a list of recent news that you have posted, sorta like you have now on the main page. When you click the title, you'd get the full story underneath it.

Links: more links for whatever, hit or miss idea.

Fine print: fine print.

EDIT: Added quick PSD mockup, it needs background tweaking and such, but it's a base.

This is my suggetion of a common header and my vision on how the download page should be.



I did not edit the side menu, though I would like to rearrange some of its items. I also go for a simplistic header (a bit Metroish).
The "HOME" tab is the actual lfs.net site, not sure what is the best name to call it yet.
The "USER" tab content should be similar to the one we already have on lfs.net, not plain text as on my image, but as I don't have a final idea on that I left it like that.

PS: I attach the psd file so you can see it on detail, plus I don't have any problem in people using it for their own mockups

Maybe use "DataLife Engine" (or DataLife Engine)?

Since people started posting design mockups, I’ll publish mine. It’s the one I had been working on for Victor before he made this idea public.

I post it, so people can eventually take some inspiration from that. Also, I didn’t want the design to just sit in my folder without any people seeing it.

Front Page
Track Information

Look's really clear, simple and good to me. That one could be seriously taken as one we could consider using.

Quote from Flame CZE :

Since people started posting design mockups, I’ll publish mine. It’s the one I had been working on for Victor before he made this idea public.

I post it, so people can eventually take some inspiration from that. Also, I didn’t want the design to just sit in my folder without any people seeing it.

Front Page
Track Information

Looks good, seems like you have spent quite some time on doing it. Those new features on the track screen look nice, the whole thing looks better than it is now.

But IMO it looks too similar to the one we have now with the narrow design and all, we should try something new.

Quote from Flame CZE :

Since people...
Front Page
Track Information

Good idea. I'm will want to click on the button, but I forgot what this the picture

Quote from Flame CZE :

Since people started posting design mockups, I’ll publish mine. It’s the one I had been working on for Victor before he made this idea public.

I post it, so people can eventually take some inspiration from that. Also, I didn’t want the design to just sit in my folder without any people seeing it.

Front Page
Track Information

Looks very nice indeed!

Quote from Flame CZE :

Since people started posting design mockups, I’ll publish mine. It’s the one I had been working on for Victor before he made this idea public.

I post it, so people can eventually take some inspiration from that. Also, I didn’t want the design to just sit in my folder without any people seeing it.

Front Page
Track Information

I think we should take a serious look at this one.

Quote from Flame CZE :

Since people started posting design mockups, I’ll publish mine. It’s the one I had been working on for Victor before he made this idea public.

I post it, so people can eventually take some inspiration from that. Also, I didn’t want the design to just sit in my folder without any people seeing it.

Front Page
Track Information

Looks fantastic imo! Good job on that

Quote from Flame CZE :

Since people started posting design mockups, I’ll publish mine. It’s the one I had been working on for Victor before he made this idea public.

I post it, so people can eventually take some inspiration from that. Also, I didn’t want the design to just sit in my folder without any people seeing it.

Front Page
Track Information

That looks amazing, could you maybe try a lighter coloured theme too if possible?

/thread closed

awesome Flame +1

Quote from Flame CZE :

Since people started posting design mockups, I’ll publish mine. It’s the one I had been working on for Victor before he made this idea public.

I post it, so people can eventually take some inspiration from that. Also, I didn’t want the design to just sit in my folder without any people seeing it.

Front Page
Track Information

Looks clear, smooth and refreshning. When are we going to see it up?

Firstly, thanks to all who like my design, I appreciate it

Quote from bogdani.cojocaru :

Looks clear, smooth and refreshning. When are we going to see it up?

Well, it’s nowehere near release, obviously. That is why Victor created this subforum, so people can help.

I wouldn’t say that my design is perfect, but let’s say it’s a good base. Not everything has to stay as it is, of course. But it has some nice features which are good to have there. It has more horizontal space, since the menu is now above the actual content area - actually one of the requirements by Victor. Also, the menu items can now easily be updated, while in the current LFS site, the menu items are images and since there is no PSD file to edit them, it’s difficult to add more menu items now. Also the top shared bar is alright, not intrusive but functional. However, I can imagine it to be more interactive and to have more info in it, probably with some drop-down menus or something, but that’s not important for now.

I’ve had more ideas about the design generally but I just did not get to them as I was trying to design the overall look / layouts of more pages, rather than fine-tune the details. But it kept getting more and more difficult for me to be creative enough when designing some sections.

And that’s one of the reasons why this subforum exists, people should suggest what contents should be in each page and how could it be laid out on the page, where the things should be placed. It’s hard to talk about the design when the contents isn’t thought out into detail yet, but I understand it’s something to discuss and I appreciate your comments.

We’ll see in a couple of days/weeks how this turns out

That look of yours is perfect for LFS in my opinion flame, With only one exception, and that is to have a more fluid design, Like has been discussed so that you get the full width of the screen used instead of a fixed width that you have now.

The only thing I dislike in Flame's proposal is the rigid section borders and semi-3D Glass effects, those are a bit 2006.

I will also suggest a bit more white space and overall a more airy feeling, the darkness overall is a bit oppressive. (And I assume with all this work, we are sort of reviving LFS into a more active stage, if that's the case it should really look more upbeat and has some form of visual departure from the old identity.)

It is essential to make the page reactive too in this day and age, it should work as well from 1080p to 600p

I'd say get rid of the news section and the screenshots on the main page.
The news section would work if would contain more than just development news. Be honest, it won't look good to a newcomer if the last entry is from more than half a year ago.

An regarding screenshots, today if someone wants to get to know a game screenshots are outdated, one looks it up on youtube etc. Why not integrate some league broadcast.

Flame, what about IF as you refresh the page, the car at the top of the website [in this case, XRR changes to a, well let's say UF1 ?] changes to a different one ? That would be completely awesome !

Also, I really like the video idea, it's really dope

Quote from MousemanLV :

Flame, what about IF as you refresh the page, the car at the top of the website [in this case, XRR changes to a, well let's say UF1 ?] changes to a different one ? That would be completely awesome !

Also, I really like the video idea, it's really dope

Yes, that’s how I imagine that as well, random car shown there.

Quote from Flame CZE :

Since people started posting design mockups, I’ll publish mine. It’s the one I had been working on for Victor before he made this idea public.

I post it, so people can eventually take some inspiration from that. Also, I didn’t want the design to just sit in my folder without any people seeing it.

Front Page
Track Information

My only criticism of this design is that on a modern 16:9 or 4:3 landscape shaped screen there would be a lot of scrolling involved and a lot of blank screen.

I realise scrolling isn't really a big issue when most people have scroll buttons on their mouse, but it's still a pain. Not only that, but unless you're willing to always scroll to bottom of the screen, you can miss things.

For instance, I didn't notice that the forum had new Websites Design section till about 36 hours after it was up. Wonder how many other people don't scroll to bottom of forum - worth putting new banner promoting this section on top of forum between LFS sites and league banners?

As for the portrait style layout, seems a lot of wasted space at the sides. I think the sides would be the best place to put the menus.

Even on a smartphone, I'd still rather turn it round to landscape to read than use it in portrait view.

Need to also think about including the LFS Manual and LFS Merchandise on front page?

How about banners on the side? The tabs on the top with drop downs are more useful IMO.

The banners could represent new things. So could be the new sites at first to spread the word better. However merchandise or content can be put in banners there as well.

Quote from franky500 :

That look of yours is perfect for LFS in my opinion flame, With only one exception, and that is to have a more fluid design, Like has been discussed so that you get the full width of the screen used instead of a fixed width that you have now.

I don't think a true fluid design is what we'd want. I think having a responsive design (one that mutates based upon specific screen widths).

The problem with true Fluid designs, is that you lose all control of how things actually look. Reactive design is good because you can say "under this width, this looks like this"... which restores control back to the web designer to actually make things look how they want.

Just my :twocents:

Quote from dawesdust_12 :

I don't think a true fluid design is what we'd want. I think having a responsive design (one that mutates based upon specific screen widths).

The problem with true Fluid designs, is that you lose all control of how things actually look. Reactive design is good because you can say "under this width, this looks like this"... which restores control back to the web designer to actually make things look how they want.

Just my :twocents:

this.

Also we should ignore vertical menus IMO since they are proven to be less friendly for he users. A horizontal menu with only a few items would work best.

The mockup of Flame is okay I guess, but I only like the header and footer. The whole content area does not match the nice simple and clean looks of the rest IMO.

Me having a go with a narrower and deeper page structure.

Added Ipad versions, one more minimal and one containing more functions.