Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 08 2012

11:00

A Handy Guide to Proper Typography for a Successful Design

Basically, typography is the art and technique of arranging typefaces for communication purposes. In other words, typography is a simple arrangement in order to transmit a message, while good typography is the attention to visual accuracy and details, even the small ones. Typography started when writing appeared. The most simple arrangement of letters was also some sort of typography. Nowadays, typography is an element we see everyday and everywhere — Prints, Books, Newspapers and letters, TV and Web. Even the foremost websites were caring about typography, and were trying to improve it as much as possible with the resources available at that time.

Web Typography

Image Source

Web typography is just one of the most recent branches of the general typography concept. While images can also transmit a message, most of the content available on websites is made up of text, that is why so much attention has been given to web typography lately. While planning and designing a web page, typography isn’t less important than the visual hierarchy, selection of correct colors, functionality and many other features. We should never under-estimate the importance of web typography, nor think that it plays a minor role for a great user experience.

Anyone who strives to have amazing typography must understand that print typography and web typography are totally different things. While some principles may be the same, web design is a totally different “environment”. Both print typography and web typography have their own rules and guidelines which must be respected. A crossing of these two may result into mixing different principles which almost have no chance to exist together.

Hierarchy

While you may already be familiar with hierarchy in web design, you may feel that there is a hierarchy in typography as well. Hierarchy in typography will give you a starting point for reading the text displayed. This is quite important because you always want to deliver your message correctly and you want your readers to understand it properly. Lots of websites don’t have this issue anymore but you should keep it in mind, so your website doesn’t appear on a one-century-old websites’ list.

Spacing Issues

While there are really very few websites with typography hierarchy issues, there are quite a lot with spacing issues related to their typography. As there must be a logic in spacing between all elements on a website, so there must be a logic in your typography spacing as well. You may want to get familiar with a few terms like: Leading Size, Kerning, and Tracking.

Leading Size is the tool which allows you to increase or decrease the whitespace generated between the text rows available. You can read here why increasing it will help your readers reading your text. Kerning is the process of adjusting the spacing between characters in a font with the aim of achieving a more pleasant visual look. By using the Tracking tool, you can achieve almost the same effect, the only difference between Tracking and Kerning being the space generated. While tracking generates an equal amount of space between each character, kerning adjusts the space based on character pairs.

Colors and Color Palette

Image Source

The colors in typography don’t specifically mean the color of your text which is usually of one color, instead they mean the over-all colors used on your website. All the colors and graphics used on the site will represent a “background” for your text, that is why you should be careful with the colors used. They must always fit the color of your typography, and should never obfuscate your text. You can also experiment with bigger-sized typography (also called as macro typography) to achieve better results. Defined in a simple way, macro typography is the use of bigger-sized text for attention-grabbing purposes. It is usually not longer than 1-4 words that is why it is important to keep it as short and correct as possible. It may be followed by some heading-sized text under your key message, but it’s not as important because that isn’t the focal point on your site, while big-sized text is.

Examples of Macro Typography in Websites

Purple Bunny

Matt Hall

VS

Font Pairs

Font pairing is the process of combining 2 or more typefaces with the aim to create a nice combination. While this sounds interesting, for beginners it is a hard job. Choosing one font, or a few fonts that are nice is well, but when your aim is to combine 2 fonts to achieve a perfect paring, it is much harder then it sounds in theory. Font Pairing has the aim to reduce the flatness which may be created while using one font choice, even with different styles. It would be a good practice to use one font for all headlines you may have while the other one for simple paragraphs. There is even a great book by Douglass Bonneville with thousands of font pair combinations for those who’d like to see ready examples.

Contrast of Size/Weights

It would be a big mistake if  you make your fonts non-differentiable. As you already know, it is very important to use a pair of fonts in order to have decent typography, and not some uniform text. Even if you have found an amazing font pair, you shouldn’t forget about setting correct sizes and weights for your fonts. Setting unsuitable weights and sizes will basically ruin your pair as it will become hard to understand that you have used different fonts. Your fonts should never be lost in the background because of similarity, incorrect size or mismatched background color.

Font-Replacement Methods

Image Source

The old times are gone when designers had to use only fonts available on user’s computers or even images with text so they would see the correct font. As technology evolves, HTML5 is starting to get over flash, and there are a lot of amazing tools which would let you replace any font they have in the collection, without making your users install any specific font in order to view the text correctly.

@font-face

@font-face replacement method is one of the easiest methods. It has been introduced only a few years ago. It is really easy to implement as there is no more messing around with Javascript and jQuery code while you are installing it. It only relies on CSS, and takes addition of a few strokes of code to be up and running. The only con which font-face may have is that rendering is interpreted in different ways by different browsers. Using the latest versions of browser should minimize this problem, but, anyway it’s on the horizon and we mustn’t forget about it.

Google Fonts

Even though Google released its font directory only in 2010, it already has almost 500 font families. Google Fonts API is being widely used because of its simplicity and trust the company has built itself overtime. The only con Google Fonts has is its lack of really qualitative typefaces. Even if Google offers full font families, they don’t have those premium-looking fonts which would make your website stand apart.

Typekit

Typekit is a well known service which has been used a lot over the years. It has become really popular because of its huge font collections. It has almost one thousands fonts and most of them are looking amazing. Typekit got popular because it offers those premium @font-face solutions that Google doesn’t offer. Launched in 2009, it also got some popularity being founded one year earlier than the Google Font directory. The only con which troubles some of its potential clients is the paid subscription method. It is a yearly fee you have to pay, besides this, you are also limited to a specific number of page views per month and fonts per website, depending on your plan.

FontSquirrel

The best thing about FontSquirrel is that it has lots of fonts available which are used widely and it is absolutely free. It is being loved for the number of nice fonts it provides and the absolutely free usage on as many websites as you would like. FontSquirrel even allows you to use a @font-face generator which lets you create your custom kit @font-face fonts.

April 03 2012

11:00

How to Design a User-Interface Element in Photoshop

In this tutorial we will be creating a small user-interface element.  Most of the attention will be given to the slider, however we will do our best to improve the over-all look of the interface element. We will focus on the creation of a “filter” slider and a call to action button. We will try to achieve a nice color contrast by using a few tones of blue with a few gray tones. By adding really small details, we will improve the overall quality and look of our user interface piece. This tutorial is meant for designer of all levels, especially for beginners and intermediate level users with an approximate completion time of 20 to 40 minutes.

Final Result

Step 1

We will be starting this user interface element by creating a new document of the following size: 900px width; 500px height. It doesn’t matter what size you create your document, but it must be wide enough for us to have some “breathing space”. On the background, apply a pattern overlay style with a nice, subtle pattern. There are hundreds of awesome subtle patterns on SubtlePatterns.

Step 2

Create a white, rounded rectangle by using the Rounded Rectangle Tool (U). Mine is 310 pixels wide and 160 pixels high. Apply some drop-shadow to it, as shown in the screenshot.

Step 3

Add some white inner shadow.

Step 4

We will add some Outer Glow, which will be black. The outer glow with the stroke and drop shadow applied will give us a nice shadow all around the shape.

Step 5

Add the stroke to the shape. It must be a light-grey color (#b2b0b0). This will be the “base” rectangle which will be a shadow for the upcoming layers which will be placed over it.

Step 6

Create a new rectangle shape, it must be of the same width but the height must be 10 pixels more. Be sure that the new rectangle fits the upper part exactly, then apply some black drop shadow to it. Set the Blend Mode to: Multiply, Opacity to 25%, Distance to 1, Spread and Size to 0. Duplicate this layer then move it up by 2 pixels. Duplicate the last layer one more time and move it by 2 pixels up as well. Now you have a nice “stack” of well-styled rectangles placed one over the other. And, as you can see, the shape we’ve created in the first step now works as a shadow for all sides, except the bottom part (the effect we wanted to achieve).

Step 7

It’s time to create a new shape that we’ll color grey, again, use the Rounded Rectangle Tool (U). Be sure to set the Radius to 10px as we want to have our corners fairly round. This shape will be the base of our slider. Apply some gradient overlay styling as shown in the figure. I’ve chosen this light-maroon color because it will perfectly contrast with blue and grey colors, the ones we are going to use a bit later.

Step 8

Apply some stroke to the shape with a little bit darker color, which is: #c4b8b5

Step 9

Create a simple square of about 12 x 12px and align it on the slider bar. Apply all the styling shown on the screenshots below for a nice final result.

Step 10

Create 3 lines using the Line Tool (U). Two of them must be the same size while one should be 2 pixels smaller in height. This will make our buttons look better and they won’t have the “blank” look. Apply some white drop shadow to make the lines even more noticeable.

Step 11

Duplicate this pin and leave some space between them. You can leave as much space you’d like, because this will be our “marked/checked” area which is going to be highlighted.

Step 12

Use the Rectangle Tool (U) or Rectangular Marquee Tool (M), followed by the Bucket Tool (G), fill the space between the pins with any color. Apply some Gradient Overlay style of a nice light and dark blue, which looks awesome in combination.

Step 13

Add some dark blue stroke to the highlighted area to make it stand out and grab attention.

Step 14

By Using the Line Tool (U) and holding the SHIFT button you can create straight lines. Create some 5-7px sized lines and be sure to have an equal spacing between each. I have a spacing of 19 pixels between each line. Create enough lines to fill the upper part of the slider. All of them must be light grey colored (#ebeaea). If you’d like to make the “checked” part of the slider stand out more, you can create those blue colored lines under the slider. They will only cover the blue part of the slider (from the ending of the first pin till the beginning of the second one).

Step 15

Add some price tags over the lines. If you want to add the price over each line, you can, but you should keep in mind that this will mess up the layout a lot and will distract the user, that is why I decided to add the price tags only over the first and the last grey lines (the beginning and the end of the slider) and to the first and last lines which belong to the highlighted area.

Step 16

While the slider looks pretty nice, it doesn’t look very attractive by itself, that is why we will add some extra elements to make the interface stand out. By using a Sans-Serif font (I am using Helvetica, but Arial may work just great for you), add some text above the slider. Let’s assume this interface is for an e-commerce website; therefore we will add the name of the buyer and how many items are in his cart. As you can see there are 2 different rows of text, with different styling. The font size used for the name is 14px while the size for the cart statement is 12px. This will add more importance to the name, rather than the cart, that’s why it won’t bug the user about seeing a huge-sized text about how many items he has in the cart. The “cart” text itself is going to be highlighted by a applying a darker-grey color to it and adding some “underline” paragraph styling. Take a look at the screenshot for exact details.

Step 17

I have added a nice grey icon at the top right corner to show some extra info. My icon says that the website is using some kind of “Super-fast-shipping method”. You can find all kind of icons (vector, png, psd) on IconFinder

Result So Far

As you can see, we have done a pretty nice job tweaking the slider interface, but as you can notice, there is too much space under the slider and the bottom of the rectangle. We can either make the rectangles fit the current space used, or we can improve this piece of user-interface elements by adding a few more things which will make it definitely stand out!

Step 18

Create a black rectangle by using the Rounded Rectangle Tool (U) with a radius of 3 pixels. This will be the base of a “Call to Action” button. Apply some black shadow with an opacity of just 18% to give it a light-grey drop shadow look.

Step 19

Add some Inner Shadow to the button base. It won’t be so clearly seen right now, but when we change the base color to blue, the shadow will be clearly seen.

Step 20

Add some gradient overlay to the button as we obviously need to get rid of the black color. For this gradient overlay styling we are going to use exactly the same colors we have used to apply the Gradient effect to the highlighted area of the slider.

Step 21

We could add a simple stroke but because of the gradient effect applied on button, it won’t look all that good. For the stroke, we are again using the gradient effect, with a bit darker blue colors: #15488b and #1c60b9.

Step 22

Finish up this button by adding some “Buy Now” text with black drop shadow effect applied.

Success so Far:

As you can see, we have almost finished our slider. It isn’t a final result yet because there are some pixel-imperfections. While the pixelation isn’t a big deal for some, it should not be ignored. If you have a really quick look at the interface, you won’t see any imperfections, however, if you look at it for 10 seconds you can spot some really unattractive spots like the ends of the slider bar and the bottom corners of the base rectangle shapes.

By zooming in you can clearly see the pixelation that we talked about. This can be solved in a few ways, but we will go through a simple one. This isn’t the best solution because we are going to change the shapes a little bit, but we’ll easily get rid of these pixel imperfections. Grab the Rectangular Marquee Tool (M) and Bucket Tool (G) and start fixing pixel by pixel.

It works for us in this case because it’s a pretty small area to fix and won’t require a lot of effort. After you are done with one side, you can move to the other side and repeat the exact steps in order to get an acceptable result.

Final Result

Hope you’ve enjoyed this tutorial. Do share your thoughts with us in the comments!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl