Rules for developers to design beautiful UIs without a designer

https://www.refactoringui.com/

by miraantabrez • 3 years ago

342 238 3 years ago

chillbill• 3 years ago

Looking 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• 3 years ago

I 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• 3 years ago

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

csdvrx3• 3 years ago

OTOH, 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• 3 years 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?

ssgodderidge• 3 years ago

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

wruza3• 3 years ago

They 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• 3 years ago

Same, I really prefer the design on the left. Easier to see things, and it makes you feel you can click on elements.

thiht2• 3 years 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.

augustk2• 3 years ago

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

thiht2• 3 years ago

I 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• 3 years ago

Is fighting "flash of unstyled text" part of that?

owlbynight• 3 years ago

Skeleton 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• 3 years 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• 3 years ago

You'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.

hoofhearted3• 3 years ago

I’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• 3 years ago

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

throwway1203853• 3 years ago

I don't have any strategies, but I've had designers also want to add unnecessary steps to a gui-driven process. One designer kept arguing about the cognitive load of having a user simply insert their credit card into the reader to signal intent to pay. They wanted a flow where the user would touch the UI to indicate whether they wanted to tap or insert or scan a coupon. There was no reason to do it that way. I don't want to get into the specifics but it's a flow everyone uses every day without thinking and we were adding a new input device. It's not like we were inventing an entirely new system. The designer just wanted to make the work more than it was.

nobody9999• 3 years ago

It's not like we were inventing an entirely new system. The designer just wanted to make the work more than it was.

Which is a good reason why fixed-price contracts make more sense in this context than a time and materials contract.

How does the old saw[0] go again?

   It Is Difficult to Get a Man to Understand Something When
   His Salary Depends Upon His Not Understanding It

[0] https://quoteinvestigator.com/2017/11/30/salary/

Edit: Fixed formatting.

JusticeJuice3• 3 years ago

This could be tested with usability studies and a good user researcher. Make a prototype of the 'fast' way, and the 'lower cognitive load' way. Try it with 15 people per prototype, track metrics, and ask people about the experience afterwards. Make sure everyone on the team has an open mind and see what sticks.

iudqnolq• 3 years ago

I hate that specific issue.

Do not ask me if I want to tap a contactless card or insert my card. I'll do one or the other and then you'll know what I want.

I call this dropdown-driven-design. "Our UI builder tool had this option, so we have to use it".

drBonkers• 3 years ago

Just as software developers often fall prey to "NIH"

What does NIH abbreviate?

AgentOrange1234• 3 years ago

Not invented here, probably?

gdprrrr• 3 years ago

Not invented here

unsupp0rted• 3 years ago

Not invented here (I.e. if we didn’t make it then it’s either bad or bad for our use case).

augustk2• 3 years ago

https://en.wikipedia.org/wiki/Not_invented_here

asoneth4• 3 years ago

I think you deal with bad designers the same way you deal with bad developers.

Try not to hire them in the first place, fire them if you can, and if you're stuck with them try to make sure they are occupied with tasks that will not cause too much overall damage.

pelagic_sky2• 3 years ago

The horror stories I hear are usually when a Graphic Designer is given the role of a UX/UI designer. There is nothing that is going to quickly fix that situation other than getting them some much needed education and mentorship.

Zardoz84• 3 years ago

or use "ugly arm" method (I don't know if this is the correct English name of this). Ir, show to they two options. First a obviously ugly option that nobody would use. Then, show your desired option. They would use your desired option, perhaps with some minor changes, and they feel that did something.

23B1• 3 years ago

The solution is to hire better designers, unfortunately. Savvy/wise/experienced ones know when to follow the rules, and when to break them.

Edit: That might not seem like the most helpful advice, and I'm sorry you have to deal with this – but it's the most effective, without having to write an entire book.

This book was written for industrial designers by an industrial designer, but I did find a lot of useful advice in here for designers on understanding the business mind, deferring to clients, embracing constraints and requirements, etc.

https://www.amazon.com/Designers-Are-Wankers-Neville-Brody/d...

JusticeJuice3• 3 years ago

Design is a field where there's no clear 'correct' answer, in a vast sea of opinions. Honestly UI design is surprsingly tame compared to other areas of design (interior, architecture, typography etc). If there's a uni near you, try go to a design critique where work is presented and discussed - it's intense. Debating work is a big part of being a designer.

Strategies to deal with disagreements, frankly a big part of it is being comfortable disagreeing. If you want to get more into design, know they're going to happen, and that there's not a clear answer, and it's not personal. A good designer should know it's about the work and the idea not where or who it came from. Source: am a UI designer.

gspencley• 3 years ago

One of my pet peeves in software development is not doing enough upfront R&D into feature and product design. User feedback is often only collected after the feature has shipped, landed and users are forced to deal with the "upgrade."

It's hard to take subjective matters, such as UI preferences, and draw objective conclusions from them ... but it can at least be done in the aggregate. Before "SaaS" took over software (and made modern computing mostly unappealing to me as an end-user), companies would have to spend quite a bit of resources doing focus groups and "beta testing" before that big product release. End users could be divided into the "early adopters" and the "review watchers", the latter group choosing to wait and decide whether or not it's worth "upgrading."

There is no reason that feature and product design in software can't go through an R&D phase except for cost. It's often cheaper to do your R&D in-house even though it often misses the mark because "real" customers rarely use a product like those who are intimately familiar with all of its quirks and oddities.

So, while you're correct that accessibility, usability and aesthetics will often vary from individual to individual ... I still think that companies could arrive at an objectively "right", or at least "best" design if they bothered to do more upfront R&D; soliciting user feedback and data from "real" end users very early on in the design and development process. Doesn't mean you will please everyone, but you can at least maximize the number of end users who are satisfied.

izacus• 3 years ago

Honestly, I'd just once like to work with a designer that has heard of words longer than 5 letters.

Every. Single. Darn. Design I get completely ignores the fact that the texts inside them won't be built from nice little short words with EXACTLY the correct letter counts (especially when localized).

Which results in shit UIs like one I've just seen on Android where (in my language) the button literally just says "Tap to..." and every single label on a button is truncated and doesn't finish a word.

astrospective• 3 years ago

When I was a tester first thing I’d do was fill every text box with Ws just to see what ran over. Good to remember as a dev now.

jstarfish• 3 years ago

Honestly, I'd just once like to work with a designer that has heard of words longer than 5 letters.

I blame lorem ipsum. And Latin.

pelagic_sky2• 3 years ago

You need to work with designers who are used to supporting localization. Try making a UI using Deutsch and tell me about spacing issues. :D

kitsunesoba• 3 years ago

I agree, but would expand that to all parts of the design dealing with variable data, not just text (think thumbnails, avatars, etc). It’s too common for designs to that were beautiful on the canvas to fall apart once brought to life in the actual product.

Some designers also don’t have a good grip on what’s actually feasible to engineer, adding in various details that in aggregate can bloat the time and effort required to build the design multiple times over.

userbinator• 3 years ago

I've seen many cases of the opposite, where despite plenty of room, text is inexplicably truncated to leave a huge amount of whitespace instead.

amatecha3• 3 years ago

I always tell ppl to test their designs with German content. Usually the longest words, generally speaking, which breaks a very high % of "first passes" on designs.

Razengan2• 3 years ago

the button literally just says "Tap to..."

*taps button*

*Satan appears and claims my soul along with all my firstborns*

It's good to have a little mystery and excitement in life!

illiarian9• 3 years ago

many designers feel the established design systems like Material are insufficient for some reason

Because Material is awful?

In their original iteration they had to do a study with 600 people to find out that text inputs should look like text inputs https://medium.com/google-design/the-evolution-of-material-d...

Their latest abomination has almost nothing aligned optically: https://twitter.com/dmitriid/status/1643607965935476737 When there are 5 elements, they follow 5 different guidelines: https://twitter.com/dmitriid/status/1643682248959328258

That is OK, if you know the rules you can break them, but often they don't know the rules either

And that's the problem with what I call "dribbble-raised designers" ("designers" of Material UI included): they work for the designs to look nice in static screenshots on presentation pages without much scrutiny, and that's it.

illiarian9• 3 years ago

On that note: you can't even imagine how bad Material UI is https://twitter.com/nikitonsky/status/1645797661684170754?s=... and https://twitter.com/nikitonsky/status/1643613144143519744?s=...

KyeRussell• 3 years ago

Yeah. I think that it’s no coincidence that I’ve found it hard to use every Material UI app that I’ve ever come across.

marcosdumay2• 3 years ago

Well, this one is non-obvious:

Label text should be placed within the bounds of the text field box

And I'm perfectly fine with Google spending unreasonable amounts of their money so I can learn lightly-valuable facts like this... As long as people don't mass adopt their findings before they get repeated.

sapling-ginger• 3 years ago

When there are 5 elements, they follow 5 different guidelines:

Pixel-perfect alignment is not a hard rule. It's only for a list of homogenous items would they need to be aligned perfectly.

But when the elements are heterogenous, as the screenshot in your link refers to, the human brain does weird thing to what we see, and alignment has to be adjusted for it to "look right".

This is particularly well-known in font design, with things like variable ascender height, cap height, and kerning.

https://fonts.google.com/knowledge/glossary/cap_height

Note that due to optical illusion, round and pointed capitals (for instance the O and A) will extend a little above the cap height to make them appear as tall as the flat-topped capitals.

deckard1• 3 years ago

not know what to do with empty space

every PM everywhere. They simply cannot leave good enough alone.

Eventually every site A/B tests its way until it becomes Reddit mobile site. No one asked for carousels but sites continue to use them. We are getting inundated with popups today. I don't want to say it's as bad as 1990s flash ad popups. But it's getting damn close now. Bullshit cookie popups. "This site is better on our mobile app" crap popups. Google sign in popup bullshit.[1]

I would say anti-UX and anti-accessibility is very much the point of many sites. "Dark patterns" help conversion and the bottom line. Every site you visit is engaged in psychological warfare with you.

[1] https://support.google.com/accounts/thread/174978821/stop-th...

wolpoli• 3 years ago

Thanks for posting the steps to turn off the Google Sign-in popup. It's annoying that it's buried through.

codedokode• 3 years ago

Google popup is one of the worst, it often covers useful content, the only one that is worse is full-screen "give us your email" popup.

DangitBobby2• 3 years ago

Honorable mentions:

- Newsletter popups - Account creation nags on ostensibly free apps - Vanity flaps crowding the viewport - Sticky social buttons

KronisLV• 3 years ago

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.

One option would be to use a premade design system or a component library/framework that gives you a consistent look and feel, most of those design decisions having a good enough baseline. Then just add a color theme and some branding on top of it and call it a day. It will also increase your development velocity and save you from some pixel pushing.

For an example of this, consider PrimeFaces: https://www.primefaces.org/

They have working components that are good enough (and support multiple themes, if need be), their own icon solution and also a CSS utility library, including stuff like layouts. For most projects it'll be enough to create something that works and looks okay.

gwbas1c• 3 years ago

$100 for a book is steep, especially when it's a pdf.

chankstein388• 3 years ago

A 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• 3 years ago

That's a 4+ years old book, too.

joebiden23• 3 years ago

It'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.

jimmytidey• 3 years ago

As other commenters have noted, surely the goal should be to make usable designs, of which looking beautiful is a small part?

shakow• 3 years ago

Depends on whether you have to sell it.

layer83• 3 years ago

Even worse, too much “beauty” can end up being distracting, and thereby reduce usability. Good UI is like good film music — you don’t notice that it’s even there.

eviks2• 3 years 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• 3 years ago

It's also right there in the "common sense theory"

samhuk2• 3 years ago

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

ASalazarMX• 3 years ago

Crossing into "visitors can't read it if they can't see it theory".

oliverbennett• 3 years ago

The only UI/UX newsletter I subscribe to[0] also has a a similar problem, but the advice is usually solid. Maybe the first and/or last rule should be ‘seek feedback’.

[0] https://user-interface.io/

patternMachine• 3 years ago

The contrast ratio for the body text is 7.57:1 (or 7.25:1 if the text is on the light grey background), which meets AAA accessibility standards (which is 7:1).

layer83• 3 years ago

I can tell you that it still looks rather low-contrast and makes it harder to read for me.

wizofaus5• 3 years ago

Body text isn't the issue I would think - it's various headers, downvoted and especially "dead" posts which are almost to read without selecting the text, even with perfect colour vision.

eviks2• 3 years ago

Why would I care about that standard? I have my own eyes, I also see a lot of other examples of text that don't race to the standard bottom

Also, you've miss the elephant at the top of the page

PaulBGD_• 3 years ago

Looks cool, but what do I gotta do to get an actual printed book? Would love something I could physically reference.

itronitron• 3 years ago

Just read the Tufte books for guidelines as well as inspiration. https://www.edwardtufte.com/tufte/books_ei

asoneth4• 3 years ago

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

onnnon• 3 years ago

Use the original title: "Make your ideas look awesome, without relying on a designer."

web3-is-a-scam3• 3 years ago

my current rule is to ask ChatGPT to do it for me

chankstein388• 3 years ago

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

kyleyeats2• 3 years ago

I wrote an app that does this, and yeah, basically. In my experience it's really hard to get it to to stop writing CSS.

web3-is-a-scam3• 3 years ago

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

chankstein388• 3 years ago

Honestly 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-a3• 3 years ago

It'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• 3 years ago

To be fair, the course is about designing beautiful UIs, not necessarily useful ones. Wether that is actually desirable is up to you.

411111111111111• 3 years ago

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

chankstein388• 3 years ago

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

tmtvl2• 3 years ago

You gotta admit that it looks good

I don't have to, and I'm not going to because it looks like crap. Why is "Cancel" just a word instead of a button? And while "Invite" is marginally better, a rounded rectangle is not much of a button either and doesn't immediately signify "oh, I can click this".

I know some people prefer flat and featureless design (and there are jokes we could make about that), but that is very personal and tastes can vary widely.

Though in the interests of fairness I will admit that there are people who do feel that kind of thing looks good.

bufio• 3 years ago

It looks like bog standard webshit.

munk-a3• 3 years ago

Good usability is beautiful. Valuing aesthetics over functionality is ugly.

amon22• 3 years ago

I also honestly prefer the border example

jasmer2• 3 years ago

It's a bad first example admittedly because it seems very aesthetic, frankly, the borders may theoretically make good UI.

Most workers today don't remember the old Windows forms: they were good UI. Just ugly.

In fact, those 'Windows Forms' were also fast - it was back in the days when almost everything was fast.

chankstein388• 3 years ago

I miss those days... Everything now takes countable seconds to load or do anything... I'm running a 3090 with a decent processor, and 32GB of RAM yet even some of the simplest things take so long anymore.

I miss those ugly forms days specifically too haha I personally prefer UX over any amount of design so I remember being so disappointed when Microsoft started introducing everyone to the concept of flat layouts that don't differentiate sections and just generally don't even look conceptually usable half the time. Give me ugly fast forms over looks any day.

nextaccountic• 3 years ago

I think you could apply their principles to add centered grayed dividers between the lines that don't go through the entire width of each row, maybe 80% or so

This or just alternating the background of each row between light and slightly darker colors

samhuk2• 3 years ago

This 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• 3 years 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• 3 years ago

Building 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• 3 years ago

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

hoofhearted3• 3 years ago

Shoutout Steve Schoger!

If you don’t already follow him, you probably should.

https://twitter.com/steveschoger

thih9• 3 years 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/ , 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.

pazimzadeh3• 3 years ago

Design 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://asktog.com/atc/principles-of-interaction-design/

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/

petilon3• 3 years 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.

illiarian9• 3 years 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.

creativenolo• 3 years ago

No, it is not.

Bold statement for something subjective. I think you are confusing design and art (from your own experience or misfortune). The processes of visual design have informed (or formalised) the design as a process in other fields. Artists have a style as a function. Designers (visual or not) have process. No one is great at everything. Mediocre designers are either too visual or not at all (especially the latter), in my experience. Good to great designers grasp both and have breath. Even the ones that don't have art as a function can direct, steer and brief the art of a project (or be resourceful with it.) But you can't have design without process.

samsolomon• 3 years ago

Any product designer is expected to be knowledgeable about both visuals and ux. There are huge benefits to having people on the product team that can research, assess and design solutions.

eschneider• 3 years ago

For a site about UX, you'd think https://lawsofux.com would have picked a better url. O_o

inanutshellus• 3 years ago

evokes memories of "expertSexChange.com -- err, I mean, ExpertsExchange.com" back in the day.

wizofaus5• 3 years ago

Odd, when I first clicked that second link it opened a page that was virtually unreadable on a mobile device (Android Chrome) - the text literally curved off the left hand edge of the screen. Which made the first sentence "The following principles are fundamental to the design and implementation of effective interfaces[...]for[...]mobile devices..." suggest there was little point reading on. But on reloading in another tab it was basically fine (though I'd argue still not optimal).

pazimzadeh3• 3 years ago

https://www.nytimes.com/1888/07/06/archives/easier-to-give-a...

phaedryx• 3 years ago

Can you really divorce design from appearance? My first clue of how to use something is how it looks.

chadash• 3 years ago

Design is how it works, not how it looks.

I think it's both. Interior designers are primarily interested in aesthetics. Same for the majority of famous fashion designers, who are usually not focused on making utilitarian clothes. It seems like most peoples' definition of design would include the work in those fields. UX is a better description of the aspect of design that cares about functionality and not aesthetics.

Uehreka• 3 years ago

Design is how it works, not how it looks.

After over a decade of people jumping into these discussions with this line, I’ve gotta push back: Design is also how things look, and how things look can be important.

Consumers care about how things look. If we dismiss presentation and drive people towards UX stuff every time it comes up, then the people we talk to are going to end up having good ideas that no one buys because the packaging is a mess.

Yes: If you have a pretty modal but it can’t be dismissed by clicking outside of it, that’s Bad Design. But when you’ve hammered in all those errant nails and built something that works well, often you look at it and go “I wish it weren’t so ugly”. And we do need books/resources to give people the building blocks they need to make an app that people will agree is “basically good-looking”. (And then hopefully more advanced books/resources about particular styles so people can develop their own stylistic voice)

threatofrain• 3 years ago

I'd also note that despite Jakob Nielsen's prominence nobody designs like he suggests. We should be open to the idea that beauty and delight may be more important than usability or features.

lambdasquirrel• 3 years ago

People tend to take care of things that are both well put together and beautiful.

gregbander• 3 years ago

Design like most words has a definition that’s generic so it can be applied as needed. There is no immutable rule when to use it.

The cone of shame my dog has right now “looks cool”; very sleek and streamline for a disposable thing, the designer surely was paid a premium, but the fasteners mechanics were poorly designed; vet tech said even she struggles with them and she puts them on dogs all week.

Design is how it looks and works as “designers” come up with both. The whole idea we can just put our foot down regarding definitions is not at all how reality works since nothing works on divine mandate. It’s relative.

adventured• 3 years ago

More specifically there can be no separation between how something looks and how it works, they're bonded (and for good reason). There is no scenario where you can actually fully break the two apart. Any attempt to try harms one side or the other or both sides. How it works and how it looks go in tandem in all cases, they heavily influence eachother, either making the whole better or worse depending on how you go about creating for that reality.

Anybody telling you different is arguing from a pretty severe bias. If you're designing on the basis of how something works, and not also on how it looks at the same time, you're going to create a subpar outcome.

tshaddox2• 3 years ago

> Design is how it works, not how it looks.
I’ve gotta push back: Design is also how things look

To synthesize these two comments: How it looks is a huge part of how it works.

1letterunixname• 3 years ago

Form and function. The intersection is the qualitative property of subjective taste, an intelligence quality of designers who must balance engineering with art.

somat• 3 years ago

Conversely, A lot of time something looks good "because" it works well.

I had one old structural engineer spend a great deal of time trying to convince me that beautiful bridges were stronger than than ugly bridges. because our ideas of beauty are so tied to what works well. I am not entirely convinced, I have seen the sins some of these so called designers do in the name of "looking good" but I do see his point.

beezlewax• 3 years ago

I've worked as both a designer and developer and for the life of me I can't help but gravitate towards prettier looking applications even at times over more functional ugly ones.

It's a contradiction to what I "should" want as a developer and I'm very aware of this.

BalinKing• 3 years ago

This criticism feels fairly ironic, since the first guideline at lawsofux.com is the “Aesthetic–Usability Effect: “Users often perceive aesthetically pleasing design as design that’s more usable” (https://lawsofux.com/aesthetic-usability-effect/).

sprkwd• 3 years ago

Form follows function.

wst_• 3 years ago

One does not exclude the other, right? I'd say you could split it into functional design and visual design. Both are design. Both are important.

mpweiher• 3 years 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.

asoneth4• 3 years ago

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

joebiden23• 3 years ago

3) 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.

hulitu• 3 years 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• 3 years ago

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

hoofhearted3• 3 years ago

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

adelowo• 3 years ago

Do you have experience with Flowbite? Do you think tailwindui is still better?

kernal• 3 years ago

Their "incorrect" Contacts example looks better than their "correct" example IMO.

codybontecou• 3 years ago

I'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• 3 years 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.

joebiden23• 3 years ago

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

epolanski2• 3 years ago

Completely lost as well on how did it got so many votes so quickly.

dan1234• 3 years ago

At 20,000 copies sold (according to the site), it seems you get rich by writing the book!

pxoe• 3 years ago

HN has native ads now?

jasmer2• 3 years ago

This 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• 3 years ago

As 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• 3 years ago

Is 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• 3 years ago

You know, if you're charging $100 for a book, you can probably afford to pay for your own ads too.

wruza3• 3 years 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. 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• 3 years ago

When 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• 3 years ago

I, 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• 3 years ago

I 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• 3 years ago

I 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• 3 years ago

And 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• 3 years ago

There 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• 3 years ago

Seeing as this is just an ad does anyone have a link to the free chapters at least?

dyingkneepad• 3 years ago

I'm not taking any design advice from someone who puts horizontal scrollbars in their sales pitch website.

amatecha3• 3 years ago

If 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 (click "PDF")

d--b• 3 years ago

For 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• 3 years ago

right, this book is really old now.... this book came out in 2018, so shouldn't there be a 2018 tag?

plaguepilled• 3 years ago

A 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• 3 years ago

In 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• 3 years 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• 3 years ago

I 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• 3 years ago

I overwhelmingly prefer the Contacts window on the left to the one on the right.

duringwork12• 3 years ago

this is an ad

Rules for developers to design beautiful UIs without a designer

Related Stories