I think this, and the previous part, are probably most usefully viewed from the perspective of "The design zeitgeist dictates that I must do $DESIGN_TREND; here is how to do $DESIGN_TREND and make it work well" (where $DESIGN_TREND is, for example, having a huge image and making the overlaid text readable), rather than from the perspective of critiquing whether these trends in design are actually necessarily a good idea.<p>I say this as someone who routinely does get asked to build sites that are (to put it kindly) heavily indebted to other current sites; I can definitely confirm that overlaying text on top of images and making it readable genuinely is quite hard work - especially if your clients are choosing the images! - and these tips are certainly very helpful for those occasions when you can't hire a designer with a natural instinct for making this stuff work.<p>So, I say: great pair of articles with some great tips.
Some good tips, published on a site that moves all the fucking content out of the way every time you click the mouse and makes it impossible to easily figure out who wrote something. Love the message, hate hate hate the Medium.
Rule #N: Use <i>black</i> and <i>opaque</i> text for your main text, not RGBA(0,0,0,0.8) or some such[1]. Please.<p>[1] <a href="http://contrastrebellion.com/" rel="nofollow">http://contrastrebellion.com/</a>
Rule #x - Test your design on lower resolution/quality screens. I see a lot of articles/blogs/whatever that look like crap on my Dell 1680x1050 (non-ips) work display.
While there's some useful stuff in these articles, there is a problem in that they are about technique, perpetuating a narrow style of design, without exploring the underlying principles of what makes a UI good or bad.<p>Techniques are good as they make it possible to implement a design well, but a collection of good techniques do not add up to a great design.
Instead of creating "gorgeous" UI, shouldn't we be creating <i>usable</i> UI? Just because something is wonderful to look at in no way guarantees that it's functional or usable.<p>I feel like these articles miss the point that ultimately, UI is about <i>people</i>. If <i>people</i> don't actually enjoy it and have a better experience, then it doesn't matter how nice it looks.
Rules like this are often for websites without a lot of actions on a given page. Does anyone have a link to a site with tips or can give their own thoughts for extremely action heavy sites?<p>I run an extremely complicated game with a ton of actions and complexity, and I find it very difficult to provide even a not terrible UI, let alone a Gorgeous one.
Top notch article thanks for posting. Thanks for pointing out those fonts, I feel like finding good fonts is always a struggle for me. Anyone have any other suggestions like these?
> iOS 7 has really made background blurring a thing recently, though Vista used it to great effect too.<p>That's not how I remember `bloggers` talking about it when Vista came out.
I'm absolutely not a designer, but I have serious issues with many tips in the first half of this article and the design trends that they support. They're all about putting text over images and keeping it readable.<p>So basically, you're first going to increase my cognitive load with a big flashy unrelated photo, and then you're going to blur and dropshadow and opacity-gradient it <i>just</i> so much that I can kind of read the text again? What for?<p>Fullscreen photos are nice, but they're <i>just a picture</i>. Very nice blurred bridge there in the background, but how is that going to sell me a route planning app? I feel like a lot of these examples are aesthetic-only designers gone wild without any place for feedback from their peers.<p>Is it good when it's pretty and you can <i>just about</i> read the text without squinting your eyes? No! It's acceptable at best. But if you try, and I bet if you actually do user tests, then you'll find that you want to ditch the image. Or at least put a big black box around the text (admittedly, also listed as an example).<p>Can we stop the cognitive overload already? Don't make me think! Don't make me search past the blurs and the street lights and the flowers to find the text I'm supposed to be reading.<p>(unless, of course, you sell a blur plugin, a street light or flowers)
For me, it's a great read. Yes, I cringed when I saw the word "Rules" when we are talking about beautiful UI. However, after reading the article, he is just using it as a framework to convey the message. And it works for him (and me) who are not "designers" but still aspire to create great designs.<p>I say read it lightly. To me, an engineer realizing the importance of great design is a huge thumbs up for me. I would hire him in a heartbeat.
There's a lot of space dedicated to laying text over pictures proving that the words are weak enough that a big image, possibly unrelated, is really important to obscuring the message. Give me something to feel before I try to think about the content.<p>Even when done well, words overlaying images means that neither is quite important enough to stand on their own and the added complexity of dealing with making it work and curating it, when the content manager doesn't know one of the more technical 'rules', means constant intervention from technical or design support.<p>Images, when not adding value are distractions from the lack of value in the content and add to the download size and content handling complexity (slower, less usable, higher dev costs).<p>Good design is hard enough vs. following Apple style guides for "light from the sky."
Ironically for me right now the CSS completely fails to load due to massive numbers of 403 errors (probably something on my side due to corporate firewalls it works fine on my phone).<p>I think there needs to be a Rule Zero: Fail gracefully.<p><a href="http://imgur.com/I5H1yvk" rel="nofollow">http://imgur.com/I5H1yvk</a>
Very informative to someone who's not a designer. I found the part on text on images
especially interesting, and like the arrow in the FedEx logo, once you know about
white text on images, you'll probably start noticing it everywhere...
Eww. Stop saying 'gorgeous'. That goes for 'bespoke' and 'beautiful' as well when it comes to desicribing your design and UI.<p>Seriously, it's 2015 in a couple of months.
Small nitpicky point: For method 4 floor blur, the image caption says "Look mom, no overlay!" But I think there is an overlay. The image looks quite darkened. Putting white text on a blurred image doesn't work without making sure the blurred image doesn't have too-light whites.
One feature missing from every modern browser except <i>Internet Explorer</i> is text shadow size. Most browsers support x,y, spread, and color. IE has x,y,spread, size, and color.<p>While I am not a huge fan of text overlays on images, it would be nice if browser vendors gave us an easy way to scrim the text a bit.
Neither of part 1 or 2 render on my iPad2... Just a blank white screen. I'm gathering, from the conversation here, there's something more to see😕
This is a great series of articles but I couldn't help and think that if you have to be so analytical about this, you will do better to trade with a designer that gets it more intuitively.<p>A lot of these rules exist simply because something looks or feels better (or is more readable, or simpler, or more historically consistent, etc.) Unless you can empathise with the underlying reasons, you will be memorising and misapplying a lot of rules.
I propose outlawing words like "gorgeous", "beautiful", "delightful" etc. when talking about app UIs. Really. It's an app - it's not gorgeous and never will be. It may be nice, pleasant or even look good, but an app is never gorgeous.
The most gorgeous UI to me looks something like this:<p><pre><code> cmd arg1 arg2 ...
</code></pre>
or<p><pre><code> shell> cmd
response
shell> cmd2
response2
</code></pre>
The simplicity, clarity and composability is hard to beat. And though you do gain certain benefits when you present a GUI (esp with pointing device), of course, you also lose a lot. Beauty is not just in the eye of the beholder, it's also in your brain.