Design idea

[endless-sky]

I've been playing around with ideas for how the game's "design language" could be carried over to a website. My first thought was to just use the same exact UI elements, but for a website it's really hard to do a white-on-black design that doesn't look tacky, especially if it's got a lot of text.

So, I came up with this instead (just a one-page mockup; the links don't go anywhere):

http://endless-sky.github.io/new/

I'd be interested to hear what people think of that design. I kind of like the idea of the website being a "light side" mirror of the game's look, so there's continuity but also a clear distinction between the two.

(I also rewrote the introductory text from the current website to form a bit more of a narrative rather than the random assortment of screenshots that I have up there right now.)

[ReimeiSky]

Dear god. It's beautiful.

[kikotheexile]

Ignore earlier statement. (now deleted)

This is pretty.

[wispborne]

Disclaimer: I'm not a designer.

Suggestions:

• At first glance, it seems a bit barren, and the small black picture in the top-left seems out of place. I think both could be rectified by moving the navigation to the top-left instead of the top-right. I'm curious about the reason for putting it in the top-right, actually; it seems counter-standards.
• The center logo (which is awesome btw), seems a little squished. Maybe it could be a little smaller, too, so the text content is higher.
• For some reason, the menu background color is a little icky. But maybe that's just me.

Other than, I really like it! The layout is nice, the ES-type accent images are cool and fitting, and it looks way better than roughly 99% of other open-source websites. It's clean and uncrammed.

[thorndeux]

Also not a designer, but here goes:

Overall, really like it, especially the ES-feel of the navigation and lower left ornament.

• I like the ES-style elements themselves, but on larger screens they are too disjointed and there is too much white space for it to create an integrated, unified look. You might try a thin frame around the main content, in the same style and background as the navigation element.
• I don't mind the navigation on the right and don't think swapping it to the left will fix the problem mentioned above.
• I agree with @davidwhitman that the center logo doesn't quite work as is. It pushes the text too far down. I also don't think the 'endless sky' element with the ship in the upper left corner fits with the other elements stylisticly, as it is in color and detailed, while the other elements are black and white and abstract. I suggest to remove the center logo and move it to the left, replacing the ship in the upper left logo (like in the ES loading screen, but a bit brighter and smaller).
• Also not completely convinced by the navigation background color, but the only alternative I see is to leave it white (or maybe a bit darker shade of gray).

[endless-sky]

Here's an updated design, taking some of your comments into account. I took out the "title" image and made a new one that's just the compass and the title, and shifted the navigation to the other side (mostly because the new title image looks better on the right):

http://endless-sky.github.io/new/version2.html

I'm still not sure if I like the "doodad" in the bottom corner, or if it just makes the design more cluttered.

[wispborne]

Gf stole my laptop but it looks damn fine on the tablet. Nice!

[thorndeux]

Nice, I like it even better than the first version. Something seems to have gone wrong with the cropping of the ES logo, though - the first 'E' of Endless Sky is missing for me.

Edit: I do like the 'doodad'. Not so much in combination with the ES logo, but once you scroll down a bit, it is a nice counterweight to the navigation menu.

[CodeDraken]

It's crisp and clean I like it, much more than the current one. Here are my thoughts, but I'm no expert designer either :smile:

• I think the side menu is best on the left side. That seems to be where most sites keep one (if any sidebar at all) and most users would be used to it.
• The logo being at the top right seems out of place. Maybe use a simpler, mostly text header and add the logo to the sidebar.
• The doodads are definitely a bit distracting, especially if someone tries to view the site from mobile or any smaller screens.
• Increase the font sizes. Around 18 pixels for paragraphs,
• I've only looked at the Google Chrome inspect, but it looks like it would be very hard to tap links on the side menu on small screens.
• Maybe add a footer with some links on that as well. As a user I read from the top to bottom then it just ends with blank white background. My thoughts were I wanted to download or view more info. It's more work looking for a download somewhere as a link in a paragraph or on the sidebar. Put a call to action there too.
• Try to include some info that talks about how this game is open source, there's a great community that creates mods, etc.
• Add a little bit more color: for example on the sidebar add some hover effects for the links, etc, but overall keep the minimalistic light design.
• Not sure how I feel about the sidebar color / style

edited

[ReimeiSky]

will refrain from commenting, mostly because I liked the first design more :| of course, like everyone above me, I'm not a designer either :P

[kikotheexile]

I know you don't want to hear this, but pretty as it is I still feel that - for the record - we should have an outside hosted endless sky website as a front end.

That said, if you really, really want to keep it on github, this will work, you just may want to add more color.

I am something of a designer, i just dont do web design professionally.

[CodeDraken]

@Bladewood You should definitely comment then, otherwise it's a bit biased if everyone says they like design 2 and the people who like design 1 better don't say anything.

@kikotheexile I don't really see the need for an external front-end.

[kikotheexile]

Just extra features on an external front end, including an endless sky domain name. That's all. Nothing more than that.

That is my only reason for stating it should have an external front end. Easier to direct people to it, and less scary for non-github users.

Edit: I should also state that I actually really do like the design, the first design and the revised designs, but more color would help break it up a little and make it feel less bland/scary

[ReimeiSky]

Putting my view here, keep in mind this is my own personal opinion, I do not represent the Design 1 group, etc...

• I don't think the compass image of the website should be in the corner, I think it should be in the center, since that image represents the whole Endless Sky game. Also, like @thorndeux said, it's cropped improperly on my side.
• I think the menu and the little doodad in the bottom left/right corner should be on the same side (I don't care which, really), with another distinct doodad on the other side, just like in the jobs screen and the map. Or, we could have the menu and said distinct doodad on one side, and the first doodad on the other side... or something...

[thorndeux]

Gotta disagree with @evan153 and @kikotheexile: I like the low-color, minimalist, clean look.

Also don't think an external website is necessary - at least should not be a priority. The player base is too small at the moment and github may be a better place to encourage people to contribute to development.

On smaller screens the screenshots are layered in front of the navigation and doodad elements and the text vanishes behind them (on Firefox/Windows 10): On my phone (Firefox/Android) it wraps as it should:

[CodeDraken]

@thorndeux Yeah, I meant keep the minimalist design, but add a little bit color / style on some parts. I edited my post.

[kikotheexile]

The player base is too small at the moment and github may be a better place to encourage people to contribute to development.

According to steamspy: Owners: 385,724 ± 15,787 Players in the last 2 weeks: 9,317 ± 2,455 (2.42%) Players total: 304,074 ± 14,018 (78.83%) Peak concurrent players yesterday: 175

That's only counting steam users, not counting people who use directly from source. Games got a lot bigger a fanbase than most people expect.

Also, im saying a little color to break it up, make it feel warmer. Not saying that it needs to be rainbow and unicorns.

[thorndeux]

Also, im saying a little color to break it up, make it feel warmer. Not saying that it needs to be rainbow and unicorns.

What, no unicorns? :D

[kikotheexile]

Scottish national animal. I have no issue with unicorns. I just don't think they would fit on this site.

That said, putting colored boxes around the photos would be enough to break it up a little. Orange for republic, blue for merchant, etc. With the minimalist design you could almost do it in a neon-like dropshadow. Adds a little interest to the eye, makes the site feel warmer.

[endless-sky]

The title was broken in version 2 if you viewed it on a computer that didn't have the Ubuntu font installed; I just fixed that.

In terms of hosting, it's possible to register a domain name and have it point to the GitHub page, which would mean only paying for the name registration (a few dollars a year) rather than for hosting.

[kikotheexile]

True.

[wispborne]

I really like the newest iteration. The bottom-right doodad (that word always makes me think of the Warcraft III map editor) could be a bit more intricate to avoid looking plain, but I like having it there. Perhaps fade it a bit if you think it's too distracting.

On wide screens, the screen looks kind of empty. It could be made fixed width, or some extra content could be added. Maybe a little widget of the latest activity and/or commits against master? Or @endless-sky's Twitter account :P like all the 'cool' websites these days.

I agree with @Bladewood that the title may be too out of the way. What if the title was centered again, as in revision 1, but the logo was made tiny and just used to separate "Endless" and "Sky"? And keep the larger version of the logo in the top-right without the text (because the logo is really nice).

For color, the little circle thingy in the center of the logo may be a candidate for coloring? ES doesn't have a clear color palette, other than black and white, which makes it a bit tricky perhaps. The colors used for shield and hull are good, though, and could be used to color the logo. I may take a swing at it after work, and speaking of which I really need to do some of that instead of this...

[CodeDraken]

I was thinking a widget would be good as well...and I also should be doing some work lol