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!
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
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.
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.
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.
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 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.
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.
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.
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 :)
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.
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.
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/
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.
"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.
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.
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…
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.
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.
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)?
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.
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!
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 "."
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 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!!