LCARS Episode Guide built in HTML5 for Mobile Devices

[jayrobinson]

Hi guys, I wanted to share some design comps of the web app I'm building. The app is an episode guide for all the Trek series built with HTML5/CSS3 and JavaScript. I am initially testing on iPhone and iPad/iOS devices, but support for Android and other WebKit browsers shouldn't be too hard.

My biggest concern right now, for this _real user interface_, is the readability of Swiss911 for long paragraphs of text. I have tried using Helvetica Neue for long content, but I don't like the typographical inconsistency.

Please keep in mind this is my first attempt at creating anything in LCARS. I appreciate your input.

Best,
Jay

The following five screens were designed for an iPhone 4, with 640X960 resolution:

[deif]

hi jayrobinson

i used swiss911 also in my beginnings - ;-) the better font related to star trek is officially helvetica lt std ultra compressed (here (http://store2.adobe.com/cfusion/store/html/index.cfm?store=OLS-DE&event=displayFont&code=HLVQ20005000)). you can also use lcarsgtj3 (free (http://www.gtjlcars.de/LCARSindex/LCARSFONTS.htm)). hope, this was helpful.

[Kmpr´rak]

Looks interesting!

[jayrobinson]

Deif, Thanks for letting me know about Helvetica. Every site says something different, but I'm glad to know I now have the right one, and the kerning is far superior.

Kmpr'rak, I'm glad you like it!

I've done some more screens showing the iPad display, and using the official font for most headings and buttons. I did find reach a compromise I'm happy with for readability: Long paragraphs of text and a majority of the content area is using Helvetica Neue regular, with the condensed bold variant being used for small-caps. Ultra Condensed is still used for the larger headings and buttons, and never mixed into the content alongside the regular Helvetica Neue. For an example, compare the attached iPhone screen with the one attached previously. It's infinitely more readable.

For the attached iPad comps, keep in mind I was just testing how longer episode titles fit in the list view (DS9 has the longest titles) so that's why there's a lot of mismatch.

And with that caveat, any and all comments accepted! :)

[Jesse]

It looks absolutely great. I'd love to get it on my iPad when it's done. Do you think you could post a zip of the HTML in progress?

P.S. When you're done, I'd be happy to host it on my server.

[Kmpr´rak]

Would like to see some progress here!

[Adge]

Yes, cool work.

[Starship Drafter]

I say very nice, too. Also asking if it could be posted in zip when finished? I would like it on my iPad.