13
\$\begingroup\$

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.

Design mockup for the homepage

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

Revised mockup

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.

| |
\$\endgroup\$
  • \$\begingroup\$ Looks like Pingswept and Joby were busy moderating that day, or rather, on March 4th and August 31... \$\endgroup\$ – Kevin Vermeer Mar 15 '11 at 19:43
  • \$\begingroup\$ others seem to be very picky, I am happy with what you have so far! Thanks for working on it. I look forward to the next revisions! \$\endgroup\$ – Kortuk Mar 15 '11 at 23:53
  • \$\begingroup\$ Launch today at 3pm EST! See this chat. \$\endgroup\$ – Kevin Vermeer Mar 21 '11 at 14:19
7
\$\begingroup\$

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

| |
\$\endgroup\$
  • \$\begingroup\$ Note: My comments about wiring are assuming that we stick with the breadboard, and just want to fix the design to be more correct. I'm not at all committed to the breadboard. \$\endgroup\$ – Kevin Vermeer Mar 16 '11 at 1:43
  • 2
    \$\begingroup\$ wow, this is a lot of feedback. Just.. wow :) \$\endgroup\$ – Jeff Atwood Mar 16 '11 at 8:27
  • 4
    \$\begingroup\$ I really liked the name "Short Circuit". \$\endgroup\$ – Daniel Grillo Mar 16 '11 at 13:41
  • \$\begingroup\$ thank you for the feedback! I edited my original post. I'm considering a PCB header instead of the breadboard. Of course, it will have to be clean looking still. This will take care of the wiring issue, hopefully. I'll update the grid paper pattern. \$\endgroup\$ – Jin Mar 16 '11 at 17:20
  • \$\begingroup\$ @Jin - Great! Thanks! \$\endgroup\$ – Kevin Vermeer Mar 16 '11 at 22:18
4
\$\begingroup\$

enter image description here

Electropus

| |
\$\endgroup\$
  • \$\begingroup\$ I think him placed somewhere and small would be a nice touch. \$\endgroup\$ – Kortuk Mar 16 '11 at 8:35
  • \$\begingroup\$ @markrages where is the image from? is it a public domain image we can use? It may make a nice 404 or captcha image. \$\endgroup\$ – Jin Mar 16 '11 at 16:36
  • \$\begingroup\$ It's Electropus, the Chiphacker logo. \$\endgroup\$ – markrages Mar 16 '11 at 16:48
  • 1
    \$\begingroup\$ My understanding is that Little Bird Electronics had something to do with founding Chiphacker. Marcus Schappi (@littlebirdceo on Twitter) might be able to confirm the copyright status \$\endgroup\$ – Toby Jaffey Mar 16 '11 at 16:51
  • 1
    \$\begingroup\$ Why does he only have 7 appendages? \$\endgroup\$ – Nick T Mar 17 '11 at 2:25
  • 1
    \$\begingroup\$ @nickT, the other one is hidden using metamaterials. \$\endgroup\$ – Kortuk Mar 17 '11 at 15:42
2
\$\begingroup\$

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: enter image description here

| |
\$\endgroup\$
  • \$\begingroup\$ No, I think it would be more like this... Or would that be a wire-wrap design? \$\endgroup\$ – Kevin Vermeer Mar 15 '11 at 21:05
  • \$\begingroup\$ thanks @reemrevnivek, that captures something of the feeling of looking at DIP-packaged parts. Not just hoobbyist, but old hobbyist. \$\endgroup\$ – markrages Mar 15 '11 at 22:50
  • \$\begingroup\$ That was my concern in chat, breadboards are increasingly the exclusive domain of hobbyists. Professionals simply can't use them except in rare cases as everything new is SMT-only and/or can't handle the characteristics (RF) \$\endgroup\$ – Nick T Mar 16 '11 at 0:43
  • 2
    \$\begingroup\$ @NickT, but I think we all remember the breadboard days and it may help us connect with others with a breadboard, while still enticing hobbyist. \$\endgroup\$ – Kortuk Mar 16 '11 at 6:02
2
\$\begingroup\$

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:

| |
\$\endgroup\$
  • \$\begingroup\$ It took me a second to realize that the designs on that board were not normal silk/traces. I didn't expect that! \$\endgroup\$ – Kevin Vermeer Mar 15 '11 at 22:18
  • 1
    \$\begingroup\$ I think that PCB tracks are a great idea. \$\endgroup\$ – Kortuk Mar 15 '11 at 23:59
  • 1
    \$\begingroup\$ Despite my comments earlier, I prefer the breadboard design to PCB tracks. Because every other electronics site on the internet uses PCB tracks. The breadboard just looks attractive and clean. \$\endgroup\$ – markrages Mar 16 '11 at 0:50
  • \$\begingroup\$ @markrages, I see what you mean, the image that is already designed is very nice. \$\endgroup\$ – Kortuk Mar 16 '11 at 14:31
  • \$\begingroup\$ I don't agree with this post, but i really appreciate the effort which went into the design!! +1 \$\endgroup\$ – LeanerRocky May 4 '11 at 12:35
2
\$\begingroup\$

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.

| |
\$\endgroup\$
  • 1
    \$\begingroup\$ @Joby for the vote arrows, I'm thinking an amplifier symbol: assets.allbusiness.com/asset/image/glossaries/4966604.gif what do you think? \$\endgroup\$ – Jin Mar 15 '11 at 20:33
  • \$\begingroup\$ And I'm assuming that you'd use the inverter for the down arrow? \$\endgroup\$ – Kevin Vermeer Mar 15 '11 at 21:06
  • 2
    \$\begingroup\$ Another benefit of the serif font will be that it will better match the TeX font. \$Inline\mbox{ }TeX\mbox{ }looks\mbox{ }out\mbox{ }of\mbox{ }place\$ right now. \$\endgroup\$ – Kevin Vermeer Mar 15 '11 at 22:20
  • 1
    \$\begingroup\$ @joby @reemrevnivek I can certainly change the font to serif, especially for the TeX reason. It's worked well for TeX.se and Math.se. \$\endgroup\$ – Jin Mar 16 '11 at 16:41
  • \$\begingroup\$ @Jin - You wrote "The question header text is now in serif." That's a good look, but my concern was mostly about contrast with the TeX markup in body text and comments. \$\endgroup\$ – Kevin Vermeer Mar 17 '11 at 1:52
  • \$\begingroup\$ @Jin, I like the serif also. \$\endgroup\$ – Kortuk Mar 17 '11 at 15:43
2
\$\begingroup\$

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:

enter image description here

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

enter image description here

| |
\$\endgroup\$
2
\$\begingroup\$

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.

| |
\$\endgroup\$

You must log in to answer this question.

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