35 ms·
Rules for developers to design beautiful UIs without a designer
- duringwork12 4y agothis is an ad
- chillbill 4y agoLooking at the first example given I think this book is the one missing the mark. I genuinely have trouble when things have less borders! I don’t care about things designed to seem nice, I want them to be usable!
- thelogicguy 4y agoI think this is probably somewhat a pitfall of using this example as a lead. Design rules like "fewer borders are better" don't tell the story well, but they're easy to teach people. It's harder and less grabby to say something like: Over reliance on borders to separate types of content can lead to designs where contrast between elements is too sharp and it's harder to read through information. Designers should have a sense for information hierarchy and follow that through in their application. Have a point of view and use the visual design to express that. Tools you can use to create that hierarchy are things like borders, shadows, fills, scale, and space. Using all in concert, you can make a design that feels harmonious, but also allows users to freely navigate through the interface. That advice is probably harder to grok, and isn't as punchy because it can't be used as a simple diagnostic (do we have fewer borders?), but it is realistic.
- gretch 4y agoIt seems like this page/preview conflates interaction design with aesthetic/cosmetic design. Interaction design is like “which buttons even exist?”, “should this input be represented by a radio or a drop down?”, what is the navigation hierarchy? You won’t automatically be good at interactions even if your sense of aesthetic is good.
- deleted 4y ago[deleted]
- csdvrx 4y agoOTOH, I'm using full screen apps without decorations, and I'm fighting with edge to forcefully remove all the scrollbars on every website automatically (I want 0 scrollbar unless I'm actively scrolling) different tastes for different people
- david422 4y ago> (I want 0 scrollbar unless I'm actively scrolling) How do you know when there is content to scroll then? You randomly scroll parts of the screen to see if they move?
- csdvrx 4y ago> How do you know when there is content to scroll then? You randomly scroll parts of the screen to see if they move? Sometimes, but more often I press on page down to read more content until there's no more content to read, so having scrollbar is pointless: it eats screen real estate without providing anything in return
- TapamN 4y agoI loathe things "magically" disappearing and reappearing. I want a predictable, consistent interface. I can work faster when things are consistent. Scrollbars, besides allowing me to jump around in a document, give me an indication of where I am on the page. When I ask, "How much of this page/window/document is left? About where am I in it?" (a common question) the answer should be RIGHT THERE and not unhelpfully hidden/unavailable or difficult to see. I shouldn't have to waste time fighting to find out.
- csdvrx 4y ago> I loathe things "magically" disappearing and reappearing. I want a predictable, consistent interface. I do not want the trackbar to magically disappear. I want it gone for good, unless I ask for it, which is predictable and consistent. > I can work faster when things are consistent. Scrollbars, besides allowing me to jump around in a document, give me an indication of where I am on the page. I work faster with a good concentration, which is helped by a lack of UI clutter (FYI I use my browser in fullscreen mode because I find buttons and tabs distracting) Hitting the touchscreen, doing a gesture on the trackpad (or the trackpoint), or pressing pageup then pagedown gives me context when I need it and if I need it. The rest of time, I don't want no scrollbar. > When I ask, "How much of this page/window/document is left? About where am I in it?" (a common question) the answer should be RIGHT THERE and not unhelpfully hidden/unavailable or difficult to see. I shouldn't have to waste time fighting to find out. When I do any of the above, the scrollbar is here. The rest of the time, I shouldn't have to waste my concentration on a useless indicator nagging me on the right side of the screen.
- ssgodderidge 4y agoI get where you're coming from, but I don't think they are saying to never use borders, but instead use them intentionally. They explain better than "Use less borders" below: > Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered The example screenshot on the page shows a use case where they want to highlight a single row from a table, and using less borders is great for that. However, if they were trying to increase readability of the table overall, they may choose to keep the borders in place for contrast.
- wruza 4y agoThey used the same type of border over the first example, of course it doesn’t work. It’s “our genius design vs average nonexistent nonsense” type of move. Make table/list grid less pronounced, make the selection hint more saturated than a field bg, and now it looks better than #2. Their selection looks like a hover hint in both cases as if they were afraid to tell a user that a row may have a selection on it.
- BiteCode_dev 4y agoSame, I really prefer the design on the left. Easier to see things, and it makes you feel you can click on elements.
- thiht 4y ago> it makes you feel you can click on elements This is not intrinsic to the design, just a force of habit. The design on the right looks perfectly clickable to me.
- augustk 4y agoIndeed. In the "correct" version the search field looks almost like a highlighted item in the list. With many modern user interfaces you really need to be trained in the current conventions to see which elements you can interact with. Compare this with the typical unstyled HTML.
- thiht 4y agoI came to the comments specifically to talk about this first example. I also think the left design is not a bad design. It's just a different style, but both are valid. Maybe the one on the right is more trendy but that's it. The other examples are more sensible, but this specific one is just the author forgetting about subjectivity.
- BoorishBears 4y agoIs fighting "flash of unstyled text" part of that?
- owlbynight 4y agoSkeleton UI (Svelte + Tailwind) is how I go about it. The developer experience is very good. As for the UX, that's mostly just a matter of actually thinking about how people will use the app and taking the time to account for it. In my experience, bad UIs are a product of laziness more than know-how.
- kmarc 4y ago> just a matter of actually thinking about how people will use the app What I learned during my professional career is that this is exactly what 80% of engineers are absolutely incapable of. Do belong to the 20% and hit the jackpot.
- justeleblanc 4y agoYou've basically just answered "with a brush" to the question "how do you think I should paint my wall". True, but irrelevant. You can make a ugly, unusable UIs with your listed frameworks. You can make amazing, smooth UIs with plain HTML+CSS.
- hoofhearted 4y agoI’m not sure if you realized it or not, but Steve and Adam created this book and then went on to create Tailwind CSS shortly after.
- clumsysmurf 4y agoOften the bad designs come from the designers themselves. Just as software developers often fall prey to "NIH", many designers feel the established design systems like Material are insufficient for some reason. That is OK, if you know the rules you can break them, but often they don't know the rules either (grid system, typography, color for accessibility) and want to make "their own mark" with some new creation that is highly idiosyncratic. This doesn't help much, but as in software, it seems to come down to "taste" which is nebulous. In the landing page for this book, there is an example of good (right) / bad(left) design. I have seen designers simply not know what to do with empty space, so they had to fill it with dividers, outlines, and doodads like the left design. I'd like to hear any strategy one has to deal with that. I have taken up Figma and Sketch so I can meet them "where they are" but still, plenty of disagreements can happen.
- drBonkers 4y ago> Just as software developers often fall prey to "NIH" What does NIH abbreviate?
- AgentOrange1234 4y agoNot invented here, probably?
- gdprrrr 4y agoNot invented here
- unsupp0rted 4y agoNot invented here (I.e. if we didn’t make it then it’s either bad or bad for our use case).
- augustk 4y agohttps://en.wikipedia.org/wiki/Not_invented_here https://en.wikipedia.org/wiki/Not_invented_here
- throwway120385 4y ago
- gwbas1c 4y ago$100 for a book is steep, especially when it's a pdf.
- chankstein38 4y agoA pdf that seems to contain "high quality" examples like "use fewer borders" where the example made several commenters, including myself, say "That's worse." Not sure why I'd pay $100 for a PDF anyway but I'm sure as heck not doing it when the kind of advice breeds less usable pages.
- Bishonen88 4y agoThat's a 4+ years old book, too.
- joebiden2 4y agoIt's really hard to take the HN guidelines here at face value. It's hard to suppress the thought that this has been upvoted by a SEO-bot army.
- chankstein38 4y agoagreed 100%
- test1235 4y agohow is this not just an advert? I don't get it.
- jimmytidey 4y agoAs other commenters have noted, surely the goal should be to make usable designs, of which looking beautiful is a small part?
- eviks 4y ago> [design courses] focus so much on high level principles like color theory and typography which, while important, never helped me make instant improvements Strange, making the very low contrast text more visible on this site is an instant improvement, and it's right there in the "color theory"
- moffkalast 4y agoIt's also right there in the "common sense theory"
- samhuk 4y agoThe line between "an advanced, niche concept" and "common sense" is very blurry. It's continuous, not discrete. What you think it common sense is probably not for a considerable proportion of other people. Regarding the actual topic at hand though, I actually do agree with you (hence disagree with OP), since I do believe that mastering concepts like color theory and typography are indeed extremely low on the extensive priority list of things to master to create great UIs. I've been building them, and convinced people to pay me quite handsomely for them, for quite a considerable amount of time, and never have I had to deep-dive into typography, color theory, or the like.
- pixelfarmer 4y agoWell, color theory is a vast topic, especially when it comes to color reproduction and so on, but for UI design this is of lesser concern. However, basic stuff like the color wheel, complementary colors, perception of colors in terms of perceived contrast, "signaling" colors, knowledge of optical illusions etc. is pretty much 101 knowledge of anyone who wants to create really good designs. There are many traps you can fall into if you ignore this kind of knowledge. This goes even further with the entire field of cognitive psychology dealing with such things. Typography also plays parts in human facing design, like being able to discern I and l and other such things. You may get by without all that, but I have seen too many cases of broken stuff, and that website from the OP is a big mess, pretty much counterexample of what I call "good design".
- PaulBGD_ 4y agoLooks cool, but what do I gotta do to get an actual printed book? Would love something I could physically reference.
- itronitron 4y agoJust read the Tufte books for guidelines as well as inspiration. https://www.edwardtufte.com/tufte/books_ei https://www.edwardtufte.com/tufte/books_ei
- asoneth 4y agoSeconded the Tufte books, especially to learn about the principles of visual communication. Though as a fan who has all his books and attended multiple lectures, I have to admit that his forays into interaction design were... underwhelming.
- web3-is-a-scam 4y agomy current rule is to ask ChatGPT to do it for me
- chankstein38 4y agoAre you memeing or are you serious? Because I'm curious how you'd have a language model design a page for you. Just ask it for the HTML and CSS for a nice looking page?
- kyleyeats 4y agoI wrote an app that does this, and yeah, basically. In my experience it's really hard to get it to to stop writing CSS.
- chankstein38 4y agoThat's definitely a struggle I've had with GPT overall haha "Please just stop I don't need 4 paragraphs on that I wanted a sentence"
- kyleyeats 4y agoIt's weird what works. Eventually I asked it for just the body element in its response which categorically fixed the problem. I wish we could presence-penalty single tokens so it wasn't all so abstract. My results if you're curious: http://camarkup.com http://camarkup.com
- web3-is-a-scam 4y agoChatGPT is extremely good at writing HTML and CSS, yes - if you have a basic idea about what you want it to look like the bot can do the rest, including iterate on it.
- chankstein38 4y agoI haven't tried to do that with it yet but I love the idea! I'm going to have to give it a shot! Thanks!
- onnnon 4y agoUse the original title: "Make your ideas look awesome, without relying on a designer."
- chankstein38 4y agoHonestly their first concrete example, with fewer borders, is something that bothers me a lot on the internet today. Cool everything looks flat and like part of everything else. That's not hard to go down through a giant list of or anything... /s
- munk-a 4y agoIt's also important to contrast the information density. Both the "bad" and "good" examples are quite readable but the one on the left is going to be more useful for larger lists of things.
- IMTDb 4y agoTo be fair, the course is about designing beautiful UIs, not necessarily useful ones. Wether that is actually desirable is up to you.
- 411111111111111 4y agoThe goal was beautiful design, not good usability. You gotta admit that it looks good, and eye candy is usually extremely effective for user retention, even if the alternative handles better, technically.
- chankstein38 4y agoI have trouble distinguishing the two as an unusable design is usually automatically worse for me but you're not wrong in making the distinction that they specified beautiful. I guess I wish people would choose functional/usable over beautiful or merge them in a way that doesn't sacrifice the one I find more important! To be fair, I also just generally don't like the look of it without borders and stuff.
- samhuk 4y agoThis could perhaps come off as excessively brutal, but it really is just my true experience in the industry - the worst UIs I have seen (both in terms of UX quality and internal code quality) have been made by that particular kind of developer has has never bothered to go a single inch outside of their little Java/C# box that they were given by their CS undergraduate course, and then, due to some reason like the company doesn't want to hire or move devs around, becomes the senior lead on some big UI piece. The things I have seen... Personally, I think that creating great UIs is not something that can be taught overnight. There is a certain kind of "feel for it" that I think that I have gained through my years of making them; something that I feel like cannot be taught, at least not in some "bootcamp"/"crash-course" way.
- drewbeck 4y ago> There is a certain kind of "feel for it" I definitely agree with this and I think it partly comes down to the fact that product design is always a negotiation between many concerns – all the interface pieces on the view, patterns across views, user expectations, user research, dev LOE, etc. etc. In many ways it's the art of the possible; I say UX is harm reduction b/c there's never a perfect solution for any problem. Work like this is very subjective and always a lot about "feel".
- andsoitis 4y agoBuilding great UI is much more than visualization. It is much more than throwing things into a template. It is much more than making something pretty.
- d0m 4y agoHands down the best book I've read to level up my UI game. Highly recommended to developers who want to get better at UI design with no bullshit and a lot of practical examples.
- hoofhearted 4y agoShoutout Steve Schoger! If you don’t already follow him, you probably should. https://twitter.com/steveschoger https://twitter.com/steveschoger
- thih9 4y ago> Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered. Instead, try adding a box shadow, using contrasting background colors, or simply adding more space between elements. In many cases I like busy and cluttered; I enjoy https://dofsimulator.net/ https://dofsimulator.net/ , I use gmail in "compact" mode, etc. The example listed as "bad" is also interesting; it is busy, which may be unappealing, but it also means higher contrast. Also being "cluttered" lets me simply see more information at once. So if I had to deal with large amount of data, I'd prefer that "bad" design.
- pazimzadeh 4y agoDesign is how it works, not how it looks. This article seems to mainly be talking about the "polish" of a design. There are more important principles which don't have anything to do with polish, such as not putting the Cancel button next to the Ok button. More like this: https://lawsofux.com https://lawsofux.com https://asktog.com/atc/principles-of-interaction-design/ https://asktog.com/atc/principles-of-interaction-design/ https://www.nngroup.com/articles https://www.nngroup.com/articles I recommend prototyping the flow/feel of the app before working on the polish, or the functionality: https://principle.app/ https://principle.app/
- mpweiher 4y ago> Design is how it works, not how it looks. I think we're getting confused by fuzzy and overlapping definitions of different scope. Absolutely, design is also how it works. However, how it works is also very much engineering. In fact, I'd argue that the overlap is even stronger there.
- petilon 4y ago> Design is how it works, not how it looks. No, it is not. If you're Steve Jobs then yes, but otherwise how it looks and how it works are usually two different job functions. People who are good at visual design are not usually knowledgeable enough to do functional design, and people who are good at functional design are not necessarily good at visual design.
- illiarian 4y ago> No, it is not. Yes, it is. If it's about how it looks, then it's illustration, not design. > how it looks and how it works are usually two different job functions. Again, no. If you skip functionality in your design, you will end up with an unusable product.
- TuringTest 4y agoBut if you skip the looks in your design, you'll end up with a product that works worse. It may not look rational, but then humans do not have a 100% rational behaviour. https://lawsofux.com/aesthetic-usability-effect/ https://lawsofux.com/aesthetic-usability-effect/
- asoneth 4y agoMost products don't need a whole book: 1) Use a mature, well-designed GUI framework. Especially if you don't have a designer it's unlikely that novel interactions or an unusual visual design will be a key selling point for your product. 2) Find a half-dozen folks from your target user audience or proxies who are as similar as possible. Give them a task to do with your product/prototype while you watch. Let them talk aloud without interrupting. Do this early and often. If you can do those two things you will be ahead of most consumer products and vastly ahead of most enterprise products.
- joebiden2 4y ago3) don't reply to threads obviously created with the intention of promoting some costly product, promising to surpass specialized knowledge, just by spending a few bucks.
- deleted 4y ago[deleted]
- hulitu 4y ago> Use fewer borders. > Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered Of course. Who needs to know where a GUI element starts and where it ends ? Why not click everything until you discover that the label on the lower left has an action assigned to it. /s A very long time ago there was something called "Style guide". But who needs such outdated staff anymore ?
- xk_id 4y agoThis book has been posted on hn before and it’s worth reposting. Highly recommended as a pragmatic and comprehensive guide for principles of UI design. Note that it doesn’t contain any code; it’s purely focused on conceptualising the interface design process.
- hoofhearted 4y agoThe code portion of the book can be found at Tailwind UI. I personally have the Application UI license, and I'm going to upgrade to full access soon. It's 100% worth the cost if you are building out component libraries and repeatable work. https://tailwindui.com/ https://tailwindui.com/
- adelowo 4y agoDo you have experience with Flowbite? Do you think tailwindui is still better?
- kernal 4y agoTheir "incorrect" Contacts example looks better than their "correct" example IMO.
- codybontecou 4y agoI've read this book cover-to-cover and learned a ton of actionable advice so I recommend it. My only complaint is that they don't offer a physical book.
- temp_account_32 4y ago> Use fewer borders. The one with borders looks better to me than the one without, it's subjective. Also the whole post is literally an advertisement to sell some book.
- deleted 4y ago[deleted]
- joebiden2 4y agoOne of the rare moments I simply don't understand how something gets upvoted that much on HN. Edit: this is like "get rich by just following this". It's not wrong, but so much facepalm-inducing, and it's just 100 bucks. Sorry, but: WTF? In my mind there is a bot army upvoting this article at work right now.
- pxoe 4y agoHN has native ads now?
- jasmer 4y agoThis is Design not UX also you can actually get quite far by following those 'rules' you still want to have the meta issues sorted out first before getting to the tweaks. But yes, the notion of practice over art actually does apply - you can make things better in a pedantic way.
- karaterobot 4y agoAs a designer (and former developer) my objection to this is semantic. It's not possible to design beautiful UIs without a designer. The reason is: the designer was you all along. If you are doing design, even half-heartedly, even without knowing it, you are the designer. The relevant questions when it comes to "beautiful UI" are: do you give a shit, and do you have the skill to execute on giving a shit. Most people don't, thus the profession. This book seems to assume the former is true, and wants to give some quick tips on how you can fake the latter. I'm skeptical of this approach, in the same way I'd be skeptical of someone who said "here are 10 tips to make a good program without learning to program". Skeptical, not offended. I'm interpreting the word "beautiful" generously. Beautiful in the same way an equation or algorithm can be beautiful: not just — or even primarily — esthetic, but beautiful in the sense of doing what it's meant to do about as well as can be done. Beauty, truth; truth, beauty, etc. Design is very interesting. I always saw it as a part of engineering: both are interested in finding the optimal solution given a set of constraints and requirements. The tool chain is different, granted. To me, it's fun, and not something I'd want to skip over. See giving a shit, above.
- max_streese 4y agoIs it just me or do prices for a lot of UI/design resources seem high compared to prices of resources on other parts of IT? 100 $ for a 218 page PDF seem quite steep to me.
- Gordonjcp 4y agoYou know, if you're charging $100 for a book, you can probably afford to pay for your own ads too.
- wruza 4y agoUse fewer borders. Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered. Instead, try adding a box shadow, using contrasting background colors, or simply adding more space between elements. Everything I hate in UI right from the start. To the point that I have to re-add #0004 borders in settings.json - workbenchColorCustomizations to make it look decently delineated instead of looking like one muddy blob. Most real world objects have distinguishable 3d borders and we are trained to detect and follow them. I know your designer soul doesn’t like it, but deal with it please. Use a normal amount of borders.
- aeze 4y agoWhen it comes to design, I find organizing and structuring content particularly challenging compared to things like font size, spacing and color choice. eg. Given a list of items to display - should I create a grid of cards, a list, or a table? I feel like you could do any of them, but they have different trade-offs that I can't really articulate. Does this book provide guidance on stuff like that? If not, are there other resources out there?
- jamestimmins 4y agoI, for one, liked the book and refer to it semi-frequently when I'm working on a project. It's good for nudging things in the right direction, even if it can't turn me into a designer.
- kungfufrog 4y agoI must be a philistine because with the primary example used on the landing page I actually prefer the bordered version. It seems clearer/cleaner to me. Maybe it's a vestige of growing up in the 90's writing Access applications on the side for dosh when I was a teenager?
- Rodeoclash 4y agoI thought the same thing. As ugly as all those "WinForms"-esque 90s applications were, they presented dense amounts of information in a usable way, provided you had time to learn the application.
- wpm 4y agoAnd the time it took was probably shorter, since you could just poke around menus full of text that says what the damn thing does, that might open modals or dialog boxes full of buttons that do what they say on the damn button, and icons that gasp, might have had text labels indicating what they do! You could hop in and if your task was reasonably simple, just hop the menus and click on stuff and see if it was what you needed. But no, here's a smear of low contrast grey with some tiny, grey, unlabeled hieroglyphics for buttons/icons, isn't it nice? It's so clean! So pretty! So lacking in discoverability!
- lanecwagner 4y agoThere are waaaay too many comments here hung up on the border example. This book changed the game for me, I consider myself a much more talented UX/UI designer. I can actually make stuff that doesn't suck now. highly recommend.
- retox 4y agoSeeing as this is just an ad does anyone have a link to the free chapters at least?
- dyingkneepad 4y agoI'm not taking any design advice from someone who puts horizontal scrollbars in their sales pitch website.
- amatecha 4y agoIf you want to design high quality UIs, read this book (Macintosh Human Interface Guidelines)[0] and ingest the concepts it explains. Even though it's not 100% applicable to a brand new software product, it may as well be -- most of the principles are totally applicable, and if you grasp the concepts from this book you will hopefully understand how to design a clearly-understandable user interface. [0] https://dl.acm.org/doi/book/10.5555/573097 https://dl.acm.org/doi/book/10.5555/573097 (click "PDF")
- d--b 4y agoFor those who missed it back in the day (this is from 2018): the guys who wrote this later created the Tailwind css library. The book/website is one of the major reason why Tailwind was so successful.
- yawnxyz 4y agoright, this book is really old now.... this book came out in 2018, so shouldn't there be a 2018 tag?
- plaguepilled 4y agoA lot of the examples on their front page I flat out disagree with, both because I hate the aesthetics, and because it represents user experience issues that I or my peers have frequently run up against. For example, borders: I would argue the "more borders" example has it the wrong way around. For users with poor "computer familiarity" (e.g. elderly) the difference in tone isn't always as obvious as it might be to others as their eyesight is already poor. The use of borders then allows a clearer division of shapes without having to commit to a fully high-contrast solution. (also the no borders version looks very silly, but that's just my taste)
- jamsauceismad 4y agoIn my experience, the worst designers I've ever worked with are the ones who tend to be more artsy and care more about aesthetics than functionality/usability. Usable is wikipedia, old reddit, etc. Modern design generally sucks as everything is not information dense and involves a ton of navigation to find what you want to do.
- GoblinSlayer 4y ago>start with too much white space No! Just no! Oh, I get it, if you can't design, teach others how to design.
- dusted 4y agoI guess articles like these are why everything seems bland, flat and unfinished. I disagree on the aesthetics. Borders make it look nice and good. When in doubt, add another border. I think it's an interesting perspective, I've heard it before "you're a developer, so what you think looks good does not look good: Your sense of beauty does not count. It does not matter what you prefer, because you're a developer, and your sense of, your preferred aesthetics are to be disregarded-"
- kazinator 4y agoI overwhelmingly prefer the Contacts window on the left to the one on the right.