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

91–100 of 245 posts

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

#91

Post by jasmer »

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

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.

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

#92

Post by waldothedog »

tmtvl wrote: post #79
411111111111111 wrote: post #41

Earlier quoted context omitted.

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.

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

What would “immediately” signify the ability to be clicked?

And to whom would this sign have such a meaning?

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

#93

Post by chankstein38 »

kyleyeats wrote: post #61
chankstein38 wrote: post #39

Earlier quoted context omitted.

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?

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.

That'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"

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

#94

Post by chankstein38 »

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.

agreed 100%

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

#95

Post by phaedryx »

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…

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

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

#96

Post by wolpoli »

deckard1 wrote: post #76
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…

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

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

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

#97

Post by chadash »

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.

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.

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

#98

Post by chankstein38 »

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

Earlier quoted context omitted.

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?

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!

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

#99

Post by chankstein38 »

jasmer wrote: post #91
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

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.

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.

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

#100

Post by nextaccountic »

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

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

Post reply on HN