Rules for Creating Gorgeous UI, Part 2
medium.com
medium.com
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.
It's definitely a trend with merit, but it isn't some absolute truth to always strive towards.
I would recommend reading "Living with Complexity" by Don Noarman for some interesting arguments about why complexity in design isn't inherently bad.
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.
http://spyrestudios.com/minimalist-design-a-brief-history-an...
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.
• 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.
website motherfucker, reactive manifesto, you might not need jQuery, contrast rebellion, extensible web manifesto, slow web movement.
so many manifestos, so little time.
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.
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
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.
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.
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.
> 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.
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.)
I agree with you on the internet.
The title is clear: this article is about creating a "Gorgeous UI." It's a good to visual aesthetics. It's not about "what makes a UI good or bad."
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 ;)
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.
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.
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 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.
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.
> ..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.
From the intro:
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
"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.
[0] https://www.safaribooksonline.com/library/view/universal-pri...
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 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.
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".
http://www.andyrutledge.com/gestalt-principles-1-figure-grou...
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.
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.
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.
https://store1.adobe.com/cfusion/store/html/index.cfm?event=...
The font is also available on Google fonts
Shameless plug: I use Source Sans Pro on my website if you want to see an example of what it looks like for body text and headlines :-)
That's not how I remember `bloggers` talking about it when Vista came out.
Apple's use of translucent elements was not well received when they first did it (and I'm not certain it is highly regarded now, either):
http://daringfireball.net/linked/2007/06/19/ntmb http://daringfireball.net/linked/2007/11/09/translucent
Ok, I found a picture http://www.oneclickroot.com/wp-content/uploads/2014/09/the-v...
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)
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.
At least they recommend using an overlay with the image, many don't do this or don't tint it enough to make the text readable.
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.)
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.
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."
I think there needs to be a Rule Zero: Fail gracefully.
Seriously, it's 2015 in a couple of months.
Rule 4 - Apple's started blurring backgrounds. You should too.
I do agree with the spirit of the article, if you want text to be legible, then you should make it legible.
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.
Kids nowadays. So emo.
That's what good UX is.
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.
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.)
cmd arg1 arg2 ...
shell> cmd
response
shell> cmd2
response2
They are NOT about designing user interfaces. They are NOT about how to architect some infrastructure.
They are about how to paint these things so they look pretty when you present them to people.
I wonder how many sites really accommodate for that.. very few in my experience. There's always Opera Mini though.