Select Page
Design 101: Typography

Design 101: Typography

Typography is so much more than letters and fonts and there already exists a myriad of resources out there dedicated to the fine art of typography.  You likely have a favorite font or perhaps one you despise (you definitely do if you are a designer!). You may have noticed the resurgence of calligraphy and hand lettering popping up in different places.  The world of type is huge and there is plenty to explore, but the purpose of this post however, is to give a very basic introduction into a few of the visual elements that describe and make up typography.

We’ll begin with a few terms. First of all, ty­pog­ra­phy is the vi­sual com­po­nent of the written word. Like most systems, typography is made up of building blocks. Our basic element, a letter, is also known as a glyph. In typography, a glyph an elemental symbol within an agreed set of symbols, that represent a readable character for the purposes of writing.

Each letter also has its own components, such as a foot, stem, terminal, beak and so on. The featured sketch above is a labeled example. This is important in type design to better identify the different parts of a letter and how to manipulate them to create different styles.

Font vs. Type

A lot of designers will raise a big stink about this differentiation, and there is a difference, but for the average person, these two terms are often used interchangeably.  So, for all you sticklers, the terms are defined as follows.

A typeface is a design created by a typographer (or type designer). It incorporates the specific letter-forms that include several variations (stroke weight, serifs and counter shapes,  etc.) that differ from one type design to another. Designers choose typefaces to create their projects. Each typeface has a name (Helvetica, Bodoni, Arial, etc. The term “typeface” originated from movable type, whose blocks of wood or metal each contain an image of a character on one surface (the “face”).

A font, on the other hand, is a digital representation of a typeface. It is a collection of all the characters of a typeface in one size and style. For example, Times New Roman in 12pt size is a font, Times New Roman in 18pt size is a font, and Times New Roman bold in 24pt is also a font. In other words, “one weight, width, and style of a typeface.”

Below I have created a visual index of a few other type elements.

TypographyOverview

Conclusion

You may have never thought about it directly, but selecting typographic elements makes a huge difference, not only for readability, but also for the feeling that a particular design piece creates. Bold type can portray strength while scripts can feel formal or elegant. Pairing typefaces together is also a science in an of itself and can greatly affect the mood and tone of a design. Pictures may say a thousand words, but words themselves can also say a lot more than the content of a sentence. When used effectively, type can become its own work of art.

Fantastic Free Font Friday: Kilogram

Fantastic Free Font Friday: Kilogram

Kilogram is a fantastic font that has been around for awhile, created in 2009 by Norwegian designer Karl Martin Sætren of Kalle Graphics. This font was actually based on a font called Anagram by Nick Curtis.  While recently working on a project that needed a bold typeface as a display font, I was also looking for something that had some personality. This is a great font for that sort of application.

Kilogram font at work
Kilogram - Glyphs

Kilogram is very bold and impacting, making it perfect for headlines. Altering a few glyphs would also make for a memorable typographic logo. The font can be downloaded and used free of charge for both non-commercial and commercial work.

 

The fonts featured on www.rthr3e.com are their authors’ properties and at time of publishing are known to be free. Please take note of any pertinent readme files and license details available with downloads. If no license is indicated it is that information was not readily available.

Design 101: The Basic Languages of the Web

Design 101: The Basic Languages of the Web

Background

The interwebs. How did we ever live in a world without email, blogs, YouTube, Skype, Amazon, Facebook and Netflix? It is astonishing to think that all of these types of services have come into existence in less than a handful of decades. So, how old exactly is the internet? Well, there is not a simple answer, though one could say that it started with electronic computers in the 1950s as several computer science lab in the US, UK and France began with initial concepts of packet networking. In the late 1980s, commercial Internet service providers (ISPs) emerged and spread very quickly. Since the mid-1990s, the Internet has been nothing short of revolutionary, and and the rest is (very recent) history.

The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite to link several billion devices worldwide. This miracle of the modern age is made up of a series of programming languages that work in concert to create the world wide web. We will look at several of the main languages (HTML, CSS, JavaScript, PHP and SQL), though there are certainly more that are commonly used.  These languages, or code, are what make web pages look a certain way, and give them certain functionality. Your then browser translates this code (referred to as rendering) into something we can see and interact with on our screens.

HTML – HyperText Markup Language

HTML

While technically not a programming language, HTML provides the basic structure of sites, which is enhanced and modified by other languages (primarily CSS and JavaScript). HTML is at the core of every web page and is an essential skill for any aspiring web development professional.

HTML stands for HyperText Markup Language. A markup language is a set of markup tags that are used to identify content. Each HTML tag describes different document content.

Example of HTML Code
<!DOCTYPE html>
 <html>
 <body>
 <h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
 </body>
 </html>

CSS – Cascading Style Sheets

CSS

First unleashed in 1998, CSS was the answer to a lot of the design problems of the early web. Historically, basic styling was achieved with HTML, but making and any changes were very labor intensive, and as websites became increasingly complex, a new method of applying styles was born. Enter CSS (Cascading Style Sheets). By separating the way a site looked from the site’s content, designers finally had a way to make websites look how they wanted. CSS defines and displays HTML elements. It is used to control presentation, formatting, and layout, including colors, fonts and background images.

HTML is basic structure (bones) while CSS is what gives your entire website its style (skin).  Because CSS is what gives each website a look and feel, it is extremely powerful. This is illustrated very effectively at http://www.csszengarden.com/, where all HTML content remains the same, but different CSS styles are applied for dramatically different results.

CSS can be applied inline (within HTML documents) though it is much more common to have an external stylesheet.  This file is called in by HTML documents  A sepearately editable stylesheet is a huge time saver when making site-wide cosmetic changes. CSS is also what allows websites to adapt to different screen sizes and device types, which has become increasingly vital in the last few years.

Example of CSS Code
body {
    background-color: #004477;
}
h1 {
    color: #00263E;
    margin-left: 20px;
}

JavaScript

JavaScript

JavaScript is a newer programming language, released in beta in 1995, and is much more complicated than HTML or CSS. Since then, it has become the world’s most popular programming language, and is used on not only on the web, but also individual computers, servers, laptops, tablets and smart phones. JavaScript is supported by all modern web browsers.

JavaScript is basically used to control the behavior of different elements, allowing web developers to design more interactive sites. It essentially augments a browser’s default controls and behaviors. JavaScript can be used to make animations, create games, APIs, and scrolling abilities among other things. Its use is quite varied, and some great examples can be seen at Creative Bloq.

Example of JavaScript Code (Animates a document background color)
<script language= "javascript">
setTimeout("document.bgColor='white'", 1000) 
setTimeout("document.bgColor='lightpink'", 1500) 
setTimeout("document.bgColor = 'pink'", 2000) 
setTimeout("document.bgColor = 'deeppink'", 2500) 
setTimeout("document.bgColor = 'red'", 3000) 
setTimeout("document.bgColor = 'tomato'", 3500) 
setTimeout("document.bgColor = 'darkred'", 4000)
</script>

PHP

PHP

PHP is a recursive acronym which stands for Hypertext Preprocessor) and is a widely-used open source general-purpose scripting language that is especially suited for web development as it can be embedded into HTML.

PHP is different from client-side JavaScript in that the code is executed on the server, generating HTML which is then sent to the client. The results of said script would be received, but the underlying code would not be known. This is helpful for security reasons, or if you just want to be sneaky. While it looks very daunting, PHP is actually fairly simple for newcomers, but offers many advanced features. Like any language, practice is crucial.

Example of PHP Code (Generates a PDF document)
<?
$fontsize = 72;     // 1 inch high letters
$page_height = 612// 8.5 inch high page
$page_width = 792;  // 11 inch wide page

if (strlen(trim($_GET['message']))) {
    $message = trim($_GET['message']);
else {
    $message = 'Generate a PDF!';
}

$pdf = pdf_new();
pdf_open_file($pdf, '');

pdf_begin_page($pdf, $page_width, $page_height);

$font = pdf_findfont($pdf, "Helvetica""winansi"0);
pdf_setfont($pdf, $font, $fontsize);

pdf_show_boxed($pdf, $message, 0($page_height-$fontsize)/2,$page_width, $fontsize, 'center');

pdf_end_page($pdf);
pdf_close($pdf);

$pdf_doc = pdf_get_buffer($pdf);
pdf_delete($pdf);

header('Content-Type: application/pdf');
header('Content-Length: ' . strlen($pdf_doc));
print $pdf_doc;
?>

SQL

SQL

SQL (Structured Query Language) or sometimes called mySQL was also born out of a need to have more complex functions online. SQL is a special-purpose language for managing data in relational database management systems. It is most commonly used for its “Query” function. In other words, it allows an individual to access and manipulate databases. This includes but is not limited to:

  • Executing queries against a database
  • Retrieving data from a database
  • Inserting records in a database
  • Updating records in a database
  • Deleting records from a database
Example of SQL Code (Creating a Database)
/*
mysql> CREATE DATABASE MyDatabase;
Query OK, 1 row affected (0.06 sec)

mysql> Show Databases;
+------------+
| Database   |
+------------+
| info       |
| java2s     |
| mydatabase |
| mysql      |
| t          |
| test       |
| ttt        |
+------------+
7 rows in set (0.00 sec)

*/  
CREATE DATABASE MyDatabase;

Show Databases;

Conclusion

While it is not mandatory, or realistic for that matter, for designers to work online to be fully fluent in all these languages, it certainly is very helpful to at least be conversant in some of them. There will always be room for programming specialists as a very few rare individuals might have the capacity to be fully fluent in more than a few programming languages. As the web continues to grow and evolve, no doubt that there may be some consolidation and splintering of these languages, with new ones to emerge and some to disappear. Most designers, web and graphic alike, would rather do what they are described as doing—Design.

Fantastic Free Font Friday: Urban Elegance

Fantastic Free Font Friday: Urban Elegance

There are many great looking contemporary light weight fonts out there that feature clean, classy lines. This week’s font puts a nice twist on this approach while maintaining an elegant look.  It is aptly named “Urban Elegance.” This typeface was created by Tipografia Leone, a print shop in Florence, Italy.

Glyphs

As seen in the glyphs above, Urban Elegance is straightforward but friendlier than some other modern looking typefaces. This font would could work for copy, but would be better suited for headlines or even as a typeface for a contemporary logo.

I love city life
Stationary

 

The fonts featured on www.rthr3e.com are their authors’ properties and at time of publishing are known to be free. Please take note of any pertinent readme files and license details available with downloads. If no license is indicated it is that information was not readily available.

Design 101: Color

Design 101: Color

Deep breath. This is a HUGE topic and cannot be effectively covered in a single post, but I want to touch on the basics to get a handle on how color is used in design.  You have likely heard some catchphrases or are familiar with some basic concepts — warm and cool colors, tints vs. shades and so on — but let’s scratch a little deeper than the surface.

Color Relationships

Color shapes are based on the color wheel and looks at how different colors interact with others on the wheel.  There are four main color relationships that are often referred to, though there are certainly more, including split-complementary and tetradic among others.  The main ones are outlined below:

  • Monochromatic
    Monochromatic color schemes are derived from a single base hue and are extended using its shades, tones and tints. Tints are achieved by adding white, shades by adding black, and tones by adding gray.
  • Analogous
    Analogous color schemes use colors that are next to each other on the color wheel, with one being the dominant color, which tends to be a primary or secondary color, and two on either side complementing (which tend to be tertiary).
  • Complementary
    Complementary colors are colors that are opposite each other on the color wheel. When combined, they produce black, or if colored light (rather than pigment) is used, they produce white. When placed next to each other, they create the strongest contrast for those particular two colors.
  • Triadic
    A triadic color scheme uses colors that are evenly spaced around the color wheel. The easiest way to place them on the wheel is by using a triangle of equal sides. Triadic color schemes tend to be quite vibrant, even when using pale or unsaturated versions of hues, offers a higher degree of contrast while at the same time retains the color harmony.

Hues, Tints, Shades and Tones

Do you know the difference between a hue and a color?  Trick question; a hue is any color on the color wheel. Hues are the starting point for tints, shades and tones. As referenced earlier in the monochromatic color scheme, a hue can be altered by adding black, white or gray to it. Note that this does not include mixing two colors together. Not surprisingly, tints and shades affect the “mood” of the color. Tones, meanwhile, are slightly more complex, subtle and sophisticated.

  • Tints: Sometimes referred to as a pastel, tints are any color with white added.
  • Shades: A shade is any color with black added.
  • Tones: A tone is created by adding both black and white (a.k.a. gray).

Warm and Cool Colors

The distinction between “warm” and “cool” colors has been important for centuries. It is no longer commonly referenced in modern color science, but is still frequently used in practices today.

Historically, it is related to the observed contrast in landscape light, between the “warm” colors associated with daylight or sunset and the “cool” colors associated with a gray or overcast day. Warm colors are generally known to be hues from red through yellow, while cool colors are often known to be the hues from blue green through blue violet. White, black and gray are considered to be neutral, though grays are sometimes included as cool colors.

In paintings or photographs, warm colors are said to appear more active, while cool colors tend to recede.  Within the field of interior design, warm colors tend to elicit feelings of activity or liveliness, while cool colors have a more calming and relaxing response.

warmCoolSunset

  • Warm colors are vivid and energetic, and tend to advance in space.
  • Cool colors give an impression of calm, and create a soothing impression.

Psychology of Color

I will begin by stating that in the design world, colors are extremely important, yet they are simultaneously often overstated.  What of this paradox? The problem lies in the fact that people want to apply universal truths to areas where they fundamentally do not belong.  There are certainly commonly accepted notions of how color affects mood, but color is too dependent on personal experiences to be universally translated to specific feelings. In other words, you can’t truthfully state that blue means sad.

Here are some examples of overstatements that should be digested carefully:

GREEN
Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. Green has strong emotional correspondence with safety. Green has great healing power. It is the most restful color for the human eye; it can improve vision. Green suggests stability and endurance. Green is directly related to nature, so you can use it to promote “green” products.
BLUE
Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom,confidence, intelligence, faith, truth, and heaven. Blue is considered beneficial to the mind and body. It slows human metabolism and produces a calming effect. Blue is strongly associated with tranquility and calmness. In heraldry, blue is used to symbolize piety and sincerity.

There are elements there that do hold water, though any given individual may wrinkle an eyebrow if the statements are assumed as absolute truths.  While color is often oversold, it cannot be denied that color affects our moods and perceptions. There is in fact, a mountain of well-documented research on how color is perceived and how we as humans react to it. Our brains are extremely responsive to visual stimuli, with color being a major factor in how we respond to that stimuli. Both consciously and sub consciously, we take some meaning from color.

This may seem like a contradiction, but put simply, color theory is just that, theory.  There are deep truths but there are hardly absolutes.  Designers should keep color psychology in mind to help make their designs resonate, but use it with a grain of salt.

Conclusion

Color is important. It is not everything. Color is complex. Color is also just fun.  In design, there is a whole lot of room to play and experiment with color. In general, the goal should be achieving color harmony; that is, something that is pleasing to the eye. Color can be used to engage the viewer and create an inner sense of order and balance in the visual experience and can figuratively breathe life into a design, but it is worth remembering too, that 1 in 12 people are color blind, and good design can still be achieved in color’s absence.

Design 101: Image File Types

Design 101: Image File Types

You’ve all seen them at one point or another, JPG, PNG, BMP, GIF, etc.  But do you know what those file extensions mean or what they are used for?  What about EPS, PSD, or AI files? Unless you are a web or print professional, it is likely you are not familiar with all of them or don’t know the differences between them. There are many more file types out there, and you might have a general idea about them, but we will examine 10 of the most common.

Vector vs. Raster

Let’s begin but examining a crucial differentiation in file types. Images can be put into two basic categories, vector and raster. The basic difference between these two file types are that vector graphics are easily scalable, while raster images are not. Vector graphics are composed of points and lines (or paths). Raster graphics, meanwhile, are composed of pixels (or individual dots). This becomes most clear to individuals when they attempt to enlarge a raster image and it becomes “pixelated.” In other words, distorted or blurry. Vector images use proportional formulas (aka math) to determine shapes at any size. This is the basic reason why vector images are used for logos, or in print design. Raster images are also commonly used in print, they are just high resolution.
Vector vs. Raster

Resolution

I must also mention resolution. Resolution translates to how detailed your image is. This is determined by DPI or PPI (dots per inch / pixels per inch) and basically refers to the density of an image. This most immediately comes into play when deciding whether you need a web or print design. Websites display images at 72 DPI, while print images are commonly at least 300 DPI.
Dots per Inch

CMYK vs. RGB

This topic deserves its own post as there is a whole lot to say about it, but for our purposes here, I will just give a basic overview. In very general terms, RGB (red, green, blue) is best for the web, and CMYK (cyan, magenta, yellow, black) is best for print. Both of these color modes have a limited gamut (a complete range or scope of something), and conversions can be tricky. Why? Well, RGB is “additive” while CMYK is “subtractive.” What does that mean? Additive color mixing begins with black and ends with white; as more color is added, the result is lighter and tends to white. Subtractive color mixing means that one begins with white and ends with black; as one adds color, the result gets darker and tends to black. Computer monitors emit color as RGB light while inked paper will absorb or reflect specific wavelengths.
RGB vs. CMYK
You know have a basic understanding of image types and some of their properties, so let’s look at the specific file extensions, and when is the best time to use them.

1. BMP

Bitmap

BitmapWhile this is indeed a filetype, bitmaps are also used interchangeably to refer to raster images altogether. Bitmaps are defined as a mesh of pixels. Each pixel contains  a color value. Bitmaps can contain a lot of detail, but in general are very large files and thus are not used very commonly.

2. JPEG (or JPG)

Joint Photographic Experts Group

JPGBy far the most common image file type is the JPG (or JPEG). A JPG is a raster image and the quality of the image will decrease as the file size decreases. JPGs are most commonly used on the web, but are also used in Word documents and you will also find them in your phone’s camera every time you snap a picture.

3. PNG

Portable Network Graphics

PNGAnother increasingly common file type is the PNG. These files are also better for the web than they are for print. What makes PNG special is that they can have a broad color spectrum and have a transparent background. If you have a logo or image that is white, or if you don’t want a white box around your logo, this becomes really important.

4. GIF

Graphics Interchange Format

GIFA GIF (Pronounced “jif” according to its founder) is known for being animated, though they certainly are not always. GIFs can are made up of 256 colors in the RGB color mode. File sizes are often smaller as this file type uses a limited number of colors. GIFs can also have transparent backgrounds.

5. TIFF

Tagged Image File Format

TIFFA TIFF is a raster file that has vector-like properties.  That is, it doesn’t lose quality when it’s resized.  However, these file types are usually very large and are not suitable for the web as they will take a very long time to load. They are more commonly used when saving photographs for print.

6. SVG

Scalable Vector Graphics

SVGAn SVG is an XML-based vector image format with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

7. EPS

Encapsulated Postscript

EPSAn EPS is a vector format file most often used for print. Almost any kind of design software can create an EPS, most notably Adobe Illustrator, but other software programs, such as Quark and Corel Draw can also create and view EPS files.

8. AI

Adobe Illustrator Document

AIThe large majority of graphic designers use Adobe products to work with images. Adobe Illustrator is the flagship program to work with vector images and is used to create AI files. Adobe Illustrator can also create various other file types, such a EPS, PDF, and SVG files.

9. PSD

Photoshop Document

PSDTo be technical, a PSD is not just an image file type. PSDs are viewed using Adobe Photoshop, another hugely popular Adobe product. This type of file contains “layers” that make modifying the image much easier to handle. Photoshop generates raster files though it is possible to work with vector images within the program.  Users will not be able to view this file type without the program.

10. PDF

Portable Document Format

PDFTo be technical once again, a PDF is more of a document type than an image type, though it can be used view images, so I have included it here. PDFs are also an Adobe product, created with the goal of being a universally viewable file. In large part, this goal has been achieved. Many print shops can use PDFs for print projects (if they are high resolution). PDFs are considered to be an excellent file type for sharing graphics.

Conclusion

As you can see, there are many ways to display an image, and instances where it makes a lot of sense to favor one file type over the other.  Having a basic understanding not only of file types but also the concepts of vector and raster, as well as color modes will greatly help when working on a design project.

Design 101: The Logo

Design 101: The Logo

The logo.  The starting point for so many start-ups, aspiring artists, and small businesses as they turn their attention to identity, branding and/or marketing.  This is in fact a good place for us to begin.  Many people use these terms interchangeably, and while there is certainly overlap, they are indeed all different. Well known designer Jacob Cass of Just Creative provides an excellent framework.

  • Logo: A logo identifies a business in its simplest form via the use of a mark or icon.
  • Identity: The visual aspects that form part of the overall brand.
  • Brand:  The perceived emotional corporate image as a whole.

These elements all define an organization and set the tone for the relationship with its clients or customers.

What makes for a good logo?

So to the topic at hand.  What makes for a good logo?  Does it have to be famous? Does it have to be clever? Does it have to be  visually stunning?  Well, a good logo can actually be all or none of these things. There are several elements though that really help define an effective logo. Let’s break them down.

The Elements

An effective logo is:

  • Simple
  • Memorable
  • Timeless
  • Versatile
  • Appropriate

Let’s look at these one by one in a little more detail.

Simple

Simple does not mean boring. Simplicity is such a beautiful thing.  Think about your logo as your introduction — “Hello, my name is…” Most people don’t try and cram in their personal history and interests into the first words the utter when they meet someone. A great logo delivers all the meaning it intends to almost immediately. Don’t make your audience guess. When it comes to logos, simplicity is also what helps make a logo memorable.

Simple. These famous logos are instantly recognizable, versatile, work great in monochrome.

Simple Logos

Memorable

The Swoosh, the Golden Arches, the bitten fruit. While the massive size of these companies has helped enhance the reach, what remains true is that their logos stay with you.  Admittedly, there is also a bit of an enigmatic aspect about this, though creating a memorable logo is often thought out, well crafted, and relatable to the company.  Stay away from stock sites.  The logo elements there are often pretty generic.

Did you know that Apple’s logo makes use of the golden ratio?

Creation of the Apple Logo

Timeless

We can look to the two largest soft drink companies in the world to contrast the approach to being timeless. The Coca-Cola logo was created by Frank Mason Robinson, in 1885 and has remained relatively unchanged since then. Meanwhile, the Pepsi logo has had no less than 5 typeface changes, an introduction of a new color (which also shifted throughout its history) and new mark, (which also changed over a 50 year period). The graphic below is admittedly an overstatement as Coca Cola has had some variations with its Coke logo. Nevertheless, carrying the distinctive cursive typeface for over 100 years speaks to the longevity of good design.

Two major soft drink companies have approached their logos quite differently over the last century.

Pepsi and Coca Cola Logos Through the Years

Versatile

Size matters. When designing a logo, it is actually more advantageous to think small. It will be much easier to scale up than down. Perhaps start by thinking what your logo will look like on a business card as opposed to a times square billboard. The Puma logo is recognizable on a shirt sleeve.  Color is also crucially important here. If your logo has more than five colors, it might be time to think redesign.  Even that is a little high.  Most designers begin by designing in black and white before adding color into their design.   This allows one to focus on the concept and shape, rather than the subjective nature of color. Similarly, it is also advisable to avoid gradients or overly detailed illustrations. This helps ensure versatility when you need to use your logo in a newspaper or photocopy or rubber stamp or when it is embossed. One other consideration with color is cost.  When printing, the more colors used, the more expensive it will be for the business over the long term.

These are terribly complicated and difficult to scale down, or use in grayscale.

Simplify!

 

Appropriate

Have you ever seen hot pink power tools? A cartoon baby as a beer mascot?  There’s a reason these things don’t exist. Some associations are more obvious than others, and sometimes a juxtaposition can make a statement, but in general, it is not a good idea to pair elements that don’t really belong together, such as a jagged, gothic font with baby products.  Additionally, getting feedback is vitally important to avoid the nightmare of an “unfortunate logo.”

How did these get past the design stage?  Why didn’t anybody say something!

unfortunateLogos

 

Final Thoughts

Great logos don’t just happen.  They are a result of hard work – a process that involves research, personalization, sketching, re-imagining and a lot of creativity. This is what makes a great logo priceless, and the reason why many people who opt for a quick or cheap route often feel unsatisfied. You get what they pay for.

So how much does a good logo cost? Designer David Airey sums up the design dilemma by noting that asking the question “How much for a logo?” is kind of like asking a real estate agent, “How much for a house?” There are plenty of websites out there where you can get a logo as little as $5! You can even get designers to bid on your project and you can choose the best one.  There are a lot of problems with this model, but think about it this way:

Your logo is often your first impression. Have it say something about who you are.  That is the point after all.

Creating Beautiful, Effective Landing Pages

Creating Beautiful, Effective Landing Pages

Your homepage is prime real estate and can be a make or break a visitor’s experience of your company or business.  There are different terminologies for a “homepage,” including “landing page” and “splash page.” Splash pages tend to be very simple, and often don’t have a lot of content but rather are intended as eye candy.  In reality, splash pages often frustrate visitors because of lengthy load times and few navigational options (the most common one being to enter the site). Let’s instead focus on a landing page, which can still be visually stunning, but also has a clear purpose.

What’s The big deal?

Why do I need a great landing page? According to some research, the average attention span of an online visitor is right around 8 seconds. So first impressions have never been so important.  If you can’t connect with a visitor immediately, they are moving on. Additionally, landing pages are highly valued by search engine rankings.  As much as 93% of business to business (B2B) buyers start their hiring or contract work by doing a search. If you are a business, you absolutely need a compelling landing page.

Of course not every business (or website) is the same.  There are all kinds of companies and organizations that have different purposes and services, but whether you are a designer, a tech company, or have tangible products you are selling, some basic marketing principles can be applied. Ultimately, an effective landing page means greater conversion, and more bang for your buck .

The Elements

The backdrop to a fantastic landing page are beautiful design, and an easy navigation, if you have include one, but preferably a call to action. Let’s look more specifically at what else makes for a great landing page.

1. Simplicity

So what basically makes a good landing page then? In a word – simplicity. Make sure to use simple language. Use a simple layout. Have a simple call to action. There is such great power in simplicity.

There are of course occasions in which you might need different calls to action or may want to highlight a different feature or service of your company.  You might consider building out some different templates, but the key is to always keep them simple, focusing on the call to action, remembering that distractions kill conversions. Also, note that simplicity does not mean boring or generic.  There are ways to infuse your personality into a landing page.

2. Lists and Bullets

MarketingSherpa, a well know market research company has conducted some studies that have shown that most people visiting landing pages will do three things.

  • Read the headline
  • View bullet points (i.e. this list!)
  • Read a bio, if available

That really eliminates the bulk of the words you write. Keep this in if you have a lot of text on your homepage.

3. Graphics

How many times have you heard it?  A picture speaks a thousand words.  Visual interest is key. Remember to include your logo somewhere visible, though not necessarily dominant on the page. Trending right now are “hero shots” or mock ups of white papers or site layouts.  Stay away from Googling images or really popular stock.  There are great free image resources out there. Whatever you use, it is always good practice to make your graphic clickable in addition to having a button.  By now, most people know and have been conditioned to click on graphics.

4. Gratitude

While it is not part of the landing page, I can’t neglect mentioning the importance of saying thank you.  Consider it a part two of your landing page.  Whether you are offering a deal, having someone sign up for a newsletter, or are actually hiring you, if there was any call to action that was clicked on, make sure and say thank you.  Everybody likes good manners.

Conclusion

When starting or growing your business, your website is a powerful way of gaining more clients or customers. You might be a small shop and be your own marketing team in which case managing your time is a major battle.  Though your time is precious, it is worth experimenting. All of the top B2B marketers test everything, and I mean everything — offers, web copy, headlines, different types of forms, colors, layouts and on and on. Testing is important as it gives you piece of mind in know what works and what doesn’t. Your landing page is the most important thing to test on your entire site.  It is the first impression, and could be the last.

Pricing: Catching Rain with a Net

Pricing: Catching Rain with a Net

How much for…? Believe it or not, designers need to know as much as clients do! You might be hard pressed to find specific price points published by many design firms. The reason is simple; no project is the same and every client differs. Everybody, including me, wants to get a good deal when buying a product or services. However, it must be stated that it is almost impossible to give an accurate quote without an initial conversation.

For artists and designers, pricing can be one of the most frustrating parts of the creative process. To varying degrees, the creative process can be quite mystical and a final result somewhat subjective. This is also what makes this fun!

howMuch

It is completely reasonable (and the norm for most businesses) to know how much something costs. Can you imagine walking into a clothing store and instead of reading a number on a price tag, it just said “talk to the manager”? With web and graphic design however, there is a bit of a process. You may have started your quest with Google:

  • “How much does a website cost?”
  • “How much does hosting cost?”
  • “How much does a logo cost?”
  • “How much should a website/logo cost?”

I will venture to say you did not come away with definitive answers.  I want to give some background on why, and though I lay out some concrete prices, they are merely guidelines as every situation is different. You may have heard of the principle of “Fast, Good or Cheap — Choose Two.” This certainly applies in the world of design.

Hourly Rates, Fixed Rates and Package Deals

It is very common for designers to charge by the hour, though rates vary wildly depending on the experience, location, and many other factors. In hard numbers, this could mean anywhere from $10/hr to $500/hr for high level consultants. Most designers, myself included, offer different pricing structure as there is no one size fits all solution for every project. There can be a myriad of factors in determining a fair price, including the complexity of a project, type of project and mid-project direction changes.

Examples

Two designers charge the same rate, let’s say $50/hour. One designer works much more quickly than the other, completing a project in 10 hours, while the other designer takes 20 hours. Their final products might be comparable, but one designer is much more efficient and the client could end up paying double for the “same” work.
Two businesses, one a small start-up (the mom and pop type), and the other large company with national reach, both create and sell custom T-shirts. By chance, they both hire the same designer at the same hourly rate to create designs for them. Is the designer being fair? Who is really getting a better deal?

Basically, there is no exact formula. This means that a conversation is the best place to start. I as the designer, need to know what exactly you are hoping to achieve in order to most effectively reach those goals. As a client, the important thing to remember that you most often really do “get what you pay for.”

Spec Work

It is possible to acquire a very inexpensive logo, but that often means it is cheap. There is a difference. There are several websites that allow a client to submit “contests” and choose a favorite design submitted by many designers.  This is also known as “spec work,” short for speculative work.  This may seem like a bargain, but there is a reason that it is in fact so cheap. It also isn’t very fair, for the designer or the client. Aside from giving clients the impression that design doesn’t have much worth, it also penalizes the clients themselves. Contests do not allow designers to do the proper market research that a serious project requires. In turn, the client doesn’t not receive the most effective outcome and instead often subjectively selects  “the prettiest design.” The following video explains this further.

Logos

Not surprisingly, getting a great logo can be a quick and easy process or a very arduous and painfully expensive one. There are plenty of high profile examples that demonstrate this. How can it be that BP paid $211,000,000 for a logo, while Twitter paid $15? Ouch!

How much for logo design?

Designers commonly price hourly and with package rates as well here, depending on what a client is looking for. Logo package rates can include multiple versions of the logo, different files types (raster and vector format), different resolutions, grayscale/black and white versions, etc. With package deals, there may be a base price and additional services, such as branding consultation, stationary design, and so forth, can be added on.

Websites

With websites, even more so than with logos, there are many more unpredictable factors that will determine a final product.  Quotes are incredibly subjective. There are a whole host of ways of getting a websites, and the price range can range from next to nothing with certain services to tens of thousands of dollars.  That is a bit insane isn’t it!?

With websites, besides just having some basic pages, there are several things to consider that could also greatly determine a final price tag. These features might include (among others) :

  • Forms
  • Media Management
  • Bandwidth
  • Slideshows
  • Ecommerce
  • Support
  • Membership Management
  • Stock images/Image formatting
  • Event Management

I have read that pricing a website is a lot like pricing and building a new home. This is because there are seemingly infinite factors involved, and many changes can happen in the middle of the process. Additionally, a website is not just a product, but simultaneously a service, one that can be ongoing depending on its nature. Just as you might have upkeep and repairs and even remodeling with a house, a website often requires ongoing care.

Ultimately, what you budget for a website, logo or any other design services should be based on what your business needs are. So, how much for a website then? Let’s talk some more and we’ll both find out.

High Quality, Low Cost Images

High Quality, Low Cost Images

These days almost everybody is on a budget, but inexpensive doesn’t have to mean cheap.  When it comes to great photos, many assume that this will cost a pretty penny. Not always the case! In fact, there are a whole bunch of sites that offer low cost and very high quality images for your blog or other  design projects.

Many novices will turn to everybody’s best friend for searching, Google. But before you just start “Google image searching” your intended subject matter, take some time to peruse some of these sites. I guarantee the results will be much more aesthetically pleasing than what shows up in the Google results, but better yet, you won’t need to worry about the copyright infringements that can easily happen when using Google.

The Conventional Stock Image Sites

Many of said Google results will point you to the big stock sites, such as iStock, 123rf.com, Shutterstock and the like. These sites have great pictures no doubt (even though some will feel very corporate and formulaic).  The trouble is that unless you are fortunate enough to have a big budget (or a budget at all), you won’t be able to get too many photos here. Not surprisingly, the watermarks a a big giveaway of expensive images. Getty Images, one of the world’s largest photo repositories, recently made headlines regarding their decision to release millions of free images, in their attempt to combat copyright violators. They have done this by using an embed tool, making millions of its images available to consumers for use on blogs, social media channels and websites.

If you have some cash to burn, go for it, but there are excellent alternatives, that will likely meet any photo need you might have.

The Biggest Bang For Your Buck

Here are eight great websites that can likely meet the large majority of your image needs. The best part is that they are are all free, a few only requiring attribution.

Unsplash

www.unsplash.com

UnsplashThis is one of my favorite photo resource websites which I happened upon accidentally. While there is no way to search, the vibe is great. The images here are all very high quality and have a very artistic feel.  You can sign up to receive images in your inbox weekly. One drawback is that there is no way to search images, but it is certainly fun to just scroll down the page of eye candy.

Little Visuals

www.littlevisuals.co

Little VisualsThis site is quite similar to Unsplash in its look and feel, and structure and features. The site allows you to sign up to get hi-res images emailed weekly to your inbox thereby prompting you to keep checking out the collection. While there is also no search function on the site, they do employ tagging which can help in your search.

PicJumbo

www.picjumbo.com

PicJumbo

PicJumbo is the brainchild of Viktor Hanacek, a photographer and web designer based in Europe. Seeing the need, he decided to offer high quality photos in full resolution for free. The selection is somewhat limited, but there is great stuff here, and the subject matter continues to become more and more diverse.

SplitShire

splitshire.com

picResourcesSplitShire

Much like PicJumbo, Splitshire was put together by a photographer and web designer in Europe, Daniel Nanescu, who was always looking for some great photos for their projects and often had difficulty finding them. The result was this site.While attribution is always appreciated, it is not required and SplitShire offers awesome free stock photos for personal and commercial use.

Gratisography

www.gratisography.com

picResourcesGratisography

I recently discovered this one, but I am sure I will be back a lot.  Once again, many of the images are very artsy, and I am struck by the excellent composition in just about every shot. Gratisography allows its images to be used on personal and commercial projects and new images are added weekly.

New Old Stock

nos.twnsnd.co/

New Old Stock

If you are looking for great vintage images, this is your destination. New Old Stock features vintage photos from public archives that are free of known copyright restrictions.  There are times where a historical photo is exactly what you need and this is a good place to find it.  Other images that are free of landmarks, or other historical markers, such as landscape photos can be used in any situation.

Pixabay

www.pixabay.com

Pixabay

This site announces the obvious fact that “finding free images of high quality is a tedious task, – due to copyright issues, attribution requirements, or simply the lack of quality.” Thus we have Pixabay, a repository for excellent public domain pictures. They also offer free vectors and drawing in addition to photographs. Freely use images in digital and printed format, for personal and commercial use, without attribution required.

Stock.XCHNG

www.sxc.hu

SXC

If you need to search something and want a more traditional “stock image,” check out SXC. Here you can browse a huge image gallery containing over 350,000 quality stock photos by more than 30,000 photographers. In their own words, “SXC is a friendly community of photography addicts who generously offer their works to those who need them free of charge.” This is a well known free resource among graphic designers and photographers alike.

Honorable mention

There are a whole bunch of other sites that have some great images, though the caliber might not be as high, or they have lots of ads or are otherwise difficult to navigate. These would include morgueFile, Public Domain Photos, Public Domain Pictures.net, Open Photo and RGB Free Stock Photos, among others.

Conclusion

The best things in life are free! But all cheese aside, it is a great time to be a designer. These online libraries are growing and there are already a myriad of high quality images of all kinds of subject matter, at very affordable prices. When possible, it is good form to attribute.  You might also notice that several of the individuals who have thrown up their own personal libraries are at most asking for a cup of coffee.  That is a deal you can’t really beat.

Things to Consider When Posting Photos

Things to Consider When Posting Photos

You’ve got your new site all set up and are now wanting to populate it with more content. If the text on your site is main course, the images you post are the dessert, or at the very least, the spices. Consider carefully what photos you choose to post. It should be relevant, good quality and formatted properly. This will be one of the the highest impact aspects of your website, and will reveal much more than you might think.

Getting Web ready

Once you have selected an appropriate  image, most inexperienced web content managers make the mistake of just uploading whatever pictures came off of their camera without doing any prep.  In other words, the pictures are not “web-ready.” What do I mean by web-ready? Primarily, this means resizing and optimization. This is so an image can fit properly on a page and also load quickly.

Shrink vs Crop

The two main ways to resize an image are to shrink it or crop it.  Properly framing an image is an art form in and of itself, but at the very least, you should consider what is happening inside your picture.  What is the focal point?  Are there “unnecessary” things going on in the background (does the ceiling really need to be visible above the group shot)? For more details on image composition, check out these pointers from Digital Camera World.  Be careful when resizing to make sure you keep the size ratio intact.

Image distortion can make your entire site look amateurish regardless of how well built the rest of it is.

Consider a Naming Convention

For those familiar with WordPress or other CMS systems, a folder directory is surprisingly absent. Many media library functions under a search paradigm, so naming conventions become extremely important if you want to stay organized.  Even if you are going a more conventional HTML route, having a good naming convention is a best practice your pictures.  One common way to help organize your library is to lead the name of all your files with the date and then have some sort of description in the file name as well, though finding the right balance between description and file name length can be tricky.  A good example might be “20140101_fireworks” — and is certainly much more helpful than trying to remember what “IMG_1034″ is.

File type

Most images will be .jpegs though .gifs and .pngs are also common.  The latter two allow you to have transparent backgrounds in your image, which is often helpful, but often not necessary.  There are a whole lot of other image file types, but most of the web runs on these file types.

Free Tools

Here are several services (all free!) you might consider if you do not have access to Photo editing software. There are of course many others out there that may work better for you. Feel free to comment with your favorite.

  • Canva: The best of the bunch with a simple, drag-and-drop interface and over 10 million users
  • Pic Resize: has a batch function, allowing you to resize multiple images at once.
  • Resize Your Image: features a simple interface that gives you dimensions of your image.
  • Web Resizer: has an optimization function and the rounded corners feature is a nice addition.

Besides web based tools, there are also free downloadable software programs.

  • GIMP: a well known, freely distributed piece of software for photo retouching, image composition and image authoring.
  • Free Picture Resizer – This is a free downloadable program from the good folks at CNET

We’ve all seen a “wow” image but unfortunately, we can’t all produce them.  However, using these simple tools and guidelines will help give your web site a fresh, professional and attractive presentation.

Pin It on Pinterest