The web is rich with creative and amazing fonts, and the choice is enormous. So today we would like to present 50 incredible FONT which you can use for web or print design. This collection will sure help you improve your typography skills! Let’s take a close look at some of the most beautiful fonts we’ve found on the web. Some amazing fonts are missing? Let us know!

Go to the article: http://www.noupe.com/fonts/50-free-fonts-for-professional-designs.html

A good artwork is proved with the alphabets used within the design. Typography is an art without which every design seems to be incomplete. It is not a science, for which we need to follow any definite axioms and rules. Typefaces are designed to convey your creativity to others but every type cannot be used for any design.

It won’t be wrong to confess that typography plays a major role in making any graphic design successful. However, sometimes the combination of color and typography is overlooked, which affects the overall project. So, have you ever tried black and white typography? I mean.. have you ever tried black and white typography? Well, I think black and white typeface can be more impressive than colorful typography….what say?

Today, I present you 20 most amazing typography posters and illustrations in Black and White. These designs got me thinking that a cool black’n’white design can be much more expressive than a colorful one. We all know, anything in B&W can captivate viewers mind easily.

Overeating Typography:

Wash away the TYPE:

Falling:

Typography with “A”:

“M” Design:

We See:

Dancing Typo:

Big and Bold Typography:

Typography Tree:

Los Angeles:

I love Graphic Design:

“X” and “Y” Typography:

BREAKS:

Typography Whirl:

Question Mark?

Ink and Water:

Bad Typography:

Art is Breaking:

Girly Typography

Zebra Print:

I am sure these images must have held back your thoughts for few moments as they transmit messages in the most simple and creative way. Therefore, I would like to know, how many of you think Black and White typography can be more impressive and persuasive than colored one.

However, did you find these designs convincing enough to make you experiment your designs with Black and White typography…Send in your opinions and if you created something creative like the above given images, don’t hesitate to share .

Sourced from: http://www.graphicdesignblog.org/black-white-typography-graphic-design/

Over the last several months, a small group of web developers and designers have been hard at work perfecting a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics. The method, dubbed sIFR (or Scalable Inman Flash Replacement), is the result of many hundreds of hours of designing, scripting, testing, and debugging by Mike Davidson (umm, that’s me) and Mark Wubben. Through this extensive work, we, along with a invaluable stable of beta testers, supporters, and educators like Stephanie Sullivan and Danilo Celic of Community MX, have completely rebuilt a DOM replacement method originally conceived by Shaun Inman into a typography solution for the masses. It is this technology which provides the nice looking custom type headlines you see on sites like this one, Nike, ABCNews, Aston Martin, and others. We’ve released sIFR to the world as open source, under the CC-GNU LGPL license, so anyone can use it free of charge.

Anyone who has been following the developments with sIFR over the last several months is already aware of most of the information on this page, but this being the newly official sIFR 2.0 landing page, an overview of the technology is below. Also, feel free to read the complete historical perspective in my original post Introducing sIFR: The Healthy Alternative to Browser Text.

How it works

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

1. A normal (X)HTML page is loaded into the browser.
2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
3. If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.

From a technical standpoint, a lot more stuff is happening, but that is a top-level overview. The only other material part of the process that is important from a developer/designer perspective is how CSS styles change during all of this. Your (X)HTML document starts off with its standard styles. Then, once sIFR determines it will run, your html and body tags are classed with “.sIFR-hasFlash”. This is done in order to accomplish two things: 1) to hide your browser text as the method is running, and 2) to create “decoy” styles for the text you are replacing. Decoy styles are never seen by the user. They are meant to adjust the space the browser text takes up before the measurement and replacement occurs. This is necessary because your browser text might be a narrow font and your Flash text might be a wide font. So in other words, something that takes up one line in browser text might take up three lines in Flash text. In the above case, you’d set your decoy style on the browser text to something like “letter-spacing: 10px;” to widen it to match the Flash text. This process is called “font tuning” and it’s really the only potentially tricky part of sIFR. Everything else is cake. Because you can’t explicitly set the size of your fonts in sIFR, your sIFR fonts will take their cues from your browser fonts. Match them up by adjusting your decoy styles and sizing will take care of itself (more details on how to do this are in the documentation).

Accessibility details

sIFR is fully accessible to screenreaders and other assistive technology. Don’t take our word for it. Ask Matt May of the W3C who endorses it as an accessible method to create rich typography on the web. Or ask Joe Clark, one of the world’s leading accessibility experts, whose interest in typography is only trumped by his interest in accessibility.

The knee-jerk reaction of some people whenever they see Flash is that it must be inaccessible because it’s Flash. What we’ve done with sIFR, however, is turn that model completely on its head. Your (X)HTML document is still the exact same document it was before sIFR kicked in. Your code is untouched and sIFR is completely abstracted to the javascript layer; therefore, your accessibility, your search engine friendliness, and your semantics are the same as they were before the day you decided you like nice fonts.

In addition to the obvious accessibility features, sIFR text can also be selected, copied, and pasted by users. It also zooms with the user’s text-zoom settings, although this only occurs on page load and not on-the-fly. And finally, of course sIFR works with linked text (anchors).

Compatibility

sIFR works on Mac, Windows, and Linux machines with Javascript turned on and Flash 6 or greater. As far as browser support goes, it’s great on all the majors and even some of the minors: PC IE 5+, Safari, Firefox, Opera 7+, Omniweb, and even Konqueror. We estimate this covers over 90% of consumer-grade machines in the world.

The beautiful part, however, is that if any of the above conditions aren’t met, users will see the exact same content, only without the sIFR text. Standard browser text will appear instead.

Permanence

sIFR snaps right in and lifts right out. This is an important point. Making the decision to use sIFR is often just a question of adding a .js include to your site, uploading a .swf and some .css files to your server, tuning your fonts, and that’s it. It generally doesn’t require any wholesale code or design changes, and should you decide at some point in the future that you don’t want to use it, simply remove the .js file and you’re back to browser text.

While sIFR gives us better typography today, it is clearly not the solution for the next 20 years. It is but a nice stopgap for people who value the importance of typography and don’t want to wait 1, 5, or 10 years for browser makers, OS vendors, and type foundries to figure out a better solution. The moment that happens however, sIFR will lift right out and give way to whatever other method is available.
Bandwidth

The sIFR javascript file is less than 10k and only loads once. Thereafter, it is pulled from the browser cache. The same applies to the sIFR Flash movies which contain your fonts. If you have five headlines on a page which all use the same custom font, the .swf is pulled once from the server and from the browser cache thereafter. sIFR Flash movies are generally between 8k and 20k depending on the complexity of the font.
Flash/ad blockers

We’ve worked with the developers of the Firefox FlashBlock extension to make sure sIFR text is automatically degraded to (X)HTML for users of recent versions of FlashBlock. When users install FlashBlock, they are demonstrating a bias against Flash (most likely because of the incredible amount of obnoxious and invasive advertising on the web these days) and we want to respect this bias. If users don’t want to see Flash, we don’t want to show it to them. sIFR runs fine under other extensions like AdBlock, but users can always disable the loading of sifr.js if they’d like.
Proper use and best practices

sIFR is a powerful tool. So powerful, in fact, that you can completely ruin a web page with it if you get overzealous and don’t exercise restraint. Early on in development, a dude in Texas e-mailed me and asked me why his sIFR-ized page took 30 seconds to load. I looked at the page and he had replaced every single word with sIFR text… even complete paragraphs and 300-word passages. Do not do this please! sIFR is for headlines, pull quotes, and other small swaths of text. In other words, it is for display type — type which accents the rest of the page. Body copy should remain browser text. Additionally, we recommend not replacing over about 10 blocks of text per page. A few more is fine, but once you get into the 50s or so, you’ll notice a processor and speed hit.

There also are two features we put into sIFR by user request which can be used, but developers and designers should know the downsides. One is the ability to use transparent backgrounds in the Flash movies so that your page background shows through. This is supported in PC IE, PC Opera 8, newer versions of Safari and Firefox, and a few other browsers, but not every single one. The result is that browsers which don’t support transparency will render Flash movies with a background color that you specify as your “fallback” color. Furthermore, transparent Flash movies take up a bit more CPU power than non-transparent ones. The second thing is using sIFR for linked text. While this works just fine, please be aware that users will lose the ability to right-click or middle-click these links and have them open in a new window. This may or may not be important to you.

Sourced from: http://www.mikeindustries.com/blog/sifr/

Let’s face it: the core purpose of all web design is communication. Whether we’re talking about an online ecommerce store, a web presence for a Fortune 500 company, or a profile for a social networking site, typography is a vital component. For most people, typography is simply about arranging a familiar set of shapes to make words, sentences, and paragraphs. Having the ability to set type with only a few strokes on a keyboard has allowed us to forget about the creative and artistic possibilities of this medium.

There are numerous obstacles to the effective customization of typography for the Web — and we’ll address these in the coming pages, which have been extracted from my SitePoint book, The Principles of Beautiful Web Design — but the power of type should be motivation enough to push the proverbial envelope. Not convinced? Pick up a magazine, turn on a television set, or take a walk through a grocery store. You will undoubtedly see hundreds of creative and effective uses of type. It is the substance of branding, the key to unspoken communication, and an essential piece of the web design pie.

In order to unlock the potential of type, we must first understand it. Admittedly, this is no easy task. The minute details of letterforms and the spaces around them have been carefully calculated over centuries of investigation and practice. In the early days of print, every letter of every typeface had to be carved into wood or cast from lead, inked, and then pressed onto paper. This was a handcrafted profession requiring exacting attention to detail. Even though the practicality of this practice has long been surpassed by modern printing methods, many colleges and universities offer classes in letterpress so that future graphic designers can both appreciate the benefits of working with type on a computer, and see the potential for typographic exploration.

My personal love of typography is twofold. As a designer, I enjoy working with type for the artistic aspects of it. I like the voice that different fonts provide, and the expressiveness of typographic collages like the one in Figure 4.1. After all, the root words that make up typography are typos, meaning impression or mark, and grapheia, meaning writing; typography literally means making impressions with writing. As a programmer, I also appreciate the puzzle-like problem-solving tasks that are involved in working with type. The choices of font and color are only the tip of the type iceberg. In fact, the majority of the decisions that need to be made in our work with type involve the space around the letterforms and text blocks rather than the actual type itself. Nevertheless, choosing an appropriate typeface is a crucial step as well.

Warning: This Topic May Be Addictive!
After studying typography for some time, you’ll never look at a billboard, brochure, or book the same way again. You might start snapping pictures of ride signage at theme parks, rather than your kids. Pondering whether the entrees in a restaurant menu are set in Cantoria or Meyer 2 may become more interesting than choosing between the entrees themselves. The study of typography is one that draws many people in and never lets them go! Consider yourself warned.

The history and implementation of type is a topic that has already filled hundreds of books. In this chapter, though, I intend to provide a brief introduction to the world of typography. First, I’ll cover some of the issues with — and solutions for — taking type to the Web. Then, we’ll get into basic typeface terminology, explore some usage guidelines, and investigate the characteristics of different fonts. From our discussion of legibility concerns, to the question of using dynamic headings online, I hope you’ll find this chapter to be practical and inspirational.

If you like what you see here, and would like to go down the rabbit hole a little deeper, there are plenty of online communities for learning about and discussing typography. One of the most highly regarded is typophile.com. The name “typophile” speaks volumes about the nature of this community, and if you have any questions about type or typefaces, there’s likely to be somebody in those forums that can help.

Taking Type to the Web

When it comes to the Web and choosing fonts for text that will be displayed in a browser, it doesn’t matter if you have five, or 5,000, fonts installed; you have to think in terms of the lowest common denominator. In the ’90s, a brief trend saw many web site designers set the text of their web sites to whatever obscure font they wanted, and include on the site a statement like, “This web site looks best in some font, click here to download it,” as well as posting the actual font file on their web site for download. Not only is this approach most likely to represent a violation of copyright law, but we shouldn’t expect site visitors to go to such lengths just to view our sites.

The number of font families that are supported, by default, across both major operating systems is very small. This list of nine font families in Figure 4.2 is commonly known as the safe list. The downside to the safe list is that it doesn’t provide for much variety within each font category. If you need a standard sans-serif font, you have to choose between Arial, Trebuchet MS, and Verdana. For someone who hasn’t been exposed to many fonts, that may seem like a reasonable variety, but for those of us who know the nuances of other sans-serif fonts like Helvetica Neue, Futura, and Univers, using one of the safe fonts can be like using a screwdriver to drive in a nail.

Read more: http://www.sitepoint.com/article/principles-beautiful-typography/

Site planning with a team is often easier if you base your major structural planning and decisions on a shared master site diagram that all members of the group can work with. The site diagram should evolve as the plan evolves and act as the core planning document as changes are proposed and made in the diagram. Site diagrams are excellent for planning both the broad scope of the site and the details of where each piece of content, navigation, or interactive functionality will appear.

For major planning meetings consider printing at least one large diagram of the site organization, so that everyone can see the big picture as it develops from meeting to meeting. The site diagram should dominate the conference table, becoming a tactile, malleable representation of the plan. Everyone should be free to make notes and suggest improvements on the printed plan, and the revised diagram becomes the official result of the meeting.

Site diagrams

As your team works out the information architecture and major categories of content, site diagrams visualize the developing information hierarchy and help communicate the organizational concepts to the team and to stakeholders and project sponsors. This communications role is crucial throughout the project, as the site diagram evolves in iterations from a brainstorming and planning document into a blueprint for the actual site as it will be developed.

Site diagrams can range from simple hierarchical “org chart” diagrams to more complex and information-rich maps that show both the major divisions of the site as the user experiences them, but also act as an overview of the site directory and file structure. The well-known information architect Jesse James Garrett developed a widely used visual vocabulary for site diagrams that has become the de facto standard, and the symbols are broadly useful for portraying site structure and interactive relationships and user decision points (fig. 3.10).
Garrett’s visual vocabulary for site design diagrams, showing the various symbols for page and page stacks, files and file stacks, conditional and logical connectors, types of links, site areas, and multiple similar site areas.

Major elements of a mature site diagram include:

* Content structure and organization: major site content divisions and subdivisions
* Logical functional grouping or structural relationships
* The “click depth” of each level of the site: How many clicks are required to reach a given page?
* Page type or template (menu page, internal page, major section entry point, and so on)
* Site directory and file structure
* Dynamic data elements like databases, rss, or applications
* Major navigation terms and controlled vocabularies
* Link relationships, internal and external to the site
* Levels of user access, log-ins required, or other restricted areas

Site diagrams start simply, and may evolve into two distinct variations: conceptual site diagrams that communicate at a general level the evolving site structure to clients and stakeholders, and more complex blueprint diagrams that are used by the technical, editorial, and graphic design teams as a guide to the structure of both the user interface and the directories and files.

Figure 3.11 depicts a simple site diagram for use in presentations and general overviews and the same site shown in greater detail for use by the site development team. These site diagrams can be developed with drawing software such as Adobe Illustrator but are usually developed with specialized diagrammatic software such as Microsoft Visio, ConceptDraw, or OmniGraffle.
A two-part diagram: the left shows an early planning diagram as a very simple hierarchical org chart with page titles; the right shows the same chart, but with much more dense technical labelling of page titles, file names, site directories, and other design details of interest mainly to site developers.

Site file and directory structures

Site diagrams are also useful when your project moves from planning to web page production. As the new site is built up in a directory on the web server, the site diagram is often the first place programmers look to gain an understanding of how the site files should be subdivided into directories (folders) on the server. The pattern of directories and subdirectories of the site files should mirror the major content divisions and structures as shown on the site diagram.

As the site directories and subdirectories are organized on the server, information on the exact names used for major directories and files should be added to the site diagram, so that everyone on the team has a ready current reference to the naming conventions and file locations in the site.
A two-part diagram: The left shows a siple site diagram with page titles. The right shows the files that make up the same site. Ideally the arrangement of files and folders should closely mimic the way the information is organized in the page design that the user sees.

Wireframes

The information architecture process is fundamentally one of avoiding the particular while insisting on the general. At various points in this conceptual phase, stakeholders, clients, and even members of your design team may find it irresistible to launch into specific proposals for the visual design of pages. In particular, concern about the possible look and feel of the home page is notorious for throwing planning processes off the rails and into detailed discussions of what colors, graphics, or general character the home page should have, long before anyone has given serious thought to the strategic goals, functions, and structure of the site. Wireframes force teams to stay focused on the information architecture and structural design without getting sidetracked by the distraction of the visual layer.

If site diagrams provide the global overview of the developing web site, then wireframes are the “rough map” that will eventually be used by graphic and interface designers to create preliminary and final page designs for the site. Wireframes are rough two-dimensional guides to where the major navigation and content elements of your site might appear on the page. They bring a consistent modular structure to the various page forms of your site and provide the fundamental layout and navigation structure for the finished templates to come.
A simple page wireframe diagram that shows the major divisions of the page (header, left, right and center vertical columns, and a footer area, with labels showing how each page area functions.

Things that might appear as standard elements of a web page wireframe include:

* Organizational logo
* Site identity or titles
* Page title headlines
* Breadcrumb trail navigation
* Search form
* Links to a larger organization of which you are a part
* Global navigation links for the site
* Local content navigation
* Primary page content
* Mailing address and email information
* Copyright statements
* Contact information

To keep the discussion focused on information architecture and navigation, keep your wireframe diagrams simple and unadorned. Avoid distinctive typography, use a single generic font, and use gray tones if you must to distinguish functional areas, but avoid color or pictures. Usually the only graphic that appears in a mature wireframe will be the organization logo, but even there it may be better simply to indicate the general location of the logo.

The page wireframe will acquire more complexity as your (sic) thinking about global and local navigation matures and you are more certain about the nature and organization of the primary site content.

Canonical form in web pages: Where to put things, and why

What governs how people scan pages of information, print or screen? According to classical art composition theory the corners and middle of a plane attract early attention from viewers. In a related compositional practice, the “rule of thirds” places centers of interest within a grid that divides both dimensions in thirds. These compositional rules are purely pictorial, however, and are probably most useful for displays or home pages composed almost entirely of graphics or photography. Most page composition is dominated by text, and there our reading habits are the primary forces that shape the way we scan pages. In Western languages we read from top to bottom, scanning left to right down the page in a “Gutenberg z” pattern. This preference for attention flow down the page—and a reluctance to reverse the downward scanning—is called “reading gravity” and explains why it is rarely a good idea to place the primary headline anywhere except the top of a page. Readers who are scanning your work are unlikely to back up the page to “start again.” Search engines also have a well-known bias toward items near the top of a page.
A four-part (a, b, c, d) diagram showing the various ways users scan pages: a, the middle and corners get attention; b, the ‘rule of thirds’ showing visual attention areas; c, the ‘Gutenberg Z’ pattern of how Western readers scan through a page of text; d, showing the concept of ‘reading gravity,’ where readers have a bias to scan down a page and are often relectant (sic) to look back up the page if they miss something.

Eye-tracking studies by the Poynter Institute of readers looking at web pages have shown that readers start their scanning with many fixations in the upper left of the page. Their gaze then follows a Gutenberg z pattern down the page, and only later do typical readers lightly scan the right area of the page. Eye-tracking studies by Jakob Nielsen show that web pages dominated by text information are scanned in an “F” pattern of intense eye fixations across the top header area, and down the left edge of the text.
A two-part diagram, both showing similar patterns of how reader’s eyes track over a typical web page. Left shows a Poynter eye-tracking study. The right shows the golden triangle and f-pattern areas of heavy reader focus in scanning web pages.

When readers scan web pages they are clearly using a combination of classic Gutenberg z page scanning, combined with what they have learned from the emerging standards and practices of web designers. As the web nears its twentieth anniversary some clear trends have emerged that will eventually form the basis for “best practice” recommendations in web page composition. Human interface researchers have done studies on where users expect to find standard web page components and have found clear sets of expectations about where some items are located on web pages (fig. 3.16).
A diagram showing the regions on a page where typical web readers expect to find interface elements, such as home links (upper left), search boxes (upper right or middle left), navigation links (in the header of left columns), or a shopping cart button (in the upper right area of the header.

The web is still a young medium with no standards organizations to canonize existing typical page layout practices. Until we have a Chicago Manual of Style for the web, we can at least combine current mainstream web design practice, user interface research, and classic page composition to form recommendations for the location of identity, content, navigation, and other standard elements of pages in text-dominant, information-oriented web sites.

Sourced from: http://gd4.tuwien.ac.at/infosys/html/webstyle/wsg3/3-information-architecture/4-presenting-information.html

Many people might think that it’s easy to convert a print brochure to a website and vica versa, but it’s not that easy at all. Things to take into consideration would be the following:

Resolution of artwork

Print resolution is generally higher than web (72dpi) and therefore images will appear much larger in 72dpi (screen) resolution. You have to ensure that you adhere to general browser restrictions.

Fonts

Many nice design fonts won’t work on your website except if you keep them as images. This has pros and cons. The pros are that you’ll have nice looking fonts, but the cons are that search engines can’t read the text and you’ll be shooting yourself in the foot. It’s also much harder to update images than simple HTML text.

With general HTML fonts you’re limited to only a number of fonts. The reason for this is because you want to be using fonts that most users have on their computers (whether Mac or PC).

Scales

A simple brochure might not be designed to the same scale requirements to fit as a website. A lot of cropping might render the artwork useless for use on the web, so make sure you have a designer that’s up to the job of taking the concept and applying it on a website design.

It’s never as simple as it might seem

It’s important to remember that it’s never as simple as it seems to take a print concept to web, so always keep in mind that converting a print design to a website might require some advanced skills!

Where do you find inspiration?

Finding Inspiration from:

* the homeless beggar on the way to lunch
* a chance rainbow on a half sunny day
* reading other design blogs
* networking in business (everybody seems to want what we do, but where are they when you’re looking for clients?)
* a high after a successful meeting
* random colours in everyday life
* raw talent from people that you never believed had any!
* give me some more!

Pop-Up Banner Design

Once again I have some popup banners to design. You know, these roll up banners that pack neatly away into a carry bag… Well your basic banner design principles once again count here.

Client brief was that they’d be using it at events and seminars. Now I don’t know about you, but when I’m attending an event, I’m seldomly going to stop in my tracks to read a whole company mission or vision statement (that’s what the client suggested). I suggested to apply the infamous KISS (keep it simple stupid!) principle and ditched the statements for something more catchy. A one phraser that tell prospective clients exactly what the client does and also carrying over their most important values. In the end, a much more effective banner, with larger text and visuals to do what banners do best, attract interest.

I can’t begin to say how important a slick design is. You need good effective stock photography if you’re going that route, or strong vector based simple design layout. After all, with stock, you’re selling a lifestyle and your trying to create a mood. Often, once single striking image as backdrop for your banner could accomplish just that. Just make sure your text sits well on such a background or make sure you have sufficient non-effect to make it stand out. What’s non-effect? Well, putting effects like stroke or drop shadow on objects without making it apparent that they’re really there, so downtoning it a bit.

Also remember any print material done for a client must create brand awareness, so make sure you convey the message. Louder if you’re working with a lesser known brand and toned down, but themed effectively so that brand recognition is not lost on better known brands.

Print Resolution

As mentioned before, large format is usually printed at lower formats, BUT if at all possible, design your artwork at full resolution at full size. If not possible, work at no less than 25% of the original size, but still hi-res, say 300dpi, which will allow the quality to still remain effective on the large format prints.

How to brief your designer

When commissioning a designer to do graphic or web design for you, it’s important to keep a few things in mind. Graphic and web designers need specific information in order for them to accurately do an estimation of costs on the specific design project.

Things like colour preferences, formats and target audiences are important when briefing your designer on a new job.

Read more at: http://graphicdesign.tblog.com/

In today’s economy competition is rougher than ever and even before this economic down turn I had mentioned how competitive the field of graphic design was getting and how more and more job listings were looking for multi-talented designers. By this I mean many employers want you to not only be a graphic designer, but also a web designer with knowledge of multiple coding language and much more.

If you are freelancing from home than you will need even more skills to make the most of your home business so you can bring in as much steady income as possible. Below are some areas I recommend designers branch off into once they have a solid foundation in design. Even having basic skills in these areas will help a ton!

1. Web Design

Web design is probably the most valuable skill to have as a graphic designer. It will open up a large new client base for you, allow you to create and update your portfolio site and much more. Being fluent in web design and multiple coding languages will not only make it easier to keep steady work from home, but will make you much more attractive to potential employers who are looking to cut costs by finding multi-talented designers.

2. Illustration

Designers often have backgrounds in fine art such as drawing and illustration, but end up putting their focus on commercial graphic design which can create a disconnect from their fine art origins. Keeping your illustration skills sharp or becoming a better illustrator will allow you to create more creative designs, do freelance illustration work and even sell stock illustrations online! Plus you can save money doing your own illustrations for your graphic and web designs.

3. Online Marketing

Online marketing is an essential skill for anyone looking to make the most of their freelance design business. Knowing the latest marketing tactics will help you gain exposure, name recognition and more clients. There are dozens of easy ways to increase traffic to your portfolio site and not taking advantage of them would be a very big missed opportunity!

4. Search Engine Optimization

This is an often over looked skill for any business. Anyone who has an online business presence should research search engine optimization and even if you pay some one its good to know what its all about and how to do it correctly. Bad search engine optimization tactics can hurt your site badly and produce no results, but good SEO can provide you with a steady stream of new clients and really take you to the next level

5. Blogging

Starting a blog is probably the easiest and best thing you can do to increase awareness of your portfolio. Knowing about web design, online marketing and search engine optimization, which we mentioned above will help you turn your blog into a powerful and useful tool as opposed to a waste of time. You need to research blogging before hand, optimize your blog, post regularly and promote your blog posts in order to achieve maximum results.

Sourced from: http://www.youthedesigner.com/2009/01/07/5-complimentary-skills-to-graphic-design/

The book is broken down into five chapters for easy reading. Part One is ‘getting started’ which contains background information about working as a web designer, from Boulton’s first hand perspective and there’s also some tips about working for yourself. Part Two is about the very important process of research and ideas and I love the way he explains it all in such an easy to understand and follow way. Part Three is about Typography and Part Four is about Colour – both massive subjects, but Boulton manages to cram the most beneficial stuff into his chapters in manageable chunks. Finally, Part Five is the layout – all about grid structures and spatial relationships.

It’s genuinely very enlightening for me, as a web designer I usually go straight to the coding and play around with things on screen. The book encourages you to take a step back and prepare your layout before starting. Although it doesn’t discourage from my usual way of designing. Boulton appreciates different designers do things slightly differently, but certainly his methods work so are well worth taking on board and implementing.

Boulton’s chapter on colour would have been very useful to me while I was writing my dissertation, as colour was the subject I chose. However you can never hold too much information on a subject and Boulton’s points about designing purely in black and white certainly opened my eyes to different ways of doing things.

I whole-heartedly recommend buying this book from http://www.fivesimplesteps.co.uk

Networking is one of the most important things you can do in any industry and the graphic design industry is no exception. Below is a list of 6 types of people every graphic designer should know. So start networking with the right people now and you might be able to dodge some bullets and have a more successful career in design!

1. Accountant

Unless you are an expert at something as important as your finances, I would recommend finding an expert. The graphic design career is not always the most financially stable one, especially if you are working freelance or running your own studio. Like most businesses their is often a constant battle to find new clients and actually get your clients to pay up. Having a professional accountant can help you make the most of the money you do have, help you save money and keep things organized you; saving you lots of time and money.

2. Lawyer

No one wants to have to hire a lawyer ( because that often means there’s a problem ), but having a lawyer on hand can is very important. Whether its about negotiating a contract or settling a dispute with clients, having a lawyer ready to go that you trust is very valuable. Start off by asking family and friends if they know anyone and make sure you know what the lawyer specializes in because most lawyers will only accept certain types of cases, so you may need to make contact with several different types of lawyers or a firm that can handle multiple types of issues.

3. Web Designer

Having both graphic and web design skills is great and something to work towards, but many graphic designer prefer to specialize in graphic design, don’t have the time to code websites or just dislike coding sites! If that’s the case then you should have at least two web designer contacts that you can outsource work to when needed. They can help you set up your portfolio site, code websites for clients and help ensure your website is optimized for search engine traffic, meaning more projects for you!

4. A Better Designer

Its always good to have a mentor or at least some one you consider a more experienced designer. Getting honest critiques by some one with a fresh eye is very important. Designers often miss errors and other details after looking at the same design for 10 hours so being able to show other designers your work and get some good feedback is priceless.

5. Another Person in the Industry

Actually, you should have as many contacts in the industry as humanly possible! Knowing people in the industry will help you stay up to date with the latest industry news, jobs openings and much more. be sure to make actual friends and stay in contact though because its rude to talk to some one once and then 3 years later ask for a huge favor! So be professional, respectful and helpful to all your contacts.

6. Photographer

Photography is another valuable skill set not all designers have time to pick up. A great photographer can help you create custom stock photos, textures and even shoot your own work. Showcasing your design projects in real life situations or even just printed and photographed with a nice background is a proven method of getting more clients. It makes viewers of your personal portfolio or studio website more comfortable knowing your work has actually been printed and displayed in public!

Sourced from: http://www.youthedesigner.com/2008/11/20/6-people-every-graphic-designer-should-know/

Typography is more than being legible and looking good. Among other things, effective typography manages to achieve two important objectives: a) to create an appropriate atmosphere and enable users to develop trust toward the site and b) to make sure visitors get the main message of the site and (if possible) become interested in the services offered on the site. Since written text is the most efficient instrument to communicate with visitors precisely and directly, the power of typography shouldn’t be underestimated.

To communicate effectively, typography requires appropriate typefaces. Last year we’ve presented 80 Beautiful Typefaces For Professional Design, a selection of excellent typefaces one should be aware of when developing web-sites. Now it’s time to update our selection with typefaces we’ve missed then and new typefaces which have been developed over the last year.

Below you’ll find over 60 first-class typefaces for corporate design. Please notice that they are not free; however, we’ve focused on typefaces which are definitely worth spending money on. So which typefaces are “bulletproof”? What fonts can be used effectively in almost every Corporate Design? And what are the options for unique, but still incredibly beautiful typefaces? Let’s find out.

Read more at: http://www.smashingmagazine.com/2008/03/20/60-brilliant-typefaces-for-corporate-design/