ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

5 Common UX Pitfalls in Web Design

Updated on October 6, 2016

If you’re a front-end web designer, odds are you fall into the long line of “creatives” that live for the artistic, the aesthetic, and the unique. Ironically, in the world of “Web Design,” this creativity can sometimes be an obstacle rather than an asset, when we’re forced to align what we’re doing with UX (user experience). Why? It’s because “creatives” often struggle with practicality and they are the minority, which in turn means that the majority of people using what we design need practicality. Here are some of the basic elements to web design in which, we, as designers, need to learn this balance between the artistic and the pragmatic called “user experience.”


As designers, we seek to grab people's attention with something different, unique, and just plain awesome. Sometimes, it's tempting to turn a homepage into an elaborate art project or the front cover of a comic book. I have come across several such sites, who's design work is something to be admired in its fantastical, artistic elements. However, I have no idea what the site is about or how to navigate to the information that I need. They look wonderful and distract me from the important information on the site all at the same time. Unless you're building an online art portfolio or something similar, this isn't going to work well for the user that is just trying to find a phone number to call you at.

One key to designing aesthetically pleasing web layouts that are also user-friendly is the subtle use of shapes that not only dress-up your site, but also draw the user's attention towards the important information, rather than away from it.

// Example of a Distracting Layout


// Example of a Clean, Creative Layout


#2 | SPACE

Another thing to keep in mind with regards to layout is SPACE . I, personally, appreciate the clean, pointed look of a short, centered heading, paragraph, or logo, placed right in the middle of a neutral-background. As you scroll down, other information follows. It's almost like a bullet-point presentation with illustration and keywords, rather than a dissertation. However, the unfortunate reality that i've come to discover is that most web users see that and don't assume that there's something to scroll down to. All they see is one, brief piece of information and nowhere to go to find what they're looking for. the struggle...

When designing for user experience, we have to be careful and strategic with our use of blank space. It's important for a page to (very obviously) insist that there is more information below what they see, and it's even more important that the content is useful, and not just pleasing to the eye.

Visually Appealing, but NOT User-Friendly

Here are some suggestions for maintaining a creative use of space, while still being user-friendly:

A | Let the content on your homepage stop where the visible part of the screen ends, and make sure that there is clear, visible, and concise navigation to take them to the other pages.

B | Get creative with the links to your other site pages, making them the centerpiece.

C | Clever use of division leaves room for you to have both a clean, creative, minimalist design as well as important information on the visible part of the page, without hiding the important information below.


Typography is a fascinating art style, whose web presence has drastically risen over recent years, due, in part, to the growing popularity of Adobe Illustrator, and other similar tools. Here’s the problem we run into on occasion—legibility. As far as user experience goes, it's takes precedence.

This is a fun font style, right?

Could you imagine trying to read entire paragraphs in this kind of font? I would bounce to the next site after a few seconds or scan the whole page only to realize by the end that I have no idea what I just read. Remember, web users are looking for information, so they need to be able to find it quickly and easily and fancy fonts take time and distract from the content.

It's simple—Don’t Overdo It! Logos and Headers are the saving grace for designers, when it comes to Typography. Feel free to get creative with those elements, because they are short, but important. Write the rest of your content in a font, whose simple elegance lends itself well to contrast with the logo or header.

One reason sans serif fonts have become so popular recently, is that their clean, minimalistic design is easy for readers to scan and works well as a clean contrast to art on the page.

Great Video Tutorial on Hand Lettering

Great Typography Resource

#4 | COLOR

When it comes to web design, it’s best to think of colors as an architect or even a fashion designer would—meaning, a few, flat colors that blend well together is generally best, as opposed to gradients or illustrations with too many bright, distracting colors. That isn’t always the case, but unless you really know how to do it well, without distracting from the objective of the site and its content, color schemes are best. Adobe has a great tool to help with this that you should definitely check out:



A Note about Color and CTA Buttons:

Color can be an incredibly useful for drawing attention if done right. One web element in particular that you want to draw users attention to, is CTA (Call to Action) buttons. Once you've chosen your color scheme, set one of the brighter shades apart for your CTA buttons, so that they stand out to the user, and you can guide them exactly where you want them to go. By "stand out," I mean: choose a color that is more noticeable the the rest of your color scheme, but still complementary. Too much contrast just looks tacky.

In regards to CTAs, it's also helpful to know a bit about color psychology. Depending on your specific call to action, you might use different colors. Red, for example creates a sense of urgency, and would be helpful for marketing a time-sensitive offer. Blue, is trustworthy. Green, relaxes yet also stands for wealth. Orange is a popular color for Subscribe Buttons. Those are just a few examples. I found this article on the psychology of color to be incredibly helpful:

Additional Resources:

Color is not my strong suit, so I use all sorts of tools and other sources to glean information before deciding upon a color scheme for a site. Here’s a really great, helpful article that takes a more in-depth look at color and how to use it appropriately in web design:


CAUTION: Use of this website is not recommended for users who are looking for information or for procrastinators, who are prone to distraction.

One HUGE pitfall the devil of design dug specifically for us in the web world, is motion graphics... They can be so useful in setting your site apart from others and drawing the users deeper into your content OR they can trap web users in an endless vortex of distraction and confusion until they can't remember what they were looking for in the first place because the need for information was just replaced by frustration or wonder. The train tracks of the web are slippery—use superglue.

Don't believe me? Google "bad website trends" or something similar. You'll find tons of blogs where motions and animations are listed as some of the major culprits of bad web design of late.

Blog: Web Design Trends to Avoid


Let's do a little case study here: 2 companies, same services, similar name...which do you think has the better use of motion. Which one draws you further into the site?

Overuse of Motion - Traps Users in a Vortex

Good Use of Motion - Draws Users In

Which is more user friendly?

See results


Layout - Clean, subtle, but creative use of shapes and angles can set your site apart. Complex, detailed, augmented design can distract and confuse your user, even though it impresses you (the designer).

Space - Use it sparingly. Don't let it hide the important information from the web users.

Typography - Save the fancy fonts for your logo and headers. Use clean, easy to read, sans serif fonts for the bulk of your content.

Color - A few, well-chosen, flat colors work best. Stay away from gradients and textures unless you really know what you're doing.

Motion - Use with caution. Motion should draw your user in, not trap them with distraction or create a barrier between them and the information they're trying to get to.

What are You Most Often Looking for on a Website?

See results


    0 of 8192 characters used
    Post Comment
    • netteria profile image


      2 years ago from Kostrzyn nad Odra, Poland

      tnx so much

    • andrewdavidlowen profile imageAUTHOR

      Andrew Lowen 

      2 years ago from Fallbrook, CA

      Thanks so much. I'm glad it was helpful. :)

    • lions44 profile image

      CJ Kelly 

      2 years ago from Auburn, WA

      Nice hub. I've designed several sites but I know they could be a lot better for the user. Good advice. Sharing everywhere.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)