Category Archives: Uncategorized

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.

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.

It explores some interesting thoughts about the role of design, design thinking, and poses questions to some of the most forward thinking design professionals around today. There is particularly excellent insight into design as a tool to help with innovation and sustainability for people, businesses, and society as a whole.

2. Design & Thinking

Design & Thinking conducts interviews with prominent individuals from companies such as Autodesk and Coca-Cola, looking at the process of design thinking and design’s ability to make a significant impact on real-world problems.

It discusses how strategic and well-thought out design decisions can have a positive effect on every problem, from everyday life, to solving world hunger and other humanitarian issues.

3. The Modern Russian Design

Sergey Shanovich’s documentary ‘The Modern Russian Design’ provides a unique insight into one of the most interesting regions of the world and its design industry, and individuals who are trying to make an impact across multiple areas of design. It covers the past 20 years of progress within the Russian design field and documents the designers who have helped contribute to a part of this progress. The documentary covers multiple areas of design including fashion, industrial, multimedia, web, and graphic design.

4. Connecting – Trends in UI, Interaction, & Experience Design

‘Connecting’ is a short but interesting documentary which shows just how far we have come in the last 3 to 5 years. It helps take a step back from the constant innovation and progress, and look at interaction and UX design from a new perspective.

Specifically exploring the future of interaction and user experience design, ‘Connecting’ looks to document the impact technology is having on the lives of everyday people, how that may develop into the future, and the ramifications of such developments.

5. Jeffrey Zeldman 20 years of Web Design and Community

An inspiring figure in web design, this documentary has Jeffrey Zeldman discuss a variety of topics about the past, present, and future of web design.

Owner of ‘A List Apart’, Jeffrey has some great tips for designers and developers alike, specifically around topics such as building a mailing list, and looking towards to future of web design. It is well worth a watch to learn from someone who has been working in the industry since the very earliest beginnings.

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 the product pages, the photos command attention. Part of it has to do with the fact the photos are large. The other part has a lot to do with the fact that the photos are the only elements on the page that have color in it.

The photos feature darker shades and similar shades too. Storq uses photography that fits right in with the overall design. They don’t use dramatic or stark colors in the photos to draw attention; that would be too much and unnecessary.

Neon or contrasting colors are not the only ones that can draw attention when thought through with the context of the design.

Colorful texts can draw attention too

Let’s talk about changing the color of text such as headings or large pieces of copy. I have found two amazing examples of how text colors can leverage a visitor’s attention too.

The first example is that of The Nature Conservancy in California. The website is a great example for two reasons.

First, the design leverages color but also a hierarchy. Hierarchy is a fantastic design tool in pinpointing what is the most important to the least. It’s clear at a first glance, what is important to look at first in the above screenshot. “Our approach” is the darkest piece of text in that whole section.

The rest of the text is the same color but what is more important is determined by size. In this example, color is a unifying factor, except for the heading off course. At the same time, color is used to draw attention away from more trivial elements like the numbers on the left-hand side of the headings.

It’s nice to know the order of the sections but, more or less, the numbers are irrelevant to the experience. Therefore, they are lighter in color.

Additionally, we have an example of Founders. By the time you make it halfway down the home page, you’d have seen at least three different font colors.

When you first take a look at the green hero text, it grabs your attention because of its front and center. But the second you realize it’s actually a dark green color, it gets to keep your attention for a little longer. Here the green is a little unexpected so it keeps a visitor a little curious.

At the very least, if the green headline go unnoticed, it’s hard not notice the change of color in the text within the middle section again.

The headlines are a dark blue while the supporting content is gray in color. The contrast of the light gray against the blue heading gives a lot more prominence to the headlines themselves. The gray makes the headlines stand out a whole lot more. I love that such seemingly irrelevant but highly effective manipulation can be done with just color.

Using colorful decorations to create a focal point

In this and the next section, we’ll talk about how to leverage shapes, patterns and color to your advantage. For now, we’ll discuss the decorative aspect of shapes. Unfortunately, decoration have a bad name in web design which is just a shame. You can easily use decorations to create a focal point within a design or a specific section without adding visual jargon to a design.

That’s exactly what Perspective did. They are a creative agency with a fantastic and simple website. If you take a look at the bottom of their homepage, you’ll see there is one section that will fit perfectly as a great example for this point. It’s the same section as the screenshot above.

As you can see, the section is made up of two different elements. First, there are the hands holding up the two smartphones.Behind it, you’ll notice the decorative, rounded shapes.

The section looks completely different without the colors behind it. And, the experience of the web page changes completely now. Without that burst of color, the section doesn’t have the necessary visual focus when you’re idly scrolling down.

So although, yes, those blue and pink bubbles are seemingly irrelevant, they have an important job to do. Especially, if you notice that the section lacks significant color without them and therefore becomes significantly less interesting too.

Shapes, color, and repetitiveness make up visual languages

A visual language is a system of communication using visual elements such as colors, shapes, headings, and so on. Often times, designers will develop a style guide but a visual language goes a whole lot beyond that.

A visual language has detailed relationships between each kind of element. It specifies what you can and cannot do. It explains how elements are to be used with one another to best represent the visual style. A visual language build a whole library of visual components and details how they are to be used.

Color, naturally, is a big part of any visual language the same way it is a big part of any style guide. If you’re looking for an example of a fantastic, thorough and public visual language look into the Material Design Documentations.

This is not about Material Design, however. It’s about the visual language of Wyre, online bank transfer service. The company’s branding heavily relies on the repetitive leaf-like shape that makes up the logo. You can see this shape in use all over their website from the home page to the about page all the way through to the signup page. Another thing that’s repetitive on the website’s design is the use of various blues.

Oftentimes, the use of the shape is combined with a use of a specific color such as the common CTA on the homepage to get started. On the home page, the blue shape is used as the CTA button multiple times. It’s actually used exclusively as the signup CTA. That’s a great  stepping stone in developing a fantastic visual language. Each time a user sees the leaf-like shape with text over it, without even reading what it says, the user can easily take a hint it’s the main and only CTA on the website after having used it for a quick while.

Such a correlation wouldn’t have been possible without the redundancy in both shape and color.

Lack of color variation can be a good thing

Not every design calls for the most colorful color schemes. The first example in this post, Storq, did just fine in drawing attention with their color-limited color scheme. Let’s take a look at two examples that draw attention to selected elements by removing color as the focal point.

The first example is the landing page for Dona, an AI-powered do-to app. Here is the thing, though, this design doesn’t lack color completely.

There are some pieces of blue on the landing page. Additionally, the screenshot in the iPhone has tiny bits of other colors as well. The idea here isn’t to remove color but to use its absence to an advantage.

The second example is a portfolio for the Logo Shop. The website is made up of a washed out pink background and everything else is a dark gray color. Now, both of these design don’t utilize color in the traditional sense. At the same time, neither one of them is truly grayscale. What both of these design do is level the playing field for the emphasis on the colors.

Because there isn’t a single color that stands out the most, the visual emphasis then relies on the amount of color used or the size of the elements. In the case of the Logo Shop, the header is the biggest element above the fold. It’s obviously the most important element there, visually speaking. This wouldn’t have been so easy to distinguish if the texts used different colors to create a visual hierarchy.

As you can see, lack of color diversity is a good thing. On Dona’s landing page, the emphasis easily goes to the animated screenshot in the iPhone. If the heading or the email capture were a bright color, the focus would have been taken away from the .

Highlighting bits and pieces

Sometimes using color to draw attention to something is as simple as using it as a highlight. Highlighting is the whole idea behind accent colors anyways. Accent colors are to give attention to less significant information compared to what the main colors are supposed to represent.. So, how can one use color to highlight?

On Highlight’s website, the yellow is used as an accent in two ways. First, to highlight information in each individual section. Second, to highlight the most important section of them all. That’s a nice way to utilize color in a smart manner.

Actually, on Highlight’s landing page, the yellow is the only color besides black, white and some grays. The yellow color isn’t used that often either. It’s used sporadically, in strategic places to highlight important pieces of information in any given section. This way, the visitors know exactly what is of visual significance and what should be looked at first, subconsciously of course.

The yellow highlight is used in a limited fashion in all but one section. The very last section of the landing page is the exact opposite as far as color use goes. The background is yellow with a yellow pattern over it. It denotes the most important section of them all. It’s the only section where a user can take an action by providing an email address.

Something similar is happening on Yummygum’s homepage too. This digital agency uses the color blue to make its highlighting. On the top section of its homepage, it uses the color blue to underline and highlight a link. Visually, it’s the most important link in that specific section. As you scroll down the home page, different sections use blue differently. But, they still use the color blue to highlight a single, most important element of that given section, such as a heading or the contact button.

Yummygum’s home page is filled with small highlights. All of those are possible thanks to limited and thought through use of color on the part of the website’s design.

Conclusion

Color is such a fantastic design tool. It helps keep order or invokes chaos – whichever one you need to achieve. In this post, we went over a few various way in which color can be used strategically in order to drive attention to something specific. This post was meant to shed light on how to think about using color in design in a strategic and mindful way.

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 & 2016, long scroll evolved right alongside card-based design. When combined, the techniques let you provide users an endless stream of bite-sized content (which is perfect for web and especially mobile experiences).

Plus, the above-the-fold doctrine that was holding scrolling back is now being recognized as the myth it really is. The truth, according to actual studies, is that users really don’t mind scrolling. The practice of jamming everything above the fold is losing out to spacing everything out along a even and smooth scroll.

Part of the reason the myth became popular, of course, was that scrolling was only seriously considered as an intentional design pattern after advances in Javascript and CSS. Before that, it was much more difficult to make scrolling “sexy” through visual storytelling. As you might imagine, a long page full of text (interrupted by occasional images) isn’t a very engaging UI layout.

But once you start approaching the long scroll as a canvas for illustrating a beginning, middle, and end (through graphics, animations, icons, etc.), then you start to see it’s film-like power in capturing user attention.

In fact, some hybrid patterns are emerging as the latest trend in scrolling. For example, the “fixed-in-place scroll” that we use on our own UXPin tour page creates the same interactive experience of a traditional long-scroll site without stretching the site vertically.

Is Scrolling Right for You?

With every design technique and tool, there are those who love the concept and those who hate it. In most cases, neither side is intrinsically right or wrong; that’s why it’s important to weigh all considerations before tackling such a project.

Advantages of Scrolling:

  • Encourages interaction – With the ever constant stimulation of changing element, it can be an interesting storytelling method that encourages user interaction – especially with tastefully-executed parallax scrolling.
  • Faster – Long scrolling is faster than clicking through a complex navigation path and does not slow down or limit the user experience. As described inInteraction Design Best Practices, the perception of time is often more important than the actual passing of time.
  • Entices users – The ease of use promotes interactivity and increase time on site. This is especially true for infinite scrolling sites, where you can help users discover relevant content that they may not have even thought of.
  • Responsive design – Page designing can get complicated across devices with different screen sizes and capabilities, but scrolling helps simplify the differences.
  • Gesture controls – Scrolling seems organically linked with touch, since swiping downwards is much easier than repeated taps on different areas of the screen. Users (especially mobile) are commonly accepting this as a way to display information.
  • Delightful design – Few clicks can result in quicker interactions for a more app- or game-like user experience.

Disadvantages of Scrolling:

  • Stubborn users – Nevermind why, some users always resist change. Nonetheless, the technique is so widespread now (especially during mobile experiences) that it’s probably safe to say that the majority of users are accustomed to the technique.
  • SEO drawbacks – Having only one page may have a negative effect on the site’s SEO. (To learn how to minimize these SEO downsides, check out this Moz piece for parallax scroll and this Quicksprout piece for infinite scroll.)
  • Disorienting – The disconnection between scrolling and content may leave users confused or disjointed.
  • Navigational difficulties – It can be awkward to “go back” to previous content on the page. To counter this, you could create a persistent top navigation where each item is anchored to a page section
  • Site Speed – Large pieces of content such as video or image galleries may slow down the site speed, especially for parallax-scrolling sites, which rely upon Javascript and jQuery (check out this tutorial to learn how to create parallax sites without slow site speed).
  • No footers – With infinite-scrolling sites, we’d recommend a lean “sticky” footer so you don’t sacrifice navigability. Otherwise, users may be confused by a lack of further navigation at the bottom of the page.

Advantages and disadvantages aside, the long scroll is a technique that suits some types of sites more than others. Longer scrolling websites and best suited for content and design plans that…

  • … are going to include a significant portion of mobile traffic (most users)
  • … include frequent updates or new content (such as a blog)
  • … have a lot of information presented in a singular way for comprehension (such as an infographic)
  • … do not contain rich media because of the drain this can cause in terms of load times

Social media sites, with constant and extensive user-generated content, do well with long scrolling (in fact, Facebook and Twitter helped popularize the technique years ago). On the other hand, goal-oriented sites like e-commerce – which require coherent navigation – tend more towards conservative page lengths.

The middle ground would be a site like Etsy, an online store for user-generated products, which uses a hybrid solution: several pages of so-called “infinite” scrolling, ending with a call-to-action of “Show Me More.”

Like all web design trends, don’t use longer scrolls just because you’ve seen other sites follow the pattern. Make sure your website fits the criteria we’ve discussed, otherwise you might actually experience worse performance.

Scrolling Best Practices

Long scrolling, parallax effects and similar mechanisms are still relatively new to the realm of design (~4 years) , but still some rudimentary trial-and-error has produced some fundamental best practices.

Summarized from Web Design Trends 2015 & 2016, here are some everyday tips for successfully implementing long scrolling.

  1. Don’t be afraid to alternate long with short scroll. Let the content dictate the scroll length, not the other way around. It’s totally fine (and quite popular) to use a short-scroll homepage and long-scroll landing pages (like Products, Tour, etc.).
  1. Consider sticky navigation, such as that used by Free Range Designs, so that users can always “get back” quickly or bounce from element to element in the scroll.
  1. Suggest scrolling with design elements or tools so that every user can quickly see how the site works. Arrows, animated buttons or similar user interface tools are fun and easy ways to help the user determine what to do next. Some sites even include a small button with instructions like “Scroll for More” or “Get Started” to help navigate a site with unconventional techniques.
  1. Make clear distinctions between scrolling clicks or taps and other calls-to-action so that your website gets the desired interaction.
  1. Do some research and look at how users are interacting with the scroll. In Google Analytics, for example, you can open the “In Page Analytics” tab to see how many people click below the fold. Based on the data, you can then tweak the design as necessary.
  1. Don’t go overboard. Long scrolling does not mean 500 pages of continuous content – a long scroll can also be simple. Tell your story and then stop. Don’t force it. Deca, below, uses a scroll that is only a few pages long.
  1. Focus on your user goals and accept that even infinite scrolling sites are not truly endless. When creating longer-scrolling sites, understand that users still require a sense of orientation (their current location) and navigation (other possible paths).
  1. Include visual cues that help orient users in the scroll, such as the helmet icons used in the left hand side for “The Seven Types of Motorcycle Rider” site below.

Scrolling can be a double-edged sword, so stick to its recommended usage to avoid it doing more harm than good.

Pageless Designs of the Future

Long scrolling sites are not going anywhere. While we’ve seen ebbs and flows (or increases and decreases) in the sizes of screens on popular devices, small is here for the foreseeable future. And small screens require more scrolling.

Actually, the transition from long-scrolling to “pageless” design has already started, and some designers (like those at Digital Telepathy) even believe it is the future of the web. As websites continue to shed some of the constraints of how users think about and consume information, designers must think more radically about the best ways to create content in different environments.

Interaction design is the foundation of long scrolling website design. If users like the interface and find it intuitive and fun to use, then they won’t really mind the length of the scroll (as long as it’s not atrociously long).

You don’t always need to shorten the line – you could just make the wait far more entertaining.

If you found this post helpful, check out the free e-book Web Design Trends 2015 & 2016. In addition to best practices for long-scrolling, you’ll also get tips for 9 other successful web design trends. The techniques are illustrated with 160+ analyzed examples from some of the best sites available.

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

Studying dozens of sign-up forms made me realize that a lot of them fail due to these unfortunate errors. They’re far from being bullet-proof.

Let’s learn how to create a perfect sign-up form! We’ll go through a couple of examples and best practices, then by simply focusing on: safety, clear explanation, minimal form and engaging copy, we’ll create our own perfect pattern.

Safety

Let’s consider, in the first place, what the reasons are for using a sign-up form. I’d say they are as follows:

  • Keeping the sensitive data of users safe (e.g. Mint.com, UXPin.com…)
  • Recognizing users as owners of certain data (e.g. Facebook)
  • Limiting access to a certain part of your service (e.g. any intranet)
  • Gathering user data for marketing reasons

Bearing this in mind, consider how a user might feel when confronted by a sign-up form. Most of the reasons behind a sign-up form might be really unclear for the average Internet user. What we don’t understand automatically scares us; no wonder then that many people leave our forms full of doubt and fear of fraud.

In most scenarios, you’re the one benefiting from the presence of the form, so the responsibility of spreading the feeling of safety among your users is definitely yours.

Strangely enough, most sign-up forms just fail to address this problem. Not indicating that typing in your e-mail address is a safe step, might force your users-to-be to reconsider the whole registration process. Would you risk it?

One of the rare good examples of sign-up form design is Mint’s form.

Mint uses visual stimulation (a lock icon) to indicate that the whole process is safe. Norton’s and TRUSTe’s badges add an additional feeling of security to the form.

Mind that Mint also repeats the benefits that you’ll get by signing up. The usage of emotional language (“Why you’ll love Mint.com”) creates a feeling of intimacy and emotional attachment. That’s exactly what’s needed to destroy any doubts people can have about the service at this step in the process.

Another interesting example of reinforcing the feeling of safety might be observed in Songkick’s sign-up form. Songkick uses a very popular pattern of a social sign-in accompanying the classic sign-up form.

A social sign-in, if done right, is an extremely powerful idea. It saves time and trouble. However, it can also beef up the feeling of danger. In the case of social services, spam won’t only hurt users e-mail inboxes but also their friends. That’s nasty. The indication of safety is an absolutely crucial thing in this type of registration process.

Songkick did a tiny, but powerful thing. They clearly stated that they “won’t post on Facebook without asking”. Of course they ask their users for a great deal of trust since it’s just a statement, but still, at least they address the fear in their customers’ minds and have a decent, soothing, answer for it.

If something might scare your customers – don’t hide, stand up and fight.

Explain

Following the pattern of “safety-enhancing” content, let’s consider another underestimated, but vastly important trick when it comes to increasing the conversion and user-friendliness of a sign-up form.

Explanation.

The whole concept of signing up is somehow artificial. It hardly has its equivalent in “the offline world”, therefore it’s not self-explanatory. We ask people to provide data in a format that we find convenient or safe and pretty often we don’t explain the reason behind it, or we don’t even inform about what format we expect.

How many times did you see forms that let you know that your password was too short, or didn’t contain any numbers? Too often. Information about the format of the password should be stated upfront.

Take a look at Github’s sign-up form.

The form isn’t a star. It’s rather OK (though I don’t get why they use labels inside form fields and a “pick a username” field in this part of the process). The thing that’s really great is the tip about the password: “tip: use at least one number and at least 7 characters”. This can really save time and trouble for users. Most services put this kind of information inside the error message when the password typed in is too short or doesn’t contain a number – that’s not a user-friendly solution.

Facebook follows the same pattern of explanation when it comes to the untypical form field of date of birth. They know most of their users will find it a strange question about their date of birth right on the sign-up form, so they decided to write a short explanation under the link “Why do I need to provide my date of birth?” Great move.

Take a close look at Facebook’s labels in the form. Can you see the label “New Password”? That’s a great example of taking care for safety in an unobtrusive way. Facebook suggest that you should make up a new password, not use the same pattern you used in dozens of other places. That’s a clever design.

Do it for them

When you’re designing a sign-up form, you need to:

  • Eliminate the fear of spam
  • Make the form easy to comprehend
  • Eliminate unnecessary complexity

The efficiency of your form lies pretty close to its overall simplicity. You don’t want to force your users-to-be to spend/waste 10 minutes gazing at your sign-up form. You want them to type in some data and register in a couple of seconds.

That’s why the best sign-up forms I know do a lot of things for their users.

Take a look at Hunch’s form. They encourage you to sign in using your Facebook or Twitter account (“Why be old-fashioned?”) to save you some time and effort. Direct informal language builds a friendly situation.

If you confused the Sign-Up and Sign-In form and you already have your account (that’s often the case!) – Hunch provide you with a visible option to go to the right form. That’s an excellent pattern.

One of my favorite sign-up forms was designed by an amazing team at Podio. Podio have two sign-up forms that are an exemplification of their mastery of the art of doing things for their users.

The first form used on the homepage is a shortcut. One field, four icons (with a suitable explanation). Nothing to be scared of. A visually appealing form that looks as easy as 1, 2, 3.

This Sign-Up form certainly cannot be taken as a pure waste of time. Typing in your e-mail or choosing a suitable social sign-in option can’t take more than 10 seconds. That’s an impressive concept.

The larger version of the form is even better. Simplicity intertwined with clarity and persuasive techniques shows the extensive knowledge of Podio’s designers.

It’s still just one field, but the social sign-in options are more straightforward. Mind that they didn’t go with the Facebook/Twitter standard, but rather tried to address the needs of their professional targets (GoToMeeting!)

The micro-copy of the form is just great. The “Good decision” headline builds a positive frame around the whole registration process. I simply love it. Podio also uses a social proof with a strong visual incentive. You can see that there are people who use Podio. If it works for them, it’ll probably also work for you, right?

The only thing that keeps Podio from perfection is the classic omission of the “asterisk”.

First of all, if there’s only one field, it has to be required. Secondly, if we’re putting an asterisk next to a form label, it should be explained.

Copy counts

From the example of Podio’s sign-up form we could see how much great copy helps in the process of designing a sign-up form. The dangers of the registration process might be eliminated by smart, emotional, copy that continues the process of selling the product during the registration process.

Basecamp mastered this technique by using a social proof technique (“Last week 7087 companies signed up for Basecamp to manage their project. Today it’s your turn”) visualized with a picture of their real customer. That’s a powerful solution.

They also indicate strongly that the sign-up process is simple and quick “You’ll be up and running in less than a minute,” and they make sure that if you have an account, you won’t be bothered by the form (“Log in here”).

This is by far the most persuasive form I’ve ever seen.

Great copy should go all the way down to the tiniest details. A call-to-action might be a small thing, but it matters a lot. To my surprise, most of the forms go with a standard “Start your free trial”, “Sign up for free”. A great example of a context-aware call-to-action is represented by Tumblr’s sign-up form.

Tumblr’s call-to-action simply says “Start posting!” It’s highly encouraging and way more accurate than standard options.

However, a call-to-action is a sensitive element of any form. It should be thoroughly a/b tested.

Step-by-Step Tutorial

Let’s use the knowledge that we’ve gathered above and go through the process of designing a perfect Sign-Up Form, shall we?

I’m using UXPin – The UX Design App to quickly create this user interface, but to recreate each step you can use your own weapon of choice.

1. Basic Structure

I’m setting up a canvas for myself. Since I already have some idea about the whole interface, I know that my content will probably be locked in 3 boxes, each representing important information.

2. Headline and mine division

I’m adding a headline, trying to build a positive emotional frame around the whole process. That’s somehow addressing the idea of Podio’s form. I’m also setting up a subheadline with a link to a log-in form.

The whole form will be divided into two important steps, which are separated from each other by the line.

3. The form

I’m adding a simple social sign-in and a two-field standard sign-up form. My call-to-action is rather generic, but if it was a sign-up form of a real service, I’d try to come up with something context-aware (like in the Tumblr example mentioned above).

I’m continuing to form a rather relaxed micro-copy. To encourage people to sign in with Facebook or Twitter, I’m stating that it can save time spent typing.

4. Safety

To increase the feeling of safety during the registration process, I’m informing users about our policies and rules:

  • We don’t spam our users’ e-mails
  • We don’t publish anything on our users’ Facebook and Twitter profiles without permission
  • We suggest adding a long password for safety reasons
  • The account can be canceled without any problems

These types of statement ensure users about our good intentions and general honesty.

5. Check password

I’m a huge fan of the “check password” pattern. I think the “repeat password” field went way too far. Initially provided to ensure that people won’t make a mistake in their password, it can be easily replaced by a checkbox “check password”.

Why force people to type in their password twice when we can simply give them the option to check the password with one click.

6. Social proof

Finally, I’m adding a social proof. I treat it as a safety belt. In case of any doubts of additional proof that this service is safe, popular and well received by thousands of people.

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

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.

Granted there’s no denying that mobile is important. Just recently mobile usesurpassed desktop so it’s definitely here to stay.

But feature-rich websites often depend on a strong desktop design.

This is perhaps the biggest benefit of a desktop-first layout. You get to see the site as it should look with all the bells & whistles. These extras can(and should) be removed for smaller screens as you test and find certain features just don’t carry over well.

Another way to look at this is through the simplicity of mobile-first design. When you create with mobile first you’re inherently starting with the simplest features, then adding extras for larger screens. But it’s real easy to forget features or just lack proper planning to decide where they should go or how they should function

With a mobile-first approach it’s easy to consider dynamic features more like an afterthought. But with a desktop-first approach you’re treating these features as the primary display method, then choosing to remove them as needed.

There is no perfect choice so I recommend trying both to see what you prefer. If you’re like me and really adore the rich desktop experience then you’ll probably prefer starting there and working smaller.

Supporting All Browsers

The trickiest part of desktop-first design is handling browser support.

Just a decade or two ago the only market was desktops & laptops. The smartphone revolution changed all of that with tons of mobile browsers for iOS, Android, and other proprietary devices like Blackberry.

Most older browsers lacked support for modern desktop elements like canvas, audio/video, and dynamic inputs. But a lot has changed in recent years.

Nowadays it’s reasonable for all mobile browsers to basically support the same features as desktop browsers. Modern browsers also render most elements the same way so you won’t deal with rendering issues of the past.

The biggest differences are not in HTML/CSS support, but rather in touch-based support.

Mobile screens are much smaller and they also need to be tapped with a finger. Computer mice are more precise compared to a human finger, not to mention desktop screens are far more spacious and easier to look at.

When moving from desktop to mobile it’s crucial to consider how the different browsers work, what they support, and how to handle the user’s touch-based input.

A few good rules to consider while scaling down your desktop-first design:

  • Make tappable elements larger
  • Increase body text size so links are easier to tap
  • Add JavaScript libraries that support swipe motions

You can always check HTML5 specs for all browsers to see which elements are supported on which browsers. But for the most part touch inputs are a universal thing, so desktop-first is a great solution if you pay attention to the mobile experience too.

And you can find tons of free resources like TouchSwipe that add support for touch & swipe gestures to all websites.

You can use JavaScript to check the browser’s dimensions or the operating system like iOS or Win Mobile. With this info you can load extra stylesheets and create a totally different experience with touch/swipe events that only apply to mobile users.

Start with a list of features you know you’ll want on your website. Organize all the newer CSS3 properties, the newer HTML5 elements, and anything that might be iffy with browser support.

Then look up all the browsers you want to support to consider how you can handle fallbacks and polyfills. As time passes older browsers will phase out and browser support will get easier. This makes an even stronger case for desktop-first design because the rendering engines will be close to identical across the board.

To learn more and dig deeper into mobile interactions check out these related guides:

  • Multi-touch Web Development
  • Support Comparisons Between All Mobile Browsers
  • How to deal with :hover on touch screen devices

Graceful Degradation (And Why It Matters)

The process of graceful degradation looks at higher-level technology first. This means you build all your website’s top features with everything you want on the site, then if other browsers can’t support them you revert to fallback methods.

A common example of this tactic is the removal of dropdown sliding menus for mobile. Since smartphone users can’t hover menu links it makes sense to hide the hoverable menus and instead create a toggle switch or a hidden hamburger menu.

However this isn’t strictly graceful degradation, rather a change in user experience. Instead you’re looking for JS functions or CSS3 properties that literally cannot be supported in a certain browser.

For these you’ll need to find a polyfill or fallback that creates a less glamorous experience, but one that still works for the user.

Check out this list of examples created by the W3C. It covers graceful degradation in detail and it may help you move on the right track.

Thankfully since most modern browsers support JavaScript, HTML5 video, and canvas elements so you really have no limitations. The trickiest part is legacy support for outdated browsers. Yet this market is shrinking rapidly and you can gauge this by studying market share.

If you run Google Analytics you can study all browsers and OS’ from your audience to see which are the most popular. If nobody uses IE7 to browse your site then why support it?

Every problem you solve will be different so take it one at a time. Rely on sites like Can I Use to gauge what type of support you’ll need to deal with.

When Desktop Takes Priority

You may be wondering when desktop-first is appropriate. Should this be your default strategy for every project?

Maybe. But I think it ultimately works best when you’re designing a site where desktop takes priority over mobile.

If the mobile experience can be incredibly simple but the desktop experience needs to be detailed and dynamic, I say start with the desktop and work smaller.

If you always prefer working from desktop and moving smaller then you’ll get a knack for the process and it may become your default. And that’s totally fine because it’ll still lead to great results.

Just make sure you have a plan for the mobile site with at least a vague idea in mind of how it’ll look. Draft some wireframes for both views just to give yourself a starting point.

One great example of a strong desktop approach is Mashable. Their fullsize website spans 1440px wide and contains 3 columns of news with a huge mega navigation menu.

Mashable looks awesome on mobile too, but you can tell the desktop version was not an afterthought.

Same goes for major sites like YouTube where the user experience needs to work for both audiences. And in the responsive era it’s not just “desktop” or “smartphone”.

You also need to consider tablets, smaller netbooks, and laptops that all have varying screen sizes. Desktop-first helps you build an experience that works on larger screens first by focusing on every possible feature.

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 resize. Once your browser window hits a certain breakpoint the links automatically hide into a menu and get replaced with a hamburger icon.

But pay attention to the extra whitespace added between each link. This is a common technique and generally a great idea to space out links for finger taps on mobile.

Most websites rearrange their navigation a few times before finally settling on the three-bar icon. For example Dorigati uses a full-width navigation menu which eventually breaks down into a grid system.

Then at the 960px breakpoint the entire layout shifts from a top header to a sidebar navigation. The logo and links all rearrange themselves into the new sidebar.

Once you go even smaller the nav links eventually move back to the top with a hidden hamburger menu. It’s a very complex solution but it provides a more natural experience for different browser resolutions.

And remember if the navigation is small enough then you won’t even need the hamburger. It’s generally a good idea to avoid hidden menus when possible, so a solution like Regent College would be perfect for sites with smaller menus.

All links are still visible but they get rearranged into different widths. Font sizes get reduced and eventually the links are crammed together.

As long as visitors can still browse the site and tap on the right links then you can squeeze them together as much as needed.

Shift From Horizontal To Vertical

White space on a desktop layout moves across and down the page.

But when you’re dealing with smaller devices you should be more concerned with vertical space. This defines the pace of content and it’s the natural “flow” for smartphones & tablets with resolutions that are longer than wider.

On Jisc you’ll notice there are many horizontally-oriented page sections. Once you resize the page all these little block elements drop beneath each other.

One page section would ideally span the entire width of a 320px smartphone screen. But the responsive layout needs more vertical negative space between elements to create that vertical flow.

The idea of negative space is powerful in web design. You need that space to break up sections of the page and to let blocks of text breathe. Nobody enjoys reading a wall of text.

This is true with corporate websites and with blogs like Mashable. When you’re on a desktop the entire homepage spans 3-4 columns of content.

All the other columns can either drop beneath the main column, or they can be hidden from the responsive page. Each site has a different solution.

But when you’re shifting white space for mobile you always need to think vertically.

The horizontal should be controlled by one element at a time. You should instead focus on how much space you need between elements and between other sections of the page.

Font Sizes & Spacing

Some designs can get by with the same traditional font sizes. But if you have oversized headers or tiny paragraph text then you’ll need to adjust sizes at specific breakpoints.

There’s a lot you can do with responsive typography beyond the typical sizing properties. You can also adjust line height, letter spacing, color, and the margins between two blocks of text.

The Next Web’s desktop layout has a lot of white space between the header and the top navigation. But their mobile responsive layout shortens this space dramatically.

Meanwhile the header text is also reduced in size while spacing out the paragraphs a bit.

You’ll have to trust your gut when it comes to mobile typography. Try to feel out what would look best and try to achieve that.

Also consider how your site behaves on mobile screens. Agra Culture has a series of image blocks that display text on hover.

But since mobile users can’t hover the text is automatically displayed past a certain breakpoint. It seems like a small consideration but it makes a big impact in the mobile experience.

White space increases between page sections giving the illusion of crafty content areas.

Past a certain breakpoint the CN logo shrinks down along with the main links. You’ll notice links that had icons will shrink down and completely lose the icons on smaller screens.

It is true that graphics can improve navigation. But there’s only so much space on mobile and you have to be judicious.

When restyling type always consider horizontal and vertical space issues. Mobile users deserve a workable solution even if the page has to be lengthened considerably just to hold everything.

Restyling Images

One other consideration is the use of widescreen images. Since most monitors are widescreen the web has adapted to include images that are typically wider than taller.

UPP Broadgate Park has an interesting solution where the top header image resizes to fit vertically. The image slideshow is built to fit the full width of the screen, but any screen smaller than 500px gets a lengthened image.

This adds a tremendous amount of vertical space into the page which can be good if you’re looking for that.

I’ll admit this is a tough strategy to pull off. You need to know your image sizes and the focal points of each image to properly resize them.

But if you’re willing to put in the effort it will ultimately lead to a greater experience.

In other scenarios you might choose to hide longer images and completely remove them from the mobile experience. The Golden Isles website uses this technique on the top header slideshow.

All other images on the page get rearranged into single columns with added white space. But since the carousel doesn’t add much to the user experience it can be hidden for mobile users.

Consider how you want to handle images and how much space you need between them. A thumbnail gallery might be closer together than a slideshow or a featured stock photo.

Each scenario is different so be willing to try different strategies to see what works best.