Maintaining Consistency in your UI Design

Written by Patrick Cox

Consistency in UI design is an old school principle and somewhat forgotten in some of today’s web and application designs. It seems like designers are choosing to omit consistency from their interfaces.

In the case of mobile application design, some designers are choosing to re-invent, re-create or even completely break the hardware standard interactions with their own unique interface patterns. While breaking the consistency between the hardware UI rules and your apps experience may not be a bad idea, breaking your own apps consistency can be.

Three Steps to Consistent UI Design

There are basically three types of consistency you should think about when designing your web and mobile app designs:

  • 1. Stay consistent with device UI guidelines and behaviors
  • 2. Stay consistent with other similar sites or applications
  • 3. Stay consistent with your own design

For the purpose of this article I’d like to focus more on the third — keeping the consistency in your own user interface. This is kind of a big deal mainly because you don’t want to confuse or surprise your users inside your own app.

You don’t want a user going from you home page to a subpage and see different styling or even vastly different user interactions. This kind of thing can surprise users or in some case even scare them away. Consistency is not only a big deal to the overall usability of the site, it can greatly increase conversion as well.

Consistent Structure and Interactions

This is key to creating a consistent UI. Sometimes when we develop we forget about how the structure and interaction is going to affect the overall user experience. But just as blueprinting and creating plans is important when building a home or building, it’s also important for creating a consistent, usable UI. There are a few things to think about and plan ahead before you start to write code.

  • 1. Consider how to consistently place elements throughout your site or app.
  • 2. Think about what UI patterns you’ll be using.
  • 3. Plan out what input elements you’ll need.
  • 4. Figure out what icons you’ll need, and pick or design a good icon set that covers them all.

Element placement is a huge way to reduce surprise in the user and create consistent, reliable expectations. Keep your navigations in the same place, nothing irritates a user more quickly than moving or disappearing navigational elements. Also keep logos and other branding items in the same locations through out the site.

“Nothing irritates a user more quickly than moving or disappearing navigational elements”


If you are using a sidebar, don’t shake up the side bar to much by changing what is present in them from page to page. Some of this may be relevant to the content on the page, but avoid removing or even moving import overall elements like search forms. One big thing to keep placed consistently is the login and user setting links or buttons.

Consider UI Patterns

Plan ahead and think about what UI patterns you will need. Are you going to need a gallery? Modals? Accordions? Sidebars? Planning design patterns ahead of time will not only help you develop and design your app quicker, but thinking about what design patterns you’ll need also helps to figure out your content ahead of time — which can save you loads of time as well.

This will also solve problems and answer questions ahead of time, this way when you come to a section or page in your site that requires a UI decision, you’ve already made it and you won’t get caught creating a mishmash of design patterns throughout your site.


Think about your forms before hand as well. Plan out what form elements you’re going to need and figure out the elements that you won’t need or that you could replace. Form elements can be scary or even tricky for users to navigate anyway, so if you can eliminate or swap out some inputs that may be stumbling blocks, do it.

“If you can eliminate or swap out some inputs that may be stumbling blocks, do it.”


This also is a great way of removing the decision making from the development process. Keeping forms consistent in both style, structure and interaction can sometimes make or break a conversion rate.

Again, plan head. Plan out what icons you will need ahead of time. One super quick way to screw up your consistency is to be half way through the development of your app when you find out that you’ll need print icons, then realize that you can’t remember where you got your icons or even if you can find a print icon that matches the rest of your icons.

This isn’t even a style issue really, but an interactive one. Users will get used to the look a particular icons and be able to quickly recognize them. But if you are using a patchwork icon set you’ll confuse your user or even make it hard for them to tell what certain icons represent.

Consistent Style

The style and design of each UI element is important and maintaining consistency between them is also important to the user. Just as it is important to have a consistent icons set, it’s important that your app has an over all design consistency to it. You may think that certain buttons are cool even though they don’t come close to matching the over all design or color scheme of the site, butthis will just confuse your user and look ugly.

When designing a UI kit, there are a few things to keep in mind in order to create consistency:

  • 1. Color scheme
  • 2. Style
  • 3. Borders
  • 4. Type and fonts
  • 5. Size
  • 6. Background images
  • 7. Effects


Like I said earlier, keep your UI color consistent with the over all color scheme of your site. Even when designing call to actions where you want buttons to stand out and be noticed, be careful not to make your call to action a sticking ugly compliment to your over all color scheme. To help you, use tools like Kuler or ColorSchemer to aid in selecting colors that go well together.

When I talk about keeping your style consistent I’m talking about not using some crazy gradient button with drops shadows and bevel if the rest of the site design is flat and doesn’t have a shadow or gradient on it. Besides staying consistent with the overall site design, stay consistent with the style of your UI elements. If you are using a particular color or font style on your input labels, stick with it and use it on all labels.



Ahh, borders. Too often I see sites that use three or four different button border thicknesses or radiuses and this can really be confusing. Keep all of your borders on buttons, inputs, selects, galleries, images and all other UI elements consistent with each other. This doesn’t mean that you have to use on border radius, you can mix it up by having a few values or even use one style consistently on each element.

Type and Fonts

Using the same type and fonts in your elements is a pretty important thing, especially when dealing with form elements. Keep headers consistent and don’t use to many fonts even though you might like all of them — you can save them for other projects. Inputs and buttons should have font styles that match or complement each other so that forms are easily read and predictable.



The size of fonts and other elements should be consistent or complimentary to each other. The headers and title of pages should all stay consistent so that your user knows that those lines of text are in fact matching headers and titles. Consistent size also applies to any UI element from content regions, links, navigational elements or sidebars. Avoid altering the sizes of any these to drastically between page views so that the user can recognize them immediately when the page loads.

Background Images

Try not to change up your background images too much. This doesn’t happen much these days as it used to, but it’s still a good idea avoid changing your background images from page view to page view. If you do, try to make the image relatable to each other somehow so the pages don’t lose consistency. Changing background image, especially large ones, can make the site feel disjointed and make the user feel like the have even left you site completely, so really try to avoid this temptation.



Effects, most importantly lighting effects, can make what seems like a great site design not make sense at all to the user. For example, if you are using a highlight on the button that it looks as though a light is shining on top of it, use the same lighting effect on beveled text in buttons or beveled text inputs.

Honestly, this really isn’t a huge make it or break it deal with the user, but to the picky viewer they may notice the inconsistency of your effects and get distracted from doing what they are supposed to do with your app or site.

Don’t Be Boring

Designing for consistency may feel mundane or even boring sometimes and you may just want to throw something in your design to throw the user a surprise, and really that is great.

It is good to keep the users on their toes, jsut don’t shake things up so much that they get so discouraged or confused that they leave and go somewhere else. A little consistency can go a long way.

6 Portfolio Design Mistakes that Drive Me Nuts!

Written by Joshua Johnson (Design Shack)

Your public portfolio is one of the most important things you’ll ever design. It presents you to the world and, if you’re a freelancer, tends to play a major role in whether or not people choose to hire you.

Because of my role as the editor of Design Shack, I’ve viewed a ton of online portfolios and today I’d like to walk through some of the weaknesses I see time and time again. Read on to see if you’ve made some of these mistakes.

1. Listing Your Age

Oddly enough, this is an extremely common piece of information to find on web designer portfolios. Designers feel the need to introduce themselves to make the page more personal, but can’t think of anything good to say and therefore revert to the basics: “I’m a 22 year old web designer from Papua New Guinea.”


Only Kids Brag on Their Age

This bugs me every single time I see it. It’s not the worst mistake that you could make, but it just reeks of a rookie move. This is evident by the fact that you never see someone bragging about being a 43 year old web designer. It’s only the young folks who feel the need to wear their age like a badge. I’m surprised I’ve never read one boasting about being “twenty and a half.”

“You never see someone bragging about being a 43 year old web designer.”


You’ll find that the experienced designers brag about exactly that: experience. “I’ve been building websites for Fortune 500 companies for over 10 years.” Now that’s a number to brag about.

Who Cares?

Here’s my gripe with this piece of information: who gives a crap? Do you want people to hire you based on talent and experience or on the year that you were born? If you don’t want potential clients to judge your age, then why are you broadcasting it?

The only time that a potential client might think twice about hiring someone based on age is if they seem too young, and as I said above the only people who do this are the twenties crowd so they’re really just shooting themselves in the foot.

Just The Necessities

Skip the fluff. I don’t want to know how old you are, what type of computer mouse you use or how often you buy a new pair of Converse. Tell me what you do and prove it with some solid examples. Which brings me to my next point.

2. Showing School Projects


Here’s another one that always gets me with the young designers. They always feel the need to show off their school projects. This ain’t your momma’s refrigerator junior, it’s a professional portfolio and clients want to see real work.

“This ain’t your momma’s refrigerator junior, it’s a professional portfolio.”


If It’s All You Have, Show It

I jumped a little bit ahead of myself with this one, let’s take a step back. If you’re fresh out of school and have no client work under your belt, then you should absolutely be encouraged to build a site to show it off. Lots of potential clients won’t mind one bit, especially if that inexperience comes with a low price tag.

Show Paid Work When Possible

That being said, once you’ve been out in the real world for a little while and have a few projects to show off, you should consider pulling down your student work. Otherwise, I’ll browse through your portfolio and think “Hey, this guy is really good! Oh wait, student work? He’s a noob, let’s move along. I need a pro.”

See how much of a double standard that is? Even if I think your work looks top notch at first, when I see those student projects, I immediately write you off as inexperienced. Does that suck? Absolutely! Is it fair? Nope. Is it how the world works. You bet.

3. Lack of Confidence


There’s a time and place to be humble, but your professional portfolio is not it. So many times I see really talented designers sell themselves short with self-depurating website copy and it drives me nuts.

“There’s a time and place to be humble, but your professional portfolio is not it.”


“I’m just getting started” or “I hope to one day achieve…” these things might not sound so bad as you’re writing them but they shatter my confidence in your ability to deliver quality results.

Clients Mirror Your Confidence Level

If you can’t muster up enough confidence in yourself to tell me that you’re an awesome designer, odds are I’m not going to come to that conclusion for you.

As a potential client, how you talk about yourself tells me quite a bit. If you sound hesitant about your ability, I’m going to instantly pick up on that and either look elsewhere or exploit the weakness to get you to do more work for less money.

Acting a Fool

Now, that being said, there’s definitely a point where confidence can become hubris. If all of the copy on your portfolio makes you sound full of yourself, then that’s going to turn me away just as quickly as a lack of confidence.

This is a fine line to walk and it’s not always easy to find the balance. You have to figure how to tell me how great you are without sounding like you’re bragging about how great you are.

“You have to figure how to tell me how great you are without sounding like you’re bragging about how great you are.”

Often, the best way to do this is to let your work speak for itself. If your work really is amazing, then I won’t need you to try so hard to convince me of that fact.

4. Grammar

This one is really difficult for designers, including myself. These days I write more than I design and you still don’t have to look very hard to find a grammatical error that I’ve committed.

What I’m talking about here is the big stuff. It’s not the end of the world if you dangle a participle or end a sentence with a preposition, just make sure that a reasonably intelligent person can read your sentences without wondering how you managed to graduate from high school.

“Make sure that a reasonably intelligent person can read your sentences without wondering how you managed to graduate from high school.”


What If English Isn’t Your Thing?

The designers who I personally see really struggling in this area are those for whom English isn’t their first language. This becomes pretty easy to spot when reading website copy.

This is a touchy subject so I’ll first say “kudos,” because I personally only speak one language (many Americans are lame like that). If you speak two or more languages, you’re well ahead of me.

That being said, if I were to release my professional portfolio in another language, even if I spoke a little bit of that language, I’d still drop a few bucks to have someone perform a proper translation.

“You want to get the message across that you’re a good designer, don’t let bad grammar stand in the way of that fact. ”


This is simply a matter of putting your best foot forward. You want to get the message across that you’re a good designer, don’t let bad grammar stand in the way of that fact.

5. Blog Neglect


Here’s one that we’ve all probably struggled with at one time or another. You start up a new blog and you’re brimming with enthusiasm for how often you’re going to update it.

You’re good about it at first, but then a few months down the line you start to slack off and before you know it that blog is a dead dream stuffed into the back of the closet with your astronaut helmet.

Digital Cobwebs

The interesting thing that you probably haven’t considered though is what message you’re sending to the people who visit your site. One of the first things that I do when I visit a blog is look at the date of the most recent post, what will this tell me about your blog?

“If your most recent post is over a year old, then it makes your site feel like it has cobwebs on it.”


If your most recent post is over a year old, then it makes your site feel like it has cobwebs on it. This makes me doubt whether you’re even actively taking on clients anymore. Was the freelance thing a failed project? Did you abandon client work in favor of a full time job?

Do It Well or Not at All

A blog makes a great addition to any portfolio, but if it’s not done well, it can actually drag you down. My advice is simple: either dedicate yourself to updating your blog on a regular basis with quality, interesting content, or simply don’t have one.

You don’t have to write a post every day or even every week, but at the very least you should try getting something up monthly to keep people interested.

“You don’t have to write a post every day or even every week, but at the very least you should try getting something up monthly to keep people interested.”


While we’re on the topic, use your portfolio’s blog as a place to share knowledge, disseminate information, and maybe score some search traffic, not to post photos of your cats or rant about who you’re voting for in the next election. This content belongs on your personal blog. Keep it there.

6. Showcasing Where You Suck

There’s an interesting trend in web design portfolios right now that not only showcases your skill set, but also weighs the different items against each other. This usually takes form of some little graph or visualization like the following.


Pretty neat right? This quickly gives me a feel for the services that you offer and the proficiency you have with each. Thanks for being so honest!

The problem of course with this method is that the way you read it and the way that I read it as a potential client are different. Here’s what you’re hoping that I see:


Unfortunately, here’s what I really see:


Don’t Point Out Your Weaknesses

It’s good to have strengths and weaknesses, everyone does. However, I’m not convinced that showcasing your weaknesses in a pretty graphic is the best marketing strategy.

“I’m not convinced that showcasing your weaknesses in a pretty graphic is the best marketing strategy.”


To utilize an old simile, this is like putting a gold ring in a pig’s snout. You may be trying to dress up your weaknesses with good design, but it’s likely a waste of effort because they’re still ugly.

Think Before You Design

The real takeaway from this article is to carefully consider each component of your web design portfolio, from the work you show to the copy that you write.

At every single stage, ask yourself whether you’re really improving the quality of the finished product or are in fact reducing the likelihood of someone hiring you. You’ll likely find that a lot of the added fluff that you thought was helping the page is really bringing you down.

Is Microsoft Finally Getting the Hang of Design?

Well Written Article By: Joshua Johnson

Could it be that the king of clutter is finally beginning to grasp the concept of basic layout principles and consistent branding? Will Microsoft turn into a company known for its attractive design?

Follow along as we compare the downfalls of the past to the bold new direction that Microsoft is taking for its visual messaging. Whether you’re a Mac or PC user, you’ll likely be surprised by how far the boys in Redmond have come.

A Rough Past

It’s no secret that I’ve never been a fan of the design team at Microsoft. Back in May of 2010, I wrote a lengthy article all about how we can learn from the designers at Microsoft… by not repeating their many mistakes!

This is not the mean-spirited ranting of an Apple fanboy, it’s merely an observation that, for all of their capital and software talent, Microsoft is a company that consistently misses the mark in the visual design department. Historically, the only thing consistent about their visual identity is that it’s completely inconsistent.


The Winds of Change

Is this news to Microsoft? Absolutely not. In fact, I would wager that deep in the heart of this company resides a staff of frustrated designers who know these problems better than anyone. The good news: they’re beginning to attack them head on.

For many, the first noticeable point where Microsoft finally decided to step up and make a bold design statement was with Windows 8 and the new “Metro” UI.


Unlike anything else we’ve seen from the Windows team in years, this was bold and extremely different from anything the competition was doing. The design is an awesome fusion of minimalist layout and typographic principles with a Microsoft-centric color scheme that makes it seem fun and approachable.

Even we Apple-toting critics were forced to step back from our usual critique and admit that Microsoft has done something great here. The Metro style hasn’t proved to be another random design experiment but the jumping off point of a whole new cohesive Microsoft brand. Our main topic today is how this new stragety has affected their brand from a web design perspective.

With Metro in mind, we can easily see why the new looks the way it does. The array of rectangles and squares is pulled directly from the heart of the Windows redesign.


This seems obvious, so you might not be impressed, but I’m blown away. Microsoft made their website look like their software! They’re establishing a brand that’s instantly recognizable in different locations and platforms. In short, they’re starting to understand what all first year design students know. I joke, but it’s a big step in the right direction.

As with Windows 8, I find the homepage to be very clean and attractive. The use of simple containment devices makes the layout extremely versatile and easy to browse. Instead of the typical clutter that I complained about in the previous article, we find clearly organized content.

To appreciate how this works, let’s strip it down to the basic wireframe:


See how simple that is? Really stop and appreciate it. Was the solution to a billion dollar company’s design problems really just a few boxes? There’s no way it’s that easy, right? To gain some perspective, let’s look at the wireframe that you typically find on


Not so different is it? The reason these layouts work so well is that they represent a great balance between modularity and simplicty. A grid of boxes allows you to highlight important content while restricting you from clutter.

Stop Overdesigning

With Metro, Microsoft is finally reaching a point where they’re simplifying their designs down to the bare necessities. This not only highlights the content better, it’s actually less work! Consider the types of content boxes I was finding on their site two years ago:


Now contrast this to the content boxes on their current home page. Gone are the clipart explosion and 90s graphics. In their place you find solid colors, basic but impactful product shots and a strong emphasis on typography.


This strategy is familiar because you see it being used across just about every brand that is known for strong, simple and clean design.


Am I implying that Microsoft is stealing from Apple? Far from it. Their colorful appraoch makes their look quite unique. All I’m saying is that they’re finally subscribing to the basic design principles that countless other companies have used for a decade.

I definitely don’t think that every brand should be clean and sterile, but for Microsoft I think it’s a good fit. And they’re successfully mixing this look with lifestyle shots to make it more friendly and human.


More Of This

If you look around on the vast and seemingly endless network of sites run by Microsoft, they’re still full of inconsistencies, poor design, and over-cluttering. They obviously still have a long way to go before overcoming the design woes that have plagued them for years.

That being said, they’re not complacent. In fact, they seem to be progressing along quite rapidly. From the Metro UI and the Microsoft homepage to other projects such as, there’s a lot of great design examples that they should be proud to stamp their name upon.

I have no respect for a company that goes beyond ignorance of good design by ignoring the need to understand good design. Fortunately, Microsoft doesn’t seem to fit this description at all right now. Rather they’re breaking away from a hurtful stigma and making real progress. Given that this is the case, hats off to the hardworking folks behind these changes. Keep up the good work!

What do you think? Has Microsoft histroically struggled with clean, consistent web design? How is that changing lately, if at all? I want to hear your thoughts!

Seven Online Infographic Builders That You Have to Try


The world is becoming increasingly visual – especially the online world. Thanks to social media and the explosion of sites such as Pinterest, displaying information in a visual way has become even more important. But it can be time consuming and even brain-boggling.

There are a host of tools out there though that can help you turn information into pretty good (and Pinterest-friendly) infographics in a matter of minutes. Here we take a look at some of the top contenders, how they work, what they cost and if they are worth your time (and money).




Still in beta, is a lovely interface that allows you to create dynamic or static infographics or charts with ease.

Pick a template or chart type, enter your data and go. You can add photos, text and even extra charts to your creations with a couple clicks and then publish to Twitter, Facebook, Pinterest or as a web link. (There is no print or downloadable option right now.) All of your finished infographics are saved to a library file for later use.

“Graphics are clean and sharp, although the number of templates is limited. ”


Graphics are clean and sharp, although the number of templates is limited. is planning pid options in the future. Colors are customizable within infographics to help you create something that matches your site or brand.

The best feature? You can upload data from your desktop. (This will work great for the spreadsheet you don’t know what to do with.)

Cost: Free.

Analysis: Templates offer a clean, designed way to present information in a hurry. Bonus points for the ability to create text-heavy infographics or charts or a combination of the two.


screenshot is the super-social network of infographics. The recently re-launched platform not only allows you to create infographics but also allows you to share your work and take a peek at other items that are of interest. works in a template-based format with different design options for you to get started with working with data or other information. Select a graphic “story” and add your own customization for a quick and very visual representation of your information. You can download graphics in pdf format for print or web applications.

Finally, the site uses social media connections to create infographics. So be ready to share your Twitter and Facebook information. will work with users to create custom infographics for a fee.

“The templates are well designed but there is a not a lot of room to change the overall look.”


The templates are well designed but there is a not a lot of room to change the overall look. The problem here is that you may create the same look as someone else. Since the early-summer update, new items seem to be rolling out consistently and I would keep an eye on this software to continue to evolve and add functionality.

Cost: Free, with social media linking.

Analysis: Templates are fun and have a fresh look. Infographic creation is simple but there are still a few software bugs and limited style of templates to choose form.





Piktochart’s web-based software could not be any easier to use. Choose a template. Enter your information. Save, download and share.

While the free version of the software is a great starting point if you only plan to create a graphic or two, the pro version really offers a great deal of functionality — you can customize all of the templates to change color schemes and fonts.

“If you plan to use it frequently, upgrade to the pro version.”


With any of the templates, you can add text and images to build a graphic for almost any purpose. The only thing you really have to worry about is whether the template you used has appeared somewhere else. (That’s where the customization options really become important.)

Cost: Free for basic plan; $129 annually for professional version.

Analysis: This tool helps you create quick and professional looking graphics from text in minutes. If you plan to use it frequently, upgrade to the pro version to remove branded watermarks, get access to added customization options and access to many more templates.

Stat Silk




Stat Silk allows users to create interactive charts and graphs that are customizable. The tool seems perfect for anyone who uses a lot of maps and mapping data.

Animations are based on Flash and users can use base maps provided by Stat Silk or upload their own. The tool is super-customizable but can be a little complicated for novice users. The StatPlanet World Bank application was a first prize winner in the World Bank Apps for Deveopment and the software is used by big-name clients worldwide.

“The software can be a little clunky at first glance but works well with a little practice.”


The business model for the Stat line of products in interesting. The license-free software “seeks to promote the use of data visualization by non-profit and government organizations and organizations in low income countries,” according to the website. Further it is used to promote data visualization of any kind.

Cost: Free.

Analysis: This is a pretty cool tool, depending on the type of visualizations you are trying to create. The software can be a little clunky at first glance but works well with a little practice.

Google Public Data




Google public data is a great resource for finding (and charting) public information. Want to know the U.S. unemployment rate? Just do a quick search and get a chart in return.

“This can be a great tool but is really only relevant to a few sectors…”


This can be a great tool but is really only relevant to a few sectors and those who are looking for specific public information. But if you fall in those categories, it can be a great place to start.

Cost: Free.

Analysis: The graphics are simple – no bells and whistles here. But the data network is expansive and sourced well if you need public data charted in a jiffy.





Datameer is marketed as a business product that helps you create simple yet, striking data visualizations. It is strictly for those dealing in numbers.

The software runs from your desktop, rather than being online-based, and includes a library of tables, charts, maps, and tag clouds to make it easy to visualize data.

“Great for business owners focused on numerical data.”


Datameer comes with a pretty nice price tag and does not include some of the more “fun” functionality and templating of other programs. What it does is add an additional layer of sophistication to business graphics.

Cost: Personal accounts are $299 annually.

Analysis: Great for business owners focused on numerical data who are looking to create sharper graphics with ease.





Word clouds seem to have fallen out of favor recently but they are still a fun and effective tool. Wordle helps you create beautiful, colorful word clouds with minimal effort.

“This is a super-fun tool…”


The interface is easy to use and clouds can be printed or saved and used online. The simple feature creates a cloud from a URL. But it is the advanced features are the most impressive. You can paste in words and assign weights to them, define colors for text and backgrounds and even set up a Wordle on your site that users can interact with.

Cost: Free.

Analysis: This is a super-fun tool. And the overall look is far better than the basic blog-based word cloud tool.


Visualization tools seem to be popping up all over the place. They can be a fun, quick (and super easy) way to put text into a graphic format, but they are not something most designers will want to rely on.

Most of these tools do not allow for the degree of control that many graphic designers or artists would like to have on their work. Some also have that “templated” look and the different information could pop up with the same look on different places.

If you want to ensure that an infographic has your signature look and feel, take the time to create something from scratch. But if you are looking for a simple, quick way to compile data, one of these tools might be perfect for your next project.

Image Source: Internet Map.

Leveraging Stereotypes in Design: Masculine vs. Feminine Typography

WRITTEN BY  (Design Shack)

Can type have a gender? Is it even socially acceptable to ask such as question? Putting aside any sort of nonsensical gender bias, it’s absolutely the case that typography can and does suggest a level of masculinity (or a lack thereof).

Today, we’re going to jump into what makes a typeface feminine vs. masculine. More importantly, we’ll talk about why this matters and and how it should influence your design work.

The Masculinity of a Typeface

The idea of a typeface being masculine or feminine may seem a little silly, or even obvious, but it’s an important lesson to learn and consider when working on any design project.

Most of us that live in the developed world are schooled at a very young age in the ways of gender targeted design. If I ask my five year old niece which of the following color schemes she likes best, I can say with 100% certainty that she’ll pick number two. Her brother on the other hand, would pick number one.


Does this mean that these children are sexist? Nope, just that they, like countless other people, have learned to associate certain characteristics with their gender. This carries over into a ton of other aspects of design, from photos and graphics to the complexity of the layout. The area we’re focusing on today is typography.

Consider the following example:


It just seems wrong doesn’t it? Beyond the color, we have the opposition of the concept and the visual representation of that concept through the type. A chainsaw is a masculine device. It’s loud, obnoxious and destroys everything in its path. The typeface on the other hand is smooth, curvy and delicate.

We can flip this example on its head to further prove the point. This time we’ll type out a message that’s quite feminine in a very masculine typeface.


No matter what your level of design experience may be, there’s probably something inside of you that tells you that this is wrong. The word “Ballerina” simply shouldn’t be typed with in ChunkFive!

Chill Out

Do lots of girls like chainsaws and lots of boys like ballet? Sure, and that’s awesome. Like it or not though, hitting a target audience often means leveraging some stereotypes. More on this later, but for now, chill out and don’t get mad at me for saying that pink is feminine.

A Continuum

The examples above are intentionally extreme. You’ll find though that most things won’t be so black and white. For instance, would you say that the example below is feminine or masculine?


You can probably construct an argument either way. Trees are strong, stable and tough. They take generations of abuse and simply stand there asking for more. So they’re masculine, right? On the other hand, they’re attractive and organic. So maybe they’re feminine. The other characteristics aren’t helping much either: green and Helvetica. Both seem pretty neutral. So what gives?

This illustrates that colors, concepts, and typefaces all exist on a continuum. On one side is the masculine ChunkFive black chainsaw and on the other is the Lavanderia pink ballerina. Most everything else though lies somewhere in between the two. Your job as a designer is to decide where something lies on that continuum and how that relates to what you’re trying to communicate.

What Makes a Typeface Masculine or Feminine?

Now that we’ve got our minds wrapped around the basic idea of masculinity and how it pertains to design. Let’s talk about some of the specific characteristics of a typeface and how that translates to the level of masculinity. Most of these are intuitive, the point here is not to state the obvious but to get you to turn your implicit knowledge into explicit knowledge that you consider in each project.


Some typeface families, such as Helvetica, are fairly towards the center of the masculinity continuum. However, within the Helvetica family, you can use boldness to push the otherwise neutral typeface towards being masculine or feminine.


Notice how delicate the thin letters appear in contrast to the bold, powerful example below. There’s actually a second trick at work here as well. Lowercase letters can be a very subtle way to push a design in a feminine direction while all caps can make it more masculine.


In general, the presence of a serif of any kind tends to make a typeface look a little more masculine. This is especially true if it’s a nice strong serif.


Remember the example with ChunkFive from before? Slab serifs are so blocky that they make great typefaces for masculine design.

Shape & Ornamentation

Perhaps the most signifiant piece of this puzzle concerns the overall shape and ornamentation present on a typeface. For example, masculine typefaces tend to be fairly light on ornamentation and contain lots of hard corners and edges. They steer clear of exaggerated curves.

Similarly, feminine typefaces are overly curvy and ornamental. There’s often lots of extra flourish and usually plenty of contrast between the thicks and thins.


These two typefaces serve as a perfect example. Notice how Haymaker is comprised of only uniformly thick straight lines and is literally decorated with spikes. It also only contains uppercase letters. It’s hard to get more masculine! Mission Script is the exact opposite, there’s barely a straight line to be seen.

Stereotypes: Good or Bad?

“Not only are stereotypes not always harmful, they can even be helpful!”


When you go off to college, you learn that the stereotypes that you’ve developed over the course of your life are a negative thing. They’re mean, harmful and inappropriate. That is unless you’re a marketing student like I was, in which case you learn that you can use stereotypes to sell stuff to people.

It’s important to understand that, despite popular opinion, the concept of a stereotype is neither positive nor negative. It’s just an observation. Now, I fully agree that hurtful, unfounded and pointless stereotypes have no place in modern society. For example: “people from small towns in the midwest are just dumb hicks.” As someone who was raised in a tiny speck of a town (200 people!) in Missouri, I obviously completely disagree with this statement.

Let’s change this statement to be more factual and remove any condescension: “people from small towns in the midwest tend to like hunting.” This statement makes no judgment, it just states an observation that I would say is true. I’ve never personally been hunting, so I obviously stand as proof that it’s not a universal statement. However, I do recognize that, on the whole, this is a true statement.

The really crazy part is that, not only are stereotypes not always harmful, they can even be helpful! If you’re from Seattle and you’ve never been to the midwest, then this stereotype will probably discourage you from wearing your “meat is murder” t-shirt when you visit my hometown, unless you’re looking to start a fight with some nice gentlemen who have gun racks in their pickups.

Targeting Your Designs

From a design standpoint, this has huge implications. Even if no one likes to talk about it, designers and marketers use stereotypes daily, especially those concerning gender.

Back when I was in print design, I worked on two major U.S. dog food brands: Cesar and Pedigree. Have a look at each of the two following ads that I put together and consider who the target customer is for each.


In one ad we have a highly manicured purebred dog in the most feminine woman’s room you can imagine. The principles that we went over above are hard at work. The type is thin, contains no serifs and is written in all lowercase letters.

Contrast this with the Pedigree ad, which shows a mutt on a black background with bold, yellow type. It uses a sans-serif typeface as well but its bold, cartoony look pushes it in the masculine direction.

Now, why do you think these ads are designed so differently? Was it arbitrary? Did I just feel a little more manly when I built the Pedigree ad? No! These are based on the carefully established identities of each brand.

Given that dogs don’t buy their own food, it’s not even different types of dogs that are being targeted here, but different customers. Cesar knows that the people who buy their product are the kind of people that will pay more money for less food. This implies a lot of things. They probably have a small dog and are well off financially (as you can see, there are a lot more variables than gender at play here). Conversely, Pedigree is a sort of “every man’s dog food.” Their ads praise the mutt and use emotional appeals to sell their product: what guy doesn’t dream of being a hero?

Who Are You Targeting?

This idea of targeted design is a vitally important concept that so many web designers miss out on. Always always always ask your clients lots of questions about who their site should target. Is it for an independent business woman in her forties or a young, stay at home dad? The answers to these questions should affect your design before you begin to sketch out a single idea.

The next time you fire up Photoshop and start looking for a good font for your current project, think twice about which one you’re choosing. Designers far too often choose a typeface based purely on a whim: this is what I like today. Professional design isn’t about what you like. It’s about achieving a set of goals and appealing to specific types of people. This should be reflected in your headline copy, typefaces, color schemes, and imagery.

Think Vertical: The Influence of Mobile Design on Orientation

WRITTEN BY  (DesignShack)

Mobile design has me sketching more vertically. And I don’t think it is just me.

I am seeing more and more sites across platforms incorporating more vertical components into their overall design. Forget “above the scroll,” let’s talk about going vertical.

Horizontal vs. Vertical Design


For a long time, website design has centered around a pretty distinct “above the scroll” mentality. Designing for tablets and mobile devices requires you to change your default orientation and all of the well-designed mobile sites out there are really adding a vertical influence to design projects, both online and in print.

Many of the same basic principles apply whether you are working horizontally or vertically. Clean typography, a strong color palette and images, and overall organization are important.

Designing in a vertical space is not a new concept though. Print designers have been doing it for years – think about newspapers and magazines as classic examples. What is new is the nearly unlimited vertical possibility. In vertical web projects, you can extend the depth as far as you like (although this is not always recommended).

Create a Vertical Space


Sometimes the first challenge is creating a vertical space that is appropriate for your project. It will happen almost by default when working on any project that includes a mobile counterpart, but what about the website itself? (This, in the current browser environment, will never truly have a consistently vertical shape.)

If you have a blog or a website with a sidebar, your workspace may already be more vertical that you think. Emphasize that shape with other vertical parts, such as a strong up-and-down image or a short text block that reads vertically.

Another option is to extend your space beyond the scroll. Create cascading “screens” that are navigated from top to bottom. This is a concept that was frowned upon for some time but it is gaining ground again because users have been “retrained” to scroll through a website thanks to the abundance of mobile and tablet applications that work in that very way.

You can also plan your design around several vertical spaces by creating a grid of several wide columns. In this configuration, each column has a distinct purpose (very much like a sidebar) that creates a vertical workspace. You can create a single column vertical workspace by narrowing the pixel width of your workspace and filling the rest with a background image.

The key is not to force it. Sometimes you just will not be able to make a vertical space work. If you can’t design using a fully vertical orientation, try to use a few vertical design elements, such as navigation bars or images, within your overall design.

Using Vertical Elements


Sometimes planning a vertical design is about more than just the overall space. Consider using vertical elements in a horizontal space to create an up-and-down feel. Experiment with vertical photos or tall, thin text blocks. But again don’t force it; these tools are only effective if they work with (not against) your content.

Create static elements, such as navigation bars or logos, vertically as well. Just remember to structure these elements so that they remain usable. Navigation bars work best for a scrolling layout when they are not too deep and move with the page as users navigate. (You don’t want users getting frustrated trying to find things.)

You may also use color to establish a more vertical feel to your site. Think about the background – vertical stripes can add a “taller” feel when placed behind other objects.

Vertical Design in Action

Print design has relied on a vertical canvas for hundreds of years. Some of the most well-known publications – The New York Times, USA Today, Vogue and People – have formats that are taller than they are wide.

But it does not end there. Movie posters are one of the most well-known examples of vertically-oriented design projects.

More and more business cards, though most often printed horizontally, are taking on a vertical format. Why? Because it makes them stand out among the hundreds of others in the stack. The same is true for other printed promotional materials such as magnets and stickers. For print projects, the decision to use a vertical orientation when most others are working horizontally can really add some pop and flair to the project.

Vertical Considerations

“Vertical layouts can get weighty and hard to navigate in a hurry.”

Vertical layouts can get weighty and hard to navigate in a hurry. Make sure to give ample weight to headers and navigational tools when designing in a vertical space so that your user (or reader) does not lose track of what they are looking at.

You may consider making text a few points larger (and with additional leading) when using a vertical format and you will likely want to include navigational devices (whether they be scroll bars or descriptions) that follow the user through the website.

Also be wary of the horizontal space in the vertical layout. Resist the temptation to force a horizontal style into a different space; it will likely fall short. You don’t want to mash other elements together just to make them fit in a narrower space. Look at ways to rearrange or stack elements so that the workspace does not feel crowded.

Vertical Love

Here are a few of sites that are taking the vertical concept and running.



The site is built vertically and they help you navigate by using the scroll to “open” the bottle and rest of the site. (This never gets old.)

Enviro Homes


This navigation bar at the top of this vertically-based site, adjusts so that you always have the perfect visual on your computer screen.

Lotta Nieminen


This site uses vertical columns to establish shape. The mixing of rectangles encourages you to move through the page.

100% Pure New Zealand


Scrolling down this page creates a video effect that allows you to see more of New Zealand.


I love the resurgence and emphasis that mobile concepts are having on vertically-orientated projects. Changing user environments and the emergence of responsive design are also influencing this trend.

Overall, designing vertically is really no different than its horizontal counterpart. It may be a little unfamiliar in the beginning, but by using the same tools and concepts that relate to good design in a horizontal scheme you can create great vertical projects. If you are worried about the outcome, start small and develop a few vertical parts to incorporate into a project before going completely vertical. You might just find how much you enjoy the new view!

Image Sources: Illyissimo, Food Sense, Simon Collison and Spigot Design.