
Step by Step UI Design - sgdesign
http://sachagreif.com/ebook
======
samstave
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.

Thanks!!

~~~
bobbydavid
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.

~~~
newhouseb
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.

------
jwarzech
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!

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

~~~
kareemm
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!

~~~
sgdesign
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.

~~~
pefavre
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.

~~~
SatvikBeri
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>

------
jc4p
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,
    	MIME_HEADER_CTYPE_ONLY=1.039, MIME_HTML_ONLY=2.299]
    

and it looks like the message came directly from a web server piped through
postfix rather than anything with anti-spam protection

~~~
sgdesign
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.

------
odddogmedia
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.

~~~
sgdesign
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.

~~~
andos
_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.

------
tdrgabi
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.

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

~~~
mattmanser
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.

~~~
accountoftheday
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.

------
logical42
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.

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

------
dm8
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.

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

~~~
minikomi
<https://gist.github.com/d5882b9ce4c52cb56cf1>

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

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

~~~
sgdesign
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.

~~~
cdmwebs
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.

~~~
jurre
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?

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

~~~
sgdesign
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
:)

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

[https://sachagreif.qx.ly/confirmation/?merchant_return_link=...](https://sachagreif.qx.ly/confirmation/?merchant_return_link=click+here&form_charset=UTF-8)

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

------
dmils4
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!

~~~
sgdesign
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!

~~~
dmils4
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!

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

------
kaens
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.

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

------
sgdesign
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/>

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

~~~
sgdesign
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.

------
zpk
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.

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

------
spking
"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!

------
ciniglio
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.

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

------
mrceedubs
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.

------
ryanhuff
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?

~~~
sgdesign
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…

------
swah
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/>

------
watmough
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.

------
fourmii
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...

------
marquis
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.

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

------
bira
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?

~~~
sgdesign
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.

~~~
bira
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.

------
weirdcat
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)?

------
firefoxman1
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.

~~~
skadamat
double that!

Gumroad.com would be ideal for things like this!

~~~
sgdesign
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.

------
swah
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 :)

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

------
justjimmy
Appealing website. Great eBook. Fantastic Price.

TAKE MY MONEY.

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

PS: Is that Gotham Rounded?

~~~
sgdesign
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>

~~~
justjimmy
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!

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

------
quangv
Pretty cool offering, $2.99 for eBook,

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

~~~
quangv
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

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

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

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

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

~~~
sgdesign
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 :)

~~~
hv23
sounds good, grazie!

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

~~~
sgdesign
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 :)

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

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

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

~~~
sgdesign
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 "."

~~~
mvs
I thought so:) thanks for clarifying!

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

Thanks!

~~~
sgdesign
Sure, drop me a line via <http://sachagreif/contact>

------
instakill
Just got myself a copy.

------
Spearchucker
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.

~~~
sgdesign
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?

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

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

