Logo Design

Your company’s logo is likely the first thing a potential customer notices about your business. We want your logo to be perfect.

Your logo will be representing your company on your website, your storefront, your business cards, billboards, apparel, promotional materials, social media and more. It should make you proud, and it should be developed by professional graphic designers in a creative process with your direct input and feedback.

Learn about the different variations that you might need of your logo.

Logo Design Examples

Graphic Design News

7 Outdated Web Design Trends blog

8 Web Design Trends That Are Outdated in 2020

By Christina Hawkins | May 1, 2020

As with anything, in the past year, web design trends have already changed. As we all keep updating our mobile devices with new technology, so does our idea of what constitutes good aesthetics and user interface. As technology keeps expanding, so does a website’s need to keep improving.

See my blog post about when you know it’s time to update your website.

With each new round of studies that consultants and developers do on how we best experience a website, what was cool and trendy last year is old, outdated, and downright useless this year.

Out with old and on to the new!

So what is the biggest change I’ve seen when it comes to web design these past few months?

These might surprise you!

1. Sliders with meaningless calls to action

Keep it simple and to the point. Folks just don’t watch these anymore. It’s like white noise. Often times they scroll too fast that you miss the message. They can be so bad that only 1% of your visitors are actually clicking on them.

You lose valuable space here if this section keeps rotating. It’s the same issue that I talk about in my eBook, 8 Things You Can Do With Your Website Now To Improve Conversions.

A couple of things wrong with your slider: (1) too much happening and (2) no clear call to actions.

The website below had several images with a lot to say.

slideshow example

Illuminea had the right idea with their video on how sliders are bad for you: https://illuminea.com/sliders-bad-for-website-health/

Need more? Here is a usability study from Yale University. “Using full-width images on the home screen by comments users make such [on the Yale website] as “it makes me feel like Yale doesn’t want me to do my work.”

Nielsen Norman Group found that, even when a user was looking for a specific piece of content, they couldn’t find it because of an auto-forwarding carousel.

2. Big, huge hero images

On the flip side, a hero image is defined as “a large, featured image or series of images prominently displayed on the homepage.” The problem is, like all trends, they tend to take over and be the band-aid. “Well, all I need is a super cool photo and a button.” But there is more to it than that.

I prefer to keep these hero images within the top section of your monitor but not take over the entire screen. Most of my clients even tell me to make these sections smaller. That was a big indicator for me. As designers, we love the imagery but from a user’s perspective, it pushes the important content further down.

Yes, you need a single goal and call to action but most companies are more than a single action. Spotify, Dropbox, Evernote have a single purpose for visitors.. get them to subscribe.

But a home contractor or pipeline company might have 2 – 3 goals for their website. Yes, focus on the primary and that should be represented your hero image but don’t forget the other 45% of traffic that might have a different purpose of being there.

This HR website, kinhr.com,  did it right, keeping the call to actions minimal and in front of you. But they also let users know that there is more below the image by using the arrow.

hero image

3. Obvious Stock Photos

You’ve seen them, right? It’s obvious! Those photos are used everywhere. It could be from iStockphoto or Unstock but they show up everywhere. I am not saying not to use stock photos. Heck! I must download 2-3 per day for my business and my customers.

I am saying to find unique photos and photos that might be more realistic. Even better, try to hire your own photographer for branded images. Below is an example of one of our customers, Howell Services, who was able to get a huge stash of photos that we can use for the blog posts we write and social media.

example of company branded photos

Unstock photos like Unspash.com and DeathToTheStockPhoto.com are becoming overly used now. Don’t get me wrong though. They are great photos and I have a small subscription to one of them. How can you tell they are being overused? For one reason, they are free which lends itself to thousands downloading them and another is that applications are pulling them into their software to use as background images or for easily assessable social media photos.

Here is my list of unstock photo sites.

Then there are the photos that just look, well, out of touch.

If you want a quick laugh see how Vince Vaughn lampooned them.

vince vaughn stock photo example

4. Flat, boring graphics

First, we had Geocities where every color of the rainbow was used. Then, in 2007, we had sites like The Food Network with its big buttons and 3D gradients and shadows.

To counteract this design overload, we progressed to a flat design. Flat design is a feature that was only meant to be used sparingly but somehow it caught on and spread to fill websites. The problem with a flat design is we couldn’t figure out what was a button. It all started to blend together and nothing gave you an indication that something was interactive. Microsoft took this to the extreme with Windows 8’s Metro.

flat design example

Google established what is called ‘material design.’ A concept that incorporates a “three-dimensional environment containing light, material, and cast shadows.” As our technology from mobile devices and touch screens allow for more 3-dimensional interaction with a website, utilizing thickness and shadows allow for better user experience.

Remember that “accessible design allows users of all abilities to navigate, understand, and use your UI (website) successfully.
https://material.google.com/usability/accessibility.html

The Montere.it website uses a combination flat-design but it incorporates cues for the user like hover-effect and shading. This lets the user know that this is an active area and clickable.

flat design

The Bottomline? If you use flat design include some dimension so you don’t make things difficult for your users.

5. Hamburger menus are out

Yes, mobile design is important but please keep your mobile design on a mobile device. Many of us still use a desktop or a laptop to surf the internet. If I can’t find your menu because you hid it behind a hamburger menu, like any mystery navigation, you’ve already frustrated me.

The Nielsen Norman Group goes into much further detail about the effectiveness of hamburger menus. “Navigation on mobile (whether hidden under a menu or partially visible) takes a larger proportion of the screen space than on the desktop, simply because the screen is smaller. Thus, people are more likely to notice it and use it.”

Notice the Cnn.com website’s hamburger menu and the lost ‘Home’ link. CNN navigation is lost here as it confuses users with the ‘Home’ text.

mobile hamburger menu

More: https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/

6. Sidebars

Now, this depends on the topic and the purpose of the page, but I’ve started removing sidebars on certain pages. I switch back and forth between them to watch the interaction. Blog posts tend to have sidebars to help traffic move between different topics. But I will remove sidebars from my specific service pages to focus the user on that topic scrolling down the page to learn more. The top menu and footer have enough distraction to get clients to visit other areas of my website.

Then I have internal links and buttons that might guide my users along a path that I have designated. A sidebar might take them away from that path.

Check out the FoxNews.com website. Talk about overkill. Do you really need the weather on your sidebar? It’s even showing New York weather. I am in Houston! Then they clutter it with 2 sidebars of content. No wonder news sites are struggling. Let’s not even go into the fact that their website is not responsive so the sidebars are not even visible on mobile devices.

sidebars

In contrast, NBC news keeps it fairly simple. The issue though is that their related posts are clickbait.

sidebars

Another reason that sidebars tend to lose their effectiveness is on mobile. Sidebars are moved to the bottom of the screen anyway.

7. Stale typography.

With the growth of Google fonts, your options to utilize better typography has expanded. When I started years ago, you were limited to just a few fonts that you could as the actual text. If you wanted anything other than Arial, Helvetica, and Times New Roman you needed to create the text as an image. This wasn’t good for usability. For example, people with sight disabilities use special readers who cannot read or understand an actual image without an alternate text.

Having these great font options makes it a little more fun and interesting.

Even Suzanne Collins, the author of the Hunger Games, could use some help with a more varied use of typography. But, let’s be honest, there is a lot missing here.

boring website typography

But, be careful of adding too many fonts on your website to the extreme as with this restaurant website.

In addition, you no longer have to rely on images with text because you want to use a specific font. This is good news for accessibility as well as the content. The text below is all text but uses Google fonts as real text.

Here is a great history of typography on the web: https://instapage.com/blog/what-are-google-fonts

bad infinite scrolling example8. Infinite scrolling web pages

Actually, this is one feature I wish would go away. Call me old school but I like to go to a topic by clicking or touching a button or link and having it send me to that page. Scrolling to helpfully find what I need or clicking a menu item that all of a sudden sends me to the bottom of the page is disconcerting and tells me that you are lazy.

For god sake! Create a page for that content!

Another case is websites with infinite scrolling that never let users reach the footer. For example, the Onnit.com website (to left) kept scrolling and loading. I wondered if it would ever end. Talk about not having a purpose or goal.

More information: https://www.webdesignerdepot.com/2015/11/how-infinite-scrolling-breaks-ux/

Design Lessons Learned
A lesson learned from me is to listen to my customers who are website users. I can’t assume that my notion of great design cannot be challenged. yes, I’ve been building websites for 20 years but if I didn’t listen to my customers and, ultimately their customers, I’d still be stuck with animated gifs.

Read More
how to use Canva

How to Manage Social Media Graphics Using Canva

By Christina Hawkins | September 24, 2019

Transcript:

If you’ve ever tried to create a bunch of social media graphics, I can understand how frustrating it can be. I want to show you a better way using Canva.

Hey everybody, it’s Christina Hawkins, and let’s get started. I’m going to walk you through Canva. A little bit about Canva. Canva is a browser-based graphic design tool meant for amateurs, and I think even professionals could use Canva, or do use Canva. They have templates that you can start from, folders, as you can see here, folders where you can break out different assets, logos, photos, the types of graphics, YouTube, art, social media art, blog art. They’ve got some training in here. You could do some for print. But what I like to use it for is sharing my graphics with my team so that they can maintain the consistency of the brand, the style, the look, the content, the photos.

It makes it much easier for myself, as well. I own Photoshop. I have illustrator. I have InDesign. I have all these great graphic design tools, but just to create a bunch of social media art maybe for that month, it’s just easier for me to open up Canva and just go to town. Again, I don’t have to think about it. Part of the problem I have myself is that I overthink things. I start getting too deep into the design and I spend another hour, whereas if I had just come to Canva, changed things up, changed the words and just gotten out of it.

So enough of me jabbering away. Let’s get into it. Let’s go into one of them I just kind of started here. This is a folder possibly for how to a instructions or something. Anyway, it can be meant for your social media posts, so we’ll go into the edit section. Just real quick, let’s go back here real quick and go through this edit. It’s going to open up this specific file and edit it or you can use this template, so it will duplicate this and allow you to work on a new version of this group of images. Say you have 2018, 2019, 2020 and that way you can go through year by year to see all the different graphics. But in this case, we’re just going to edit that file as it is.

Now, you can see a little bit that I’ve done in the past, so you can tell the colors, the logos are there. We’ve got black and white images and then I duplicated it. I threw in different colors and I removed the black and white. Just real quick, you can see how easy it is. I go into adjust and I can change the saturation on these. So you can do the same thing. If you’ve decided, “Well, we kind of want that cool look,” we can change this back out. I can click this, adjust and hit that saturation.

Now, if I were to throw in another image in here, it would maintain that look. If I threw another image, it would be black and white, and you can come over here and you can have all of your logos can be all inside one folder and in this case, you could have your color logo, your black logo, your white logo, your vertical logo, your horizontal logo so that no matter what version of image that you’re creating, you can find one that will fit that image so now you’re not having to hunt around looking for all your brand assets. They can all be in a single place.

You have team templates, so you can create a single template and use this in the future and say, “Hey everybody, these are the team templates. This is the Facebook one, this is the YouTube template everybody uses. Create a new one. Follow along.” You’ve got your uploads, so you can throw in all of your company photos and then you can kind of scroll through and pick out exactly the photo that you need. So really nice, super, super easy to change text. You can move your logos around. You can switch out your logo. You can remove the logo, whichever you want, and you can see here’s a couple of different versions where we just did this one and this one and all we did was change out the photo or the text.

Another thing to consider is again, maintain the brand, is you can set a palette. So if I click on this box here, I can now create different brand colors. If you’ve got different companies that you work for or if you’re a single company, you’ve got different new DBAs or something, you can create these different palette colors. So I know Hal Services has these three colors. I can change this to red or the dark blue and I’m still maintaining the color styles.

One thing you can consider, again, doing all your social media for a whole month or maybe six months worth. When you’ve built that out, you come over here and to use my design and I download them, and by default it will download all of them. If you had to go back and change one, you can just choose one and download that. Lots of different options here. One thing I love about the pro account is you’re able to share your designs. You can set it up and send an email where that person can edit this specific file. You have other options in there to edit, to view. Clients can also see it without having edit capability. You can also create a link and send out the link so that they have an ability to use it as a template. Rather than working on this specific file, they can work on a template and not have to make any changes here. They can work on a new set of images.

I wanted to show you an example that I use it for and that’s for my blogs. You can see that I’ve got several blog post featured images. Now, I use these on my own website. You can see that I’ve got different versions of my logo. I can maintain the look of it by just switching out the photo and changing the text and then I’m done. I can walk away. Text that’s hard to read, I can blur the background image and it makes the text more visible.

So let’s talk about pricing. I have the pro plan, and I know it says this is current, but I just checked. I do have the pro plan. I’m not sure why it’s showing this, but everything I’m showing you, for example, magically resizing your designs, being able to create folders and templates for my team. If you are a freelancer or a solo entrepreneur, this is probably all you might need. I do prefer this ability to share my graphics with a contractor or a team member, so that’s been really important for me. Being able to upload my custom plots for a brand is important. Definitely setting color palettes for my brand and again, I have an agency so that’s really important for me to be able to split those out.

But if you’re serious about being consistent and improving your process for building your social media and your graphics for your company, I recommend the Canva Pro. It makes it a lot easier for your process and new team members, makes things go a little bit faster, and any time that you can improve that process I think is much better for the company and your boss is going to love you for it. All right, enough about that.

So I hope that was helpful. I just want to reiterate what I’m trying to get across. Canva can help you save money, save some time, ensure the brand is consistent. I think also I have Adobe Suite. I have the entire Adobe Suite, Photoshop, illustrator, all of it, InDesign, but I tend to use Canva a lot more often because I’m able to again, pull the assets that I need quickly and I think even more importantly, I can share that with the team, which I talk about earlier.

One thing that’s happened to me in the past is that I’ve given something to a contractor or a team member, they go to lunch, they are gone maybe or they go on vacation. Whatever happens, I’m able to still access that original file. If it was done in Photoshop, it’s still sitting on their desk, unless it’s saved, again, on a cloud like Dropbox or Google Apps and it’s fine. But in this case, if I’m sharing this Canva, I can still access it. I can still see the changes that were made, but if I need to add a capitalization, change a word, fix a spelling, it’s there. It can save time. It can save money, a little bit of frustration and again, maintain the consistency of the brand.

If you have any questions, if you have any comments, please leave them below. If there is a video that you would like me to create to answer any questions that you have, maybe how do I do something, please leave that, as well. I’ll see if I can create a video for you. All right. Thanks so much. Have a great day. Bye!

Read More

Standard Logo Dimensions [List]

By Christina Hawkins | December 13, 2015
**Updated 8/22/2020**

Save on various WordPress Tools! Check out the featured offers on AppSumo.
(Ad)

It’s been over 20 years since I designed my first logo. It’s crazy how every time I create a new profile on a social media platform or control panel or gravatar that I need to go back and create a special logo file that fits the website’s specific dimensions. So I created a list of standard logo dimensions that any company or entrepreneur should have in their shared drive and at the ready to add to their profile.

This is by no means an exhaustive list but it does have the basics for branding.

Logo Rules

  1. Vector Format. Request your logo designer to provide a vector version of your logo. This allows for editing and changes later on. Your printer can make your logo or smaller as needed.
  2. Vector Programs. The master file should be required in a vector program such as Illustrator or Sketch so that you or your designer can scale it up to any size you need.
  3. Long and Wide. You need a horizontal and vertical version of your logo. Consider all of the places your logo will be placed; website, hats, t-shirts, car wraps, business cards, and more and more…
  4. File Size. For online profiles, be sure to keep your logo image size smaller than 200KB, best if it were under 100KB.
  5. White and Black. You need your logo in a black version and white version as well as your full-color version. Your logo should be recognizable on many different backgrounds and formats.

Popular Social Media

Below is a list of standard dimensions based on more popular sizes. Then there are some optional dimensions for other social media or mobile options.

  • Facebook:
    • Profile: 200px x 200px – allow Facebook to crop to 180 x 180 so you have a full border
    • Cover: 1640 x 624px
  • Google+:
    • Profile: 250px x 250px
  • Twitter:
    • Profile: 400px x 400px
    • Cover: 1500 х 1500px
  • YouTube Channel icon:
    • Profile photo (circular): 800 x 800px
    • Thumbnail photo: 1280 x 720px
    • Cover photo: 2560 x 1440px
  • LinkedIn:
    • Profile: 400px x 400px (This should be your photo not your logo)
    • Background Image: 1584px x 396px
  • LinkedIn Company:
    • Profile: 1536px x 768px
  • Instagram:
    • Profile: 110px x 110px
  • Pinterest:
    • Profile: 165px x 165px

Logos for Websites

  • Favicons:
    • 16px x 16px
    • 32px x 32px
    • 48px x 48px
  • Website Horizontal
    • 250px x 150px
    • 350px x 75px
    • 400px x 100px
  • Website Square or Vertical:
    • 160px x 160px
  • Schema Markup
    • 1200 x 728

Logos for Mobile App Icons

  • iPhone 6S, 6+, 7+: 180 px x 180 px
  • iPad: 152 px x 152 px
  • Android: 192 px x 192 px
  • Windows: 62 px x 62 px

Logos for Print

Here are some logo sizes for print:

  • The maximum size that can be screen printed on a T-shirt is usually 14 inches x 15 inches
  • On an 11 oz. mug, the standard print size area is 8.5 inches x 3 inches
  • On an average hat, the logo size is around 3 inches- 3 1/2 inches wide

Some Frequently Asked Questions

    1. How big should my logo be?
      Your logo should be designed using tools that allow you to create vector images. This way your logo is not confined to a specific size.
    2. How much should a custom logo cost?
      It depends on your budget. In my opinion, if you are just starting out, I would not spend more than $1000. Spend your money on the things that are going to generate revenue now. We’ve built websites for customers using a simple font and later they came back for a professional logo design after they had a budget. Remember that even the largest companies in the world started with beginner logos.
    3. What are some affordable design tools?
      We have the Adobe Suite so we use Illustrator. This would be if you are starting your career in graphic design and you plan on creating logos as a career. If it’s your own business and you need something quick without a budget, I would consider Canva which is a free tool. Another tool might be Sketch. You watch my video where I show you how to manage your social media graphics using Canva.
    4. Which files should I request from my designer?
      1. Black version (transparent) as EPS and PNG
      2. White version (transparent) as EPS and PNG
      3. File as EPS
      4. File as JPG
      5. File as PNG (transparent)

More Resources

Videos:
How to Manage Social Media Graphics Using Canva

Need a favicon?

Sizes for ads and icons

Facebook: https://www.facebook.com/PagesSizesDimensions/

Google+: https://support.google.com/plus/answer/1057172?hl=en

LinkedIn:

YouTube: https://support.google.com/youtube/answer/2976309?hl=en

Mobile App Icons

If you have other logo dimensions that you think should be added, leave your idea in the comment section below.

Read More