Megapixel

When we buy a digital camera, we have always offered a camera with a variety of species, by stating how many megapixels they own.This is a common trait that is often mentioned digital camera manufacturers. From 3 to 12 megapixels or more, it seems that with each generation of digital cameras, there is a higher resolution image.
But what we need that megapixel? A mega pixel is represented by 1000000 (one million pixels).
So, if the maximum resolution digital camera provides an image 3000 pixels wide and 2300 pixels high, this camera has a resolution of 3000 x 2300 = 6900000 / 1000000 = 6.9 megapixels.
Speaking about the megapixels, the question arises: whether the high-megapixel camera with necessary? because high-megapixel cameras with more expensive.
If you intend to use the images on the Internet you will find that the maximum resolution of 1600 x 1200 will be sufficient. That means buy a 1.92 megapixel camera!
If you want to print pictures, you should consider the requirements of pixels per inch. 300 pixels per inch is standard in the printing of each image.It simply means that all you need to do to find the maximum width of printed images is to divide the width in pixels by 300.
3000 pixels / 300 = 10 inches maximum.
so it is recommended in selecting a digital camera tailored to the needs. it helps you prioritize the quality of optical zoom.

10 Principles For Readable Web Typography

Readability is one of the more important aspects of Web design usability. Readable text affects how users process the information in the content. Poor readability scares readers away from the content. On the other hand, done correctly, readability allows users to efficiently read and take in the information in the text. You want users to be able to read your content and absorb it easily.

In this post, we’ll explain some Web typography terms and how they play into readability; we’ll present numerous tips to help improve the readability of your content; and we’ll showcase very readable websites, layouts and articles.

The Terms, And What Each Means For Readability

There are many factors that play into the readability of text. There are also a number of terms, all very important. Here are a few of the more common Web typography terms and an explanation of how each term affects readability.

Hierarchy
Every typographic layout needs the essential element of hierarchy. Hierarchy defines how to read through content. It shows the user were to start reading and where to read through. It differentiates headers from body text. Although colors of text boxes can be used to contrast headers and body text, hierarchy refers to the difference in size between these elements. Hierarchy plays a huge part in how scannable a layout is. It is an important technique that needs to be mastered to achieve readable Web typography.

Contrast
Contrast is the core factor in whether or not text is easy to read. Good contrasts will make text easy on the eyes, easy to scan quickly, and overall more readable. On the other hand, poor contrast will force the user to squint and make reading the body text almost painful, not to mention a lot slower.

As shown in the following illustration, black on white is very readable. Black on white is obviously the standard contrast colors, and to achieve readable content it is good to stay in the range of black-on-white contrast.

This one, however, pink on blue, is nearly impossible to read. This example my be a little extreme, but it shows how such an awful contrast can have a major impact on the text. You probably won’t see websites using such poor contrast, but it still shows why you need to be very smart about it.

Line Height
Line height is a very common term meaning the space between individual lines of text. Line height is another factor in the readability of body text and even headers. Sufficient line height is especially important in Web design because it makes the text ultimately more scannable. Line height that is too short will cause users to squint while reading. If it is too large, the text will seem like separate bodies instead of grouped together as one.

Letter Spacing
Like line height, letter spacing affects readability in Web typography. Letter spacing is, as the name suggests, the space between each letter in words. In print layout, negative letter spacing is a common technique to add a more fun feel to the layout, but it should never be used in body text. In any text, letter spacing is an obvious factor in legibility.

Line Length
Line length is often overlooked in Web typography but should not be. Line length is, of course, the number of words per line. A good line length is one that allows the reader’s eyes to flow from the end of one line to the beginning of the next very easily and naturally.

The Keys to Readable Typography

Achieving readability is relatively easy; all it takes is to follow a few key practices. A readable Web page can go a long way with your users, and readability has a huge impact on their experience. Designing for the Web is all about making the user’s experience as pleasant as possible. Here are 9 tips that will help you work towards readability.

1. User-Friendly Headers
Headers are a key element in typography, Web and print alike. As mentioned, they are part of the text hierarchy and a major factor in scannable content.

First off, header size is just as important as the size of the body text. Going too big with the header with a large amount of content can throw the user off balance when reading and cause them to lose their spot. It will ultimately ruin the flow of the content and be a distraction. Headers that are too small will ruin the hierarchy of the article, too. If the header is too small, it will not draw the user’s attention as it should.

Next, it is important to provide ample space between the header and body text.

2. Scannable Text
I have already mentioned “scannable” text many times, and you have surely heard it elsewhere. Scannable text goes hand in hand with readable text. Making copy scannable consists of good use of headers, hierarchy and focus points to guide the user through the content.

So, what makes copy scannable? Well, there are many factors, most of which have already been mentioned. Header size and position, body text size, text line height, text contrast and the way focus points are differentiated all impact how scannable copy is.

Focus points are certain elements or objects within the layout that attract, or are supposed to attract, the user’s attention. This could be a header, a graphical element, a button, etc.

3. White Space
In content-heavy layouts, spacing contributes to the readability of content. White space helps to offset large amounts of text and helps the user’s eyes flow through the text. It also provides separation between elements in the layout, including graphics and text.

In the example below, white space and only white space is used to separate text elements. The layout is very clean and efficient. The user’s eyes flow from text element to text element with ease, because of the large amounts of white space.

4. Consistency
Consistency is often regarded as an important technique for usability, but it also applies to readability. Consistency in the hierarchy is important to a user-friendly layout. This means that all headers of the same importance in the hierarchy should be the same size, color and font. For example, all headers in an article should look identical. Why? This consistency provides users with a familiar focus point when they are scanning, and it helps to organize the content.

5. Density of Text
Density of text refers to the amount of words you place in one area. Density of content has a major impact on your content’s readability. Density is affected by spacing options such as line height, letter spacing and text size. If you find a balance between all of these so that the content is neither too compact nor too widely spaced, you will have perfect density that is both readable and scannable.

6. Emphasis of Important Elements
Another key factor is emphasis of certain elements within the body content. This includes highlighting links, bolding important text and showing quotes. As mentioned, focus points are essential in Web typography. By emphasizing these objects, you provide focus points for the user. These points and objects help break up monotonous text.

Scannable text is extremely important. By providing these focus points,, you make the body text extremely scannable. Bolding key lines of text immediately attracts the user’s eye and is therefore a very important element in presenting important information.

Pictured below is an article from UXBooth. This article uses bolding and italics to point out important information in the article. This is a very readable article and very easy article to scan for information.

7. Organization of Information
Believe it or not, the way you organize information in an article can strengthen readability. Users are guided with ease through content that is properly organized because information is easier to find. This veers into issues beyond the scope of this article but is still very important.

8. Clean Graphical Implementation
Every text body needs some sort of visual support, be it an image, icon, graph or illustration. Placing the graphic in the article can be challenging. Sufficient space is needed between the graphic and text.

If the graphical element is an image, then a clean border is a good idea for providing a clean separation from the text. Borders can help guide the user’s eyes and are good for adding style to content. It is important, however, to keep borders in content simple. They should have a subtle color palette and shouldn’t be too large.

In the case of graphical elements such as icons and illustrations, space is the only separator that should be used. The content should move cleanly around the graphic without disrupting the text.

9. Use of Separators
Separators are a simple and easy way to divide text into sections in a clean and organized manner. They can be used to divide hierarchy elements, such as headers and body text. They can also be used to divide content into sections.

The simplest form of divider is a single line. These are most often used to divide hierarchy elements and are very useful for making subtle divisions that still play a big role in readability.

Another common way to divide content is to use boxes. Text boxes are excellent for separating unrelated content on a single page. They help move the user’s eyes through a complex layout. Below is an example of this on Pixelmator’s website. It uses boxes to separate content in a clean way. Notice how the boxes are defined by their background instead of a border.

10. Good Margins
You hear people say that you should use white space, but why? White space actually helps draw the user’s eye to the text. The blank area (white space) forces the eye to focus on the text. So white space will influence the flow and readability of content. Margins are one of the best white space elements and support text elements well. Margins on either side will force the user’s eye to focus inward on the core content of the article.

Margins also support the article in another way. They help separate content from the rest of the design and layout. Text shouldn’t bleed into other layout elements, especially if it is a long article. Margins help define the article and its separation.

In the grid-based layout below, margins and only margins are used to set apart bodies of text. The result is a clean, clear and concise page.

article source: http://www.smashingmagazine.com/2009/03/18/10-principles-for-readable-web-typography/

Writing an Interface Style Guide

Take a look at any CSS-based website design gallery, and you’ll see it’s obvious that beautiful interfaces are being designed and developed in amazing quantities. I frequently look to these sites for inspiration and, beyond a nice design and beautiful code, there’s usually something common about these sites: they’re new.

Unfortunately, it’s also common that beautiful interfaces don’t stay beautiful. An interface’s design disintegration can be frustrating to deal with, especially for the designer and developer of that interface; it can be particularly frustrating for the designer and developer who can no longer access the site to fix the issues.

If you have ever designed a beautiful interface only to find it ugly five months later because gaudy graphics, unpleasant colors, and distasteful fonts appeared over time, then you understand how maddening design disintegration can be. Similarly, if you have ever developed a clean, web standard, and accessible interface but later found the site littered with invalid, inaccessible, and presentational markup, then you understand this frustration as well.

Documentation can help avoid these issues—it provides guidance on how to maintain and update the interface, and keep it beautiful at the same time.

Design and brand standards

Interface design standards enable brand stewardship. Commonly documented in a design “style guide,” these standards inform clients and content editors of branding guidelines for typography, whitespace, color, etc. The design style guide provides a reference in which developers can describe the way the interface is intended to look, and helps designers to be consistent as the interface is updated so that, in turn, the interface continues to feel consistent.

Some design style guides are simple and straightforward, including only basic typography and color styles; others are informative and somewhat complicated, and go into great detail in defining all aspects of brand guidelines. Like the interface itself, a great design style guide should be straightforward, intuitive, and informative. It should provide detailed information, yet be clear and concise. The following are important elements and relevant details to include.

Layout and composition

Define all the layout variations that are used for the interface, and when and how they are used. Show wireframes to illustrate these variations (such as different column configurations and where they are used).

Typography

Explain the guidelines for acceptable use of typography. Use illustrations to show examples for the main text, the headline styles and their hierarchy, list styles, etc. It is also a good idea to define the typography standards in promotional graphics, as well as list the alternate typefaces that can be used for hypertext (in the event that the user does not have the font you have declared).

Color palette

Provide a color palette to illustrate the standard colors that must be used throughout the interface. This reference should include exact color codes (you can list hex color values or RGB values). It is good to show where these colors are used. For example, you can include a screenshot that shows the color used for links.

Images

Define the standard image sizes that may be used throughout the interface. This should include any graphic banners (such as promotional banner advertisements) as well as images that are used within content. Show how they may be styled and aligned, and how captions should appear (if used). You can also include what type of imagery that may be used (such as illustration or photography, as well as allowable styles or “mood”). Finally, if you use any icons in the site, set standards for them, such as how they look, where they are used, how they are styled, etc.

Brand guidelines

Beyond typography and color, brand guidelines can include other standard design elements. These standards might define the amount of space allowed around the logo, how the logo appears depending on the background it sits on, or how the organization’s name should always appear in text.

Some style guides include supplementary information beyond the look and feel (for example, you can include standards for copywriting, advertising, and other elements that influence the interface and user experience). When defining design standards, you can even include the related markup and CSS needed to create the visual appearance expected. However, it might be better to create a separate section or document for these front-end development standards.

Front-end development standards

If there is more than one developer on the interface, it is extremely important that everyone is aware of the development standards. It is likely that each developer has his or her own way of doing things. Getting everyone synced on (X)HTML, CSS, JavaScript, and other aspects of front-end development can help avoid any confusing issues down the road. While a design style guide outlines design and brand standards, a development style guide is important to keep development efficient. This can be a separate document, or included with the design style guide.

(X)HTML, CSS, and JavaScript

Delineate how (X)HTML, CSS, and JavaScript should be used when developing the interface. Address the standards that developers should follow, which DOCTYPE to use, as well as class and ID attribute naming conventions. Include the code used to create certain layouts, forms, widgets, etc. Outline formatting and commenting standards, and define how the framework is set up (if a framework exists). (X)HTML, CSS, and JavaScript standards can be discussed together, as they all play together, but it can be helpful to go in-depth for each one, in their own sections.

Accessibility and usability

Identify the accessibility guidelines that must be followed, and include any usability mandates. Document any localization and internationalization standards that exist.

Files and directories

Define how the directory structure is set up for files (images, style sheets, JavaScript files, etc.), and where these files go (according to their types or purpose). Explain file naming conventions and how they are used.

Quality assurance testing

Walk through the steps that should be taken for quality assurance: validation, link checking, accessibility testing, proofreading, etc. Include a graded support chart for browsers and devices.

When discussing standards in your development style guide, it should be clear that the standards outlined are not only industry-wide standards—they are also organizational standards that all developers should follow. Keeping development consistent goes hand in hand with keeping the design consistent, and should help make work more efficient and improve maintainability.

Keep style guides current and useful

Interface style guides are extremely useful to define best practices for design and development. However, keeping that information updated and functional is imperative. A glossary, an index, references, acknowledgments, etc., are among some of the supplementary details you can add to make the style guide as helpful as possible.

You’ll want to have this style guide easily accessible for designers and developers. While a printed version is great to have on hand, an online version can be easier to access, maintain, and keep current. If you do not wish to keep track of both a printed and online version, you can opt for print style sheets on the online version, so you only have to update the information one time.

Finally, provide information on how someone can get help, in case the style guide is unable to provide certain answers. List contact information for the person or team(s) that manage this documentation.

With proper documentation for clients and content editors to follow, you have a better chance at seeing your interface stay beautiful. Future designers and developers who work on the interface will have an easier time adapting, thus making their lives easier and potentially saving time and money.

Article Source: http://www.alistapart.com/articles/writingainterfacestyleguide