I'm no design expert but this advice is really thin and not that useful. Trust me that using a color palette generator is not the One True Way! Also there's no advice on how to pick a base color, just "pick one".
Again I am not an expert and I don't mean to be rude, but that's not a very nice looking app in my opinion. The colors, fonts, alignment, spacing, etc all seem just a bit "off".
8 different font sizes, no logical line heights, some elements are spaced tightly (ordered list, share button) and some far apart (radio buttons). And the primary buttons in image 1 and 3 are teal, but in 2 we introduce a yellow button and in 3 there's a red one.
Perhaps the fonts and alignment are deliberately off so that they can be improved in subsequent parts of the cycle. I'm not exactly blown away by the palette either, though.
Wording is sloppy, too ("into an email attachments"?).
Looking at the link, I like the colors. But I have to agree the spacing really "appears to have issues". The wording overlaps and the buttons on the bottom have different left & right margin compared to the bottom margin.
It's a really common misconception among technical folks that "subjective" == "arbitrary".
Design is inherently subjective, yes. But that does not mean that all design choices are equally good when goodness is measured by pleasing the greatest quantity of users by the greatest amount.
Ice cream flavor preference is subjective too, but if your ice cream shop only sells "sawdust sprinkles" and "frog's blood", business isn't going to go well for you. Or, perhaps closer to home, the choice of keywords in a programming language is entirely subjective. The compiler does not care if you use "while" or "rkdhx" for loops, but good luck convincing programmers to adopt a language that chooses the latter.
Designers have laboriously learned the aesthetic principles that align with how our visual system works and with the expectations users have coming from our shared culture's graphic history. That's what they mean when they say something is "right" or "wrong", and they have a lot of expertise to back it up.
Not surprising to see no mention of "let the system (and by extension, the user) choose the UI colours if at all possible". It wasn't long ago that you'd set your preferences for colours, fonts, etc. in one place and every application would automatically use them and be consistent. Perfect for colourblind and those who have trouble seeing smaller fonts. UI design has gone backwards.
This is pretty ridiculous. The web is such a hack already, and deprecating this make it even worse at UIs. It seems every decision is optimised for branding (e.g. custom form controls), usability be damned.
System colors are in the CSS Color Level 4 working draft updated less than a week ago. What appears to be (durably) deprecated is just a subset of the system color names, with what sounds like a reasonable reason:
Earlier versions of CSS defined several additional system colors. These color keywords have been deprecated, however, as they are insufficient for their original purpose (making website elements look like their native OS counterparts), represent a security risk by making it easier for a webpage to “spoof” a native OS dialog, and increase fingerprinting surface, compromising user privacy.
That explanation seems to be having it both ways. If it's really a spoofing security risk, do they still intend to provide functionality that is sufficient for the original purpose?
> If it's really a spoofing security risk, do they still intend to provide functionality that is sufficient for the original purpose?
The explanation explictly says that the original functionality was a spoofing security risk, but even so was “insufficient for their original purpose (making website elements look like their native OS counterparts)”. So, no, they've fairly explicitly abandoned the original purpose.
They retained functionality has a more limited purpose, which I would describe as providing a vehicle for the user/browser/OS to provide defaults which pages/apps can reference, which when provided by the OS, minimize aesthetic clash and preserve contrast/accessibility between the page/app features and native UI without disguising the nature of the web page/web app, rather than actually mimicing native system UI.
For Internet webpages it makes sense, but for things like Electron apps, the security argument makes no sense since the whole point is that they should look like the native OS.
How would a global preference for colors even work? You can’t just change one color in a palette and expect the design as a whole to still make sense. Imagine a standard thing like a table where you want borders, subtle zebra stripes, focus/selection states, error states, and maybe color coded text for different types of values. Getting that to work at all requires careful coordination of the entire color palette.
It has one of the best discussions of contrast I have seen; very timely given the trends for low contrast design that seem prevalent combined with my now over 40 eyes (darn those kids!)
> very timely given the trends for low contrast design that seem prevalent combined with my now over 40 eyes
I'm a decade younger than you and I still bristle every time I see someone disparage black-on-white. #000 on #FFF looks fine, guys, and it looks way, way better than the #BBB on #CCC that you're about to publish. You're overthinking it.
> Accessibility is not a special case. In Q2 of 2018, sites using USWDS topped 1.4 billion pageviews. 4.5% [the portion of the population with some kind of color insensitivity] of 1.4 billion is around 60 million pageviews — when it comes to accessibility, thinking broadly and inclusively isn’t just a good idea, it’s our mission and responsibility.
It's honestly pretty cool to see this. I'm glad that the US government (or at least this one particular agency) takes accessibility so seriously.
The greatest challenge when considering colors and accessibility is dealing with more than 2 colors. I wrote a tool to solve for all comparisons in a color scheme: https://github.com/prettydiff/colorContrast
In every real world scenario there will be a multitude of colors present that impact accessibility. It is almost never so simple as a single text color on a single background color.
If you are reading this, Jerard, please please please consider the accessibility impact of colour, specifically on colour blind people. You should test your app's proposed colour with an accessibility-checking tool. You should also avoid using certain colours to distinguish between different things.
hey, I do reading all the comments here. Frankly speaking, I didn't think about accessibility impact when I was playing with color palettes, but it turned out that Google does such assessment automatically when an app is being reviewed. Thankfully in my case, I didn't have any accessibility-related issues, but this is a valid point and probably it's better to do it during the mocking stage.
Good luck with this. I do think that aesthetics could be improved in the tech field (I wuz an artist, way back, when).
But accessibility is critical. There are tools to do things like desaturate pages and apps, and measure contrast.
I write Apple apps, and I make sure that I provide (sometimes, quite verbose) accessibility labels to all my UI elements. There's actually a ton more that can be done, but acc. labels, and respect for dark mode, reduced transparency, and increased contrast, as well as haptics, is usually sufficient.
One thing about providing accessibility strings: They should be translated, as well, if you are localizing.
Totally agree. I once did some mandatory training at work (on avoiding discrimination, ironically) where some of the facts needed for a good score were only presented in the audio track and were thus inaccessible to deaf people. I'm partially deaf without my hearing aids so am sensitive to this issue.
Another place where I worked had the bays in its car park marked with a colour of brick that was the same as the main colour if you had a certain type of colour blindness. It's actually how most of us found out that one of our colleagues was colour blind, when he got a complaint about his apparently inconsiderate parking (usually taking two spaces because he couldn't see the markings).
These metric help for writing a report for the boss.
But really, these tools should not be a factor for UI design. They're much better for things like data visualization where you're working wit a lot more colors in a tight space.
If somebody is relying on slight variations in hue to differentiate between background and font color, they've already fucked up.
FWIW, I recommend using the squint test as a really rough metric, try and see if you can use something through your eyelashes as you're squinting.
Don't be like Apple did in Big Sur, and reduce all colors to medium gray on light gray backgrounds (arguments I have had with UI designers for years who seem to favorite this combo). Also consider the size of elements when working with color contrast, larger elements are more forgiving than smaller ones, bolder fonts are more forgiving than thin ones. People's ability to see comes in many variations, its not binary (20/10 vision vs sightless).
The site has eccentric paragraph/element spacing and uncontrolled use of white space.
Serif fonts are fashionable but a questionable choice for legibility. (HN is much more legible.)
The header image is unnecessarily huge.
There's a login box, but you won't spot it unless you're paying attention. Why would you want to log in anyway?
Overall, the design looks knocked-together in a hurry with no real understanding of either good layout or UX.
The app itself has poor layout spacing and - ironically - the colour choices and combinations are unusual and not what you would expect from an experienced UI designer.
To be clear, this isn't being picky for the sake of it. I would honestly be surprised if a majority of experienced UI professionals were enthusiastic about the current design of either the site or the app.
I don’t have time for argument war, but same thing is with coding/vim/emacs/everything other courses on youtube from people that just started to learn them.
If you’re learning and trying to learn others at the same time will you take responsibility for passing on bad knowledge and your own mistakes? It takes years to get solid grasp of professional wisdom and experience in specific field. Without it, we have people who think git is too hard...
If you want to learn, learn from the best. Don’t get me wrong, I know that many people advise to write such thing to make yourself recognizable, but don’t start from learning others. :)
>same thing is with coding/vim/emacs/everything other courses on youtube from people that just started to learn them.
Spot on! I think we need a concise name for this phenomenon of low-effort rookie-level tutorials from people who barely have learnt the subject themselves.
How should we call it? Tutorial-spam? Tutorial farming? Amateutoring?
They say that the best way to learn something is to teach it, but it doesn't follow that the experience will be optimal for your students. Teaching well is quite hard.
UX advice for UI designers giving advice to software developers: Get a free cert from https://letsencrypt.org/ so my basic half-assed digital defenses don't block your site.
I'm not clicking through until you do sorry. Good luck with the multipart series.
I’m not the parent poster, but one reason I can suggest is:
When you know about the security properties of using the HTTP protocol over internet, and proceed to visit a read-only plain-HTTP website, your attention and time are used up unnecessary on thoughts like “did the author really include this bit of content, or is it being MITM’ed?” with no inexpensive way to find out.
Thanks for taking the time to share a write up on something you learned & put it on your own domain instead of Medium or something like that.
Yeah, ssl probably matters & other people will prefer a different “step 1”, but it’s cool to see people share their lessons learned & process. And it’s smart to make use of the byproducts of your work.
Many designers use a “mood board” early in their process to establish the target feel of their project. Your explanation of wanting to choose a color that felt “futuristic and brave” reminded me of that approach.
https://en.wikipedia.org/wiki/Mood_board
As far as I know, Let's Encrypt themselves do nothing to prevent you from hitting the expiry date with your certificates, but then I'm not sure what you mean with "Out of the box Let's Encrypt".
Usually you run Let's Encrypt with something like EFF's certbot, and then you certainly get lots of help to have up-to-date certificates, as long as you installed it in a way so it automatically runs (via cron or whatever you use).
I get emails from LE when my certs are about to expire. I'm honestly not sure how they do it (based on the email address, I'm guessing that they pulled the email they are using from WHOIS), but it's not something I went out of the way to set up.
I really like it, because it lets me know when I need to go in and kick certbot.
I've used LE for a few years and multiple times Certbot has broken, needed to be reinstalled, reconfigured from scratch, etc. In theory it keeps things updated automatically, in practice it needed a lot of wrangling.
Or if the author don't want to let Cloudflare control their entire domain and give away their users' data, since the author seems to self-host with nginx: Use certbot and python-certbot-nginx, very easy to setup and maintain
The best resource I have found for devs who want to improve their design skills is (1). The article below is even about coloring schemes of apps. Very insightful.
I've had going through RefactoringUI on my todo list for a very long time. I'm working at a small startup [0] on a fairly complex product and design resources is always a challenge. Being able to make some of the simple decisions myself feels like it could be a super power.
> Common advice here will be not to use pure black or white colors, which, as perfectly described in the article, hardly present in the real-world color pallet.
However, on the OLED screens that are all the rage now, and for good reason, a pure black background means those pixels are off, which saves power and shines less light into the user's eyes making the screen less tiring.
Aesthetics aren't always good for your health/battery.
I can second this recommendation. It was recommended to me years ago by an experienced app developer. Don’t be turned off by its use of print examples—most of the general ideas can just as well apply to the digital.
If the result of that calculation is 9px for you, your browser's default font is set to ~7px. That's even smaller than Chrome's "Very small" preset of 9px, and significantly smaller than the normal default of 16px.
If you need to deal with colors, especially dynamic ones, you might be interested on my writing¹ about HSLuv, which can help a lot in generating palettes.
I always thought this is a good article about color palettes [0]. I haven't read the book (on which the article is based on) yet though, but it might be worth a look (maybe someone has?).
I learned a quick tip recently to easily implement a nice-looking dark mode without picking a whole new color palette. You can just take your regular colors and desaturate them and they will instantly look better in dark mode. If you don't understand saturation, think of it like using the "pastel" version of each color.
Color, typography & design - in the context of user interfaces - is hard! Understanding color is great, but how that color relates to a user interface: totally different story.
Second this author is basing the advice on this app: https://play.google.com/store/apps/details?id=net.amortizedc...
Again I am not an expert and I don't mean to be rude, but that's not a very nice looking app in my opinion. The colors, fonts, alignment, spacing, etc all seem just a bit "off".