Web Redesign Idea

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
How To Design Enticing Registration Pages</div>
 
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 <a href="http://webredesignidea.blogspot.com/2015/09/best-parallax-web-design-examples.html" target="_blank">some relatable graphics</a> you can often get people interested. But how do you craft a registration page that attracts visitors and pushes them toward the submit button? 
 
 
<div class="separator" style="clear: both; text-align: center;">
<img alt="How do you design a registration form or pages? Take a Look" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnpct_pxXS0ZcH8TSv5bcCUYhBZNHOJPNhjnzupPrEjRQ58QycPQowGuVCeBjnE3flnYOt70drmEj8UeW84yqO0HW4FoKBQ5TdweLQCAbFZAyOSQo-SMzgvur7l2ZryLPxE5mS-OYfjQ5o/s320/s603832655809762228_p12_i2_w400.jpeg" title="How do you design a registration form or pages? Take a Look" width="320" /></div>
 
 
Also Check: <a href="http://webredesignidea.blogspot.com/2015/08/25-web-design-mistakes-you-should-avoid.html" target="_blank">25+ Web Design Mistakes You Should Avoid</a> 
<hr />
 
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. 
 
Creative Form Inputs 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 <a href="http://webredesignidea.blogspot.com/2015/09/10-sites-photoshop-actions.html" target="_blank">web designers</a> a spoonful of expanded creative boundaries. And man, those are tasty! 
 
<div class="separator" style="clear: both; text-align: center;">
<img alt="Creative Form Inputs" border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hji1-NzMyZIvpT83j6_KfL8-by2EV0PI3NODUwDjQm-1VRiJU1jibsJ0FjEJIK9Fuz0pj5YBgw1Rr-RFN6x7H7g8u0yZu7YLFkbYmOcNbAt-8qbBp9AOOSAswrWfKS_waPxM9p71cfcJ/s640/sign-up-page-design.jpg" title="Creative Form Inputs" width="640" /></div>
 
 Similarly the signup page for <a href="http://oozled.com/sign-up">Oozled</a> uses large oversized letters and input fields which blend cooperatively.  
 
<div class="separator" style="clear: both; text-align: center;">
<img alt="Creative Form Inputs" border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8P_X-HvsAxlJ8ugMrgDZecYsDVIT5rJ6AxgQgk5HgzXpqTh1-kweS7gVENx9nRiwwOBq4iQmlLXmB7Y19Dy-O_XNdIcmB8umg-XV5a-rASxKzXkQb7QP-hmH5wPugTMxTB5uMwuUiVCgv/s640/blue-oversized-text-form.jpg" title="Creative Form Inputs" width="640" /> </div>
<hr />
<h2>
Guiding Tips</h2>

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. 
 
<div class="separator" style="clear: both; text-align: center;">
<img alt="Guiding Tips" border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCglrMICOjiQAhNXX5xV4D7rbRkircHsnMQoov3yfo-ecvqJtzBK-5-fKSPqGoCQob_U5fUEZBd5L3uXzXPKkx_49nBps6MPyn-8DqZcilrQ_N3nVPNG9yqaG7kRQzsDjoXZAL_LVkejQe/s640/mailchimp-register-page-design.jpg" title="Guiding Tips" width="640" /></div>
 
I pretty much love everything they do over at <a href="https://login.mailchimp.com/signup">MailChimp</a>. I’m an ardent supporter of the company’s design style and website layout. 
<hr />
<h2>
Quick & Simple UX</h2>

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. 
 
<div class="separator" style="clear: both; text-align: center;">
<img alt="Quick & Simple UX" border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ92wIWNTO9SMv6cTahAbWSs4DzJNLb6k2kKXIEITMXQDbtS6njkr6uQ9CagblEEyi8ppkxPvZhiZ6ImFsxFsSEaNUuCgfnxVPPitVCwCyuTJSREJyn-sRRVbUtgHR8n6tqQny3syEoMJV/s640/udemy-signup-simple-form-design.jpg" title="Quick & Simple UX" width="640" /></div>
 
Perhaps one of the simplest examples can be found on <a href="https://www.udemy.com/join/">Udemy</a>. The signup page starts with an e-mail address and once filled out moves on to request a name & password.   
 
<div class="separator" style="clear: both; text-align: center;">
<img alt="Quick & Simple UX" border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRfJPAME8n34J-JOL1wPTqq4Y19ectJjUwTKNNoA2kJdWMLZ8mXNIcE8Fw91bhmkO6Wdq_bo1EW6i88Y4BMwTtrdIEf54Acuu3eAjXNA7dH6b0f1wCQxYko6zRwxPM2tici0Gkg-DfoCwA/s640/gumroad-signup-modal-window.jpg" title="Quick & Simple UX" width="640" /></div>
 
Take for example the signup modal window on <a href="https://gumroad.com/">Gumroad</a> which offers two distinct methods of registration. 
<hr />
<h2>
Dynamic Content</h2>

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. 
 
<div class="separator" style="clear: both; text-align: center;">
<img alt="Dynamic Content" border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_qAMTT6Wdh6jIO0DMdnmMwP7oT6ZG4NEIrMFDHQrU7diqC1-Do9ror5LmBfELqd9k6PTpiN0btdLprfB9NcHaiahk5E4ZTY2EMvnDd949AH7KHED_Uxfgqme_Q3hWUHl-HxbF7MjCcPXp/s640/lanyard-signup-login-page-dynamic.jpg" title="Dynamic Content" width="640" /></div>
 
Take for instance the login & signup page for <a href="https://lanyard.fm/?o=login&op=l">Lanyard</a>.
 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. 
 
<div class="separator" style="clear: both; text-align: center;">
<img alt="Dynamic Content" border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusBRpiLvSak9a-CJvYoQgNd7jET-BH_nYcY_Js-azyRy87VqU8fzUjVAoWUiv8s1MdRLLjn5_cki8zWRxXuu10bk_QRnOpp6dw5mSIErF7QMUqip0sH0O3kRqQvziTJVZDyr06RLc23ym/s640/mapbox-modal-window-signup-form.jpg" title="Dynamic Content" width="640" /></div>
 
Another similar example can be found on <a href="https://www.mapbox.com/">Mapbox</a> 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. </div>

How do you design a registration form or pages? Take a Look

How To Design Enticing Registration Pages It’s difficult to persuade new visitors to sign up for a website. Most of the time they just f...

Web Redesign Idea

How do you design a registration form or pages? Take a Look

Popular Posts

Blog Archive