Bjango

OS X not only uses a lame hack to scale, it completely muddles the issue by introducing the concept of "HiDPI" UI elements. Somehow I can set my 4K monitor to use "native resolution" at 3840 x 2160, and yet the UI and fonts look fuzzy! Absolutely terrible, and a complete embarrassment for Apple imo since they are supposedly the UI kings. You only don't notice the issue because you're using a 27" 5k display, which has been "blessed" by Apple as the "correct" DPI to match native screens. For those of us with 4k screens (95% of the market), I guess we're just supposed to enjoy a subpar experience. Even X11 looks better.

For me, I only closed the book on the issue after finding BetterDisplay [0]. Basically a 3rd party program that gives you complete control over resolution, display density, and a ton of other options on MacOS. It has a trial mode but it is well well worth the money. With that + the CLI tweak to set font smoothing to 0, the 4K experience on MacOS looks decent. You can even decrease the effective scale of the native screen past "More Space", so those of us with good eyes can actually take advantage of the screen real estate.

Also, if you're curious to explore this issue beyond my subjective thoughts here, these [1] [2] blog posts do a great job diving into what is so bad about MacOS scaling, why 4K 27" or 32" screens end up looking bad, and why 5K 27" look okay.

[0] https://github.com/waydabber/BetterDisplay

[1]…

For technical skills, I would recommend using Photoshop for web/ui design. Unfortunately at the moment it's the best out there. Some good things to seek out are adjustment layers and layer effects. Bjango has some great tutorials, although they are focused on UI design: http://bjango.com/articles/

In terms aesthetics, the most import thing is to develop your 'design palate'. Seek out excellent craftsmanship and learn to distinguish it from the mediocre. An excellent place to start is SiteInspire: http://siteinspire.com/

I would also recommend learning the fundamentals of design. Typography and grid systems are very important study areas. A great place to start is this forum thread: http://www.designerstalk.com/forums/graphic-design/42390-design-basics.html

For empirical testing of designs, I would highly recommend Lukas Mathis' Designed for Use: http://pragprog.com/book/lmuse/designed-for-use Be warned however that the print version is horridly designed, just get the .epub to bypass the ugly formatting.

And always have in the back of your mind: 'less is more'. Just because you've learned how to do fancy gradients, reflections and rounded corners, doesn't mean you should.

I highly recommend using Bjango's awesome Skala Preview app[0] on your Mac and iPhone when designing your interfaces. It essentially mirrors your current Ps canvas to the device and let's you see how it will look in native form. It's invaluable for a multitude of reasons. 1) things really do look much "better" on the retina than for example my thunderbolt or MacBook Air display. 2) a lot of people have a hard time with the initial jolt of designing for 2x the standard dpi. Most of the 1px lines you'll draw for the web need to be 2px in photoshop to appear as 1px on the device.

I have an equally long list of things I would love to share as a long time web developer who moved into iOS and wanted to do things "the right way". This post from SeatGeek and all of the Bjango articles[1] are excellent resources for someone getting started with this

--

[0]: http://bjango.com/mac/skalapreview/

[1]: http://bjango.com/articles/

> but what are you able to do about it?

On Macbooks with fans, I started tuning my fan curve with iStat Menus (https://bjango.com/help/istatmenus7/fans/#custom-fan-curve) because I noticed the default curve was lagging behind and thermal throttling kicked in before the fan even reach max speed.

For Apple Silicon specifically, I recently discovered that there is a "high power mode" (https://support.apple.com/en-us/101613) that allows the fans to run at higher speed. So I don't use the custom fan curves anymore, it helped me a lot (but it does get quite noisy on a 14" M4 Max)

For a Macbook Air, not much you can do besides closing stuff, or elevating the macbook and pointing a fan at it or things like that... but yeah it's a bit desperate!

I think it depends what you use them for. Personally, since I use my external monitor for coding, I'd rather optimize for PPI. I love reading code on my MacBook's Retina screen, which is about 218 PPI, and I definitely notice the difference when reading code on non-retina. Unfortunately it's extremely expensive to get the equivalent of Retina PPI in an external monitor. But you can still get decent readability even without Retina PPI if you avoid issues like display scaling. Here's a great blog post [0] about the tradeoffs of screen size, resolution, pixel density, and the "zone of despair" where display scaling causes problems.

[0] https://bjango.com/articles/macexternaldisplays2/

> The standard PPI on MacOS is 72 […]

[citation needed] ?

Where did you get that number from? Not saying you're wrong (or right), I'm just curious where you came up with that number? Perhaps 'back in the day' MacOS 9-based hardware does that? [1][2]

Per [3], it seems that non-Retina displays should be 100-120 ppi and Retina should be 200-230.

[1] https://www.photoshopessentials.com/essentials/the-72-ppi-web-resolution-myth/

[2] https://en.wikipedia.org/wiki/Dots_per_inch

[3] https://bjango.com/articles/macexternaldisplays/