When designing for the web, you have to keep one thing in mind at all times: readability. It doesn’t matter how great the design is, how gorgeous your layout is, or how genius your use of color. If people can’t read the words on the screen (and this is assuming there are words on the screen, of course), the website cannot serve its function. Three of the most important elements of readability for text are kerning, tracking, and leading, though many people either get them confused or simply don’t understand how to use them effectively. We intend to fix that today.
Kerning, Tracking, and Leading
If you boil these three down to the absolute fundamentals, you’re looking at the spacing between characters on both the X and Y axes. Digging in, you’ll see there’s more to it than that, but in essence, you’re looking at the relationship between text characters. It’s important to understand the relationship between these three attributes because good design and readability depend on your using them to the best of your ability.
And that comes with time and practice. But once you start paying attention to them, you’ll notice how kerning, tracking, and leading are used both effectively and poorly on everything you read and see on a daily basis. Let’s dig in.
Adjusting Kerning, Leading, and Tracking (and More!)
Actually, before we dig in, let’s go over how you change and adjust these settings. While most word processing programs have options for adjusting them, most people won’t ever need to when writing copy or typical text. It’s when you’re designing text that it becomes more of an issue, so programs like Photoshop, Illustrator, etc. will have the options you need most.
In the Adobe products, you just have to open up the Text Layer Character Panel, and you have everything you need. The V/A is kerning, the VA in a box is tracking, and the underlined, vertical A’s are Leading. You can also adjust strikethrough, weight, size, super/subscript, and so much more in this panel. It’s worth getting used to keeping this open.
Just place your cursor where you need to adjust the spacing and go.
What is Kerning?
Let’s begin with kerning. Kerning is the simplest of the three, really. It’s the space between two side-by-side characters. In a word, you can have variable kerning because the space between the first two letters may be different than between the last two (and so on).
In monospaced fonts, each character takes up exactly the same amount of horizontal space with no overlap. The A is the same width as the B as the J as the K. Adjusting the kerning between these letters tends to be easier than variable spaced fonts, where the letters might overlap as well as print at different widths.
In the example above, we have three lines that were copy and pasted using the monospace font Courier New. The top row’s kerning is set at 0, which is the default and uses whatever spacing the font designer chose. The second row is set equally between letters (and spaces) at 200. As you can see, the spaces are uniform between characters across the line. Finally, the third line was kerned at random with both positive and negative spacing within each individual word. As you can see, each character can have different kerning on each side.
What is Tracking?
Tracking is similar to kerning, but it’s not kerning. Where kerning is the space between two individual characters, tracking is the uniform space between each individual word or line. Instead of worrying about how things are put together on a letter-by-letter basis as with kerning, you make sure the entire line is uniformly spaced. Looking back at the earlier example image, the second line could have been done in a much easier way.
What I did for the kerning was to place my cursor between each individual character and adjust to 200. I essentially tracked the whole line. Which is what you should do. Simply highlight what you need to track and adjust it in the Character Panel.
Be aware, however, that some fonts and scripts may become unreadable as the tracking is adjusted.
Handwriting fonts and cursive typefaces are set with specific kerning, and if you adjust the tracking, you will get gaps in an otherwise unbroken line. Or going the other direction to compress the lines, you might simply make the script unreadable.
What is Leading?
With Leading, you’re no longer dealing with spacing between characters. Leading is the space between lines.
Effectively making use of leading lets you effectively make use of whitespace in your designs. Cramped lines — even with correct and well-done kerning/tracking — can make a miserable experience for readers.
In some places, you might see leading called line height, but they’re roughly the same thing. One good rule of thumb is to make sure that you leave at least a little space above and below your characters. As you can see in the top example, a 40px font has a 48px line height. That means that no matter what, there will be spacing between the letters. If you set that at or lower than the font size, you will get character overlap.
Additionally, this is the height of the line that the characters sit on. This is not the height of the character. Just as kerning and tracking don’t make the characters fatter or thinner, tracking doesn’t make them shorter or taller. It is simply the space around them.
As you can see, however, the options under the kerning/tracking in the Photoshop Character Panel adjust the width/height of characters independently of kerning, tracking, and leading.
Photoshop/Illustrator Keyboard Shortcuts
The only downfall of the Character Panel is that it gets to be pretty annoying when you’re needing fine adjustment. Thankfully, there are keyboard shortcuts that make kerning, tracking, and leading an absolute breeze to use.
These shortcuts are for the Adobe Creative Cloud suite, so they might be different in Gimp or Paint.NET or another program.
Kerning – With the cursor between two characters, hold ALT (or Option on Mac) and use the left/right arrows to adjust the kerning
Tracking – With the word/line highlighted, hold ALT (or Option on Mac) and use the right/left arrows to adjust the tracking of the highlighted text
Leading – Highlight the lines you want to adjust, hold ALT (or Option on Mac) and use the up/down arrows to adjust the space between lines
While you can place your cursor or highlight the text and type values into the Character Panel, the keyboard shortcuts make the whole process much less tedious and time-consuming. Plus, you get more granular control, so you can make better designs that way, too.
(As an aside, if you aren’t using Photoshop/Illustrator/Premier, etc. keyboard shortcuts regularly, we highly recommend learning, as it makes your workflow much smoother, more enjoyable, and more productive, too.)
Kerning, tracking, and leading are fundamentals of readable text in web design (and design in general). Learning the difference and how to use each of them effectively will make you a much better designer. It may seem a little odd that something as simple as the spacing between letters and lines could have such a large impact, but once you deal with it for even just a little while, you will never look at websites, advertisements, logos, or billboards the same way again.
VR has been notoriously difficult to advertise on regular video, but this playful and inspired spot from Samsung found a way in—via a flightless bird who learns to virtually soar. A wonderful idea brought to life with exquisite CGI.
Inspiration can disappear when you need it most. In a perfect world, we would all just wait until inspiration strikes again. Sadly, the world rarely works that way. Most of us need to deal with clients and deadlines on a weekly basis.
Like other writers and designers, I have spent long periods of time staring at a computer screen, waiting for something to happen. This frequently occurs when I have not had a good night’s sleep or when I have not done enough research on a topic. To avoid writer’s block, I do my utmost to stay up with the latest news and events. I also research every subject thoroughly before attempting to write an article.
Similar techniques can be used by designers. I believe that like writing, the hardest part of design is sometimes the idea, not the implementation.
Truth be told, I am a terrible designer. Beyond making basic edits to images and creating simple logos, I am fairly useless. The famous art quote “I don’t know anything about art, but I know what I like” was written specifically about me. Once I see a design, I know if I like it or not; however explaining to a designer what kind of design I need for a project has proved difficult in the past.
Over time, I learned how to find inspiration for web designs. Just like preparing an article, the key is to do your homework beforehand so that you know what you want and what you do not.
In this article, I would like to share with you some of the tips and tricks I have learned over the years that have helped me form a concept. I hope these tips prove useful to designers and non-designers alike
The Purpose of the Design
Every website design needs to have a purpose. You need to look at what your visitors need and then build the design around those requirements.
Practicality and usability should have a high priority. I have seen many corporate websites that use flashy banners and overcomplicated menu systems. While the designs looked good, they made it difficult to navigate the website. A classic case of form over function.
Bloggers frequently make mistakes with their designs too, such as adding too many advertising banners and images. These images distract the reader from the content area and increase your page loading time. It is also common for blog designs to lack important features such as a search box, archives links, and subscription links.
A practical way of reviewing what functionality your website design needs is to examine the design of websites within your niche. Break down what each design offers and what it does not. This will help you understand what works, and perhaps more important, what does not.
The Microsoft Blog has a clean practical design.
A great example of a good blog design is the official Microsoft blog. It has a clean and minimal design that is easy to read and easy to navigate. The central column displays the blog name and permalinks at the top; with posts underneath displaying large featured images.
The sidebar is a great example of what a blog sidebar should contain. It displays a search bar at the top, followed by a Twitter link, RSS subscription links, tag archives, links to other Microsoft blogs and tech blogs, and date archive links. All of this helps visitors find the information they want. There is no unnecessary widgets or banners.
When you are thinking about the structure of your website design, think about what is required, and what is not. A professional design is important; but the design still needs to be functional.
Choose Your Color Scheme
Colors play a big part on how a website is received by visitors. It is therefore important to think about color schemes when you are thinking about your logo and website design.
He noted that men and women prefer different colors. While blue is the favorite gender of both sexes, there was some variation in other colors. For example, with 23% of women listing purple as their favorite color, it is second in the popularity stakes after blue. In contrast, purple did not even make it into the favorite color list for men. In fact, in a questionnaire about their least favorite color, 22% of men chose purple. This illustrates that one color can attract one gender, but put off another.
Other colors are best avoided altogether. Brown and orange, for example, topped the least favorite color list for both men and women.
It has been shown that color schemes can affect the conversion rates of your products and services. In a case study on Performable, they changed the green action button to red. You may expect a green button to get more conversions as it usually signifies GO, while red signifies STOP; however that was not the case.
They actually found that the red button improved conversions by 21%. They believe this happened because the button color changed, but the main color scheme did not. This allowed the red button to stand out more than the green button that blended into the matching background colors.
The green and red button test illustrated how colors can influence reader habits.
I do not profess to know a lot about the psychology of colors myself; though it is clear that the color of your website can dictate how visitors perceive you and your company. It can also influence conversion rates. It is therefore in your interests to understand what the colors of a particular color pallete signify.
Find Design Inspiration
Looking at great designs can give you inspiration for your own project. You can find design inspiration in every day items such as magazines, business cards, album covers, book covers, and more.
If you are still struggling to find your groove, take a trip to your local art gallery or museum. The quiet nature of museums and galleries can help you block out the noise of every day life and focus on the art itself. Just sit back and be inspired
I was lucky enough to visit the Gabriel Dubois Art Museum in Alta Gracia, Argentina. Gabriel Dubois’s assistant still worked there. He is a world class sculptor and a man who was clearly has a passion for his work. It was truly inspiring.
Design blogs regularly publish beautiful collections of website designs and logos. These can help you understand current trends and let you see what other website owners and designers are doing.
Below is a small collection of design blogs that I recommend checking out.
Design galleries are also a great place to view beautiful website designs. You can use the galleries listed below to view thousands of professional website designs. They are sure to give you ideas about your own project.
When you work online, you cannot afford to wait until inspiration comes to you. You need to be proactive.
Review what is important to your website’s functionality and throw away anything that is not important. You can then look at examples of website designs to help give you ideas on what you can do with your own design.
One of the biggest obstacles to using all of the tips and information above is the simple fact that finding great images (especially ones that you are allowed to use) is difficult and time consuming.
The links below should provide a more exhaustive (but still focused) range for your search. And as much as I’d like to take credit for these little lists,
Photo blogs who publish high quality images that are not on stock photo websites are a great way to lend your site/content some uniqueness and originality. Just be sure to take note of their licensing/accreditation policies.
If on the other hand, you are willing to search through the often sea of bad images on royalty free stock photo websites in order to find the good stuff, then this list will give you plenty to sift through.
Finally, if you either don’t have the time/energy/desire to get this aspect of your website just right, it may be beneficial to simply hire a professional.
There are a lot of potential benefits to this approach. For one, professional will have their own resources for acquiring or creating images. Such as a camera or access to high quality graphics and images like the ones linked to above.
Additionally, they will most likely (if they’re any good) be trained in using and recognizing the tips and theories I mentioned earlier. Which will make implementation much easier and faster for them since they’re using skills and knowledge they’re well acquainted with.
Many digital marketers believe that their brand provides a positive user experience. However, in many cases, the consumer feels differently. This disconnect can damage brand reputations and hinder the success of marketing efforts.
We now live in a customer-first world. Consumers today have their choice of countless companies within nearly every conceivable niche, and it’s up to the organizations to demonstrate why they should gain more business over their competitors. Staying ahead of digital marketing trends and adapting strategies accordingly are essential to success.
The brands that succeed are the ones that build an online experience tailored to the consumer, meeting their needs every step of the way. Sixty-one percent of customers report that they would not return to a brand’s mobile site after a negative experience, and 40 percent say they would go to a competitor’s site, according to Google.
The need to have an intimate familiarity with customers, what they like and the platforms they live on, is critical. As technology and customer expectations mature, brands need to be alert to the rising trends so that they can provide the optimal user experience for consumers. These top five trends below comprise a critical component of the modern digital marketing strategy. Here is what you should know to make it a part of your organization.
Trend 1: Data and personalization
In the increasingly competitive digital ecosystem, brands need to stand out for their customers. These consumers want to know that you care about their individual needs, and thus you need to create a highly personalized experience. Personalized calls to action, for example, convert 42 percent more than ordinary CTAs. Data and personalization will be the cornerstone of marketing moving forward.
Data can help you uncover topics that matter the most to your target audiences. It also allows you to better track how different personas interact with your content, move through your buyer’s journey, and learn what material will be most helpful for them next. Thus, data informs personalization efforts.
Tips for succeeding with data and personalization
Secure data on a broad scale by uncovering trends within your industry and important topics that matter the most to your customers. Rising topics can help you get material published before competitors, building a strong presence in those areas as well.
Look at personal data to see how particular personas use your website.
Look at the content they enter your site on, how they move about the site after reading it, and how they go from visitor to lead to customer. This will help you create personalized experiences, because you will know which content to display next to visitors.
Gather statistics about how data and personalization impact the traffic and revenue of your site.
Examine your site statistics before beginning these campaigns, including bounce rates, traffic rates and revenue rates, and then compare them to the statistics once the efforts have been enacted. Successes will help you build a case to budget more for data and personalization, driving your site strategy forward.
Trend 2: AI and intelligent agents
The demands of technology and customers are quickly outpacing the capabilities of human marketers. Although the amount of data is expected to reach 40,000 exabytes by 2020 (up from just 130 in 2005), the human brain is only capable of holding about 1 million gigabytes, according to Northwestern University professor Paul Reber. The technology available today can collect information about user behavior and help marketers better understand personas, points in the buyer’s journey and what that particular customer likely wants to read next.
The key to using that information, however, will be artificial intelligence. AI could double the rate of economic growth by 2035, according the Accenture.
AI will never replace quality marketers, because it cannot replace human creativity. What it can do, however, is help optimize content throughout the creation process, make it easier for brands to select topics and assist with the creation of digital strategies. It will allow for the automation of all the steps that can be completed simply by analyzing data and spitting back answers, freeing marketers to focus on how to best utilize this information.
What’s interesting is how digital marketers view and implement AI. There is a clear disconnect between importance and adoption, and brands must come to grips with implementation of AI in 2018.
Tips for using AI for your brand
Find areas in your marketing strategy where AI can help, such as the optimization of content or triggering email campaigns. This means taking a closer look at steps that can be automated.
Avoid excessively using AI to the point where customers are turned off or feel uneasy interacting with the brand.
Incorporate AI into the broader strategy. The same way marketers in different departments, such as PPC and SEO, need to learn to work together, brands need to make sure their AI technology seamlessly integrates with the rest of the team.
Have a defined role in the workflow, such as uncovering popular topics and guiding them through the optimization process, to ensure that everything runs smoothly.
Trend 3: Mobile and connected devices — the Internet of Things
We already know that mobile has begun to dominate search: The number of searches performed on mobile devices in the US, and several other countries, outpaced desktop back in 2015. Google has also announced an imminent mobile-first algorithm that we should see by 2018. Optimizing content for users should be second nature for website owners now.
Moving forward, we also need to consider the rise of alternate mobile devices, such as fitness trackers and smart watches, as well as the growing importance of voice search, both with personal assistant devices and on these mobile devices.
Customers use this technology to gain rapid answers to their questions, often while on the go. Brands that want to thrive need to make sure that they have prepared their content and digital strategies for these trends as well.
Tips for succeeding with mobile and connected devices
Optimize for more verticals than before. Technologies such as personal assistant devices, often use alternate search verticals to find the information for their users. As an example, Kayak.com is used by some devices to pull flight and hotel information, or Yelp supplies information on local businesses.
Use schema and high-quality content to move into top spaces whenever possible. With the smaller screens on mobile devices, and even fewer search results given on many non-smartphone devices, brands need to prioritize gaining access to the top spots on the SERP and earning Quick Answers whenever possible.
Monitor how customers interact with your content. When you do earn top slots, see how it impacts your mobile traffic and conversion rates. This will offer key insights into how customers interact with your content and help you improve your strategy.
Trend 4: Content and SEO convergence
SEO and content cannot be regarded separately. All content developed needs to be optimized to boost its rankings on the SERP and to ensure its relevance, which means that content and SEO teams need to work together from the beginning.
Fortunately, most companies seem understand this need. A survey completed by my company, BrightEdge, found that that 97 percent of companies view these two functions as more integrated or converging into a single function. There are still ways that companies can improve their integration.
Tips for succeeding with SEO and content convergence
Remember that customers recall experiences more than text. Use SEO insights, such as trending topics and keywords, to find topics. Then create outstanding content for digital experiences that align well with customer needs.
Do customer analysis. Look at how customers interact with your material, including what devices they use to read your material, customer impressions of your brand and what customers want to see from you.
Set realistic goals for your content, and regularly measure how well your efforts align with these benchmarks. Goals might describe traffic rates, rankings, conversions or revenue.
Trend 5: Native advertising growth
Native advertising will increase exponentially over the next few years. An estimated $7.9 billion was spent on this style of advertising in 2015, but that number is projected to reach an incredible $21 billion by just 2018. Mobile native ads are also expected to reach 63 percent of the mobile display ad revenue by 2020.
Native advertising has taken off because of its ability to fit more smoothly into the user experience. Customers have turned away from disruptive advertising practices. They do not respond to pop-ups or other ads that hinder their user experience. They want to see promotions that relate to them and their needs and experiences.
Native ads, which focus on creating ad copy that is relevant and natural for customers reading a particular web page, create positive outcomes both for the host websites and the company formulating the promotion. This form of advertising focuses on creating ads that align with the content that already appears on the website, thus making it more appealing to customers who had arrived on the page organically.
Tips for succeeding with native advertising
Research the audience and the target site’s content. The more familiar you are with these criteria, the easier it will be to select advertising platforms that align best with your target audience while also making it easier to create content that fits well with those visiting the host website.
Create content that will add something for the reader. To attract readers and make a strong impression, you want to focus on creating content that creates a positive experience for them. Just like your search optimization strategy, your native ad strategy should include providing value for those interacting with the material.
Test what advertising content works best where. Unlike using PPC advertising on Google, for native advertising, you have a better ability to target particular audiences that fit particular personas. Track not only what customers respond best to your content, but also the platforms where you find them and how well the traffic on your advertising content ends up becoming leads and then customers on your main site.
Digital marketing continues to change rapidly as technology and customer expectations evolve and mature. Brands that want to not only keep up with the curve, but thrive in this environment, need to capitalize on these emerging trends. These five that I have identified I believe will be the most significant moving forward through the rest of 2017 and into 2018.
You probably know this feeling…you sit down, ready to start designing a logo for your client and…nothing. Zero. Zilch. Nada. The logo design inspiration fountain runneth dry.If that sounds like you (sometimes), you’re definitely not alone. It’s something all creatives struggle with, which is why we have terms like writer’s block and designer’s block.And if you are hit with designer’s block, sitting there stewing about it is rarely the best way to approach the situation. So to that end, let’s go through some tips for where to get logo design inspiration when you need help. I’ll split the list into two parts:
A list of websites where you can get design inspiration
Some non-website tips to help get the creative juices flowing
What’s The Line Between Inspiration and Plagiarism?
I want to lead with this because it’s a hot debate whenever the topic of inspiration comes up. My take is this:
If you have to ask the question, you’re probably leaning towards plagiarism.
Inspiration should be about using an existing idea to inspire a new idea. It’s not rote copying.
While not all of my tips involve looking at other people’s work, I think it’s important to consider because you always want to stay respectful of the work and creativity of others, even if you draw on it for inspiration.
The Big Tip: Logo Design Inspiration Websites
The Internet has left us spoiled for choice when it comes to logo design inspiration. Beyond the ability to instantly pull up any brand’s logo from pretty much any point in history, there are whole websites dedicated to providing you with an easily filterable gallery of logo inspiration.
Below, I’ll take you through some of the best options when it comes to inspiration sites.
Behance and Dribbble
I lumped these two together because I’m guessing you’re already familiar with them if you’re a graphic designer.
On the off chance that you’re not, both Behance and Dribbble are design portfolio sites. Or, as Dribbble puts it, “show and tell for designers”.
While it’s not all logos, you can find plenty of logo inspiration by simply searching for something like “logo”.
Rather than opting for any type of filter, Logospire is one long infinite scroll of logo design inspiration. You just keep scrolling. And scrolling. And scrolling. Until you find one that catches your eye.
The sheer volume of logos flashing by is a good way to break free of a design funk.
Logopond is the opposite of Logospire. Instead of one long feed, you can search for logos by both title and tag. Then, you can further refine your queries by categories like:
WIP (work in progress)
If you want inspiration on a specific topic, it’s a good option for niching down your inspiration sources.
LogoLounge is another inspiration site that focuses on making designs searchable. Currently, LogoLounge offers up more than 260,000 designs, which should give you ample opportunity to strike inspiration.
To browse all those logos, you can search for keywords and then sort by chronological order.
The only downside? LogoLounge is not free. If you want access to those 260,000 searchable logos, you’ll need to shell out $100 per year.
If you’re not familiar with Reddit, it’s basically a collection of different topic boards called “Subreddits”. These subreddits cover pretty much every topic in existence. Including…
You can find subreddits for both pure design inspiration, as well as for design critiques that might spark something creative in you. It pays to search around, but some good starter subreddits are:
If the websites alone aren’t lighting a creative fire for you, here are some other ideas to help get the creative juices running.
Brainstorm With a Mind Map
Sometimes it pays to go at things conceptually. Brainstorm ideas, concepts, and aesthetics that apply to the logo. Then use mind mapping to connect associations and find patterns.
If you’re not familiar with the concept of mind mapping as it applies to design, The Graphic Design School put together a great post with some examples of how mind mapping can help spur creativity when it comes to graphic design.
To actually get your thoughts down, you can either use pen and paper or go high tech with a tool like MindMeister.
Doodle it Out
It’s easy to become too focused on creating something “productive”. Sometimes, it pays to take a step back and just let your mind take your design wherever it wants to.
Imagine you’re back in your middle school days just doodling away on your notebook. Even if you don’t find sudden inspiration in the doodles, you’ll still succeed at clearing your mind, which is a win all by itself.
Go For a Walk
I’ve met plenty of designers who swear their best source of inspiration is stepping away from the screen and going for a walk outside, whether that means nature or the city streets. Not only is it another way to take your mind off the issue, but it also opens you up to all sorts of inspiring sights and sounds.
Additionally, a Stanford study found that a “person’s creative output increased by an average of 60 percent when walking.” So walking is actually scientifically proven to make you more creative!
Look to the Past
If your client is an established entity, they may have a back catalog of logos that you can pull inspiration from.
Can you take one of their original concepts and pull it into the modern world? Or maybe an element in their old designs kicks you into gear.
Live to Fight Another Day
If none of the above is working for you – you may just need to completely take a step back and return another day.
Sometimes it’s just not the right time for creative work – and when that happens, there’s no use banging your head against the wall (unless you have an unavoidable deadline, of course).
The array of logo design inspiration websites that have popped up make it easy to quickly draw upon hundreds of thousands of logo examples. But they’re not always an instant source of creative eureka.
Sometimes, it pays to step back and let your mind wander by mind mapping, doodling, going for a walk, or anything else that helps jog your creativity loose.
But as we as know – this is a fairly personal thing. So I’d love to hear from you all. Where do you look for logo design inspiration?