

Design 0.101 for Programmers - skorks
http://www.cykod.com/blog/post/2010-01-design-0101-for-programmers

======
rimantas
Take the idea, but don't try to learn HTML and CSS from this post. This is
bad:

    
    
      <div class='header'>Basic Information</div>
    

Don't you ever use anything like this—HTML has a nice set of dedicated header
elements.

There are the cases when you need to wrap your ULs into DIVs, but most of the
time

    
    
      <div id='main_menu'>
        <ul class=menu'>
    

Can be replaced by simple <ul id="main_menu">

Some CSS tips:

a) don't specify units for zero values. 0px is the same as 0em is the same as
0pt—you get the idea. So plain 0, not 0px.

b) properties that accept four values (like margin or padding) allow some
shortcuts: if the only one value is specified, it is applied to all sides. If
there are two values, the first is used for the top and bottom, the second for
the right and left. If there are three values, the first is for the top, the
second for the right and left, the third for the bottom. This often comes
handy. E.g. "margin:15px 0px 10px 0px;" can be written as "margin: 15px 0
10px;"

The easy way to remember what is the order of the four values is mnemonic
TRouBLe: Top, Right, Bottom, Left.

c) If your color values look like #xxyyzz you can use short form #xyz. So #999
instead of #999999, #abc instead of #aabbcc.

~~~
Groxx
hah, "TRouBLe", haven't heard that one. That's kinda useful... most mnemonics
I've seen typically mean I have to remember _more_ rather than less. Heck,
about the only other one I've found useful is "roygbiv", and that's more about
being pronounceable.

Any particular reason for not specifying value types on zero? As in, is there
a difference in how it's interpreted? Or is it just for code style?

~~~
pavel_lishin
I always just thought of it as a clock. Start at noon, and go.

~~~
Groxx
I've done both this and the compass too. "TRouBLe" just feels like it's in
real competition in my brain for prime spot, instead of a clock (compass died
out a while ago).

------
patio11
Programmers never start an article about web programming with "First, we're
going to need a web server. No problem, though, because we can quickly whip
one up using..." (Well, maybe if they use Lisp.)

Here's my Design 101: OSS web design exists (StyleShout for nice web2.0 stuff,
oswd.org for the rest). Dirt freaking cheap web design exists.
(themesforest.net or any of a thousand competitors.) Spend five minutes, grab
something you like, get back to solving problems for customers. If you want to
do something more pretty later, you can always pay a real designer and then
tweak the view layer a bit.

~~~
mseebach
Most themes available seems to be for blog/CMS style sites, but most of my
work are semi-internal CRUD apps. Any recommendations for themes suitable for
this?

~~~
patio11
Totally not compensated for this mention: ~$15 will buy you any of a few dozen
great CRUD themes from ThemeForest. Again, you're an engineer -- $15 is less
time than it even takes to read the linked article.
[http://themeforest.net/searches?term=admin&type=files](http://themeforest.net/searches?term=admin&type=files)

~~~
mseebach
Ah cool, didn't think to search for "admin". No, $15 is absolutely not a
dealbreaker.

------
sorbits
I highly recommend The Non-Designer’s Design Book by Robin Williams for all
non-designers out there.

It goes through basic stuff which is important to pay attention to when
“presenting information” (designing) such as proportions, whitespace,
alignment, repetition, etc. Also basic stuff about using different fonts.

~~~
Groxx
Just nabbed it from my library. Excellent looking book after a quick skim-
through, it explains a lot of the reasoning behind design choices and their
effects, something most design books either lack or are weak in. Or assume a
higher level of knowledge of art concepts / terms.

------
rriepe
The "no defaults" rule is super important. It gets you out of the habit of
just leaving stuff as-is, and into the habit of making design decisions.
That's all design _really_ is: A series of decisions. If you're not making
them, you're not designing.

~~~
zokier
On the other hand your users will lose flexibility and choice if you force
some property. If you are unsure of your design, why not follow the users
_preference_ then instead of forcing something you _guess_ looks nice.
Specifying serif/sans-serif is always somewhat ok, but I don't see the need to
be more specific.

edit: what I meant was if you aren't going to put any thought on actually
selecting some nice font then I don't see any point in specifying some generic
fonts (like arial/verdana in the example) just to not use the default. You end
up looking generic anyways, but when using default fonts (serif/sans-serif),
then you look at least the way your users prefer.

edit2: bit unrelated; I noticed that the example specifies font-size(and other
properties) in pixels (px). I'd think that's bad practice, as I try to promote
resolution independence.

~~~
Groxx
I'll generally agree, as I like my preferences followed, and I'll generally
disagree, as _truly_ good design hinges specifically on many minor things like
that. Not that other setups wouldn't work better, or that there aren't
equivalently effective styles that are entirely different, just that minutia
_really_ adds up in a really polished product. If generic / "just" functional
is truly your goal, then yes, I like serif / sans-serif too, but the defaults
on some systems just don't read well, and a lot of people don't know how to
change them.

Yeah, I know, I'm being contradictory no matter how you look at it. There's no
"happy medium" in this, though, everything sacrifices something.

@edit2: same here. Especially as it only specifies the _height_ of the font,
and different fonts could easily take up more or fewer lines, breaking rigid
constructions at least as severely as different heights. I think a lot of it
comes from designers largely working in pixels, and slicing images to be
recreated as a relatively static website. Many artistic people are quite bound
by physical medium, which can't stretch like a website can. Add to that the
hideousness of earlier IE versions, and browser incompatibilities, and static,
pixel-based formats make life easier for a lot of people, despite being
technically inferior in a lot of cases.

edit: oh, and slightly unrelated (though on the site), I despise different
colors on text links, unless ALL links are clearly links (like this site).
They break up my quick-parsing of a document, and I read too much to waste
more time than necessary (curse you, hacker news! You've devoured my life!).
Of course, this is controllable by me through a user stylesheet, but some
sites get it _right_ , so I don't want to break those...

