GET 7 rules for creating beautiful interfaces. Part 2 / Company blog I love SP / Sudo Null IT News FREE

Recently we at " I love SP " completed design courses from trydesignlab.com . And this is one of the most important articles that the mentor well-advised United States of America in the learning serve. Today we publish the second part of the translation. You can see each our work from the courses on VKontakte by the track # design101 @ iloveip .

We talked about the rules for creating clean and beautiful interfaces .

These are the rules:

1. Light falls from above ( Part 1 )
2. Black and Patrick White Foremost ( Start out 1 )
3. Enlarge White Space ( Set forth 1 )
4. Learn to overlay text on images
5. Learn to highlight and plant text
6. Use solitary good fonts.
7. Steal like an creative person

Rule number 4: Learn to overlay text on images

In that location are impartial a few reliable ways to beautifully overlay text connected images. I leave separate you five and one more as a bonus.

If you want to be a good user interface couturier, you need to learn how to overlay text on images thus that information technology looks beautiful. This is what every righteous user interface designer can do, and not a intense ace. So after reading this article you will already have an advantage!

Method No. 0: Overlaying schoolbook directly along a shoot

I didn't eventide want to include this method, but information technology's technically possible to overlay text directly along a photograph so that information technology looks normal .

Otter Surfborads . It looks hipster and instagrammno. But the text is rocky to interpret.

There are many problems and risks in this method acting:

1. The photo should be lightless and not too contrast.
2. The text should comprise white . Try to find a good opposite example. I'm thoughtful . At least one.
3. Test it on every covert / resolution to make sure the text is decipherable.

Clear? Excellent! Directly never change the schoolbook or photo, and everything leave represent fine.

I don't remember that I victimised this method leastways once in my professional bodily function. Only with IT you can achieve a really cool solvent, just be careful. Aquatilis

Expedition Locate . Be sure to look if you make not seen it.

Method acting # 1: Dim the entire picture.

Mayhap the easiest style to overlay text connected a snap is to darken it. If the original photograph is not concealed enough, you can utilise a clear black layer to it.

Here is a modern colorful dimming photo.

Website Upstart uses 35% black filtrate.

If you go to the developer's console and bump off the filter, you will see that the photo itself is too brightly and contrast for the school tex to constitute clear. But with a dark filter - no trouble !

This method likewise full treatmen well for small images.

Thumbnails from the charity: water website The

blacken filter is the simplest and most universal, but you fundament also use color filters.

Method # 2: Text-happening-Background

This is another simple and reliable way. Draw a slightly transparent black rectangle and place white text on IT. If the rectangle is dark enough, then from the penetrate you can ingest almost any photo and the text will still be well interpret.

IPhone app conceptMiguel Oliva Marquez

You can also use color, but within reason out.

Concept in pink by Sign Conlan

Method # 3: Blur the figure of speech

Oddly enough, a good means to shuffling text readable is to blur break of the picture.

Snapguide blurred a extensive part of the picture. Note that it is also darkened.

This method became especially best-selling after the release of iOS 7, although IT was widely used back in Vista.

Instead of blurring, you canful also habituate start out of the photo that is out of focus. But be careful - this option is not so dynamic. If the picture suddenly changes, make sure that the background corpse blurry.

Teehan + Lax

I mean, just tryread the subtitle beneath.

Method acting number 4: Darken the inferior

In this option, the image is slenderly darkened to the tush and white text is located on top . This is a very skillful method, and I do not love if anyone used it in front Medium, but I saw it there.

It may seem to a hit-or-miss observer that in the Medium collections white text is applied directly to the image. Just this is non so ! In that respect is a barely noticeable black gradient from the in-between of the image to the bottom (with transparency from 0 to around 20%).

It is not so easy to notice, but IT is definitely there, and it definitely improves the legibility of the text.

Bank bill that Medium uses a small shadow in the text when overlayed on collection thumbnails, which further enhances readability. Ultimately, Medium can overlay whatever text on whatever effigy and get a good result.

You may inquire why the image inevitably to be darkened downwards. Translate the answer to this enquiry in Ruler No. 1 - fluorescent always falls from above. To smel the most undyed for our eyes, the image should exist a bantam darker down, just now like some other object that we experience .

Another advanced mode: dimming and blurring ...

Bonus - Disguise Method acting

Wherefore does Elastica blog have readable headlines in every image? Pictures in this showcase:

• non very dark
• relatively contrasting.

The answer is camouflage ( scrim ).

Scrim is a diffusor, photography equipment that makes the light softer. IT is likewise a special technique in vivid design that helps to "brea" the epitome and pull in the text more readable.

If you zoom out the browser along the Elastica blog Thomas Nelson Page, you can see to it what happens there.

Around the title bar there is a clear background with a thin dimming. ( World Health Organization knows how to go far? - Note. I love SP .) It is easier to notice it happening a solid-state blue background than in different photographs.

This is perhaps the virtually delicate way to overlayer textbook, and I haven't seen it anywhere else (moreover, it's enoughwily). But mark it for yourself, if it ever comes in William Christopher Handy for you.

Rules # 5: Get a line to Highlight and Imbed Text

The secret to making the textbook look pretty-pretty and appropriate at the same time is to use contrast. For example, you can make it larger, just thinner.

I think text design is one of the most effortful parts in creating a beautiful interface. But not by a blame sigh due to a lack of possible options. If you get already accomplished grammar school, then you are probably familiar with all the ways to highlighting text. IT:

• Sized (text edition can embody made larger surgery smaller).
• Color (you can increase or decrease contrast; bright colours attract attention).
• Saturation (fount may follow thicker operating theater thinner).
• Uppercase letters (the text can be typed in little letters or CAPITAL).
• Italic .
• Discharging (Oregon tracking ).
• Fields (technically they do not apply to the text itself, but dismiss represent used to appeal attention, therefore they are besides included therein list).

Thither is colour, and capital letters, and fields.

There are other ways, but I would non specially recommend them:

• Underline. Today, underlining should be used solely for reference.
• Colored desktop. This method acting is non so vernacular, but for some fourth dimension 37signals used it besides to refer to links.
• Strikethrough. Welcome support to the 90s, you CSS genius!

In my experience, if I can't find the "right" style for the text, it's not because I forgot to try capital or darker colouration, but because the best solution often lies in the right combination of "opposite" styles .

Highlight and drowning

Each methods of highlighting text can be divided into deuce groups:

• Ways that increase text profile . This is an increase in size up, saturation, the use of majuscule letters, etc.
• Ways that reduce the visibility of text . This is a simplification in size, contrast, margins, etc.

We leave call them ways to "highlight" and "drown" the text. We will not call them "visual weight", so that is too boring.

Home hugeinc.com .

The heading "Incarnate Design" is highlighted in many ways. It is large , precise contrasting and distinguished past bold .

The textbook in the footer, on the contrary, is sunken. IT is wee , non-contrast and more delicate .

And now the most decisive thing.

The name of the pages is the alone element along the site that you just pauperization to foreground . The unexhausted elements must be allocated and drowned simultaneously.

If you need to select an element, purpose at the same time ways to select and vei text edition. This leave help not to overload the interface, but concurrently it will give different elements the visual weight that they need.

The balance of visual styles.

Blu Homes is an example of impeccable design. Thither is a big newspaper headline there, but the accented word is written in lowercase letters - also many a selections would look redundant.

The numbers draw attention to themselves by size, colorise and location - but note that they are at the same time recessed with a thinner fount and less contrasting color in than dark gray.

Signatures under the numbers, although they are gray and small,capitalized and heady .

IT's all about balance.

Table of contents Magazine is a good representative of highlighting and sinking feeling text.

• The title of articles is the solitary element on the page that is not typed in italics . In this sheath, it is the petit mal epilepsy of italics that attracts attention (specially in combination with the bold human face).
• The author's name is highlighted in bold - in contrast to the word "by", typed in regular baptistry.
• The humble, non-contrast signature " ALREADY Unstylish " does non bother anyone. But thanks to capital letters, generous discharge and jumbo fields, it immediately attracts attention.

On the go and selected elements

Highlighting acrobatic elements is a to a greater extent complex moonlike of the same game.

Normally, if you exchange the font size, its style or minuscule letters to upper-case letter, then the area occupied past the text bequeath change . And this can atomic number 82 to unforeseen results.

What then to coiffe?

Can be in use:

• text color,
• backclot color,
• the shadows
• underlining
• small animation (increasing, lowering, etc.).

Here's one proven manner: seek to make light elements colored or colored elements white, but darken the setting.

The selected icon turned clean, but preserved the direct contrast with respectfulness to the background.

The conclusion is this: learning to take textbook is very difficult. Every clip when something did not work out for ME, I realized that I needed to become better. And to get better, you need to try.

Rule numeral 6: Use only good fonts

Attention: in this section you will not find whatsoever secrets. I will retributory list some just free fonts that you can use.

Sites with a very distinctive character crapper use distinctive fonts . But for well-nig interfaces you need something clean and simple .

I advocate only free fonts . Why? Because this article is for those World Health Organization survey . And among free fonts there are many a worthy options. Wherefore non utilization them?

So download them now for your next project.

All fonts you downloaded can be found in the Fonts application on the User tab.

Ubuntu

ubuntuhas numerous styles. For some applications it is too specific, for others it fits perfectly. For sale for download along Google Fonts .

---

Open Sans

Open Sans is a popular font that is easy to read. Good for body textbook. Obtainable for download on Google Fonts .

---

Bebas Neue

Bebas Neue is slap-up for headlines. It consists only of capital letters. You can download it on the Fontfabric internet site and go steady employment examples there.

---

Montserrat

Montserrat is obtainable in only ii styles, only this is enough. This baptismal font is the best free alternative to Gotham and Proxima Centauri Nova, but it is far from being as good Eastern Samoa they are. Easy for download on Google Fonts .

---

Raleway

Raleway is right for headings, perhaps a picayune too much for the independent text (these "w"!). The flair of Ultralight looks very beautiful (not in the flic). Accessible for download on Google Fonts .

---

Cabin

Cabin can be downloaded on Google Fonts .

---

Lato

Lato can be downloaded on Google Fonts .

---

PT Sans

PT Sans tail Be downloaded from Google Fonts .

---

Entypo Social

Entypo Social is an icon font and yes, it is everywhere . But the icons themselves are virgin golden. Don't want to redraw entirely these social net Word in colored circles? Indeed do I. Available for download at Entypo.com .

Here are some to a greater extent resources:

• Beautiful font combinations from Google Fonts . This is a great drift of how pleasing Google fonts can look. I constantly go to this site in search of inspiration.
• FontSquirrel . A collection of the best fonts for commercial message habit, absolutely free.
• Typekit. Если у вас есть подписка на Adobe Creative Obscure (Photoshop, Illustrator и т. д.), то у вас есть бесплатный доступ к огромному количеству прекрасных шрифтов, включая Proxima Nova.

Правило № 7: Крадите как художник

When I first reliable to design the interface - be it a button, remit, graph, or something else - I realized how insignificant my knowledge was to ready the elements beautiful.

But fortunately, I have never had to excogitate interface elements that did not exist in time. This means that I can ever see what others are doing and select the best.

Simply where to look for these examples? Here are a few sites that have been most serviceable to me. In decreasing order.

1. Dribbble

This is a portfolio site for designers, which can only be accessed by invitation. Here you will find works of the highest tone . And about whatever examples.

Here is my portfolio on Dribbble . And a couple more people to sign over to.

• Victor Erixon. У него очень особенный стиль — и это круто! Красивый, чистый дизайн в стиле flat. Он занимается дизайном всего три года и уже является одним из лучших.
• Focus Lab. Эти ребята «звёзды Dribbble», и их работы соответствуют этой репутации. Очень разнообразные и всегда высшего класса.
• Cosmin Capitanu. Ещё один классный дизайнер. Его работы выглядят супер футуристично, но при этом не безвкусно. Он очень хорошо работает с цветом. Но не слишком сосредотачивается на UX — хотя это проблема dribbble в целом.

Whole works by Focus Research laboratory and Cosmin Capitanu .

2. Flatbed UI Pinboard

I have no idea WHO "warmarc" is, just his Pinterest board with examples of transferable interfaces has always helped me in my search for a peachy design.

3. Pttrns

This is a heading of screenshots of mobile applications. The great thing about Pttrns is that the entire site is organized according to UX patterns. This greatly facilitates the search, depending on which interface constituent you are presently working along, whether it is a enrolment Page, private account, search results, etc.

I am deeply sure that all artist should copy until he can imitate the best work. And only and then you can look for your style and create new trends.

In the meantime, steal as an artist.

The deed of conveyance of this section, by the bye, is taken from the book of the same name, which I have not read, since I suspect that its main idea has already been discovered in the title.

Stopping point

I wrote this article because I myself would alike to read IT a duad of years ago. I hope she helps you. If you are a UX designer , then make a beautiful layout after you outline the prototype. If you are a developer , then attend the succeeding level and make your picture look fair. You do not need to graduate from an institute of art. Information technology is adequate to observe , simulate and tell friends what works and what doesn't .

At any rate, this is just what I managed to learn. And I always stay new to this business.

DOWNLOAD HERE

GET 7 rules for creating beautiful interfaces. Part 2 / Company blog I love SP / Sudo Null IT News FREE

Posted by: rollinsnowlielinuld81.blogspot.com

Share this post