If You Are Starting Out On The Internet You Have To Ask Yourself If It’s A Hobby Or Potential Business

When you go online with the objective of making cash, you need to determine if you will want a business or a hobby. The real difference between the 2 is that a hobby is for fun and a web based business is for trying to make cash. When you are looking at building a business, you need to make a plan, and then figure out just how much time you are willing to invest in it. A business is different than a hobby in that you have to invest your time as well as your cash to construct a business, so you need to realize that it is really what you wish to do. Find out more information at internet home business.

There is nothing wrong with spending some of your time online attempting to make some cash, but that doesn’t make it a business. A business can be fun, and it should be something you are passionate about, but a business is something you work at, a business is not something you can spend time at only once in a while. Before you commit your time and also cash in a business, ensure a business is what you would like. Needless to say one of the benefits of starting an Internet business is that it can be accomplished so cheaply simply because the single thing you will need to purchase with regards to an Internet business is a website.

For those who have decided that an online business is for you your first step is to ensure you possess some kind of plan and you know from the beginning what tools you are going to need and just how much everything will cost. One more thing you’re going to need to know is just how much time you’re going to be willing to invest, and in addition how long you believe it is going to take you to reach your goals. You should also bear in mind that building a business is not the same as trying to make cash, building a business is really going to take loads of devotion. Making cash comes in many different forms, like going to the casino and trying to win, but in most cases you would never think about this to be a business. You are going to also see that running your own business is very different than working for someone else at a job. With regards to having a job, you simply do your job and get paid nevertheless when you’ve got your own business, you have to earn cash as it is not just going to be given to you for the work you do.

Developing a business means the responsibility is yours, whether you are working alone or have folks who have been hired to work for you. You are going to see that at a regular job you may only work 40 hours every week but when you have your own business this is something that can end up being a 24 hour each day project. Most folks find they either aren’t effective at doing this, or they find they do not want to. You have to keep in mind that the success rate for folks making cash on the web is only 5% which means the failure rate is 95%.

If you want a web based business, do not listen to the hype, but find someone who has a business you like, and do what they do. There are training courses available on the internet which are created for beginners in order to teach them how to become a successful Online Marketer. Find out more information at kindle cash flow system.

Make strategy a part of your offering

Web design has reached a point of maturity where we should no longer simply be a collection of pages ripped from a corporate brochure. There used to be a time where as web designers we did little more than apply a splash of paint to an assortment of text and images. This was OK as simply having a website was significantly more innovative and forward thinking compared to your competitors. However now days anyone can have a website (and almost everyone does) and additionally it is not very difficult or expensive to get a website that makes you look credible (even if it is simply buying a template site).

Today on the web in order to really have an effective website you really have to think about all aspects of the site. Failure to do so means providing an ineffective solution, so every time you create a site or work with a client you should be considering:

• Who are the potential users?
• How you will get users to the site?
• What do users want when they get to the site?
• What questions will they have that you can answer?
• How do you lead them in the direction you wish them to go?
• How you will measure the success of the site?
• How you will continue to optimize the site?

This effectively is the strategy behind your website. This means that the site should be designed in such a way that you have thought about and planned every element described above.

With out going through the process of this planning you are simply slapping a coat of paint on a box rather than delivering a tool that is created to help the business/organization who has hired you.

How to go about it

Typically web design companies ask the client what they want to be built, ask for copy and photos to be delivered, create a visual image and build out the site. Working in this manor is akin to a construction company building a home using blueprints created by the non-architect home owners. Doesn’t sound like a great idea does it?

First you must research

The first step in this process is to do some research. I know, I know, most of us as creatives hate this idea and would much rather just create some stunning and well organized visuals. However this is a critical step that you must take.

The first aspect of research is working with the client to discover as much about their business as possible. This will include the target market, the typical sales funnel, who the clients are now and what their concerns are. Find out the goals of the site and what expectations the client has for the level of impact on their business.

Although the clients input is important it shouldn’t stop with them. Chances are they see their business in a very close up skewed manor, not that they are wrong or their information is not valuable. Rather it is more important to learn as much as you can from their clients.

Once you have learned who the target market is you can start asking them questions. Sometimes the client will be willing to give you a list of names and numbers of those who you could interview, if not you can always take a look at your own network of contacts and politely ask them if they would be interested in answering a few questions at their lesiure.

Crafting the questions

Every situation will require a different set of questions so I can’t give you a boilerplate set of questions. Ultimately you should look at the goals of the site and develop questions that will help you figure out how to encourage users to accomplish those goals.

The common scinereo would be a company that is looking for more sales/leads/clients. There are a wide range of questions that you could ask their target market to help you find out what is most important to them when picking a product/service provided. Here are some examples:

• What factors are you considering when you are looking to hire someone to do X?
• How would you rank those factors in terms of importance?
• How do you go about finding someone you wish to hire in this situation?
• Do you value (insert unique value of client here)? why / why not?

I am sure you can think of much much more once you get started.

Look around and see what else is out there

Once you have a good idea of what the target market wants and what your client provides it is time to do some competitive analysis. See how their competitors are marketing themselves and what sort of features or information they have on their website. You can get a lot of ideas in terms of “wow this is a convention we should include this” to “here is something that everyone is missing but really should have.”

Additionally this will help you develop a unique selling position for your client (if they haven’t already decided on one). By marketing themselves with a unique value that no one else is they will effectively attract more sales by people who really care about that value element.

Using the research to develop a plan

Doing the research is only half the battle, the second half is to develop a plan based on the research. Yes I do realize that first I am not only recommending that you do research (barf) but now advising you to also write a paper (double barf). I assure you that it is worth it and your business will grow as a result of it.

I break my plans into the following sections:

• Goals / Objectives
• Target Market + Personas
• Competitive survey
• Points of resolution (questions, concerns and desires of users)
• Unique value proposition
• User paths (how a user would navigate through the site to complete a goal)
• Objective support (how we will encourage a user to navigate through the site to complete a goal)
• Measurement and success criteria

You could probably take it further than I do, as I am continually improving my strategy document and process. However I find that the most valuable part of the document ultimately comes out of the user paths and support.

This is because it takes the information about and from the target market and incorporates the goals of the site, then strategies of how we can mesh the objectives of the user and the site owner together. Consider the diagram I crafted for a client recently as an example of how this could work:

As you work through the user path you not only discover what should have the most visual emphasis on every page, where you should have a call to action (and what it should be) but you also tend to discover the missing “what would they want to do next?” link.

It makes good business sense

This document will not only help your clients succeed (which will in turn help your company), but it will also become something that you can bill more for. I have yet to come across a client who has looked through one of my example strategies and said “No, I don’t think I would pay for that.”

Not only does it bring in more work per client, it also differentiates my company vs my competitors.

How to Respond to an Authentic Jobs Posting

Looking into the next few months I am seeing an influx of ongoing, relationship based work and clients. Looking into the future of my company I expect and hope to grow steadily, which at some point means expanding my team.

At this point it doesn’t make sense to take on a new full time hire, however I will certainly need dedicated work over the next few months (and hopefully well into the future as well.) What I decided to do was try out Cameron Moll’s Authentic Jobs by posting a listing for a freelancer.

I got a plethora of responses, all very qualified

I was shocked at the quality, quantity and how quickly I got responses from a vast amount of qualified individuals. So much so that sorting through and rating all of the candidates has been difficult (although I would have to say this is a good problem to have.)

Because of the high level of competition and simply not enough time to deeply go into every single candidates portfolio I had to develop a system to really pin point the “rockstars” that I am looking for. While I wish I had the time to devote plenty of thought and review to each case it simply wasn’t plausible.

If you are applying for a job or a freelance position, what you might think about

While every person who is reviewing applications will be different, you can be sure there are common elements for any person playing a HR role.

Address the needs of the listing

I was surprised at how many applications failed to answer questions I specifically asked to have included. Others ignored large portions of the listing (like experience with common open source CMS solutions). Even if you had no experience (or little) I spent twice as long considering the applicants who at least addressed all of the points.

Make it easy

I must have gotten 60+ applications for qualified individuals. The reason that I am looking for a new expert to help my team is to make things run smoother and easier. At some point I realized that if the e-mail sent to me was difficult to review than chances are the applicant wasn’t a perfect fit.

This included not giving me specific links to recent work, instead pointing me to their website homepage (where I have to spend some time hunting for their portfolio). Some applicants attached a resume (word or PDF) rather than explaining their relevant experience. I would have had the time to learn a lot more about the applicant if it had been included in the e-mail.

Be honest

Some of the applicants I sent a second round of questions, one of which asked “Are you a detail oriented person or a big picture person?” A large portion of responses said something along the lines of “both,” which really didn’t answer the question I was asking. While I realize the question may have sounded like a trick, I was looking for someone who was detail oriented because I am not. I need someone to balance out that weakness. I can not get an accurate reading on a response like “I am the most detailed big picture person in the world.”

Stay strong on your pricing!

Since I was asking for freelancers one of the questions I asked was “what is your hourly rate?” While of course I have a ceiling on what I could reasonably pay, but the listing was pretty clear that I was concerned about quality over cost. I was shocked at how many people e-mailed saying that “price was normaly X but they would be willing to negotiate.” This often comes across as “I don’t value myself at X an hour.” Be strong on your price, if you feel comfortable charging it then you are worth it!

Do what you can to stand out!

There were some great responses that talked about what blogs they followed, what books they read, clients they had worked with, mistakes they had made in the past (very impressive idea!). Some responses had very clever subject lines that caught my attention, where others spent a little more time formating the e-mail to be easier to read. These sorts of things impressed me.

Don’t send a boilerplate response

I would recommend writing something unique to every listing you respond to. I could tell some e-mails were simply boiler plate responses with my company name swapped in. Had I only gotten 10 responses that might work, but if you are competing with 50 other people chances are this is not going to work.

Best of luck!

I am very impressed at the quality and quantity of responses I got from the listing. This is great for those of us posting listings, but makes it difficult for those who are responding. Consider these tips next time you respond to a job listing online.

The case for XHTML/CSS Style Guides

I have been working for a short while on a side project that I have already found very useful, and that is to develop a tool that aids in creating what I call a “CSS Style Guide.” There may be a better name for it, but the concept is quite simple, a guide for clients or website owners who will be maintaining a website after you have delivered it to them.

Style guides typically outline when you should use a H1, H2, H3, ordered lists, tables, etc… so that everything remains consistent and unified.

The interesting part about the style guide, as I have found, is that it often brings to light the incompleteness of our work as website builders.

Why the typical website building workflow leaves holes

The web is part coding (for lack of a better word) and design. The typical web design workflow starts in visual tools that represent a given page / interface and then moves into the coding and building of the site (working with text, markup, and style sheets).

What ends up happening is markup and design is only created for the elements that show up on those pages. Typically H1 – H3 (if that) and a few other design elements such as bulleted lists.

This is not great for a website that needs to grow, and a client that needs to maintain it. There may be a few rare cases where it makes sense to move all the way down to an H5 / H6.

However unless the designer thinks ahead to design a style for all common elements that fit with in websites needs, it will not have the same uniform approach that the rest of the well planned elements have.

This becomes esspeically important on any website that is content focused or content heavy.

It is bad for the website, the client and yourself if you never bothered to design what a “block quote” looks like and a blog post ends up failing to communicate that content is in fact, a quote.

What I suggest to do about it

I have learned simply through making mistakes, “agh crap, I forgot to style that.” You could just wait until specific elements need styling and have the client ping you, but that is not ideal.

Instead I have developed a simple one page “Style Guide” that lets you load or paste in CSS styling so you can get a clear picture of how the most common elements on a page look. It is flexible so you can easily see how elements wrap and/or how they look in wide and narrow columns.

Take a look, and play around

Feel free to take a look and play around with it on my server, or download it for yourself to use, update and improve.

I had a fair amount of fun just loading other peoples stylesheets to see how they stylized each level of heading and how far in the styling they actually went.

It is free to use, alter, etc… if you can keep a credit in the head section that would be great. I really would like to get more conversation around creating a guide to how a website should be styled and have it be a deliverable to clients who need it.

Occam’s Razor in Web Design, Simplicity Wins

You may have herd of the term “Occam’s Razor” before, but most likely it was not in relation to web design (or design in general). If not take your moment to familiarize yourself with the concept as it could alter how you design or craft interfaces from this point forward.

The concept was developed by a 14th-century English logician and Franciscan friar by the name of William Ockham.

It is a simple concept, yet it is so powerful especially when applied to the web.

Paraphrased the concept states that “All other things being equal, the simplest solution is the best.”

What Does “Simplest Solution” Mean for Web Design?

When I first began designing I had a tendency to try and make my work interesting, exciting, and dynamic. Now that is not to say there are not reasons to design work that fits those descriptions. Rather it is rarely the best solution. Any element on a page or in a design changes the signal to noise ratio (something I will cover in later blog posts).

A design can be simple and still exciting, well crafted, and interesting. Simple doesn’t necessarily mean minimal (which is a specific design style). It means that given what you need to have included things should be laid out and designed in the simplest manor possible.

How to go about simplifying your designs

Following Occam’s Razor is more about careful planning and deliberate thought process rather than any sort of art form. The first step is to figure out exactly what needs to be included in the design. Here is a typical example from a work that I had created long ago:

• Company logo
• Photography (to communicate subject matter)
• Descriptive text (communicate subject matter)
• Company messaging (marketing message)
• Newsletter subscription (site goal)
• Navigation
• Company address + contact information
• Parent company’s logo

After you have decided what absolutely has to be on the page you must then order them in terms of importance.

1. Company logo (branding)
2. Navigation (usability)
3. Photography (quick communication of subject)
4. Messaging
5. Contact Information
6. Newsletter Subscription
7. Parent company (not as important)
8. Address (not as important)

From their you can decide what elements should be seen in what order, and assess if any design element you add is noise and competes with the important pieces of the design.

Example Real Estate Company

A few years ago my first attempt at the design in the example resulted in this design concept.

Clearly I did a fair amount of visual decoration that really didn’t add any “signal” to the design and was nothing more than noise. Let’s break down what really was unnecessary

• The goofy break out headlines
• The background color stripes
• The huge picture (it used way more visual real estate than needed)
• The different color zones and blocks
• The “stacked paper” look
• All of the extra information at the footer

Revisiting Today

Now that I have been away for awhile, I decided to try and revisit this design and really think about how I could simplify it. This included:

• Removing all decorative elements (goofy headlines, background, etc)
• Rework the navigation so it is harder to miss and balances out the design, rather than being an afterthought
• Simplifying the content area to improve readability and comprehension
• Balancing the photo so it complements the design, rather than dominates it
• Simplifying the footer information

The result is a much stronger and more visually attractive design. Even though I removed a lot of decorative elements, the design actually looks better. As designers we need to be careful of trying to hard to “over design” our work. Ultimately our job is to make difficult information easy to understand, not to create digital art.

Think you can do better?

Think you can do a better job simplifying the design? Let me know and I would be happy to send you the PSD of the file and post up your simplification.

The Gutenburg Diagram in Design

We are fortunate to be a part of the web design as it has begun to reach a level of maturity. With advances in technology and prominent bloggers publishing great information on design concepts such as using grids, baselines, art direction and the rule of thirds (among others) we are able to work with the design of websites on a much higher level than even a few years ago.

However there are other principals of design that have yet to get ample amount of attention or usage. One of these principals is the “Gutenburg Diagram,” which you have likely used on some level with out realization.

How the Gutenburg Diagram Will Improve Your Design

The gutenburg diagram is a method of understanding how cultures who read right to left, visual navigate a composition, and how to optimize layout as a result of it.

Since we are trained to read from the top left to the bottom right naturally, we instinctively sweep a composition starting from the top left down to the bottom right (often several times).

As information hierarchy and visual emphasis are such critical parts of design, knowing how a user is going to look at your site despite design can lead to a much more effective layout.

How the Diagram Works

The diagram dissects the composition into four quadrants. In this case since we are designing for the web, it will be dictated by the screen resolution and location of the fold.

The upper left quadrant is the first area that a users eye will focus on. The eye will then sweep downward crossing the center or intersection of all four quadrants, before coming down to the bottom right hand quadrant.

The upper right quadrant and lower left quadrants are called fallow areas. The top right is a strong follow area, where the lower left is a weak follow area.

These areas will receive little visual attention unless they are emphasized through design. The top right will receive more attention than the lower left all other things equal.

Using the Diagram for Excellent Web Design

By understanding and working with the diagram we can maximize the effectiveness of our designs by using it to our advantage. It is probably a good thing that web convention puts the logo in the top left of the screen. It will be the first thing that users see, tell them where they are as well as help brand the website.

De-emphasis

Since we know that the bottom left and top right quadrants will receive less visual attention, we can put less important elements in those areas. You may have noticed the convention that puts secondary navigation links in that area, such as client login, rss feed, etc…

This is a perfect use of the gutenburg diagram, as such navigation is not nearly as critical as the primary navigation. However those who are looking for it can still find and use it when needed.

Place important visuals and content consciously

As you design down the page, you may also want to consider moving more important content or visuals into the path of the diagram. If you have a choice, place important content at the fold on the right hand side of the design rather than the left. A common occurrence would be swapping content for a image left to right, to place greater emphasis on one or another.

You may also want to reconsider placing the navigation in a right aligned manor, as you are unlikely to place it at the bottom of the composition anyways.

Examples of the Gutenburg Diagram

OH Tele

Rocket Club

Revyver HQ

Wellness Class

Final Thoughts

The Gutenburg diagram is not gospel. Once you start playing with visual emphasis and weight, how a user looks at a design can drastically be altered. However the idea is to use the diagram to your advantage and use our instinctual way of looking at a design to strengthen the layout and composition.

Don’t Design for your Client, or Yourself

I recently did a presentation called “It doesn’t matter if you like it…” in which I talked to marketing professionals about how their is a fundamental flaw in the way many people go about designing, or having something design.

I often talk about how a large part of design is communication. With so many CSS Galleries it is easy to get stuck in a mindset where you simply want to create the “coolest” looking website rather than “the most effective” website.

The truth is that even beautiful design can be damaging to a site/brand/company if it is not “correct” design. Studies have shown that you have 10 – 15 seconds before a user has an impression about your website. Ten to fifteen seconds is not enough time for them to fully read and understand the history of your company, it is long enough for them to make some very detailed conclusions based on what your design communicates.

Why Our Approval and Design Processes are Often Wrong

What I am ultimately leading up too is that in most cases the design / approval process that we go through leads to work that does not communicate what it should to the end users.

This is a typical creative process of a sizable firm:

• Creative director to graphic designer: “It should say this”
• Graphic Designer: “Hmmm, I like it when it looks like this”
• Manager: “This looks off, why don’t you tweak that?”
• Creative director: “I don’t like this portion, fix it”
• Client: “I like the color red, use red”
• User: “I am looking for something high end, this looks cheesy. Goodbye.”

We often have people who are a part of the design process that alter the end work based on their own personal preference, and guess what… as designers we are one of them.

Now let’s look at it from a smaller firm / freelancer

• “Lets make a great looking interface!”
• “How do you like it?”
• “Lets make it POP!”
• “There we go, it looks really cool!”
• “Aghhh, I don’t want to go to a coffee shop that is this nutty”

Ultimately it doesn’t matter if you like the design, if you are serious about your profession than you shouldn’t be creating sites so that you can have another great looking portfolio piece.

As a client or website owner it doesn’t matter if you like design. If you are serious about your company or website then you should have the site created so the users like it, not so that you can brag to your friends about how cool your site is.

How can you change this?

There really are a few approaches to the process that can greatly alter the outcome in a positive way. The first step is our great friend… research.

RESEARCH

Anything you can do to get into the minds of the end users will result in a much more successful design. This can take the shape of client interviews, researching competitors, attending events that users may attend, or other forms of traditional market research (surveys, demographics, etc)

Research should be compiled and decimated into a few deliverables such as a competitive analysis, user personas, and a creative brief.

These deliverables will be key in the design approval process, especially if someone on the design committee says “Why don’t we make it blue?” With the documents you can now say “our research shows that red will make users feel how we want them.”

TESTING

Actually testing designs can be a great way to find out what works best for different users. A lot of projects don’t have the budget for this, but it doesn’t have to be incredibly high cost.

I will go into ways to test in future blog posts, but for now consider showing a user a design and asking 3 – 4 questions about how they would describe that design. You are not looking for feedback in terms of “use a different picture, color, etc” rather it is important to understand what messages does the design give off. Does it feel affordable? high price? exciting? calming? interesting? sturdy?

Additionally you can show a user a design for 3 – 5 seconds, then ask them to tell you what they remember from it. It will give you a clear idea as to what are the most prominent items on the page.

LARGE SCALE SURVEY

This is currently being done with the Drupal project. Designer Mark Boulton is getting feedback from a community of tens of thousands. What he has found is that over the personal preferences trends emerge, and those trends provide a huge amount of insight and value that can be worked into the next design iteration.

IT DOESN’T MATTER IF YOU LIKE IT

Yes it doesn’t matter. Some of my most effective and successful designs from an analytics/statistics standpoint are not ones that I particularly like. That is because I am not the user, and I think and interpret visuals differently than psychology scholars (or any other given user base)

Improve your typography with “typographic contrast”

Having just spent a week in various countries through out Europe I found myself studying the design techniques of thee various different cultures as well as how it compares to that of the US. Interestingly enough I found myself able to look at the typography of design completely independent of the message (as I did not know the language). This is an oddly effective way to see what techniques of displaying and using type were effective, for what reasons, and why.

With out knowing what anything said I could easily identify even subtle cues as to what was the most important element in type, what was secondary information, and what was practically meta data. This hierarchy of visual importance in regards to type can also be referred to as typographical contrast.

What is “Typographical Contrast”?

Simply put it is the grouping of two typographical elements, then using different methods of traditional design to create contrast. The contrast places emphasis on the important element of type, letting the secondary element command less attention. The result is an improvement in the communication of the overall design message.

If we look at traditional forms of contrast then we have:

• Size
• Color
• Spacing
• Shape

All of which can be used with type to improve our typography on the web. To keep this post short an interesting I will be offering some examples, explain what I did, and move on.

1. Size

This is probably the most common use of typographic contrast and is quite common on blogs and other content that has a time relevance. Many blogs uses this method to provide additional information for those who are interested, but kept it subtle enough where it doesn’t distract or command your attention.

My blog, for example uses large headlines with smaller type for supportive data. The headlines are large as it is the most important element of type in it’s area. However there is additional content that is of value, it simply is less important (in this case the number of comments, posted date, and author).

The concept is pretty simple, make the most important element of type larger while and supportive type can be smaller. See the example below:

Size Contrast

By contrasting large type with small type we get a visually interesting typographical design and it is functional. The most important element commands the most attention, while the secondary element is subtle yet legible. This dynamic builds a visual hierarchy.

2. Color

Color is another common way to develop some contrast between typographical elements. The most common way that we see this in design is having some type lighter than others. Obviously lighter text (when dealing with a light background) has less energy and thus less visual attention. This creates a contrast between it and any darker element.

I have also seen great examples where black is contrasted with color, or the richness or vibrance of colors is used to develop a level of contrast.

Color Contrast

Again this establishes a visual hierarchy as the most important elements will command the most visual attention (and I might note that the lighter type element doesn’t necessarily have to be the at a lower visual importance.)

3. Spacing

The use of spacing can be a tricky technique to master. However when done properly it creates a rich contrast and interesting typography in design. The spacing of type itself can obviously be altered in three traditional ways, letter spacing, line spacing, and word spacing. To be honest I have only see spacing work effectively in line spacing and letter spacing, however I would be more than happy to be corrected in terms of the use of effective word spacing in typographic contrast.

Space can also be altered simply in the placement of type. Right justified vs left, indented vs on the same rule, etc… Any time you alter the typical placement of type you will create tension and visual interest (and thus contrast).

Spacing Contrast

Space works best when used in conjunction with other techniques. It is a tricky technique to master because depending on the situation more space can either increase or decrease the visual weight.
It can either thin the text out, removing visual interest and attention; or it can also cause the element to take up more space more than thinning it out which could cause it to have more visual interest and attention.

4. Shape

When I refer to shape I am talking about either using different typefaces or italic, bold, etc caps vs lowercase, etc… Really altering and playing with the shapes of two different typographic elements.

This can range from something as simple as coupling a serif with a san-serif, or as dramatic as a decorative font with an ultra-simple font.

When used effectively it can be a nice balance between legibility, style, and visual interest.

Contrasting with Shape

Shape probably has the most capability to create typographic contrast. Because of this you also must be careful of how you use it, it is really easy to create some “cool” design elements that really detract from everything else on the page because they simply command too much attention.

5. Putting them all together

After you have worked with the different individual elements for some time you can start to work them together for an even richer experience. This is another situation where you really want to ensure that you balance the interaction and relationship between the two type elements and everything else in the composition. It is easy to create a lot of visual contrast using all possible elements, only to end up detracting from the rest of the composition.

Contrasting Everything

You may notice that I was able to play with the different elements to increase contrast in one way, but decrease it in another. For example make the type bigger, but lighten it; or make it smaller but a brighter color. A thinner font but played with the spacing.

You can create some very powerful typographic contrast by playing with these elements. Every adjustment you make alters the message a little bit, and by balancing the message and communication with visual impact it enrichens the visual experience.

Any thoughts on other ways to increase typographic contrast? How about some good examples?

Better design by brushing up on your techniques

I often fall into the trap where I limit the scope of my design capabilities by what techniques I have learned for my design tools (in this case photoshop, and illustrator.) You may not realize it, (and I often do not either) but the techniques that you don’t know actually hinder your overall design capabilities.

Even if you have been through graphic design school or experienced in fine arts, you will still suffer from a narrow design capability if you don’t work to learn more about these tools. This is because there are techniques you could use but don’t even realize are an option while creating a new piece of work.

Photoshopers vs Designers

I see two different skills related to this subject, “Photoshopers” and “Designers.” I used to be very specific about calling myself a “designer” over a “photoshop guru.” The reason being that photoshop gurus tend to be amazing at altering photos, or developing incredible works of digital art in photoshop (sometimes making the surreal look real.) Where design requires functionality, usability, balance, and finesse. These are two different and specific skills, however it pays greatly to have both.

Getting to my point

When you are working with a design, even if you have done sketches, thumbnails, etc… chances are you are not even considering some great design accents because you simply don’t know how to do them. Maybe you don’t even realize that they exist as a possibility. If you were to know about them, in the right moment you would realize said technique would be worth trying and it would raise the quality of your work.

You may be looking to create a specific look, feel, or develop a specific mood. Naturally you will be thinking in terms of “what can I do to achieve this goal?” However “what can I do?” is actually “what can I do to achieve this goal that I know how to do?”

This is why it pays to take time to continually expand your skills and capabilities with your tools so that you have a wide range of available technique and have more to select from. Eventually you will have thousands of techniques and capabilities to create a wide range of moods/impacts/feelings/etc, and won’t be limited to the basic techniques you have used in a hundred of your old designs.

Long story short, you should have the skills and capabilities of a photoshoper with the design fundamentals of a designer.

Some Examples

You can often tell which designers have not only mastered the fundamentals of design but the tools used to create the work as well. N Design Studio and Veerle are two excellent examples of this. In the case of N Design Studio, Nick La clearly has a great sense of design. His work is balanced, the typography is well crafted, and the color scheme communicates a specific message. However he is able to take the design to a whole new level by some of the advanced as well as stunning techniques he has learned.

If you take a look at Avalon Star you will notice the same trend. Again the designer has a clear mastery of design fundamentals. So much so that the site would be very well designed even with out the level of detail put into it. However he is able to create a truly memorable, high impact design through his understanding of photoshop.

So what am I saying?

If you have time it is worth while to practice your photoshop/illustrator skills as often as you can. With so many great tutorial sites available, there are always new techniques and methods to learn. Below is a list of the ones I follow,

• PSDTuts
• VectorTuts
• Smashing Magazine
• Verlee
• Web Designer Wall

What sites do you follow for tutorials?

Another contender in the sIFR / Facelift Typography Arsenal

I came across an interesting tool called Typeface.js today. It appears to be a worth while addition to the sIFR / Facelift “Web Typography Arsenal.” Much like Facelift and sIFR it is javascript based and replaces the plain XHTML text with an embeded custom typeface replacement. In this case it uses the <canvas> element and dynamically generated images to achieve the effect.

It seems to use the PNG image format so it will support transparent backgrounds, however the text is not selectable in most browsers (a feature that sIFR has). What really catches my attention is the capability to use font-stretch support, giving you the ability to render condensed, semi-condensed, expanded, etc font styles.

Additionally it does have some support for line-height and letter spacing, two features that FaceLift doesn’t appear to have at the moment.

If anyone has used it leave some feedback and let us know how it works.