Design Secrets For Engineers | Hacker News Reader

Design Secrets For Engineers

eng.pulse.me

126 pointsjeanhsu38 comments

I hate to be that guy, but this isn't "Design Secrets For Engineers", it's "Design Secrets For Software Engineers." (or developers/UIX/etc).

"Keep visual hierarchy in check" and "Use designer fonts" isn't very useful advice in designing an instrumented hammer...

"Engineering," especially in the colloquial usage of the word, covers a lot areas that have things in common, but there are lots of things those areas don't have in common. Software engineering /= all of engineering anymore than mechanical engineering represents all of engineering.

Fortunately, like a good interface, it is immediately and clearly obvious what the function of the article is.

I think it's safe to say that any mechanical engineers that may have read this article were smart enough to realise that the target audience wasn't them.

True; your parent is just reacting to the pervasive habit software engineers seem to have, wherein they refer to themselves as if they are the only kind of engineers.

Which is particularly annoying if you think software developers shouldn't be called engineers.

>it is immediately and clearly obvious what the function of the article is.

Not really - I am a mechanical engineer (by degree, acoustical by practice) who took the title at it's word and tried to see if author was trying to share an insight that could be applied to engineering in general. "Line things up" and "Design the white space" is something I could see an author trying to apply across disciplines (not that they did, but again, I was taking the title for what it was and tried to get something out of it).

It's when I got to "Use designer fonts" that I realized it was yet another article where the author used the term 'engineer" to refer to "software engineer."

You could just as easily say it should be "Software Design Secrets for Engineers" right?

I hate to be that guy

Then don't be. It's posted on HN - the context makes it pretty obvious.

If a computer could trivially work out it was likely to be about software engineering using Bayesian reasoning ("engineer" in title AND posted on HN) then a person should be able to as well.

>It's posted on HN - the context makes it pretty obvious.

I've read (and commented on) all kinds of front-page articles of interest to non-software hackers & engineers, including articles on the economy, construction projects, healthcare, education, transportation, and other issues:

I'm not aware that this is a forum that caters to software-only topics. Please enlighten me if I am mistaken. I'm certainly not a software guy and yet HN is one of my go-to sites because I am a hacker.

Bayesian reasoning is actually "given the Prior X, what is the likelihood that Y is true" ?

What you are referring to is the far more simplistic Boolean reasoning.

Sorry, you are right - I was lazy when I wrote that.

I should have stated it like this: given "engineer" in title AND posted on HN what is the likelihood that it refers to a Software Engineer.

It should really be "Visual design secrets for software engineers."

It's kinda irksome how graphic designers try to own the word "design." Design is a vital part of all engineering, software or otherwise.

This feels like it could go on and on. These are not secrets either. And this is not for all software engineers, just for those who need to design web pages.

> I hate to be that guy (...)

Still, it's good you are. It's not a discussion board, people talking about tangential issues are (IMO) one of the best things you can see on HN.

Also, I tend to think that 'software engineering' is the least engineering-like of all engineering disciplines.

What secrets? It feels like I'm reading the exact same design tips (alignment, fonts, colors) at least once per month on some blog linked from HN.

yes! Maybe would be better to have a commentable hacker wiki section.

First sentence:

If you are a designer like me, you must be asked on a regular basis to “make it look pretty.”

I thought this article was for engineers?

Here engineers do end up doing some sort of design. To a designer these things I imagine are bare basic. To an engineer maybe not.

I like it, and most of the advice is pretty good.

However, I have one concern- for the past few years, it seems all engineers and designers have been feeding off of each other's ideas, and this has resulted in websites that look nearly identical in color schemes, typeface, and wording.

This makes each successive product less and less distinguishable and boring. I think breaking free from design norms (as long as rules of simplicity are followed) is a good thing. It is what will make users think "wow, this is something I haven't seen before" and thus probably more likely to use it and tell others about it as well. Of course this assumes clever design sense which I believe is something people possess naturally and can't really be taught.

What are the design norms we need to break free from?

I think it largely depends on the product and audience you hope to attract. But for starters, I would like to see fewer sites with a large, bold, Helvetica font against a plain background with an intro that says something vague about what the business does. Then the large "Sign Up Now For Free" button with rounded corners that slightly illuminates when you mouse over it.

Look, I'm not shitting on other people's work. Building something original is tough, but I do think that clever design is one of the best ways a new service can set itself apart from the rest, and I think that it is an opportunity that is often missed.

I never thought of using KeyNote to design a UI. I always thought designers use Photoshop or InDesign for that purpose.

Is KeyNote used just for the ease of use, or is there some other requirement that the Adobe products don't measure up to?

There are no rules for what to create your UI in.

I have used everything from Keynote to PowerPoint, to Photoshop, to illustrator, to indesign to FireWorks and a number of other applications.

KeyNote is fairly good as long as we are talking overarching UI

I'm a big fan of OmniGraffle for this purpose. A lot of the same arrangement snaps and all, and it's extremely simple to create primitives and text and whatnot.

i use inkscape or open office's presentation tool all the time... or sometimes scripts that make svg files depending on what it is, or hell notecards and a pen! :P

Keynote is really nice for mockups. It has more than capable drawing tools and the snapping is excellent. It's major benefit over a Photoshop or Illustrator would be its relative simplicity. With mockups that is a big factor. Less complexity in the tool can mean less opportunity to add complexity in your design.

Not only drawing, but as the author suggests, sequence. Keynote makes it trivial to play and reorder the deck to try how things could flow from view to view. Quite harder with PS or AI.

A good friend of mine has been a lead designer at a number of big companies and he also uses Keynote to mockup UIs. For $20 it's not much of a risk to try it.

I like Fireworks much better than Photoshop for mocking up web or mobile UI too.

I used PowerPoint for prototyping UIs and designs for HTML letters. It's quite handy tool for the task. The nice thing is that you can just throw shapes onto a slide and then when you run the slideshow, you get a full-screen version of your graphics, cropped to the slide boundaries. Simplifies a lot of stuff for me.

Illustrator is awesome. Also, pencil and a piece of paper. Sometimes I create physical models of complex UI objects if I need to grasp their animations/behavior. Some designers I knew liked Balsamiq, or Blend, but everyone knows how to draw on paper.

It would be harder to design in Photoshop, methinks, since when designing you're dealing with abstract shapes and lines (vector) not raw pixels (raster). I mean sometimes you do :) I created and prototyped this cool video-preview control entirely in Paint.NET, literally changing pixels to create gradients.

Yes, YES, a thousand times yes.

Advise is good, but the author says you should have 2 or less fonts and 3 or less colors. The picture he uses to show this: minimum 5 colors.

In the H/S/L view of color overal, "2 colors" may mean 2 different hues, presented with many different Saturations and Lightnesses.

Good general advice. One remark though: while it is generally better to use designer typefaces, it's important to remember a lot of them weren't designed for the screen, but paper. As such, Garamond, for example (it's mentioned in the post), which is probably one of the best typefaces made, often doesn't work well on the web.

Beware that designer fonts are expensive! Most people don't realize that fonts bundled with Microsoft Word or Adobe Photoshop might require a license for commercial use!

Just take a typekit account. For $50 a year, you get unlimited fonts on unlimited number of websites. There is an upper limit on traffic, but if you hit that number, you won't mind paying more.

But what about printed materials like business cards and letterhead? You would want these to match your web style.

Very good advice, although this is more of a reminder for designer-wanna-bees, like myself, as opposed to a guide for software engineers. Chances are, really good software engineers are really terrible designers, and they won't understand what you are talking about or why, no matter how hard you try. But try!

A Rosetta Stone for design. About damn time.

Reply on news.ycombinator.com