Design for Bicycles Stack Exchange.

Question

I'm Jin, and I'll be working on the designs for the Stack Exchange sites as they graduate from the beta phase. Each site will have its own unique theme that will reflect its topic. However, all sites will share quite a bit of common elements so they feel like they're part of the Stack Exchange family.

During the brainstorming phase, I asked myself, why do people ride bicycles if they have a choice of driving a car, or why do they choose cycling if there are other forms of exercise? As a one-time bicycle lover myself, I thought about personal freedom, accessibility, low cost and being in touch with the great outdoors.

So for the design, I wanted to capture the feeling of riding a bike, rather than focusing on the bike as an object.

Riding a bicycle is a very personal and independent choice. I wanted the design to reflect that. I believe a hand illustrated art style gives it a more personal touch, and the slightly vintage treatment makes it more timeless. After all, bicycles have been around for a long time.

Since the design is entirely focused on a "feeling," I decided to design a poster for our bicycles site first. That way, I didn't have the distraction of the constraints I normally face when creating a design for the web.

_{(click for larger version)}

Above is the poster I came up with. I believe the texture, color scheme and minimalist style work towards the goal I was aiming for. From there I transfered the visual elements onto the site design.

_{(click for full res version)}

Please keep in mind, not all of the site elements are present in these two mockups. I incorporated some visuals related to bicycles and cycling, e.g. road signs and cogs. But I was careful to not to make it overly "themey." Also, I tried to fit all of the design in one image, so it looks busier than the live site will be.

I'm pleased with the overall design. It did capture the feel I was going after. The site has a unique identity, while maintaining the feeling of the Stack Exchange family.

I'd love to hear your feedback. If there are no major design changes, I'm aiming to launch the site next Tuesday. So an early congrats from me!

Answer 1

Overall, I really love this design. Anything that sounds otherwise is really really minor details. If we go live with this design exactly like this I'd be happy.

I like the logo, it basically says "I love bikes" to me, which is a sentiment I can go for. I won't be surprised if some people don't like a heart as a logo.

The whole design is a wee bit whimsical, which I like and some won't.

I think maybe you were thinking of a sort of "vintage" thing with the texture, but it also reminds me of a road surface, which is a nice touch.

For the most part your design is about riding the bike, while most of our questions are about the mechanics of the bike. The design looks more like riding on a day off than any kind of commute.

Tiny nits/suggestions:

1. The two "screenshots" have a different background blue color fade going on. Is that on purpose? Either color scheme is fine, but I slightly prefer the shades on the question view.
2. As @JayBazuzi pointed out in the comments above, the cyclist is hunched over. It would hurt less to look at that cyclist if they had a straighter back. While it is common to see cyclists hunched over like that, the preferred posture is bending at the hips and keeping your back fairly straight. (because that gives the muscles in your torso more leverage making it easier to keep weight off of your hands, because it's generally better for your back, and in some cases because it's more aerodynamic).
3. The more I stare at the design, the more it feels like riding on an oppressively hot day where the sun beats down and there's no shade. Maybe a tree somewhere? Or a hint of some water somewhere? I get thirsty looking at the pages
4. I like the "road sign" details, and was thinking having the accepted answer number highlight look like one would be nice. I'm thinking specifically a european advisory speed limit sign (I believe Australia uses the same scheme) which is white text on a square blue background (rounded corners) with or without a thin white border, like http://en.wikipedia.org/wiki/File:Zeichen_380.svg or the 130 on this http://en.wikipedia.org/wiki/File:Zeichen_393.svg (the red circles are mandatory speed limits). (but with a blue that fits the rest of the color scheme better, of course)
5. I kinda wish the decoration on tags made me think of bicycles in some way... Maybe something that looks a bit like the downtube company branding some manufacturers use. Most bikes the downtube branding is just straight contrasting color lettering/logos on the frame, but there's a classic style some use where that part of the tube is a different color (often with a little striping at both ends). Like:
   • http://www.bianchiusa.com/bikes/gran-fondo/brava/
   • http://www.bendvelo.com/J_Livingston_Bikes
   • http://www.ibiscycles.com/bikes/hakkalugi/

Answer 2

The heart logo works for me, however I do have what can hopefully be received as constructive criticism of the design work.

'Slightly Vintage...'

I think you will find that trains have been around for a lot longer than bikes and trains project an image of cutting edge high speed rather than folksy steam. I think that, as far as bikes are concerned, you should take note of how much more sophisticated and high-tech bikes are than anything else on the roads. Carbon fibre is commonplace on bikes, not so on cars, they are stuck on steel and only just dabbling with aluminium which is old-tech for bikes. Bikes also can have electronic gears and time-trial machines use every aerodynamic trick in the wind-tunnel-hand-book. Fabrics for cycle clothing are also light years ahead of anything in the High Street or catwalk. LED lights were pioneered on bikes and are just making their way onto cars. Put simply, although we all have childhood memories of cycling, cycling is essentially a high-tech game with nothing vintage about it.

'Solo cyclist'

I have been out and about on the bike today and I could not help but notice how many people were cycling in groups. When it is sunny weather it seems there are more people in groups than going solo. I think that the site is about community and that could be reflected by a diverse selection of riders on different styles of bikes. Inclusiveness is part of what the questions and answers are about.

Why Off-road?

The majority of questions on the site seem to be from people that ride for a mix of utility and pleasure. I personally view off-road mountain-biking as a bit 1980's, nowadays bikes are to be found in the city and along canal towpaths rather than off-road, as was the fashion when the 'car was king'.

What is wrong with sky blue skies?

Call me picky, but I like blue skies to be blue. Can we experiment with some different gradients? 'Simpsons' title sequence has a blue sky that is blue sky colour, as does the view out of my window now. There are lots of blues that say sky, I am just not feeling it with this one.

Heart Logo and buttons

I like the heart logo, however I feel we could do a bit more with the existing bicycle road sign colour palette. Around here (UK) we have signs in blue, e.g:

With road signs red means stop, take attention, hazard ahead and so forth. Green has its own meanings, however, for bikes that is the colour of a cycle lane, i.e. the tarmac is painted green. I feel we already have a few colours that can be made to work with the design.

For instance, the heart might work really well if in green. This will mean that the favicon does not look like some dating site or my little pony site. This may appease the naysayers.

Randomly thrown in ideas

I am an admire of the cycle artwork that goes with 'Critical Mass' rather than Tour-de-France wannabee-ism, as you get in 'Future Publishing' style magazines. Andy Singer's series was excellent as were Ken Avidor's 'Road Kill Bill' cartoons that could be found in 'Carbusters' magazine a decade ago when it was underground, edgy and subversive.

The site is also a global affair the sphere-style hills could have some cartoon-ified coastlines that are notionally of continents. We could play with some ideas of scale.

I was impressed by the UK train adverts that Virgin put out a while back. We could do something similar with bicycles going overhead of gridlocked traffic, maybe doing the black and white grey for the cars and true technicolor for the bikes:

And finally...

We haven't decided on a strap line, 'It is about the bike!' might work as a working title rather than 'lorem ipsrubbish' that designers pretend to work with.

Answer 3

First, @Jin, I appreciate your work as the designer, and I know that presenting anything based solely on one's own ideas is difficult.

However, the overall feel of this design is more fantastic than I would prefer, especially since we are supposed to be a site for solid questions with concrete answers.

Pros:

1. The color scheme gives a nice soft feel to the page. It reminds us that we are all here because we have one thing in common, at least.
2. It's rider centric, and not machine centric only. It doesn't leave anyone with the impression that all we care about is what you ride, or how much it cost.
3. It does a good job of incorporating bicycle based elements without every button being a mini component of some kind.

Cons:

1. I hate the heart as logo. I'm not a 13 year old girl drawing the headbadge of my bike on my Peachie cover, and I don't want to look like one. I would be embarrassed to use that as a logo or link badge on most sites I frequent. And while I don't want to prevent 13 year old girls from participating, neither do I want to turn over our brand identity to one.
2. I would much prefer our logo to look like a headbadge, or some similar cycling themed item. C'mon, it's our logo! Shouldn't it define bicycles.se better than that?
3. I'd like there to be some element that reminds us that there is a technical side to cycling; that riding is gestalt of man and machine, and that in a way cyclists the original cyborgs. This captures the zen side of cycling quite well. What about the other side? Are we ignoring it? Because most of our questions are far more focused on the technical than the zen of it all...
4. As was stated in the earlier answer, fix the cyclist's position. He looks in pain. And a tree or 2 on the page would be nice.

Answer 4

The site is mostly about building, repairing and tuning bicycles, which means bicycle fans who spend a lot of time closely with their bikes. Therefore I think images of closeups of bikes are more appropriate. Images of a whole or part of a bike frame, wrench, bike chain, bike outfits, speedometer, handbrake, pump, water bottle, tire and its spokes, workbench.. etc should be incorporated in the theme in some fashion.

The current poster, which I like as a general poster, is more about nature and the environment than a person and their love to their bike.

Answer 5

I'm looking at the background as it is on (8/21/11) and the elements I like better than the poster are:

• Grey/Night theme
• Rider pointing down
• Gear Moon
• Heart used in a "Badge" design as opposed to the outline of a badge
• The badge has a split down the middle giving the appearance that it could be used on a head tube
• Having the night theme and a light on the bike gives me a feeling of adventure and this is one of the main reasons I love cycling (road and mtb)
• That said I think having the road in the foreground includes commuters and road riders. Having the rider in the background with no apparent leaves the imagination to be a trail or a road.

I don't agree that the heart doesn't represent an element or that we are like school girls. I have been riding for over 25 years and have some pretty hearty rides under my belt. I love cycling, the technical and the zen. There is a grace to someone who rides well and we have all felt this in the "flow". Jin you said this is essentially your design so keep it that way.

The only con: use the heart that's great. Throw some "pink" in there that's fine. Not both please. let meta be some other color.

Answer 6

I'm Jin, and I'll be working on the designs for the Stack Exchange sites as they graduate from the beta phase.

Hello. Congratulations.

However, all sites will share quite a bit of common elements so they feel like they're part of the Stack Exchange family.

The HTML.

Why

During the brainstorming phase, I asked myself, why do people ride bicycles if they have a choice of driving a car, or why do they choose cycling if there are other forms of exercise?

When I was offered a job in a further-away office I thought, "I'm either going to have to move apartments: again. Or, get a faster bike: to go the further distance."

I now commute an hour each way, by bike. It's regular exercise, because it's commuting (though I might also do it if I had the leisure).

I think that the motivation, of many men at least, is to go fast and far.

There are several categories of biking:

• Road (racing, training, touring)
• Off-road (trails)
• Hybrid (urban, leisure, utility)
• And others: recumbents, children, cargo, trendy bikes.

Bicycles - Stack Exchange is for people who build and repair bicycles, people who train cycling, or commute on bicycles.

Myself

As a one-time bicycle lover myself, I thought about personal freedom, accessibility, low cost and being in touch with the great outdoors.

Yes my first bike was the first time I left my neighbourhood alone, to go exploring. It is relatively cheap.

And the outdoors are great (I don't know how people manage 'exercise bikes' and 'trainers' indoors: I get warm and want a fan). Outside there's always as good a breeze as you're willing to cycle into.

It can be, is, easier than walking.

So for the design, I wanted to capture the feeling of riding a bike, rather than focusing on the bike as an object.

Feeling of riding a bike

The feeling of riding a bike, for me, is:

• Brighter than in-doors (or darker at night and winter)
• Balance (shoes and pedals)
• Acceleration (setting off, little effort at low speeds, up-shifting)
• Gliding (coasting or free-wheeling)
• Smooth (cycling feet)
• Faster heart and deeper breathing

The reality is:

• 20+ mph (32+ kph)
• Top speed limited by wind resistance: so it's like flying
• $1500 for a new commuting bike with accessories and free service costs less than the public transit fares for a year
• A year-round commute is feasible: I've easily ridden in -8C through +38C (17F through 100F) temperatures for an hour each way, every weekday (except about 10 days for rain and wind and health) since March 2011, wearing basic cotton clothing and gloves (and sunscreen) etc. Winter is warm, and summer is cool (there's a breeze).

There's the practical, commuting 20 km in an hour. One can cross the city about as fast on a bike as by bus and subway and tram/streetcar.

In a couple of hours of cycling you can burn 1000 calories. Pre-hydrate.

Other people post on the forum about road bikes/races, and about off-road mountain biking.

Focusing on the bike as an object

A major purpose of the site is to Q+A about bikes as objects (here's an interesting advertisement).

Tires. Brakes. Gloves. Bearings. Parts. Traffic skills. Maintenance.

Art style

Riding a bicycle is a very personal and independent choice. I wanted the design to reflect that. I believe a hand illustrated art style gives it a more personal touch, and the slightly vintage treatment makes it more timeless.

A poster is better than a photo which could get old.

SF is another way to make a timeless treatment (Bruce Sterling's novelette Bicycle Repairman won the Hugo).

Been around for a long time

After all, bicycles have been around for a long time.

Been around, eh? Know what I mean?

Mine's fairly new, and maintained. It's better than my previous one which was new for $130 two years ago (and which is fine for an easy cycle half an hour and back: I lend it for riding to the swimming pool).

The bikes people write about are often new or used, and are usually not department store bikes.

You might find modern bikes surprisingly light and fast.

Poster

Since the design is entirely focused on a "feeling," I decided to design a poster for our bicycles site first.

Nice poster.

You should see Neil Fein's awesome flyer.

That way, I didn't have the distraction of the constraints I normally face when creating a design for the web.

Good.

Off-topic do you have a reading list to recommend? About design?

In the picture above I'd like to see a narrower white line, to make the lanes wider. I'm glad to see you've already done that in the current design.

The above reminds me of Normandy.

Above is the poster I came up with. I believe the texture, color scheme and minimalist style work towards the goal I was aiming for. From there I transfered the visual elements onto the site design. Please keep in mind, not all of the site elements are present in these two mockups.

Ads. And you're showing the header and the footer on the same fold.

I incorporated some visuals related to bicycles and cycling, e.g. road signs and cogs. But I was careful to not to make it overly "themey." Also, I tried to fit all of the design in one image, so it looks busier than the live site will be. I'm pleased with the overall design. It did capture the feel I was going after. The site has a unique identity, while maintaining the feeling of the Stack Exchange family. I'd love to hear your feedback. If there are no major design changes, I'm aiming to launch the site next Tuesday. So an early congrats from me!

Cheers.