Design for Electronics and Robotics

Question

Hi all. 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.

I finally realized why my parents forced me to major in Computer Engineering years ago: to prepare me for designing this site. :) Unfortunately, I have forgotten much of the stuff I learned in EE classes.

For the final theme design for the Electronics and Robotics site, my goal is to keep it simple. In fact, I think the sketchy theme used in the Beta site is pretty appropriate. I wanted to add some electronics elements for the final theme, but still keep the content section simple and clean.

Here is the design for the homepage. Click on image to see the full resolution version.

For the header I'm using a breadboard. I thought about PCB board but the color and texture just don't play well with the design elements. It also makes the header overwhelm the content.

For the site title text treatment, I'm mimicking a 5x7 LED matrix. I tried 14segment LED first, but the text was hard to read.

I'm most likely wiring the breadboard wrong. As I said, I've forgotten so much stuff from my college days. Feel free to correct. But keep in mind the breadboard elements are for decoration purpose. I didn't want to make it too "authentically busy." I do want the wiring to be somewhat accurate so you experts won't laugh. :)

Please let me know what you think, and early grats from me on the site launching officially! If there are minimal design changes, I'll aim to launch the site this Thursday.

UPDATE

Thanks for the feedback, much appreciated! It seems most of you are fine with the over all site design. There's concern about the breadboard, and what type of message it may give. I picked breadboard because it's cleaner than a PCB board, visually. However, I think the design should reflect what this site is about. It's more than hobbyists, I certainly would like the site design to be attractive to professionals. I'm willing to change the breadboard to a PCB board. But I don't think I'll use the dark green one, since it's just way too distracting.

UPDATE 2

Based on some of the feedback, I've created a PCB version of the header. The tracks are there for decorative purpose. I went with a white PCB so the header section is still clean. I also ditched the chip metaphor for the links, and went with press buttons instead.

I updated the background grid pattern, to a 5x5 as @reemrevnivek suggested. I also gave it a slight hint of a yellowish tone. This will help to distinguish between the main site and the Meta site. (Meta will be a desaturated version of the main).

The question header text is now in serif.

Answer 1

Name:

There's been some discussion about the name. "Electronics" is a section in a department store; we already get a quite a few questions about consumer electronics. We don't really have many robotics questions, there have been at least 3 separate efforts to create such a site, we've historically welcomed them, but that hasn't taken off at all. I think we need to resolve this before we launch. My vote is for "Short Circuit" - Easy enough to distinguish from consumer electronics, could encompass robotics, but not necessarily, keeps with the Stackoverflow/Serverfault name scheme, 'SC' isn't taken, and I'm sure someone could come up with a tagline for it.

Somebody (not me today, sorry) ought to start a new question (not this one) to get the name straightened out. Thursday is coming pretty quick, though.

Graph paper

Engineering paper traditionally has 5 squares to the inch, and each inch is slightly bolded. It's also a yellow-green color that probably won't render very nicely, but we don't have to duplicate that :). I still imagine that these lines are present when I look at the current design, which doesn't actually appear to have any bold lines as best I can tell. The current design puts bold lines horizontally every 6th line to delineate the questions. Could this be adjusted to 5, extended across the page, and/or added vertically as well? I agree that graph paper is a good fit for the site, but I think that a few minor tweaks like that would help us make a slight distinction from the "Sketchy" theme used for the beta sites.

Tags

Love the tags.

Breadboard

The breadboard has too many dots in too small a grid. Especially on the right side, my eyes get dizzy if I try to count the dots. Real breadboards are not as tight: the power rails have groups of 8 or 10 holes, and the gap down the middle is a touch wider. Not a big deal, but if it could be both better looking and more realistic, why not do so? See this answer for some dimensions and a picture.

Wiring

If we use 5x7 LED matrices, you'll need 12 wires for each one, or 296 wires wires for all 24 letters in "Electronics and Robotics" (Not that the name is guaranteed, see #1). This is next to impossible to do on a standard breadboard, and isn't going to be possible for this logo (with discrete 5x7 matrices for each letter).

More importantly, the chips used for the Questions/Tags/Users/Badges/Unanswered are not straddling the center gap. This means that pin 1 is shorted to pin N, pin 2 to N-1, pin 3 to N-2, etc. Kinda useless. I see that it's necessary for this layout, which certainly doesn't have to be a working circuit, but you said you were wanted to work on those details.

<Long circuit description>
The only circuit that I can see having correct wiring for the logo is a character LCD driven by an "Ask Question" microcontroller. A datasheet for a fairly standard version is here (white/blackish-blue would be fine colors; it doesn't have to be green). Pins 1, 2, 15, and 16 will go directly to the power buses, pin 3 will need a resistor divider between the rails, and pins 4-10 need to go to the microcontroller. Leave 11-14 unconnected.

For the microcontroller, a good ol' PIC or ATmega should do fine, here's the datasheet for the Atmega. Pins 1, 7, 8, 20, and 22 need to go to the power rails. A little yellow ellipse on pins 7 and 8 could represent a decoupling cap.

Feed the LCD pins 7-10 into 2-5 and 4-6 into 26-28, or alternatively put pins 7-10 into 23-26 and pins 4-6 into any of 27, 28, and 15-19.

A ribbon cable (either rainbow or grey w/ red stripe, that's a decision for a graphics person - Not me) for the LCD connections will make things look much better.
</Long circuit description>

A mouse-over of the link should invert the highlighting for the first character, representing the LCD cursor. Reversing all characters would also work if you want it to stand out more. I'm not a web dev, so I don't know what's possible for this mouseover action.

If you think this shows promise, I'll mock up a design tonight. Describing it in text format, though long, was a lot faster than me and gimp/Photoshop. Do you like colored pencils? :)

Since the right side of the microcontroller would be mostly unused, a few tactile switches, perhaps in a directional pad and enter/back buttons, could be a nice addition. Bonus points if they let you move the cursor back and forth on the LCD, and 10,000 Internets if you can make it play "Colossal Cave Adventure".

Schematic

The subtle schematic on the background is excellent. I'd like it a touch more visible, but that's probably just because I'm curious right now. If it could be a schematic of the design implemented in the logo, that would be even better. Alternatively, Randall of XKCD drew up a pretty nice schematic a while back that would be perfect for this location...

Answer 2

Answer 3

It looks nice, but the breadboard and DIP ICs give it a solidly "hobbyist" feel.

Imagine if the server fault theme incorporated an image like this:

Answer 4

How about replacing the breadboard with PCB tracks? (of course, ideally it would be a real design...)

(excuse the shockingly poor mockup)

http://oi56.tinypic.com/2vmc8b4.jpg

Here's some great inspiration.

I really like this one, it combines electronics and robotic elements:

Answer 5

The breadboard idea is good, it's all very clean.

One concern is that it might not be obvious that the buttons in the header (the chips) are buttons. A rollover effect could help though.

I don't know how others feel, but I prefer the serif font from: https://tex.stackexchange.com/ and https://math.stackexchange.com/

I think it looks more like a textbook, kind of authoritative.

What icons will you use for the vote up/down arrows?

Great work, thanks.

Answer 6

As far as using a real PCB, using a soldermask color besides green should open up where you can go if that helps any. It also allows you to jam in more (faux or otherwise) complexity but still subtly hide it behind said soldermask.

In my mind I was thinking something like the 3-D view in Altium.

Complex (real...ish) board:

Uses less-bland colors in 3-D vis (and you can still see the traces, though not well in this low res shot):

Answer 7

This will probably not be popular. But comparing the Breadboard and the PCB, I really think the breadboard is visually more attractive.

I understand people wanting to reference the professional PCB, but lets embrace the fact that we accept hobbyist into the fold, what electrical engineer has not used a breadboard during the site?

People may disagree, but I really enjoy the look of the Breadboard.