Admittedly before I read this feature page on the ImageAlpha app site, I didn’t fully appreciate how PNGs could be saved effectively in a lossy or compressed format. That’s what JPEGs were for, right? But I was wrong. If you use a smart algorithm and compressor like on the free ImageAlpha app, PNGs can get their size easily stripped in half. An alternative to the TinyPNGs of the world.
There’s many web based color picker tools out there, but when you want to learn as much as possible it’s hard to go wrong with Color Hexa. To quote the description:
ColorHexa.com is a free color tool providing information about any color. Just type any color values (view full list here) in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent value in Hexadecimal, Binary, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE-LCH, XYZ and xyY.
Designer Dmitry Fadeyev covers the basics of UI design. One of his last paragraphs really stands out:
The order the three parts are satisfied is important. A beautiful work that is not usable is worth less than an ugly one that does its function well (unless, of course, if its function is to be beautiful). Thus, we must first of all ensure that every element of the interface is clear, then ensure that their relationships are well defined, and then ensure the work has aesthetic unity.
Fundamentally, core functionality comes before aesthetic beauty. It’s a principle that’s missing from so many UI mockups I see on Dribbble, blogs and other sources.
Yes, this technique written by web developer Stephen Shaw has gotten linked by almost every tech source online: Smashing Magazine, Sidebar, Hacker News, it’s all here. But it’s worth the hype. Comes down to this: as long as you set the height of an element, you can easily center it vertically with just a few simple CSS rules. Heavily cross browser compatible too.
Macaw looks very impressive. As the narrator mentions in this twenty minute video demo, you can get into dangerous territory when a web design tool tries to also be a full WYSIWYG code generator at the same time (maybe I’m just picky, but as cool as Sketch is as a program, it’s HTML/CSS export options are not as great as I’d like.) Macaw seems to take a really balanced approach: fundamentally a design tool, but with most of its settings and tools rooted in HTML/CSS fundamentals.
Perhaps most importantly, while the app is native, it apparently renders all of its content in actual HTML. No more gradients, font styles and other “Photoshop only” actions that look very different once they actually get rendered in browser code.
I’m keeping my eye closely on this one.
Kathy Sierra:
If your UX asks the user to make choices, for example, even if those choices are both clear and useful, the act of deciding is a cognitive drain. And not just while they’re deciding… even after we choose, an unconscious cognitive background thread is slowly consuming/leaking resources, “Was that the right choice?”
If your app is confusing and your tech support / FAQ isn’t helpful, you’re drawing down my scarce, precious, cognitive resources. If your app behaves counter-intuitively – even just once – I’ll leak cog resources every time I use it, forever, wondering, “wait, did that do what I expected?”.
Every choice is a cost. It’s an utterly simple principle, but it makes me step back and reconsider a lot of design choices made, both professionally and in side projects.
I admittedly was a bit skeptical when I first heard about The Dissolve. Between SlashFilm and The A.V. Club, did we really need another big film web site? And it’s from the team behind Pitchfork?
But then I dove in after its debut late last week and I’m very glad I did. The content itself is excellent, written by a lot of writers I have respect for: Keith Phipps, Scott Tobias, Matt Singer and many more. There’s something also of a happy medium ground The Dissolve is getting at in terms of its content posting frequency. There’s less constant updates a la A.V. or SlashFilm, but they make those posts count.
There’s something to be said for the site’s visual design as well. In contrast to the all white ultra modern and minimalist trend, The Dissolve is a bit mellow and old school that’s heavy on serifs and warm, off white colors. I’ve already added their features and reviews RSS feeds to my feed reader.
Google product designer Jean-Marc Denis makes a pretty compelling argument why you should seriously think about integrating Sketch into your production workflow. It’s one of the best “why Sketch over Photoshop” posts I’ve read.
While my time is still heavily in development, when I do drop into design, I find that I’m heading into Sketch more and more often. Photoshop still gets the majority of my bulk export work however.
Drag and drop SVGs on this nifty little web tool by the Filament Group to auto generate fallback pngs and a quick demo web page. In short, if you’ve gun-shy about using SVGs on your web design given legacy browser compatibility, this should make your production work much easier and more reliable cross browser.
I’ve written enough responsive navigations in the last few months to be skeptical when I see a simple Javascript-based plugin solution. But probing further, the developer is Viljami Salminen, and the guy’s talented. It’s also library agnostic – no awkward jQuery dependency required. Worth taking a look at for your next responsive project.