UX Design For Dropdown Navigation Menu

Dropdown menus have come a long way thanks to modern JavaScript and CSS3 effects. But not all dropdowns are created equal, and some UX strategies work better than others.

In this guide I’ll cover a handful of design techniques for building usable dropdown navigation menus. This includes multi-level dropdowns and mega menus which all rely on the same core design principles.

Markers For Sub-Menus

It’s a good idea to include markers for links that have sub-menus attached. These small visual indicators let users know where links are placed and how to access them.

And these rules apply to all menus whether you’re designing with 1 tier or 4 tiers of links.

Markers can range from arrows to dots or squares or anything noticeable. Most users are smart enough to pick up what the symbol means, so long as it’s universal.

The Threadbird navigation is a fantastic example of this effect in action.

Some of their links have sub-menus while others don’t. In fact some of their links have sub-sub-menus which you can only

5 Inspiring Design Documentary

Design Is FutureDocumentaries have a profound effect in terms of their ability to both teach and inspire. As designers, we are one of the primary creative industries and always looking to find and use inspiration, whether it be from images, art, products, or even music.

Below I have compiled a list of six inspiring design documentaries that should help serve as excellent resources to help you learn something new, however advanced you are as a designer. They have all taught me something new about design and design thinking, as well as inspiring me with new styles and ways of working.

All of the following six design documentaries are available watch freely with only one requiring a Netflix trial or subscription.

1. Design Is Future

This is an inspiring documentary that is exceptionally well put together. ‘Design Is Future’, which is held at Disseny Hub Barcelona during Barcelona Design Week, explores ideas for the future of design and talks about its rise to prominence over the last decade or two.

How to Operate the White Space in a Mobile Responsive Layout

White space is a crucial design tool whether you realize it or not. Many designers adjust page elements until they “look good”. Most often this leads to a natural balance of white space between page sections just from gut instinct.

But when you get into responsive design this subject gets a bit tricky. White space needs to be adjusted at different breakpoints to create a seamless experience for all users.

This can be done with many different techniques and I’d like to cover the best ones here. All modern websites should be fully responsive so it’s no question that responsive design is important. The only question is how to handle white space so that all users have an awesome experience.

Rearranging The Navigation

Naturally the first thing every designer considers is how to handle the navigation menu.

If a site has dozens of links you really don’t have many options. You could use a select input field or a hidden menu with the three-bar hamburger icon.

Here’s an example where the top navigation doesn’t even

Personal Branding Guide for Designers

Personal branding is the practice of people marketing themselves and their careers as brands. Being good at your craft is not enough these days, being unique and authentic will make the cut, but only if enough people know about you. As Michael Simmons writes, authenticity is key in the digital age. Having a strong personal brand and following can lead to enormous opportunities and recognition.

Personal branding is becoming one of the most important key factors in any industry. Skills and boring resumes are not guaranteeing you anything anymore. You have to really start developing your own brand and building a tribe, or in other words an audience that will help you getting jobs, supporting you, sharing your work and getting recognition.

In today’s article I’d like to share some personal branding guidelines I’ve been experimenting with in the last couple of years. The techniques and methods used led me to speaking engagements, interviews on Forbes and Fast Company, business growth and business leads, not to mention the connections and friendships I’ve made.

Why should you care about building a personal brand?

There are numerous of reasons why you should consider strengthening your personal

How to Create a Style Guide to a Web Design

Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that design is consistent and optimized to meet business objectives and create enjoyable experiences for users.

One of the ways to ensure that team is on the same page when designing separate parts of the website or saving designs from developers is to create design documentation or a web design style guide.

It is beneficial to have a style guide in order to create a cohesive experience among different pages. Also it helps to ensure that future development or third-party production will follow brand guidelines and will be perceived as part of the overall brand.

Luke Clum has touched the surface of using style guides as your first step in web design last year and I would like to take a more in-depth look on how to create a usable web design style guide for your projects.

What is a Style Guide?

A style guide is a collection of pre-designed elements, graphics and rules designers or developers should follow to ensure that separate website pieces will be consistent and will create a

Ux introduction guide for Web Designers

A great UX review can do wonders for any website. By looking over the entire design you can learn what’s working, what’s not, and maybe find solutions that can increase the UX and ultimately increase revenues.

But learning how to conduct a review is the first step to solving problems and creating a better experience. In this guide I’ll cover the basics of a UX review and how you can get started running your own.

This does require some background in UX design but it also relies on basic principles ofmaking great websites. If you’re willing to learn and put in some elbow grease then a UX review of your own website can be a great opportunity for growth.

Conducting a Review

The goal of a UX review is to comb over an entire site and find spots for improvement. These spots could be obvious or they could be small, but you should aim to improve the site as a whole.

You should always aim to study objective trends and find statistics that back up your ideas. Designers aren’t always the most quant-oriented people but it’s a necessity in a good UX review.

Attract People’s Attention Through the Color of Web Design

Working with color can be so much fun. Color can set the mood and tone of a design. Color can make a design appear clean or messy. Another thing we can use color for is to draw attention to a desired piece of content or element.

In this post, we’ll go over the various way in which color can be manipulated to draw attention to something. Some of the examples will talk about repetitiveness, some about photography and others about how a lack of color can be a strategic thing too.

Let’s get started in analyzing how to draw attention through color.

Nursing bras, photography, and attention

There are a plenty of website designs out there that make use color in a strategic way. Color is so versatile and comes in all different shapes and forms. For instance, when I speak about color in design most people assume about things like text or buttons. We’ll get to that. For now, I want to talk about the less obvious way we color effects a design, through photos.

Storq is clothing store for pregnant women. Overall, the website doesn’t feature too many colors. However, on

New Settings for Scrolling in Web Design

What was once taboo in website design has made a complete resurgence as one of the most popular techniques in recent years as users are finding a new love and appreciation for sites where scrolling is a necessity. Shedding its old stigmas, scrolling is reinventing itself as a core interaction design element – that also means designers need to learn the new rules.

In this piece, we’ll explore the rebirth of scrolling, discuss some pros and cons, and list out some quick tips for the technique.

Why Scrolling is Reborn

The simple answer is mobile devices.

Ever since mobile users have surpassed desktop users, UI designers everywhere have adjusted accordingly. And with so many users on smaller screens, scrolling is becoming more of a necessity: the smaller the screen, the longer the scroll.

But there are other factors. Access to high speed internet is available in more places, making the scroll a quicker way to access information than clicking from page to page. The growing strength of social media sites also feeds the technique: scrolling naturally accommodates their wealth of user-generated content.

As explained in the guide Web Design Trends 2015

Ultimate UX Design

A typical sign-up form contains a couple of form fields (it seems like the most popular number nowadays is 3: e-mail, password and a peculiar “repeat password”) and a button. Is there anything to design in this minimalistic structure? Isn’t it too simple to focus on?

Unfortunately, many non-designers and some designers think exactly this way. If it’s visually simple (and tiny!), it shouldn’t be designed, as it would be a waste of time, right? Completely wrong.

I once tried to explain it to a stubborn design layman, who just couldn’t believe that if somebody visited a website and clicked on a huge button on the homepage which said “Sign Up”, they would suddenly leave the simple form without registering. “How come?” – he asked, “They’ve already decided to sign up… it’s just impossible they will be scared by three inputs”.

Well… pretty often they are. I showed him our data from Google Analytics. At that time 23% of people who clicked the huge button on the homepage were leaving the form, with three fields, without registering. 23% is a lot. Almost a quarter of the people were getting scared of the form.


How to Design a First Desktop for a Responsive Website

Most web designers know about mobile-first design and how it has dramatically affected responsive design. But there is another technique that may be less popular but can solve problems in a clearer fashion.

With a desktop-first approach you can build all the features you want and create them to the highest specs. Then as you test on smaller devices you’ll focus on keeping the interface light while supporting as many “high-end” features as possible.

This workflow is quite different but starting from the desktop can be better for web designers who create feature-rich designs.

The Benefits of Desktop-First

Technically “desktop-first” was the traditional way that everyone made websites up until the responsive era.

Nowadays many people talk about mobile first but there are good reasons to stick with the desktop approach. I often prefer starting with the desktop design when I know my site will have tons of detailed features on larger screens.

Here are some benefits of the desktop-first ideologies.

  • You get to see all major features at once
  • It lets you imagine all the largest possibilities for your design first
  • It’s the best strategy if your audience mostly uses desktops/laptops

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

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

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

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

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 BodyBuilding.com 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

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

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 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

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

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