9 ms·
UI design for software developers. Part 1, Colors
- Benjammer 6y agoI 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.
- inquirerofsorts 6y agoUX advice for UI designers giving advice to software developers: Get a free cert from https://letsencrypt.org/ 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.
- ithronmellon 6y agoIt's no use if you let it expire like they did.
- inquirerofsorts 6y agoOut of the box LE make it hard to actually achieve that most basic of calendar fails.
- capableweb 6y agoAs 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).
- sjm-lbm 6y agoI 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.
- detaro 6y agoYou likely gave certbot the email address when you set it up first, and it registers it with LE.
- Cthulhu_ 6y agoI'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.
- Brajeshwar 6y agoOr let the free tier of Cloudflare do that.
- capableweb 6y agoOr 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 - https://www.nginx.com/blog/using-free-ssltls-certificates-from-lets-encrypt-with-nginx/ https://www.nginx.com/blog/using-free-ssltls-certificates-fr...
- Jerard_Victor 6y agoit's self-hosted Ghost engine on DigitalOcean
- swiley 6y agoLetting someone else terminate your SSL kind of defeats the point behind it.
- edoceo 6y agoYea, everyone move to this central platform. That way we can complain later when things are too centralized.
- Jerard_Victor 6y agosorry for that, will add SSL as soon as possible
- mch82 6y agoThanks 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 https://en.wikipedia.org/wiki/Mood_board
- coldpie 6y agoI'm not trying to be snarky, just trying to understand. What are you defending against by refusing to visit a read-only, plain HTTP site?
- dmitshur 6y agoI’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.
- koheripbal 6y ago... but realistically, the risk of that is extremely low in this specific case.
- Jaxan 6y agoISPs have injected ads on http websites in past. So it has happened.
- KineticLensman 6y agoIf 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.
- je42 6y agoyep. indeed. For example, color contrast should be considered when developing a color palette. 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.
- coldcode 6y agoDon'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).
- Jerard_Victor 6y agohey, 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.
- EricE 6y agoI mentioned it elsewhere but I think it's worth mentioning again - for a great discussion of color and accessibility check this: https://designsystem.digital.gov/design-tokens/color/overview/ https://designsystem.digital.gov/design-tokens/color/overvie...
- monkin 6y agoTip No. 1. - Don’t make UI design courses for developers if you don’t have a solid experience in it.
- Biganon 6y agoThis reads like a harsh criticism; arguments would be welcome as to why you feel this way
- monkin 6y agoI 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. :)
- layoutIfNeeded 6y ago>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?
- TheOtherHobbes 6y agoThe 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.
- swyx 6y agofor those who want alternatives to this post - here is my collection of "design for developers" resources ranging from 4 minutes to 4 months https://github.com/sw-yx/spark-joy#courses https://github.com/sw-yx/spark-joy#courses
- switch007 6y ago9px font. So, an article for software developers under 30 ;)? (Firefox says <body> = 2em, <html> = 62.5%) EDIT: I misread Firefox's calculation. Checking again it doesn't say 9px but 16.25px. I guess I just have tired eyes today!
- Jerard_Victor 6y agowhat's that?
- switch007 6y agoYour article's paragraph text
- jorams 6y agoIf 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. I'd say that's on you.
- renke1 6y agoI 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?). [0]: https://refactoringui.com/previews/building-your-color-palette/ https://refactoringui.com/previews/building-your-color-palet...
- baxtr 6y agoThe 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. (1) https://refactoringui.com/previews/building-your-color-palette/ https://refactoringui.com/previews/building-your-color-palet...
- kevsim 6y agoI'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. 0: https://kitemaker.co https://kitemaker.co, super fast, highly collaborative issue tracker
- didgeoridoo 6y agoYep. I’ve been designing UIs professionally for 10 years and yet I learn something new every time I read something from Adam Wathan.
- deleted 6y ago[deleted]
- kuon 6y agoIf 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. 1: https://www.kuon.ch/post/2020-03-08-hsluv/ https://www.kuon.ch/post/2020-03-08-hsluv/
- Arjuna144 6y agoSorry man, I dislike the UI. Feels like it was done by an amateur. (Colors, positions, sizes...)
- onion-soup 6y agoArticle has unreadable pale grey font.
- Jerard_Victor 6y agosorry to hear it, weird that color.a11y.com tool doesn't indicate that I have any problems with text readability at least in paragraphs
- bluedino 6y agoApp also has way too thin of a font and the color is too dark.
- deleted 6y ago[deleted]
- uxcolumbo 6y agoDevelopers looking to learn design might also want to look into this: https://hackdesign.org/ https://hackdesign.org/
- EricE 6y agoOne of the best discussions of color - especially from an accessibility standpoint is from the US Digital Web Design System: https://designsystem.digital.gov/design-tokens/color/overview/ https://designsystem.digital.gov/design-tokens/color/overvie... 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!)
- coldpie 6y ago> 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.
- austincheney 6y agoThe 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 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.
- Jerard_Victor 6y ago
- base698 6y agoWould recommend "Non Designers Design Book" for engineers interested in a survey of design. Proximity, alignment, repitition, and contrast are four basic principles that get you pretty far. https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133966151 https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133...
- WoodenChair 6y agoI 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.
- habosa 6y agoI'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". Second this author is basing the advice on this app: https://play.google.com/store/apps/details?id=net.amortizedcost.batchimageshrinker 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".
- V-2 6y agoPerhaps 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"?).
- Jerard_Victor 6y agohey, could you suggest a better wording for that? Will try to fix it in the upcoming release
- jessaustin 6y agoIs there more than one attachment? In that case remove "an". If not, remove the trailing "s".
- daotoad 6y agoFotos is a spelling error, should be "Photos" "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.
- chrisweekly 6y agoSee also https://every-layout.dev https://every-layout.dev for schooling on typography and layout (among other fundamentals).
- joduplessis 6y agoColor, 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.
- userbinator 6y agoNot 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.
- edoceo 6y ago:( system colors were deprecated in CSS3. Really handy for LOB apps
- whatshisface 6y agoIf my design blog can't be read in an ultrathin font colored #aaaaaa against my #bbbbbb background it's not worth reading.
- hcarvalhoalves 6y agoSo, I looked it up, and it's indeed deprecated. 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-system https://www.w3.org/TR/2018/REC-css-color-3-20180619/#css2-sy...
- dragonwriter 6y agoSystem 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. https://www.w3.org/TR/css-color-4/#deprecated-system-colors https://www.w3.org/TR/css-color-4/#deprecated-system-colors
- thrower123 6y agoThere's no substance to this article, whatsoever.
- troysk 6y agoControversial opinion: People don't notice colors on the web, they notice contrast.
- tempodox 6y agoAgreed. https://contrastrebellion.com https://contrastrebellion.com
- mrpotato 6y agoI like it, site looks great. I just wish it had a How section with resources for dummies like me
- scns 6y agoIt is not controversial, there is a study by NASA IIRC that concluded exactly this. (edit: add lines below) They even have guidelines for designing with luminance contrast: https://colorusage.arc.nasa.gov/design_lum_0.php https://colorusage.arc.nasa.gov/design_lum_0.php
- slmjkdbtl 6y ago0) When in doubt, use plain text
- layoutIfNeeded 6y agoMore like "UI design for web developers"
- scns 6y agoFor colors i use https://www.colorhexa.com/ https://www.colorhexa.com/ It gives you shades & tints, has a Color Blindness Simulator, nearest web safe color and more.
- nottorp 6y ago> 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.
- ricardobeat 6y agohere's a comparison of power usage (it's negligible): https://www.xda-developers.com/amoled-black-vs-gray-dark-mode/ https://www.xda-developers.com/amoled-black-vs-gray-dark-mod... The contrast is bad for your eyes, not the total amount of light, which your pupil can adjust for.