How to Effectively Add Texture to Your Website

 | 
By Sara Stuart

If you take a look around the web, you might have noticed a trend for flat design. For most designers, myself included, this simple aesthetic is a dream come true. We’re taught from the beginning that “less is more” and until now, it seemed impossible to convince clients that this mantra holds a lot of truth to it. Now, the days of heavy gradients and texture usage are behind us and it’s a glorious time to be a minimalist. Don’t get me wrong, I’m a huge fan of texture, and I still believe there’s a place for it, but too much texture can cause confusion and leave a website feeling tacky. 

So how can we make minimal design and texture coexist? Start by taking a good, hard look at your branding visuals and see where adding texture makes sense. Today I’d like to show you how.

How to effectively add texture to your website

First, let’s discuss what texture really is and how it’s different from a pattern.

Pattern vs. Texture

A pattern is a small, image-based element that is repeatable on the x and y axis (source). In other words, it makes use of symmetry by duplicating a simple image and arranging it in a predictable order to create a seamless layout. Thanks to programs like Illustrator, it’s fairly easy to create pattern designs that are repeatable, or tileable. Here’s one I’ve made for my social media outlets that highlights my love for cherry Pop-Tarts:

Pop-tart pattern

Textures are bigger, more complex files that refer to tactiles or surfaces. Some textures can be seen as patterns if they’re tileable, but not all have to be. They generally come in two types: visual and actual.

  • Visual Texture is art that imitates actual texture using various elements like lines, shading, and color. 
wood_texture.png
  • Actual Texture is exactly as the name signifies. It’s the physical rendering of real texture. Some awesome effects can be achieved by manipulating a photo or scanning in the textured surface and digitally modifying it. For better results, set your resolution to at least 300 dpi and play around with a variety of files.
Grunge Texture

If used properly, textures can effectively improve a layout by adding contrast, depth, and balance to the design which creates visual interest and weight. Some textures are so lifelike that they appeal to a viewer’s sense of sight and touch. Due to these qualities, whenever we use textures, it automatically draws attention to itself and the area from where it’s applied. 

Why is Texture Important?

Flat design is timeless, clean, and functional but it can also seem artificial and bland. For example, think of what a single piece of white paper looks like. It’s not just a flat, white rectangle. There’s a subtle texture and gradient to it that indicates where the light source is from and what the paper’s surface must feel like. When you introduce a light texture to flat design, the result is interesting and it feels authentic. This is why I think texture is important. It gives your website character and allows your audience to interact with the visuals of your brand.


11 Classy Ways to Minimally Add Texture


Minimalism is the process of breaking something down into its essential elements to achieve functional design (source). With that said, one of the worst things you can ask a designer to do to make a website “pop” is by adding too much information or by including a whole bunch of design elements that won’t make sense for your brand. To keep things classy and minimal, consider a few of these ideas to add texture to your website:

1. Social Media Icons: Spice up the same social media icons everyone uses by creating a customized set that matches the tone and theme of your website.

2. Packaging and Business Stationery: Figure out how you’d like to distinguish your printed work. Texture can be applied to the backs of business cards, letterhead, or even an iphone case. You could also appeal to your client’s sense of touch by having your promotional materials printed on something untraditional, like kraft paper. In addition, think of your packaging accessories. There are plenty of ways to sneak in some texture by wrapping your thank you cards in twine or ribbon for example.

From Studio JQ: https://www.behance.net/gallery/23979655/Everybody-Loves-Fish-Chips-Branding

From Studio JQ: https://www.behance.net/gallery/23979655/Everybody-Loves-Fish-Chips-Branding

3. Photography: With flat design on the rise, large photographs have become a favorite for homepages as well. Take it one step further and include a recurring texture in the background while photographing spaces, products, and props. These can also be made into banners and backgrounds for promotional posts on social media.

Photo from Monte Ré: http://www.montere.it/

Photo from Monte Ré: http://www.montere.it/

4. Call to Action Buttons: Guide your audience to the most important parts of your website by applying a texture to your call to action buttons. This ensures that they don’t get overlooked and entices your viewers to see what you want them to see.

5. Titles / Headings: Adding a small amount of texture to your titles or headings can enhance the information hierarchy of your website and keep everything organized. Just be mindful of font legibility. 

Layout from Degordian Academy: http://academy.degordian.com/

Layout from Degordian Academy: http://academy.degordian.com/

6. Blog Post Images: Promote your latest blog posts with textured images that catch the eye and make the titles easy to read.

7. Header and Footer: Use your header and footer to your advantage by sneaking in some texture. 

Header from Olly Sorsby: http://ollysorsby.co.uk/work/

Header from Olly Sorsby: http://ollysorsby.co.uk/work/

8. Dividers: Dividers separate content into logical divisions and prevent confusion. To make them stand out a little more, a subtle texture can also be applied.

9. Logo: A textured logo can be pretty effective against a clean, flat background. However, if your background is textured, consider the opposite effect and keep the logo just as it is.

10. Email Accessories: This can apply to the backgrounds of newsletter forms, images & banners in email newsletters, and email signature tags.

11. Website Icons / Illustrations: Liven up the information on your website by adding a texture to icons and/or illustrations.

A few examples of illustrations with subtle texture. Found on the Google m usic   homepage: https://play.google.com/music/listen#/now

A few examples of illustrations with subtle texture. Found on the Google music homepage: https://play.google.com/music/listen#/now

Another example from Olly Sorsby: http://ollysorsby.co.uk/

Another example from Olly Sorsby: http://ollysorsby.co.uk/

Bonus:

Background Images: This is an option that I don’t normally recommend due to the fact that it looks dated and that there are very few website designs that successfully pull off a textured background. However, if you do this, my suggestion is to choose something ultra subtle so that it’s not too distracting and overloads your viewers with various visuals.


Texture Best Practices


The key to using texture lies within these guidelines:

  • To reiterate, use it minimally. Think of any type of design element as an additive rather than a necessity. When texture is used heavily, it can result in an overwhelming experience for your viewers and leave them with the impression that your website is messy and untrustworthy.
  • Make sure it serves a purpose and weigh out the pros and cons. If it serves no purpose and highlights the wrong information, say “sayonara” to prevent confusion and cause distraction. Texture should only be used to keep websites clean, organized, and pleasing to the eye. The goal is to highlight important information, not hide it.
  • Think of the website design. Is the right content being highlighted? Are you using too many textures? Is that texture hiding anything? Consider these questions while looking at your website design. There should be a harmony that flows throughout your layout. So, “if it goes together, put it together.”
  • Keep it consistent amongst all of your other branding materials. For example, your business stationery, social media and email newsletter visuals, logo style, etc. should all resemble each other no matter what.
  • Create an experience. Envision your brand and choose textures that help communicate your theme and overall tone. Keep it subtle and don’t get carried away with really bold elements the shift the focus off of your most important content. Remember the type of audience you’d like to attract and how you want them to feel about you. If you can use texture to achieve this in any way, go for it.

I strive to create timeless and functional pieces for my clients that are representational to their brand and intended audience. It’s important to note that texture is not necessarily needed for every website. If it doesn’t suit your theme or overall design and feels like a random or forced element, then it probably isn’t right for you. Whether you’re having a website designed for you or are going at it yourself, try a texture or two and see where it leads. 

Are you a fan of texture? How do you feel about it’s place in web design?

My Simple Method for Naming A Business

 | 
By Sara Stuart

When you first start a business, the struggle to come up with the perfect name that’s agreeable to you and your audience is certainly real. This name will mark the beginning of your company's culture, your brand, and it will follow you into the foreseeable future, so no pressure right? Believe me, I've been there and I have put forth my time in research, brainstorming sessions, list making, and multiple elimination processes, so I can tell you that it’s no easy feat.

So if you feel overwhelmed with research or lost with no clue on where to begin, here’s my simple method for naming a business.

My simple method for naming a business

 

1. Get to Know Yourself and Your Business

In order to come up with a great name that communicates who you are and what you do as a business, you need to dig deep and brainstorm some initial keywords. To begin, ask yourself these questions:

  1. What do you want to communicate to your potential customers?
  2. What are some of the main keywords in your industry? (Think about what you do and some of the services you offer.)
  3. What makes you valuable and different from your competitors?
  4. Who is your ideal audience? (Be as specific as possible. Include age range, gender, salary range, industry, etc.)
  5. What are some of your business’s main personality traits? (Examples: social, easygoing, smart, multifaceted, loyal, etc.)
  6. What are 4 descriptive words that you want others to associate with your brand? (Examples: cheerful, classic, friendly, adorable, witty, modern, timeless, industrious, sincere, energetic, etc.)

 

2. Brainstorm Your Root Words

Take a look at your answers to the questions above and develop a list of words. This initial list will be considered your root words and are determined by two factors: literal and figurative

Literal: Literal words are the basic, straight-forward terms that are associated with your industry, like products and services. So if I had coffee shop in Seattle, mine would most likely be: bistro, cafe, coffee, and espresso.

Figurative: The figurative words would stem from the descriptions of the literal. This means that they could be names, objects, phrases, moments, feelings, etc. Anything is possible in this category, as long as it makes sense to your targeted audience. Using the same example above, some of my descriptive words for my coffee shop would be: aquatic, wired, mellow, and zest.

 

My Resources For Root Word Research

  • The Thesaurus: I use a Thesaurus for practically everything and root word research is no exception. This tool is awesome for developing figurative words from literal ones. Don’t forget to check out the synonyms!
  • A Latin Dictionary: Have you ever noticed that most of the spell names from Harry Potter are based from Latin terms? Take a cue from J.K. Rowling and look into an online Latin dictionary.
  • Music Lyrics: Music is a powerful thing. It has a way of making people feel things they wouldn't normally feel through cleverly arranged phrases, descriptive words, and cryptic song titles.
  • Geography: Are there any specific places that you're inspired by, have lived in, or are marketing your business in? If so, try researching some names within that area and see what you find.
  • Historical References: Look up the history of your profession and see if you can uncover any leads. Better yet, look up the history of every root word you like.
  • Personal and Professional Influences: Explore and research your other interests. Whether it’s a specific person or company, philosophy/idea, movement, era, etc., it will give you a fresh perspective.
  • Google & Wikipedia: For definitions or pop culture references on root words, these are two great sources.
  • Glossaries: Hit the books at your local library and browse through the glossary of terms for ideas.
  • Image Searches: Sometimes inspiration can strike just by looking at a bunch of photos relating to your theme or concept. Take a look at Pinterest, Google Images, and stock image sites.

 

Naming Rules of Thumb

  • Make it meaningful and positive. The right name should evoke an idea of what your business stands for and the emotional meaning you'd like to convey. Think of something that conjures up positive memories and images.
  • Keep it simple and as short as possible. If it’s too complicated, no one’s going to understand it except for you. Stay away from using industry terms that only you will know.
  • Stay away from trends. It’s okay to research your competition, but it’s also important to fight the temptation of creating a similar name and fall prey to naming trends. Ask yourself, do you want to fit in or stand out and gain a competitive advantage?
  • Provide a clue to what you do. Consider a tagline to go along with your main business name so your line of work is clear to others. Whether it’s the main name or the tagline, you should include a name that conveys the purpose of your business to others. (ex. Sarasure Design Co.) The more it communicates about your business, the less you'll have to explain.
  • Don't limit yourself. Think about the future and where you'd like your business to be. It’s okay use descriptive words, but don't go too far and box yourself in.
  • Remember your targeted audience. Refer back to your business’s goals and vision and aim at reinforcing those key elements when you think of names. Will your audience understand a name if it’s misspelled or from a foreign origin? Will they be able to pronounce it easily?
  • Research, research, research! This is especially important because it can save you from potential language pitfalls. For example, in 1995 Reebok redirected their targeted audience to women and named one of their shoes “Incubus.” This term has been known to mean “a mythical demon who has intercourse with women in their sleep.” Don't let a similar mistake like this happen to you and your business!
  • Avoid: Annoying, random words with an absence of meaning, awkward puns, and double entendres.
  • Don't get too attached to names. During the brainstorming process, it’s important to be open to new ideas and not to get hung up on certain names in particular. It’s often harder to tell if a name fits your business if you're too attached to it.
  • Make sure the name is available. You can do so through three different steps:
    1. Run a Trademark search.
    2. Secure a .com domain by making sure it’s available through who.is.
    3. Secure your social media profiles (once you've finalized a name).

 

3. Mix & Match Words

Next, take your list of root words and start combining them to form a new list of possible business names. Using my previous example about the coffee shop, here are some possible combinations: The Aquatic Bistro, Mellow Espresso, Zest & Savor Coffee, and The Wired Cafe.

This stage of the process should be fun and unlimiting. Think about each word and rearrange them with words that flow together and make sense for your business’s goals and vision. If you need a reminder of this, reference the answers to the six questions you answered about your business at the first stage.

If you need more ideas on how you can mix and match your root words, The Name Inspector has a fantastic article on 11 different types of names and the pros and cons of each.

 

4. Categorize Your Names

If you've done the second and third stage correctly, you should have a bunch of terms that reflect multiple themes, tones, and feelings. Once you have a wide variety of options, the following step is to organize your findings by separating these into categories. This will result in your third and final list. 

Like the mix and match stage, there is no right or wrong way to organize your list of words. Some could be arranged by key themes, while others could be arranged by name types (outlined by The Name Inspector). Personally, I like to outline by theme. For example, my fictional coffee shop’s would look like this:

5. The Elimination Process

Take a look at your newly organized list of ideas and start highlighting your favorites. Before you show anyone else your top choices, take a minute and ask yourself these questions:

  • Which one fits your company’s description the best?
  • Which one best fits your long and short-term goals?
  • Does it accurately tell your company’s story?
  • Does the imagery associated with the name seem appropriate?
  • Will it attract your ideal audience?
  • Does the URL look weird?

If a name does not pass all of these questions, eliminate your idea right away. Use the names that surpass these questions, and try some of these additional ideas:

  • Ask someone you trust. Start off by asking for a first impression from someone you can count on giving an honest answer. Once they provide you with an opinion, inform them on what your business does and what you're trying to accomplish and ask if that name conveys this message.
  • Take a poll from your ideal audience or a small, select group of friends and family. Look at online discussion groups, forums, or select social media networks. Just don’t include too many people since this tends to hold up the process and will have you rethinking all of your ideas. There’s a reason why the phrase “too many cooks in the kitchen” exists.
  • Say it aloud. Practice saying your name as if you're introducing yourself to a client or contact. Sometimes the sound of a name can feel suggestive or tough to say.
  • See what it will look like on business stationery and signs. Type out your name ideas onto a design template or ask a friend to create a mock-up. Sometimes it’s helpful to have a visual.

Deciding on a business name can be just as trying as coming up with ideas for one. However, once you select one, it’s important to give yourself some time to adjust. You may have second thoughts or feel like you should go back to the drawing board, but you must remember to resist this urge and wait for it to sink in. If you're worried that your name is too unique and varies greatly from your competitor’s, have no fear. I'm sure Google had a similar feeling and look how well that worked out for them.

How did you arrive at your business name? I'd love to hear your story!

How to use Type Legally: Part 2

 | 
By Sara Stuart

On Tuesday I wrote a post on type legality and outlined the major forms of protection and font licenses available for purchase. In this second portion of the series, I’ll touch upon font license types once more, address letterform altering, and provide four ways to keep you honest when using type. 

It’s important to note that I am not a lawyer. This post was written from my own perspective and is a reflection on how I interrupted my research. If you have questions, I recommend contacting the type foundry responsible for the typeface in question or a lawyer for further legal clarifications.

Without further ado, let’s continue!

How to Use Type Legally: Part 2

Which Font License Should I Use?

If you recall, here are the three most common types of font licenses I outlined in my previous post:

  • Desktop Fonts
  • Web Fonts
  • Embedded Fonts

Each of these come with a purchaser’s term of use or end-user license agreement (EULA). This merely states what you can and cannot do with a typeface as soon as you download or purchase the file.

Sometimes designers find themselves in the curious position of being stuck with font licensing decisions. Whether it’s for an unique project they’re working on and they’re not sure if a regular license will cover their assets, or because the scope of the project is so large that just one license won’t cut it, it’s easy to get confused and feel uncertain. 

If you need help determining the type of license you need, my advice is to ask whoever you’re buying a license from. Remember, it all depends on how you plan to use that typeface. If you choose to use it for web and print purposes, you may have to purchase a separate license for each. Some font shops provide discounts on licenses if you buy different types of the same typeface. For example, MyFonts takes 50% off some desktop font licenses when you purchase the webfont. For more information, check out their licensing page.

Keep in mind that a single license purchase only allows you to use fonts in programs one computer at a time. If your client needs access to the source file to alter the font, that client must purchase a license as well.


Altering Letterforms

One thing I consistently see across design forums are questions relating to legally altering letterforms. Whether it’s for design purposes, like logo creations, or creating a new typeface from another type design, you need to make sure it’s allowed in the EULA. It’s safe to say that if it isn’t, again you should ask the designer or type foundry that created the typeface. 

Most people have questions relating to type alterations. As a brand designer, I know I’ve had the same worries when it comes to taking a typeface, converting it into outlines in Illustrator, and altering the points and curves for a project. Could this be illegal? Judging from the Adobe v. Southern Software, Inc. ruling, the design itself may not be protected, but this forum suggests that the outlines and points are. 

“Adobe claims there is some creativity involved in the manipulation and editing of the on-curve and off-curve reference points. Defendants claim there is no protectable creativity contributed by the editor in determining the desired character outline for each font.” 

To quote a line that was borrowed from this lawsuit, contributor, Thomas Phinney, makes a valid point in assuming that outlines fall into copyright protection. Of course, he specifically states that he is not a lawyer, and neither am I. Therefore, it’s important to consult a lawyer on matters such as these since we’re all a bunch of artists trying to make sense of legalese. 

Another example I’ve stumbled across stems from the question of altering type from the public domain by printing the typeface, scanning the design, and then converting the image into outlines through Adobe Illustrator. In this forum, the overall consensus was that it’s unethical and does not constitute as an original piece of artwork protected under copyright. Most importantly, you should know that even if you succeed, this doesn’t guarantee you’ll secure any protections against your modifications because anyone could very well to do the same thing. Again, I recommend consulting a lawyer specializing in Intellectual Property to further clarify.


4 Helpful Tips to Keep You Honest


1. Always Read Through AN EULA

To reiterate, make sure you read through a typographer or type foundry’s EULA before you buy a typeface. I can guarantee there will be differences and the wording will continue to confuse you, but if they allow their fonts to be used within logo developments, they’ll usually say something like this:

“You may use the licensed fonts to create images on any surface.. where the image is a fixed size. You may use the licensed fonts to create EPS files or other scalable drawings provided that such files are only used by the household or company licensing the font.” (Source.)

For those who do not allow their type to be included within logo developments, the terminology will read something like this:

“You may not use the Font Software, or any individual elements thereof, as part of a copyrighted logo, trademark or service mark.” (Source.)

 

2. Beware of “Free” Typefaces

It’s a glorious feeling when you discover a great typeface that’s free and ripe for the picking. However, most of these designs come with a catch: they’re available for personal use. This means that you can only use them for projects that will not profit you in any way. For example, if you were to use free typefaces for your business or for a client, this would be in direct violation of the EULA you automatically agreed to upon downloading. 

Free typefaces also have a reputation for being illegal, pirated copies of the typographer’s original creation. Sometimes you’ll run into these versions and notice a difference in quality. It’s even more evident if you import the downloaded copy in Adobe Illustrator and convert it to outlines. The curves and points of the vector are uneven and just plain sloppy.

My Sources for Free Typefaces

The good news is that there are some really nice, free typefaces available for commercial use. You just have to know where to look. Personally, my go-to sources are Google Fonts and Font Squirrel. Google Fonts give me peace of mind because they’re open source, or free for redistribution and alteration. Font Squirrel calls themselves a “free font utopia” that scours the internet for commercially free-to-use typefaces. (Just remember to read each EULA before altering.)

 

3. DIY Type

Another way to avoid getting into trouble with type usage is to simply create your own. Granted, this process is very complex and time consuming, not to mention could only be a solution for the artistically inclined, but the results are beautiful and unique. Notice the latest trends in design and you will instantly see the rise in script styles that resemble calligraphy. Handmade type is even becoming more and more popular. If you take this route, just be sure to protect your work or at least make sure you’re receiving the correct amount of pay for your time.

 

4. Know Your Font Library

Every so often take a moment and sift through your collection of fonts. First, make sure you have the EULA for each. If you don't, this could be a sign it’s an illegal copy. Resist the temptation and get rid of fonts that could cause damage. A good way to check is to run a Google search on each typeface name to see where each of them originated and make sure you have a legitimate license. This is another tedious process, but it'll save you in the end.

For fonts that came with your computer or software, again, check the EULA for each and make sure they're available for commercial use are free to alter. Adobe fonts are free for commercial use and have a helpful list of font EULAs here. (Source.)


I hope this series was interesting and helped clear up some questions regarding type usage and purchasing. Like I’ve stated before, it’s a hard subject to talk about and it’s often overlooked in design education. Do you have anything else to add? What’s your go-to source for free font?