All posts tagged “Examples”

18 cool examples of food advertising

first image of the post
The funny and crazy ads get attention and make the reader’s eyebrows raise. People just enjoy it and that is why many brands are creating such funny yet creative ads to entertain and attract customers. Here are 18 cool examples of food advertising. 1. Bell Food – Sardine Sardine lovers, see this amazing ad. 2. […]

The post 18 cool examples of food advertising appeared first on Designer Daily: graphic and web design blog.

Download the free transport icons package now!


Designer Daily: graphic and web design blog

16 Awesome Examples of Website Testimonials Done Right!

Testimonials can be very powerful for helping to establish trust and encouraging visitors to buy, sign up, fill out a form, or take whatever action you are after. For websites and online businesses…

Click through to read the rest of the story on the Vandelay Design Blog.


Vandelay Design

50 great examples of doodle art

Read more about 50 great examples of doodle art at CreativeBloq.com


Doodling is a great, fun way of expressing yourself. But because everyone can do it, it’s often underrated as an art form. Yet doodle art is a serious business for many – as these stunning examples prove. Combining child-like doodles with expressive illustrations, they show how doodling can be used to create beautiful and arresting designs. Who knew there were so many doodle art styles? Which is your favourite? And who’s missing from the list?




Creative Bloq

Examples of Hidden Menus in Website Design

You’re reading Examples of Hidden Menus in Website Design, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Hidden Menus in Website Design

Use of a Navicon is a web design trend that forces us to take a look at navigation menus, their place in design and role in user experience. Although the concept does not diminish its significance and importance of navigation, it can provide designers and developers with more creative freedom. Navicons vary depending on the […]



Designmodo

5 innovative examples of user interface design

Read more about 5 innovative examples of user interface design at CreativeBloq.com


In these days of intuitive touchscreens and intelligent iPhone apps, your audience is not going to put any work into using your product, app or operating system – they’ll expect it to be obvious. No one is going to read a lengthy, detailed instruction manual; instead, the UI design should guide your customer through to achieving their goals – doing all the hard work so the user doesn’t have to.




Creative Bloq

15 cool examples of good typography and lettering

first image of the post
Creativity never ends for designers, but sometimes it’s hard for them to start a design without having a look at some cool inspirational designs. With typography, you can actually create magical designs that will suit and complete your theme of the project. You can create several cool and even funny effects with typography and lettering. […]

The post 15 cool examples of good typography and lettering appeared first on Designer Daily: graphic and web design blog.

Download the free transport icons package now!


Designer Daily: graphic and web design blog

10 hip examples of lomo photography

Read more about 10 hip examples of lomo photography at CreativeBloq.com


Born in the 90s, after a group of Viennese students discovered the Russian Lomo Kompakt Automat camera in Prague, lomography has grown into an international art movement. The style is achieved by cross processing film. Lomo cameras use colour slide film, usually developed in E6 chemicals while standard 35mm film is developed in C41 chemicals. Lomo owners take colour slide film and process it as standard 35mm film, resulting in the over saturation of colours and contrast.




Creative Bloq

30 Excellent Examples Of Creativity In Simplicity

You must have heard the impression “Creativity in simplicity” which states the power of simple things. Usually the simplistic approach to any problem is the correct one. There is some much to inspire from simple things. It’s not that hard to derive inspiration from other’s work, all it takes a little creativity and wide imagination. The key to success is your creativity.

30 Excellent Examples Of Creativity In Simplicity

Javier Perez, also known as Cintascotch, is a perfect example of that. He never expected that so many people would love his simple doodles which he posted on the internet. His cute little drawings have award him more than 100k followers on Instagram.

The world seen through Perez’s eyes seem like a magical place. You will definitely love his work. You can follow Perez on Instagram

Beautiful “Creativity in Simplicity” Examples

These are some of the best examples of creativity in simplicity, created by Instagram user Cintascotch that shows you the power of simple drawings.

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Creativity In Simplicity Example

Visit us at InstantShift.com

PSD to HTML


InstantShift

Inspirational Examples of UI Style Guides


According to Wikipedia, a UI style guide is a ‘set of standards for the writing and design of documents’ and that it ‘ensures consistency and enforces best practice in usage.’ All very true. But what it neglects to mention is how inspiring UI style guides can be just to look at and get lost in.

In much the same way as we found wireframe sketching and brand identities incredibly inspirational, web UI style guides have the same effect.

If you’re looking to quickly create your own UI style guide, you might like to take a look at this huge selection of Website Style Guide Resources, or this Style Guide Boilerplate, or even Stylify Me, a web-based style guide generator.

Check out this fantastic selection of UI style guides…

Inspirational UI Style Guides

Crunch Time Style Guide by Brian Athey
Crunch Time Style Guide by Brian Athey

NRMA Style Guide by Nomad Agency
NRMA Style Guide by Nomad Agency

Ui Style App by Nick Zhukov
Ui Style App by Nick Zhukov

Style Tile by Facundo Gonzalez
Style Tile by Facundo Gonzalez

Reimagining Codecademy by Manuel Lima
Reimagining Codecademy by Manuel Lima

UI Style Guide by Greg Dlubacz
UI Style Guide by Greg Dlubacz

Finalising a Style Guide by Luke Taylor
Finalising a Style Guide by Luke Taylor

Airbnb UI Toolkit by Derek Bradley
Airbnb UI Toolkit by Derek Bradley

Visual Style Application by Nick Zhukov
Visual Style Application by Nick Zhukov

UI Style Guide by Alex Gilev
UI Style Guide by Alex Gilev

App Style Guide by Marcelo Pérez
App Style Guide by Marcelo Pérez

Style Guide Mania by Bill S Kenney
Style Guide Mania by Bill S Kenney

Medium.com Ui Style Guide by Teehan+Lax
Medium.com Ui Style Guide by Teehan+Lax

Product Style Guide &Visual Guidelines by Salesforce1
Salesforce1 Product Style Guide &Visual Guidelines


The post Inspirational Examples of UI Style Guides appeared first on Speckyboy Web Design Magazine.


Speckyboy Web Design Magazine

Excellent Examples of Sign Up Forms That Impress Your Customers Right From The Start

Although these forms are seen as less important details, they should be taken seriously. There are many businesses which don’t pay attention to this form and just throw something on their website that is supposed to be filled out, irrespective of its design. But without an increased number of subscribers a business couldn’t become a thriving business.

Excellent Examples of Sign Up Forms That Impress Your Customers Right From The Start

The truth is that sign-up forms come in so many styles that is very difficult to know which is the right choice. And yes: usually, they include a few form fields such as “email”, “password” and “repeat password”. So, is there something important to design here? There are just 3 form fields! Will they scare people?

Well, in some cases this really happens and data extracted from Google Analytics shows this is true. And of course, they’re not scared by forms, but by being spammed. Or, they’re reluctant to wasting time if the form is boring, too complicated and too long. A sign-up form should be catchy, memorable, remind the user that he is important and the reason why he uses the website.

How to create top notch and effective sign-up forms

Sign-up forms should look great, but they also need to be functional. Although there is no particular recipe for designing effective web forms, there are some general ideas that could be very helpful.

First of all, it should not take long for users to find the form. So, ensure that it’s visible. Offering the answer to the above mentioned questions creates trust and realistic expectations.

Some of these forms are placed in a corner of the website or on the welcome screen. In these cases, a sign-up form is just an instantly forgotten detail. One of the best things would be to place it on the top of every page on the website.

If there are some special offers, include a brief statement that informs users about them. Adding only those necessary fields and asking only what is really important usually makes people fill in a sign-up form easier and faster.

Designing clean, beautiful and effective sign-up forms involves a lot of creativity from designers. Building these forms in a very unique way attracts visitors and increases chances to fill out. Therefore, a memorable design should be considered.

Nonetheless, “memorable” doesn’t mean fancy or complicated. Even a clean and airy design can be impressive. The most important thing is to offer a different vibe to a sign-up form. It can feature big buttons, images, smaller or bigger fields, instructions and anything else that could be useful. The form layout is of major importance as well, so the button size should be aligned perfectly with the form fields.

Check out some examples of websites with creative and effective sign-up forms!

TestFlight has a simple, but effective sign-up form, with well aligned fields, including the terms of use and privacy policy.

Excellent Sign Up Forms - TestFlight
Website link: TestFlight

The form on the Barack Obama website is another great example of simple and very short form.

Excellent Sign Up Forms - Barack Obama
Website link: Barack Obama

Visitors already know that they have to fill out a sign-up form. Once they get at this point, there should be no distractions to keep them from accomplishing his task. Plus, they want what is on the unseen side of a form, so completing forms should be a breeze. In addition, the tone should be conversational, friendly and enticing. Yahoo sign up form is a great example as it requires only what is really necessary. The fields are perfectly aligned, your password is shown, there are no directions and it also includes the terms of service and privacy policy.

Excellent Sign Up Forms - Yahoo
Website link: Yahoo

Winning the trust of your visitors is essential. Usually, they don’t give their email IDs because they could be spammed. Under such circumstances, the best thing would be to add a statement that says “This website never shares your personal information with a third party”. Thus, people are reassured that their email IDs stay confidential and safe. Catalog Choice emphasizes that the privacy of personal information is protected. Other benefits are also mentioned on the left side of the form.

Excellent Sign Up Forms - Catalog Choice
Website link: Catalog Choice

Another way to create trust is by telling visitors about the frequency of the emails and by giving a sample of the type of content they will receive. People usually are reluctant to the unknown and they also don’t want to waste time reading less useful information, so offering just a small glimpse of what they will receive can prevent this problem. AVANTI does that. Their sign up form is entitled “Sign up for promotions”, so they inform you that by signing up, you will receive promotions, specials and news about their events at AVANTI.

Excellent Sign Up Forms - AVANTI
Website link: AVANTI

Calls to action incorporated on the sign-up forms add engagement and interaction. “Sign up” or “subscribe”? At the first glance, this is just a detail without any importance. But it might not be like that. “Subscribe” might sound too salesy. The word “subscribe” can send a subliminal message that makes people think they have to pay for something. Thus, “sign up” would be a wiser choice. “Start here” is also less used and it can also be great to use as well as “Start here!”.

Or, the call to action may describe what users can get by submitting the form. For example, providing an incentive is a great tip to make visitors sign up. It can be a free download, ebook or a free trial. InstantLoop uses beautiful colors and its logo design is very pretty. The call to action button is surrounded by some white space that enhances it. By “Join now”, users understand very well right from the start what to expect.

Excellent Sign Up Forms - InstantLoop
Website link: InstantLoop

LiveResto features a call to action button that tells you exactly what you’ll get.

Excellent Sign Up Forms - LiveResto
Website link: LiveResto

Letting people know about password length or format before submitting saves time. Generally, this kind of information emerges after users type in their password and it is too short or doesn’t include a number. Github seems to know that seeing error messages repeatedly is annoying. That is why they added some specifications for the password on their sign up form.

Excellent Sign Up Forms - Github
Website link: Github

The more sensitive info should not be required at first as people will become suspicious and will leave the website. Facebook sign-up form is a great example. The date of birth is the last info that is required and under it, there’s a short explanation: “Why do I need to provide my date of birth?”.

Excellent Sign Up Forms - Facebook
Website link: Facebook

Red buttons on sign-up forms have been used for a long time and at present, they are quite controversial. Nonetheless, testing is the best way to tell which color is right to choose for the sign-up button. That’s what GSM did!

Targeted forms increase the chances to be filled in. Thus, adapting to the specific needs of people improves the relationship with them on long-term. Jabong is a great example of sign up targeted forms. When filling out their form, visitors have to choose their gender.

Excellent Sign Up Forms - Jabong
Website link: Jabong

Simplify the form to prevent abandonment. The services or products provided by a business may be great, but if people don’t feel motivated to fill in the form, they will just leave the website page. Progressive profiling is another excellent solution to reduce the number of form fields. It means that a user won’t have to fill in 10 mandatory fields at once, but only 3 or 4 and then use other forms to get the additional pieces of information needed. Hubspot explains the process in details and tells you how to create this type of forms.

Great copy is also important. If emotional, smart and enticing copy is used for a sign-up form, chances are that more people will fill it out. Smart copy can also indicate that it takes just 2 minutes to fill it in. Tumblr features on its sign up form two simple, but enticing sentences: “Follow the blogs you’ve been hearing about. Share the things you love”. Microcopy is also beneficial. Microcopy means brief pieces of info that answer vital questions when filling out such a form. It answers questions such as “is this a free ebook?” or “will I get a weekly email if I sign up?” and makes a user feel more comfortable.

Excellent Sign Up Forms - Tumblr
Website link: Tumblr

Adding social media buttons is an extra piece of proof that the service is ok and safe. Podio adds several social media buttons such as Facebook, Live, GoToMeeting and Google. On the right side they also mention the main advantage and entice you to invite other co-workers. The headline “Good Decision” manages to build a positive impression related to the entire signing in process.

Excellent Sign Up Forms - Podio
Website link: Podio

Mentioning the number of subscribers builds trust and professionalism. Basecamp mentions that it has helped over 285,000 companies finish more than 2,000,000 projects.

Excellent Sign Up Forms - Basecamp
Website link: Basecamp

Showing the benefits of the form and using touchy, emotional language leads to a more personal connection and reliability. Mint.com is a great example. On the right side of the form they have mentioned some bullet points enhancing the reasons why they’ll love Mint.com.

Excellent Sign Up Forms - Mint.com
Website link: Mint.com

Using Captcha may make user experience more difficult and also decreases conversions. Nonetheless, if you still believe that it would be extremely useful, test and see what happens. Then, you will know for sure which option is appropriate. To ensure protection against spam, Virb asks people to select the word “beldon”.

Excellent Sign Up Forms - Virb
Website link: Virb

The header of a form is also important. It should feature a larger font size than other text labels incorporated in the form. Some bullet points are also helpful as they can support and explain the main message better. Shutterfly sign up form has an enticing header. It’s visible and clearly shows what you will get.

Excellent Sign Up Forms - Shutterfly
Website link: Shutterfly

A sign-up form over a dynamic background with many images adds interactivity and grabs attention right from the start. Vimeo is a good example. The form appears right when you enter the site, but the form is designed in such a way that is still visible.

Excellent Sign Up Forms - Vimeo
Website link: Vimeo

If many details are required, creating a longer sign-up form is not the right solution. The user will get tired very soon and abandon it. In this case, the most suitable solution would be to provide a clue by showing the following steps. Another tip is to make the form look smaller even if they have to fill out the same information and the same number of fields.

The above mentioned websites are a great source of inspiration. And of course there are many other great examples of websites with effective and creative sign-up forms. It’s difficult to know which tips to choose and apply because you never know that to expect. And if creating sign-up forms can sometimes take too long, there are web form builders that require no coding. Thus, web designers save time and simplify their work. All in all, testing is crucial. As there is no precise recipe, testing will prevent many problems from happening and it will show you what should be improved. So test and test again and ask yourself: would you fill out that sign-up form?

Visit us at InstantShift.com

PSD to HTML


InstantShift