When visitors arrive on your company’s website, you want them to take action. Depending on your business, that “action” may be many different things, from filling out a contact form to making a purchase.
Regardless, you should improve your site to make converting as easy as possible for your visitors. The best way to do this is with conversion rate optimization.
One of the simplest ways to optimize a site is with A/B testing, or by creating two versions of the same element and showing them to real visitors to see which performs better. As you run these tests on different parts of your site, you’ll be able to optimize each page for a higher conversion rate.
Before you get started, though, you’ll need to select a tool to help you set up, monitor, and review your tests. There are many available online, but the following four are our top picks at WebpageFX.
Your company’s website serves many purposes, like explaining your services, highlighting your successes, and building your brand. But most important of all, it helps visitors become customers.
But in many cases, those visitors need to get in touch with you before making a purchase. And for that to happen, you’ll need a compelling “Contact Us” page.
Creating a page that’s simple enough for visitors to finish, but thorough enough to get the information you need can be a challenge. These 10 examples will provide some inspiration for your company’s site.
When I started out, I made about $1,680 a month (after taxes). Now I make that in less than two days. It’s crazy when I think about it.
For a lot of us (myself included) it’s never about the money. But what I have inevitably realized is that money brings freedom. The freedom to choose the work we take on. The freedom to work on meaningful projects. The freedom to have time to do what we want.
As designers, I believe in improving not only the quality of our work, but also the value of our work.
Talking about money is always a touchy subject. But just to give you some background about where I’m coming from, and about my income as a freelance designer: I’ve made more than $140,000 working only seven months in a year. I enjoy some time off in between projects, and the freedom to do other things. However, bear in mind that I have been doing this for nine years, and with that comes experience and a honed set of skills.
Here are some tips that will surely boost your design work’s value. These tips are not things you can do overnight; you will need to put in some hard work in order to achieve your desired results. But if you take action, I’m sure you will eventually see positive results.
1. Be a Good Designer: Produce Great Work That Solves Problems
A strong body of work commands interest from prospective clients and increases your perceived value as a designer.
I am a strong believer in constantly working on my craft. Improving the quality of our work helps us get more projects, and also contributes to pushing our industry forward.
What aspects of your design work can you improve, and how?
Set a Goal
The first step is to have a good idea of what "good design" is. Think of all your favorite designers. Write down a list of the top five designers you admire. Done that? Good. Your goal is to close the gap between your work, and the work of the designers you hold in high regard. Follow their work, as well as the work of other designers that they like/favorite/save on social media platforms such as Behance, Dribbble, Pinterest, etc.
Now you have a benchmark for good design work.
Improve Your Visual Design Skills
The first and most obvious thing to work on is your visual design chops. The best way to improve in this area is to practice.
Spend one to two hours a day analyzing, deconstructing, and recreating the work of other designers. What would begin as an exercise of merely emulating and reproducing someone else’s work will eventually allow you to see and understand why certain designs work better than others.
Many great designers started this way. Haraldur Thorleifsson, a successful designer who has worked with companies such as Google, Microsoft, and Airbnb said in an interview:
When I was younger I liked to take things apart to figure out how they worked. I never did figure anything out, and I certainly couldn’t put anything back together, so this mostly meant that I had a lot of broken stuff.
I am by no means a natural designer or illustrator, so when I started designing I basically did the same thing. I would take screenshots of sites I liked and copy them, the digital equivalent of tracing from paper. This taught me a lot about spacing, typography, grids and how to create graphics from scratch.
Over time, as your visual library expands within your head, you will realize your own ideas.
To get better at design, the idea is really just to keep creating. When he was asked by a design student what to focus on to help grow one’s career, Mike Buzzard, a Design Manager in UX at Google, answered: Just keep making stuff.
Even if you’re a seasoned veteran — just keep creating, as there’s always room to improve. A seasoned chef still sharpens his knife. Join communities and find great mentors to learn from. Always make time to learn new skills that can make your work better.
Visual chops are all well and good. But design is more than just the visual. It’s also about meeting the client’s goals, and thinking about your work as being a part of a system.
A lot of designers don’t want to think that their work sits in a marketing plan or a business strategy. But it does.
To be an effective designer, it’s essential to have a holistic view. You must see where your design work fits within the overall picture. To possess a holistic view means taking some time to learn about the other components of the system. Get into reading about business, marketing, copywriting, web performance, and other associated subjects.
While there may be art in what we do, we are not artists. We are designers. It’s the balance of form, function, and user/client objectives that makes your designs great.
2. Be a Great Communicator
At the end of the day, clients (whether they are creative directors, marketing managers, or business owners) are just people. People just like you and me.
When I used to work as a Creative Director, whenever we needed to hire designers, I would of course evaluate the design portfolios of the candidates as part of the decision-making process. But almost equally as important was looking at how well the candidates communicated. How did they come up with the context and rationale for their design solutions? Were they consistent with keeping the lines of communication open?
Being able to communicate well and eloquently helps you build trust with your clients. How well can you answer their questions? Try to be empathetic and put yourself in your client’s shoes. What do they need to know, and how can you best solve their problem?
Start by identifying your personal communication style and tone. I prefer to write clients using a conversational style of communication. It helps me weed out all the unnecessary jargon and allows us to engage on a more personable and "authentic" level. Also, people that are okay with this style of communication are usually from the types of organizations that I like working with.
Indirectly tied to communication is punctuality. Punctuality is super important. Honoring your promises and staying true to your word is important if you would like your clients to be able to trust what you say. If you’re going to say something is going to be done at a certain time, make sure you do it on time or (even better) earlier than the time you have committed to. Under-promise and over-deliver. Not vice versa. By nature, I’m not a super organized person, but through the years I’ve learned to always deliver no matter what.
3. Put Yourself Out There
No one is going to hire you if they don’t know about you.
I used to feel iffy about promoting myself. But I need to put myself and my work out there in order to attract prospective clients, as well as to be able to make connections and start conversations with like-minded designers. Dan Mall said it best: "Contribute to the conversations you want to be part of."
If you’re a freelancer, getting yourself exposure is almost as important as having great design work. Join online creative sites like Behance and Dribbble, and keep posting your work on them. Share your work and reach out to different communities. You can even share your journey by posting snippets of your design exercises, similar to what Paul Flavius Nechita did with his 100 Days UI project. (He was interviewed about the project on Dribbble.)
4. Work with Only Good Clients That Pay Well
As your designs become better, and as your reputation grows, you should be receiving more job leads.
Instead of taking on every single project that comes your way, it’s important to prioritize closing the clients that will pay you what you think your services are worth.
But how do you do that? By demonstrating the value of your work to prospective clients, and what it will mean to their business.
Read about value-based pricing in this article: How I Earned A Lot More on Projects by Changing My Pricing Strategy.
I have garnered clients via a "pull" methodology. This means prospective clients get in touch with me via different channels. I never reach out to potential clients. Getting projects using this "pull" methodology means that would-be clients already know about what kind of work I offer and what I’m about. Also, they will typically already know which markets I serve.
Identify what markets you serve and think about what your time and services are worth. Accept the projects that are within your criteria.
Good clients will refer you to other good clients. And I mean not just "good clients" in terms of pay, but also how easy and pleasant they are to work with. It’s because like-minded businesses and people tend to connect and engage with each other.
In the same token, less-than-stellar clients will probably refer you to other less-than-stellar clients. If you design sites for $100, you will be known as the $100 web designer, and you will in turn attract clients that believe websites should only cost a hundred dollars. If you do sites for $30,000, then you exist in that market. (And if you’re Huge, you exist in the $18 million market.)
5. Be Nice
Most people don’t like to work with designers who have huge egos.
The Golden Rule applies here: Treat others the way you would like to be treated. Good manners is a currency that goes a long way in the business world.
How I Made Web Design Profitable by Not Doing Web Design
How to Fire Bad Clients
Web Designers Making Thousands of Dollars in Passive Income
Even if your site is still months away from being ready for launch, you should put up a "coming soon" page as soon as possible. A "coming soon" page can help you collect user information, like email addresses and feedback/suggestions. It can therefore help you build buzz and a base of early adopters prior to your site’s launch.
For ideas and inspiration, check out these "coming soon" pages. (They used to be called "under construction" pages, an archaic term from the early days of web design.)
25 Beautiful Examples of "Coming Soon" Pages
10 Simple Tips for Launching a Website
5 Tips for Pre-Launch Landing Pages
Although there are many icon font sets (such as Font Awesome and Iconic) that you can readily use in your UI designs, there are times when you might want to generate your own custom icon font. For instance, you might have icons that you have designed that you would like to convert into an icon font set, or perhaps you would like to combine icons from various icon font sets.
Fortunately, creating icon fontsis fairly simple. Here are some free icon font generators that allow you to create your own icon fonts.
Fontello offers a simple platform you can use to generate your own icon font. To create your icon font, simply drag SVG files from your computer and drop them on the area located under the “Custom Icons” heading. You can also incorporate icons from free icon sets by selecting them in Fontello.
2. IcoMoon App
The IcoMoon App allows you to import your own icons as well as include icons from the IcoMoon icon set and other free icon sets. The total number of icons available within the IcoMoon App is in the thousands.
3. Icon Vault
To generate your own icon font with Icon Vault, you first have to download their template package. Then just follow the instructions included in the template package. Once you’re done, upload your icons onto Icon Vault.
4. Pictonic Fontbuilder
The Pictonic Fontbuilder allows you to choose from Pictonic’s free and paid icons in order to build your own customized Pictonic icon font. Pictonic has over 2,700 icons to choose from, and over 300 of them are free. Accessing the Pictonic Fontbuilder requires account sign-up.
When you go to Glyphter, you will see a character grid on the left. The right side of the screen, called the “icon shelf”, is where you will find free icons and a search bar. Simply drag and drop the icons you want to use from the icon shelf, into one of the boxes on the grid. You can also upload your own SVG icon files by clicking on the boxes on the grid. You can have up to 88 icons in your icon font for free. If you need to have more icons, you will need to sign up for a premium account.
To generate your own icon font with Fontastic, select icons from the available free icon sets (such as Streamline Icons and Entypo) and/or upload your own custom SVG icons. Once you’re all set, go to the “Publish” tab, where you will have the option to host your icon font on Fontastic’s Icon Cloud or download your icon font. Accessing the Fontastic icon font generator requires account sign-up.
One of the biggest things you’ll notice in material design is the use of bold, vibrant colors.
Material design’s color guidelines describe the color style as being “inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.”
If you need to generate material design color palettes, these online tools will help.
1. Material Palette
In this tool, you start by picking your primary color and accent color. Afterwards, it will show you a live preview of the generated color palette and offer you a variety of ways to download it.
2. Material UI’s Material Design Colors
This is a nifty “cheatsheet” that presents all of the material design colors in one page.
3. Random Material Generator
Do you want to let fate decide what your color palette should be? Use this tool to randomly choose your material design colors.
4. Material Design Palette Generator
If you’re interested in creating a custom, material-design-like color palette, check out this tool. First, you need to specify a color — and it doesn’t have to be one of the official material design colors — using a color picker dialog window similar to the ones you can find in your favorite graphics editor. The Material Design Palette Generator will then generate color swatches based on your chosen color.
5. Material Mixer
This useful tool shows all material design colors in a conveniently compact grid layout. Click on a primary color and accent color to preview and generate your color palette.
6. Material Colors
This tool displays just the 500 and A200 colors of material design color swatches.
7. MaterialUp’s Material Design Colors
This is another simple tool for visualizing material design colors. It shows the primary colors side-by-side. Clicking on a “color bar” shows all of the color swatches associated with that color.
8. Tint UI’s Material Design
This tool displays just the material design 500 colors.
9. designskilz’s Material Design Colors
This simple tool helps you visualize all the material design color swatches along with their official names (e.g. Pink, Light Blue, etc.).
Material Design Color Plugins for Graphics Editors
If web tools aren’t your thing, you can instead install a plugin/extension that integrates the material design color swatches right into your design software.
- For Photoshop / Illustrator: Google provides downloadable Adobe color files (.aco) to make it easier to develop your color palette within Photoshop and/or Illustrator.
- For Sketch: Check out the open source Material Design Color Palette Sketch Plugin by Koji Ishimoto.
- For Gimp / Inkscape: You’ve got a couple of options: gimp-material-design-color-palette by KiSSFLOW and material-design-colors by Soichiro Kashima.