Category Archives: Uncategorized

Use of Web Design To Create a Billing Form

Each ecommerce site has its own checkout flow moving the user from a shopping cart to the final purchase. This differs based on what the user is buying and their intentions, but finalizing payment is always the toughest part.

Your billing fields need to really keep visitors engaged and encourage them to complete the checkout process. I’d like to share some usability tips you can follow to improve your billing form designs and increase user checkout conversions.

Clarify Intent

Your goal is to design forms that encourage users to buy. So you want to make this process as simple as possible, especially at the billing phase where money is on the line.

There is no single way to clarify an entire billing form. You just need to keep each field clear and concise, never let the user feel confused or unsure of their decision to check out.

Here are some techniques you should keep in mind that work well:

  • Larger typography
  • Labels instead of placeholders(or both)
  • Extra padding between fields
  • Custom tabindex for easier navigation

The credit card icons make it crystal clear what the user is selecting as a payment method. The same goes for icons lower in the field which clarify the location of CVV numbers.

Do everything in your power to let the user know exactly what they’re doing at each stage of the billing form. There should be no ambiguous terms, no unclear directions, and plenty of tooltips/icons to answer any questions along the way.

Custom Input Spacing

Some data requires a certain text format like phone numbers and credit cards. This spacing can be dynamically generated on-the-fly using JavaScript and it’s one of the best techniques you can add to your website.

Custom spacing lets users know they’re on the right track when filling out form fields.

You can do this with zip codes where the form automatically tabs onto the next field once the user enters the proper digits for a zip code. Same with phone numbers where you can auto-style the digits to match a phone number. You can see this on eBay’s checkout form.

But the most useful is the credit card 4-digit spacing format. Credit card numbers are long and they’re easy to screw up. An incorrect CC number also means the order will completely backfire.

This custom CC spacing in your billing field makes it that much easier for customers to enter their numbers and double-check that they’re correct. You can find a nice example on the BodyBuilding checkout screen which also includes error messages when you have an invalid entry.

There are tons of free plugins you can use to create the auto-formatted text. Most run on jQuery but you can find some vanilla JS solutions too.

These are the best ones I’ve found:

Simplify The Action

Some checkout forms are longer than others so the process always feels different for every website. This can be confusing for many visitors and it’s one reason why ecommerce stalled for so long in the early 2000s.

But regardless of your form’s length there are two ways to design around this:

  • Smaller forms should try to keep everything on one page for simplicity
  • Larger billing forms should break into steps with breadcrumbs

For example, the smaller billing form on SEMrush is fantastic. Very quick to use, easy to read and everything you need to know is clearly visible on the page.

But I don’t mind a longer checkout process so long as it has breadcrumbs. These offer a clear indicator of how far the user has traveled into the checkout process and how much longer they have before completion.

This confidence makes it easier for someone to commit to the billing form at each step. If they have no idea when the checkout process ends they might get confused, anxious, or just annoyed and leave.

Breadcrumbs are huge and I absolutely recommend adding them to larger billing forms. The Wiggle checkout uses clear breadcrumbs at the top of each form page.

Smaller & larger billing forms can work well just varying different techniques. Be willing to try both!

Run some A/B split tests and see which style performs better. You might be surprised at the results.

Recap The Purchase

Once the user enters their billing information it can be tough to hit that final “submit” button. Hesitation is the death of conversion.

By recapping the purchase order you give customers a final peace of mind. They can see everything at once from the items they’re purchasing to the total fees(plus processing) and even the delivery date if applicable.

GitHub’s pro upgrade billing field recaps the purchase all on one page. It clarifies how often you’ll be billed, what the final fee is, and when you can expect the next fee. Most fields are filled out from your profile so if you have an account this process is very quick.

Another example is Amazon, the mother of all ecommerce shops.

Once you enter all your details like shipping address & payment info, one final screen recaps the whole order to make sure you really understand what you’re purchasing.

This reduces returns for wrong items and helps the customer feel confident when they press that “purchase” button.

Recapping the order can be tough on a smaller billing form. But just be openly transparent with your customers and share as much detail as possible.

Wrapping Up

Your site’s billing form is the only thing standing between a potential customer and a paying customer. That’s why form optimization is so important.

I hope these trends can help you craft usable and encouraging billing forms that’ll bring more revenue to your shop and all of your clients. Optimization is an ongoing process but if you’re constantly testing new ideas you’ll always be ahead of the competition.

Create a Content Registration Form that Takes People’s Attention

The best email opt-in forms use a lead magnet to draw attention and gather emails. You can spend weeks tweaking a signup form but the biggest factor is usually the content offer.

There’s a special type of lead magnet called a content upgrade which gets placed on a relevant piece of content. This usually converts much higher and it’s a great way to add value to your subscribers.

In this post I’ll explain the basics of an e-mail opt-in content upgrade, how you can design one yourself, and some examples you can study to get the ball rolling.

Intro To Content Upgrades

The idea behind a content upgrade is simple: you offer something valuable to visitors in exchange for their email.

This valuable item could be a free PDF guide, icon set, photography pack, or really anything. But this technique works best on specific posts where your free resource actually upgrades the existing content.

So for example, if you write a post about “best icon design styles” you might add a small opt-in form at the bottom of the article offering a freebie icon set. When the user enters their e-mail to sign up they get a link to download the icon pack & they get added to your list.

This resource is relevant to the content and valuable to the reader. It’s a fantastic example and just one of many you could run.

Backlink expert Brian Dean has this tactic scattered on many of his Backlinko posts and they work well. He suggests thinking outside the typical “norms” you see in most blogs.

Try to offer genuine value to your readers and make it almost impossible for them to pass over your freebie.

No matter what you offer the end result is always the same. You want to add more subscribers to your email list. And the way you’re trying to gain those subscribers is always through some type of content upgrade.

You just need to decide what sort of upgrade you can push that’ll encourage more signups. That’s the secret sauce to any great content upgrade field.

What To Offer

If you’re stuck for ideas you should find posts that get the most traffic and design around those.

Dig through your analytics and find your top performing pages. Think about what sort of resource(s) you could offer on that page that might convert.

One thing people don’t want is something unrelated to the content. If people land on your post about React.js they probably don’t want a PDF on the 10 upcoming design trends for this year.

Instead they might want a PDF on React.js trends, or the best learning resources, or maybe a look over the history of React.js as a PDF/infographic.

The sky’s the limit on what you can offer. Just make sure it’s fairly short and genuinely relevant to the content.

Here are some ideas to get you started:

  • A small how-to or PDF guide
  • Free resources like photos, icons, code snippets
  • Extra tips/tricks on the subject
  • Behind-the-scenes tips from experts in the industry
  • A detailed “getting started” guide or case study

Picking a resource to offer is just the first step, but it’s an important one. If the freebie sucks then you haven’t really upgraded your content at all!

This example is a post about floating sidebars in web design. The author has a content upgrade with a swipe file of copy, code, and resources for anyone building floating sidebars. This relates directly to the post and it probably wasn’t too difficult to compile these resources either.

Don’t spend too much time thinking up ideas but make sure you settle on one you like. From there you can develop the resource and edit your blog post with an opt-in form.

And if you’re really stuck on ideas then read through this article to get the juices flowing.

Marketing Your Upgrade

How you showcase the upgrade is yet another crucial aspect of the opn-in form. You might be offering the coolest PDF guide in the world. But if nobody knows what it is then why would they want it?

Written copy sells and it’s always something you need to consider. Sometimes you can get away with smaller text-based forms or simple CTA buttons. The only way to know is through A/B testing so try a lot of different styles to see what works.

And try adding multiple opt-in fields within the post. You could have one near the beginning, another fixed in the middle, and one at the very end of the article. This way readers continually see what you’re offering and hopefully it draws their attention.

The example above from Authority Hacker doesn’t use any special graphics or previews. It just has large text with bright colors to grab your attention.

This is certainly a way to go if you can’t find any graphics to use. But you might see better results if you can get screenshots from your resource added to the form.

A much simpler example can be seen at the bottom of this post by Wishpond. It just has a blue CTA button with a bit of white text.

Each piece of content has a unique target audience so you’ll want to design your opt-ins for those readers. There isn’t really a “right” way to do this.

I recommend studying your favorite blogs and keep a sharp eye for these content upgrades. They’re hard to miss and the ones you do miss probably aren’t that good.

Read their copy and see how they push their upgrade. Does it make you want to sign up? Is there incentive?

This Forbes post just has a simple text link near the bottom of the article. No button, no graphics, nothing. Just a link pushing an e-book on the billionaire’s secrets of wealth, a very magnetic link which ultimately leads to this lander.

Follow whatever marketing strategies work best for your resource. Be willing to test and don’t get stuck with one specific method.

The more marketing techniques you try the more likely you are to find one that converts well.

Visuals Sell

Along with amazing sales copy you should also try adding visuals to the top-in form.

These can be simple graphics, mockups, photographs, or pretty much anything that represents your freebie. It doesn’t matter what you’re giving away as long as it’s clearly noticeable.

Take for example this opt-in field in the sidebar of Michael Hyatt’s website.

It specifically targets the headline of the post by promoting a free e-book on shaving 10 hours off your workweek. The book cover mockup is placed into the form to draw attention.

You can find tons of free ebook mockup PSDs in Google which you can modify for your opt-in field. Just take the front cover design and paste it onto these skewed mockups. A gorgeous eye-catching visual ready in minutes.

But visuals aren’t just pictures or graphics. You also want to think about your opt-in field colors, fonts, and related aesthetics like spacing.

According to Brian Dean’s post a yellow opt-in box near the top works very well. This color draws attention and if you’re offering something cool it will get people interested.

But just because one visual technique works on Brian’s blog doesn’t mean it’ll work for you.

Testing is the name of the game so don’t get discouraged if you can’t find a winning design right away. Just be consistent and keep trying.

A great content upgrade doesn’t always sell itself so you’ll need to push for growth. But it also doesn’t take much to get people interested. Place yourself in the shoes of a typical visitor and design your opt-in form with the goal of getting their attention.

Moving Forward

Content upgrades should become a staple for any site with a newsletter. They do take patience to set up and you’ll need to put in effort creating a valuable asset.

But if you already have a large blog with a sizable audience then you’ll have content ready to optimize. Hopefully the tips & examples in this post can get you started on the right foot.

How to Design the Involvement of Newsletter Layouts

Newsletters still offer the best way to reach your audience directly and increase sales. But if you’ve never managed an email list before this can be an intimidating process.

Once you have a list you’ll need to send out emails that connect with subscribers and offer real value. This means great content and great design all wrapped up in a pretty bow.

Let’s dig into the UX side of email design to consider what makes an email engaging. This goes far beyond a great headline and once you know how to design emails you’ll see incredible results with your open rates.

Single-Column Layouts

Emails need to be designed smaller because email readers like Outlook have more restrictions than web browsers. This means your average newsletter is rarely larger than 600px wide, so it’s best to use a 1-column layout or at most a 2-column layout.

When you plan your content it’s good to organize this into a single column format. Think about how you can organize your writing so it flows down the page and offers an easy reading experience.

Take for example the WistiaFest 2017 newsletter design. Each section of the design spans the entire width of the newsletter so content streams down straight in a clear linear fashion.

Slanted angles and custom graphics help loosen up the stiffness, but ultimately it’s still just a one column layout.

You’ll want to be conscious of how your content is organized and how readers will consume this content.

If you use alternating patterns with a 2-col design you can split your layout into two columns as well. Take for example this design from The Short List.

Each photo alternates in a grid structure alongside content and a CTA.

You can follow this same two-column strategy if your newsletter has enough content to match. Just make sure you leave plenty of room to read the information and to hopefully make your email responsive as well.

Include A Strong CTA

If you’re looking to increase engagement then you need a call to action.

This is a button or link that encourages the user to click and do something. This could get people to continue shopping on your store, or to read through your latest blog post, or to download your new ebook.

Regardless of what you send in your email it’s always good to include a CTA. And even if you’ve never designed a CTA before you can learn a lot by studying other examples.

Here’s a design by Postmades with a share $100 message across the whole email. The entire purpose of this email is to have people send a $100 free delivery credit to any one of their friends using a special code.

The CTA reads “Send $100” which is pretty clear.

When writing the button copy always stay focused and be quick. Emails are like a sign in a shop window; skimmed quickly and meant to lure people inside.

Another cool example is this design from American Airlines. The CTA “check in now” is pretty direct and there’s no confusion about the purpose of this email.

You can also try running two CTAs next to each other if you have a larger audience.

This works if you have a more general goal in mind with a large subscriber base. For example Adidas has two bright yellow CTAs in their email: men’s and women’s sneakers.

The goal is to get people onto the website and you’ll want to send them to a place where they might actually buy.

All of these ideas are just examples so use your own best judgement and see what type of CTA works best for your newsletter.

Images Above The Fold

Since emails are so basic you can’t really do a lot with CSS3. They also don’t have a navigation since you just want to get visitors right onto your website.

Images are great for immediately grabbing attention and selling an idea. That’s why I always recommend adding a highly-engaging image right above the fold near in the header of your newsletter.

This image could be a stock photo or a illustration/logo for your company’s brand. It could also be a product photo like this one from the iPhone 7 red launch.

Following in Apple’s traditional minimalist style it makes sense that their photo is very basic.

However this is all you need to grab attention if your product is interesting enough. The goal is to have just enough visual information to get people curious and to click your CTA.

This slightly different example from Of a Kind pushes specific products with real sales photos.

Great photography can always pre-sell whatever you want visitors engaging with. Sometimes that is literally selling something, but other times you’ll want to sell a blog post or maybe your social media profiles.

Use photos as engagement tools to grab attention and share information visually along with text.

Box & Grid Lists

If you get a lot of newsletters then you probably recognize the box/grid layout design.

It’s very common with emails because they have a few distinct traits:

  • Narrow page designs
  • Short copy
  • Meant to be consumed quickly

Subscribers typically open your newsletter with only a few minutes(or seconds) to spare. Organizing the content into a nice grid is the best way to showcase everything you’re promoting.

This holiday newsletter by Google is a fantastic example of the grid system promoting their products.

You’ll find a clean product image floating to the right along with a small headline and a CTA link on the left. Once the reader recognizes this pattern they’ll have an easier time skimming the document.

When you design with boxes you’re trying to grab attention and clarify the purpose of your newsletter. High contrast colors have the same effect so they’re perfect if you can design such a layout.

Notice how the Bose newsletter also adds incredible photography into each box.

Combine all the techniques from this post into your design to further increase engagement.

You don’t have to look at these trends as separate items. They’re individual pieces that ultimately make up a great newsletter design.

If you’ve never created a newsletter before then these tips will prove more than valuable in the design process.

As long as you focus on simplicity and place the user experience first you’ll create a very engaging newsletter.

Best Practices Creating UX Website Design

User experience is an integral part of any website design and there is no doubt about that. However if there’s a single industry where user experience matters more than anything else is, of course, hospitality.

Hospitality is all about meeting and exceeding guest expectations and providing stellar guest experience from the very first touch point till the last.

And in the digital era that we live in, hotel website is quite often where the guest experience with a hotel starts. At least that’s what every hotel brand strives for: direct bookings. So as a hotel owner you want to make sure the user experience of your website is as good as the guest experience in the hotel itself.

To do so you need to understand why travelers visit your website in the first place. What are the main traveler intentions? Once you know the answer to this question, you will be able to meet traveler expectations with a matching, user-friendly website.

Understanding Traveler User Behavior

As a designer you will need a little bit more insights into hospitality industry and traveler behavior analysis to come up with a well-thought user experience flow that actually converts.

According to a study conducted by Google, on average 60% of travelers are turning to search engines first vs. hotel website for online trip planning.

This means that when users visit your hotel website they most probably have already done some sort of research and want to;

  1. Compare prices on your website versus online travel agencies, like and
  2. Get more information about the hotel, like extra services, more photos, videos.
  3. Check to see if there are any special deals or package offers for selected dates.
  4. Contact the hotel directly to arrange for custom requests or direct bookings.

Generally, these are the main guest intentions when visiting a hotel website.

Now let’s see how exactly we can design the user experience to cater to those needs.

1. Optimize Booking Flow for Conversions

This should be your mantra. Nothing else matters, not your aesthetics or taste, not even user’s taste. You might think this is not how user experience should work, but as long as the website converts well, you are doing the right thing. And that said there is no success formula for a hotel website.

However, there are some best practices you should consider.

FIrstly, the booking window should always be in a visible spot and be clear with less design and more usability.

Secondly, users need to be able to compare room types, rate types easily to make decisions quickly. We need to help them decide by clearly articulating rate differences and providing a good amount of visuals for room types.

Last but not least, ask as little information as possible upon check out. Make sure to provide a clear summary of the booking and optimize the checkout form according to numerous research and best practices.

2. Think Mobile First

There is no need to explain the importance of having a mobile ready website. But we should stress the benefits of thinking mobile first, which means designing for mobile screens first and then taking it all the way to the biggest screens possible.

This is especially important for travel industry where users make purchase/booking decisions on the go and there is a sense of urgency, which means you need to design for maximum usability rather than maximum functionality. Although it is best to provide the same functionality to mobile users as to the web users, but if you can’t, you might want to provide a link to view the full website.

3. Visual is Key

When it comes to hotel bookings, users crave high quality photos of every single corner of your hotel, including hotel grounds, indoor, exterior, all of the facilities and especially room photos. One of the reasons users check multiple websites before booking is to find the most accurate information about the hotel, better quality photos, videos to make a more informed decision.

As a part of flawless hotel user experience, it is important to create a visually compelling website. Keep in mind though that visually heavy website tend to load slowly which is a huge issue for mobile users.  According to Kissmetrics, “40% of people will abandon a site if it takes longer than three seconds to load.”

So be sure to implement all of the techniques for faster loading.

4. Provide better Customer Experience

User experience and customer experience in a traditional sense are closely related and can’t exist without one another. Your website UX can thus make or break your hotel’s overall guest experience. So it’s best to start providing exceptional level of customer service from the very first touchpoint which is quite often your website. This is one of the biggest advantages of a hotel brand website as opposed to aggregators like, Expedia, etc. These online travel agencies can never provide the personalized guest service on their website the way a hotel can.

First, make sure there are multiple ways to get in touch with your hotel on your website; landline phone number, skype, contact form for reservation related inquires and special requests, as well as a live chat.

Secondly, offer special add-on services, which are not available on any other sales channel. It can be as simple as a welcome drink, but you can also go all the way and offer all your paid services to be booked online, perhaps with a small discount.

These will make the user feel the difference when booking with a hotel directly.

5. Top It With Credibility and Social Proof

One of the most important factors affecting customer buying decisions is social proof, which comes in so many different forms: testimonials, reviews, video blogs, social following, etc. Hotel guests are no exception. In fact, according to Tripadvisor, “77% of travelers always reference reviews before booking travel accommodation”. But the tricky part here is the source of the reviews.

If you want to enhance your website’s credibility and provide social proof for your guests, you need to showcase reviews from a trusted and well-known source, which is undoubtedly – Tripadvisor.

While this might not be the most aesthetically pleasing addition to your website design, but adding a tripadvisor reviews widget to your homepage or designated landing page is much more convincing than your own website reviews.

Final Thoughts

Building a strong hotel website is a challenge both in terms of marketing and in terms of UX design. It usually takes more than one iteration to end up with a functional, conversion-optimized and user-friendly website, so make sure to make data-backed decisions and always test with real users.

How to Install Consistency in Your Web Design

There’s tremendous value in consistency of digital interfaces. People browsing the web encounter dozens of websites that all have different styles, yet most feature very similar page elements.

Most designers don’t even think about these features. Page headers, navigation menus, body copy, CTA buttons, the list seems endless.

By designing with consistency you’ll learn how to create interfaces that encourage typical user behaviors. Your layouts will build trust and teach users repeatable patterns that help them work through your site much quicker.

Design For User Expectations

Most users expect websites to work a certain way. It should scroll vertically, links should be clickable, and the navigation should be visible right from the first page load.

How you design these expectations is completely up to you. But when you’re designing for consistency you want to keep a clear uniform design across the entire layout.

For visual consistency on the web I think is a pristine example.

This site has many portals linking to their forums, their eCommerce shop, and their online help guides. All of these pages have the same design and the same navigation to keep them consistent with the entire site.

Users don’t want to think. They just want to act and get results. Consistent design helps this happen.

Do the thinking for your user to understand what they need. How would you design a blog page to encourage reading? What about an ecommerce shop to encourage checkouts?

Think about these questions yourself and apply them to your web projects. Which elements should be consistent on every page? This line of thinking always leads to solutions.

The homepage of Sketch is very consistent with certain user behaviors and expectations. The page has two CTAs: one for downloading a demo and one for buying the program.

But not everyone who visits the site wants either of those options. The top nav becomes the obvious next step.

Someone new to the site might care about features or how Sketch works. But an existing user might want to look into extensions or get support.

Add consistent elements with clear in goals. If you know what users expect to do on your site then you can design for those expectations.

One more point to consider is with redesigning a layout. The popular social news site Reddit has been online for well over 10 years. Over that time they have made a few changes, but generally the site looks very similar today as it did back in 2005.

If you’re making minor changes to improve performance and optimize the user experience that’s always welcome. But drastic abrupt changes to a design usually throw people off.

Consistency goes beyond keeping pages similar and usable. It can also mean staying consistent with redesigns if your site already works well.

Intuitive Navigation

Users should understand a lot about your site just from the header. This area should explain what the site does and what it’s about, not to mention the top navigation links.

A well-designed navigation isn’t enough. You’ll also want great copy to sell the pages and let visitors know exactly what’s on your site.

Nav text can be restyled in my ways including font size, writing style, and interface elements like hamburger menus for responsive navigations. The key is to stay consistent and keep these links easy to use.

The nav links on P’unk Avenue are quite unique and rather detailed. But they work well for this site because they help explain what’s on each page.

Their nav links feature descriptions on larger screens, but rely on the hamburger sliding menu with simple links for smaller screens. An excellent design style for anyone creating custom layouts with detailed aesthetics.

For larger nav menus you might have to add sub-menus or links in a larger list. The Guardian has a fine example of this on their website.

When you browse through any of the top categories you’ll get a sub-menu directly underneath. This can work like a breadcrumbs bar or sub-categories based on the primary link.

The consistent style and multi-link menus are great for big sites and blogs. As users get familiar with those links they’ll have an easier time browsing through content.

Repeat Layout Styles

This technique breeds consistency and it can work on multi-page sites or singular landing pages.

The goal is to re-use similar elements all throughout the page, but with different content & graphics.

By repeating certain styles you’re creating a theme on the site and building comfort with users. Consistency breeds familiarity and this is what you should be going for.

Notice the repeated patterns on the Webflow homepage that alternate between colors and different design styles.

Each section features a screenshot of the app listed alongside main site content. This style is beautiful and it’s one of the cleaner ways to craft a consistent design.

Note this style is predominantly found on the Webflow homepage but it could be repeated elsewhere. That’s why consistent elements are easier to use across the whole site.

But aside from page elements you can also repeat styles in your design. Take a look at Algolia for one example.

This site uses heavy diagonal lines between page sections along with darker background colors. Headers all have a small underline and the text all follows a similar size & thickness.

If you dig deeper into the site you’ll notice the box shadow effect is replicated throughout. This is a small touch but it’s one of the easiest ways to build visual consistency.

Try not to get too lost in repetitive page elements.

Instead think about how you can make the interface easier to use and what that might entail. Most of the time you clone what you’ve already done and keep using those patterns.

Keep Branding Consistent

Web branding is a deep topic and it’s more than a simple identity.

You also need to consider page colors, textures, typefaces, padding, and icons/elements related to the brand. There are no right or wrong ways to brand, just some ways that work better for some websites.

MailChimp does this by repeating their branded monkey friend everywhere. The site has a fixed top navigation which includes this logo on every page.

But you’ll also notice similar typeface designs and colors with similar text styles. This may seem like an obvious thing to do, but some designers underestimate how much this can impact branding.

An even better example is the Docker homepage with their cargo whale logo.


This creature finds its way into almost every part of the site. The header, the footer, and most content pages also feature illustrations of our Docker ocean friend.

You don’t need to create a mascot just to build consistency. It’s merely one more tool you have in your arsenal for digital branding.

If you study some of your favorite sites you may recognize subtleties you never noticed before. This is the best way to get ideas for creating consistent branding in your own projects.

Wrapping Up

As you browse the web you’ll notice consistency across nearly every site. But since each project is different you need to think about the user’s needs before designing anything.

The one thing you can guarantee is that every single user wants a consistent experience. And I hope these tips can get you thinking more about consistency in your everyday web design work.

Differences in User Design and Experience

The design world is abuzz with the rise of online magazines. But the vast majority of these sites run on blogging platforms like WordPress, and they operate almost exactly like traditional weblogs.

So where does someone draw the line between a traditional blog and an online magazine? And if you’re thinking of launching a new blog/magazine how do you differentiate yourself?

Let’s delve into this subject from a designer’s perspective. The growth of online magazines means that more publications are going digital with plenty of opportunity for newcomers to get into the action.

Modern Online Publishing

Digital publications have such a wide audience that it almost makes more sense to go digital over print. Most people have digital e-readers and in this past year mobile use surpassed desktop for the first time ever.

But what makes an online publication seem more “authoritative” like a magazine? What differentiates between general blogs and online magazines like Time, Inc, and Forbes?

It seems like many factors are involved but this concept of “authority” is definitely a big one, both in design and content.

For example the TechCrunch wiki entry doesn’t describe the site as a blog at all. Yet if you go back far enough you’ll see it was called a blog when it first started.

The same can be said for Mashable which is now a huge online media publisher.

So what differentiates online publishing from “blogging”? The act of writing content and publishing online is widely considered blogging, but a “blog” carries the connotation of being:

  • Generally personal in nature(maybe 1 writer)
  • Small in audience and not much traffic
  • Not made specifically to earn money

I consider these ideas to be generally true, yet all 3 of these rules can be broken.

A blog could certainly hire writers, and blogs can have massive audiences and make good money. The creator of the Modest Man blog grew his audience and advertising base to reach $10k/mo and it still feels like a blog.

Not to mention Pinch of Yum calls itself a food blog, yet based on their income reports the blog is really a fulltime business.

This proves there shouldn’t be an inherent negative connotation with blogging. Online magazines just have larger publishing schedules and generally run more authoritative brands

This is the real crux of the discussion. I’d argue the real difference is in branding, style, and presentation. This can all be explained better using examples so let’s take a look at this blog/magazine divide to see where the line is.

Magazine-Style Theming

If you want to be considered an online magazine then you’ll want a magazine theme.

This is a crucial aspect of running a site because looks do matter. Visitors judge your website in the blink of an eye, usually between 2-4 seconds. Your design should immediately let visitors know that you’re an authority on whatever subject you cover.

If you already have some authority then you can get by with simple designs like Craigslist.

But with millions of blogs already online you’re competing against an army of sites, many using very poor designs. If yours blends into the crowd then you stand no chance of ever breaking outside the label of a “generic blog”.

Take a look at Fast Company’s homepage and look at the diverse content styles. Many different thumbnails, headers, and column structures all work together creating a unique magazine look.

Following this pattern on your homepage is a good first step to appear more like a magazine. Even if you only update once or twice a month it’s better to look authoritative right away.

If you’re looking for examples to whet your inspiration these posts should get you started:

  • 5 of the Best Designed Magazine Websites
  • 20+ Outstanding Magazine Style Website Designs
  • 30 Modern Magazine Style Web Designs

Authoritative Branding

To move beyond a simple blog you need to offer more than what most blogs offer. You need to create a brand around your website and publish more than just articles.

Look at the incredible rise of Smashing Magazine. Many would still call them “just a blog”.

But if you dig deeper you’ll notice it’s really a massive media company. They publish their own books and host their own conference.

Smashing Magazine isn’t just a digital blog anymore. It’s a complete authoritative brand in the web design/dev space.

You certainly don’t need to push your blog this hard by launching a conference every year under your brand. There are much smaller projects you can tackle to build your site’s credibility.

These are 4 easy ones that seem to work well:

  • Offer print/digital magazine subscriptions
  • Start a dope podcast
  • Create a related newsletter(or a few!)
  • Setup your own ecommerce/dropshipping shop

The first point on that list may seem crazy. But it actually works well for the site Texas Monthly.

Notice that site is basically a blog, yet it gives the impression of being a newspaper/magazine.

They have an entire magazine archive where you can browse and subscribe to all their issues. This is one strategy that requires a lot of effort, but it also incentivizes readers to sign up to your site and ideally pay for the value.

This lets you create a true magazine presence while also monetizing your content. The toughest part is actually getting people to subscribe. But that’s just part of online publishing!

If you want to push beyond blogging try to find ways to expand outside your writing.

Content & Authorship

There’s usually a clear divide between the content you find on a blog and what you find on magazine sites.

Think about the type of content you’re publishing. Is it all personal opinions, quick posts, random thoughts or colloquial reviews? That’s usually the type of content you find on a blog. And that’s totally fine!

For example Malan Darras runs a personal blog covering his work in marketing, music, and just general life. It’s an awesome blog and it never needs to be anything more than that.

Understand your content goals and clarify these early on. A large magazine-style content site is not for everyone. It usually requires some level of journalistic integrity and a clear goal with content.

Magazines lean towards journalistic content because this is where they originally come from. Industry news in trade magazines, op-ed pieces, interviews, how-tos and a mix of related content all come together to form an entertaining magazine.

But remember that longform content isn’t always the right goal either. Sometimes you just need to follow whatever you want to publish, even if it seems ridiculous.

Few people look to BuzzFeed for authoritative news but the site still earns well and it uses virality to its advantage.

One other point to mention is authorship. Since blogs are typically a solo effort you won’t always find multiple authors or custom author bios. However magazines typically hire writers or bring on guest writers, so adding bios to your posts can give this impression.

An author bio doesn’t guarantee much authority. But it definitely helps!

If you can appear to be a larger site to most visitors then you’ll leave a lasting impression that goes beyond simple blogging.

Run It Like A Business

Tons of people launch blogs just for fun and maybe a little extra cash on the side.

But nobody launches a magazine for fun. Publishing is a business, and if you plan to launch one you have to treat it as such.

This isn’t something the user will see on your homepage directly. It’s subtle.

It’s the way you brand your site, your content guidelines, your newsletter layouts.

Online magazines operate like for-profit businesses with KPIs and clear goals. If you can run your blog like a business then it might scale large enough to actually become one.

Let The Labels Go

Remember that the goal of both blogs & magazines is to publish great content and share it with the world. The labels “blog” and “magazine” are still new to websites, and online magazines were basically non existent 10 years ago.

But there is most certainly a difference between blogs & online magazines. The line just isn’t very clear and it’s something we’ll discover more as time goes on.

I do hope this article clarifies some key points that can help anyone turn a blog from a simple WordPress site into an authoritative and trustworthy magazine brand. And if you have any other ideas or suggestions drop a line in the comments area below.

Tips on How to Protect Your Design Working on the Internet

Are you worried about people stealing your designs after you publish them on the web?

Web designers are faced with a “catch 22” situation. To attract new clients, they must showcase their work and put it on display on the internet. Yet, by doing so, they aremore vulnerable to thievery. The possibility of people taking their work and re-publishing it or using it for their own gain without giving the author attribution is a grim reality.

It’s all too easy for internet users to click and save a graphic and insert it into a blog or website without the creator even knowing it is happening.

Inspiration vs. Stealing

Have you ever been told your work “inspired” someone when you know they stole it?

There is a fine line between inspiration and stealing. On one hand, your design can inspire someone to create a completely unique piece. Yet, in other cases, a fellow web designer may borrow elements of your design and “change it up” into a different graphic. The offender may cite inspiration as the main reason and defend the fact that it is different from the original. Regardless of what the person says, you will know the truth.

This is a common occurrence with designers who are not skilled enough to complete a job. They swipe elements from existing designs hoping the client won’t notice.

You know this is stealing even though it can be misconstrued as inspiration.

With so many loopholes it is difficult to keep track of your designs and keep them protected.

Good Intentions

Many people who re-post graphics are not aware of the illegal nature of their actions. People think that the internet and its images are available to anyone who wants them.

I have witnessed many people who run high-performing blogs take images from a random Google search and use them on their websites. Many were not even aware it was a legal issue.

In other cases, people will “steal” designs that don’t have any copyright information stated. They do not realize that an image is copyrighted material once it is published, regardless of the lack of statements surrounding it.

The Problem

As a web/graphic designer, it can be disheartening and frustrating to see your work published without ever receiving the notoriety from it. Those images and designs are your babies and they deserve proper respect and attribution, not to mention stealing them is a direct violation of copyright law.

What do you do when you notice someone stealing your work?

Fighting copyright issues can turn into a huge mess. Thankfully, simple communication can thwart a potential battle, especially if the offender was unaware of copyright laws. However, in other more serious cases, designers will simply throw in the towel due to a lack of money and resources to fight.

Protect Your Work

Do you have a team of legal experts ready to prosecute people who steal your work? Unless you have the budget of, this is not a likely scenario. Most freelance web designers do not have thousands of dollars to spend on legal assistance should anyone steal their content, so they must devise ways to protect their work and prevent it from misuse.

There are many actions you can take to protect your work online. While not all will be 100% successful, they will definitely tip the scales in your favor.

Copyright disclaimers – Consider posting a notice of copyright or “all rights reserved” on your website where visitors can see it along with a statement describing the illegal nature of stealing your work. It may not stop every perpetrator, but it will notify those who are unaware of copyright laws about stealing content and also scare others into submission. It’s similar to posting an alarm sign in front of your house to deter thieves from entering. Even if you don’t have an actual alarm system, the thought of possibly getting caught is enough to deter them.

Watermarks – Watermarks are a good deterrent and can prevent people from stealing your images. Designers typically do not like changing the look of their designs with watermarks, but many feel they are the best deterrent to theft. Some resort to a small signature and website logo on the bottom of the design as well.

Copyscape – Use Copyscape to search for duplicate content online. I use the service regularly to assess whether my writers’ content is unique, and also to check the duplication of my personal content.

Take Charge With Licensing

When you post your creative work online, copyright laws help to prevent the copying of your work and control its distribution.

If an individual steals your design and uses it for an ad, it is a direct violation of copyright law. The action is also in question if the individual incorporates the copyrighted work to create a derivative without your permission.

Even though these actions are against the law, people continue to steal, and creative professionals find it taxing to run after thieves whenever they suspect foul play. So, instead of hiding their creative designs, they solve this problem by allowing the public to use their work under the terms they set forth. This is what we refer to as licensing.

Licensing makes your creative work available to the public so you can control its distribution. Licensing also deters copyright infringement and sends thieves off to steal other images not protected by a license.

As the copyright holder, you can control the use of your design work. Certain licenses allow widespread use as long as the person credits the author. Other licenses exert tighter controls on copying and derivative works.

Creative Commons is one of the most popular open source licenses for creative professionals. It offers three layers of licenses that anyone using the internet can understand.

When you use licenses to protect your work, you still own all the copyrights, but you allow people to use your work as you deem acceptable.

The Licenses

1. Attribution

Attribution is the most lenient of the licenses. It allows others to use and distribute your work and create derivatives as long as they give you credit.

2. Attribution NonCommercial

Under this license, people can use and tweak your work and copy it only for non-commercial use provided they give you credit.

3. Attribution-ShareAlike

This license is similar to the open source software license in that any new work created from your original work must be licensed in the same manner. People who use or revamp your work for commercial purposes must credit you and all derivatives will carry the identical license. Wikipedia uses this license.

4. Attribution-NoDerivs

When you opt for the “no derivatives” license, you permit people to redistribute your work as long as they do not change it or modify it in any way. The graphics and images must remain unchanged and the publisher must give you credit.

5. Attribution-NonCommercial-ShareAlike

This license is similar to the Attribution-ShareAlike; however; it prohibits the use of your work for commercial purposes.

6. Attribution-NonCommercial-NoDerivs

For those web designers seeking the most restrictive license, this one is ideal for you. It prohibits the use of your work for commercial purposes. People can download and share your images if they credit you, but they cannot alter them.

The Licensing Decision

Before you decide which license to use, you must answer two questions…

1. Do you want to allow people to use your work for commercial purposes?

The definitions for commercial vs. non-commercial are still somewhat confusing. The technical term for “commercial” involves using images for the purpose of selling or to gain profit. Non-commercial refers to using images for personal use and not to gain profit.

The definition becomes ambiguous when a publisher wants to use an image for his blog that includes advertisements. Is the image used to draw in revenue? Some would say “yes” since it is part of the blog and the blog contains advertisements, which relates to commercial usage. Others would argue that the image isn’t directly involved in any for-profit activity and is, therefore, noncommercial usage. The jury is still out on this one and Creative Commons is actively taking surveys on the subject to further define the terms.

If you do not want your images used by companies seeking to gain profit from them, stick to the non-commercial licenses.

2. Do you want to allow people to create derivative works?

The United States Copyright Act defines “derivative work” as:

A “derivative work” is a work based upon one or more preexisting works, such as a translation, musical arrangement, dramatization, fictionalization, motion picture version, sound recording, art reproduction, abridgment, condensation, or any other form in which a work may be recast, transformed, or adapted. A work consisting of editorial revisions, annotations, elaborations, or other modifications which, as a whole, represent an original work of authorship, is a “derivative work”.

The derivative work is a piece created from the original. If you want to maintain your original graphic and keep the image unchanged as it is copied, choose the NoDerivs licenses.

Creative Commons has this helpful License Chooser which will also supply you with code to put on your website. Here are some tips you should know before licensing your work.

Below are some other resources that explain more about copyright laws:

United States Copyright Office
Design Theft – The Webmaster’s Resource
Copyright Explained: I May Copy it, Right?

Has anyone ever stolen your graphics? Do you use licenses to protect your work?

Disclaimer: I am not a lawyer and the advice in this article is for informational purposes only and should not be taken as professional legal advice. If you have any questions about copyright laws, please speak to a lawyer knowledgeable in the subject matter and the particular laws of your state or country.

What Designers Expect When Designing for Startups

Designing for startups can feel more like a whirlwind than an actual design project. The process can be a rough road to travel if you are not prepared for the full experience.

Thankfully, startups are realizing the need for effective web design and many are hiring professionals like you to get the job done correctly. Great design is becoming more and more important as business owners realize it is an integral component of their growth strategies.

What Startups Expect

For startups, great web design is more than just colors and buttons on a web page. It’s how they will reach their audience, sell their products, outperform their competition and grow their establishment. Startups do not always think in terms of complex code; they simply want a superior solution.

When you can find the union between what start-ups expect and what you know as great design, you will have a winning combination.

Wells Riley, a graphic, UX and interface designer, wrote a lengthy piece on theimportance of design for startups. In it, he is speaking to startups directly.Here is a statement from his article:

“Companies like Apple are making design impossible for startups to ignore. Startups like Path, Airbnb, Square, and Massive Health have design at the core of their business, and they’re doing phenomenal work. But what is ‘design’ actually? Is it a logo? A WordPress theme? An innovative UI?…It’s so much more than that. It’s a state of mind. It’s an approach to a problem. It’s how you’re going to kick your competitor’s ass.”

Startups need stellar web designers whether they realize it or not. The design is the face of their company and it offers the first impression to their online audience.

The Key Elements of Design

In his piece, Wells identifies the key elements of design for startups. He attempts to elevate start-ups’ perspective on design and explain what it is and how it can help their establishments.

Wells lists what he feels are the true purposes of design. I summarized them below in my own words and quoted some of his statements. Do you agree with Wells?

  • Innovative – Innovation in design is constantly moving in a forward direction. As technological development expands, innovative design should keep up with the momentum. According to Wells, “Innovative design always develops in tandem with innovative technology, and can never be an end in itself.”
  • Product Usefulness – The usefulness of a product is identified by the psychological connection it brings as well as its aesthetic. Well, thought-out design highlights a product’s usefulness and is careful to ignore creating any elements that do not satisfy this goal.
  • Aesthetic – A product’s aesthetic quality is a component of its usefulness. People use products daily and their appearance affects their well-being. According to Wells, only well-executed objects can be beautiful.
  • Makes product understandable – Design makes the product come to life. It allows the product to speak and answers all of the user’s questions. Essentially, it is self-explanatory.
  • Unobtrusive –Wells identifies design as neither a “work of art or a decorative object.” It fills a purpose and should be neutral so users can input their own form of self-expression. If design overwhelms and detracts from a user’s experience, even if it is beautiful, it has lost its true purpose.
  • Honest – Design must be true and honest and never suggest a product is more innovative and powerful than it actually is. It should never manipulate a consumer nor make them think a product is something it is not.
  • Long-lasting – Great design is not trendy. It lasts forever much like timeless fashion. It will never appear antiquated or behind its time.
  • Thorough – A great design process must include attention to thoroughness and accuracy. A good designer will express care and respect towards the consumer by finishing a project while leaving nothing to chance.
  • Environmentally friendly – According to Wells, “Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.”

For startups, the “less is more approach” is ideal. The design should focus only on the essentials and never be burdened with non-important elements just for the sake of beauty. Purity and simplicity will make more of an impact.

What do startups consider the most important qualities of design?

To answer this question, Wells asked 78 CEOs, marketers, and designers about how they define the design. What he found was that both parties viewed design similarly.

CEOs, marketers and engineers had similar definitions as compared to web designers. The most important to both groups was aesthetics, while “making a product useful” came in close second. Innovation was right behind in third. These three definitions topped the list for both entrepreneurs and the designers that create their websites.

Are these your top three?

According to Wells…

“Now we’re getting somewhere. Great design is taking root in startup culture, and it seems like many people are open to change. Not only do many entrepreneurs, devs, and engineers see substantial room to improve their own products, they overwhelmingly believe that designers belong on a founding team… Design is becoming a key differentiator for companies to acquire funding, press coverage, and loyal users.”

“For a long time, a pair of co-founders consisted of an executive and an engineer.It worked for Facebook, Microsoft, and Apple, just to name a few. These companies have excellent designers today, because it’s a necessity they can’t afford to ignore. It seems like design is becoming more and more prevalent in new startups as well “

How to Survive the Startup Design Process

To become successful working with startups, consider a few tips…

Quick Changes

When designing for startups, outline your objectives in detail along with your quote. Since the startup’s goals can change daily, if you don’t outline your fees appropriately, you will end up offering more of your time for less money than you are worth.

When startups change direction, the design may change in the process so if you are not set up to be paid for additional time, you could lose money.

Lay out the details of your services and include a clause defining the rates for anyadditional work beyond the confines of the project. I learned this lesson after working with a few startups on their website copy. They changed their minds partway through the project and because I had not set up my quote correctly, I ended up spending double the time I normally would without receiving any additional money.

Tip: This tip also applies to any project, but it is most important for startups due to the more chaotic environment.


Design for startups involves problem-solving. Startups are faced with many dilemmas and chaos is often a common variable. With so many growing pains to endure, the environment can be somewhat indecisive. Your ability to stay calm throughout the process will work in your favor.

Low Budget

Many startups are bootstrapped and they try to make every penny count. Because their budgets are low, web designers working with startups often need to expand their skill sets to include user experience.

One of the goals of creating an effective web design for startups is to get a clear picture of who will be using their website or application. During your consultations, you will need to extract as much information as possible even if the client is not completely clear on its audience.

When designing websites, you must know the audience even if they are fictional. During your consultation, you want to understand the users’ potential behaviors, how they will use the site, what emotion they should feel while using the site, and what actions they should take. Every attribute you learn about your audience can be applied to the design to ensure your client receives a good level of conversions once the traffic pours in.

If your clients are unsure about their users, don’t be afraid to share your ideas with them. This will not only position you as an expert, but it will also make your design highly effective since this information is so crucial to online success.

When I meet with clients I ask them to fill out a detailed questionnaire. The questions are designed to probe the client for essential details about their target audience. Without this information, my website copy would be meaningless because it won’t stir an emotion or compel the user to remain on the website. In order to keep users on the site, I have to get inside their minds and know what makes them tick. What are their behaviors? Desires? Stresses? Problems?

Knowing this information about the target audience will give you the edge and allow you to create a high-converting design that aligns with the startup’s vision.

And even if that vision changes, you will be paid because you outlined your fees correctly in the contract!

Typefaces of what is meant by Email & How to Select a Good and Suitable Font

The thumb rule for marketing anything is to package it in a visually appealing way. Shapes, images, colors and appropriate typography come together to draw viewers’ attention to your product. In this article, we shall be focussing on the impact that typography in your email has on the overall user experience and how to choose your email fonts to create uniformity across all devices.

Aesthetics play a major role in the modern world. From what you wear to what you buy and even what you prefer to see, visual appeal is one of the major deciding factors. Plain HTML formatted web pages and emails are things of the past; no one would like to experience such a ghastly oddity.

People want dynamism in whatever they see: a burst of color, a dash of witty sentences, a couple of images or shapes of varying styles and some user interactivity. Email designers are in constant strive to include these in their emails, which is evident in the emails below.

Kerning: When you read a text, your eyes tend to follow a pattern in which the characters are written. So, it is necessary to have some space between two characters in order for your eyes to seamlessly jump from one to another. This spacing between two characters is called kerning.

The kerning and the margins define the characters per line. If you keep the characters per line very large, the time needed to reach the beginning of the next line in the paragraph shall be too long, and this will tire your eyes faster.

Line spacing: In conjunction to eye scanning, the spacing between two lines in a paragraph is as important as kerning. Keep the line spacing less and you may end up reading the same line again and again instead of progressing to the next line or you may even “jump” between two lines.

Fonts express individuality

Each typeface expresses a unique personality. And based on the readability, a specific typeface can be used for email copy or for decorative purposes. Those used for email copy, are further categorized into 4 types.


The typefaces falling under this category (Serif) are easily identifiable by the small extensions each character has. These fonts were inspired by the Latin inscription and have been used extensively in printed works such as magazines, books, newspapers, and government documents. So, a copy written in serif fonts reflects a formal or authoritative feel. Some of the examples of this category are Times New Roman, Baskerville, or Georgia typefaces.

Sans Serif

Remove the embellishments from the Serif typefaces and the typefaces fall into a different category i.e. Sans serif. They have a modern & clean feel to it. Most web typography revolves around using sans serif fonts. The most commonly used ones are Franklin Gothic, Helvetica, and Century Gothic.


Handwritten letters are quite a nostalgia amongst the baby boomer generations. This is the inspiration behind the calligraphy typefaces. They stand out and tend to convey elegance, fun, and a casual feel. Some common examples of script fonts include Lucida, Brush Script, and Edwardian Script ITC.


As the name suggests, monospaced typefaces are typefaces where the kerning, as well as the space taken by each character, are the same. These typefaces were developed for telegrams and early computer displays. While they are very rarely used in emails nowadays, they are best fonts for creating ASCII art. Courier MS is a good Monospacedtypeface example.

How Email Clients render fonts and importance of Fallback Fonts

Before we learn to choose the best fonts for emails, it is important to understand which email clients support custom fonts and how they render the fonts. Except for some email clients such as Apple and iOS mail, email clients cannot dynamically fetch fonts from a remote server. This is a major gap between designing for a web page and an email. You cannot use a web font in an email copy.

So you must be wondering how email clients render fonts in emails. Email clients normally render only those fonts that are available on the device which is used to open the email.

For those email clients which support custom fonts, the email client checks whether the primary font is available in the system. If the specified font is not available, it moves ahead to render the fallback font. So, it is necessary to provide an appropriate fallback in order to deal with a situation where the primary font chosen by you is not available in the email recipient’s device.

In case you are using a customized font which doesn’t have a suitable fallback font, it is advisable to use the font in the form of an image instead of text.

How to choose fallback fonts

While choosing fallback fonts, it is important to see to it that the fallback does not alter your layout in any way. This means it should accommodate itself within the same space taken by your primary font and give the same look & feel. To achieve that, your fallback font should satisfy conditions mentioned below:

  1. Same font style: If the primary font is serif, your fallback font should also be of serif styling.
  2. Similar kerning
  3. Same aspect ratio: Each character has an x-height and set-width, which states the length of a line drawn from the top of letter ‘x’ to the baseline (x-height) and width of each character (set-width) which aids in determining the characters per line. Moreover, taking into consideration the ascender & descender line helps in determining the line spacing.
  4. Same font weight: This can be ignored if the aspect ratios are matching.

    Some Best practices followed

    1. Understand the tone of your email and choose your fallback font first

    No matter how alluring and visually pleasing a font may be, it must go with the tone of the email. Moreover, as discussed earlier, a fallback font should be such that it doesn’t affect the overall layout. So, it is better to choose your fallback font before confirming your primary font.

    1. Emphasize your text with appropriate color

    Like we said in the introduction, images, text, and colors make an email worth reading and so it is important to leave behind the traditional black text on white background. Experiment with background colors and vibrant font colors based on your branding guidelines while keeping the psychology of colors in mind.

    1. See how you type


    Moreover, with almost 51% emails being opened on mobile devices, it is important to keep the font size between 14-16pts to enable your email recipients to read the email copy from a distance.

    1. Align your text and stick to visual hierarchy

    Text alignment is an overlooked aspect since most of the users in western nations read left to right. But over a billion people still read and write in languages that are right to left. So if your subscriber base is global then it is important to see the alignment of your text.

    Moreover, it is important to maintain the visual hierarchy. Your information flow should be in the form of an inverted triangle. Make use of headings and subheadings, convey your message via email body copy, and end with the call-to-action button.

    Here are some interesting examples of how a few popular brands are nailing the typography game.

Masculine and Feminine Design Techniques

A user’s first impression of your site can be a lasting one.

In the first few seconds, a person decides to stick with your content or move on. They will also make decisions about whether your site fits their needs. And that first impression has a lot to do with sex.

Male and female users often look to the web for different experiences. The look of your site can instantly appeal to one of the sexes or both.

But how to you know? There are commonly held ideas about what appeals to each gender; here we will apply those principles, and even stereotypes, to design theory.


The first design element a user sees on site is images – especially images containing people.

What do these people look like?

Demographically, it is likely that the average adult website visitor will look very much like the people on the site. This applies to age, race, size and even gender.

But what if your images aren’t representative of the average adult visitor? Think about a site that contains more images of inanimate objects, landscapes or babies. Those images have certain appeal for the genders as well.

The exception to the image rule is in oversexed images. Imagery that features scantily-clad, attractive women or men will often appeal most to the opposite sex but can be an attention-grabber regardless of gender.

Quick and dirty breakdown

  • Babies, puppies and overall cuteness – Feminine
  • Sports and action – Masculine
  • Flowery landscapes and trees – Feminine
  • Rugged landscapes and terrain – Masculine
  • Food – Feminine
  • Clothing and shoes – Feminine
  • Gadgets and electronics – Masculine


Type selections can imply masculinity or femininity.

The most important considerations when it comes to gender are slant, stroke and details.

Most people quickly associated letters with distinct curves and slant to be feminine, include typefaces from the cursive and script categories. Some might even go the extra step to include italics in the feminine-feeling category.

The stroke of a letter can also imply gender. Thin strokes are often thought to be lighter and more feminine than bolder letterforms. Using this technique, a designer candevelop masculine and feminine styles using a single font family by using different parts of a font family.

Finally, a designer should really look at the smallest parts of a typeface. Serifs tend to have a masculine edge, particularly those with very square edges. On the flip side, serifs with rounded and curved edges and imply a more feminine display.

This same principle applies to other strokes and ornamentation as well. More frilly lines and tails are more appealing to women, as are bubbly letters. Feminine font styles, especially those seen on sites for weddings, baby items and crafts, tend to rely on heavy ornamentation. Blocky styles and sharp or pointy accents reflect a masculine tone.

Quick and dirty breakdown

  • Old English – Masculine
  • Script – Feminine
  • Cursive – Feminine
  • Slab serif – Masculine
  • Hard-edges serifs – Masculine
  • Curved-edge serifs – Feminine
  • Tall thin, condensed styles – Masculine
  • Thick strokes – Masculine
  • Thin strokes – Feminine

    A designer will also want think about what the words say. Does the message match the presentation?

    Look at the images above – there are obvious choices for the presentation of the words feminine and masculine.


    You could write a book about masculine versus feminine color associations. Most people start with the common blue for boys and pink for girls. But color associations can be some much more complicated than that.

    Color perception can change based on gender and culture.

    So how do you know where to start?

    Think about saturation.

    The darkest colors that have the deepest hues, exude the most masculine undertones – think blacks, navy, dark greens or reds, purples or oranges. If white type will show easily on a background of the color, it likely has a masculine tone.

    Pastels are generally considered more feminine. So are any other colors with more muted tones – pinks, yellows and greens and blues all fall into this category.

    You can learn even more about color perception differences between the genders from a study by Joe Hallock on color perceptions around the world. In those findings the most preferred colors among men are blue, green and red; brown and purple were the least liked. The top three colors for women were blue, purple and green; orange and brown were the least liked. One of the top findings was the use of purple and how it ranked highly among women and not at all for men. Using colors that appeal to a specific gender can sway the tone of a design.

    Neutral tones – beiges, pale yellows and greens or blues – are just that neutral and have very little gender bias. These colors will take on the tone of the rest of the design.

    Quick and dirty breakdown

    • Dark, saturated colors – Masculine
    • Pastels – Feminine
    • Blue – Masculine
    • Pink – Feminine
    • Purple – Feminine


    Hard corners and edges are representative of shapes that have more appeal for men – think squares, triangles and trapezoids. Ninety-degree angles are also a popular technique or visual cue.

    Shapes with quite the opposite look appeal to women. Think about curves and delicate detailing – circles, wavy lines and soft repeating patterns.

    The styles of shapes that tend to include more dimension have a feminine appeal, whereas flat, raw forms are more masculine. Strong lines and dark color blocks can also indicate a masculine tone, whereas thin lines (very much as in letterforms) and light strokes indicate a more female look.

    Quick and dirty breakdown

    • Hard corners and edges – Masculine
    • Curves – Feminine
    • Squares, triangles – Masculine
    • Circles and hearts – Feminine


    Now before you get upset that there are exceptions… of course there are! (And meanings can change depending on how you mix and match concepts.)

    The use of generalizations when it comes to masculine versus feminine design is to get you thinking about audience. Who is your target audience and what type of visual approach will appeal to them? Understanding gender preconceptions and predispositions is just a starting place, not a set of hard and fast rules. Use this set of ideas to determine if the look of your site design fits the group of people you want to get use from it.