Hacker News new | past | comments | ask | show | jobs | submit login
Step by Step UI Design (sachagreif.com)
315 points by sgdesign on March 20, 2012 | hide | past | favorite | 117 comments

Just bought the 5.99 Deluxe with PSDs -- Ill reply back after I have a chance to review it.

I just want to say, the 2.99 was an awesome price point - from an incentive to buy stand point. With 5.99 including PSDs it seemed like a no brainer.

I love cheap learning materials like this. It would be sweet if there was a standard e-learning app on the ipad and I could buy the courses through that app for $1.99 where all the courses were tech focused.

Khan Academy is awesome, but I want good materials that could even be things like Adrian Cockrofts cloud tutorials etc..



Ok, I read the doc and here is my review.

1. The overall concept of this is fantastic, and I think the example UI you show is clean, elegant and beautiful.

2. I would have liked to see an initial explaination of a thought process on what to first write down, in pencil, about the elements you would have in the UI. Help me know what you, as an expert, may intrinsically know - or be able to do in your head based on experience.

3. Prior to page 20, your example UI image jumps from place to place, then 20+ (mostly, except page 28) it is in the same place, this allowed me to scroll through the doc and quickly flip back and forth to visually compare steps. It would be better if all UI examples were in the same place.

4. To further item 3; I strongly feel this doc would be far better if it were in landscape format. I am reading this on a screen, and it is a PDF. Portrait wastes a ton of space and makes the overall content scaled smaller as I try to see a single page on my monitor at a time.

If you were to put the doc in landscape with all notations and commentary to the right hand side, ideally using 11x17, as the page size, this would be a hell of a lot more consumable. (It is an e-book first. Dont worry about people who print to 8.5 x 11 as much. (I make a LOT of graphic documents for all my clients, and every one of them is 11x17 because the information density and clarity balance on 11x17 is far more than 8.5x11

5. The fact that you included links to examples and resources throughout the document is fantastic.

Overall, I liked this and it was worth my purchase, but i think the formating could be improved for easier consumption.


I figured with people selling iOS games that take months of development for $0.99, an eBook shouldn't be much more expensive than that… Plus my main target for this eBook is hackers and entrepreneurs, and since design is not their main field I wanted to make it as easy as possible for them to give the eBook a try.

And I agree that a $1.99-a-course tutorial marketplace would be very cool. Seems like there's already a lot of startups in this space (Skillshare, Udacity, Khan Academy…?)

Thanks for the detailed feedback! Really appreciate it! Next time I come out with something, remind me of your comment and I'll send it to you for free :)

2. I skipped this step because chatroom apps are fairly common, and I didn't want to reinvent the wheel. But you're right, for most apps you'd start out with pen and paper to figure out which elements to include and the general layout of the thing.

3. Bad decision on my part, sorry. I thought it would be too boring to have the exact same layout on every page, but when you put it like this it does make more sense.

4. Good point as well, for some reason once I decided to write an eBook my mind went straight to a book-like portrait format.

Changing the format now would take a lot of time so I don't think I'll do it, but I'll definitely consider it from now on. Thanks!

Re #2: I'm also curious about how you go about deciding what UI elements should be on the page. When I sit down to design a UI, I have the hardest time deciding on what blocks to plop down. Should 'this' be a button or a link, or should 'that' be emphasized or de-emphasized? Do I even need this element on the page? I usually feel like I'm so far off on these large scale questions that the finer points you describe aren't worth worrying about yet.

Any chance of a second UI ebook dedicated to these (trivial to experts, I'm sure) concepts? I'm a developer at heart, not a designer. Design doesn't come easy. -----

P.S. Some months ago I deleted my account with Paypal for moral reasons. When I tried to put in my credit card info, Paypal recognized my card as belonging to a deleted account and refused to accept my payment. Grrrrr.

I agree - I'm not sure whether to call what I find most challenging "Interaction Design" or "User Experience," but there are a lot of elements of design that are neither technical nor aesthetic. In the chatroom example, there isn't much involved because it appears to be so generic, but as you innovate more and more, this ID/UX becomes increasingly challenging.

One slightly related design problem would be, for example, how the buddy list on facebook chat works. One could classify users into groups, allow you to 'pin' a user at the top, expose more ways to have group conversations. While, one could always argue for the simplest possible solution (i.e. one big list!), it's not always the best for the user and I would read anything that helps in guiding processes to discover and decide what is best for the user. In my experience, good UI is often far less controversial than good ID/UX and less of an issue when keeping a team happy and excited about a product. All of the biggest issues where I work have been on a much bigger paradigmatic level that we debate on philosophical grounds endlessly to little avail.

Totally agree, for me the hardest part is the kickoff where you have an idea in your head and need to visualize it on paper before actually starting designing the UI. I would definitely pay for another e-book that handles the conceptual phase of an interface/application!

I'd just like to second this. Would be very interested in something that can cover the initial pen and paper processes for UI design.

For me the pricing model is perfect for something like this. $2.99? thats right in my 'don't even think about it' impulse range. $5.99 for additional features? I'm already paying $2.99, its not much more AND I get more stuff. Bravo!

Only on HN can you get compliments on your pricing model. This is why I love this place :)

dude, i think taking pricing advice from most people on HN will put you in the poor house. i think you charged way too little. when it seems like a stupidly amazing bargain, it usually is!

i heard an axiom once re: pricing that you want customers to be begrudgingly, but willingly, paying you. that's when you know you're charging enough :)

either way - thanks!

I'd rather make people happy they found a good bargain and reward them for being early adopters than try and milk out every last cent out of this. So it's cheap on purpose for now, but I'll probably raise the price in one week or so.

Obviously a low price with thousands downloads is way better than a higher price with only hundreds of purchases. $2.99 * 5000 > $10 * 500 Time will tell but I'm pretty sure this is a good strategy.

From my personal e-book experience going from $.99 to $9.99 cut down sales by about 90% (so it was the same amount of revenue, but higher processing fees), and going to $49.99 only decreased sales by a further 33%-so $49.99 was massively more profitable! This was over thousands of e-books by the way, not any particular one.

<Insert standard "this may not apply to everyone but is an interesting datapoint" caveat here>

Same with me. I saw 2.99 and I thought, totally worth it and then I saw the version with the PSD at 5.99. Figured, might as well.

that was exactly my thought process, I've found technical ebooks < $10 are a pretty much instabuy as I know I'll be stuck on a train one day looking for something to read

Seems like the backend's gone down because this is the page I got redirected to after finishing up on Paypal: http://i.imgur.com/zolMq.png

Edit: Went back to Paypal by hitting my back button and redirected again and the receipt shows up now. I couldn't tell that that page wasn't the download link but I would get one in the mail because of the contrast of the text and the e-mail that was sent went directly into my spam folder.

SpamAssassin results:

    X-Spam-Flag: YES
    X-Spam-Score: 5
    X-Spam-Level: *****
    X-Spam-Status: Yes, score=5 tagged_above=-999 required=4
	tests=[HTML_MESSAGE=0.001, HTML_MIME_NO_HTML_TAG=1.661,
and it looks like the message came directly from a web server piped through postfix rather than anything with anti-spam protection

Sorry about that, not sure if it's a problem on my end or on Quixly's (http://quixly.com). If anybody else encounters that situation, drop me a line (http://sachagreif.com/contact) and I'll send you the eBook directly.

The design/development community can definitely benefit from guides like this. Love the idea.

However, if you wouldn't mind some helpful criticism:

1. I think the landing page could benefit from a product shot above the fold, especially to balance the tagline "An eBook about Unicorn Insults" so as not to confuse.

2. I want to click the big orange "button" at the top so bad. It looks like a button. Other buttons on the page have this same exact style. But, I can't click it!

3. The rotated "move" icon in place of the "close" button on the lightbox is rather confusing. I still see it as a move icon. Maybe it's just me, though.

4. I had no idea clicking on the unicorn at the bottom would load new quotes. Perhaps an indicator that this is the action would be helpful.

I'm sure you've done great work and have worked with many big-name startups, but, sorry, the landing page presents like amateur hour. Not to insult, just my first impression.

Thanks for your detailed feedback!

1. I thought about using a 3D mockup of the eBook, but I figured it was a little cheesy. After all, it's a book, people know what it looks like. I know, I know, that's not how you sell stuff…

2. I made the title look like a button on purpose since the book is about user interfaces. Probably not the greatest idea I've had…

3. That's actually not a close icon, but an "expand" icon. You can just click anywhere to close the lightbox

4. This is an easter egg, so I didn't want to make it too easy. Seems like you found out anyway :)

I'm definitely open to criticism. For my defense, I should say that I design my own stuff differently than I would design for a client. So I'm willing to give up a couple sales if I can inject some more personality in the design.

3. That's actually not a close icon, but an "expand" icon. You can just click anywhere to close the lightbox

That's also a usability issue with the lightbox UI. I couldn't figure why the "close" button was not working, either.

in the console shows all quotes :)

I tried to buy the deluxe edition but stopped when paypal kicked in.

Was burned before while paying with paypal (money got stuck, took a long time and lots of papers to get it back, the payment didn't even go through), promised myself I won't do it again.

For lots of people outside of US, paypal is not really an option. How about google checkout?

Don't know what it takes to integrate with it as a seller, though.

I'm really not sure that's true. I'm in the UK and it is very widely used, accepted and trusted.

Furthermore Google checkout doesn't even work in many non-US countries and is incredibly buggy.

The three times I've tried to use it I've never been able to pay in the UK using different computers, different cards and different browsers.

It probably works at the moment, but it's still shockingly crap for a google product.

Just search 'Google Checkout not working', the general murmurings is that it breaks a lot. I'd link it but google has also fucked up being able to copy your search results without bleeding personal information. Sigh. They really are turning into a mediocre company.

Anecdote: the only fraudulent credit card charge throughout my entire life occurred shortly after signing up for Google Checkout. There was a $300 adwords charge on my account, and I do not even have an adwords account, so this clearly defied account physics. I asked $GOOG but their black hole customer disservice never bothered to explain what had happened. I no longer trust Google.

I'm in Brazil and pay all the time with PayPal, never had any trouble (I'd be more cautious if I was on the receiving end, though).

i was interested in this book until i tried using the site, and promptly got stuck inside the lightbox which i couldn't seem to get out of, not matter how many times i pressed the X in the top right hand corner.

Had the same issue, pressed esc to get out but that's not very intuitive.

Looks good. But I have a design suggestion for you.

Based on general heuristics, lightbox image button on top-right corner (http://imgur.com/a/LoQ6D) should be to close lightbox image rather than expand it. Its confusing and there is no other way to close it apart from clicking in the background page.

Agreed, but I used an existing lightbox script (http://www.no-margin-for-errors.com/projects/prettyphoto-jqu...) and didn't have the courage to tweak it too much.


I changed the click event bound to the expand button to the close function for you.. Chrome developer tools does a pretty good job at unminifying js

Is this all just visual design? Or are you showing how to actually integrate it into CSS or however it will be implemented?

No, it's purely visual design. It's more about the theory behind design choices than the actual practical matter of designing and coding the UI.

There are lots of Photoshop and CSS tutorials out there already, so I thought it was more interesting to focus on different things.

I bought this book and will happily buy the next one if you'll cover the process of slicing that PSD and converting it to HTML. I'm capable, but I always feeling like I'm working too hard when I do it. I'd just like to see how a professional does it, I guess.

Or if you know of a resource that details this process, I'd read that, too.

Well, the app is open source so you will be able to check out how they implemented it. It's not a complete guide but it could get you started maybe?

Just the visual design. The app is still in development.

I love how you assume all designs eventually get implemented as CSS. Priceless.

Sacha presented this live at the latest parishackers.org meetup and it was brilliant. He deserves every bit of success ;-)

Thanks a lot! Presenting the material live helped me out a lot, I've even incorporated some feedback I got that night in the final version of the book :)

Clicking on the '"click here" if you are not redirected' on paypal.com sends me to an empty confirmation page with SSL errors.


I had the same problem but I still got an email for the download link so it's no big deal.

Have you thought about releasing this as a KickStarter project? Might be good from a marketing standpoint?

The design of this page is sort of hard for me to get through - I know you intentionally made it informal, but maybe something to consider.. I'm a huge fan of the products you've designed, but not a fan of this layout for presenting the book. Specifically, it's way too much work to find the area to buy it, and there's no real call to action (or clarity) above the fold when the page first loads. The unicorn insults thing - feels like you stumbled into an inside joke, not an incredible ebook by an awesome designer. Just my $.02, I'm not sure if you were even looking for feedback on that but figured I'd share.

Looking forward to downloading it!

I would love to use KickStarter for something one day, but it should be something that I really couldn't achieve by myself. I wouldn't want to use KickStarter as just a way to collect pre-payments and test the market, I don't think that's what it's about.

Sorry you don't like the design, but I honestly can't really agree that it's "too much work" to find the "buy" buttons: you just have to scroll one screen. I have a hard time imagining there are people out there who desperately want to buy this eBook, but are thwarted by the 300 extra pixels… After all, not every site has to scream "buy!" "buy!" in people's face.

That being said, thanks for taking the time to write down your feedback, I appreciate it!

Fair enough on KickStarter - I've seen it used in both cases. I think with your resume the community over there would really enjoy it, but fair enough.

Re the design, all I meant by too much work is that I actually needed to look for where to buy. It's obviously a clean set up, there's just not much information that shows up above the fold that makes me want to scroll down (it was the comments in this section and the title of this post that even got me to your page). But yeah - obviously you've thought through it and it's your thing. Good luck with it!

You definitely make some good arguments, thanks again for sharing your feedback :)

Here's a KickStarter idea:

1. Make a micro-dock for the iPhone that includes a functional tiny keyboard. 2. For super cool points, make it look like a Compaq 5250 (Pentium class) laptop, with scaled proportions.

The screen on those was 800x600 with quite a big border, so there's room to work with.

my 2 cents: put it on Appsumo

I just read this, and absolutely thought it was worth reading (and paying for). I, unlike you, love art museums, but I'm not incredibly good at knowing what's going to look clean, let alone pleasant or useful in a UI -- I write a lot of code, and a lot of it doesn't hit the UI directly.

Reading this gave me enough exposure and links to more in-depth stuff and useful resources in a dense enough format that it was actually useful, I've been casually looking for a primer like this for a while.

A minor suggestion: remove the `__MACOSX` folder from the generated archive.

Thanks for the feedback, glad you found it useful! I'll be sure to remove the __MACOSX folder for the next update.

By the way, the app that I'm designing in this eBook is a Rails+Backbone.js open-source chat app, kind of like an open-source Campfire. I'm working on it in collaboration with the Bushido (YC S11) guys. It's not out yet, but if you're interested you can sign up for the upcoming beta here: http://kandan.me/

Kandan looks interesting. Just curious, why have a private beta for an open source app?

I think it's mainly to make it easier to manage user feedback.

But the annoying sign up form is there because the app is not ready yet. As soon as it's functional, people will get access fairly quickly.

Just bought the book and signed up for the beta :) very exciting

Just curious, is it from Asia? (name sounds so?)

Oh no. The name in Japanese means "way of the Samurai". The founders are American.

I wish some of details were spelled out when posting these sorts of e-books. Visual Design, vs. the Design + the JS, CSS and HTML is a significant difference. My guess was that it solely focused on the mockup, based on seeing the psd option. And I would've been upset buying this with hopes of getting the actual code to develop a front-end like this.

Just added a line to say I don't cover HTML/CSS, thanks!

"If the word 'design' evokes images of stylish yet comfortable office chairs that retail for thousands of dollars, UI design would be more like finding a way to build subway benches that homeless people can’t sleep on."

I love the informal style so far and the fact that you essentially dive right in without too much of a preamble. Nicely done!

This looks awesome. Does anyone know of something similar for backend / program design (not UI, but actual code architecture)? I.e. step by step building of some application/program and watching how design decisions and refactoring decisions are made? Rails tutorial is the closest I've seen and that doesn't get very complex.

Glad you liked it! I was about to suggest Rails Tutorial, that's how I learned Rails myself. Very good book!

Admittedly, this is me being ridiculously lazy, but others are lazy too, so I will share. I probably would have read through the whole thing tonight, but I'm on my ipad, so it downloading as a zip file is a bit of a pain. A more mobile-friendly option would be nice.

I look forward to reading it tomorrow.

Just took a look at your sample chapter. Looks neat!

I have a question. I have been playing with landing page design recently, and just started using Google web fonts. I found it interesting that you excluded Google web fonts from your list of font resources. Was there a reason for this?

I just figured most people already know about it. And if you don't, then you should probably read up on typography first before I give you access to 100s of free fonts to use on your site…

Checking out some resources like 365PSD, I find many of those PSD gorgeous, but I have no idea how do you use them on websites.

For example, how would use those elements on a web UI? http://365psd.com/day/2-106/

Excellent. The first few pages look great. Really nice layout and decent typography.

I barely know what a PSD is, so I cheaped out with the $2.99 edition, way less than an egg sandwich from Starbucks.

Hopefully this will help give me some inspiration for an iPhone app I want to build.

Just bought a copy with the PSD. As everyone here have said, the price point for both bundles make it a no-brainer. I would say that the lightbox expand and contract was confused for close. It took me a few clicks to work out. Love the fonts btw...

This is perfect timing, am embarking on a new UI. Just a note: the payment page has really light text that is hard to read, you may wish to consider making the font color a little darker. Otherwise I enjoyed the payment process, rather unique.

The payment process is actually outsourced, I used Quixly (http://quixly.com). So I can't change that, sorry…

As a curious beginner intrigued by the cheap price tag, what can I do with the extra PSD files, besides opening them and having a closer look at on Photoshop?

That's pretty much it. You can see how I organize my Photoshop file, what kind of effects I use, and maybe copy some styles or textures for your own designs… I know most people won't have a use for the PSD, that's why there's a cheaper price point as well.

Thank you very much. It's so generous of you to share your expertise at such a price point that almost feels like stealing :)

Seriously, have a great life.

I very much appreciated the PSD. Definitely learned a couple techniques I wasn't aware of beforehand. Thanks!

Just got the deluxe version and I'm wondering, what percentage of buyers chose this one from the two? Could you share some numbers (or at least percentages)?

This looks like a perfect opportunity for the author to use GumRoad. I still haven't seen anyone using it, but I'd like to see it in action.

double that!

Gumroad.com would be ideal for things like this!

I considered using it, and in fact, I'm currently writing an article for Smashing Magazine comparing various options for selling digital goods. I'll probably try it out for my next product.

I almost bought this thinking it was about web design, but from the screenshots its a Mac app... that is a little bit confusing to me :)

No, it's a web app. Although I think most of the advice applies equally well to Mac apps.

Appealing website. Great eBook. Fantastic Price.


Seriously though, thanks for providing me something to read on the subway.

PS: Is that Gotham Rounded?

Almost, it's Proxima Nova Soft, a similar sans-serif. Gotham Rounded is not available as a webfont because Hoefler & Frere-Jones haven't come out with a webfont service yet, so Proxima Nova (and its Soft variant) is very popular as a "replacement" around the web (although don't get me wrong, the font is just as beautiful as Gotham on its own).

P.S.: The WhatFont extension is your friend :) http://chengyinliu.com/whatfont.html

Wow thanks man!

You should put a Gift option on the site (as a nudge nudge), I know plenty o designer friends that will find your book helpful and at 3/6 bucks, I'll gladly gift a few!

Brilliant price point. I thought, £3.89, that's cheaper than a grande latte with extras. No brainer!

Pretty cool offering, $2.99 for eBook,

I've never seen anything like this offered on Hacker News before... very nice!

I just wanted to review the book, so far (half way through) I'm learning a lot! like the juxtaposing trick and the lorem text tip.

Thanks :) Brilliant

Aside, the displaying of lightbox images is not something that should be added to browser history.

I love the way this is structured, and the pricing model was absolutely perfect. TAKE MY MONEY

I am incredibly tempted because of that price point! What a wonderfully accessible price.

My browser keeps freezing at the PayPal step. Any other way I can give you my money? ;)

drop me a line at http://sachagreif.com/contact and I'll send you the eBook, you can pay me later once your browser feels better :)

sounds good, grazie!

Does the PSD work well in the GIMP? Or are there the usual layering and font issues?

Sorry, can't help you with this… drop me a line on http://sachagreif.com/contact and I'll send you the PSD. If it works, you can buy it then :)

So it seems the PSD doesn't work in GIMP after all, sorry :(

If you have a Mac you could try Pixelmator it is significantly cheaper than Photoshop and supports PSD importing.

Wondering why the price shows up as $5,99 and not $5.99 - typo?

I suspect this is because I'm French, so Paypal assumes my customers are too — And in French, we use the "," to separate integers from decimals, not the "."

I thought so:) thanks for clarifying!

really? How do you separate thousands? $5,999,00 ?

Let me know if you are interested in translation (pt_BR)


Sure, drop me a line via http://sachagreif/contact

Just got myself a copy.

It looks really awesome. Unfortunately that line "Order now! Quantities are limited!" means I won't make the purchase, where I would typically have made one to support what otherwise looks like a professional site and useful tool.

I've seen the tactic before. Create a sense of urgency through scarcity. Scarcity makes people buy.

Seriously? Limited quantities of a digital asset?

Having seen most marketing tricks (starting with the best one of all - "lather, rise and... repeat") I may be a little too sensitive to it.

Sorry if that didn't come across, but that was indented as a parody of obnoxious sites that create false scarcity. By definition, a web product like an eBook can't be limited in quantity. So I thought the humor would be clear.

But I hadn't considered that there are sites that use this tactic even to sell eBooks or subscriptions, so I should probably clarify this… Curious to know if other people got the joke or took it literally?

Please don't dumb down your sense of humour for people who get offended every time someone sneezes in a dream.

Coming from "Spearchucker", I can hardly consider his criticism of silliness valid.

The 12.7 million copies remaining was a huge indicator to me it was joke

12.699.999 copies. I just bought one.

I, too, took it literal. Could be because this community is made up of very literal folks.

There, changed it. If people still take this one literally, I don't know what to say…

I just read it ("Order now! Only 12.7 million copies remaining!") and found it amusing. Not sure what the other version was.

You can't always please the literal internet.

In fact, I'm buying it because of this (amongst other good reasons). Love this line!

THAT version is funny. So funny in fact, that I am now the proud owner of the deluxe edition!

Thanks for helping me improve my copy then :)

No, I think that's hilarious. If anything, the comments here supporting you will help teach some humor skills to those of us don't need the lesson in social interaction.

This is crazy. It was totally hilarious. 12.2 million digital copies remaining! ORDER NOW!

Got the joke, thought it was hilarious. :) Esp the 12.7 million copies remaining part.

Applications are open for YC Summer 2023

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact