New website for godot 3 about godot-website

[djrm]

throwing more ideas

[semirix]

Here is another design for the front page. I refrained from making the other pages to gauge whether this one was on the right track. I feel like this is more in the spirit of what we're going for in terms of balancing professional and accessible.

[djrm]

closed by f69d1ca

[pcvonz]

Here is my (very much a work in progress) braindump and thoughts about the redesign:

In the above image I have small section devoted to the palette and type (upper right). We should be expanding these guidelines because eventually they could turn into something similar to what (mozilla has)[https://mozilla.ninja/]. I did create a few half hearted mockups of what the landing page could look like, but those were quick throwaways to test some layouts with the current design system.

This early in the game I think it’s more useful to create style tiles instead. Once we get an established direction it could be a great opportunity to try out a tool like Pattern Lab to create a “pattern driven” interface (think of creating a mini godot-themed bootstrap). The styleguide could then be used in many more places – the asset store, print, Godot itself. A pattern driven interface would be easy to contribute to since each component is self contained, annotated, and if we use Patternlab we’d know what page each component is used on so testing could be easier. Take a look at the rather ugly Pattern Lab demo to get a sense of what I’m talking about here.

Aside from creating style tiles in the beginning, it’d be useful to do some Information Architecture. On the left side of the page I devoted some time to breaking down the Unreal and Unity landing pages. This can give us some great insight into the research they’ve done into what their audience (our audience!) wants to see first. We should also think about reorganizing our main navigation. Card sorting is a very useful tool for checking if a navigation system makes sense.

So, I think we should start with some of this stuff:

• Style tile explorations
• Some more research into how competitors organize their websites
• Card sorting to determine navigation
• Developing an outline of our website
• Possibly spinning up Pattern Lab and testing it out with October

What do you all think? It does mean more work, but I think we’d get a lot more return in the long run.

If you want to read more about Pattern Lab there is a great free book on the subject of pattern driven style guides here (written by the one of the developers of Pattern Lab).

[djrm]

here is a little update, with a blueish palette. screenshot need to be generated so we have better art to showcase, also (maybe) a bit of redaction work is needed.

[djrm]

It is not hard to see what kind of things unity and unreal prioritize in their pages, they give you aspirational content (lots of images of games made with the engine), since we dont have such content yet, we might try a more modest approach, also other thing that is present in their pages is what you can do, thats the reason why i suggested having features in the landing page, about carousels or horizontal navigation, i think thats a bad idea, people tend to navigate vertically and on desktop, accessing the buttons to change the carousel picture is a painfull experience and IMO bad design, maybe a showcase with auto scrolling is a good idea though, but having important content in a carousel is not good, also im all up for a simpler navigation, we dont need a very complex site, and also i think it would be better if we could do prototypes instead of complex analysis and super formal planning, im not 100% against it but since godot 3 is around the corner we might no waste too much time in optional stuff, also we are not a bussiness so lets focus on make things friendly and honest instead of trying to impress people, it think it is far more important to have and honest image rather that a professional faceless one.

having said that im all in for having a consistent brand design, but lets design it around our principles and the users we are targeting, it not a good thing when the a website tells you one thing and the tool and community are completely deifferent.

[pcvonz]

It is not hard to see what kind of things unity and unreal prioritize in their pages, they give you aspirational content (lots of images of games made with the engine), since we dont have such content yet, we might try a more modest approach, also other thing that is present in their pages is what you can do, thats the reason why i suggested having features in the landing page:

I bring up the site design of Unity and Unreal because they’ve probably done some research and laid out the whole site accordingly (not just the landing page). Using what they’ve done and taking inspiration from it could be useful.

about carousels or horizontal navigation,

I agree that the majority of the content behind a carousel is not going to be seen.

if we could do prototypes instead of complex analysis and super formal planning, im not 100% against it but since godot 3 is around the corner we might no waste too much time in optional stuff, also we are not a bussiness so lets focus on make things friendly and honest instead of trying to impress people, it think it is far more important to have and honest image rather that a professional faceless one.

The more planning we do the easier it’ll be to develop. We’ll also be confident we’re going in the right direction instead of scrapping something half way through. I think we should at least be doing some sort of analysis of the site navigation, wireframes, and mockups.

Also I think there are already examples of interesting stuff being done with Godot 3. Look at everything fracteed has made so far. I've been trying to keep a list of interesting Godot projects here by the way.

Well thought out design doesn’t have to be impersonal. Again, I think Mozilla is an excellent example of this. Isn’t one of Godot’s goals to attract professional studios, not just hobbyists? We need to reflect that.

having said that im all in for having a consistent brand design, but lets design it around our principles and the users we are targeting, it not a good thing when the a website tells you one thing and the tool and community are completely deifferent.

Couldn’t agree more! I’m just saying it’d be nice to codify those principle and put them in a styleguide that everyone can contribute to.

[djrm]

@pcvonz yeah, we definetely need a place to share ideas about branding and design i created the design repo for that purpose but there is no much activity, also there is already some work done in this area (mostly created by me since i was the only one interested in creating material but of course contributions are welcome), take as an example the twitter background and some docs material, i dont think we should try to stick to the current colors or style but rather forge a new one that fits the editor and material that is already used across the web.

if you want to help with the branding design it would be nice to hear your opinions in the design repo.

[akien-mga]

we definetely need a place to share ideas about branding and design i created the design repo for that purpose but there is no much activity, also there is already some work done in this area (mostly created by me since i was the only one interested in creating material but of course contributions are welcome)

Maybe we could get it moved to godotengine/design? I have a few things that I should upload there too, like T-shirt designs, etc., but it would be nice to have it more official.

[djrm]

@akien-mga yeah, that would be nice, maybe it will encourage more people to put things there.

[pcvonz]

I created a repo where we can start prototyping the styles for the new website. Check it out here. There isn't really anything in it yet but a whole lot of unstyled HTML.

Let me know if you all think this is a good idea or not!

[semirix]

I was thinking something more along the lines of this:

If we want to attract professional studios I think we need something sleeker. My design lends to a more corporate Unity-esque motif which I think will attract more people to look at the engine. Right now, Godot's website and the designs that have been put forward feel oriented towards children with the bright colours and the typography used. This is inadvertantly making Godot less attractive to a more professional demographic, i.e: people currently using Unity, Unreal potentially looking to switch.

In the design I opted to use League Spartan Bold for Godot's logo font which is strong, but fitting with the iconography. For the body and header, I used Barlow, which has crisp geometry similar to Roboto but has softer edges so it's not as harsh. Most of the imagery in the design is meant to showcase Godot's powerful renderer, which I balanced with the more accessible cartoony node icons from the engine.

Obviously the design I've put forward is very bare bones in terms of layout but I think would be a good place to explore more ideas for the site.

Ultimately I think we need a design language that balances a professional image with a certain accesibility that doesn't frighten beginners looking to make games.

[pcvonz]

@semirix I'd like to know what @djrm thinks, but I think this mockup is more in the spirit of the direction we should be going. I think we could still retain a few things from the current website (the blue in the logo for instance).

[semirix]

@pcvonz That would be a good idea giving the logo back it's color. I'm interested in negotiating some changes however, namely the logo's type and others on the site. If you'd like I can make a PR on your styleguide repo for some potential changes? Ideally it'd be nice to move the styleguide into the
design repo so there's a central location for PRs and such, but that's assuming we don't want another repo just for a styleguide.

[djrm]

The logo and the logo font must not be changed, that includes the proposed header and footer logo, as for the rest, the content is pretty much like the old site (in terms of content), the layout is quite conventional, im not sure about it, i would like to have more information at the start of the page, like the grid i proposed (it doesn't need to be a grid but having information there is quite important, specially now that we are going to have some sort of sponsored tutorials and demos from patreon, also the news are important).

of course all the designs posted here are really basic, but more than visual proposals they are here to help design what the website has to have and the new content that needs to be placed.

Also the mission of godot as far as i know is to be 'friendly technology', if we are going to appeal to certain type of users we should not forget who the engine is aimed for, so being friendly technology, some potential users could be students, indies, small studios, artists, or hobbyist, i would like if godot could appeal to big studios, but i think this is not the time.

here are some websites with cool designs that would serve for inspiration or reference (some not game related but they are definetely focused to enterprise):
http://www.pixijs.com/
https://www.compose.com/
https://www.heroku.com/
https://www.box.com/
https://bitbucket.org/product
https://githubuniverse.com/

As for the more 'Professional' look, unfortunately i dont have much evidence to support the idea that it will or will not attract more 'professionals' to the engine, so i cant discuss on that, but from those examples we can clearly see that we dont need a super monochromatic 'serious' color palette and elements to appeal to enterprise (if thats were the focus).

[semirix]

@djrm I'm really liking the vibrancy in your latest mock!

You make some good points about my design. The logo remaining as is makes sense but I thought I'd throw a net out to see if it caught on. I use the term "Professional" loosely to indicate a more neutral design, i.e: monochromatic, rigid layout, stylistically less frivolous. On that note, I was worried that the stark monochromatic scheme was a little bit too lifeless. That being said, I don't think we should rule out appealing to large studios by going with a more neutral, slender design. Like I said before, I think the design needs to balance professional, accessible and in your words, friendly. Your latest mock stylistically is in that direction.

My current criticisms would be changing the main menu to a solid color and maybe being a bit more judicious with the use of drop shadows. It seems we're both learning towards a more flat design so ideally shadows should be subtle. Gradients make the design look really gorgeous and vibrant but they should try not to contrast too much, otherwise it gives the perception of depth and we run into the same problem as the drop shadows.

All in all, it's looking great! Hopefully I can respond here during the week with another mock.

[djrm]

@semirix thats wonderful, and also i agree with some points, like the colors of the gradients in the 'news' grid, they are placeholders i actually want images there, but it would be great if we could have some sort of design conversation in this thread, to come up with a final design, also keep in mind that we have to do the same for the rest of the pages, but i guess the language defined here will be applicable, inviting @pcvonz to join in the mockup process. after that we can go all to code the site, would be way easier with an established direction.

[djrm]

some more explorations for more features, sponsoring and donation and open source initiative.

[djrm]

More design work, download page.

[djrm]

design work for showcase, we could even have some featured games with interviews about how those games were created using godot (if someone is willing to do the job).

[pcvonz]

Made some small mockups of the landing and downloads pages. Just experimenting with style, not really taking into account IA or anything.

Using the node icons as a design motif I think is a really good idea. It's one of the unique things about Godot and something that everyone mentions right off the bat as a reason to use the engine. Plus they're nice looking!

I like what @semirix suggested about the palette. I think the combination of that dark desaturated blue and a few highlight colors would look really nice. One thing about your mockups @djrm is that they lack contrast because they're saturated with color. The layouts overall are looking good though!

@semirix go ahead and fork the styleguide. I'm not sure if we want to add it to the design repo or keep it separate though. Maybe @djrm has some input on that.

[Calinou]

Remember that we should improve the download pages not just visually, but also by giving more information:

• Many platforms have several methods of installation (for example, you can now use Scoop to install Godot on Windows, and you can use Homebrew on macOS since a while now).
• There should be more detailed installation instructions (installing dependencies for Linux can be required).
• Hardware requirements should be mentioned.

It needs to be designed accordingly, so that a few things can be written about installation on each platform. Perhaps every platform the editor runs on should get its own details page, even.

[djrm]

@Calinou yeah, thats true, we need to provide better guidance to using the engine.

@pcvonz we should use the icons were it makes sense, like when talking about the node systems, we cant just put them there randomly to fill out space, also you know you have good contrast when you can clearly see whats the most relevant element in the interface quickly, from your mockups i cant see waht is relevant since the primary actions are lost in the backgrounds, example image 2 and 4, the backgrounds are taking over the content. also how can we have a guideline if we havent decided on a design language yet, lets focus first on settling this problem now, then we can identify common components and write a style guideline or deisng language spec, remember we have like a month or so to finish this, so we have to move more quickly.

[djrm]

just to be clear, i think that my mockups need a color rework, im just trying out variations, so better color coherence should be expected in further work, but what i want for the website is to be more striking and less "meh", i see from the tuxfamily statistics that the average visit time is like 300 seconds, thats too low, we have to make something more appealing that actually makes people want to spend time on the site and read the content that we are exposing otherwise the website simply does not work.

[pcvonz]

When I say contrast I mean either the variation between multiple hues, value, or saturation. What I notice in your mockups @djrm is that they stay in the same hue/saturation/value range. A nice combination of color to me is something like what @semirix did. A desaturated and low value color with maybe one or two spot colors gives a lot of nice contrast. I agree with you though, my mockups get a bit busy in the background and don't have a strong focal point.

The node icons could be a little confusing at first I suppose. But I still think they could be a great design motif if used a bit more sparingly.

The styleguide is maybe a bit of a misnomer at this point. Thinking of it as a playground is probably more accurate. Take a look yourself, it just contains pieces of a webpage.

My assumption is that the average person is probably going straight to the downloads page. 5 minutes in Internet time almost seems like a lot actually! A great way to remind people that there is more content on the site is through something like a mailing list.

[djrm]

@pcvonz well, good color combinations is a quite subjective topic, but again i remind you that our audience with the focus on "friendly technology" (as reduz said) are not big enterprise. also it would be cool if we could all colaborate in the design repo, posting the mockups there, so we can modify or take elements from mockups an iterate faster, i use Inkscape with svgs, i would suggest at least keeping the SVG since it is a standard format.

[djrm]

@pcvonz or actually having a live HTML playground could also be cool, but a bit harder to work on it, and organize, i personaly want to see something in a consistent state, at this moment we dont get useful information by just writing individual styles, it would be cool to have some static pages with the mockups or the mockup elements, to keep moving on with this.

[djrm]

ok, i uploaded my mockup files if someone wants to take a look, modify them or take elements from them feel free.

https://github.com/godotengine/godot-design/tree/master/mockups/website/djrm

You might need to install the provided font.

[djrm]

also here is another take on the download page

[pcvonz]

@djrm That's something we haven't talked about. How are we organizing our css? I usually loosely follow SMACSS, but I'm open to whatever.

[pcvonz]

Here are my mockups: https://github.com/godotengine/godot-design/tree/master/mockups/website/pcvonz
Also using Inkcape. The only font I used was Source Sans Pro.

[pcvonz]

Should I move the "styleguide" into a Godot owned repository? (I think I have the ability to do that)

[djrm]

@pcvonz now that i think about it im not sure if the work invested there would be reusable (may be waste of time), but not sure, if we settle on the framework or whatever, we can do it and have some reusability but otherwise i think its pointless (except for better showcase).

[Calinou]

@semirix This looks pretty nice! I find the blue texts below the titles look a bit strange though, perhaps make them dark gray instead.

[djrm]

@semirix looks good, i was also planning to change my mockups to the "new style", now the only problem here is that nobody has started to do the actual work, i was thinking about doing the new site myself (only templates, layout and CSS), now that we have a more defined branding and more material to show

[semirix]

@Calinou Yeah I agree, I'll change that.

@djrm I am more than happy to help out with this, however, we'll likely want some way of collaborating in real time. Is there a Slack or Gitter that we could use? Communicating through issues is a bit stilted.

[djrm]

@semirix why not irc #godotengine-atelier?

[Calinou]

You could discuss this on IRC (preferably, as most of the engine developers are there) or Discord, see the Community page on the website. Note that the IRC channel intended for design is #godotengine-atelier on chat.freenode.net.

[djrm]

also this thread has become really slow due to the big images.

[semirix]

Ahh my bad, I didn't know, I'll jump on IRC. And yeah, this page is a behemoth to load.