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.
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.
So, I say: great pair of articles with some great tips.
The examples pictured are very trendy, but most of the tips are about ways to create a minimalist design, and that's something that's been proven to be timeless. (e.g. Dieter Rams: http://goo.gl/ncLg0j)
> Minimalism isn't timeless, minimalism itself is a trend in design.
i suppose. depending on the length of your view. but, given minimalism has been a "trend" for the last 100 years or so, i am going to assume you're looking at broad trending across centuries instead of through the "flat design is trendy" lens.
On that basis classical architecture and design have been far more successful than anything else.
There's a reason for that Roman word in Times New Roman.
Minimalism works well on small screens. But my guess is that as UI devices get bigger and more immersive we'll see more texture and decoration beginning to reappear; six feet of extreme white space is too much to hold interest as a container of useful content.
Incidentally, not a few Victorian and Edwardian (i.e. pre-Bauhaus) public buildings in the UK have amazingly rich and detailed designs. They were incredibly labour intensive building projects, and there's something very compelling about spaces that were built and decorated almost entirely by hand with expert craft and precision and take pride and pleasure in expensive decoration.
I'm not sure what the UI equivalent would be, but it's interesting to think about.
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.
I find it odd that Medium, a company that preaches design from every corner of their soap box, can't even create an enjoyable reading experience. From top to bottom the entire site is just a UX mess.
Medium's hallmark is an 'enjoyable reading experience'. Care to give some opinion on what makes it poor? Not being funny here, I'm not their biggest fan but such an dousing comment provokes debate.
• Home View: I see two visible stories on my screen (with the second almost cut off). That's it. Two stories. If I didn't already know what medium was I'd have no idea what it _is_, how it works, or how to see stories that I actually want to read (I'd probably think it's someone's personal blog). If I was truly curious about what Medium was I would probably click on the tiny "Learn More" button in the masthead but given it's size and low contrast I might miss it.
• Article View One: Massive obnoxious image that takes up the entire screen with the title overlaid in white text....scroll scroll..finally! Words! I can't entirely blame medium for this layout though. A user has the option to add an image, which brings me to...
• Article View Two: These elements are also on View One as well but I'll talk about them here. The medium logo "M" is in no way representative of it's function (a menu). I was thinking that it would bring me back to the home view. Instead a menu slid out from the side like I was on a phone. This isn't the worst experience in the world but I'm confused why the logo doesn't function like every other website. So then I look inside the menu. I see collections..hmm what's that? Why didn't they tell me about that on the home view? This allows me to traverse articles I find interesting by collection topic?! That's awesome! WHY DIDN'T THEY PUT THIS ON THE HOMEPAGE? (IIRC they actually had collections on the homepage but have since gotten rid of it). The green hearts on top. What are those? People who liked the article? I actually don't know the answer to this question. I clicked on one and it just took me to the persons profile.
• The actual words: Reading a medium article gives me the experience of floating in space. I often loose my spot. It's a combination of the overuse of whitespace and the random "hallmarks" on the page, inline comment icons appearing on hover but only on a specific line, sticky headers that come back on scroll, and elements that appear to be just kind of thrown on the page, the author spot at the bottom where you can share and subscribe seems oddly misplaced.
I don't have time to go one but you get what I'm saying.
I must say, it does help. Just today I was creating a simple web-page (with my developer-designer chops) and remembered the complaints that people have about contrast. I went back and tuned the colors to make them readable as much as possible. This is inspite of I myself hating the low-contrast designs; sometimes you get carried away by the aesthetics.
This is especially true with HiDPI screens. If your primary content is textual in nature, then using low contrast colors is disrespectful to your readers.
This is amplified when designers don't use relative scaling units for font sizes. Medium.com is a good example of presenting readable content, independent of DPI.
But many sites require substantial zooming to read comfortably, even with perfect vision.
Another major usability issue is disabling pinch-to-zoom on mobile devices. This is a behavior that users have come to expect.
I've had to explain to several older people that their iPad isn't broken when they couldn't zoom in on a product while shopping.
Amen to that. My other bugbear is floating menus that expand to fill the whole phone screen when you zoom in. Because they are fixed, you can't scroll away from them, hence your only choices on a phone are 'too small to read' or 'can only read a small segment of a floating menu'. Fail!
that site is a lot fluff and soapboxing with no real value.
it give examples of sites with bad contrasting, but don't show what they would look like fixed up. Rule #1: if you're going to complain about something, give me a demo of the point you're trying to get across so I can see the benefit. You should even go as far as explaining the process you used.
just directing people to a bunch of links and "read this guide" does nothing
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.
And on different OSes. For example, many designers work on Macs and don't bother testing on Windows, then get surprised when users complain that the type on their website is unreadable -- OS X's rasterization makes light fonts look much bolder than Cleartype on Windows.
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.
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.
The article doesn't claim to do that, however. It states right up front that it's got a narrow focus:
First, I was a UX designer with no UI skills. I love designing UX, but I wasn’t doing it for long before I realized there were a bunch of good reasons to learn how to make an interface look nice
He says flat out it's not about UI design, it's about how to make a mockup attractive, because that has value too.
I thought the articles were great! Exactly what they claimed to be, written in an easy to read no nonsense style, with useful advice. I subscribed to his newsletter ;)
That happens whenever there is an attempt to formalize a creative field. UI design itself is typically judged good or bad, very loosely, on the relationship between how the user base 'knows' how to use/navigate/read/understand things and how that translates to something new. That's a loose definition on what intuitive design is. You can couple that with simple elements like surprise and intentionally manipulated expectation for a light creative jump.
However, if you stray outside of the "function and form = great design" crowd: the kind that makes things that are actually usable and considered well-designed in their use by a random sampling of people with a well defined intended use case, and venture off into scary territory like post-modernism, metamodernism, and so on, you might find that "great design" has no definition at all; not even a single leg to stand on. And you can bring those elements of what you learn there, back into popular design, just to shift it a bit.
Those facets of design and art are all about breaking your expectations and understandings of what a thing is, of what it means to see it, interact with it, even think about it, and instead it forces you to see that you are looking through one window of aesthetics, when there are really billions of windows.
Technique is good for mainstream, a how-to, a guide, an introduction, something to google when you want to start incorporating various elements of design that are thought of as 'fundamental' by contemporary culture. Design and aesthetics (let alone defining greatness of either) are something much more philosophical; and arguably debatable.
I agree, the success or failure of UI design depends on conforming to the implicit assumptions and culture of its intended audience, and, being task-based, having a thorough understanding of its intended use-case: how easily the target audience achieves the desired goal.
While the 'greatness' of aesthetics are debatable, I'd argue for design it's not. Aesthetics are based on taste, culture, technology, background and approach, whereas design is about solving problems. Everything that goes into a design must have a purpose – aesthetic choices are important, but they should be in alignment with the brief.
There are rules and concepts which one must understand and know when to follow or subvert: form, size, colour, contrast, proximity, structure, action, relationship etc. This visual grammar forms the building blocks of design. Scary territory like postmodernism or constructivism or whatever just use these concepts in different combinations to express their ideas.
What about cultures that don't have problems to define, or where 'problems' are defined in such a way that solving one directly causes one to be created?
> Scary territory like postmodernism or constructivism or whatever just use these concepts in different combinations to express their ideas.
Not true. You begin with a foundation in order to assume that concepts like form, size, color, contrast, proximity, structure, action, relationship actually exist. You have your foundation, and you see post modernism through it. Post modernism is then an combinatorial expression of what already exists, to you.
What if nothing exists to begin with, or it is undefinable, or it is only definable in relation to a definable undefinable? The transience and dependency of terms on one another is what I am trying to express.
> There are rules and concepts which one must understand and know when to follow or subvert
One must not do anything. The most absurd, ridiculous, and controversial creations are what shape wave after wave of art, to then be analyzed and sifted through, to identify and separate something that was not separate to begin with, to define good and bad. But the definitions of good and bad are dependent on the context. The terms exist in relation to that which has already been defined.
The rule of design is not "follow the rules or do the opposite". There is more to do than use the rules to measure the value and define the potential of design, if you choose to do those things at all.
However, in general, in broad culture today and historically, I would say you are correct. But things change subtly, until everything is completely different.
Post-modernism is meta-aesthetics. It's not a specific visual style, it's a social game played by well-educated people to signal their learning to other well-educated people.
The standard example would be an architect building the usual everything-is-a-rectangle modernist house and 'ironically' putting a classical portico two feet in front of it.
That kind of thing was done to death in the 80s and 90s, and it's not so much of a thing any more.
>The most absurd, ridiculous, and controversial creations are what shape wave after wave of art
You could probably argue that the entire web is one massive work of art.
It's certainly been absurd, ridiculous and controversial enough to qualify. (I mean that as a fan, not a critic.)
Instead of creating "gorgeous" UI, shouldn't we be creating usable UI? Just because something is wonderful to look at in no way guarantees that it's functional or usable.
I feel like these articles miss the point that ultimately, UI is about people. If people don't actually enjoy it and have a better experience, then it doesn't matter how nice it looks.
I was a UX designer with no UI skills. I love designing UX, but I wasn’t doing it for long before I realized there were a bunch of good reasons to learn how to make an interface look nice:
My portfolio looked like crap, reflecting poorly on my work and thought process
My UX consulting clients would rather buy someone’s skills if their expertise extended to more than just sketching boxes and arrows
Did I want to work for an early-stage startup at some point? Best to be a sweeper
I love designing UX, but I wasn’t doing it for long before I realized there were a bunch of good reasons to learn how to make an interface look nice
If you take his comments about overlaying text, for example, he's offering tips on how to keep overlaid text readable while also looking gorgeous. This is something that combines both usability with visual appeal.
I'd also argue that _people_ aren't a bunch of automatons who use computer interfaces simply to accomplish tasks. A "gorgeous" UI can make an otherwise mundane task (e.g., looking up which recipes to cook) into something fun and enjoyable.
"I'd also argue that _people_ aren't a bunch of automatons who use computer interfaces simply to accomplish tasks. A "gorgeous" UI can make an otherwise mundane task (e.g., looking up which recipes to cook) into something fun and enjoyable."
I wish I could upvote this comment more. On a front-end client client for a US CBP command and control system, I had to design and implement both a day and night mode. The operators loved the night mode so much they ran it during the day too.. they called it sexy mode. It was the first time I saw how excited and fun they were having because they just felt cool using the system. The experience had a huge impact on me.
They can definitely be both! But the function of a UI is not to be "gorgeous" -- it's to be usable.
A UI that's entirely functional without being flashy or visually attractive still accomplishes its mission (e.g. space shuttle control panels). A UI that's beautiful to look at but can't be understood is of little value.
I think you're arguing against a point nobody made. The article is about "creating gorgeous UI". The article is explicitly focused on making things that look good. The author does not argue this focus on aesthetics is more important than usability. (Although usability is partially a concern if you consider how much he talks about text legibility.)
I think reasonable people can agree that interfaces should be usable and beautiful. I think it is then also reasonable that someone would want to have a focused discussion on just one part of that.
No, we should not be creating usable UIs instead of gorgeous UIs. We should be creating gorgeous and beautiful UIs. They aren't mutually exclusive.
This article is about creating things that look good. It isn't saying "this is all you should care about, it doesn't matter how your UI functions", it's just saying "these are some tips for making this look good". Making things usable is outside the scope of the article, but there's plenty of articles discussing usability. This single article does not contain every piece of information you need to understand interface design, it just covers one aspect. It isn't uncommon for an article to have a subject.
If you're going to go to the effort of making something that is useful, I don't think going the extra mile to make it beautiful is wasted effort. I don't think anyone could really argue that going in the other direction is a good thing, squeezing something functional into an aesthetically beautiful shell (though that is obviously very common amongst young designers [and Philippe Starck]). But taking something useful, and carefully designing the look and feel of it to be beautiful is a more than reasonable thing to do; it invokes desire.
This is an important point, especially considering so many startups dub themselves with "a gorgeous/beautiful way to do X or Y". This concept, generally regarded as "aesthetics", is considered a universal principle of design:
"The aesthetic-usability effect describes a phenomenon in which people perceive more-aesthetic designs as easier to use than less-aesthetic designs—whether they are or not."[0]
Point is - something that looks good may "trick" the person into thinking something is more usable even if it's not.
Absolutely, usable UI is a must but why not make it gorgeous. It doesn't have to be one or the other.
> ..then it doesn't matter how nice it looks.
In a way, making it usable (done elegantly) is part of "gorgeous" UI. I wouldn't underestimate the power of beautiful visual design. It evokes user's emotions in such a way that makes it memorable. It makes it a great UX all around. I try not to look at it in a separate way as the whole thing (usable and nice visually) is what makes it beautiful.
But in its crude form, I do agree the usability is the most important but I just think visual design is not too far from it.
If you show a user two pages, one with very well thought out UX but looks like it was designed in 1998, and a convoluted UX that happens to be extremely pretty, the second page is going to be favored to the vast majority of people.
For one thing this is addressed in the first part, for another thing I find it somewhat naive. People are precisely the issue, appearance matters immensely to them. It's a mistake to pretend otherwise.
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?
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.
I'm not joking. Since games have no real "purpose", it's easy to treat all features as equivalent in value. After all, every feature is there for fun. But the reality is that many features are just cruft that distract from the core gameplay that's actually "the fun part".
A bit heavier on the theory (still a great introduction), describing what to me pretty much seem axioms of human perception in the area of user interfaces, you're going to need the Gestalt Principles:
It's a series of five, that should provide great insights on principles like spatial relationships, grouping, contrast, size, texture, and more. Read them, get a piece of paper and a pencil, list all the actions and buttons and whatnot you need, start sketching until you've got something sensible.
Oh but before that, do what Pxtl said, and simplify. I was going to say, "you can't confuse a user with a button that's not there", but that's not strictly true. You gotta make sure the user doesn't expect the button to be there either :)
Still, simplify ruthlessly. And make it easy for the player. I don't know your game, but say there's a number of buttons that almost always get used in sequence or together. Combine them into one. Even if you think "yes but this is a powerful combo move that I want the players to discover", that's cool but you can always make your game harder later on, after you've made it easier to play.
Another (tangentially related) rule of gameplay UX is this one: make the game follow the player's intention, which is not always the literal machine-like interpretation of the rules. For instance for action-platformer games, make the hitbox of powerups slightly bigger, and the hitbox of enemies slightly smaller. Add a bit of leeway to jump after you walked off a ledge. Again it makes the game easier, but the player will feel their intentions are followed (also, barely missing an enemy that you feel you should've hit is fun, as is just barely grabbing an item that you didn't think you could reach, the opposites of both are not fun), you can always add more stuff to challenge them, but without encumbering the gameplay.
Now your game sounds like some sort of strategy game so these platformer-tips won't apply directly, but I hope it shows the right way of thought, that you can translate to be relevant for you.
Helpful thoughts. Thank you for the considerate post. I will do as you say and study the Gestalt Principles, thank you for linking them.
I find that ruthlessly simplifying is useful for the new player, but the player base hates it. Perhaps it's the way I've been simplifying that is the problem and less the simplification, but the user who already understands the complexity doesn't want to relearn.
I think it's a solvable problem though, so clearly it's in the execution. Thanks for the detail here.
User orientation and regularity or commonality of action should define the most prominent and accessible navigation and actionable clicks/taps. Where are you, what are you most likely doing, then give them the items needed for those scenarios while holding back the rest somewhat.
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?
One way is getting a typekit subscription and checking out their font lists [1]. Aside from providing many excellent fonts, there are good descriptions of mood properties and historical context that can really help to choose something appropriate.
Source Sans Pro is Adobe's first open source typeface and was designed by Paul D Hunt. It was specifically designed for user interfaces, and is available in multiple weights. I think the regular weight also works well for body text.
Whenever I find a font on a page that looks interesting, I highlight it and go to Chrome's Inspect element Computed tab to get the font name. As the blog says, steal like an artist.
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.
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 just so much that I can kind of read the text again? What for?
Fullscreen photos are nice, but they're just a picture. 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.
Is it good when it's pretty and you can just about 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).
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.
(unless, of course, you sell a blur plugin, a street light or flowers)
Most people aren't software developers (or similar types), their browsing habits aren't grounded in their continually-honed digital search and retrieval skills.
They like pretty pictures. They don't mind being distracted as much (all those news websites we find god-awful, with tons of display ads and flashing colors - do you assume those businesses don't know what they're doing?). They don't always visit a website with a singular intent to extract the relevant data as quickly as possible and move on.
There is so much UI/UX-related ranting on HN from the power user perspective; a lot of people just can't believe how amazingly stupid these companies are, how they haven't done any research or testing, how some exec just wanted to fuck with the design for the hell of it. The reality is, they just aren't optimizing for you, especially if advertising is their main source of revenue.
I do think it's important for them to make the power users happy enough, because they are the influencers and early-adopters that the others will follow, but they're going to have a hard time putting some nerd rage before the piles of cash flowing in.
(This post wasn't specifically aimed at you, I do agree with much of your argument, but we have to keep in mind that we aren't the only user class, we're actually a relatively small one.)
The whole point of good UI design is that it should be pleasant to look at (and images can help with that) WITHOUT having to put much effort into searching what you're supposed to be reading.
> WITHOUT having to put much effort into searching what you're supposed to be reading.
Agreed, and I think my opinion differs from that of today's design crowd in what is "much effort". For me, any effort is too much. If I have to do effort to actually understand your landing page, I'm out.
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.
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.
I recently made a decision to shutdown the startup I co-founded 3 years ago. Brutal. Now, I am catching my breath to figure out what I want to do next. You?
Gestalt principles of Design: http://www.andyrutledge.com/gestalt-principles-1-figure-grou... bit more theoretical, but simple and introductory, and interesting to read. IIRC (it's been a while) the five articles in this series would take roughly the same amount of time as these two big ones in the OP.
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.
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.
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).
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).
I think there needs to be a Rule Zero: Fail gracefully.
It might have something to do with the HN effect and 12MB of uncompressed png images. I know it's an article about design, but this seems excessive to me.
Medium usually works pretty well even under HN loads, at least I haven't seen it behave quite like this before, maybe none of the one's I've seen have been quite this image heavy. shrug
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...
Using words that are usually designed to describe fashion is appropriate. You wouldn't be caught dead with a pie chart on your dashboard. Everyone knows that donut charts are the thing.
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 Internet Explorer is text shadow size. Most browsers support x,y, spread, and color. IE has x,y,spread, size, and color.
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.
Yes you can. You know that feeling when you start using a tool, and it does exactly what you want without and fuss? When it solves your pain points in an elegant fashion?
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.
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 hope that you're saying this as a developer/engineer that is unaware of all the theory behind design, not as a designer that believes what they do is all intuition and there's no theory to learn that will make themselves (and their intuition) better.
I was saying that as a developer that has experience doing design.
For example, a lot of people in fashion and design are able to tell what colours go together without analysing tables or systems of complementary colours. I'm really not making this up - most great creative people understood a lot of this instinctively (and a lot of it is a lot harder to systematise than colour theories, for example.)
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.
Those, yes, and babies, kitties, some art etc. Granted, an app can be a form of art, but slapping some pastel colors and a nice font on your CRUD app is not quite sufficient. If the main purpose of your app is to, by visual experience, itself (not through user content), provoke a feeling in the user, then we can talk.
The most gorgeous UI to me looks something like this:
cmd arg1 arg2 ...
or
shell> cmd
response
shell> cmd2
response2
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.
Good UI is relative to the product functionality and the goals of its users. The command line is good UI for some things and bad for others. Its certainly not universally good.
I don't think retina images are required for a 'gorgeous' UI, but I can see how it can help. If you do, please make sure you aren't serving up 4MB images to people over 3G. Not only is it slow, but a lot of people are still on expensive limited data plans.
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.
So, I say: great pair of articles with some great tips.