Step by Step UI Design
sachagreif.com
sachagreif.com
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!!
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>
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,
MIME_HEADER_CTYPE_ONLY=1.039, MIME_HTML_ONLY=2.299]
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.
[].slice.call($$('li.hidden')).forEach(function(l){l.className=""})
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.
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.
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
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.
https://sachagreif.qx.ly/confirmation/?merchant_return_link=...
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.
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.
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.
I love the informal style so far and the fact that you essentially dive right in without too much of a preamble. Nicely done!
I look forward to reading it tomorrow.
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?
For example, how would use those elements on a web UI? http://365psd.com/day/2-106/
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.
Seriously, have a great life.
Gumroad.com would be ideal for things like this!
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!
I've never seen anything like this offered on Hacker News before... very nice!
Thanks :) Brilliant
Thanks!
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?