Site design and logo — Draft

Question

I’m Piper, Director of Product Design for our Community Products org and the designer working on the Ethereum Stack Exchange theme. I’ve spent some time reviewing your thoughts from our first post and doing my own research and I’m excited to share what I’ve come up with. Thank you for your patience.

I was very inspired by the geometric theme and pastel colors that Ethereum is now using and the artwork that you all shared with me. With the mention that the site wanted something fun, I continued to explore that bold style.

Color scheme

The colors I chose came directly from Ethereum’s site via some precision eye drop skills. The gorgeous pastels worked well with one another and not much tweaking was needed.

Logo

I really loved the logo design from an earlier post that explored Ethereum's logo embedded within a hexagon chat bubble. I made the diamond a solid color to help it survive more sizes (hello favicon) and moved the logomark to the right to make better use of the space.

Badges

I updated badges to be a dimensional diamond. Hopefully you find it simple, but interesting.

Page Design

I used the color palette to create a gradient. To add interest, I used an overlay of triangles of various opacities. I wanted to keep enough white to balance the strong style and keep it feeling fresh and modern, similar to the Ethereum org website. I still question whether the footer should have a gradient background or be white—I look forward to your thoughts :)

Error pages will incorporate these simple images inspired by various Ethereum conferences and the hover state on the Ethereum org website.

We hope you enjoy this design, but if something doesn’t feel right, now is your chance to share your feedback. This window for feedback will be open for one week. We will then work to incorporate feedback as best as we can, finalize things on our end, and lastly, deliver the design to your site.

Answer 1

Badges

I updated badges to be a dimensional diamond. Hopefully, you find it simple but interesting.

I love them! Custom badges were always my favorite about StackExchange site themes!

I'm wondering if we can make them look like the ethereum glyphs:

(Excuse my poor graphics skills and open-source software. xD)

Answer 2

The footer I think should just be a lighter version so the black text is more easily readable, but besides that it's beautiful.

Answer 3

I'm excited to see this come through, it looks great!

The only thing I got stuck on was the logo.

Looking at it without any history, my eyes couldn't parse what was happening. It looked like an unfolded paperclip holding onto the Ethereum logo. I had to click your link to understand the hexagonal speech bubble concept. It's a cool concept, and I'm not a designer so I don't really have a specific suggestion. Sorry! (Maybe play with continuing the hexagon around the logo to place it fully inside?)

Anyway, just some feedback from someone who appreciates the community but doesn't know anything about design, so take it as such. :)

Answer 4

Looks great Piper, thank you!

If possible to incorporate, I like the Ethereum glyphs suggested by @q9f:

The other feedback I'm paying more attention is about lightening up the footer, as it may be too much for power users seeing it all the time. If lightening it up doesn't work so well, I wouldn't mind keeping the footer as is: it's also a similar shade to one in the color scheme you've chosen.

I agree that the logo is not understandable near face value... To me it even started looking like the outline of someone's head. I think part of it is that speech bubbles normally start from bottom-left rather than bottom-right. It would be interesting to see what happens if that adjustment is made so that the diamond is on the right.

To make it clearer as a speech bubble, how about trying to have the diamond be on the right side of the bubble?

Answer 5

Color scheme

The colors I chose came directly from Ethereum's site via some precision eye drop skills. The gorgeous pastels worked well with one another, and not much tweaking was needed.

I think these colors work very well. I'd be personally open to diverging from what we can find on ethereum.org; however, this color scheme is well recognizable and works with the proposed site design.

Answer 6

Logo

I really loved the logo design from an earlier post that explored Ethereum's logo embedded within a hexagon chat bubble. I made the diamond a solid color to help it survive more sizes (hello favicon) and moved the logomark to the right to make better use of the space.

I'm happy you picked up the winning logo from the older thread!

However, I don't think this works for the proposed design. Here are some unordered thoughts:

• The shape is not easily recognizable; it's a bit confusing for the eye as to what is the user looking at
• The color comes from an old logo version, dating back 7-8 years. So I would avoid using this specific color scheme (grey-blue-ish). The black one could work, though.
• It somehow does not fit the style of the proposed site theme; it feels somewhat forced into the design.

I would encourage you to look at proposals B (my favorite) and D in the linked thread regarding the potential of working with the logo and diverging from the initial diamond shape. This does not necessarily mean I want to go with the other logos; instead, suggesting we can be more open-minded here.

Answer 7

Page Design

Proposed page design/style, as described below, showing the site's Questions page (/questions). The header and footer of the page are in a horizontal gradient of pastel colors, ranging from teal to blue to purple to pink, with a faded triangle pattern intermittently overlaid on it. Question titles and other links appear in periwinkle, while regular tags appear with a teal background.

Proposed page design/style, as described below, showing a question page.

I used the color palette to create a gradient. To add interest, I used an overlay of triangles of various opacities. I wanted to keep enough white to balance the strong style and keep it feeling fresh and modern, similar to the Ethereum org website. I still question whether the footer should have a gradient background or be white—I look forward to your thoughts :)

I think the gradient and colors work well in the header and triangle shapes. However, as mentioned in the other answer, the logo does somehow not fit the theme.

I was wondering if we could use the same design for the footer but make it dark? Or maybe less saturation. Currently, the site is very colorful, and it could be too much for power users returning every day. :P

What do you think?

PS: The error images are so cute!