Monthly Archives: March 2017

Tips on How to Protect Your Design Working on the Internet

Are you worried about people stealing your designs after you publish them on the web?

Web designers are faced with a “catch 22” situation. To attract new clients, they must showcase their work and put it on display on the internet. Yet, by doing so, they aremore vulnerable to thievery. The possibility of people taking their work and re-publishing it or using it for their own gain without giving the author attribution is a grim reality.

It’s all too easy for internet users to click and save a graphic and insert it into a blog or website without the creator even knowing it is happening.

Inspiration vs. Stealing

Have you ever been told your work “inspired” someone when you know they stole it?

There is a fine line between inspiration and stealing. On one hand, your design can inspire someone to create a completely unique piece. Yet, in other cases, a fellow web designer may borrow elements of your design and “change it up” into a different graphic. The offender may cite inspiration as the main reason and defend the fact that it is different from the original. Regardless of what the person says, you will know the truth.

This is a common occurrence with designers who are not skilled enough to complete a job. They swipe elements from existing designs hoping the client won’t notice.

You know this is stealing even though it can be misconstrued as inspiration.

With so many loopholes it is difficult to keep track of your designs and keep them protected.

Good Intentions

Many people who re-post graphics are not aware of the illegal nature of their actions. People think that the internet and its images are available to anyone who wants them.

I have witnessed many people who run high-performing blogs take images from a random Google search and use them on their websites. Many were not even aware it was a legal issue.

In other cases, people will “steal” designs that don’t have any copyright information stated. They do not realize that an image is copyrighted material once it is published, regardless of the lack of statements surrounding it.

The Problem

As a web/graphic designer, it can be disheartening and frustrating to see your work published without ever receiving the notoriety from it. Those images and designs are your babies and they deserve proper respect and attribution, not to mention stealing them is a direct violation of copyright law.

What do you do when you notice someone stealing your work?

Fighting copyright issues can turn into a huge mess. Thankfully, simple communication can thwart a potential battle, especially if the offender was unaware of copyright laws. However, in other more serious cases, designers will simply throw in the towel due to a lack of money and resources to fight.

Protect Your Work

Do you have a team of legal experts ready to prosecute people who steal your work? Unless you have the budget of Amazon.com, this is not a likely scenario. Most freelance web designers do not have thousands of dollars to spend on legal assistance should anyone steal their content, so they must devise ways to protect their work and prevent it from misuse.

There are many actions you can take to protect your work online. While not all will be 100% successful, they will definitely tip the scales in your favor.

Copyright disclaimers – Consider posting a notice of copyright or “all rights reserved” on your website where visitors can see it along with a statement describing the illegal nature of stealing your work. It may not stop every perpetrator, but it will notify those who are unaware of copyright laws about stealing content and also scare others into submission. It’s similar to posting an alarm sign in front of your house to deter thieves from entering. Even if you don’t have an actual alarm system, the thought of possibly getting caught is enough to deter them.

Watermarks – Watermarks are a good deterrent and can prevent people from stealing your images. Designers typically do not like changing the look of their designs with watermarks, but many feel they are the best deterrent to theft. Some resort to a small signature and website logo on the bottom of the design as well.

Copyscape – Use Copyscape to search for duplicate content online. I use the service regularly to assess whether my writers’ content is unique, and also to check the duplication of my personal content.

Take Charge With Licensing

When you post your creative work online, copyright laws help to prevent the copying of your work and control its distribution.

If an individual steals your design and uses it for an ad, it is a direct violation of copyright law. The action is also in question if the individual incorporates the copyrighted work to create a derivative without your permission.

Even though these actions are against the law, people continue to steal, and creative professionals find it taxing to run after thieves whenever they suspect foul play. So, instead of hiding their creative designs, they solve this problem by allowing the public to use their work under the terms they set forth. This is what we refer to as licensing.

Licensing makes your creative work available to the public so you can control its distribution. Licensing also deters copyright infringement and sends thieves off to steal other images not protected by a license.

As the copyright holder, you can control the use of your design work. Certain licenses allow widespread use as long as the person credits the author. Other licenses exert tighter controls on copying and derivative works.

Creative Commons is one of the most popular open source licenses for creative professionals. It offers three layers of licenses that anyone using the internet can understand.

When you use licenses to protect your work, you still own all the copyrights, but you allow people to use your work as you deem acceptable.

The Licenses

1. Attribution

Attribution is the most lenient of the licenses. It allows others to use and distribute your work and create derivatives as long as they give you credit.

2. Attribution NonCommercial

Under this license, people can use and tweak your work and copy it only for non-commercial use provided they give you credit.

3. Attribution-ShareAlike

This license is similar to the open source software license in that any new work created from your original work must be licensed in the same manner. People who use or revamp your work for commercial purposes must credit you and all derivatives will carry the identical license. Wikipedia uses this license.

4. Attribution-NoDerivs

When you opt for the “no derivatives” license, you permit people to redistribute your work as long as they do not change it or modify it in any way. The graphics and images must remain unchanged and the publisher must give you credit.

5. Attribution-NonCommercial-ShareAlike

This license is similar to the Attribution-ShareAlike; however; it prohibits the use of your work for commercial purposes.

6. Attribution-NonCommercial-NoDerivs

For those web designers seeking the most restrictive license, this one is ideal for you. It prohibits the use of your work for commercial purposes. People can download and share your images if they credit you, but they cannot alter them.

The Licensing Decision

Before you decide which license to use, you must answer two questions…

1. Do you want to allow people to use your work for commercial purposes?

The definitions for commercial vs. non-commercial are still somewhat confusing. The technical term for “commercial” involves using images for the purpose of selling or to gain profit. Non-commercial refers to using images for personal use and not to gain profit.

The definition becomes ambiguous when a publisher wants to use an image for his blog that includes advertisements. Is the image used to draw in revenue? Some would say “yes” since it is part of the blog and the blog contains advertisements, which relates to commercial usage. Others would argue that the image isn’t directly involved in any for-profit activity and is, therefore, noncommercial usage. The jury is still out on this one and Creative Commons is actively taking surveys on the subject to further define the terms.

If you do not want your images used by companies seeking to gain profit from them, stick to the non-commercial licenses.

2. Do you want to allow people to create derivative works?

The United States Copyright Act defines “derivative work” as:

A “derivative work” is a work based upon one or more preexisting works, such as a translation, musical arrangement, dramatization, fictionalization, motion picture version, sound recording, art reproduction, abridgment, condensation, or any other form in which a work may be recast, transformed, or adapted. A work consisting of editorial revisions, annotations, elaborations, or other modifications which, as a whole, represent an original work of authorship, is a “derivative work”.

The derivative work is a piece created from the original. If you want to maintain your original graphic and keep the image unchanged as it is copied, choose the NoDerivs licenses.

Creative Commons has this helpful License Chooser which will also supply you with code to put on your website. Here are some tips you should know before licensing your work.

Below are some other resources that explain more about copyright laws:

United States Copyright Office
Design Theft – The Webmaster’s Resource
Copyright Explained: I May Copy it, Right?

Has anyone ever stolen your graphics? Do you use licenses to protect your work?

Disclaimer: I am not a lawyer and the advice in this article is for informational purposes only and should not be taken as professional legal advice. If you have any questions about copyright laws, please speak to a lawyer knowledgeable in the subject matter and the particular laws of your state or country.

What Designers Expect When Designing for Startups

Designing for startups can feel more like a whirlwind than an actual design project. The process can be a rough road to travel if you are not prepared for the full experience.

Thankfully, startups are realizing the need for effective web design and many are hiring professionals like you to get the job done correctly. Great design is becoming more and more important as business owners realize it is an integral component of their growth strategies.

What Startups Expect

For startups, great web design is more than just colors and buttons on a web page. It’s how they will reach their audience, sell their products, outperform their competition and grow their establishment. Startups do not always think in terms of complex code; they simply want a superior solution.

When you can find the union between what start-ups expect and what you know as great design, you will have a winning combination.

Wells Riley, a graphic, UX and interface designer, wrote a lengthy piece on theimportance of design for startups. In it, he is speaking to startups directly.Here is a statement from his article:

“Companies like Apple are making design impossible for startups to ignore. Startups like Path, Airbnb, Square, and Massive Health have design at the core of their business, and they’re doing phenomenal work. But what is ‘design’ actually? Is it a logo? A WordPress theme? An innovative UI?…It’s so much more than that. It’s a state of mind. It’s an approach to a problem. It’s how you’re going to kick your competitor’s ass.”

Startups need stellar web designers whether they realize it or not. The design is the face of their company and it offers the first impression to their online audience.

The Key Elements of Design

In his piece, Wells identifies the key elements of design for startups. He attempts to elevate start-ups’ perspective on design and explain what it is and how it can help their establishments.

Wells lists what he feels are the true purposes of design. I summarized them below in my own words and quoted some of his statements. Do you agree with Wells?

  • Innovative – Innovation in design is constantly moving in a forward direction. As technological development expands, innovative design should keep up with the momentum. According to Wells, “Innovative design always develops in tandem with innovative technology, and can never be an end in itself.”
  • Product Usefulness – The usefulness of a product is identified by the psychological connection it brings as well as its aesthetic. Well, thought-out design highlights a product’s usefulness and is careful to ignore creating any elements that do not satisfy this goal.
  • Aesthetic – A product’s aesthetic quality is a component of its usefulness. People use products daily and their appearance affects their well-being. According to Wells, only well-executed objects can be beautiful.
  • Makes product understandable – Design makes the product come to life. It allows the product to speak and answers all of the user’s questions. Essentially, it is self-explanatory.
  • Unobtrusive –Wells identifies design as neither a “work of art or a decorative object.” It fills a purpose and should be neutral so users can input their own form of self-expression. If design overwhelms and detracts from a user’s experience, even if it is beautiful, it has lost its true purpose.
  • Honest – Design must be true and honest and never suggest a product is more innovative and powerful than it actually is. It should never manipulate a consumer nor make them think a product is something it is not.
  • Long-lasting – Great design is not trendy. It lasts forever much like timeless fashion. It will never appear antiquated or behind its time.
  • Thorough – A great design process must include attention to thoroughness and accuracy. A good designer will express care and respect towards the consumer by finishing a project while leaving nothing to chance.
  • Environmentally friendly – According to Wells, “Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.”

For startups, the “less is more approach” is ideal. The design should focus only on the essentials and never be burdened with non-important elements just for the sake of beauty. Purity and simplicity will make more of an impact.

What do startups consider the most important qualities of design?

To answer this question, Wells asked 78 CEOs, marketers, and designers about how they define the design. What he found was that both parties viewed design similarly.

CEOs, marketers and engineers had similar definitions as compared to web designers. The most important to both groups was aesthetics, while “making a product useful” came in close second. Innovation was right behind in third. These three definitions topped the list for both entrepreneurs and the designers that create their websites.

Are these your top three?

According to Wells…

“Now we’re getting somewhere. Great design is taking root in startup culture, and it seems like many people are open to change. Not only do many entrepreneurs, devs, and engineers see substantial room to improve their own products, they overwhelmingly believe that designers belong on a founding team… Design is becoming a key differentiator for companies to acquire funding, press coverage, and loyal users.”

“For a long time, a pair of co-founders consisted of an executive and an engineer.It worked for Facebook, Microsoft, and Apple, just to name a few. These companies have excellent designers today, because it’s a necessity they can’t afford to ignore. It seems like design is becoming more and more prevalent in new startups as well “

How to Survive the Startup Design Process

To become successful working with startups, consider a few tips…

Quick Changes

When designing for startups, outline your objectives in detail along with your quote. Since the startup’s goals can change daily, if you don’t outline your fees appropriately, you will end up offering more of your time for less money than you are worth.

When startups change direction, the design may change in the process so if you are not set up to be paid for additional time, you could lose money.

Lay out the details of your services and include a clause defining the rates for anyadditional work beyond the confines of the project. I learned this lesson after working with a few startups on their website copy. They changed their minds partway through the project and because I had not set up my quote correctly, I ended up spending double the time I normally would without receiving any additional money.

Tip: This tip also applies to any project, but it is most important for startups due to the more chaotic environment.

Chaos

Design for startups involves problem-solving. Startups are faced with many dilemmas and chaos is often a common variable. With so many growing pains to endure, the environment can be somewhat indecisive. Your ability to stay calm throughout the process will work in your favor.

Low Budget

Many startups are bootstrapped and they try to make every penny count. Because their budgets are low, web designers working with startups often need to expand their skill sets to include user experience.

One of the goals of creating an effective web design for startups is to get a clear picture of who will be using their website or application. During your consultations, you will need to extract as much information as possible even if the client is not completely clear on its audience.

When designing websites, you must know the audience even if they are fictional. During your consultation, you want to understand the users’ potential behaviors, how they will use the site, what emotion they should feel while using the site, and what actions they should take. Every attribute you learn about your audience can be applied to the design to ensure your client receives a good level of conversions once the traffic pours in.

If your clients are unsure about their users, don’t be afraid to share your ideas with them. This will not only position you as an expert, but it will also make your design highly effective since this information is so crucial to online success.

When I meet with clients I ask them to fill out a detailed questionnaire. The questions are designed to probe the client for essential details about their target audience. Without this information, my website copy would be meaningless because it won’t stir an emotion or compel the user to remain on the website. In order to keep users on the site, I have to get inside their minds and know what makes them tick. What are their behaviors? Desires? Stresses? Problems?

Knowing this information about the target audience will give you the edge and allow you to create a high-converting design that aligns with the startup’s vision.

And even if that vision changes, you will be paid because you outlined your fees correctly in the contract!

Typefaces of what is meant by Email & How to Select a Good and Suitable Font

The thumb rule for marketing anything is to package it in a visually appealing way. Shapes, images, colors and appropriate typography come together to draw viewers’ attention to your product. In this article, we shall be focussing on the impact that typography in your email has on the overall user experience and how to choose your email fonts to create uniformity across all devices.

Aesthetics play a major role in the modern world. From what you wear to what you buy and even what you prefer to see, visual appeal is one of the major deciding factors. Plain HTML formatted web pages and emails are things of the past; no one would like to experience such a ghastly oddity.

People want dynamism in whatever they see: a burst of color, a dash of witty sentences, a couple of images or shapes of varying styles and some user interactivity. Email designers are in constant strive to include these in their emails, which is evident in the emails below.

Kerning: When you read a text, your eyes tend to follow a pattern in which the characters are written. So, it is necessary to have some space between two characters in order for your eyes to seamlessly jump from one to another. This spacing between two characters is called kerning.

The kerning and the margins define the characters per line. If you keep the characters per line very large, the time needed to reach the beginning of the next line in the paragraph shall be too long, and this will tire your eyes faster.

Line spacing: In conjunction to eye scanning, the spacing between two lines in a paragraph is as important as kerning. Keep the line spacing less and you may end up reading the same line again and again instead of progressing to the next line or you may even “jump” between two lines.

Fonts express individuality

Each typeface expresses a unique personality. And based on the readability, a specific typeface can be used for email copy or for decorative purposes. Those used for email copy, are further categorized into 4 types.

Serif

The typefaces falling under this category (Serif) are easily identifiable by the small extensions each character has. These fonts were inspired by the Latin inscription and have been used extensively in printed works such as magazines, books, newspapers, and government documents. So, a copy written in serif fonts reflects a formal or authoritative feel. Some of the examples of this category are Times New Roman, Baskerville, or Georgia typefaces.

Sans Serif

Remove the embellishments from the Serif typefaces and the typefaces fall into a different category i.e. Sans serif. They have a modern & clean feel to it. Most web typography revolves around using sans serif fonts. The most commonly used ones are Franklin Gothic, Helvetica, and Century Gothic.

Calligraphy

Handwritten letters are quite a nostalgia amongst the baby boomer generations. This is the inspiration behind the calligraphy typefaces. They stand out and tend to convey elegance, fun, and a casual feel. Some common examples of script fonts include Lucida, Brush Script, and Edwardian Script ITC.

Monospaced

As the name suggests, monospaced typefaces are typefaces where the kerning, as well as the space taken by each character, are the same. These typefaces were developed for telegrams and early computer displays. While they are very rarely used in emails nowadays, they are best fonts for creating ASCII art. Courier MS is a good Monospacedtypeface example.

How Email Clients render fonts and importance of Fallback Fonts

Before we learn to choose the best fonts for emails, it is important to understand which email clients support custom fonts and how they render the fonts. Except for some email clients such as Apple and iOS mail, email clients cannot dynamically fetch fonts from a remote server. This is a major gap between designing for a web page and an email. You cannot use a web font in an email copy.

So you must be wondering how email clients render fonts in emails. Email clients normally render only those fonts that are available on the device which is used to open the email.

For those email clients which support custom fonts, the email client checks whether the primary font is available in the system. If the specified font is not available, it moves ahead to render the fallback font. So, it is necessary to provide an appropriate fallback in order to deal with a situation where the primary font chosen by you is not available in the email recipient’s device.

In case you are using a customized font which doesn’t have a suitable fallback font, it is advisable to use the font in the form of an image instead of text.

How to choose fallback fonts

While choosing fallback fonts, it is important to see to it that the fallback does not alter your layout in any way. This means it should accommodate itself within the same space taken by your primary font and give the same look & feel. To achieve that, your fallback font should satisfy conditions mentioned below:

  1. Same font style: If the primary font is serif, your fallback font should also be of serif styling.
  2. Similar kerning
  3. Same aspect ratio: Each character has an x-height and set-width, which states the length of a line drawn from the top of letter ‘x’ to the baseline (x-height) and width of each character (set-width) which aids in determining the characters per line. Moreover, taking into consideration the ascender & descender line helps in determining the line spacing.
  4. Same font weight: This can be ignored if the aspect ratios are matching.

    Some Best practices followed

    1. Understand the tone of your email and choose your fallback font first

    No matter how alluring and visually pleasing a font may be, it must go with the tone of the email. Moreover, as discussed earlier, a fallback font should be such that it doesn’t affect the overall layout. So, it is better to choose your fallback font before confirming your primary font.

    1. Emphasize your text with appropriate color

    Like we said in the introduction, images, text, and colors make an email worth reading and so it is important to leave behind the traditional black text on white background. Experiment with background colors and vibrant font colors based on your branding guidelines while keeping the psychology of colors in mind.

    1. See how you type

    A TEXT IN ALL CAPS IS QUITE DISTRACTING AS PEOPLE PERCEIVE IT AS SOMEONE SHOUTING, ESPECIALLY WHEN ACCOMPANIED BY AN EXCLAMATION MARK LIKE THIS! Avoid doing so as it is a major put off for people.

    Moreover, with almost 51% emails being opened on mobile devices, it is important to keep the font size between 14-16pts to enable your email recipients to read the email copy from a distance.

    1. Align your text and stick to visual hierarchy

    Text alignment is an overlooked aspect since most of the users in western nations read left to right. But over a billion people still read and write in languages that are right to left. So if your subscriber base is global then it is important to see the alignment of your text.

    Moreover, it is important to maintain the visual hierarchy. Your information flow should be in the form of an inverted triangle. Make use of headings and subheadings, convey your message via email body copy, and end with the call-to-action button.

    Here are some interesting examples of how a few popular brands are nailing the typography game.

Masculine and Feminine Design Techniques

A user’s first impression of your site can be a lasting one.

In the first few seconds, a person decides to stick with your content or move on. They will also make decisions about whether your site fits their needs. And that first impression has a lot to do with sex.

Male and female users often look to the web for different experiences. The look of your site can instantly appeal to one of the sexes or both.

But how to you know? There are commonly held ideas about what appeals to each gender; here we will apply those principles, and even stereotypes, to design theory.

Images

The first design element a user sees on site is images – especially images containing people.

What do these people look like?

Demographically, it is likely that the average adult website visitor will look very much like the people on the site. This applies to age, race, size and even gender.

But what if your images aren’t representative of the average adult visitor? Think about a site that contains more images of inanimate objects, landscapes or babies. Those images have certain appeal for the genders as well.

The exception to the image rule is in oversexed images. Imagery that features scantily-clad, attractive women or men will often appeal most to the opposite sex but can be an attention-grabber regardless of gender.

Quick and dirty breakdown

  • Babies, puppies and overall cuteness – Feminine
  • Sports and action – Masculine
  • Flowery landscapes and trees – Feminine
  • Rugged landscapes and terrain – Masculine
  • Food – Feminine
  • Clothing and shoes – Feminine
  • Gadgets and electronics – Masculine

Fonts

Type selections can imply masculinity or femininity.

The most important considerations when it comes to gender are slant, stroke and details.

Most people quickly associated letters with distinct curves and slant to be feminine, include typefaces from the cursive and script categories. Some might even go the extra step to include italics in the feminine-feeling category.

The stroke of a letter can also imply gender. Thin strokes are often thought to be lighter and more feminine than bolder letterforms. Using this technique, a designer candevelop masculine and feminine styles using a single font family by using different parts of a font family.

Finally, a designer should really look at the smallest parts of a typeface. Serifs tend to have a masculine edge, particularly those with very square edges. On the flip side, serifs with rounded and curved edges and imply a more feminine display.

This same principle applies to other strokes and ornamentation as well. More frilly lines and tails are more appealing to women, as are bubbly letters. Feminine font styles, especially those seen on sites for weddings, baby items and crafts, tend to rely on heavy ornamentation. Blocky styles and sharp or pointy accents reflect a masculine tone.

Quick and dirty breakdown

  • Old English – Masculine
  • Script – Feminine
  • Cursive – Feminine
  • Slab serif – Masculine
  • Hard-edges serifs – Masculine
  • Curved-edge serifs – Feminine
  • Tall thin, condensed styles – Masculine
  • Thick strokes – Masculine
  • Thin strokes – Feminine

    A designer will also want think about what the words say. Does the message match the presentation?

    Look at the images above – there are obvious choices for the presentation of the words feminine and masculine.

    Colors

    You could write a book about masculine versus feminine color associations. Most people start with the common blue for boys and pink for girls. But color associations can be some much more complicated than that.

    Color perception can change based on gender and culture.

    So how do you know where to start?

    Think about saturation.

    The darkest colors that have the deepest hues, exude the most masculine undertones – think blacks, navy, dark greens or reds, purples or oranges. If white type will show easily on a background of the color, it likely has a masculine tone.

    Pastels are generally considered more feminine. So are any other colors with more muted tones – pinks, yellows and greens and blues all fall into this category.

    You can learn even more about color perception differences between the genders from a study by Joe Hallock on color perceptions around the world. In those findings the most preferred colors among men are blue, green and red; brown and purple were the least liked. The top three colors for women were blue, purple and green; orange and brown were the least liked. One of the top findings was the use of purple and how it ranked highly among women and not at all for men. Using colors that appeal to a specific gender can sway the tone of a design.

    Neutral tones – beiges, pale yellows and greens or blues – are just that neutral and have very little gender bias. These colors will take on the tone of the rest of the design.

    Quick and dirty breakdown

    • Dark, saturated colors – Masculine
    • Pastels – Feminine
    • Blue – Masculine
    • Pink – Feminine
    • Purple – Feminine

    Shapes

    Hard corners and edges are representative of shapes that have more appeal for men – think squares, triangles and trapezoids. Ninety-degree angles are also a popular technique or visual cue.

    Shapes with quite the opposite look appeal to women. Think about curves and delicate detailing – circles, wavy lines and soft repeating patterns.

    The styles of shapes that tend to include more dimension have a feminine appeal, whereas flat, raw forms are more masculine. Strong lines and dark color blocks can also indicate a masculine tone, whereas thin lines (very much as in letterforms) and light strokes indicate a more female look.

    Quick and dirty breakdown

    • Hard corners and edges – Masculine
    • Curves – Feminine
    • Squares, triangles – Masculine
    • Circles and hearts – Feminine

    Conclusion

    Now before you get upset that there are exceptions… of course there are! (And meanings can change depending on how you mix and match concepts.)

    The use of generalizations when it comes to masculine versus feminine design is to get you thinking about audience. Who is your target audience and what type of visual approach will appeal to them? Understanding gender preconceptions and predispositions is just a starting place, not a set of hard and fast rules. Use this set of ideas to determine if the look of your site design fits the group of people you want to get use from it.