Dictionarium Latino - 비즈니스 베트남어회화 & 이메일 표현사전

This is the second part in a two-part series. You should read the first part first.

We’re talking about rules for designing clean and simple UI without needing khổng lồ attkết thúc art school in order khổng lồ vì so.

Here are the rules:

Rule 4: Learn the methods of overlaying text on images

There are only a few ways of reliably & beautifully overlaying text on images. Here are five — and a bonus method.

If you want to lớn be a good UI designer, you’ll have khổng lồ learn how khổng lồ put text over images in an appealing way. This is something that every good UI designer does well and something every bad UI designer does piss-poorly — or just doesn’t bởi vì, in which case you’ll have a huge leg up after reading this section!

Method 0: Apply text directly lớn image

I hesitate khổng lồ even include this, but it is technically possible to lớn put text directly on an image and have it look OK.

Otter Surfboards. Hip và Instagrammy, but a bit difficult to read.

There are all sorts of problems and caveats with this method:

The image should be dark, và not have sầu a lot of contrast-y edges The text has khổng lồ be white — I dare you to find a counter-example that’s clean & simple. Seriously. Just one. Test it at every screen/window size khổng lồ make sure it’s legible

Got all those? Great. Now never change the text or the image, và you should be good to lớn go.

I don’t think I’ve ever used text directly on top of an image for any professional project, and it’s really mentioned here as a sort of “control” method. That being said, it’s possible to vày lớn really cool effect— but be careful.

The Aquatilis website – definitely worth a visit.

Method 1: Overlay the whole image

Perhaps the easiest method lớn put text on an image is lớn overlay the image. If the original image isn’t dark enough, you can overlay the whole thing with translucent blaông chồng.

Here’s a trendy splash image with a dark overlay.

The Upstart Website has a 35% opađô thị blaông xã filter.

If you hop into Firebug and remove the overlay, you’ll see that the original image was too bright and had too much contrast for the text to lớn be legible. But with a dark overlay, no problem!

This method also works great for thumbnails or small images.

Thumbnails for the charity:water site

And while a blaông xã overlay is simplest và most versatile, you can certainly find colored overlays as well.

Method 2: Text-in-a-box

This is dead simple and very reliable. Whip up a mildly-transparent black rectangle và lather on some Trắng text. If the overlay is opaque enough, you can have just about any image underneath & the text will still be totally legible.

Modern Honolulu iPhone Concept by Miguel Oliva Márquez

You can also throw in some color — but, as always, be judicious.

Now in pink. By Mark Conlam

Method 3: Blur the image

A surprisingly good way for making overlaid text legible is lớn blur part of the underlying image.

Copious blur overlays in Snapguide. cảnh báo the blurred areas are also darkened.

iOS 7 has really made background blurring a thing recently, though Vista used it lớn great effect too.

You can also use the out-of-focus area of a phokhổng lồ as the blur. But beware— this method is not as dynamic. If your image ever changes, make sure the text is always over the blurry bits.

Teehan + Lax

I mean, just try to lớn read the subheader below.

For the love of everything good in this world, how did this get approved?

Method 4: Floor fade

The floor fade is when you have an image that subtly fades towards black at the bottom, and then there’s white text written over it. This is an ingenious method, và I have no idea who did it before Medium, but that’s where I first noticed it.

To the casual observer, it appears that these Medium collections are displayed by plastering some White text over an image— but in response to that, I say false! There’s ever-so-subtle a gradient from the middle (black at 0% opacity) lớn the bottom (blachồng at, ehhhhh maybe ‘bout 20% opacity).

Difficult khổng lồ see, but definitely there, và definitely improving legibility.

Also notice that the Medium collection thumbnails use a slight text shadow to further increase legibility. Those guys are good!

The net effect is Medium can layer just about any text on any image và have a readable result.

Oh, & another thing— why does the image fade blaông xã at the bottom? For the answer to lớn that, see Rule 1— light always comes from the top. To look most natural khổng lồ our eye, the image has lớn be slightly darker at the bottom, just like everything else we ever see.

Advanced move: phối the blur with the floor flade… introducing The Floor Blur.

The “floor blur” on SnapGuide. Look mom, no overlay!

Bonus Method: Scrim

How does the Elastica blog have sầu a readable headline on top of a dynamic image every single time? The images are:

Not particularly dark Kind of contrast-y

Yet it’s difficult lớn describe why the text is so legible. Take a look:

Answer: the scrim.

A scrlặng is a piece of photography equipment that makes light softer. Now it’s also a visual kiến thiết technique for softening an image so overlaid text is more legible.

If we browser zoom out on the Elastica blog, we can more clearly see what’s going on.

There is a gradiated-opađô thị box around the “145,000 Salesforce Users Come out to Celebrate…” headline. It’s easier khổng lồ notice against the solid xanh background than against the contrast-y photos above sầu it.

This is probably the most subtle way of reliably overlaying text on images out there, và I haven’t seen it anywhere else (but it is pretty sneaky). Mark it down, though. You never know when you’ll need it.

Rule 5: Make text pop — and un-pop

Styling text to lớn look beautiful và appropriate is often a matter of styling it in contrasting ways— for instance, larger but lighter.

In my opinion, one of the hardest parts of creating a beautiful UI is styling text— & it’s certainly not for unfamiliarity with the options. If you’ve made it through grade school, you’ve probably used every method of calling attention to lớn or away from text that we see:

Size (bigger or smaller) Color (greater contrast or lesser; bright colors draw the eye) Font weight (bolder or thinner) Capitalization (lowercase, UPPERCASE, và Title Case) Italicization Letter spacing (or— fancy term alert— tracking!) Margins (technically not a property of the text itself, but can be used to lớn draw attention, so it makes the list)

Solid use of color, capitalization, & spacing. By Jon Bell"s kid.

There are a few other options that are possible for drawing your attention, but not particularly used or recommended:

Underline. Underline means link nowadays, & it’s not worth trying lớn force it khổng lồ mean anything else, if you ask me Strikethrough. Bachồng off, you 90s CSS wizard, you!

In my personal experience, when I find a text element that I can’t seem to lớn find the “right” styling for, it’s not because I forgot khổng lồ try caps or a darker color — it’s because the best solution is often getting right a bộ combo of “competing” properties.

Up-pop và down-pop

You can divide all the ways of styling text inkhổng lồ two groups:

Styles that increase visibility of the text. Big, bold, capitalized, etc. Styles that decrease visibility of the text. Small, less contrast, less margin, etc.

We’ll hotline those “up-pop” và “down-pop” styles, in honor of designers’ favorite adjective. We won’t call it “visual weight”, because that is boring.

Case study title from hugeinh.com.

Xem thêm: Tải Game Bắn Trứng Khủng Long Về Máy Tính Miễn Phí, Tải Dynomite

Lots of up-pop going on with the “Material Design” title. It’s big; it’s high-contrast; it’s very bold.

The items in the same site’s footer, on the other hand, are down-popped. They’re small, lower-contrast, & a less bold font-weight.

Now the important part.

Page titles are the only element to style all-out up-pop.

For everything else, you need up- and down-pop.

If a site element needs emphasis, apply BOTH up-pop and down-pop styles — but slightly MORE up-pop. This will prsự kiện things from being overwhelming, but allow different elements the visual weight they should have sầu.

A balance of visual styles

The impeccably-designed Blu Homes trang web has some big titles, but the emphasized word is lowercase— too much emphasis would look overpowering.

These numbers on the Blu Homes site draw your eye with their large size— but notice that they’re simultaneously downplayed with a very light font-weight and lower-contrast color than the dark gray.

The small labels below the numbers, however, while gray & small, are also uppercase và very bold.

It’s all about the balance.

contentsmagazine.com

Contents Magazine is a good case study in up/down-pop.

The article titles are basically the only non-italicized page elements. In this case, lachồng of italicization more effectively draws the eye (particularly in combination with the bold font-weight)

The author’s name is bolded in the byline— making it st& out from the normal-weight “by”

The small, low-contrast “ALREADY OUT” text stays out of the way— but with its uppercase type, generous letter-spacing, & large margins, you can see it the moment you look for it

Selected và hovered styles

Styling selected elements and hover effects are another round in the same game— but more difficult.

Usually, changing font-kích cỡ, case, or font-weight will change how large of an area the text takes up, which can lead khổng lồ seizing hover effects.

What does that leave you with?

Text color Background color Shadows Underlining Slight animations— raising, lowering, etc.

One solid option: try turning white elements colored, or turning colored elements Trắng, but darkening the background behind them.

The selected inhỏ goes from colored lớn trắng, but stays high-contrast against its background

I’ll leave you with this: styling text is hard.

But every time I’ve sầu thought “Maybe this text just can’t look right”, I’ve been wrong. I just needed khổng lồ get better. And to get better, I just had to lớn keep trying.

So I offer you this bit of consolation: if it doesn’t look good, don’t worry– it could if you were better. But hey, let’s keep on trying and make ourselves better.

Hey, PS: if you want to learn a ton more about styling text, check out Learn UI Design. I cover it in detail there.

Rule 6: Use Only Good Fonts

Some fonts are good. Use them.

Note: There are no strategies or things to study in this section. I’m just going lớn danh mục some nice miễn phí fonts for you to lớn go tải về and use.

Sites with a very distinct personality can use very distinct fonts. But for most UI kiến thiết, you just want something clean & simple. That’s right, buddy, put down the Wisdom Script.

Also, I’m only recommending miễn phí fonts. Why? This is a guide for folks who are learning. There’s more than enough out there at the zero-dollar price point. Let’s use it.

I recommend you tải về them all right now, & then go through your downloaded fonts as you start the visual thiết kế for your project.

The Font Book application “User” category is good for remembering what you downloaded.

In no particular order:

1. Work Sans

Sometimes you’re designing something that needs a modern, clean fonts, but with juuuust a bit of fun. Work Sans fits the bill perfectly. Slightly quirky; totally underused.

And it’s going to remain underused for a while. You can’t get the italics for this fonts on Google Fonts (though the normal style is there). Therefore, most designers will avoid using it for a toàn thân fonts. (I’ll tell you where to get the italics below)

Work Sans’s wide letterforms means it works even at very small sizes — a great property for any di động tiện ích typeface.

Get it at: Google Fonts (no italics), Font Squirrel (includes italics)

2. Roboto

An incredible, clean, all-purpose font. While it is the mặc định phông of Android, it’s still underused (& free!) for iPhone & web apps.

Beautiful, works everywhere, & comes with a gadzillion weights.

See it in the wild: Google Maps

Get it at: Google Fonts

3. Metropolis

Ever since website 2.0, fonts like Gotđam mê và Proxima Nova have sầu exploded in popularity. And like many thiết kế trends, it was with good reason — they’re fantastic. I mean, using Proxima Nova will feel lượt thích cheating at design, it’s so nice.

Unfortunately, those fonts are also super expensive (well, one is sort of không lấy phí with Adobe Fonts) và Metropolis is probably the single best free alternative (but there are others).

Pro-tip: When choosing any font, it’s always best khổng lồ take a look at uppercase, sentence-case, & the full range of weights. You never know when a slightly different setting will be just the style you want.

Compare the two shots above sầu — same exact font, two different feels. Beginning designers underuse uppercase. If you want lớn cấp độ up your kiến thiết game, start exploring uppercase.

Get it at: Font Squirrel

4. Source Sans Pro

One thing I lượt thích about Source Sans is it makes a great choice when you’re tempted lớn go with the incredibly overused xuất hiện Sans or Lato. Resist the urge!

Source Sans has a lot of the same strengths as Open Sans or Lato lớn — neutral character, just a touch of humanity (rather than cold, stark geometric letterforms), and it works great for user interfaces.

For easy pairing, kiểm tra out its sisters: Source Serif and Source Code Pro.

Get it at: Google Fonts

5. IBM Plex Sans

After decades of using Helvetica, IBM finally released its own typeface family, Plex.

I love Plex for being slightly quirky and kind of technical feeling. I guess that’s IBMs br& anyways? Nailed it, guys.

Oh yeah — và Plex Sans pairs nicely with Plex Serif & Plex Mono. It’s everything you need.

Get it at: Google Fonts

6. Feather Icons

While many popular inhỏ sets (ahem, Font Awesome) have overly rounded & bubbly shapes that don’t pair well with clean, simple kiến thiết, Feather Icons is a hugely under-appreciated antidote.