7 ms·
Design Secrets For Engineers
- typicalrunt 15y agoI 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?
- ThomPete 15y agoThere 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
- markbao 15y agoI'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.
- th0ma5 15y agoi 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
- joelhooks 15y agoKeynote 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.
- lloeki 15y agoNot 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.
- cageface 15y agoA 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.
- TeMPOraL 15y agoI 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.
- mannicken 15y agoIllustrator 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.
- vladimirm 15y agoGood 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.
- cpeterso 15y agoBeware 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!
- movingahead 15y agoJust 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.
- cpeterso 15y agoBut what about printed materials like business cards and letterhead? You would want these to match your web style.
- Anechoic 15y agoI 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.
- toast76 15y agoFortunately, 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.
- sliverstorm 15y agoTrue; 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.
- sciurus 15y agoWhich is particularly annoying if you think software developers shouldn't be called engineers.
- Anechoic 15y ago>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."
- kirillzubovsky 15y agoVery 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!
- pnathan 15y agoFirst 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?
- ashishgandhi 15y agoHere engineers do end up doing some sort of design. To a designer these things I imagine are bare basic. To an engineer maybe not.
- kleiba 15y agoWhat 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.
- dodo53 15y agoyes! Maybe would be better to have a commentable hacker wiki section.
- dkrich 15y agoI 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.
- vladimirm 15y agoWhat are the design norms we need to break free from?
- dkrich 15y agoI 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.
- mchusma 15y agoAdvise 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.
- aaronblohowiak 15y agoIn the H/S/L view of color overal, "2 colors" may mean 2 different hues, presented with many different Saturations and Lightnesses.
- idan 15y agoYes, YES, a thousand times yes.
- dadads 15y agoA Rosetta Stone for design. About damn time.