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/
"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.
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.
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.
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.
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!
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.
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?
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.
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.
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.
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.
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.
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.
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..
-------
EDIT:
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 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.
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!
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 :)
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>
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
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.
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.
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 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.
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).
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!
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...
120 comments
[ 3.2 ms ] story [ 195 ms ] threadBut 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.
I love the informal style so far and the fact that you essentially dive right in without too much of a preamble. Nicely done!
There are lots of Photoshop and CSS tutorials out there already, so I thought it was more interesting to focus on different things.
Or if you know of a resource that details this process, I'd read that, too.
Seriously, have a great life.
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!
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!
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!
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.
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.
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?
Gumroad.com would be ideal for things like this!
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.
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.
That's also a usability issue with the lightbox UI. I couldn't figure why the "close" button was not working, either.
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:
and it looks like the message came directly from a web server piped through postfix rather than anything with anti-spam protectionI 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..
-------
EDIT:
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.
Thanks!!
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…?)
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!
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.
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.
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!
<Insert standard "this may not apply to everyone but is an interesting datapoint" caveat here>
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.
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
I've never seen anything like this offered on Hacker News before... very nice!
Thanks :) Brilliant
TAKE MY MONEY.
Seriously though, thanks for providing me something to read on the subway.
PS: Is that Gotham Rounded?
P.S.: The WhatFont extension is your friend :) http://chengyinliu.com/whatfont.html
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!
Thanks!
https://sachagreif.qx.ly/confirmation/?merchant_return_link=...