Website Navigation – Mixing Good Design And Usability

Website navigation is something that is highly unregulated, allowing website designers to make navigation as simple or as complex as they so desire.

This is especially true when websites are designed in a more complex fashion and have several different tiers that are built into them. Some websites even display one page for users who have signed into an account and display something completely different for people who are simply visiting the site.

Unfortunately, designing a website that is easy to use is often more difficult than it sounds. There are several factors that can negatively impact the ease of use for a given website and many times websites that are designed to be easy to use, yet catch the user’s attention with stunning graphics, can become a nightmare very quickly.

It can be difficult for even the most experienced website designers to work out a plan that makes the website as easy to use as it was intended to be, as there are several different problems that are associated with website usability that can sometimes make navigation so difficult that the website is rendered virtually unusable.

For example, designing a navigation bar that is easy to use and functions well for the entire website can sometimes be a challenge. It is important to consider how the navigation bar appears from a user’s perspective, as well as its overall ease of use.

Steps towards making a usable and good looking navigation

Navigation placement

Make sure that the website is consistent, keeping navigation toolbars in the same place on every page. In most cases these bars are traditionally placed in the upper left hand corner of the page. Doing so allows users to quickly find the navigation tools in order to work their way through the site.

It is important to remember that users typically do not like surprises. People are visiting the website in order to find out information about a topic, or to investigate purchasing goods or services. Therefore, they do not want to have to spend valuable time searching for navigation toolbars. Making the navigation equal throughout the entire website enables users to work through the site quickly and with a minimum amount of frustration.

Furthermore, it is important to keep everything highly visible so that users can navigate easily without having to look for navigation buttons on the page. In addition, keep it visible, preferably at the top of the page, so that users do not have to scroll to the bottom in order to navigate to the next page. Understand that people who visit websites are typically looking to get information quickly and therefore, they will look to other websites if they cannot find the information they are looking for right away.

Use text based navigation

Do not get caught up in the thought process that a website must be filled with images at every turn in order to gain the attention of the user. More often than not, a simple one or two word explanation of what the next page is all about will be enough to entice users to continue searching.

Instead of placing ambiguous images on a website for navigation purposes, keep things simple and to the point by placing navigation hyperlinks that explain exactly what the next page is about or where clicking a certain button will take the user. Do so in one or two descriptive words and let it go with that.

Nothing is more frustrating than when users are clicking on one button after another in order to find the information they are looking for, only to be misled by descriptive terms that are too general in nature. Keep things specific and use descriptive terms such as “contact” or “about us.” Tailor the descriptive terms to fit exactly what the user needs to know.

If icons must be used for navigation purposes, make sure that it is because they truly need to be present in order for the user to have a better experience. In many cases the icons themselves become a source of contention with users because simple descriptive terms in one or two words will work better.

Try to make it as simple as possible

Be careful about including too many navigation buttons. Keep choices limited and make sure the website is informative yet concise. Providing too many buttons for users to click on largely frustrates them and often leads to them exiting the site prematurely.

Many websites include several choices for people who have signed up or created an account, and this can sometimes be a problem. Having separate navigation as well as a separate look for people who have an account versus those who do not have one can sometimes be frustrating because users may find it difficult to find the button to get into the account or to find other information such as terms and agreements or a button to contact the company.

Keep it simple and limit choices as much as possible. In addition, keep the website the same for both account holders and non-account holders alike if at all possible.

Choose a navigation bar that makes operation for the user as simple as possible. Avoid using more than one navigation bar, as it complicates the entire website and makes its difficult from a user’s perspective.

Contrasting color scheme

Use a contrasting color for your navigation bar so that it gets the attention of the user right away. This makes it easy to find and minimizes the chances that users will lose interest before they find it.

What to avoid

Drop down menus

Drop down menus are often a bad idea, primarily because they are difficult to operate with some search engines. However, that is not the only reason.

In addition, drop down menus are often a bad idea because the user has already decided where he or she wants to click in order to get to the next page, only to be met with even more options with the drop down menu.

Moreover, drop down menus typically provide too many choices for users, often resulting in their getting lost in pages that are more specialized as they skip pages that are far more important.

There is one exception which should be noted. For very large websites that use mega drop down menus, the menu actually becomes an object to assist the user instead of something that hinders them. This is because very large websites that offer a wealth of information are often difficult to navigate unless the user can see all of their options simultaneously. Using a drop down menu in this fashion allows them to do exactly that.

For anyone who is considering using such a drop down menu, the best way to find out if it works is to develop one and then test it for a period of time to see if users find it helpful or annoying. An increase in sales is a good indication that users enjoy navigating the site in this fashion.

Bad placement of buttons inside the navigation

People have a tendency to remember the first thing and the last thing that they see or read better than all of the information that is in the middle. Therefore, make the most important goals either first or last on the website so that users clearly remember the first thing and the last thing that they see on the website.

Moreover, by putting the most important thing about the website first, the user not only remembers it better but also gets to that particular matter before anything else. All of the other information can be put somewhere in between that subject matter and an option to contact the company directly.

Conclusion

Creating a website that is easy to navigate can definitely be challenging, but it is by no means impossible. By keeping the needs of the user in mind and developing a website that is truly easy to navigate the chances that the website will be popular are dramatically increased.

This in turn often means an increase in sales. Therefore, take the time to learn the techniques or to work with someone who is an expert at these techniques to design a website that can accurately promote needed content in such a fashion that users want to read it.

By keeping the needs of the user as the primary consideration it is much more likely that they will continue to peruse the site until they find what they are looking for. Creating navigation that is complex and difficult to work through often means that they will choose to get their information from another website, perhaps from that of a competitor.

7 Rules for Mixing Multiple Fonts in Good Web Design

Typography can be one of the most creatively rewarding parts of web design, but it can also be one of the most frustrating. Working with just one or two fonts can be challenging enough for most web designers, yet some still insist on using three, four, seven, or even more fonts in their designs. Some people excel at creating sites with complicated typography, while others fail miserably. Read on to find out tricks to creating fantastic website designs with complicated type, as well as some great examples of sites that get it right, and those that get it wrong.

1. Pay attention to scale and proportion.

Multiple fonts work best together when they have similar proportion and scale. For example, Georgia and Verdana have similar shapes, even though one is serif and one is sans serif. The same could be said for Times New Roman and Arial Narrow. Look at specific characters in each font to see how similar they are, as well as entire words.

Fonts don’t necessarily have to be identical in scale and proportion. What you want to look for are either fonts that are very, very similar, or fonts that are very, very different. Fonts that are “kind of the same” are generally going to look strangest when placed near each other. Fonts that are very similar are going to appear to have the same weight on screen in most cases, while fonts that are very different can more easily be played against one another to give emphasis to specific parts of the site.

2. Unify fonts with color or style.

If you throw up six different fonts on your site, with ten different colors, and four different styles, you’re probably just going to give your visitors a headache (if they stick around that long). While you don’t necessarily have to only use one color or one style, you need to be much more careful in how you use them.

Advertisement

As far as colors go, try to stick to colors either in the same hue or saturation level. You want the colors to mesh, rather than clash.

You have a bit more leeway with font styles, but make sure that the styles you choose make sense with the existing weight and emphasis of the particular fonts you’ve chosen. You can make a heavier font oblique (italic) to de-emphasize it’s weight a bit, or add a strong tag to a lighter-weight font to bring it more in-line with the heavier fonts on your page. Underlining can emphasize both light and heavy fonts without making either appear heavier than they already are.

3. Pay attention to priority and emphasis of different fonts.

This has been touched on a bit already, but the priority and emphasis that different fonts convey naturally has to be taken into account. Some fonts are going to draw more attention than others. It’s one reason using multiple fonts is both incredibly fun and very hard to get right.

You can compensate for heavier or lighter fonts in a few ways. Increasing or decreasing the size is the most obvious. Adding styles and font decorations (oblique, strong, underline, etc.) can also emphasize and even help de-emphasize most fonts.

Changing the color of a font can help, too. If your typography is mostly black, adding in shades of gray to de-emphasize certain parts can work really well. In fact, putting certain type in gray can work even if your design is more colorful (to really unify things, make sure the gray has just a hint of one of the main colors in your other typography).

4. Avoid anything too similar.

Similar fonts are tricky. Using something like Georgia and Garamond right near each other, for example, doesn’t really do much and can end up making one or both fonts look a little off. A lot of non-designer folks might not really see the differences between the fonts and think they just look strange—not quite right. The same can be said for fonts like Verdana and Tahoma or Arial and Helvetica. Try for a bit more variation for the best end-result.

5. Keep body text readable.

While playing around with funky typography can work really well in navigation, headers, and other parts of your site, large chunks of body copy just don’t work well with multiple typefaces. Stick to one, preferably site-wide. Pick a font that’s easy to read and web safe while also being similar in proportion and weight to the other fonts on your site.

6. Don’t overlook different font styles.

We’ve talked about how using different styles and font decorations can change the priority and importance of different typographic elements. But one thing many designers overlook is using multiple styles, sizes, and decorations to achieve the look of mixed typography while still working entirely with web-safe fonts. This technique is also great for designers who are just starting to experiment with web typography, as it eliminates many of the common issues with proportion and scale between different typefaces. Mix italic, bold, small caps, all caps and other styles within the same fonts to get the look of mixed typefaces without the headaches.

7. Trust your instincts.

This is probably the most important thing on this list. Whenever you’re designing anything, you should be sure to take a step back from it often and look at the big picture. If something doesn’t look right or feel right to you, cut it.

It’s no different with typography. If a certain font just doesn’t seem to be working, you’ll have to cut something. In these cases, you have two options: you can cut that font and find another one that works better, or you can scrap all your other fonts and find ones that work better with the one you’re having trouble with. What you do depends on which fonts you’re more attached to.

Mixing Color for the Web with Sass

Color is one of the most powerful components of art and design. We use it to influence mood, create an environment, and tell a story. Over 125 years ago, a great impressionist painter changed the way we think about color by observing light’s role in it. So far, these observations have been largely lost on design for the web, but a preprocessor like Sass gives us a tool to shed new light on our color palettes.

One morning in 1890, Claude Monet began painting the haystacks outside his window. But he didn’t paint just one painting, and he didn’t even paint just one painting at a time. He would have his assistant cart out wheelbarrows of canvases and would work quickly and minimally on each one as the light changed throughout the morning. Sometimes he would work on a painting for just a few minutes before the lighting conditions had changed enough to warrant moving on to the next canvas. When he was finished, Monet had painted twenty-five canvases of the same haystacks in different sunlight, seasons, and weather. The same haystacks, the same base colors—yet presented in myriad ways.

Historically, our ability to translate this kind of flexibility to the web has been limited. We’ve neglected the art of mingling color for emotional impact, while making the most of statically declared CSS color codes. Meanwhile, manipulating color on the fly has been relegated to the arcane realm of programmers.

Thankfully, new tools give us more power over color than ever before. But although color on the web continues to march forward, CSS alone is still pretty inflexible. That’s where preprocessors become useful. Let’s explore some of the capabilities they can lend to our stylesheets:

  • Aliases help us better recognize which colors we’re using.
  • Lightening, darkening, and scaling give us fine-grained flexibility over palettes.
  • Color mixing unlocks our inner Monet and a whole new world of nuance and artistry.

A hex on hex codes

Start with the color declaration: you have to know the exact values of your colors in order to use them. That means that, unless you’re using prefabricated named colors, your style sheet fills up with multiple instances of cryptic hex codes or ambiguous HSL numbers. CSS variables are on the horizon, and they’ll help clarify which color is which with natural language—but what if we don’t actually have a name for our color? That’s the kind of power CSS preprocessors give us. There are several out there to choose from, but my examples rely on Sass. Other preprocessors probably have similar functionality, but I’ll leave you to do that research on your own.

Let’s dig into this to see what I mean.

Now that I’ve established my brand colors, I’ve used them to build a website for Gullfoss Travel Supply Co. The concept behind this hypothetical site is to revitalize well-designed luggage labels that show off where you’ve travelled around the world. Variations of my brand colors exist throughout this site in different (lighter) tints and (darker) shades.

I wanted to give my button a sense of clickability, which I can easily achieve with a simple gradient. The button is based on the color I dubbed $toolbox. The highlight is a lighter version of the swatch and the shadow is a darker version.

While the button color is based on one of my brand colors, two of these colors (my highlight and shadow) are not in my Sass constants. I had to figure them out on my own. I opened up a color picker and manually picked variations of the swatch. Not a big deal, really, but if I want to add a secondary button, this time based on $ol-blue, I’ll need to go back into the color picker once again and figure out the new values.

And each of these buttons needs a hover state, too! The hover highlights and shadows are going to be lighter than those on the normal button, so do I declare four more constants, or do I just fill these values in once and hope I don’t need to use them again later?

As it turns out, Sass can do this for me. It has built-in functions to process these colors without having to keep track of all the variations.

Packing up the color picker for Sass

Simple as that! Now we have a pair of tools to mix color on the fly. Go wild! Okay, don’t go too wild. This can get a bit tricky. Consider this: if we lighten $toolbox by 50 percent, we get a very light version of $toolbox. But if we lighten $ol-blue by 50 percent, it becomes completely white. That’s because $ol-blue is a much lighter color than $toolbox.

In order to know how far we can lighten a color before it turns white, we have to know that color’s lightness value ahead of time. That information is conveniently encoded in its HSL notation. If we subtract the color’s lightness value from 100 percent, the result is the amount we can lighten a color to get to white.

Therefore, in order to master this new color palette, we’ll simply need to memorize the lightness values of each of our colors. Kind of annoying, but hey, it’s better than memorizing hex codes, right? Sure! But I’ll do you one better.

Proportional palettes with color scaling

Sass has another color function called scale-color() that can move a color’s components proportionally. scale-color() works on the red, green, and blue channels in RGB, and the saturation and lightness channels in HSL. (To adjust the hue similarly, you would use the aptly-named adjust-hue() function.)

As I noted before, if we were to lighten $ol-blue by 50 percent, it would become pure white, but if we were to scale the lightness with scale-color() by 50 percent—

scale-color($ol-blue, lightness, 50%);

—it would be halfway between the original color and white.

Now I know exactly how much to scale any of my colors to get to white: it’s always going to be 100 percent. If I scale $ol-blue’s lightness by 99 percent, it will still be 1 percent $ol-blue. Likewise for $toolbox or any other color you can dream up (barring colors that are already so light that they may round up to white earlier); they will always top out at 100 percent lightness.

With scale-color(), you can keep your color palette limited to your base constants, but still have incredible, intuitive flexibility with tints and shades.

In this example, notice I’m only using two of my constants and scaling them as desired. In fact, this can be applied across the entire page. The content on the homepage of the Gullfoss Travel Supply Co. only uses two brand colors, scaled to different lightness values. Despite the simple palette, there’s still a lot of flexibility here.

Mastering color with mixing

There’s one more way you can achieve these kinds of proportional palettes, and that’s with an even more intuitive, more powerful Sass function called mix().

It turns out that mixing with white and black does perceptually the same thing as scaling a color’s lightness but, conveniently, it’s shorter to type. Beyond that, mix can help you easily create a look and feel on your websites that was previously not possible. If we can mix colors like paint now, can we make our websites look more like paintings? I believe we can—but we have to think less like programmers and more like artists.

Consider, again, Monet’s haystack paintings. They’re a remarkable study of light, and wonderful from a purely aesthetic standpoint. But from a design standpoint, there’s a useful lesson to be found in them. In the words of another French impressionist, Pierre Bonnard, “Color does not add a pleasant quality to design—it reinforces it.” Remember the way the color of light affected the appearance of Monet’s haystacks. What if we could take our base colors and easily influence the color in our designs the way he did back in 1890?

Sass’s mix() function unlocks that for us. Let’s take our color palette again and add in just a couple extra colors: a highlight and a shadow. Now let’s mix our brand colors once more, but instead of simply mixing with black and white, let’s use our new colors.

Suddenly the whole palette becomes warm and inviting, and the darker colors are rich and vibrant. Tinting with a yellow highlight gives the palette a sunnier appearance. Shading with a complementary shadow makes the palette feel more natural.

If I decide I don’t like this scheme, I can simply choose new values for those two constants, and the next time the Sass is compiled into CSS, the design will automatically reflect my change.

With this next scheme, I’m starting again with the same brand palette, but now the highlight is bright pink, while the shadow is a dark, desaturated green.

It totally changes the look of the palette, yet it remains based around our original brand. A change to the highlight and shadow colors is automatically reflected in your color palette when the Sass is compiled into CSS. Highlights and shadows can be tweaked to achieve just the right mood or story for your site, without making tedious changes throughout your stylesheets.

Looking back at Gullfoss Travel Supply Co., I’ve demonstrated some of the possibilities with this kind of color mixing on each of the sticker pages. Looking at Olympia’s page, the mood is totally different from the homepage, yet all of the markup, typography, and basic layout stay the same. But since nearly every color has been mixed to some degree with yellow highlights or purple shadows, a new light (literally) has been cast on the page. Now the content background is an eggshell color and the “Add to Cart” button is natural, yet vibrant.

Lincoln’s sticker is colored strongly with tints and shades of red, so I wanted the page to reflect that. I chose reddish highlights and shadows to make the design cohere with the illustration.

When you visit the page for Barton Springs Pool, the cool waters and green leaves are reflected throughout. The difference between the original colors and the new ones is subtle but distinct, and that’s the point. Your colors should work together to create an aesthetic that enhances your design.

But if drama is what you’re after, look no further than The Grid. This page reverses highlights and shadows and lends a look inspired by the movie Tron. Quite a striking change achieved just by swapping out a few constants!

Additional considerations for developing your palette

Nearly every color on these pages is mixed with a highlight or shadow to one degree or another, but sometimes the elements in your design can look a little too homogenous, and they start to blend together. In such cases, feel free to supplement your designs with another set of color mixers. This can give the layers of your pages more depth and really make them pop.

Let’s look again at the page for Lincoln. Remember, I wanted to give it a reddish tint. It’s hard to read text against bright red, so I dialed the highlights back a lot; they’re barely red at all. Then I set the background to green. Because green is red’s complement, it plays a trick on your brain, making the very light colors appear redder, while still maintaining a pleasing contrast ratio. (Note: Because this site is responsive, the background layer isn’t visible on narrow screens.) These separate layers use very different highlights and shadows that interact with each other.

To pursue legibility and readability a bit further for a moment, it’s also essential to keep in mind the accessibility of your color schemes. Take another look at the page for The Grid. If you found it uncomfortable to read, you’re not alone! The menu at the top of the page suffers from a low contrast ratio. According to the WCAG guidelines, it should be 4.5:1, but it comes in well below at just 2.6:1! Good contrast ratios of text and background colors make using a site much more pleasant. There are plenty of tools and recommendations for exploring this topic further.

Before I conclude, I want to go over browser support real quick, just so it’s clear. Because all this color processing is compiled into basic CSS color declarations, everything gets translated into a static declaration, which, of course, every browser today can understand. This means that you can start playing around with these techniques today!

Color on the web has come a long way, and it continues to improve steadily as browsers and devices add support for new technologies. Meanwhile, preprocessor mixing has given color an evolutionary leap forward. It offers us unprecedented power to create tints and shades that help us tell our stories, give our palettes more nuance, and bring out our inner Monet.

8 responsive web design trends that defined 2015

Let’s take a look back at successful trends of the year with an eye towards the future.

1. Captivating storytelling

Mankind has always used stories to convey ideas and share information. Stories activate parts of your brain that simple facts and figures do not. On websites, storytelling creates more engaging and memorable website content.

This storytelling approach has been embraced by sites like Medium and by many web writers who are now using stories to better convey important details, information, and compelling data.

When using storytelling in your responsive website, some basic tips to follow include:

  • Hook readers quickly  and make sure that you have a strong opening that falls above the fold on all viewports so that readers see it immediately
  • Ensure line lengths for your story are optimal for both large and small screens. Lines that are too long are hard to follow, while line that are too short break the flow of normal reading. Strive for a range between six to 75 characters per line and adjust font sizes as needed to achieve the best results.
  • Use visuals where appropriate to accentuate the story, but be mindful of file sizes and ensure quick downloads on all devices
  • Make it easy for readers to share the story with others. Consider placing sharing functionality at both the top and bottom of the content so that readers do not need to scroll to do use these features. This is especially helpful on small screen layouts that require substantial scrolling. Also make sure that these buttons can be easily used on touch screens.

These points can be seen in practice in what Vice does with their homepage layout.

Mobile viewport

Full-size viewport

2. Less is more

Many SEO and website experts have long suggested that “bigger is better.”

Their argument is that a site with lots of pages has the best chance to rank for a wide variety of key terms. The problem with creating incredibly dense websites is that they can be confusing for people to use and they can be difficult to keep updated. Outdated pages and content are often left neglected, creating sites that are bloated and no longer relevant.

Many websites have begun to take the opposite approach to this “bigger is better” recommendation. Smaller sites are hyper-focused on specific topics, eliminating any pages or content that aren’t critical to the user experience.

This “less is more” trend can be seen in the popularity of single-page websites, including parallax sites. You can also see it in sites that have aggressively simplified their sitemaps.

3. Patterns everywhere

When an approach becomes popular and widely used, like responsive web design has, patterns will often begin to emerge.

As explained in Web Design Trends 2015 & 2016 by UXPin:

A web design pattern, aka UI design pattern, is a reusable solution to a commonly occurring problem you might encounter every day.

The value in using a good web design pattern to solve a problem is that users will be familiar and comfortable with your solution. The downside to using established patterns is that if everyone uses the same approach, websites begin to look very much the same and design uniqueness is lost. You must weigh the benefit of using an established pattern against the downside of not being able to design something new and unique.

One common responsive pattern, for example,  is off-canvas navigation.

Smallest viewport

Mid-sized viewport

The tablet view expands the navigation horizontally and adds a primary CTA in the middle of the screen along with four secondary CTAs at the bottom of the screen.

Largest viewport

The navigation and content layout remain the same as the tablet-sized viewport.

When evaluating design patterns, always ask yourself these questions:

  • What problem am I trying to solve?
  • How have others solved this same problem?
  • Is there pattern to those solutions or an established best practice?
  • Is this pattern overused?
  • What barriers, if any, exist to using this pattern on my project?

To learn more about responsive web design patterns, check out some common layout patterns as outlined by Google and a useful responsive library by Brad Frost.

4. Card layouts

One of the most popular design trends today is the “card layout.” Popularized by Pinterest, the card layout has become a widely used approach to presenting easily scannable chunks of content on a website.

Card layouts are very attractive when considering the UX for responsive websites. Because these cards effectively break content down into smaller blocks, those blocks can then be more easily rearranged for different screen sizes and layout needs.

Smallest viewport

Largest viewport

Cards can help improve information distribution, which is why sites like Twitter and Google have followed Pinterest’s lead with this UI pattern and why more and more sites are sure to apply this approach for 2016 and beyond.

5. Hidden menus

Another UI pattern example that has been popular for many years is the hidden menu. From drop-down and fly-out menus that are revealed on hover to the infamous “hamburger icon” to navigation drawers, hidden menus are used to save space while still making those menu option available to a site’s visitors.

While the benefit of saving space on a responsive design is undeniable, there have been a number of people who have argued against the practice of hidden menus. Menus that are hidden to save space are less likely to be accessed than those that are consistently shown.

Smallest viewport

Largest viewport

One experiment actually showed that these hidden navigation items cut engagement time in half.

The challenges of responsive navigation are something that UI designers continue to grapple with. Despite the possible downside to hidden menus, expect this design pattern to remain a popular choice for responsive navigation.

6. Big hero images versus no hero images

The hero image trend is quite interesting.

Many sites use gigantic hero images that span the entire width and height of a screen. Other sites have taken the exact opposite approach to hero images, eschewing their use altogether and preferring only bold colors and rich typography in their place.

Hero images

No hero images

These two competing trends each offer their own benefits and drawbacks. Using rich images can add visual flair to a design, but giant images mean additional time for those images and the site to load. Removing large hero images may decrease the visual richness of a design, but the loss of those images speeds up load time.

Additionally, according to Google/YouTube user experience research, removing these images can actually help create a more appealing site. In their study, researchers found that reducing the visual complexity of a page, while also increasing its prototypically, could actually increase its appeal.

In summary:

Big hero images

  • Visually rich and appealing
  • Slower loading times

No hero images

  • Not as visually rich
  • Faster loading time
  • Less complexity can increase overall appeal

Both of these approaches to hero images are valid and each will likely remain popular in 2016.

7. Rethinking advertising

Online ads and responsive websites have always experienced a challenging relationship.

For years, online ads were sold based on size and locations. This poses a problem with responsive sites since the size and placement of various UI elements will change across different screen sizes. This makes fixed advertising sizes a poor fit in a responsive environment.

In the very near future, all sites – responsive or not, will need to rethink how advertising is used.

8. Improved workflow

Not all trends can be seen visually on the final website. Some trends happen behind the scenes as that site is being designed and developed. An improved responsive workflow is one of those trends.

One important change many designers are using is responsive prototyping.

Instead of static design comps that seek to show different possible breakpoints in a potential design, responsive prototyping tools (like UXPin) create more authentic experiences that can be deploy quickly and easily.

These prototypes will better convey interactions that will allow you to get more informed feedback and to make better overall UI design decisions.

Getting Along With Your Web Designer

You’re all ready to get started creating your web presence and you’ve found a skilled web designer to build your website for you. Do you know what he needs from you to do an efficient job? Good web design requires cooperation between the architect and the user to create a product that will serve its intended function, and you don’t have to be an internet expert to do your part. There are a number of things you can do when working with a web designer during the building and maintenance phases to smooth communications, reduce confusion, get work done faster, and get the results you want.

Building a New Site

If you’re starting from scratch, your first job as a customer is to define what you want the designer to build.

  • Start by doing some research on the internet to see what kind of sites your competitors have and how they are organized.
  • Look at different layouts and navigation styles and decide what you like best.
  • Know what colors and text styles you like and provide good, high-resolution copies of your logos and company graphics.
  • Decide what kind of information you want people to find on your website. Do you only want to sell stuff, or do you also want to provide technical information about your products, processes, or services?
  • Discuss with the designer how to organize your information with efficient navigation and page design.
  • Do you need the customer to provide you with information through the site? Make a list of what information you need to collect and discuss with the designer how it can be collected and conveyed to you.
  • Do you need to use information or graphics from your suppliers on your website? Get the supplier’s permission to use their information. Never use someone else’s exact copy without their permission, this is plagiarism.
  • Write your own content for your website. Remember, you are the expert on your products and services. Even if you are a bad writer, draft the information you want to present on each page and hire a professional writer to polish it for you.
  • Define when the website will be considered completed. At some point, the initial design needs to be considered finished, and any additional changes from that point forward should be considered updates to be billed separately.

There are also some things you shouldn’t do:

  • Don’t ask the designer to start over with a completely new design in the middle of the project or when it is nearly complete. Nothing irritates a designer worse than when you approve a design, then change your mind three weeks later and decide you don’t like it anymore after the website is more than half finished. It creates a lot of extra work and will often cost you more money. It also delays the designer in working on projects for other customers, making everybody unhappy.
  • Don’t keep adding to the design requirements as you go along, making the project bigger and bigger. This is called mission creep, and it hinders the designer in knowing how a project is going to be completed and giving you an estimate of duration and cost. Sometimes changes are unavoidable, but it’s best if you can lay out all your plans at the beginning and stick to them.
  • Don’t make the designer guess what you want. Give as specific instructions as you possibly can and you are more likely to get what you want faster.

Website Maintenance

Once the site is completed, you will probably occasionally need to make changes to the site to update information, add new products, or remove outdated or discontinued items. Here are a few tips to make this process more efficient as well:

  • Be specific, and don’t make the designer hunt through your website to find where the changes need to go. Provide the exact page and location on that page for each change that needs to be made. If some pages contain similar information, copy the URL of the correct page from the address bar in your browser and include it with your list of changes. Designers work on a lot of websites and may forget where everything is in yours if they haven’t looked at it in a while.
  • Try to send changes by email whenever possible. Copying and pasting text from an email or Word document is a lot faster than retyping text from a fax or a document sent by mail, and adding a graphic that is already in a digital format (.jpg or .gif) saves time over scanning it from a brochure and cleaning it up first.
  • If you are making small changes within a body of text such as list, a restaurant menu, or a description, highlight the changes with a different color text so that they can be found with a quick visual inspection instead of a detailed reading and comparison with the old version. If you need to remove text, make sure you show what is to be removed. If you simply omit it from the new copy you send, the designer might not notice that it’s gone.
  • If you think something may be broken and needs to be fixed, describe exactly the steps you took after entering the website to recreate the error. This helps the designer pinpoint the source of the error faster so he can proceed with fixing it.

These are just some basic things you can do to forge a more effective and profitable relationship with your web designer. If you can do your part to make his job more efficient and be an easy client to work with, he will be more happy to serve you in the future, and you’ll get what you need with less trouble and less worry.