A New TBL Site Design: XG2

All of the latest news on The Blue Line and Eastside Hockey Manager. Keep up to date with the TBL/EHM community!
User avatar
archibalduk
TBL Admin Team
Posts: 20372
Joined: Tue Jul 06, 2004 8:44 pm
Custom Rank: Seaside + Fruit Juice Mode
Favourite Team: Guildford (EPL) / Invicta (NIHL)
Location: United Kingdom
Contact:

A New TBL Site Design: XG2

Post by archibalduk »

The Blue Line is going to be getting a major upgrade and facelift!

We have decided that the site could really do with being redesigned so that we can all get the most out of the site has to offer. The current design (which we named "XG") has been in use since August 2006. A lot has happened since that time (despite EHM being put on indefinite hiatus) and the site has really grown. I've been wanting to redesign the site for quite some time but have been hesitant because I was expecting interest in EHM and TBL to decline owing to SI Games ceasing to develop EHM. In fact, almost the opposite has happened with EHM and TBL being as popular as they have ever been - maybe even more so. I think this is largely thanks to things such as the Challenges and Lidas' fantastic roster updates. This, we think, justifies taking the time and the effort to redesign the site.

Before I start explaining the aims of the redesign, I want to explain why we've called it "XG2". When designing XG back in 2006 (development started in February 2006 and was completed and launched in August 2006) we decided to call it TBL: Next Generation. This name was shortened to Next-Gen and finally to XG (the X sounds a bit like "next"). Thus this new version is simply XG2. It's a lot easier to type "XG2" than having keep typing out "the new site design" - so that's the logic behind the odd name!

We have decided to redesign the site because the current design (i.e. XG) has evolved so much over the past three years. Although at first it felt cohesive, the rate at which XG has evolved and grown makes it feel more like a forum with some modules attached rather than a single cohesive site. One of the main aims of XG2 is to make the site feel as one again. We aim to make it a lot easier to add new features/pages to the site with XG2. You will see from our current header image, we only have enough room for 12 buttons. This makes it hard to add content without having to prioritise and replace buttons. This limitation with the navigation buttons means that some pages are not as accessible as they could be.

The site could really do with a facelift, too. The current design is based on phpbb2 (the forum software the site runs on) which is several years old (originally designed in 2001). Phpbb3, which was released in late 2007, makes phpbb2 look very dated. We have never upgraded to phpbb3 because it would mean losing almost all of the functions we've added to the site (e.g. the Challenge Stats section, Hall of Fame, TBL Points, Downloads Database). In fact, the site would return to just being a basic forum. Modifying phpbb3 to have all of the features of TBL would be extremely time consuming and it would not be possible to reinstall some of the functions we use.

So, in the process of redesigning the site, it seems right that we give it a new look as well. However, when doing so, we do not want to stray from the basic Blue Line theme. In other words, although the new layout will look sleeker and be easier to navigate, it's still going to look like TBL.

So what sort of features are we looking to add/remove/change? Here is a basic summary of the sorts of things we're looking to do (this is by no means a comprehensive list of everything):

General Layout & Navigation
  • Implement a drop-down menu system so that every section of the site can be accessed from it.
  • Improve the Online EHM coverage of the site.
  • Give the site a more contemporary look. Less clutter. However, the whole redesign must keep to our basic blue theme and use the same main blue colours.
  • Remove the orange text that appears as headings on many forum pages.
  • Make the site feel much more integrated and cohesive. At the moment, the site feels like a forum with modules attached to it.
  • Make the search feature a lot more visible. Implement a search box into the navigation menu.
  • Very long strings of text no longer make forum posts stretch too wide, breaking the layout.
  • Make it so that unread posts remain with the unread icon until you actually read them. Currently, the topics lose their unread status after you first visit the site even if you haven't read the post. A number of users have requested this feature. Add the ability to mark posts as unread.
Blogs
  • At the moment, the site feels like a forum with modules attached to it. The Blog feels particularly isolated. The blogs need more coverage so that users are rewarded for using the blogs. Users would read blogs more if they could see what they were about.
Challenges
  • Make the Challenge Forum and other Challenge sections feel more integrated and less like bits added on to the forum.
  • Improve the layout of the player stats page of the Challenge Stats and also the list of previous Challenges.
  • Somehow link the blogs and the Challenges together. I think maybe we need some sort of "Challenge Central" page which would be the main page for the Challenges. It could have details of the latest Challenge and leaderboard (or just the top three) as well as useful links and info (latest rules changes, blog posts, forum posts, etc).
Home Page
  • Redesign the Home Page so that it is the main starting point for all users (both new and old) each time they visit the site. The basic features of the home page are great but I think more could be done to somehow attract users' attention to things like the Challenges and the Blogs.
  • I was thinking we could display the latest Challenge leaderboard on the home page. Maybe just the top three or something like that?
  • Navigation tabs on the Home Page so that a lot of info can be quickly and easily accessed. This will hopefully make the Home Page the first point of call when visiting TBL - regardless of whether the user is new or old (including Mods).
Research
  • Somehow make it easier for users to share their research for Lidas' rosters. This is such a big part of keeping EHM alive that we really need to better facilitate research. I'm not sure how we could do this. We could have a free-for-all forum so that all users can post updates (probably just transactions, retirements, etc rather than attribute changes) as well as the private forum we currently have. Maybe Lidas could tell us how we could help.
User Profiles / Interaction
  • The user details to the left of each forum post and the User Profiles are starting to look particularly cluttered where users have won a number of trophies.
  • Possibly improve the trophies section. Could we use icons (gold, silver, and bronze trophy icons) with tooltips describing what each trophy was won for?
  • Integrate FaceBook into the site. It's such a good way of users keeping in touch and reminding users who haven't visited in a while to come back and check us out. Just a link in each user profile on TBL to their FaceBook profile should do the trick.
  • A more active rewards system sounds like a good idea of making things more interactive - and will hopefully encourage users to write blogs, guides, addons, etc. As B72 said, we don't get that many guides submitted but there's clearly users out there who would be capable of writing them. Users can give "thanks" to a useful post/file/blog/article. These "thanks" will contribute to the TBL Points system.
Miscellaneous
  • Update the "About Us" page. Change it so that it's a forum post rather than a standalone page as this will allow us to update it much more easily.
  • Perhaps remove the Image Gallery or at least reduce its use? It feels like a waste of server space especially when PhotoBucket, etc are much more effective.
  • Make the Downloads section easier to navigate. Perhaps some sort of navigation tree at the top or side of each page so that users can quickly get from one section to another.
  • Make the Knowledge Base and EHM Guide less like a forum and more like individual site pages.
  • A facepack database. A searchable database of every single face pack so that users missing a face picture can find which face pack has the picture they want. I know I always find it a pain wondering how I can find which pack contains that one NHL player for whom I don't have a pic
Hopefully the list above will help you see the sorts of things we're trying to achieve with XG2. The design work has already gotten under way and we have already made quite a lot of progress. I wouldn't want to commit to an exact date when we will be releasing the new design because it depends greatly on how busy I am (my job can get quite busy at times). It's a case of it being ready when it's ready! But I guess an estimate of between 4-12 months would be reasonable (if I continue at the rate I'm going then I'd say it will be much quicker than 12 months).

The purpose of announcing this now is to get suggestions from anybody who wants to do so. We want to keep the TBL community involved in the redesign and so we encourage everybody to have their say.

In the meantime, here is a sneak peek of how things are shaping up (note this is a very early design and it's far from complete):

Image

I plan on posting relatively regular progress updates with screenshots as work progresses.
User avatar
getzlaf15
Hall of Fame
Posts: 1932
Joined: Sun Jan 28, 2007 9:33 pm
Custom Rank: TBL Update Team

Post by getzlaf15 »

Wow! I can't wait to see the new finished product. Great stuff Arch! =D>
User avatar
bruins72
TBL Admin Team
Posts: 14513
Joined: Fri Jan 20, 2006 3:13 pm
Custom Rank: Challenge Guy
Favourite Team: Boston Bruins
Location: Taunton, MA

Post by bruins72 »

Archi has quite a a full plate with this new design but it's going to result in a much better TBL. I'm really excited about this!
User avatar
Andyjayp
TBL Mod Team
Posts: 707
Joined: Fri Feb 22, 2008 2:22 pm
Favourite Team: PHI Flyers / Cardiff Devils
Location: Cearphilly, South Wales

Post by Andyjayp »

Hey, I'm looking forward to this release. Its beginning to look good!!

Just a few small suggests...

Challange Section
-I feel that below the top three ranking of the challanges there should be a link that links to a table of the full rankings allowing people to see where they are. As I know I would like to see where I am compared to other users.

Download Section
-Might be a good idea to sort the facepacks out in season, as well as region. Allowing people to easily find the newest season pictures for there database's.

-With Lidas' new DB coming out in the fall, it might be a good idea to sort the facepacks due to the database for which they are designed. To allow users to find the revilant facepacks for the DB's they use.

-It might be a good idea to seperate them in card type, i,e TBL cards, Misc Etc. To also allow users to easily find the cards they would like top download.

I know this will could lead to alot more complicated download section, which could lead users feeling lost and confused. But if the imposed bavigation bar is put on the side, then it could be a much easier and quicker way to find the files you are looking for.

Sorry for my two cents.

If you need a hand at doing anything, just give me a shout. I'm not very knowledgeable at phpbb3, but I do know flash and some css. So I don't know how helpfull I would be. Unless you wanted a fancy flash animation at the start of the screen, then I'm your man!!


Anywho, Keep up the good work.
Andyjayp
User avatar
Andyjayp
TBL Mod Team
Posts: 707
Joined: Fri Feb 22, 2008 2:22 pm
Favourite Team: PHI Flyers / Cardiff Devils
Location: Cearphilly, South Wales

Post by Andyjayp »

Just thought of another thing... Why dont you incorperate the "create a star" challenge thingy ma bobby into the new design, or have you thought of that all ready!!
User avatar
bruins72
TBL Admin Team
Posts: 14513
Joined: Fri Jan 20, 2006 3:13 pm
Custom Rank: Challenge Guy
Favourite Team: Boston Bruins
Location: Taunton, MA

Post by bruins72 »

I believe we are planning on having the facepacks organized somewhat like how you suggested and for exactly that reason. With so much database work being done, we need to organize the facepack downloads so people can get the cards for the DB they are using.

The site re-design is Archi's baby but I think an opening flash animation could be kind of neat if it's not too heavy on bandwidth. Something simple maybe? I kind of like that idea.

I don't think CAS is going to be dropped in the site re-design. That's a pretty popular feature.
shooter_80
Hall of Fame
Posts: 1998
Joined: Sun Mar 15, 2009 1:50 pm
Custom Rank: DMHNL Veteran

Post by shooter_80 »

Sounds awesome - I look forward to seeing it. Great work Arch!
grits207
Fourth Line
Posts: 482
Joined: Mon Sep 01, 2008 5:47 pm
Favourite Team: Toronto Maple Leafs
SBHL Team: Los Angeles Kings
Location: Fredericton, N.B.

Post by grits207 »

Very cool.

I really appreciate the amazing work you guys do here. I am 99% sure I would have stopped playing EHM long ago if it wasn't for this site.
User avatar
bruins72
TBL Admin Team
Posts: 14513
Joined: Fri Jan 20, 2006 3:13 pm
Custom Rank: Challenge Guy
Favourite Team: Boston Bruins
Location: Taunton, MA

Post by bruins72 »

grits207 wrote:Very cool.

I really appreciate the amazing work you guys do here. I am 99% sure I would have stopped playing EHM long ago if it wasn't for this site.
Me too! I'm also thinking I'd be getting pretty bored with the game by now if Lidas hadn't started doing his updated rosters.
User avatar
archibalduk
TBL Admin Team
Posts: 20372
Joined: Tue Jul 06, 2004 8:44 pm
Custom Rank: Seaside + Fruit Juice Mode
Favourite Team: Guildford (EPL) / Invicta (NIHL)
Location: United Kingdom
Contact:

Post by archibalduk »

Andy, that's ever so much for your suggestions. I was really hoping that by involving the community in the new site development, we'd get some constructive feedback and that's exactly what you've gone. :thup:
Andyjayp wrote:Challange Section
-I feel that below the top three ranking of the challanges there should be a link that links to a table of the full rankings allowing people to see where they are. As I know I would like to see where I am compared to other users.
That makes a lot of sense. We hadn't thought about that. I'll add it to my task list.
Andyjayp wrote:Download Section
-Might be a good idea to sort the facepacks out in season, as well as region. Allowing people to easily find the newest season pictures for there database's.

-With Lidas' new DB coming out in the fall, it might be a good idea to sort the facepacks due to the database for which they are designed. To allow users to find the revilant facepacks for the DB's they use.

-It might be a good idea to seperate them in card type, i,e TBL cards, Misc Etc. To also allow users to easily find the cards they would like top download.

I know this will could lead to alot more complicated download section, which could lead users feeling lost and confused. But if the imposed bavigation bar is put on the side, then it could be a much easier and quicker way to find the files you are looking for.
Bruins72 brought this issue up as well. Not only is this a difficulty for the Downloads section but it's also a problem for the Facepack Database. If I remember correctly, we were thinking of arranging the facepacks by how many years are added to the year of birth. As you said, they will then need to be organised into card type (TBL card, action shot, mug shot, etc). This is going to make things quite complex - especially for new users. Is there anything anyone can suggest to simplify things?

With regards to Create-A-Star, I think we'll be creating an individual section in the site for this.

Thanks for your offer of help. I think at the moment we have things under control. I've got the html/php/css/sql and CatchUp and Stinson are doing the graphics. The only help we need at the moment is feedback and any suggestions.
User avatar
Andyjayp
TBL Mod Team
Posts: 707
Joined: Fri Feb 22, 2008 2:22 pm
Favourite Team: PHI Flyers / Cardiff Devils
Location: Cearphilly, South Wales

Post by Andyjayp »

Hey, no worries on the feedback.

I'll get back to you with possible ways of organising the Database. At the mo I'm a tad bit busy watching the remake of the eye!!
User avatar
watts555
Minor League
Posts: 295
Joined: Thu Nov 06, 2008 2:00 am
Favourite Team: Toronto Maple Leafs

Post by watts555 »

Yea guys.. am excited to see how the site turns out :)
User avatar
joehelmer
TBL Mod Team
Posts: 3483
Joined: Tue Jan 25, 2005 4:45 pm
Favourite Team: Djurgården (SHL)
Location: Sweden

Post by joehelmer »

I like very much, great work with it! =D>
User avatar
Andyjayp
TBL Mod Team
Posts: 707
Joined: Fri Feb 22, 2008 2:22 pm
Favourite Team: PHI Flyers / Cardiff Devils
Location: Cearphilly, South Wales

Post by Andyjayp »

Wouldn't it be easier to organise the database by type (i.e. TBL cards, Mugshts, etc), then by season/league, then by league/season (depending on which way you decided to go). On the subject of database type, couldn't you just have one page per pack with three to four links (one for each database LidasDB 1.3, TBL:DB 1.5, LidasDB2.0 etc. if the relivant files exist that is.

So the navigation would function a bit like:

-Card Type
-Saeson/League
-League/Season
-Card pack page with details and a link for each DB if the files exist.


The only problem is, although it will be easier of the user to find the file they are looking for it will take alot of server space. Unless you use something like rapidshare to host the files.

How are you going to implement a search option, which i feel is a very good idea?? Are users who upload files going to need to index the players included in the pack?? Is there going to be a seperate forn to type in players names when yo upload files??

Sorry for the questions.
Andyjayp
Deleted 25-08-19

Post by Deleted 25-08-19 »

Yea finally, even ehmfinland had more styles. ehmfinland is now stopped :(
User avatar
archibalduk
TBL Admin Team
Posts: 20372
Joined: Tue Jul 06, 2004 8:44 pm
Custom Rank: Seaside + Fruit Juice Mode
Favourite Team: Guildford (EPL) / Invicta (NIHL)
Location: United Kingdom
Contact:

Post by archibalduk »

Update 1: General Layout & The Home Page

Now that I'm back from my summer holidays and I've settled back into work (both my real life job and the TBL site redesign), it's about time I posted an update so that everybody can see how we're getting on. These updates are being posted retrospectively; in other words I am posting about parts of the redesign that were completed some time ago. This is so that I can skip the less interesting parts (e.g. I bet nobody is really that interested in how the new design Members List looks like!) and post about the most pertinent parts of the redesign.

I am now about 16.7% of the way through redesigning the 145 pages that make up the front end TBL site. When I've reached 100% I will then be going back through some of the pages and adding new features and doing some fine tuning. Please note that I will not be working on icons/buttons for the site until I have finished redesigning each page. Thus you will see that icons/buttons/etc are missing, old, or just text in each screenshot.

As I have mentioned previously, we are looking to achieve a more modern design which is a lot more accessible and looks sleeker. We are taking a great deal of inspiration from phpbb3 whilst also sticking with our blue theme. Thus we're looking at using rounded corners in order to make things easier on the eye (as opposed to the square boxes with the dark blue outline and orange text we use at the moment. I hate the orange text!). For the modules on the home page (i.e. the page with the site news), we were looking at doing something like this:

Image

There isn't much difference between the three boxes. Box A has no diving line between the dark blue header and the main body, Box B has a one pixel white dividing line, and Box C a two pixel line. We opted for Box B. We changed the header so that it has a colour gradient to give it a more 3D look:

Image

So this is how the Home Page currently looks. It still needs a bit of tweaking in terms of the positioning of the modules (i.e. the small boxes on either side of the page) but it's very nearly the finished design.

You'll see in the previous screenshot that the header (i.e. navigation bar and header image) has changed. The header image is only temporary; the final design will be quite different. CatchUp and Stinson will be working on the design of header image at some point in the future. It won't be anything drastically different; just something that blends in with the new design a bit better. We also have a new logo which better blends in with the design (our current logo is too pale for the new design). Again, it's not drastically different, just updated.

The navigation bar is a lot better than our current navigation bars. We have a search box in the right so that it is a lot easier to access threads on topics. You might see that the left hand part of the search box is the wrong colour; this is because I haven't finished designing it yet.

The menu in the navigation bar drops down like this:

Image

This will allow every page within the site to be access from here. With the current design, we only have enough room for so many buttons in the nav bar and so we can't link to every page. The drop down menus will allow us to have as many links as we like.

Currently the highlight colour in the drop down menus is a bright green. It does look quite funky but it doesn't really match the colour scheme of the site, so it needs to be changed. If anybody has suggestions as to what colour the highlight colour should be then please let me know.

Something I was meaning to mention earlier was the font for the new design. There are a number of standard fonts which all web browsers support (see screenshot below) and so it is best to use one of these in order to ensure compatibility with all browsers. Currently we use Verdana but we're considering using Trebuchet MS. Having done some testing, I found Trebuchet to be a bit unclear without making the text larger. So for the time being I am using Verdana but I am considering making a design with Trebuchet so that users can choose which font they want from their User Profile Settings.

Image

So that's all I have to update you all on at the moment. As always, please give me any feedback or suggestions you have about any aspect of the site design. I really want to get everybody involved in this so that it is "our" site design rather than just "my" design. I'd particularly like your suggestions about the layout of the Downloads section (I mean the layout generally rather than the organisation of the files) as I plan to work on this section this week. I was thinking of reintroducing the ratings system so that users can rate each file out of five stars. I also want to make it slightly easier to navigate between categories and make the file listings clearer.

In the next update I'll be showing you how the new forums and threads/posts will look. Here is a sneek preview:

Image
User avatar
archibalduk
TBL Admin Team
Posts: 20372
Joined: Tue Jul 06, 2004 8:44 pm
Custom Rank: Seaside + Fruit Juice Mode
Favourite Team: Guildford (EPL) / Invicta (NIHL)
Location: United Kingdom
Contact:

Post by archibalduk »

I have re-uploaded the images in the previous post as it seems they weren't displaying.
User avatar
archibalduk
TBL Admin Team
Posts: 20372
Joined: Tue Jul 06, 2004 8:44 pm
Custom Rank: Seaside + Fruit Juice Mode
Favourite Team: Guildford (EPL) / Invicta (NIHL)
Location: United Kingdom
Contact:

Post by archibalduk »

Something I just received from A9L3E by PM:
A9L3E wrote:
archibalduk wrote:If anybody has suggestions as to what colour the highlight colour should be then please let me know.
I think that light blue would be a good colour.
User avatar
batdad
The Great One
Posts: 12616
Joined: Thu Aug 17, 2006 7:46 pm
Custom Rank: Mr Technology
Favourite Team: Syracuse Bulldogs.
Location: Look behind you, you peon

Post by batdad »

I have not been in here and had not seen this. Archi you old warrior...this looks awesome!

I actually kind of prefer the Trebuchet, but the Verdana looks solid too. Not sure where you are now as this is from some time ago....

Wondering if there is a way you can make the forum headings and subheadings (the white text in the blue background) stand out a little more without making them gaudy. I like it as it is, but nothing wrong with improvement. Stuff like "Off the rink" looks a little dull. But I still love all of it nonetheless.

I like the bright green drop down hiliter!! Mu old eyes can see it.

Keep up the great stuff.

:-D
selne
Second Line
Posts: 621
Joined: Wed Mar 28, 2007 2:58 pm

Post by selne »

batdad wrote:
.. I like the bright green drop down hiliter!! Mu old eyes can see it..

:-D

White, blue and bright green.. that's the Canucks right? :-D
User avatar
archibalduk
TBL Admin Team
Posts: 20372
Joined: Tue Jul 06, 2004 8:44 pm
Custom Rank: Seaside + Fruit Juice Mode
Favourite Team: Guildford (EPL) / Invicta (NIHL)
Location: United Kingdom
Contact:

Post by archibalduk »

Thanks Batdad :thup:

Most of the Mods like Trebuchet too. At the moment I'm going to stick with Verdana because I think it is easier to read on different screen resolutions. However once I complete the design, I am going to create a Trebuchet version as it has had a lot of positive feedback. Expect the Trebuchet version to be released within a month of the new design going live. Users will then be able to choose which font they want from their user preferences page.

As for the Canucks green (well pointed out, Selne!) I don't know whether that'll stay in the final version. From a design point of view it doesn't really go with the colour scheme of the site (like the orange header text we have on the current design). Having said that, it really helps to make the menu stand out so perhaps it will stay in afterall. I'm going to try out a few colours and then perhaps we could have a vote. Bruins72 has suggested a Bruins gold colour but then he would, wouldn't he!! :D

I see what you mean about the white text not standing out quite enough. I'll see if I can make it clearer somehow. :thup:

Apologies for the lack of updates recently. The past two weeks have been real busy because of work so I haven't made as much progress as I'd like to have recently. I'm currently 30% through redesigning the 120 pages that we use on the site. I'm dedicating today to XG2 and hope to complete a further 12 pages to bring me to 40%. This initial redesign stage is the bulk of the work. After this stage I will be adding the new features and pages, adding new graphics (CatchUp has updated the TBL logo) and touching up anything that needs improving (such as Batdad's suggestion to make the white table text stand out more).

I'll see if I can post some more screenshots for you all within the next few days.
User avatar
Andyjayp
TBL Mod Team
Posts: 707
Joined: Fri Feb 22, 2008 2:22 pm
Favourite Team: PHI Flyers / Cardiff Devils
Location: Cearphilly, South Wales

Post by Andyjayp »

Keep up the good work.

on a different note 3 posts till I hit 300 posts!!
User avatar
Reynaldo28
Minor League
Posts: 246
Joined: Mon Oct 13, 2008 5:25 pm
Custom Rank: Most Random Thread Ever Award 2009
Location: Newcastle, England

Post by Reynaldo28 »

Just posting to ask how this is going, need any help with new graphics or anything of the sort?
User avatar
archibalduk
TBL Admin Team
Posts: 20372
Joined: Tue Jul 06, 2004 8:44 pm
Custom Rank: Seaside + Fruit Juice Mode
Favourite Team: Guildford (EPL) / Invicta (NIHL)
Location: United Kingdom
Contact:

Post by archibalduk »

It's going very well thanks. I haven't posted screenshots in a while because I'm spending all my time working on the site. I'll post some new shots this weekend if I find the time :thup:

Thanks for the offer of help. Stinson and CatchUp are doing graphics but I'll let you know if we need extra help. I'm all up for this being a community project :thup:
User avatar
Reynaldo28
Minor League
Posts: 246
Joined: Mon Oct 13, 2008 5:25 pm
Custom Rank: Most Random Thread Ever Award 2009
Location: Newcastle, England

Post by Reynaldo28 »

Great to hear :)

I hope we can use it very soon :D
Post Reply