Monthly Archives: July 2017

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

According to 3M Corporation people are extremely drawn by visuals compared to written information.

German designer Tobias van Schneider is a great example of high-quality imagery usage in personal branding communication that noticeably stands out.

Be consistent creating

According to Austin Kleon, an author of the New York Times bestseller “Show Your Work!” you have to consistently post bits and pieces of your work, your ideas, and what you’re learning online. Instead of wasting your time “networking”, take advantage of the network.

Think about all the great work you do but no one knows about it. Make sure to take an advantage of today’s internet ecosystem, post your drafts, ideas, updates, work in progress and complete work to get early feedback, recognition and potential leads.

There are some brilliant communities just for designers, Dribbble, Behance, DeviantArtjust to name a few. Other medium can be your personal blog and portfolio.

Master storytelling

Storytelling is an enormously powerful skill that can set you apart from other faceless designers in the industry and help you shape your brand that people are interested in and eventually think of when in need of a designer.

Instead of showing just your work, add some of your daily life to it, share work in progress, share your daily routine, share how do you find inspiration and the list goes on. A great example is Tomas Jasovsky, a Slovak designer who tried to get into a big company like Facebook, Spotify and after not getting in decided to pack his belongings and travel around the world with his girlfriend. He’s calling himself a nomadic designer and everything he shares is mixed with traveling, design, food and adventures. Who’s not interested in such a lifestyle?

Make connections

It’s incredibly important to start building your professional network and get industry leaders into your circle as you will be perceived as one of the leaders as well.

There are many ways to start connecting with people and you should not necessary focus just on designers, any connection is good and may lead to a “top dog” designer that you may not be able to reach from another designer.

How do you get people interested in you? You don’t, you start by listening to them and trying to provide them value in any way you can, only then people will start connecting with you in a genuine way and forming long-lasting relationships. If you want to learn more about networking principles for designers check out my article I wrote last year:key networking principles for design entrepreneurs.

Below are some handy websites and social networks for meeting new people.

  • Startuptravels – connect with the world’s startup scene. Meet entrepreneurs and startup enthusiasts in over 160 countries.
  • Meetup – one of the biggest platforms in the world for meeting people on pretty much any subject you can imagine.
  • Dribbble Meetups – Dribbble Meetups are a chance for designers to socialize, talk shop, and foster their local design communities.

Get some press

There is nothing more powerful than a well respected publication coverage of you, your story or your work. It adds a lot of credibility and trust to your brand and sets you apart from all the competition in your industry.

It’s not that easy to get press coverage though, you either use your personal unique story or build something remarkable and controversial, like an innovative redesign of an existing product or a new concept for something that would be cool if existed.

A great example is already mentioned Tomas Jasovsky, a Slovak designer who came up with a design concept for Instagram for Business and got coverage by tech publications, one of them being The Next Web.

Associate yourself with other strong brands

Work on your credibility part of the brand. Getting press is cool but might not be enough to impress potential clients. People love doing business or trusting people they know. If you are just starting out and don’t have a big audience, it’s better to associate yourself with bigger brands and companies you’ve worked with, helped or consulted them in any way. That way people will share the trust they have with a brand and associate it with your brand giving an enormous boost in brand credibility and likeliness of a new lead or customer.

Check out an example above, an elegant yet convincing way to show off and gain some more trust from first time visitors who might be familiar with Badoo, ITV or O2 brands.

Monitoring

Monitoring and tracking how you are perceived and talked about online is extremely important in order to establish genuine connections and catch true fans. There are many tools online you can use to track your personal brand on the web as well as social media and respond or chip in the conversation.

  • Google Alerts – it’s a simple, yet brilliant tool that allows you to create custom email alerts with certain keywords and see who is talking about you online.
  • Mention – this tool allows you to monitor the media, your brands and competition in real-time, on all-devices, for free.
  • Klout – helps people who want to be great at social media.
  • Brandwatch – powerful social media monitoring and analytics tool, chosen by pioneering brands and agencies all over the world.
  • Brand24 – gives you instant access to mentions about your brand across the web.

Just be yourself

May sound like a cliche, but you simply have to be yourself. If you don’t like the way you are, develop better habits, improve yourself and show people who you want to become if you are too shy to portray your current-self.

From my experience I can tell you one thing, being humble and honest always wins against lies and arrogancy. Tell people your goals, share your vision, tell your own unique and authentic story and you will see people following you and connecting with your story, your brand and personality.

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

You can find a similar design on the TutsPlus navigation. They use downward-pointing arrows for dropdowns and right-pointing arrows(closing point brackets) for the flyout menus.

One thing I don’t like in this design is the sub-menu arrow style. The arrow icons only appear while hovering a menu item, even though all the other links have submenus too. Good design practices would encourage keeping these arrows visible at all times.

But I do like the simplicity of the TutsPlus design. It’s a perfect example of how tiny little markers can go a long way towards better usability.

Space With Link Padding

It drives me crazy when I see designers misusing space in their navigation.

The majority of dropdown menus have a bit of space between links. But there’s a huge difference between margins and padding.

With margins you need to click/tap on the actual link text. The clickable area is only as large as the text itself. But with padding you can make the entire area clickablemeaning the user has a much larger target. In the context of menu links I’d argue larger is always better.

Webdesigner Depot has a cool animated dropdown menu courtesy of their recent redesign. When you hover the “blog” link you’ll get a two-column dropdown menu. If you hover any of these links you’ll notice they use padding to create space.

This means you can click in the white space around the link text which makes navigating the site a lot easier.

Most dropdown menus fall into one of two types: padding for spacing or margins for spacing.

You can tell by hovering the space around the link to see if your cursor turns into a clickable glove. Here’s an example of a site that doesn’t use padding.

But when you hover any of the dropdown links you’ll notice only the text is clickable. Worst of all their dropdown menus are pretty wide, but the link text is fairly short.

I can’t imagine a scenario where margins would be better than padding. By making the links block-level elements they can span 100% of the dropdown menu. This means the user could click anywhere in that link’s box and still visit the page.

To me the choice is obvious. If you can increase the click/tap area of links in your dropdown menus then you’ll greatly improve the navigation experience.

Clear Hover States

Designing an “active” class for hovered menus keeps attention where it belongs. Most designers use the CSS :hover pseudo-class which works great for actively-hovered links.

But it’s also a good idea to keep the main link highlighted when the user is hovering submenu links. This denotes a clear path of activity where anyone can glance at the menu and quickly determine which primary link is active & which sub-menu link is hovered.

You can design hover states with many techniques like font color changes, BG color changes, text underlines, highlights, box shadows, whatever. The goal is to keep the parent link activated even when it’s not being directly hovered.

DePauw University uses very simple contrasting colors between white and black. The default navigation uses white text on a dark background. When hovering a link you’ll notice that these colors reverse.

But when you hover a primary link with a sub-menu you’ll also notice it stays lit up the whole time. You can hover any internal link and still get that main highlight effect.

Each design can have its own styles so you don’t need to go black & white like DePauw. But the active styles should be noticeably different than the default links.

On Comedy Central’s website you’ll find the same effect. But instead of a white highlight color they use a lime green/yellow.

You can build a working dropdown menu without this active highlight effect. But UX designers know that just because something works doesn’t mean it’s working optimally.

I think all dropdown menus should keep an active highlight over the parent link. This also includes sub-sub-menus that go 2-3 layers deep.

Quick Dropdown Animations

CSS3 mixed with jQuery can make some powerful animations for the web. Dropdown menus thrive on animation whether they’re sliding or fading into view.

But animation should always serve a purpose. UI/UX designers need to use animationpractically. It should bring the interface to life but shouldn’t slow down the user experience in the process.

The best dropdown animations can be summarized with two words: quick yet noticeable.

Take a peek at the ESPN top navigation. You can hover any sports division to get a dropdown menu of teams and related links.

This dropdown clearly slides into view from top to bottom. However it does this quickly so you’re not stuck waiting 2-3 seconds before you can interact with the links.

Generally I recommend keeping menu animations at 1.5 seconds or less. This rule of thumb only applies to menu animations because they’re interactive elements. But you can easily extend animations for other page items up to 3-5 seconds(or more) if it makes sense.

Ironically the CSS MenuMaker website has a stunning top menu design. The dropdowns have callout arrows like speech bubbles to denote which primary link it belongs to.

But in the context of animation these dropdowns are swift. I’d estimate their animations run for 300 milliseconds quickly fading in & out of view.

But they only animate when focus moves elsewhere, so once they’re visible the links do feel solid.

That’s the key to a great dropdown menu animation. It should have that magical sense we all love in animation, but the animated element should also feel like a solid part of the page.

Closing

A quality dropdown menu considers both form and function. Yes it should look nice, but it should also function well and create a fantastic experience for the visitor.

These tips are some that I live by in my design work. They’re all pretty simple to add into your dropdown menus with very little code. And if you’re looking for more examples of great nav menus take a peek through our inspiration section.

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

Creating a Web Design Style Guide

1. Study the Brand

First, you need to study the brand so that you understand what it stands for. Get to know the story behind the brand, observe the team and figure out the vision, mission and values of the company. It is important to dig deeper into the brand so the style guide you produce will visually and emotionally represent the organization.

If you’re a designer who can’t code, simply open Photoshop and give your document a title and a short description of what the document is and what it is for.

If you can code, it is better to create an html document with pre-coded assets so they can be easily reused.

2. Define Typography

According to Oliver Reichenstein, typography is 95 percent of web design.

You must get typography right because it is one of the most important communication tools between visitors and your website.

Set hierarchy and identify it. There are headline types: h1,h2, h3, h4, h5 and h6. Then body copy, bold and italic variations. Think about custom copy that will be used for smaller links, intro text and so on. Provide font family, weight and color.

3. Color Palette

It is incredible how humans perceive color and associate hues with known brands. Think of Coca-Cola, I bet you see that red now.

Begin by setting primary colors for your style guide that will dominate your website, dominant colors should include no more than three shades. In some cases, however, you will need secondary and even tertiary colors to illustrate your user interface, make sure you define them too. Also include neutral colors like white, grey and black for the primary brand colors to stand out.

4. Voice

The voice that I am referring to is actual copy. You have studied the brand before starting the style guide and found out that brand is youthful and trendy. If there are no directions for voice of the copy, you have to define it. It can be a simple example given showing that voice has to be professional yet funny and welcoming. Instead of stating“You’ve got 404 error” you can say “Oh boy, you’ve broken the interwebs. 404 error.” If the voice were more corporate, you wouldn’t do that. Brilliance hides in small things.

5. Iconography

Icons have existed for thousands of years and are older than text and words. Take advantage of using icons in your projects because they will give an instant idea to visitors as to what’s going on and what will happen next. Picking the right icons will give more context to content than color palette, copy or graphics. When using icons, make sure to think about the target audience, religion, history, so you avoid misconceptions and misunderstandings. One more thing to mention, think about the brand and its values so you don’t use hand-drawn icons on a large banking website.

6. Imagery

Pictures speak thousands of words. Make sure to include imagery that defines the style and direction of pictures the website should use. Once again, think about the values of the brand and its mission. For example, a water charity uses striking imagery that has strong emotion, good cause and calls to human emotion for them to be fortunate to have essential living commodities like water, food, electricity and education.

7. Forms

Forms are what make your website or web app interactive and dynamic so the user can enter the data and you can then manipulate it and do the work.

Make sure to establish a hierarchy and include possible feedback from forms — active, hover, add error, warning and success messages including things such as a password being too weak, email being not valid or simple success messages e.g. “email was sent.”

8. Buttons

Buttons are a mixture of color palette, forms and voice. Rely on these previously created assets to create consistent looking and functional buttons with different stated designs.

9. Spacing

How can spacing be in style guide? It is extremely important to mention the spacing. It can be in the form of a grid used for a layout; it can be spacing defined between headlines, buttons, images, forms and other elements.

Getting spacing right is important because it gives more breathing room to elements, and consistent use makes your work look structured and professional.

10. Dos and Don’ts

Last but not least: Make the DOs and DON’Ts section much like an FAQ showing the most common pitfalls and give examples of how things should look and work instead.

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.

Try to avoid vague opinions or how things feel to you personally. Instead gather user feedback and study traffic trends to gather ideas for where problems could be and why they’re happening.

This can be done through a number of techniques:

  • Direct user feedback
  • Screen recordings
  • Analytics goals
  • Analytics user flows

Each technique offers a different perspective for studying the same website. UX reviews can try to improve everything or focus on one specific task like high bounce rates, signup rates, or time on page.

If you’re working on a personal project then you can set the metrics yourself. But client projects require collaboration because you’ll need to know what the company wants to improve.

How you conduct the review and how much information you gather will differ based on the client. Larger businesses can require more information where you’ll need to compile everyone’s goals into one big strategy.

The initial stage of a UX review is about information gathering moreso than anything else. Once you have enough raw data you’ll begin to see patterns, and these patterns can lead to insights for solving the tasks you’re faced with.

Planning Specific Goals

It’s easy to keep asking yourself questions and never really coming to detailed conclusions. But with specific goals you’ll be forced to study certain metrics and try to solve for very specific end results.

Think about the goals you need to aim for and what they mean. A high bounce rate means people leave the first page they enter. But are they on that page for a while? If yes, then they’re probably finding the information they need and leaving.

But what if it’s a landing page? Then people are leaving because they’re not interested. But why? Maybe they just don’t see the CTA button to sign up, or maybe they don’t understand what the page is for.

The planning phase goes beyond just goal setting. You’ll need to look into a few points:

  • What is the problem(or problems)?
  • Why do these problems exist? What is the cause?
  • What is the end result you’re looking for?
  • How can you move from the current state to one that solves these problems?

By repeating these steps over and over you’ll find new problems, look for new solutions, and leave yourself a big ground for testing. There’s never a fully completed project so there’s always room for more optimization.

Another step is creating believable personas that can fit into your target audience.

These are like marketing segments that may visit your website and be looking for a certain experience. And these general demographics can have very different goals that you need to support. UX designers go so far as to find custom CC photos for personas because they can make a difference.

When studying goals it helps to get into the head of your typical visitor. With a persona it’s easier to get into this theoretical mindset and look at the site from their point of view.

But personas can be far too vague to actually offer value. Try to use them sparingly and find situations where they’re useful.

And be sure to share ideas with other designers or project leaders to gather feedback. Goals need to be in line with KPIs so that your UX review results can improve the right metrics.

Pinpointing Issues

This is perhaps the most fun and ironically the most tedious stage of the review.

Once you know what the goals are you’ll want to dive through the website and look for issues. You can do a quick trial run through every page or give yourself set goals playing like a “typical user”.

As you spot issues organize them into a spreadsheet, or whatever system you prefer. This way you can sort issues by severity and tackle the most serious issues first.

I recommend Jakob Nielsen’s severity rating guidelines because they’re almost a staple in UX communities. This scale includes 5 rankings starting from 0(no problem) to 4(glaring usability problem).

  • 0 = I don’t agree that this is a usability problem at all
  • 1 = Cosmetic problem; doesn’t need fixing unless there’s extra time
  • 2 = Minor problem; should be fixed but lowest mandatory priority
  • 3 = Major problem; important to fix as soon as possible
  • 4 = Catastrophe; this needed to be fixed yesterday

Rate each problem you find with this scale and also consider ranking the difficulty level.

If the solution is obvious and only takes 15 minutes of coding then it’s a quick fix. If you need to brainstorm with other designers and spend a few days finding a solution then it’s a much more detailed problem.

Always look for the quick fixes and correct these ASAP. These can boost morale and help you feel like you’re actually getting somewhere

Not all problems have obvious solutions and many problems require a good amount of brainpower to solve. But don’t try to solve everything at once.

Organizing all UX problems first can make solving them a heck of a lot easier.

Finding the Right Solutions

The toughest part of any UX review is finding the best solution for each problem. But this is basically the whole point of a UX review.

Oftentimes the best solutions come from common sense. You can study other websites to see how they’ve solved problems or look up case studies online. If you’re facing a common issue like increasing time on page you better believe others have too and many offer their solutions online.

I also recommend user testing if you can afford a simple test along with setting up aheuristic evaluation to get the most information possible. You’ll want eyes on the design because those eyes offer a fresh perspective that may come up with fresh ideas.

Test, implement something, gauge results, and test again. UX is in many ways scientific, but it’s also repetitive and the only way to know if something works is to try it out.

You will absolutely have questions during this process. Even professionals get stumped at times.

If you work alone and don’t have a team then you may feel lost at sea. But remember the Internet is a huge place with tons of communities willing to share advice.

Moving Forward

If you’re new to UX reviews then start small and work in steps. Research online when you have questions and make sure you’re always working towards a goal.

Professional UX designers spend years doing UX reviews and they can become like second nature. But they always require critical thinking and solutions that solve real-world problems. I hope this guide can get you started on that path and hopefully this guide can encourage every designer to look into the value of a great UX review.