15
$\begingroup$

What kind of color scheme and style should the site have?

Should it be similar to blender's UI and default theme?
Should it look like other blender related sites? E.g.

What are some opinions on this?

$\endgroup$
8
  • 6
    $\begingroup$ Nice initiative. I think we should go for something flat and clean like photo.stackexchange.com where we could have render of the week in the header etc. More ideas to come! $\endgroup$
    – iKlsR
    Dec 4, 2013 at 0:24
  • $\begingroup$ Is there any chance we could get the same header as Blender.org, similar to how AskUbuntu has the same header as Ubuntu.org? It would also be good if Blender.org's header could be updated to include a link to here. $\endgroup$
    – Keavon
    Dec 16, 2013 at 4:07
  • $\begingroup$ @Keavon We already are linked in the support section $\endgroup$
    – gandalf3
    Dec 16, 2013 at 4:24
  • $\begingroup$ I know. I didn't mean this as a way of publicity, but more of a way to create continuity between the sites if the menu bar were used like on AskUbuntu. $\endgroup$
    – Keavon
    Dec 16, 2013 at 4:25
  • $\begingroup$ What happened to this project? I am a web developer, and I would like to know if I can make a custom version that only runs when it loads for me. Is this possible? $\endgroup$
    – J Sargent
    Nov 22, 2014 at 19:28
  • $\begingroup$ This guy should be the site mascot! $\endgroup$
    – foobarbecue
    Feb 21, 2015 at 5:16
  • $\begingroup$ @NoviceInDisguise like a userstyle? $\endgroup$
    – gandalf3
    Feb 21, 2015 at 6:55
  • $\begingroup$ @gandalf3 Exactly what I wanted, although your version seems to be pretty good too. $\endgroup$
    – J Sargent
    Feb 21, 2015 at 20:09

9 Answers 9

Reset to default
14
$\begingroup$

Update

Following Dan the Man's suggestion of doing something similar to blender.org, I've created a proof of concept stylish theme:

enter image description here

Install it from userstyles.org to use it live (it covers the entire site) :)

Tested on Firefox and Chromium. There is a strange issue in chromium where it doesn't render properly when refreshing the page, but clicking on links (even a link to the current page) makes it render correctly. Other than that it seems to work fine.

Icons

For the icons, some ideas which I liked most:

Badges

With a gradient:

enter image description here enter image description here

Flat

enter image description here enter image description here

Both are rendered in cycles ;)

Voting

Unselected var 1

up
down

Unselected var 2

up
down

Selected var 1

up
down

Multi-colored version, as suggested by A Wild RolandiXor:

enter image description here

Thanks to @catlover2 for early testing and feedback :)

$\endgroup$
16
  • 1
    $\begingroup$ I think the tabs/question links need more padding, and the logo needs to be smaller. It feels a little squished in the top fourth of the screen. $\endgroup$
    – CharlesL
    Dec 5, 2013 at 14:50
  • $\begingroup$ Also, is StackExchange needed in the logo? I've looked at other graduated sites and none of them have that. I like the icons a lot. The only thing I think worth changing about them, is the check itself. I like the first one, but the other two are too skinny. $\endgroup$
    – CharlesL
    Dec 5, 2013 at 15:39
  • $\begingroup$ @CharlesL I think we will get a logo and a new name once we graduate, I just put it like that because this site is known as "Blender StackExchange". $\endgroup$
    – gandalf3
    Dec 5, 2013 at 21:28
  • $\begingroup$ ah, ok. Anyway, nice job :D $\endgroup$
    – CharlesL
    Dec 5, 2013 at 21:30
  • $\begingroup$ I like the icons. $\endgroup$
    – Daniel
    Dec 5, 2013 at 23:55
  • $\begingroup$ @CharlesL I agree, I made the skinny ones with the check boxes in blender's UI in mind, but it doesn't look very nice.. $\endgroup$
    – gandalf3
    Dec 6, 2013 at 7:38
  • 4
    $\begingroup$ I like your up and down icons, but I really dislike the rest of the icons and design. $\endgroup$
    – Keavon
    Dec 16, 2013 at 4:10
  • $\begingroup$ @Keavon Looking at them now I kind of agree with you :P $\endgroup$
    – gandalf3
    Dec 16, 2013 at 8:01
  • $\begingroup$ The voting buttons look similar to a google place mark for a map. developers.google.com/maps/articles/toomanymarkers/… What is the circle there for anyway? $\endgroup$
    – David
    Jul 5, 2014 at 16:47
  • $\begingroup$ @David I took the blender logo, removed the arms and made it more like an arrow instead. $\endgroup$
    – gandalf3
    Jul 5, 2014 at 18:11
  • 2
    $\begingroup$ I love the Suzanne badges! +1 $\endgroup$
    – PGmath
    Dec 2, 2014 at 23:26
  • 1
    $\begingroup$ Me too! It looks awesome! $\endgroup$
    – J Sargent
    Jan 15, 2015 at 15:52
  • $\begingroup$ Me gusta mucho. $\endgroup$
    – A Wild RolandiXor Has Appeared
    Feb 16, 2015 at 18:18
  • 1
    $\begingroup$ The up and downvote buttons could have different circle colours. One could be orange and the other blue. That would be a good visual distinction that other sites don't have (to my knowledge). $\endgroup$
    – A Wild RolandiXor Has Appeared
    Feb 16, 2015 at 18:19
  • $\begingroup$ @AWildRolandiXor Interesting idea! But which should be blue and which should be orange..? $\endgroup$
    – gandalf3
    Feb 16, 2015 at 20:00
12
$\begingroup$

I really like how the new blender.org site looks. Flat and slick (yet slightly vibrant). We could do something similar. The main colors are pure white, #f8f8f8F8F8F8, 444444#444444, 109df0#109df0, ddd#ddd, f84#f84, and 5f5f5f#5f5f5f. It heavily uses the 'Open Sans' font.

+1 if you like the idea.

$\endgroup$
2
  • 2
    $\begingroup$ The Blender colors are welcome of course but think we should go for the old dark look if we were to emulate that site in any way. photo.stackexchange.com is a nice clean site, I think we should go for something similar to that, large header etc. The tall font on the new site kinda throws me off. $\endgroup$
    – iKlsR
    Dec 4, 2013 at 2:57
  • 3
    $\begingroup$ I like the idea of using those colors, but I agree with @iKlsR about the font. It's too tall, and doesn't match the rest of the fonts. $\endgroup$
    – CharlesL
    Dec 4, 2013 at 16:45
8
$\begingroup$

I think that the blender UI should be represented through the site, yet without compromising the user experience (the gray background is just too radically different from what people are used to). We can still use a few buttons/icons here and there.

  • Accept Answer

  • Upvote / Downvote

  • Various (by gandalf3, you can view these icons with the bundled icons addon)

$\endgroup$
7
$\begingroup$

Blue Polygon Background

This is a specific idea for the background (I also changed the font to Open Sans) that helps start the look of the site. I used the http://chemistry.stackexchange.com theme (modified) for the proof of concept. Naturally it would need some tweaking, but I think it has potential.

Polygons make up all 3D art in blender (with a very very few exceptions) They are an intrinsic aspect of 3D, and are also a powerful design element.

enter image description here

Some have suggested limiting the background to the header:

enter image description here

Also, I used this answer on the site to create the background :D. That is the beauty of SE!

$\endgroup$
4
  • 3
    $\begingroup$ Some sort of polygonal background would fit well with the theme of the site $\endgroup$
    – J Sargent
    Jul 10, 2015 at 2:37
  • $\begingroup$ I personally find the blue too distracting in the first example, the second is better imo. Maybe a little too detailed, what if you make the polygons bigger in the second example? $\endgroup$
    – gandalf3
    Jul 10, 2015 at 7:42
  • $\begingroup$ @gandalf3 I ment to, however it is quite a pain to adjust $\endgroup$
    – GiantCowFilms
    Jul 10, 2015 at 14:43
  • $\begingroup$ Here's my variation on this idea, I like your colors better though. $\endgroup$
    – PGmath
    Jul 14, 2015 at 0:38
5
$\begingroup$

I wanted to jump in here. I do not yet have a full blown site mock up, but some ideas.

First, I really like the way the top of the https://ux.stackexchange.com/ looks. Picture that blue stripe in blender orange.

Second, I thought gandalf3's idea to use the monkey as the badge was neat, but the silhouette was too unconventional. So here is my proposal for the badges.
badges enter image description here
Smaller (12px) and with more contrast.

For the voting buttons the first two are in the voted state, the grey is default unvoted.
voting buttons

I will add more to this in the coming days.

$\endgroup$
3
  • 3
    $\begingroup$ Nice! I like the badges, but I feel like there could be a tiny bit more contrast around the Suzanne (but maybe that's just me). Also, I'm not sure we can have badges that large (I believe the default badge icons are 12px). How do they look at a smaller size and with varying backgrounds?. The vote icons and the banner idea seem a little bit plain to me, but again that's just my personal opinion. +1 $\endgroup$
    – gandalf3
    Jul 6, 2014 at 6:43
  • $\begingroup$ After looking at some other sites, it seems that we do have some freedom as far as size/dimensions after all. AskUbuntu has big badges in places where the name of the badge is displayed (with the exception of tag badges). Tag badges and badges in other places have smaller versions of the icons. GraphicDesign has smaller badges, which are not all circular. AndroidEnthusiasts is an example of a mascot used as a badge icon. $\endgroup$
    – gandalf3
    Jul 6, 2014 at 7:29
  • $\begingroup$ @gandalf3 12px huh? well I was hopping we could work with at least 16px. See updated post for the badges. About the others being too plain, well I kind of agree with you. I will post something better later. $\endgroup$
    – David
    Jul 6, 2014 at 19:26
2
$\begingroup$

How about something like this?

enter image description here

I'm still working on the spacing of everything as well as adding a little more texture, but you can still get the general idea.

Update 2: enter image description here

$\endgroup$
11
  • 6
    $\begingroup$ This is too plain IMO. I would recommend looking at other graduated sites and seeing how they do things. Usually there are unique icons, custom accepted answer marks etc. $\endgroup$
    – iKlsR
    Dec 4, 2013 at 23:06
  • $\begingroup$ @iKlsR What about now? $\endgroup$
    – CharlesL
    Dec 5, 2013 at 3:29
  • $\begingroup$ Way too plain. Something more like the main Blender site would be better. $\endgroup$
    – A Wild RolandiXor Has Appeared
    Dec 5, 2013 at 4:02
  • 1
    $\begingroup$ Yeah no offence... lets not use grey anywhere. ever. $\endgroup$
    – user1745
    Dec 5, 2013 at 5:38
  • 5
    $\begingroup$ @DigitalArchitect On the other hand, the default blender theme is all gray. $\endgroup$
    – gandalf3
    Dec 5, 2013 at 6:14
  • $\begingroup$ @gandalf3 Thanks I'm aware of that, and boy is it a complete blunder of modern UX/UI/Graphic design. There's major calls from the community right now to refactor the entire image and UI and this has already started to come through with the new site design. $\endgroup$
    – user1745
    Dec 5, 2013 at 7:11
  • $\begingroup$ Yeah, we should take ideas from other graduated sites. Christianity.SE, for example, it's anything but plain. $\endgroup$
    – Daniel
    Dec 15, 2013 at 19:19
  • $\begingroup$ Hey, I love that site you made CharlesL . Personally I think that there should be the option to choose what style you want maybe there could be a settings page. $\endgroup$
    – Turbo
    Dec 28, 2013 at 20:52
  • $\begingroup$ I like the white background for a clean look, my first impression was it looks like SO but I was wrong it were only the colors I associated with SO. I don't like the bulky gray banner. $\endgroup$
    – stacker
    Dec 29, 2013 at 14:18
  • $\begingroup$ @stacker very good point. You could fit more info if the banner was smaller. $\endgroup$
    – CharlesL
    Dec 29, 2013 at 16:01
  • $\begingroup$ No just no O_o... $\endgroup$
    – A Wild RolandiXor Has Appeared
    Feb 16, 2015 at 18:21
-3
$\begingroup$

I agree with Dan's answer that we would need colors (or symbols) to make our site recognizable at first sight. After quickly reading up on graphics design (not in English so I didn't learn any technical terms), I thought that a simple mesh could represent an abstraction of blender.

According to Usage in artwork and community websites the Blender logo should only be used to point to blender.org

Under the following conditions, third parties may use the Blender logo as well:

  1. The logo can only be used to point to the product Blender. When used with a link on a web page, it should point to the url blender.org.

  2. You will visualize and promote your > own branding more prominent than you use the Blender logo. The Blender logo only can be used as a secondary brand, which means it has to be clear for an average viewer that this is not an official Blender or Blender Foundation website, publication or product.

  3. You can use the Blender logo on promotion products, such as T-shirts or caps or trade show booths, provided it is a secondary brand as described in point

  4. The logo is used unaltered, without fancy enhancements, in original colors, original typography, and always complete (logo + text blender).

  5. In case you use the logo on products you sell commercially, you always have to contact us with a picture of how it will be used, and ask for explicit permission

This means we couldn't borrow the offical blender logo, and would need to have our own.

The design goals were that the banner shouldn't take too much room to leave more space for content, it should be recognizable. The mesh abstraction shouldn't be too dominant, it should have a fresh look. The font should be somewhat 'futuristic'

enter image description here Some variations I think the mesh-thing could be easily over-used :

enter image description here

It would love to discuss any critics and suggestions. This was created with inkscape if anybody would like start with improvements rather than from scratch I could upload the file.

Credits:

$\endgroup$
1
  • 7
    $\begingroup$ I didn't vote, but in my honest opinion, this doesn't look very modern. It looks like something born in the 90s. $\endgroup$
    – A Wild RolandiXor Has Appeared
    Feb 16, 2015 at 18:29
-3
$\begingroup$

A gloomy variant (Edit: improved readability and increased dpi)

enter image description here

$\endgroup$
2
  • 3
    $\begingroup$ Downvoted due to bad readability? $\endgroup$
    – stacker
    Dec 28, 2013 at 19:48
  • 3
    $\begingroup$ That blue is hard to read $\endgroup$
    – Qwertie
    Dec 28, 2013 at 23:41
-3
$\begingroup$

Just after posting the following, I saw there is a more recent question asking for site design input and thought it better to post there. Not sure which is more relevant, so leaving this double-post up for now.

I think aesthetics and a good sense of design and composition should take priority over looking "themey". Sure, having the Blender colors in a couple of places - used tastefully - could be good. But if the icons are all literal elements taken from Blender's UI it could start to look gimmicky and cheap. And while we love Suzanne, she's one of the more overused and definitely less sexy symbols associated with Blender. Could we maybe think outside the box a little more?

It should be sexy. It should be chic. It should be smart. It should demonstrate that this is a place for artists who understand design, not just people with a purely technical understanding of Blender. This may be a place to find out "how" but let's not forget the "why", which is the creative element. Blender is a powerful pro graphics application being used by many brilliant artists and we owe it to the community to deliver something that impresses and inspires.

What might such a design look like? I invite discussion along this train of thought.

$\endgroup$
1
  • $\begingroup$ The new one is the official one and the newer one. So new discussions would be better placed there, to keep the old and new ideas organized $\endgroup$
    – gandalf3
    Jul 10, 2015 at 18:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .