9 ms·
Step by Step UI Design
- sgdesign 15y agoBy 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/ http://kandan.me/
- AndrewHampton 15y agoKandan looks interesting. Just curious, why have a private beta for an open source app?
- sgdesign 15y agoI 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.
- thehodge 15y agoJust bought the book and signed up for the beta :) very exciting
- johnx123-up 15y agoJust curious, is it from Asia? (name sounds so?)
- SingAlong 15y agoOh no. The name in Japanese means "way of the Samurai". The founders are American.
- spking 15y ago"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 15y agoThis 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 15y agoGlad you liked it! I was about to suggest Rails Tutorial, that's how I learned Rails myself. Very good book!
- sritch 15y agoIs this all just visual design? Or are you showing how to actually integrate it into CSS or however it will be implemented?
- SingAlong 15y agoJust the visual design. The app is still in development.
- sgdesign 15y agoNo, 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 15y agoI 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 15y agoWell, 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?
- josephcooney 15y agoI love how you assume all designs eventually get implemented as CSS. Priceless.
- bira 15y agoAs 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 15y agoThat'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.
- dmils4 15y agoHave 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 15y agoI 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 15y agoFair 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 15y ago
- Spearchucker 15y agoIt 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 15y agoSorry 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 15y agoPlease don't dumb down your sense of humour for people who get offended every time someone sneezes in a dream.
- lhnn 15y agoComing from "Spearchucker", I can hardly consider his criticism of silliness valid.
- odddogmedia 15y agoI, too, took it literal. Could be because this community is made up of very literal folks.
- sgdesign 15y agoThere, changed it. If people still take this one literally, I don't know what to say…
- hv23 15y agoMy browser keeps freezing at the PayPal step. Any other way I can give you my money? ;)
- firefoxman1 15y agoThis 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.
- odddogmedia 15y agoThe 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 15y agoThanks 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 15y ago3. 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.
- ssttoo 15y ago[].slice.call($$('li.hidden')).forEach(function(l){l.className=""}) in the console shows all quotes :)
- tvon 15y agoAside, the displaying of lightbox images is not something that should be added to browser history.
- jc4p 15y agoSeems 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 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 15y agoSorry about that, not sure if it's a problem on my end or on Quixly's (http://quixly.com http://quixly.com). If anybody else encounters that situation, drop me a line (http://sachagreif.com/contact http://sachagreif.com/contact) and I'll send you the eBook directly.
- samstave 15y agoJust 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!!
- sgdesign 15y agoI 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…?)
- zpk 15y agoI 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 15y agoJust added a line to say I don't cover HTML/CSS, thanks!
- jwarzech 15y agoFor 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 15y agoOnly on HN can you get compliments on your pricing model. This is why I love this place :)
- kareemm 15y agodude, 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 15y agoI'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 15y agoObviously 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 15y agoFrom 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>
- dm8 15y agoLooks 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 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 15y agoAgreed, but I used an existing lightbox script (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ http://www.no-margin-for-errors.com/projects/prettyphoto-jqu...) and didn't have the courage to tweak it too much.
- minikomi 15y agohttps://gist.github.com/d5882b9ce4c52cb56cf1 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
- marquis 15y agoThis 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 15y agoThe payment process is actually outsourced, I used Quixly (http://quixly.com http://quixly.com). So I can't change that, sorry…
- Gazler 15y agoDoes the PSD work well in the GIMP? Or are there the usual layering and font issues?
- sgdesign 15y agoSorry, can't help you with this… drop me a line on http://sachagreif.com/contact http://sachagreif.com/contact and I'll send you the PSD. If it works, you can buy it then :)
- mvs 15y agoWondering why the price shows up as $5,99 and not $5.99 - typo?
- quangv 15y agoPretty cool offering, $2.99 for eBook, I've never seen anything like this offered on Hacker News before... very nice!
- quangv 15y agoI 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
- logical42 15y agoi 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 15y agoHad the same issue, pressed esc to get out but that's not very intuitive.
- justjimmy 15y agoAppealing 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 15y agoAlmost, 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 http://chengyinliu.com/whatfont.html
- justjimmy 15y agoWow 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!
- c4n4rd 15y agoLet me know if you are interested in translation (pt_BR) Thanks!
- sgdesign 15y agoSure, drop me a line via http://sachagreif/contact http://sachagreif/contact
- fourmii 15y agoJust 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...
- aschobel 15y agoClicking 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=click+here&form_charset=UTF-8 https://sachagreif.qx.ly/confirmation/?merchant_return_link=...
- _frog 15y agoI had the same problem but I still got an email for the download link so it's no big deal.
- Dejital 15y agoI am incredibly tempted because of that price point! What a wonderfully accessible price.
- watmough 15y agoExcellent. 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.
- mrceedubs 15y agoAdmittedly, 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.
- swah 15y agoI 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 15y agoNo, it's a web app. Although I think most of the advice applies equally well to Mac apps.
- ryanhuff 15y agoJust 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 15y agoI 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…
- christiangenco 15y agoI love the way this is structured, and the pricing model was absolutely perfect. TAKE MY MONEY
- sylvinus 15y agoSacha presented this live at the latest parishackers.org meetup and it was brilliant. He deserves every bit of success ;-)
- sgdesign 15y agoThanks 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 :)
- instakill 15y agoJust got myself a copy.
- tdrgabi 15y agoI 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 15y agoI'm really not sure that's true. I'm in the UK and it is very widely used, accepted and trusted.
- mattmanser 15y agoFurthermore 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 15y agoAnecdote: 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.
- swah 15y agoI'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).
- kaens 15y agoI 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 15y agoThanks for the feedback, glad you found it useful! I'll be sure to remove the __MACOSX folder for the next update.
- conradr 15y agoBrilliant price point. I thought, £3.89, that's cheaper than a grande latte with extras. No brainer!
- deleted 15y ago[deleted]
- swah 15y agoChecking 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/ http://365psd.com/day/2-106/
- weirdcat 15y agoJust 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)?