Tips For Dropdown Navigation Menus

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 discern by their unique marker next to each link.

Threadbird uses the right-pointing double angle quotation mark, simplified to raquo. Web designers prefer this symbol over a single arrow because it’s bulkier and easier to notice at a distance. Plus it holds its shape well even at smaller sizes.

Web Design Style Guide

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.

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 cohesive experience at the end.

 

Why Is It Important?

It is extremely important when multiple designers are working on a big website or web app to ensure that they don’t interpret too much and don’t alter or adjust styles based on personal preference. In development, having defined elements of the website makes it easy for developers to reuse these elements. Moreover, it can make it easier because they will get what elements they have to code and will see exactly how they need to look from the start.

In order to make developers lives easier, it is the designer’s duty to include all possible interactions such as hover, click, visit and other states for buttons, titles, links, etc.

Protect Your Design Work 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 are more 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.

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.

Differences in Design and User 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.

Stop Chasing After Innovation

If you’re a web designer or developer, it’s always smart to keep up with the latest website building trends. That doesn’t mean that you have to be caught up in the “innovation” rat race.  Even though innovative work, ideas, and technologies are what many clients are asking for.

There’s no need to chase after the newest and shiniest innovative technics. They can be a never-ending waste of your time and money. A simpler solution is to take advantage of innovative concepts and designs offered by others. You will find 10 examples of that described below.

 

All the Innovation You’ll Need is But a Single Click Away

Be Theme is the largest WordPress theme ever, and a Top Five ThemeForest best seller. Be’s 260+ pre-built websites make it easy for you to do quality work, and do it fast.

So, where does the innovative part come in? It’s build right into each of these professionally-designed pre-built websites. They come with a 1-click installer, so these innovative designs are yours at a touch of a button. This cool 40 second video shows you how easy it all is.

Your eLearning clients will be delighted with your ability to produce such an innovative and easy to work with website for their eLearning platform, in such a short period of time. It’s responsive as well, which should make your client’s students happy and always eager to come back for more.

Here’s a theme that provides an excellent solution for a client who sells a handcrafted product. Be Craftbeer’s large image and neat JavaScript effects focus on the product, while the overall design structure and attention-getting buy buttons make this an ideal choice for many different small businesses.

Interior design or architecture clients often have trouble finding website designers/developers who truly understand their businesses. That won’t be the case if you use this pre-built website to show them a prototype of what you can do for them.

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.

I ran a quick study to grasp the reasons that cause people to leave my sign-up form. 70 people were nice enough to fill in a short questionnaire with open-ended questions. To my surprise, 33% of them pointed out “the fear of being spammed” as the main reason they always think twice before typing in their e-mail address anywhere. The complexity of the form (often considered unnecessary) and reluctance to waste time came in strong second place with 21%.

First Design Tips for Responsive Websites

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

When you think of modern websites like Twitter you think mobile. But they do have lots of extra features that come along with the desktop experience. These desktop users clearly get a heightened UX which is just as important as any other device.

 

Design Engaging 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.

 

Content Upgrade Signup Forms that Grab 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.

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.

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.

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 brand. The thing is your personal brand exists anyway, it’s how people perceive you, your work and your actions. To make sure that your brand goes together along with your values and how you wish to be perceived is to manage it. Moreover, building a recognizable personal brand will help you with the following:

  • Professional opportunities;
  • A better job;
  • Better contacts and clients for your company;
  • Industry recognition.

 

Vision

Develop a strong vision and make sure that you use it everywhere you go. Whether it’s to go to the moon or sail around the world, make sure it’s something big and bold, people remember these things. If you haven’t watched Simon Sinek TED talk “How great leaders inspire action” presenting “the golden circle” and “start with why” theory, make sure to check it out and come up with your own vision.

 

Who are you targeting?

Who is your message receiver, who are you talking to with your brand? The common mistake is everyone, we want to appeal to as many people as possible. The harsh truth is that if you try to please everyone, you’ll please no one. There is always someone who loves you for one thing and hates you for the other. Every person has an opinion, so you shouldn’t be concerned about appealing to everyone. Better think about your vision and long-term goals.

 

Use high quality images

No matter how great your website looks like and how many great stories you have to tell, people are visual creatures after all. Humans form opinions based on the first impression and images send more than needed information to make a strong impression and form an opinion about the brand.