This is the fun part. It’s like your reward for going through the rigors of figuring out everything discussed in the previous topics. Graphic design should enhance your blog, but not be the star of the show. It should complement your content and help to reinforce your brand message. In this topic, we’ll review some graphic design basics regarding logos, fonts, and colors.
Read the Transcript[Close]
Your logo is the primary visual symbol of your brand, so making sure it’s memorable and follows best design practices is a must. Here are a few simple ways to make sure your logo stands out.
- Research trends (but don’t try to be too trendy). Know what design trends are working, what ones aren’t, and if there are any break out trends that may have some staying power. Brandable and unique is always more important than being trendy.
- Keep it simple. There’s power in simplicity. Think of the Apple logo or the Nike swoosh. It should be unique enough that it couldn’t just apply to any brand, but simple enough that it stands out in people’s minds. Some of the best logos are simply the name of the brand or business, and that’s it. This works really well if your brand is actually you (e.g. you are a solo consultant). Font plays a pivotal role in this case. Simplicity also makes printing (on shirts and other items) easier and more cost-effective.
- Make it mean something. Your logo is more than just a cool image. It should express an idea or the primary message behind your brand. Don’t be afraid to take an obvious (or even cliche) symbol and put your own twist on it to make it brandable. We did this when creating the logo for The Beautiful Project by taking a very obvious symbol of beauty—the rose—and applying color and a distressed effect to create a truly unique and artistic design that perfectly encapsulates the brand.
This course goes over how to add your logo to your blog under Setting Up Your Site Header > Site Identity. The topic you are reading now is just meant to give you some background on great logo design if you do not already have one (or are considering a new one). If you chose a Level 2–4 Mai Solution, Sam will design you a rocking logo.
Font speaks volumes. Choose a font that complements your brand and is easy to read. Here are a few things to consider before choosing a font.
- Choose a “web-safe font.” Not every computer has the same fonts installed automatically which can affect the way your site presents to certain visitors. This is why it’s best to choose a “web-safe font” such as Lucida Sans, Tahoma, Arial, Verdana, or Microsoft Sans Serif. The fonts available in Mai Styles (which we’ll discuss more later in this course) are all Google fonts and great choices.
- Readability comes first. The two types of fonts are serif and sans serif. Sans serif fonts are best because they don’t have the little “feet” or “hooks” at the ends of each letter which can get blurry depending on the user’s screen resolution. No matter what style of font you use, the main body size should be no bigger or smaller than 12 to 16 points. This does not include headings, which certainly can (and should) be larger.
- Simplicity is best. As mentioned, a simple font that’s easy to read is best. Stick to black. Your content should be the star. Consistency is also important. Pick one font for headings and one font for body text, and stick with them for all marketing materials. Use this free font generator to see which fonts look best together.
Use Google Fonts to check out different fonts and font pairings. You can also do this right in your blog’s Customizer under the Mai Styles settings (more on this later in the course).
Just like fonts, colors can say a lot (and there’s color psychology to back that up). The main blog elements that use color are logos, buttons, links, side-bars, borders, and menus. The colors you choose can really set the tone for how users experience your website, so please, don’t just haphazardly choose a slew of colors that don’t make sense together or for your brand. Here are a few color guidelines and considerations:
- Don’t go crazy with color. Pick 1-3 primary colors. There are (rare) exceptions to the rule, but this will suit most brands.
- White/white space is your friend. There’s nothing easier on the eyes than a simple black font on a white background. Having a strong color contrast between your background and text colors is also important for accessibility, and it’s also the law.
- Take color psychology into account. Colors evoke different feelings. Think about your brand and what you’re trying to convey and pick your colors accordingly. For example, red is associated with love, passion, power, rage, and even danger (and a lot more). Don’t let your preconceptions of a color box you in, but also understand what you are saying with your colors.
- Know your audience. Use colors that suit your content and consumer base. If your site is focused on children’s products, bright fun colors are great. If you are in the tech or professional services space, blue, white, black, and grey are typical.
ColorHexa is also a great tool for coming up with color combinations.
Graphics are a key content element. They help to create a unified brand and increase engagement and understanding, especially when more complex topics are involved. They also give your readers’ eyes a break when reading through lengthier pieces of content. Both the look and feel of your imagery and whether or not you choose to use stock photos or custom designed graphics (whether in-house or through an outside agency) are important decisions you should make early on when defining your brand. This topic reviews some important graphical and stock photo considerations.
Graphics & Photos
Stock photos can be totally awkward or totally awesome if used right. Keep these three rules in mind when choosing images for your website:
- Choose photos that compliment your content. Meaning don’t use photos just for the sake of using photos. They are there to help the reader connect the dots, not to be the star of the article. Be sure the images align with your target audience—make them feel relatable! Don’t let your audience get confused when looking at the page. In fact, it will increase the chances of them losing trust in your business and jumping ship before engaging with your content.
- Find stock photos that don’t look like stock photos. Crazy right? When you use these obvious stock photos, rather than adding an interesting visual, it’s super cheesy, and yes, your readers notice.
- Find images of people doing real things, because this probably reflects your audience. They’re real, unique, hard-working individuals. Tell a meaningful and relatable story, highlight how your products fit for them, connect with your worldwide audience, and make it personal. These images might include vibrant colors, inspirational activities, and people who are radiating happiness.
Lawsuits & Stock Photography Licenses
Lawsuits do happen in stock photography, so it is critical to play by the rules. Don’t gloss over the fine print and make sure you understand attribution requirements. If you have guest bloggers or an editorial manager, verify they are only using approved images (or choose the images yourself).
Avoid trouble by learning a bit about licensure types:
- Public domain (PD): If you are trying to save some cash and don’t want to worry about licenses, these are the way to go. You don’t need a license to use PD graphics.
- Royalty-Free (RF): This typically involves a one-time payment that then allows you to use the photograph across several mediums without needing to re-purchase a license.
- Right Managed (RM): RM licenses allow for the one-time use of the stock image specified by the license.
The size and quality of an image are affected by several factors: physical size, resolution, and image type (file type). Properly resize or compress your images to display premium quality while maintaining optimal site speed. The physical size of an image is based upon two things: The size of the image on the screen and the file size.
Read the Transcript[Close]
As a rule of thumb, keep large, high-quality images should between 100K and 60K, and smaller images closer to or below 30K. For reference, K / KB = kilobytes; there are 1000K in one MB.
To find the file size of a particular image, right-click it and select Get Info. The number right at the top of the window (followed by KB or MB is the one you want).
Resolution refers to the total number of pixels in an image. Pixels are measured in DPI (dots per inch) or PPI (pixels per inch). Also, the resolution is sometimes identified by the image’s width and height.
The resolution of the image dictates its clarity. But with a higher resolution, comes a larger the file size. You may need to sacrifice a bit on the resolution to ensure you are not sacrificing page load time.
When saving images for the web, it is recommended that the resolution is 72 dpi. Many images that are downloaded from stock image sites are 300 dpi, which is the recommended resolution for print and will load slower on your site. Be sure to lower the resolution of your image in the software program of your choice. Any lower than 72 dpi and your image will begin to look pixelated on screen.
The 2 image types popularly found and used on websites are JPG and PNG.
- JPGs are good for photographs. Saving a photo as JPG removes detail from the photo (compression). For this reason, JPG file sizes tend to be smaller than PNGs.
- PNGs are good for photographs where higher-quality is desired and vector art. It is also the only file type that allows saving with a transparent background. It compresses photos keeping detail intact, but as a result, the file size is usually larger than a JPG. We use PNGs when displaying logos and icons.
Check your graphics software for resize, size, transform, reduce, or enlarge. If you don’t see these options, you may have to find different software (we primarily use Adobe Photoshop CC).
Always start with a larger image and adjust to the size needed. If you start with a small image and attempt to make it larger the image will become distorted.
There are usually two ways to resize images:
- You can resize an image by manually grabbing a corner of the image and dragging it to the desired size. Do not grab and drag an edge, this will distort the image. Check your software’s how-to’s/help docs for specific instructions.
- The other—usually preferable—method is to edit the image size. Open the image in your preferred image editing software and set the dimensions. We primarily use pixels (px) to define our image sizes, but you can also use height and width if you know the recommended dimensions.
Best tools for image compression and sizing: ImageOptim, PhotoShop
Saving a file in Photoshop also allows a great option to lower the file size without compromising the quality. Using the “Save for Web” option, you can choose the quality that you want to save your work. 60 (high) usually works great because there is no noticeable difference in quality, but a decent drop in file size.
Understanding Image Sizes and Display in Mai Theme
The following image size specs are those used in our custom-built theme, Mai Theme. It runs off the Genesis Framework and WordPress. If you are running off another platform or theme there may be some variation in image sizes. Consult your theme files or your developer for specifics.
Aspect Ratio: 3×1
Aspect Ratio: 16×9
Aspect Ratio: 4×3
Aspect Ratio: 4×3
Aspect Ratio: 4×3
Aspect Ratio: 4×3
Aspect Ratio: 1×1 (square)
WordPress Default Image Sizes
In addition to these Mai Theme specific image sizes, WordPress included the following proportional, or soft-cropped, image sizes. These sizes retain the entire image area and fit it in a box of specified dimensions. So if the shape of the image is not exactly the same as the shape of the box, you’ll end up with blank space or padding.
Width: 150px (WP default)
Height: 150px (WP default)
Type: Cropped/Standard (optional)
Width: 300px (WP default)
Height: 300px (WP default)
Width: 800px (WP default)
Height: 0 (WP default) unlimited height
Understanding Aspect Ratios
We hear it a lot. My head is cut off in the image. How do I fix it? It’s because of the aspect ratio for the image size. All images have a proportional relationship between width and height, this determines the shape (x,y). Changing the aspect ratio changes the shape. Many people struggle with banner images in particular. You need to be aware of the image’s orientation (landscape/portrait), shape (short and wide), and aspect ratio (3:1) for a good banner image. When choosing an image, especially for particular page placements (banner, section, feature image) consider if the image will work in its original form (orientation, shape, aspect ratio). Landscape images tend to work best in most places unless your theme uses unique aspect ratios.
When choosing an image to be used as a background (having a title and/or content over it), try to use images without a focal point like a person’s face. Instead, use an image more suited for a background where it still looks good at all screen sizes, even when some of it may be cropped out due to the device or content size.
Aspect Ratios Key Takeaways:
- Not every image is going to be the right shape for your requirements.
- Balance is the key. Ensure your images are the right size for how eye-catching you want them to be and how much of a statement you want them to make.
- Consider if the image you want to use can be successfully changed to fit the size and aspect ratio you are working with. Sometimes this is possible, but not always.
- Background images are not supposed to be the focus of the page; if it’s important, add it as an inline image (in-content).
- For images that you use as backgrounds, choose simple images so that any overlaying text is easy to read.