This is default featured slide 1 title
This is default featured slide 2 title
This is default featured slide 3 title
This is default featured slide 4 title
This is default featured slide 5 title
 

Monthly Archives: December 2016

Design Trends For Modal Windows On The Web

Modal windows are those popup windows that appear over the screen rather than opening a new tab/window. They usually darken the background to bring attention to the popup.

Most websites running modal windows add some type of call to action whether it’s a button or a form or something. But it can also be a simple message about browser features like disabled JavaScript or an adblock extension.

Everything in the window takes precedence over the page so these modals are meant to draw attention. They can be annoying and outright infuriating but numbers don’t lie:they work.

Let’s delve a bit into current trends of modal windows to see how they work and why you’d use them.

Dark Backgrounds & Clickable Areas

Modal windows follow a similar design strategy and they’re not very complicated.

They mostly all use a darkened background on the page to bring attention to the modal content. This shouldn’t be a pitch black background because that can feel intimidating.

Instead the user should see a touch of the page behind the background, but it should have a reduced opacity. This could be 90% or 50% depending on how much you want to hide the page.

Also the user should be able to click on the background to hide the modal.

This isn’t universal but I hate when designers remove or ignore this feature. Yes there’s usually an X button or close button, however it takes more effort to move the mouse onto that button.

It should be possible to just click the background and hide the message right away.

Some modals use fancy animations to appear on the screen. This is usually preferred because it reduces the harshness of a random popup.

Having the modal window slide, fade, or bounce into view makes it a touch easier on the eyes. But don’t drag out the animation either!

Most users will ignore the modal so they don’t want to watch a full 3 second animation. Get to the modal quickly and let the user either read or close the window.

Designs vary from site to site but most of them use a white modal background with dark text. It’s the simplest way to design a high-contrast message that can blend with any website.

Overall these are some basic trends so they’re not absolute. But keep your eyes open as you browse the Internet because you may be surprised how many different styles are out there.

Display Techniques

There are some popular trends used by marketers who want to display modal windows for certain visitors.

The vast majority of modal popups happen a few seconds after the pageload. Most visitors haven’t even had time to read through the site to understand what it’s about. This seems like the worst way to do modals unless they’re informational for things like cookies or adblock settings.

Other display styles typically work better since they’re geared towards user behaviors. Here are the three most common techniques:

  • Exit modals appear when the user’s mouse leaves the page
  • Timed modals run after X seconds/minutes
  • Location modals appear when the user scrolls down a certain amount

Each scenario is different and should be used based on the audience.

If you run a blog with lengthy content like Smashing Magazine then you might do a scroll-based popup. Other blogs like WPBeginner actually did the exit modal strategyand saw a huge increase in daily email signups.

There’s no denying that this stuff works. It’s just a matter of how you’re willing to run modals and what the end goal is.

Popover Marketing Messages

Modals are primarily used for marketing so the copy should prey on ideas and emotions. Recently modal windows have taken a turn towards the guilt trip approachfor their buttons.

Instead of just having buttons that say “yes” and “no” they instead go so far as you make you feel bad or guilty for closing the window.

It seems like this would just make people angry but it really does increase conversions. Check out this Conversion XL post to see a few examples.

Beyond the typical yes/no signup modal you can also find guilt trips in the marketing for adblock messages. These appear on some larger sites that now want to ban adblock users.

Business Insider is one example that displays a popup modal for every adblock user. It does not let you close the modal without disabling adblock or paying for a subscription to the site.The goal of any modal window should be persuasion to take action. This could relate to a sign up form or it could be about disabling adblock, or basically anything else you want the user to do.

The best success comes from excellent copy and a short but sweet message.

Pure CSS vs. JS

It’s never a great idea to completely reinvent the wheel so modal window plugins are basically the norm. But which one you pick can be a very complex process.

JavaScript plugins offer the most style and control. I prefer these because almost every user will have JavaScript enabled, so they’re a pretty safe bet. However pure CSS can be more compatible so there are two sides.

Here are my preferred JS modal window plugins(all free).

leanModal

leanModal is a simple jQuery plugin and super easy to customize. It has a pretty small library so it’s perfect for almost everything. However it doesn’t support embedded content or slideshows so it’s not great for dynamic content.Still if you just need an e-mail signup or an adblock message then this plugin can do no wrong.

Remodal

The Remodal plugin goes a step further including custom CSS3 animations. The design style is incredibly simple and pretty easy to customize too. It’s actually one of the easiest plugins to get working right out of the box.

And it runs on jQuery/Zepto so you have your choice of dependencies.

SimpleModal

If you’re looking for unique and well-designed check out SimpleModal. This is yet another free plugin but it has a candy coating with some brilliant theming.

I don’t like how the background doesn’t darken as much but you can tweak the code to customize that. What I do like is the variety of content you can run. SimpleModal can work with embedded content, iframes, Ajax requests and pretty much anything you need.

How Great Icons Can Affect The User Experience

Interfaces are all about communication and getting things done. A website’s UI is a means to an end, and the designer’s job is to create an interface that helps the user reach that end quickly.

Icons are perfect for interfaces because they convey meaning without words. Users can learn how an interface works just by studying the visuals and interacting with the elements.

In this post I’ll cover a few different ways to use icons to improve the quality of UX on a website. There are no perfect uses but there are commonalities between great icons and an improved user experience.

Enhanced Navigation

Icons naturally help users navigate through a website based on visuals alone. The best icons are the ones that most people recognize so you always want to stick with these first.

But you can design icons for links with label text for clearer usability.

Take a look at the portfolio site of Tim Roussilhe using a vertical navigation menu.

Tim includes icons above each link label to distinguish between purpose and behavior. It’s one of the clearest methods for icon use because it’s easy to see and easy to understand.

Always remember to include text labels for links too. Pure icons for navigation rarely works, or at least it’s not the best case for usability.

But even with a site like My Own Bike you can at least guess where the links go. The site is entirely in German but the icons still give clues.

Another really important icon is the three-bar menu icon. This is also called thehamburger menu and while many designers hate it, more people are slowly realizing what this symbol means.

The menu on Inc is another great example showing how icons tie into navigation.

The menu link uses the hamburger icon but it also has label text reading “menu” underneath. This clarifies the icon’s intent and makes it easier for mobile users to find the navigation.

Plus when the nav is visible users will get small plus signs next to nav links. These icons indicate a sliding drawer of sub-links, kind of like dropdown links but designed for mobile.

Another popular trend is the mega navigation dropdown menu. This can be found on sites like Mashable and each link has a small downward-facing arrow to indicate a dropdown menu.

These icons aren’t necessary but they really do improve the experience. Most users recognize the arrow symbol and they know what it means.

Of course this navigation could work without the arrows. But there’s no denying that the icons help clarify intent and they make browsing the site a lot simpler.

Visuals to Encourage Behavior

Navigation can go far beyond the top nav menu bar. It can also include links within the page body or in the sidebar that help users navigate their way through a website.

Icons are also great for in-body links if they stand out. For example on the Media Temple homepage you’ll find a few tables with “read more” links in different colors.

These links all use the sideways arrow icon pointing to the right. This is a commonly recognized symbol for the web meaning to move onto the next page.

Most web browsers have back buttons and forward buttons. The back button points to the left and forward points to the right, and these buttons let users navigate in their browser history. So any right-facing arrow typically implies moving forward onto the next page.

Media Temple uses this to their advantage in a subtle yet noticeable way.

One prominent in-page navigation item is the Call to Action button, abbreviated as CTA. Icons can work very well for CTAs that serve a specific purpose.

For example jQuery has a prominent download button in the upper right corner of the homepage. This CTA button includes a download icon right beside the text.

This lets you know that the button relates in some way to downloading files.

But your buttons don’t always need to produce an action in the browser. A CTA could just lead to another page that relates to your product or service.

Icons can be used to help sell the button and drive visitors to click. ResumeBaking is a terrific example where their CTA is surrounded by icons with curved arrows.

These custom icons help sell the button and the product by asking the user to click. But they sell based on features like creating a free resume, sharing it online, and getting job offers.

Yes these are a bit vague but they work. Many users just see the icons + arrows and click the button based on attention.

Form Descriptions

Every website has some type of form whether it’s an e-mail signup form, an account login form, or even just a basic contact form.

Icons can be paired with forms to build trust and encourage user behavior.

Take a peek at the site for Life Could Be Better which has a fixed email signup at the bottom of the page. This form includes a small envelope icon right next to the form to show what it’s for and to draw attention.

This is also true for the company’s telephone contact info and social media links.

Icons are used to describe surrounding content. And since visuals are easier to understand than words it makes sense to make the icons clear and easy to spot at a glance.

Another technique I like is when designers add icons to their signup fields. This works very well if the form has more than 3-4 inputs and the user needs to fill out all the fields.

5 Tips on Hiring the Best Web Designer

Hiring a web design can be an exciting process. When I talk about hiring a web design in this post, the advice can be applied in a variety of ways. First, it could mean hiring a single, usually freelance, designer for a job you need to be done. It could also refer to a web design agency.

Additionally, it could be advice for hiring a web designer for your own team. The advice is valuable for web designers who are looking to improve their portfolio. Now, let’s discuss five different but important things when trying to hire a web designer.

The work shows off responsive design

It’s still surprising how many times responsive designs don’t make it into a web designer portfolio. It’s hard to say if a designer is capable of delivering responsive design if it’s not there. It could be omitted by mistake or because they have never done it. You can’t tell if it’s not there. Now, this guide refers to a web designer.

The web is a flexible medium that works on the tiniest devices and their tiny screens to larger devices and their larger screens. It’s important for any website to have a good responsive design. At this point in time, there is no excuse in not at least including a screenshot of the responsive design as part of a project’s case study.

Jenny Johannesson shows off the responsive design in her portfolio. Her case study on Internet.org starts off with working on the project with a mobile first approach. That’s huge! It’s actually quite impressive too. In her case study, mobile devices aren’t even an afterthought. They are a central part of her project and how she approached it.

Additional, the portfolio of Toy Fight includes a case study for Outpost. As part of the case study, the agency includes a section for mobile design. They explain that the approach towards mobile design was well fitting for mobile just as it was for the desktop design of Outpost’s website.

The work includes research

Every web design project should start with some sort of research. Research allows you to start the project in the right direction, on the right foot. There are so many different ways to go about research. There is no single method of getting insight.

Research can include things such as user interviews, AB testing, analytics and metrics, heat maps, heuristic evaluations, personas and scenarios, surveys, or usability studies, among many other.

Netta Marshall includes a quick blurb on how research impacts a project she worked on for Tally. She explains how the research was conducted – through Craigslist volunteers – and how many iterations her testing produced – 2 full redesigns. Although she doesn’t go into too much detail here, it’s clear that Netta doesn’t design something willy nilly. There is a process that she follows and it impacts the product she is trying to build.

The work shows off good communication skills of the web designer

More or less, design is about communication. A lot of what designers do is communicating with their clients or bosses and then again with the target audience of the website. It’s important to show good communication skills within a web designer’s portfolio.

A web designer’s job is never only just the final UI design. That’s the just the pretty end-product. A great web designer will walk their audience through their case studies. They will communicate their projects, their part in it and their process, among a whole lot of different information.

I truly admire the portfolio of Hyun Seo. At first glance, there is a whole lot of text and not a lot of UI screenshots. That’s a good thing. Hyun’s case study on IBM’s Cloud Security Enforcer start of with a lot of text. It’s him explaining the project to a potential client or company. The case study is about ¾ text and ¼ screenshots. The screenshots are all the way at the end, by the way. The case study communicates well his role in the project, the problem and how he tackled it.

Is the web designer and artist or a problem solver?

Yes, websites created with a talented web design will be beautiful. But that’s not why people or business need them. Websites are a way to solve business problems such as increasing sales, clicks, or sign ups. Different projects will have different problems and different measurements of success.

Actually, a web designer who is a good communication will make this distinction easy for you to see. They will clearly communicate their problem-solving skills.

The case study on the redesign of the Met from Fantasy explains a few different problems their redesign tackled. The design focused on helping users find exhibitions, plan a visit and even support the Met through donations. Unfortunately, their case study does not go into too many details of each problem. But, it is still a clear indication that the agency takes business objectives seriously.

Another example of a good and quick case study for Revue by Awkward. The case study is quick and the point. The case study explains the thinking process of how Awkward arrived at a solution. Like I said, the case study is quick and to the point but it clearly shows Awkward’s problem-solving skills.

Showing off the design process

I found that the best portfolios have case studies that show off the design process for each individual project. Most often it highlights that made the project awesome, interesting, or even difficult. It’s so much better than a separate process explanation because it’s relatable when it’s tied to a specific project. As a potential client or boss, you’ll get a clear idea of how the designer or agency works and thinks.

Additionally, showing off the process will let everything else in this post fit right in. Sharing the process will also share a web designer’s communication skills. It will clearly indicate the designer is a problem solver because they are showing you how they solved the problems at hand. Having a few different projects will allow you to share different skills.

Some case studies can have a quick snippet about the done research, or about how responsive design was important to that project.

One of the most beloved examples of a company sharing their process has to be Focus Lab. They are a known and admired web agency which built their name by sharing their work in progress and their design process. Take their case study on Sello. It’s divided into different sections starting with a quick explanation of the challenge.

The next section shows how the agency worked through different logo design concepts. Next, they show off how they created wireframes for the website. So on and so forth. There is a lot of images sharing the story of how they went about the design process.

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.

“90% of information transmitted to the brain is visual, and visuals are processed 60,000X faster in the brain than text.”

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

Some more great examples:

Kerem Suer

Karim Rashid

Jeff Broderick

Jim Ramsden

Viens-la

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.