UI design for software developers. Part 1, Colors
amortizedcost.net
amortizedcost.net
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".
Wording is sloppy, too ("into an email attachments"?).
"into an email attachments" doesn't agree on number--it should be "into an email attachment" (singular) or "into email attachments" (plural).
It's not 100% clear that by "shrink" you mean "reduce file size" rather than "visually scale the image".
"Batch image resizer which will make photos smaller enough to fit them all into email attachments. In three easy steps."
Don't use the comparative form of the adjective "small". "Which" is not needed here either.
"Batch Image Shrinker reduces the file size of a group of images in three easy steps:"
That's a start at least. I hope that helps a bit.
i also kind of feel like your comments distill down to something very close to:
"there's no right way to do it, but that way is wrong"
design is inherently subjective. no single tool will seem "right" to everyone, and that's ok.
As someone mentioned in this thread, look up US WDS advice on color. It’s a lot more objective.
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.
But who is advancing all those arguments you are refuting?
They are all straw men.
Even though this is about infographics, there is a lot of useful information here: https://blog.datawrapper.de/beautifulcolors/
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.
https://www.w3.org/TR/2018/REC-css-color-3-20180619/#css2-sy...
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.
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.
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!)
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.
Black and white, but take the edge of a little.
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.
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.
it sucks to readjust the app if you discover late in the development that the palette is not having enough contrast for some parts of the ui.
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.
Here's a really cool tool, that I use: https://michelf.ca/projects/sim-daltonism/
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).
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.
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. :)
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?
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'm not clicking through until you do sorry. Good luck with the multipart series.
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 really like it, because it lets me know when I need to go in and kick certbot.
- https://www.nginx.com/blog/using-free-ssltls-certificates-fr...
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
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.
(1) https://refactoringui.com/previews/building-your-color-palet...
0: https://kitemaker.co, super fast, highly collaborative issue tracker
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.
The contrast is bad for your eyes, not the total amount of light, which your pupil can adjust for.
Proximity, alignment, repitition, and contrast are four basic principles that get you pretty far.
https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133...
EDIT: I misread Firefox's calculation. Checking again it doesn't say 9px but 16.25px. I guess I just have tired eyes today!
I'd say that's on you.
[0]: https://refactoringui.com/previews/building-your-color-palet...
(edit: add lines below)
They even have guidelines for designing with luminance contrast: https://colorusage.arc.nasa.gov/design_lum_0.php
It gives you shades & tints, has a Color Blindness Simulator, nearest web safe color and more.