Who is a graphic designer?

Graphic Designing is a form of art. The designer has the privilege to come up with an interface which will please the end-user and leave a lasting impact on their brain. So, a graphic designer is basically a person who uses a set of colors, typefaces, imagery and animation to give come up with an end result which fulfills the pre-define requirements. This end result could be on print or in digital. At the end of the day it is the smart use of all available tools and perfectly thought layout that will result into aesthetically pleasing design.

Where can a graphic designer find a job?

Graphic designer is responsible to develop the overall look and feel of the product. Without a properly planned design any genius product can fall head first. Henceforth, the importance of graphic designer is equally important during any product development life cycle.

What educational background is required for a graphic designer?

Although zero educational degrees will do good if you plan to be a freelancer. On the other hand if you are planning to work for some organization than a Bachelor’s degree in graphic design is a requirement set by almost ever company. Other than that you can consider the pointers below to strengthen your chances of getting into the company of your choice:

1. Familiarity with computer graphics and various design software.
2. Problem solving skills, creative vision, and good communication skills.
3. An associate degree in graphic design will usually make you eligible an assistant’s position.
4. Up-to-date knowledge of latest news from the graphic design industry is a must as this industry is pretty volatile.
5. A portfolio so as to prove that you have it in you what it takes to be a graphic designer.
6. Work experience of around 2-3 years before you start dreaming of stabilization and higher degrees.

Article Source : http://www.1stwebdesigner.com/design/beginners-guide-graphic-design-career/

A title tag is normally displayed at the top of the browser window. Take a look at your title tags. Title tags are most important SEO tags for any site.

The maximum length of a title tag to be displayed is between 60-70 characters for most search engines. If your title tag is over 70 characters, your title will be cut off around 70 characters on the search results page.

Search engine spiders use these title tags as the main source for determining the page topic. Spiders or crawlers examine the title and then translate the topic of the page. This is one reason why it is always best to use your keywords in the page title, and to place them as close to the beginning of the title as possible. Remember, the text included in the title tag is also the text that will appear in the search engine results pages as the linked title on which users will click to access your page. In fact, just fixing the title tags of your pages can often generate quick and significant improvements in your rankings.

For example, let’s say you have an educational site that provides information and guidelines on teacher certification requirements. You’ve decided that the most important keywords for your site are “teaching certification” and “teaching requirements.” In this case, a page title along the lines of “Teaching Requirements for Teacher Certification” is highly relevant to the topic of the site. Spiders will crawl your site, and because the title is the first factor it sees, the spider will “read” it and then examine the rest of the page finding the keywords used in other places on the page to determine how relevant the title is to the rest of the content. If the content, H tags, and title tag all relate—you’re in business! This is why it’s so important to target the most critical keywords in the title tag.

Follow this same process for all of your pages, and remember to create unique titles that are relevant to each page and do not keyword stuff. This greatly improves the effectiveness of those tags and will increase the search engine rankings for your keywords. Although your home page might show up for 20 or 30 different keyword combinations, only your top two or three keyword phrases should be included in the tittle.

Source At :

http://www.seo.com/blog/seo-tips/title-tag-seo-tips/

2011 has been the year of the tablet as an increasing number of internet users (millions of people) have begun browsing the web on an iPad, iPad 2, Amazon Kindle Fire or various Google Android based Tablet devices. With the increase in tablet use one thing has become certain, website designers must be willing to create a website that is ready for tablet based user interfaces. Here are a few tips to get you started when designing a website that is both functional for a traditional browser and a tablet.

1. HTML5 Integration
2. Use Adaptive CSS
3. Friendly Navigation
4. Tweak Your Form Fields With CSS
5. Don’t Crowd Your Pages

Read At :

http://www.freelancewritinggigs.com/2011/11/5-design-tips-for-creating-a-tablet-friendly-website/

Commonly Used Font Combinations

The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:

Serif Fonts

font-family : Georgia, serif
font-family : “Palatino Linotype”, “Book Antiqua”, Palatino, serif
font-family : “Times New Roman”, Times, serif

Sans-Serif Fonts : http://www.w3schools.com/cssref/css_websafe_fonts.asp
Monospace Fonts : http://www.w3schools.com/cssref/css_websafe_fonts.asp

A very good article for color for theory.

Well, if you’ve read the first five articles in this series, you may be asking yourself: “How does all of this relate to Mobile Design?” The purpose of this introductory series is for you to add some new tools and ideas to your mobile design arsenal. This article is no different. Colors can make your application look professional and beautiful, but on the flip side, they can also make it look like your app was made by my five-year-old nephew.

I am not out to make you a professional designer in this course, but knowing the fundamentals of color theory can really help bring your apps to the next level, even if you intend to create the entire app interface in code.

When it comes to understanding color theory, what follows is the simplest way I could break it down for you.

Primary Colors
Red, Yellow, Blue. These are the three basic colors that cannot be created by any combination of other colors. All other colors are the result of mixing these three.

Secondary Colors

Green, Orange, Purple. These are the colors formed by mixing the primary colors.

Tertiary Colors

Yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green. These are the colors formed by mixing a primary and a secondary color. In other words, it fills in the rest of our color wheel.

Analogous Colors

Any three colors which are side by side on a 12 part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors is the dominate color.

Complementary Colors

In regards to the color wheel, complementary colors are any two colors directly opposite each other, such as red and green. Complementary colors create maximum contrast and maximum stability. Be careful when working with fully saturated complementary colors for digital interfaces: they can be straining on the eye.

Read More

http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/introduction-to-color-theory/

When coming up with a new mobile site, you will go through the same planning process that you did for its desktop version. Choosing the right color scheme would be one of these steps, and a very important one at that.

Deciding on the right colors to use for your mobile website is very important to make sure that your site displays well on any mobile device, and that it will be easy to read by users who are on the go.

1. Use the colors you have for your desktop website.
2. Remember that mobile screens are not as powerful as your desktop monitor.
3. Avoid gradients.

Be Careful with Gradients and Background Images

If you use a lot of gradients in your designs (as I do), you need to be even more careful. Gradients are cool, but really only on a desktop. On a mobile, a user can see gradients even when they are not present – he or she just needs to bend the device a little, and voila, here is a gradient that you didn’t include in your design. Of course, this doesn’t mean you must kick gradients completely out of your mobile repertoire but if you minimize their use, this won’t be a mistake.

Backgrounds pose a similar problem. The same background might be perfectly legible on a desktop but on a mobile it might be impossible to read the text. It is your task to make sure this doesn’t happen.

CSS provides an easy way to target browsers on different types of devices, or different uses. For example, the design you produce for a normal desktop browser may not be suitable for a handheld device, or a printer. These are known as media types. There are several media types, and most browsers will generally concentrate on just one or two, depending on what they are designed to be used for. Opera is by far the most versatile, and supports six different media types.

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

Max Width
——————————————————————————-

@media screen and (max-width: 600px) {
.class {
background: #ddd;
}
}

Put the following line of code in between the tag. If you want to link to a separate stylesheet.

Min Width
——————————————————————————-

@media screen and (min-width: 900px) {
.class {
background: #999;
}
}

Multiple Media Queries
——————————————————————————-
Combining multiple media queries.
The below code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #444;
}
}

Device Width
——————————————————————————-
The below code will apply if the max-device-width is 480px (eg. iPhone display).
Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
.class {
background: #f00;
}
}

For iPhone 4
——————————————————————————-
The stylesheet is for iPhone 4 specificly

For iPad
——————————————————————————-
You can also use media query to detect orientation on the iPad (portrait or landscapse)

For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied. In this article I will focus on the orientation media query and have a fun demonstration showing how to use it.

Orientation

The orientation media query allows us to target specific styles based on the current screen or device orientation. We have 2 properties; landscape and portrait which allow us to change a pages layout based on the browsers current orientation.

A browser or device determines the orientation by listening to the width and height of the window. If the height is larger than the width the window is in portrait mode. If the width is larger than the height it’s in landscape mode.

/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles */
}

Within our style sheet we can specify our media query which will target a media type of screen and an orientation of portrait or landscape.

readmore..

It is possible to create multiple columns for laying out text With CSS3 – like in newspapers! with single html tags

Below are multiple column properties:

» column-count
» column-gap
» column-rule

Browser Support

Internet Explorer does not yet support the multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.

1. column-count :
The column-count property specifies the number of columns an element should be divided into:

div
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}

2. column-gap :
The property specifies the gap between the columns:

div
{
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}

3. column-rule :
The property sets the width, style, and color of the rule between columns.

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

Here are the dimensions of the iPhone screen when running Safari.

In portrait orientation the screen dimensions are 320 by 356 pixels. In landscape the dimensions change to 400 by 208 pixels.

The URL field can drop down at any time, so the extra 60 pixels at the top should not be counted on when trying to keep important items above the fold.