.
Morgan Branding
Morgan Branding

branding + graphic design + web design

Designer Resources

A Simple Tip for Making Perfect Rounded Corners

September 16, 2014

There are a few ways you can go about making rounded corners on nested shapes, but only one produces ideal results.

The first option is to have the same radius for your inner and outer shapes, shown below at 10px. Although speedy, this produces corners that are chunky and ugly. Yuck. The second option is to scale your inner shape into your larger shape. Although this produces slightly less chunky corners, also not great. The ideal way to create nested shapes is with a little mathematics. Keep this little tip handy, and you’ll have perfect nested shapes that don’t thicken in the corners. Even if you approximate your dimensions, you’ll end up with better results. Ah, happy corners.

Inner Radius + Stroke/Border Thickness = Outer Radius

In the example below, the inner shape has a corner radius of 10px with a 10px stroke, giving us a 20px outer radius.

UI/UX Lesson: Color & Shape

September 15, 2014

The use of color and shape in digital design is an essential tool for developing something that’s easy to understand and use. Bucking the norm when it comes to these standards is not a way be cool or different. Certain colors and shapes have become synonymous with specific meanings or calls-to-action, and choosing not to follow these norms will just create grumpy users…and nobody likes grumpy people. Don’t create grumpy.

Green and check marks have become the standard for positive action or good. Red and X’s are known to be negative, cancel, or bad. Yellow and triangles are better known as warnings or caution. And lastly, blue circles indicate more information or tips.

Website Call to Action: Choose Your Words Carefully.

September 11, 2014

kimono

Choosing successful call-to-action text doesn’t always prove an easy task. Sometimes, translating internal corporate talk into user-friendly and ubiquitous direction can prove difficult. Let’s face it, “Open the Kimono” isn’t gonna work. Or possibly it’s a matter of figuring out what users want and giving it to them as they want. Either way, here are some tips to help you out:

  1. Make it actionable. Start with a verbs, such as “Download,” “Add,” or “Join.” Avoid using terms like “More Information.”
  2. Keep it Short. Whittle your phrase down to the simplest form. Rather than “Apply for a New Account,” try simply, “Apply.”
  3. Connect it to content. Make sure your call-to-action is relevant to the page, product or service being offered. If you’re discussing a downloadable resources, such as PDF, start with “Download.” Using something like “Apply” wouldn’t make sense.
  4. When possible, reduce risk by providing value. Example, saying something like “Save $150” could reduce the risk of action by offering the value to the user.
  5. Be consistent. Once you’ve dialed in on language that works for your site, stick with it.

4 Simple Steps to Great Web Typography

September 5, 2014

Web typography has come a long way since the days of IE 1.0. Today, we have an abundant library of type faces to choose from that give us the opportunity to elevate the design of the web through the use of great typography.

First, I’d like to note that because the content of sites varies dramatically, it’s impossible for me to tell you what type faces are appropriate for your site. Therefore, I’d like to offer four simple guidelines to follow, regardless of the type face, that will up your web typography game.

 

Contrast

Maybe the most important thing to consider is contrast.  Although fluorescent pink on a dark blue background might look cool on the poster you’re designing, it’s not the most pleasant to read on the web. Stick to high contrast color choices, and when possible, avoid long blocks of reversed text.

contrast

 

Size

For the sake of your readers, make sure your type is large enough to be read easily and doesn’t hinder their experience. Remember that readers are different ages, reading content on different devices, and don’t sit with their nose pressed against the screen. And make sure you take mobile into consideration, too. As a general, rule, 14pt is a nice minimum to work from. What you’re reading right now, is 16pt. Click on the image below to see what 10pt and 12pt type looks like. Not great. Avoid.

typesize

 

Hierarchy

Varying type size is one of the easiest and best ways to differentiate your content. It’s the simplest way to provide structure for your readers, allowing them to find what they need quickly and effectively.

hierarchy

 

White Space

The negative space between elements on the page, although “invisible” is easily as important as the “stuff” on the page. By allowing your content to breathe, and not filling every inch of your page with more and more things, you place emphasis on the important elements/content.

This applies to the text on the page, too. Make sure you use your CSS line-height property on all of your copy. Most type books and resources call for a line-height (leading) of at least 140% of your type size. So, for a 20pt type, you’d want a 28pt line-height. Although headlines and more prominent elements can violate this rule, it’s a good place to start.

whitespace

Pro-Tip: Font Management

August 21, 2014

Designers and fonts have a love-hate relationship. When they’re working, and you don’t run into conflicts, they can be your best friend. But when you have grumpy fonts, they can be the bane of your existence, causing all sorts of issues—during the design phase, or final file creation and send out. To keep them on your good side, here are some tips for managing and organizing fonts:

  • Use a font-management software. Back in the day, I used to use Suitcase from Extensis. These days, however, I use Linotype FontExplorer. Linotype comes with plugins that activate/deactivate fonts as needed. Not only does this help keep conflicts to a minimum, it also helps keep your system nice and snappy by minimizing the number of active fonts.
  • Start fresh. When you start using your management software, resist the urge to have it search your entire system for every font possible. Even if you’re a young designer, you’d be surprised what you’ve accumulated. There are a lot of junky fonts out there, and they can wreak havoc on your system. Rather, import fonts as you need them.
  • Buy fonts from a reputable source, such as MyFonts.com, Veer.com or Typography.com. They’re fonts are clean and much less buggy.
  • Organize your fonts. When you import new fonts, take the extra time to organize them into appropriate folders, such as “Sans,” or “Slab.” This is a huge time-saver when you’re searching for just the right font.
  • Outline. When you can, and to be extra safe, outline your fonts before you send out the final artwork to the printer. This ensures you won’t have any odd issues creep up during the proofing stage.

Got some tips? Sharing is caring.