LCARS-based Trek wiki site concept - need critique!

[TerranRich]

Hi everybody! I just wanted to get some critique on my design of a new Star Trek wiki I'm creating (from scratch), called Memory Alpha. I know, how original.

I have a screenshot below:

Let me know what you guys think! I was thinking of having the interface stretch across the entire width (and height) of the browser. Also, I got the colors and interface design specs from http://www.lcarsdeveloper.com but if you guys have any better ideas for colors and layout, please by all means, let me know!

Making an LCARS-based resource site based on Star Trek has always been a dream of mine, and it's only now that I have enough knowledge to get it up and running.

Thanks all!

 

[tharpdevenport]

Too much color. I'd make it more like the average TNG panels.

Also, the lettering is too small on the buttons. Mabye some bigger buttons, and whe you select them, it works like the TNG computers.

Use real TNG buttons sounds. Get rid of the bad TNG movie communicator pin.

 

[Bill Morris]

What about the existing Star Trek Wiki named Memory Alpha?

Anyway, does this help?

 

[TerranRich]

I know of the existing Memory Alpha, but their site isn't done in the LCARS interface style, and I will be including non-canon information in my site. Anyway, it's really just a project to add to my personal web design portfolio, and I'm not worried about copying the name, because it comes from Star Trek, not from the existing site. ;-)

Thanks for the image, LCARS 24. See, I'm really confused about how much color to use. I can see how my interface has too much color, but I really tried to stick by www.lcarsdeveloper.com 's standards.

LCARS 24, I'll try your color scheme, and Tharpdevenport's ideas of bigger butons and text. Does anybody have any more reference pictures? The ones I find on web searches are really amateurish and use the "TNG Monitors" font and wacky colors and such.

Thanks guys

 

[tharpdevenport]

Here are some via Google Images:

Not sure where on hte ship this is from (best image)

Iso linear chips pic

Not sure if this one is real (Enterprise E) -- don't use this bad color scheme

Fake?

End Transmission

Enterprise E (Nemesis?)

 

[Mr. B]

Don't break the "back" button. No links in new windows.

 

[TerranRich]

Okay, I've recolored and resized certain elements. The numbers on the right side have been replaced by shortcut letters (Shift-Alt-...) for each one. How does it look?
[image]http://img214.imageshack.us/img214/7577/interface8bx.jpg[/image]

 

[TerranRich]

Mr. B said:
Don't break the "back" button. No links in new windows.

I'm sorry, what do you mean by "don't break the 'back' button"? And the only links that will open in new windows are external links not in the Memory Alpha LCARS format. All internal links will be in the same tab/window.

Oh, and why aren't my image codes working?

 

[Bill Morris]

The color chart I posted is not only about the colors, though. That's a screenshot from a real LCARS system that allows one to create a wide variety of LCARS displays, using its own markup language, called SFML. You can display whatever you like then take a screenshot and cut out whatever pieces you want to use with MS-Paint, save them as PNG files, then declare them in the HTML of your Web site, laid out as you please. Then you'll get fonts like those you see in the color chart, and LCARS lettering can be as large as you like. For example, the time for the LCARS clock of LCARS 24 uses characters 280 pixels tall. You can't get fonts like that with TrueType. Standard LCARS brackets can be produced in response to just a few lines of SFML code to specify screen type and colors. A few more lines gives you a title for that type of screen in 56-point LCARS font in whatever LCARS color you like, buttons, etc. The bottom line is that you can produce a better-looking LCARS Web site by letting the LCARS system produce all the LCARS graphics.

An example of that can be seen by clicking on my signature like below. That's one Web page created exactly as I've described above. It's quick and easy.

Here's a reduced screenshot of a display produced by just few lines of code, shown below the screenshot:

<sfml>
title="mars rovers">
<titlecolor=orange>
<caption="photo & text credit: nasa, jpl">
<captioncolor=violet>
<screen=split>
<bracketcolor1=mango>
<bracketcolor2=brick>
<button3label="spirit">
<button3color=mango>
<button4label="opportunity">
<button4color=lilac>
<folder="space">
<file=marsrv.txt>
<image="marsrv.jpg">
<text14 tx=132 ty=40 color=paleblue str="length: 1.6 m">
<text14 tx=132 ty=60 color=paleblue str="width: 2.3 m">
<text14 tx=132 ty=80 color=paleblue str="height: 1.5 m">
<text14 tx=132 ty=100 color=mango str="mass: 180.1 kg">
<eof>

 

[TerranRich]

I'm sorry, but I really can't see how my layout is that much different from yours. What am I doing wrong in my design?

 

[Mr. B]

TerranRich said:

Mr. B said:
Don't break the "back" button. No links in new windows.

I'm sorry, what do you mean by "don't break the 'back' button"? And the only links that will open in new windows are external links not in the Memory Alpha LCARS format. All internal links will be in the same tab/window.

Oh, and why aren't my image codes working?

When a new window appears, you cannot 'go back' without switching to another window. It's annoying and occasionally confusing to the less PC literate out there. If i want a link in a new window I can press CTRL+click.

 

[Bill Morris]

TerranRich said:
I'm sorry, but I really can't see how my layout is that much different from yours. What am I doing wrong in my design?

It's not so much what you're doing wrong in your design (other than making black text too large in relation to buttons and one instance of a gap too narrow) but when you use TrueType fonts, the rounded characters come out one pixel taller in the part with solid (rather than antialiasing) color, and small black text on a colored area comes out smudged. For printouts, resolution is much higher, and those tall LCARS fonts look great in that case. That's how they did it on Trek. But to get a good, clean display with LCARS fonts on today's computer screens takes extreme measures. Look at the fonts on the color chart. What I'm saying is that you can use those and get cleaner results than seen on any other LCARS-style Web site.

Here's another small example, emphasizing just the fonts:

 

[TerranRich]

You bring up a good point, LCARS 24. I will try your GUI program and see what I can come up with. Thanks!

 

[JoeRalat]

Well I have been working on a wiki type section on my site. http://www.okudagrams.com. But I am not ready to make it open to the public.

 

[TerranRich]

Okay, well I installed and ran LCARS 24 for a while. While it's an awesome program, I couldn't capture anything. Photoshop and Illustrator both suck at rendering text at small sizes, so I might have to use PHP code to generate text (which is what I was planning to do for the headings anyway) onto an image. Any other ideas for rendering small text?

 

[Bill Morris]

Use Control-F1 to take a screenshot. That desposits a .bmp file in the LCARS24 folder. The file SFML.TXT (accessible from LCARS [the library] or from the program editor when editing an .SFM or .MSD file) explains how to put any text in whatever font in whatever LCARS color there to capture. Or just press F9 with any SFML file displayed and look at the code. Then cut out the pieces you want to use with MS-Paint and save them as .PNG to use in your Web pages or paste them right onto the LCARS objects of the same color that you have made (using MS-Paint) after you've finished making them with Illustrator or whatever.

And about LCARS elbows, by the way, . . .

 

[tharpdevenport]

Here's another one:
http://www.webtrekitalia.it/upload/martino/lcars/tng1.jpg

 

[TerranRich]

Here is a preview of how my site will generate LCARS-style text:

http://www.xylot.net/memalpha/lcars.php?s=56&t=Memory+Alpha&c=orange

So text quality will not be a problem. Replace the s= value with point size to see rendered text at smaller values. I've also managed to figure out a way to get good-looking text: I typed it out in Word with various background colors, captured the image, added it to the site in Photoshop. I exported each individual shape from Illustrator to Photoshop, and fine-tuned everything's position to make everything crystal clear. I'll post a screenshot very soon.

 

[JoeRalat]

Um.. WHAT! Ok will this be another Lcars flash site? If you have flash and Illustrator you about 80% done. I made a whole video tutorial on how to export from Illustrator to flash. I also did one for the LCARS elbows.


Good luck on the site.

 

[Hitman]

Actually, one only needs flash...