birmingham.io

What's with all the design changes?

Anyone that’s been paying attention might have noticed some changes to the logo and the top bar here on the forum, so I just wanted to take a moment to explain what’s going on.

One of the issues I’ve had with the community is that of making it look good. Discourse itself ain’t to shabby out of the box, but there are clearly some improvements and personalisations which can be made. As discussed elsewhere, I’m no designer, so I’ve been making it up as I go along, with what I hope has been a gradual change for the better over time.

Thankfully a couple of months ago, @pburrows very generously donated some of Blue Cube’s time and had his designer, Andy Roberts (I don’t think he’s a member here), mock up some designs. After a bit of a back and forth, and discussions over things like the logo and colours, we ended up with these.

Some points of note:

  • The multi-coloured logo is back.
  • The font in the logo has changed (it no longer says Birmingham ten, @sil).
  • The capitalisation in the text of the logo has gone (it is a website address after all)
  • Each project in the network has it’s own colour. These are subject to change, but right now they’re:
  • Network home: #FF5C43
  • Community: #2B668F
  • Calendar: #C8D32F
  • Birmingham Freelancers: #00B9FF
  • Planet Birmingham: #69368F
  • as well as some colours to spare for future things.

Now that I have something to work to, the changes you’re seeing on the forum (and eventually on all the project sites as well, starting with Planet Birmingham and the Birmingham Freelancers) are the first step towards making the mocked up designs a reality.

Right now I’m exploring the idea of using Semantic UI as a base for a compiled CSS file hosted on a CDN (possibly github pages) which will provide a common style for all projects in the network, but as with most things I’m doing right now, this is subject to change. Oh, and its also possible that the end result may look slightly different to what was designed (sorry Andy).

Anyway, if you’re interested in following along with what I’m doing, I’ve got an assets repo on GitHub, so feel free to take a look.

3 Likes

Quick poll, which do you prefer?

or

  • Large icons
  • Small icons
  • Something else

0 voters

I think the top bar should have less height (back to bootstrap default), voted for small icons because it might be easier to do that with.

Voted for the nicer looking large icons.
What currently bothers me though is the top bar disappears when you scroll down.
I find myself having to scroll up to the top (a lot in large topics) to get to the calender and planet links.

It also feels wrong somehow to click the Home icon which appears on scroll down, rather than the logo (like ths colour logo btw).
In essence, too much changes around the top of the page on scroll down.

You can click the page title to go to top (it’s an H1 so extends to the right of the text). It doesn’t page refresh.

Yes, that’s a bit weird. But I’m used to it now.

The idea of the top bar is to provide easy access to all the projects (i.e. stes) within the network (birmingham.io), of which this community is just one. This is why it’s split into two, with the lower bar providing navigation to the project you’re on currently, and the upper bar letting you switch between them.

The problem we have is that each of the projects are their own distinct platforms with very little bringing them together - part of this issue should be solved by the master stylesheet I’m working on, as this, at the very least, should make the sites look the same, but they’re still going to be separate entities.

Anyway, the upper bar vanishing is deliberate because of this - and although it doesn’t do it currently, soon the coloured logo will link back to the network homepage, rather than the current project homepage, so by hiding it, people are unlikely to click it in error.

Hopefully this will all make more sense once the other projects all fall in line, which will hopefully happen at some point in the next week.

1 Like

I didn’t vote for the icons because, annoyingly, I thought they should be bigger than the small ones but smaller than the big ones… One thing (and this is me being massively picky): I don’t think the coloured logo looks right on black. I think it’s because it looks like a representation of overprinting to me, and you would only get that effect by overprinting on white. Also, I see that the favicon is now the coloured logo on black but I think it should be on transparent or white: on black the outline just doesn’t stand out enough (the old blue on white one did) so I found myself searching through my open tabs to try and find this page.

1 Like

Thats a very good point Jude, the Tab icon of colours on black is a bit hard to identify in my 20 open tabs…

Also just found myself asking why the Like button is a Heart. Its like I’m loving somebodies post, but it says like.
(1st-world-world-web-problems though, no matter)

There have been a few comments about the coloured logo on a dark background - the only alternative I can think of is going back to the white gradient logo, although if there was some way we could keep the coloured one, I’d prefer to do this.

Proudly sponsored by Bytemark