How To Design Enticing Registration Pages

Friday, January 30, 2015

Advertise here with BSA

It’s difficult to persuade new visitors to sign up for a website. Most of the time they just found the site and have no idea what it does. With exciting copy and some relatable graphics you can often get people interested. But how do you craft a registration page that attracts visitors and pushes them toward the submit button?

In this post I’d like to examine a number of registration pages which utilize superb methods of interface design. It’s possible to create a well-designed website but ignore the facets of great interfaces and user experiences. By focusing on both design and experience you can put together a much more cohesive registration page which naturally draws attention from visitors.

Creative Form Inputs

Getting a little rowdy with your design process can be a good thing. You’ll discover ideas that you hate but also stumble onto concepts you love. Most people are familiar with default browser input fields. They’re reliable, tame, expected, and placid. Like your old desk or running sneakers, they work as expected and eventually just blend into normalcy.

I suggest trying to break away from the default browser styles by creating your own input fields. You should obviously still use the HTML tags but modern CSS properties offer web designers a spoonful of expanded creative boundaries. And man, those are tasty!

healthtab clean registration page design

Check out the example on HealthTab which is quite minimal and effective. Each of the form fields have been designed to eloquently match. There are select menus, radio buttons, and a checkbox for terms and conditions. The custom form design style is emulated nicely and offers a sense of uniformity to the page.

oozled website big oversized text layout

Similarly the signup page for Oozled uses large oversized letters and input fields which blend cooperatively. This may be something you like, or something you hate, but it’s difficult to feel ambivalent towards such a dramatic interface. Oozled may be taking a risk but there are plenty of benefits to using large oversized fields – notably the ease of interaction from any device.

Purposefully go out of your way to attempt new ideas. Put down sketches on paper or hit Photoshop to see what you can come up with. You might surprise yourself with a bit of unique ingenuity.

Guiding Tips

For more detailed webpages you might consider offering brief tips during signup. These could be placed in the form of tooltips, floating text, or input labels. The goal is to clarify a specific purpose for each field and get visitors onto a streamlined path towards completion.

mailchimp registration page design signup form

I pretty much love everything they do over at MailChimp. I’m an ardent supporter of the company’s design style and website layout. Their signup page is a great example of how these guiding tips work in action. The email and username fields display short informative tips when selected.

Additionally the password field has a bulleted list of requirements. Passwords can be exceedingly frustrating because users don’t always want to create new a password for every website. If they know the statutes upfront it can help them determine a secure password that fits within the required characters(letters, numbers, symbols, etc).

Quick & Simple UX

When discussing the user experience of signup pages one word comes to mind: simplicity. The end goal should be to finish registration in the simplest manner possible. Avoid extraneous fields that aren’t necessary on signup. Keep a focus on the form itself and write error messages that encourage rather than dissuade.

udemy email simple minimal signup page

Perhaps one of the simplest examples can be found on Udemy. The signup page starts with an e-mail address and once filled out moves on to request a name & password. This feels less intimidating and often works to push users further into the next step. Be careful not to split the signup process into too many stages or it may become frustrating and drive people away.

gumroad homepage modal window signup oauth

To avoid alienation make the whole signup field clear and concise. Succinct, pithy labels & errors are more useful than exhaustive descriptions. Take for example the signup modal window on Gumroad which offers two distinct methods of registration.

A new user might just signup using their e-mail address with a password as you’d expect. But alternatively people with Facebook or Twitter accounts can sign up with OAuth. This process is reliable because it works through HTTPS with existing accounts on trusted 3rd party websites. Connecting through Facebook means a brand new account, sans the login credentials. The process is quick, simple, and majestic compared to filling out numerous input fields.

Dynamic Content

While animated pages are not always going to increase registration numbers, they will often feel more developed than static pages. The effect is more psychological than technical but I find myself impressed with forms that use animations for CSS3 effects or switching between input fields.

lanyard fm signup form contrast large text design

Take for instance the login & signup page for Lanyard. Once it first loads there are two large text links that users can click between. Both login and signup forms are located on the same page and switch between views like an accordion menu.

It feels much more dynamic and responsive to common user interaction. Plus this saves time when people aren’t sure if they’ve already signed up or need to create a new account. Lanyard does a lot of things right on this page: contrast, readability, simplicity, and of course dynamism.

mapbox modal register login animated forms

Another similar example can be found on Mapbox which relies on the modal window approach. After clicking the “sign up” link a modal window appears over the screen with typical input fields. You’ll also notice a small “sign in” link in the bottom-left corner of the modal which animates a swipe event to show the login form. Both forms are displayed in the same manner and easily accessible from the same page.

However not all dynamic effects will prove useful. Avoid animations which are flashy for the sake of being flashy. If you can improve a user experience or draw attention to something on the page then dynamic effects can really add some spice into the design.


When toying around with new interface ideas keep one eye focused on design and the other eye focused on user experience. Signup forms are meant to bring visitors further into the site through curiosity and congenial design traits. Basic signup forms are more inuring in that they condition users to expect the obvious. If you can design a registration page with familiar behavior plus engrossing aesthetics you’ll be sure to reel in a wide audience.

Advertise here with BSA


Design your way

How is your design practice getting along?

Are you stepping into the new year with big plans, like the rest of us?

Well, I’ll warrant that we’re all in for some pleasant surprises. There is a growing market for resources that offer wholesome packages, and a new generation of WP themes is on the rise.

A Shift in WP website creation

The times when we felt like we had no choice but join up with developers on every single project are not that far behind us. Neither are the days when website responsiveness was a rare attribute. It’s a matter of a couple of years. Can you see just how fast is web design changing?

Another example: type kits and their previously exclusive status. Using gorgeous fonts and typefaces used to be a privilege that only big budgets could afford. And now, nearly every WP theme worth mentioning includes Google Fonts, and type kits are either free or very accessible in terms of cost.

Unbelievable as it may seem, the future of web design lies with WP themes that don’t just encompass all of the newly established norms (clean code, responsiveness, type kits), but go even further with shortcodes, and an extended range of capabilities. I am particularly rooting for new techniques that optimize image loading and responsive re-sizing (i.e. websites with large image and video backgrounds).

Coming On Strong: X Theme

Coming On Strong: X Theme

I had to see this for myself – the product that sells fastest on ThemeForest. X Theme makes a very good case for website creation with the help of WP themes. It’s not just any theme, but a truly far-sighted one. Themeco’s prodigy is excellent in terms of design, documentation, and especially support. If you have a suggestion, or a grievance of any sort, their team is all eyes and ears.

But let’s take a closer look at it, shall we? X Theme unlocks 600 Google Fonts with all their respective weights and styles, as well as 40 shortcodes. You won’t have much of a problem creating your unique page layout, thanks to instructive videos that assist you every step of the way. Also, I was quite taken with the many navigation and styling options.

Stacks are the epicenter of X Theme. To this day, four sensational complete designs are available with X: Ethos helps create flourishing visual websites, Integrity is ideal for businesses, Icon is wired for modern minimalism, and Renew offers a refreshingly flat design. Illustrative demos are included with each Stack, so you won’t take long to seize their full potential.

The latest number played by Themeco is to integrate and even create valuable extensions, and there’s more to these extensions than meets the eye.

Useful Extensions from Themeco

Useful Extensions from Themeco

There are loads of WordPress plugins out in the open, and I would guess that the ones worth bothering for cost $50 to $200 per piece. Well, when you move forward with X Theme, you won’t ever have to look anything up separately. The expertly tailored extensions are included in the package, and you couldn’t get them from someplace else even if you wanted to. If I were to estimate what’s at stake, I’d say you save $1000.

Buy a single copy of X Theme, then confirm your transaction, and you’re qualified to receive the full force of Themeco’s cleverly extended functionality. Along with the available extensions, you are also scheduled to receive any new extension that may be added, plus every update, ever. Upcoming updates are an automatic affair, so you’ll never have to trouble yourself with them. Finally, note that the extensions I’m about to describe aren’t working in the detriment of your website performance – quite the contrary.

Secure Their Interest

Secure Their Interest

You know as well as I do that whatever piece of information you have to send to your readers, it’s all about the wrapping. The better you present your content and marketing offers, the bigger your conversion rate is going to be. That being said, you can reach out to a savvy extension from X Theme, and swiftly create a Content Dock.

Activate the Content Dock function, and pick a widget. Supposing that you choose a text widget, you can use shortcodes to get your point across. The bottom display limit is 767px, to keep your offer from taking over the screen, and continue to show the closing button.

Tune Up Your Forms

Tune Up Your Forms

So much depends on the impression that your sign up forms make on casual visitors. The way you craft the entrance to your website can repel guests, or lure them in. So, why not take up X Theme on the invitation to customize some drop dead gorgeous registration forms for your site?

The MailChimp Integration enables you to do just that, and without any hassle. When you’re happy with the results, connect your forms with MailChimp, and choose a widget, template, or shortcode function to settle on a location for them on your website.

Go Social

Go Social

I don’t want to be a killjoy, but I chanced upon some very interesting websites in terms of content, which failed to show any reactions from visitors or registered users. You can’t display engaging information on a page, be it a product or a blog post, and leave no space for comments.

Nothing of the sort could ever happen with X Theme, so long as you swap the annoying classic comment system with Disqus Comments, everyone’s favorite communication pad.

Spread Your Brand Image

Spread Your Brand Image

You could always replace the WP logo embedded on your log in screen with a custom image that reflects your own brand identity. Themeco went to great lengths to give users a simple way to personalize their WP environment – starting from the log in screen, and continuing with the Add-on home.

Through White Label, you may create special messages to accompany the projects you deliver. So your clients can receive your contact information, a word of advice regarding future liabilities, or something as simple and effective as a thank you note.

Create Layouts in Minutes

Create Layouts in Minutes

I wouldn’t imagine a proficient solution like X Theme to give you a hard time when you’re working on your layouts. Needless to say, X doesn’t sport an obnoxious admin panel, but throws the Visual Composer and a live preview feature in the game.

The Forecast for 2015

I don’t mean to postulate what may or may not happen this year within our beloved web design industry. I can, however, pass judgment on what I’ve seen so far. And what I know for sure is that X Theme is a genially equipped WP theme. You don’t have to take my words at face value. Go ahead and join the designer community over at Themeco by clicking the button below.

Find out more about X Theme


Line25 Sites of the Week for January 30th 2015

Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week’s collection, we have designs from KONTOR LONDON, Brian Hoff Design, Wood Shed Production, Be My Eyes and Tommy Franklin.


Kontor London

View the website

Brian Hoff Design

Brian Hoff

View the website

Wood Shed Production

Wood Shed Production

View the website

Be My Eyes

Be My Eyes

View the website

Tommy Franklin

Tommy Franklin

View the website

The post Line25 Sites of the Week for January 30th 2015 appeared first on Line25.


Design your way

Wednesday, January 28, 2015

Many people would love to be able to set their own work hours, create their own success and be their own boss.

Going freelance full time can seem like the ideal way to make this dream come true, but the reality is that the lifestyle of a freelancer is not for everyone. Someone who enjoys team work and likes chatting with co-workers in the office will not be suited to the independent life of being a freelancer.

What You Should Know Before Going Freelance

Image source

Even if you can imagine yourself as a successful consultant, copywriter or technical expert, going freelance is still a huge leap of faith when you give up a regular salary. There will always be some people who will be less successful working on their own than they are in a steady corporate nine-to-five environment.

You may dream of becoming empowered by going freelance and of being freed from your usual work routine, but you should be aware that working as a freelancer is not always perfect.

You have to be able to hustle and be capable of self motivation, in addition to coping with cash flow problems. A freelancer also has to be able to deal with loneliness, overcome the fear of rejection and communicate effectively with clients.

Before you reach a decision about whether or not you should be going freelance, you should get to know every aspect of what life is really like for a freelancer.

Being your own boss is not a simple thing

Being your own boss is not a simple thing

A freelancer has to handle all the communication and negotiation with clients who can be much more demanding than the average boss. Clients will require you to have direct communication with you and they will cut the connection between you instantly if they don’t get the courtesy they expect from you.

Without the backup of a manger or any co-workers, there is no-one to offer sympathy over rejections or reassure you over conflicts of opinion.

You also need to be capable of evaluating the quality of your own work. When there is no-one acting as boss, there will be no recognition given to you in appreciation of a job that has been well done and completed on time.

When you are a freelancer, identifying important milestones and celebrating them is something you have to do on your own.

You will work alone (and it will take you some time to adapt)

You will work alone

Image source

Being a freelancer can seem like a very lonely occupation if you have been used to the interaction of a busy office environment. Unless you regularly meet with business partners or pitch your services to clients face-to-face, working from home means that you are physically isolated from the rest of society.

You cannot afford to allow the isolation to affect your mood when there are so many days when you are on your own or when you never speak to another person for the entire time that your partner is at work and your kids are at school.

You’ll have days of no activity

It makes no difference what type of work you do as a freelancer, there will be some slow times of the year and weeks when the work dries up. You may begin to panic when this happens and think that you are never going to get any more business.

You will be better prepared for this when you have been freelancing for some time. Then you will have spotted the trends and will be fully aware that there are always going be some quiet times.

You will constantly need to find work

You will constantly need to find work

Image source

There is plenty of freelance work available, but you will constantly need to find work and you need to have some sort of marketing plan.

You can spend too much of your time on job boards looking for suitable jobs that have been put out by companies, and seeking out clients who rely on freelancers to cover their needs. By creating a portfolio on your own website you will save some time and it will help more clients to find you and approach you with a request for your services.

Will you earn enough for your lifestyle?

Will you earn enough for your lifestyle

Image source

Being a freelancer is never going to be a fast road to riches, so you have to work out exactly how many hours you need to put in each week in order to achieve a liveable income. You have to be aware of the amount of money you need to cover all your living costs and any unexpected expenses.

As a beginner, your hourly earning rate will be considerably lower than in it was in your previous job.

Consider that clients won’t pay on time

When you are no longer receiving a regular paycheck, you do have to consider that receiving payments from clients is rather an erratic process. You should realize that you can’t always rely on receiving money from clients when you need it most.

Companies and small businesses are frequently late in making payments, so you may find yourself resubmitting the same invoice for work that you have completed. You might also be forced into making phone calls to remind some of your clients of the need to pay you.

You can never rely on getting repeat business from any client, so you always have to be working for different companies and individual clients. If one of them gets into financial difficulties, you will only survive during a financial lapse or non-payment of your invoice if you have money coming in from other sources.

Discipline is the key

Discipline is the key

Image source

Discipline is definitely a requirement when setting your own hours, because you need to ensure that you will get enough sleep and won’t get up in the morning feeling too tired to work.

When first going freelance, it is a temptation to work late into the night and put in as many hours as possible. It’s not healthy to do this every night, and it will prevent you from working effectively in the mornings.

You need to be available to clients during the working day, so setting regular office hours makes more sense for a freelancer than a late night routine.

On a positive note, it’s highly rewarding

Being a freelancer is hard work and at times it can become very tough, but the benefits of going freelance are what make it worthwhile doing as a full time occupation.

Each day is different and your earning potential is higher than in regular employment. You can choose exactly how and when you want to work. By working on weekends you can have a free day off whenever you want.

Ending thoughts

Going freelance does present a big challenge, and to start with you may soon miss the security and comfort of being in regular employment. There will be difficult days and occasions when you wish that you still had a regular paycheck.

The wealth of benefits you gain by being a freelancer are far greater than anything that can be expected from a regular nine-to-five job. It is far more rewarding to be starting a work day in a warm cosy home office while others are still struggling to commute to work. The hours you work are very flexible, so by going freelance you can plan to start a family or decide how best to fit family life in with your work routine.

Being a freelancer means you have greater earning potential that most people do in regular jobs. By going freelance you are no longer contributing to the coffers of your employer. The harder you work the more money you can make for yourself.

Once you get into the freelancing lifestyle, you are likely to do whatever you can to ensure that you will never have to return to paid employment. If you are the right sort of person to make the switch, then be assured that you are never going to regret going freelance.


Web Design Trends. Interactive Infographic

Tuesday, January 27, 2015

Contemporary design means trendy design, which is done according to the latest innovations in the web world. Everything is changeable, and each day brings something new, so you have to keep abreast of the latest innovations to create up-to-date projects. To find what’s new and what’s not, you can visit various website showcases. Web design compilations are also great sources of inspiration and useful information.

It’s not enough to know all of today’s trends in order to have an idea of what’s popular in design and what’s not. History repeats itself, and if you are familiar with the story of web design, you can understand modern trends better and recognize the upcoming ones. Besides, by learning the origins of web design you can dive deeply into this topic and become “the one who knows”.

Where can you find well-compiled information about design trends? You can ask Google about top 5 trends of a year in which you’re interested, or, alternatively, you can find compilations or Infographics dedicated to this topic. The latter seems to contain the most interesting content, which presents an interactive and easy way to perceive information.

One of such Infographics sources has recently been launched by TemplateMonster and it talks about 2004-2015 web design trends. Actually, the Infographics is a complete list of the trends over the past decade and even a look at the future of web design. All years (except for 2015) include five trends, and each trend is accompanied by a short description and a number of sites illustrating it. For example, 2014 boasts of code free designs, full-width pages, clarity and simplicity, non-standard navigation and blocking.

Do you remember what was popular in 2005? What happened to most website layouts in 2007? When was parallax implemented in a site for the first time?? You’ll find all this information and even more in this interactive Infographic. It’s responsive, so you can easily bookmark it, and enjoy browsing from your smartphone at the most convenient time and place.

Your journey will start from this landing page:


Then you click the year in which you’re interested to browse its major trends:

2013 web design trends

And read about each one:

Metro Style trend

Start your journey right now and get into the world of web design. It’s going to be captivating!

About the Author: Walk with me to learn all you wanted to know about the philosophy, psychology and aesthetics of modern web designs. How to find me? Katarina Klementi on .

The post Web Design Trends. Interactive Infographic appeared first on Web Design Blog | Magazine for Designers.


The Cash Box Blueprint

Most Reading