Take a look at an overview of all Project: Rebirth's aspects at the Project Progression page.
Project: Rebirth, Burnopedia's first major revival program, by C ee X, Sunday April 18 th 2010
I'm starting this topic in an effort to bring back dynamism to Burnopedia's community. Project: Rebirth is a long-term program I'm initiating now which will, once completed, give Burnopedia a new face and more contents. Burnopedia has changed appearance several times until now, and time has come for it to change again. I'm expecting Rebirth to last for several months.
There are two distinct sub-projects: one will deal with giving a new appearance to the site, and the second will deal with our image resources.
Behind this Project, I'm also preparing Burnopedia for Burnout 6. Indeed, I'm afraid to realize that we focus a lot on Burnout Paradise, to the point where we could say that we are actually "The Burnout Paradise & other-older-unimportant-Burnout-games-that-we-include-just-for-the-sake-of-broadness Wiki". Frankly, this could be our title, and no one can deny this seeing how scarce and minimal our contents about previous Burnout games is. Burnout Revenge gets a little attention, then again, Revenge and Paradise are more recent than the now 9-year-old Burnout.
Get ready for a big wall of text, I really hope you will read this, this is a Wiki-wide issue that concerns each and everyone of us.
Presentation Edit
As mentioned, two sub-projects will draw-out the two main objective lines of Project: Rebirth:
- Rebirth through Redesign - The renewal of Burnopedia's appearance.
- Rebirth through Restoration - The care-taking of Burnopedia's image database.
Rebirth through Redesign Edit
Basically, I'm proposing that we change the skin of the website.
But Why? Edit
Well first off, don't you think the skin is getting old? It's not a bad thing, but I think it is time for innovation. Nowadays, a good site is a complete yet user-friendly interface with appealing colors. Our interface is more-or-less complete and relatively easy to use. However, from a purely artistic point of view, I'd say the skin is getting passable.
The site looks faded away, it lacks contrast in certain areas. What we cannot seem to achieve is this crucial effect of depth and dynamism. This is because the skin looks very generic. We have a cool working color scheme, true. But the few images we use as skin assets (elements of the skin that are actual files and not coded colors) are poorly finished, layer transitions can be distinguished, pixels sometimes pop out, image sizes are not well thought out and some areas are left blank for some completely unknown reason...
On the whole, the interface's skin isn't bad but it is far from flawless. It looks too bi-dimensional to me and I suggest we give it the third by creating new assets with special effects to liven it up, giving it a less static feel.
The thing is that, to me, the age of websites decorated simply by code-generated layouts has passed. Unfortunately, we are still part of those now defunct or restyled websites.
And How? Edit
A website's skin is governed by .CSS files. The important one is Monaco.CSS as some of you may know. Common.CSS also plays an important part for more advanced appearance tweaks. We are able to modify these files with the help of expert users.
I'm currently thinking that we ought to give depth to the skin, very literally. This will essentially be done thanks to fancy "Gloss" techniques applied to the new assets that we will create, shadows could even be added to produce a real sense of perspective.
Essentially, I propose that we redesign everything, well not quite everything, but around 80-90% of what we already have. And we can also add things too, for instance: we have not yet customized our User Mastheads (that bar you can see on User pages, with the avatar, name and edit count). Things can be done.
- Colors can be changed a little, we can keep our gray/orange color scheme, but we could darken the gray, especially the general background, the background of this very text. I'm not saying we turn it black, but darken it towards a hue closer to grayscale (#111; #222; #333; #444...). Font color will be conserved, in my opinion, white text on dark background is easier to read and, less-importantly, closer to the gaming style.
- Image Backgrounds (Site Header)
- Our header is the most important element of our skin, it had been decided to keep it displayed for all the pages, and so we must respect that decision. However, it is imperative to redesign it. As explained above, we should give it depth and a less generic appearance. Finding new and higher quality images will make it look better instantly. Brainstorming a new or altered format is the second part of the redesign: we could move certain parts of the image here and there like the title and sub-title, add effects to the logo, change the fonts maybe, etc.
- Another of my early ideas was to actually slim the image down vertically, it is actually pretty thick in comparison to other sites! Resizing it will lighten the general appearance of the skin. In a time where everything gets "Slimmer" and streamlined, having a bulky and fat header isn't the best strategy. We should keep in mind that we use it to represent the site: Burnopedia and that a new user will see that image before anything else.
- Image Backgrounds (Secondary Headers)
- These smaller images have their importance, they are found on the left, they are on the top of widget boxes and one can also be found in the main button bar (edit, history, etc). This should also be redesigned with either a repeating pattern or a refined image.
- Positioning of these assets is of utmost importance, besides the actual image, it needs to be placed thoughtfully. One might immediately think about using several image areas to create a whole image, like the GTA Wiki does it. I don't think this is a good solution. However, when going for originality it does the job really well and I'm sure we can still use this method.
- The GTA Wiki also thinks about its growing widescreen-equipped readers, the header image is actually 1900 pixels wide (In Firefox, press CTRL+minus several times to zoom out and see the full image) so even on the PS3's browser in Maximum Size display area, the entire section in which the bar fits is devoid of black areas (unlike ours). We must absolutely change the header's size so that widescreen displays don't show empty areas!
- We could give the skin appeal-O-meter a whooping boost by also working with transparency (the skin supports .png files if I'm correct) So it would be interesting to see what ideas we can think of with this in mind.
- Miscellaneous
- Rounded Edges - I think that we'll need to set up more rounded edges, especially if we plan on applying gloss effects. Square corners get old, a bit like Windows 98... This is 2010!
- Game Icons - Like here, I think that Game Icons in the top right (above the article title separator) would be a welcome addition and may remove the need to use the
game = input in our currently set up infoboxes. By pushing these images' placement farther, it would lighten infoboxes and articles, in addition to making the page look more professional and neater. Remember that a picture speaks for 1000 words!
With What? Edit
Tough question to answer alone. Burnout is the only game that showcases hot, brand-new cars, shining in the sunlight, but at the same time sponsors heartbreaking moments of ruthless violence and total destruction. I'm pretty confident that the CEO of Bugatti in Mulsheim curses this series for such shameful blasphemy against refined automobiles.
So what should we go for? Shiny and brand-new like the iconic Tempesta? Or down-right filthy and worn-out like our good old Trash Truck from back in the day? My immature mind would go for wrecked and worn-out, but my emotionally attached heart (and the somewhat reasoned part of my mind) says shiny. And indeed, I think this is the way to go. Since Burnout, CG have always focused on high-tech racing cars, researched body work and paint-jobs with awesome detail. We should definitely concentrate on polishing our appearance to be smooth and neat, making good ol' Ettore proud.
Cheesy references aside, if we are going with neat and streamlined, Gloss effects are indeed possible (and recommended). What would be our main pattern/texture?
- Imitation of a metallic or sparkling paintjob?
- Carbon fiber weaving?
- Brushed steel imitation?
- Flat colors with gloss effects? Gradients?
- Car grill imitation?
- Chrome effects?
- Leather?
I think we can actually combine some of these together (ie: Chrome and Metallic paint, gloss colors and carbon fiber). For the moment I'm only thinking about headers and bars but we can apply such effects to anything basically.
Conclusion Edit
So I've enumerated most of our current issues about the skin, and brought to you my thoughts and some ideas too. I'm sure you have plenty tucked tight inside your heads too! So why not suggest some below? Also while we're suggesting, here are several Wikis I got inspiration from and right now I'm getting 100s of ideas at a time, combining elements from some and using coding from others.
Here they are:
- GTA Wiki Good use of images and their possible locations, they also inverted main buttons and article/discussion tabs!
- Final Fantasy XI Wiki Spectacular use of glossy/hi-res icons on the right panel column, along with good exploitation of embeddable widgets (Site activity). Also note rounded corners. They also use PHP coding extensively, one notable application is their main portal table which includes several templates (just like us! except we do it in wiki/HTML that reloads the whole page when we switch tabs.)
|
- Encyclopedia Hiigara Stunning use of GIFs in button bar, overflowing with potential if you ask me! Also note the semi-transparent menus.
- Duty & Valor Very well used rounded tables, good use of assets to customize the left column!
|
- Do post you comments about Rebirth through Redesign on this page. All previous comments have been moved.
|