Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Rules for developers to design beautiful UIs without a designer

refactoringui.com

Post reply on HN
Print view View original

101–110 of 245 posts

Re: Rules for developers to design beautiful UIs without a designer

#101

Post by illiarian »

illiarian wrote: post #74
clumsysmurf wrote: post #7

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…

> 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/16436…

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

Re: Rules for developers to design beautiful UIs without a designer

#102

Post by petilon »

creativenolo wrote: post #83
petilon wrote: post #66

Earlier quoted context omitted.

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

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

My comments are based on experience working on projects where some designers (who went to art school) heard Steve Jobs say "design is how it works, not how it looks" and then decided that they own the "how it works" part. The result, from what I have seen, is disastrous.

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.

Re: Rules for developers to design beautiful UIs without a designer

#103

Post by jstarfish »

izacus wrote: post #43
clumsysmurf wrote: post #7

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…

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…

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

Re: Rules for developers to design beautiful UIs without a designer

#104

Post by munk-a »

IMTDb wrote: post #44
munk-a wrote: post #40

Earlier quoted context omitted.

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.

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

When I think of a beautiful UI I think of something that's aesthetically pleasing while being highly functional and clear to read.

Re: Rules for developers to design beautiful UIs without a designer

#105

Post by bufio »

411111111111111 wrote: post #41
chankstein38 wrote: post #34

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

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.

It looks like bog standard webshit.

Re: Rules for developers to design beautiful UIs without a designer

#106

Post by doctor_eval »

petilon wrote: post #102
creativenolo wrote: post #83

Earlier quoted context omitted.

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

My comments are based on experience working on projects where some designers (who went to art school) heard Steve Jobs say "design is how it works, not how it looks" and then decided that they own the "how it works" part. The result, from what I have seen, is disastrous. 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 goo…

Jobs said,

"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)

Re: Rules for developers to design beautiful UIs without a designer

#107

Post by test1235 »

joebiden2 wrote: post #80
chankstein38 wrote: post #38

Earlier quoted context omitted.

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.

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.

how is this not just an advert? I don't get it.

Re: Rules for developers to design beautiful UIs without a designer

#108

Post by web3-is-a-scam »

chankstein38 wrote: post #98
web3-is-a-scam wrote: post #82

Earlier quoted context omitted.

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.

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

With gpt4 image recognition you can have it do a design from a napkin drawing use it's image recognition, absolutely wild.

Re: Rules for developers to design beautiful UIs without a designer

#109

Post by Uehreka »

pazimzadeh wrote: post #49

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…

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

Re: Rules for developers to design beautiful UIs without a designer

#110

Post by hoofhearted »

xk_id wrote: post #59

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.

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/

Post reply on HN