11

I’m Phoebe, the product designer working on the site theme for the Writing community.

As mentioned in our first post – below you'll find the site design I came up with based on your original ideas for the Writing Stack Exchange site. After researching and reading through your ideas, I’m excited to share a draft of the new site theme. Thank you for being patient with us.

Color scheme

I chose muted neutrals reminiscent of parchment papers, as I wanted colors that were easy on the eyes when reading through longer passages of text.

Proposed color palette for the Writing Stack Exchange site, incorporating 3 colors: black, brown, and floral white.

Header, footer, favicon

The header contains imagery representing different mediums that writing may occur in.

Proposed header for the Writing Stack Exchange site, as described above. The text "Writing" appears in black in a typewriter-style font against a background that looks like notebook paper; the rest of the header has a brown background, with translucent writing-related icons tiled throughout it.

Proposed footer for the Writing Stack Exchange site. It has a light brown background; some loosely stacked papers with scribbled writing appear on the right side, with a crumpled piece of paper to the left of them.

For the main favicon, I chose the imagery with the thought bubble as I thought that a common thread between all forms of writing is starting with the ideation process. I didn’t want to choose any imagery that over-indexed on a particular form of writing, but I’m open to any suggestions here.

Proposed icon for the Writing Stack Exchange site, as described above. It shows a pencil inside a thought bubble in light brown, set against an SE-style speech bubble with a brown background.

Page design

Proposed page design/style, showing a question page. The header and footer appear as shown above; the background of the main part of the page is white, while the background of the left sidebar and to the right of the right sidebar is in the same light brown as the footer. Regular tags and most links (aside from question titles) appear in a slightly lighter brown, while other text (including the question title) appears in black. The "Sign Up" and "Ask Question" buttons at the top appear in light text with a dark brown background, while the "Log in" button appears in dark brown text with a light background.

Proposed page design/style, showing the site's Questions page (/questions).

Process

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.

2
  • 1
    (In case there's any confusion: If you see any new/different-looking design elements aside from the changed colors/logo/background – such as extra elements in the top bar, or a "Collectives" section in the left sidebar – that's just because we test these designs on a dev version of the site, which doesn't always reflect the UI elements shown on the actual site. Those aren't part of the proposed site theme.)
    – V2Blast StaffMod
    Commented Feb 13, 2023 at 19:56
  • Update: Your new site design is live!
    – V2Blast StaffMod
    Commented Apr 13, 2023 at 17:15

2 Answers 2

Reset to default
6

I never thought I'd say this about the colour brown, but I like it! It does in fact feel quite warm and cozy. The pencil in a thought bubble is a great idea for the favicon.

For the page logo, would it be possible to add some sort of "tear" effect to the edges of the paper? I'm not sure how to explain it, but the perfectly square paper looks a bit too neat, combined with the detail in the typewritten font. I think it would look better with a tear, like someone's just excitedly ripped it out of their notebook or typewriter to show someone else.

Here's a mockup I did to illustrate:

enter image description here

Looking forward to finally seeing the site in its graduated design, it's been well worth the wait.

1
  • 4
    I'll try the teared paper effect - it was starting to look a little too index card-like to me as well!
    – Phoebe Staff
    Commented Feb 15, 2023 at 19:45
5

I like the icons on the header — it reminds me of the old MSE header. However, when I look at it in the dark, it's very hard to see. Can the icons be made lighter to increase the contrast?

The other thing on my mind is that we will see the favicon most often in the HNQ and the browser tab, where it will look like this (but blurrier):

It's clearly a speech bubble and if I focus I can see the thought bubble in it but I can't really see that the line on it is a pencil. Can this be adjusted to work at smaller sizes?

1
  • 1
    Great feedback. I'll see how we can edit the contrast on the header and the favicon for smaller sizes.
    – Phoebe Staff
    Commented Feb 15, 2023 at 19:45

You must log in to answer this question.

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