Rules for developers to design beautiful UIs without a designer
refactoringui.com
refactoringui.com
More like this:
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:
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.
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.
Edit: don't also forget, that after initial perception comes the actual usage.
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.
Functional design (how it works) and visual design (how it looks) is really two different job functions. You don't need an art degree or even be good in art in order to design the functionalities or even interactions of a product. At the same time, being good in art and designing cool looking UI doesn't make you qualified to design the functionalities or interactions of the product. Not even close.
Both job functions are needed to build a good product. In rare cases one person may be able to do both.
"In most people's vocabularies, design means veneer. It's interior decorating. It's the fabric of the curtains of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service."
Design is not just one thing or another. It happens at each layer. From deciding how many options you want to present to the user, to how they will be presented. Or deciding how to deal with errors in the backend, versus reporting them in the front end. Design decisions are made the whole way through.
I think this is visible with lots of Apple products because some people complain that they aren’t flexible enough. But reducing configurability is as much a design decision as the colour of the icons. (And sometimes more challenging)
I think we are in agreement. "How it works" is design. "How it looks" is also design. Sometimes, but not usually, one person may be able to do both types of design.
UI (user interface) is a part of UX (user *experience).
Later, they produced Material Design.
The prosecution rests, your honour.
- (not strictly design system s) https://every-layout.dev/ and https://book.inclusive-components.design/
These are by people whose primary goal isn't promotions, keynotes or CVs.
Tailwind also does a decent job with both the framework itself and the commercial UI examples: https://tailwindui.com/
In any case, it contradicts your claim, since all this user research was way, way before UX was a thing.
Honestly I just got the feeling that the phrase UI had become stale and UX was just seen as a way for a new generation to put their mark on the world.
Nothing wrong with that, of course.
The 1985 edition "includes e.g. case studies (useful!), and an extended discussion of Jung's theories of intuition and how they should influence your designs (!!)"
So it is both "Look" and "function". Claiming looks aren't part of it is incorrect.
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.
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)
Or, in business terms, beauty has terrible ROI.
Look at almost any premium product and the premium that is being paid for is in the beauty. Rarely is it in the actual quality of the product.
SAP (everything), Workday (HR), Service Now (help desk), Archer (compliance), SailPoint (compliance), and other applications that have been inflicted on my miserable existence over the last 25 years of corporate IT; all B2B enterprise applications that I guarantee did not consider either speed or ease of use to be remotely important.
Even a Rolls Royce is a vehicle (and a damned fine one to boot) before it’s an art piece.
When functionality is a given like it is for a kitchen toaster, we can argue the presentation and style is more important.
The point is, it's hard and rare to get into such a position. Yes, eventually there will be a new Apple, but not yet. So anyone *today* looking to perform well should probably be more practical.
Beautiful, not in the least. Thanks to the cameras (a functional feature) I need to have a fugly case wrapping the entire thing.
It feels like a variation of learned helplessness, watching someone fumble with a Stripe terminal.
> How much of a premium are you, as a customer, willing to pay for the beauty?
Depends on the category of goods, but if I can afford it then I will probably choose something aesthetically pleasing to me most of the time. I can easily get by with an ugly screwdriver if it works well, but I would not like wearing bad-looking shoes.
Generally if I use something often, be it tools, clothes, guitars, utensils and whatnot, I try to find something appealing to my eye. Some people seemingly don’t care much about that, but it just so happens that I do. Paying a premium for the beauty relieves me from being very irritated about something I might not like.
Also, in my opinion, aesthetics, ergonomics and beauty sometimes all are side products of working hard on one of them. Beauty in tools and architecture and interfaces is not to be discarded since it makes our life more pleasing and tolerable. We could live in the holes in the ground, you know, if pure application of things to their intended purpose was all that mattered to us.
> How much functionality will you give up for the shinies?
I’m not sure something has to be given up at all, that’s the point.
Working all day in ugly software is like a mini version of this.
I don't think anybody considers beautiful software ad a premium, more that ugly software will not be considered at all because it can't be trusted.
Everything has terrible ROI if you don't understand the "I" and aren't tracking the "R".
Must be a complete and unfortunate coincidence then, that the richest tech company on the frickin planet rose to that prominence through "beauty", at least as their critics still like to call out.
That’s not the definition of UX.
UX is multi disciplinary, an umbrella term for many things, eg design research, IA, HCI, UI Design, …
There is so much to say on the topic, books have been written arguing at length even. I would never argue for worse UX if I had a choice, there should be a baseline “good” visual design, but poor UX can and will sink your product in most metrics that matter in the business world.
Oh, please no. We already have more than enough of that line of thinking. In software, especially, we see far too much pretty stuff that is horrendous to actually use.
I'll take the ugly thing that makes my life easier over the pretty thing that does the opposite every single time.
People judge apps by how they look more than how they work.
If it looks professional and good looking they give it more credit and chances than it deserves. If UX is good but looks are not airbnb/apple wannabe they tend to distrust it.
I think that a lot of software is inherently low (or even negative) value and thats why shiny wins.
Could easily be dreaming tho
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.
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.
> 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.
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.
It's a contradiction to what I "should" want as a developer and I'm very aware of this.
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.
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.
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
Edit: Fixed formatting.
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".
What does NIH abbreviate?
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.
But whether it's a duck, anchor, strawman, whatever you call it -- the risk with proposing an obviously bad solution to make the good solutions look better is that every once in a while they'll pick the bad solution. I think it was a talk by Mike Monteiro where he explicitly cautioned against using this approach because it tends to backfire hilariously at the worst possible moment.
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...
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.
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.
It's just really easy to get trapped in your own biases - often the bias of "This isn't that complicated, I understand it so the customer can too", and the "I know what they want" one. So in the face of 'we need to deliver fast', a lot of people won't take the time to invest in it.
If anyones interested in research methods, highly reccomend this book.
https://www.amazon.com/Universal-Methods-Design-Innovative-E...
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.
I blame lorem ipsum. And Latin.
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.
*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!
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.
> 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.
I would still hold to the obvious (label above or left of the widget) until it is replicated, as the study isn't of very high quality.
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.
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...
- Newsletter popups - Account creation nags on ostensibly free apps - Vanity flaps crowding the viewport - Sticky social buttons
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.
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.
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.
different tastes for different people
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
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.
> 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.
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.
This is not intrinsic to the design, just a force of habit. The design on the right looks perfectly clickable to me.
The other examples are more sensible, but this specific one is just the author forgetting about subjectivity.
You gotta admit that it looks good, and eye candy is usually extremely effective for user retention, even if the alternative handles better, technically.
To be fair, I also just generally don't like the look of it without borders and stuff.
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.
And to whom would this sign have such a meaning?
The option for interaction is inherent. Everything on a screen can be clicked.
The language, iconography, and visual treatment combine to differentiate certain items and establish an expectation in the event of a click.
Everyone knows how a button looks, and in case you’re sure that that is a button, I invite you to explain every flat ui to my older relatives, using only words.
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.
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.
This or just alternating the background of each row between light and slightly darker colors
> 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 ?
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"
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.
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".
Also, you've miss the elephant at the top of the page
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.
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.
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!
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.
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)
In my experience, bad UIs are a product of laziness more than know-how.
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.
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.
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.
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".
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.
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.
[0] https://dl.acm.org/doi/book/10.5555/573097 (click "PDF")
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-"
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?
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.
No! Just no! Oh, I get it, if you can't design, teach others how to design.
The book/website is one of the major reason why Tailwind was so successful.
If you don’t already follow him, you probably should.
My only complaint is that they don't offer a physical book.
My results if you're curious: http://camarkup.com