11 Examples of How Ghost Buttons are Used Effectively

As part of the design trends as early of 2014, ghost buttons are making the most impact among both designers and online visitors.

This type of buttons is described as “empty” and “hollow.” Ghost buttons are bordered by the thin line with plain text (in sans serif) inside them to encourage visitors to click the button.

The origins of ghost buttons are unclear, but can nonetheless be traced back from a Tumblr blog websitewithghostbuttons.tumblr.com.

The strange thing about these buttons is that, even though they are transparent (like a ghost) and may seem like they will go unnoticed by visitors, ghost buttons prove to be effective calls to action. Due to their minimalist appearance, ghost buttons integrate themselves seamlessly into the design, which in turn grab the attention of people.

As a designer, you’d want to maximize the impact of your website to your target audience by providing the best and most aesthetically pleasing elements in your design. If you are interested in using ghost buttons to make the most out of your website design, consider the examples featured below as inspiration.

1. nois3

we are nois3    digital design thinking

Why this is effective: Whereas most websites scrolled vertically, nois3’s homepage above the fold breaks the mold by placing the ghost button on the right side of the page. This technique encourages visitors to look at the page from left to right to get to the call to action.

2. Themes Kingdom

Themes Kingdom   Premium WordPress Themes

Why this is effective: Themes Kingdom use a dynamic gallery to showcase thousands of WordPress themes available for download on their site. For each gallery slide, there are two ghost buttons – one that allows visitors to browse the specific category and another that lets you view all the themes. This is a great use of ghost buttons to compartmentalize the content found in the website.

3. VERBAL+VISUAL

Welcome   Verbal Visual

Why this is effective: The background image applies a dark filter that allows the light text and ghost button to rise up from the design and make an impression to visitors. It also helps that the web copy says enough to explain what the service is about and entices visitors to click the button to learn more.

4. Throne Watches

Throne Watches

Why this is effective: Unlike most websites that use filter effects on their background image to put emphasis on ghost buttons, Throne Watches uses a hi-res photo of their products as background. The purpose of doing this is to let the image do the talking and minimize the web copy on your splash press.

5. jaspurnl

Jaspur.nl   development  Meppel

Why this is effective: The outline color of the button complements the background color, making the ghost button much more visible in this example. The use of spacing and placement of web elements in this minimalist website also help emphasize the ghost button in the page.

6. GUILLAUME MARQ

Guillaume MARQ   Work selection 2013 2014

Why this is effective: There are three ghost buttons on the page:  the My Resume and Contact Me buttons (found on the upper right hand corner of the page) and the Hire Me button (placed smack in the middle). From here, you can clearly see the hierarchy of buttons on the page – the most important button is found where it’s the most visible, while the less important ones are found on place on the less visible area. Also, the Menu section is scaled down to an icon on the upper left portion of the page, thus putting more emphasis on the buttons.

7. Dribbbox

Dribbbox

Why this is effective: The Live demo ghost button goes in contrast with the solid Download button. Also, the Download button has an arrow icon pointing down while the Live demo button has the right hand icon with the index finger pointing up. This gives both personality and allows visitors to identify with each on a visual level.

8. The Distance

The Distance   Creative Digital Agency

Why is this effective: The background image resembles that of a night bar – a brick wall with the name of the site in LED lights as the signage. This makes the neon-colored ghost buttons pop out from the page even more.

9. NZK

NZK   Portfolio

Why this is effective: Another website example that uses an image background with filter effects to create contrast with the white text and ghost button.

9. Richard Outram

Richard Outram   Freelance Web   UX Design  Sheffield  Yorkshire

Why this is effective: The example above shows how web copy and ghost button of a page work hand in hand together to create a seamless web experience. In particular, the first sentence of the copy takes the attention of the eyes up to the text. The icon on the ghost button, an arrow pointing down, which indicates that people should scroll down the page to see the site owner’s services.

10. Iuvo

Iuvo   UX  UI  Drupal  Design   Development

Why this is effective: The ghost buttons are accompanied by large icons to describe which page visitors will be brought upon clicking on any of the buttons. This way, the icons serve as visual associations to the buttons.

11. HARBR

HARBR   Digital Creative Company   St. Petersburg  FL

Why this is effective: Another great example of concise but highly effective web copywriting that seamlessly leads visitors down to the page’s ghost button. The use of different font faces help in emphasizing the message of the splash page.

Key takeaways

  • The placement or location of the ghost button on your web page plays a crucial part to its effectiveness. While placing the button in the middle is the most logical choice since this is the position that is most visible to visitors, you may need to play around with the different places where the ghost button should appear to achieve the desired effect.
  • The use of space has an effect on how ghost buttons can be seen by your visitors. Since this type of buttons are hollow, you need to strategically place them at a location on your page that is barren or not disrupted by your background image.
  • While the use of ghost buttons help in giving your website a current feel, it’s not for everyone. It depends on different factors mentioned above to determine whether or not this type of button is appropriate for your site.

More on ghost buttons:

Best Online Courses for Teaching Yourself New Design Skills

Win an Annual Subscription: PixelKit Premium UI Kits and Design Resources

The post 11 Examples of How Ghost Buttons are Used Effectively appeared first on SpyreStudios.


SpyreStudios

FacebookTwitterGoogle+LinkedInEmailPinterest

The Tower of Babel – Shop of the Day No.67

The Tower of Babel – Shop of the Day No.67

We’re climbing up the Tower! To Greenwich today.  This one combines 2 of my favourites – bike shop and the sub genre of shop signs with missing letters.

228 Trafalgar Road, London, SE10 9ER

08_SE10_P4100001b

 

©Barnaby Barford 2014

Blog

FacebookTwitterGoogle+LinkedInEmailPinterest

The Face of Litter: DNA Powered Deterrents

Here’s a really interesting piece of work from Hong Kong, it’s called The Face Of Litter, and is almost a social experiment, taking rubbish samples from across the city, and extracting human DNA from them, before running that DNA data through systems to re-construct human faces, the actual ‘Faces of Litter’… A campaign that aims […]


Digital Buzz Blog

FacebookTwitterGoogle+LinkedInEmailPinterest

The Priority+ Navigation Pattern

The idea is: show as many navigation items as will fit horizontally with a UI toggle to show the rest. I like the idea. Why hide everything behind a toggle if there is room to expose the most important links? How it looks and how it is implemented could vary. Let’s look at some examples!

According to this Brad Frost post, this pattern was coined by Michael Scharnagl, and this is the visual demo:

The pattern made it into Brad’s Responsive Patterns:

See the Pen Priority+ Navigation by Brad Frost (@bradfrost) on CodePen.

In that demo, the navigation jumps from either showing all the links, or showing just three with a “More” link.

The whole idea for this post came from a little thought I had where I wondered if there was a simple CSS way to have navigation items “drop off” the edge only as there was room, disappearing behind a menu toggle. My idea was to make the navigation of a fixed height with hidden overflow and wrap them. So as a navigation item wrapped, it would visually disappear. Here’s that concept:

See the Pen Drop Away Nav by Chris Coyier (@chriscoyier) on CodePen.

The toggle in this case is a three line menu navicon, but it could say “More” or be a “+” or whatever easily. It’s also triggered with JavaScript, but could easily be JavaScript-free by using the checkbox hack.

The only thing that I don’t love about that technique is the fixed height. That’s always a warning flag in CSS. When text is involved, it ends up being a bit of a magic number. That is subsided a bit by the fact that you could set it in em or rem so it increases as text increases. But still.

An alternative, if you’re OK with even more JavaScript, would be to sum the widths of each navigation element and compare to the width available. If the sum is too high, hide menu items behind the toggle until the rest fit.

Ben Callahan showed me some examples in the wild. Here’s on at NCSBN.org:

And Wonderful Machine:

Luke Jacksonn made a demo he calls the “Greedy Navigaton”. Interesting in how it knows how many navigation items are hidden.

See the Pen Greedy Navigation by lukejacksonn (@lukejacksonn) on CodePen.

AWS implements the pattern as well, as implemented by Tom Horton:

John Oxton King designed an interesting variation on the pattern he called the “Infinite horizontal navigation”:

There is some sentiment that The Guardian may have been the first example of this out there. See:

Use it? Love it? Hate it?


The Priority+ Navigation Pattern is a post from CSS-Tricks

CSS-Tricks

FacebookTwitterGoogle+LinkedInEmailPinterest

Building the DeepZoom: Concept to Creation

Screenshot of the Explore the Scroll

The V&A has a wealth of creative talent within it’s walls, one of these areas is within the artists in residency program. Last month we said goodbye to Liam O’Connor, who spent the last year as our drawing artist in resident, specifically working on the Exhibition Road Building Project.

Towards the end of Liam’s residency the Digital Media team were invited to his studio to have a look at the work he had produced with the aim of building an online retrospective of his year with us. Richard, Luca, Simon and I were looking at umbrellas hung from walls, magnifying glasses dangling from the ceiling and many many models of hands made out of concrete. Despite all of this, the thing that drew the eye was a 12 metre scroll covered in pencil marks. At the time it had been fully unrolled and was taped around the walls of the studio.

Liam hangs the scroll

Liam fully unrolls the scroll in his studio towards the end of his residency.

While we were with Liam, he was explained to us that the scroll captured everything that he was looking at while on the building site over the last year. It captured people and process over time, and these drawings were then used as a launchpad for different ideas when he was back in the studio. The scroll was not just documentation of the building site over the last year, but of Liam’s time in the V&A. Liam had used the scroll to capture ideas, we want to use the scroll as a tool for showing and explaining these ideas, and showing the progression over the year.

The pitch and content capturing

The idea that we pitched was to create an interactive version of Liam’s scroll, that allowed visitors to zoom right into the details of the drawing, but then to allow Liam to talk about the key areas of the scroll and the ideas that were sparked from it. One of the features from The Museum of Savage Beauty that we had really liked was the zooming into the details of the McQueen objects, so we started thinking around the ideas of fusing the deep zoom images with annotations on Liam’s scroll. (Richard also thought about a side-scrolling Lemmings game… but copyright).

While we were thinking through how best to capture Liam’s annotations, we realised that writing about the different key areas and projects wasn’t going to be enough. The best way to capture these ideas was the record Liam talking about the different sections. Simon, equipped with an audio recorder and a 20 page print out of the scroll, spent an afternoon with Liam, talking about the different areas and then marking where the Mp3s fitted on the scroll. The second task for Simon was to digitally stitch all the photos of the scroll together into one giant (69664x3514px) image file, no small task!

Technical build

Liam O'Connor starts the scroll in the midst of the building work

Liam O’Connor starts the scroll in the midst of the building work

Meanwhile I was looking through various JavaScript libraries that would allow the functionality that we needed. Open SeaDragon was the one we landed on, it had one of the smoothest zooms of all the libraries, had support for the annotations that we needed, and their GitHub account has been very active and the core developers being very quick at responding to questions and quandaries.

To fit the image into Open SeaDragon it first needed to be cut up into image tiles. This ensures that the browser only downloads the image tiles for the current zoom level rather than downloading the very large image. Over the top of the tiles sits the different markers at specific x,y positions. Each of these markers have content allocated to them and on click trigger a different part of Liam’s explanation.

All of the code that we have used is available on our GitHub account: DeepZoom-Images.

Making it Reusable

A key thing for the developers in the team is to try and ensure that what we are building is reusable; we don’t want to have to rebuild existing things for new projects in the future. As such the Annotated Deep Zoom Image Tool (ADZIT for short, and yes; it does need a better name) needed to be integrated with our CMS. Luca and Andrew took the lead on this, creating asset templates for the annotations and working out how to import the tiles into the CMS correctly.

With the CMS set up, it was back to Simon to work through adding each point to the scroll and uploading the content. The result can be seen on Exhibition Road drawing scroll page.

Because this is a reusable tool, we are beginning to think about how else we can use deep zooming images across the site. Candidates so far include the Ardabil Carpet, items in our tapestry gallery, the Raphael Cartoons and we are also looking at items in the upcoming Fabric of India exhibition. Any more ideas, please let us know in the comments!


PS: If you want to see the original scroll, it is currently in Gallery 20 as part of the display dedicated to the Exhibition Road Building Project. Do come in and have a look around.

Blog

FacebookTwitterGoogle+LinkedInEmailPinterest

Apple Watch Reveals 3x New Ads

With everyone wondering if they should be ordering Apple’s WATCH this week, I thought I’d post up their latest ads… 3x 60 second pieces showcasing the watch in action, no dialogue, just feature use in the wild as part of supposedly a typical daily life. Staged of course, but I like the basic use cases. […]


Digital Buzz Blog

FacebookTwitterGoogle+LinkedInEmailPinterest

Google Maps: Explore Loch Ness In Street View

It’s here. The Loch Ness In Street View. And with it, the list of things you can actually do on Google Maps continues to expand with ever more functionality and innovation. This week, Google launched the mapping of Loch Ness, street-view style, that lets you search for the mythical monster both above and below water. […]


Digital Buzz Blog

FacebookTwitterGoogle+LinkedInEmailPinterest

10 Essential WordPress Plugins You Need in Your Tool-set

Yes, 2015 is just another year, but it could be the year you finally get around to making that blog or website you’ve been meaning to – for who knows how long. Forget blogging full-time or making a website that would put major companies to shame, even just starting a blog about your cats can be pretty difficult when you first start out.

Fortunately, you don’t have to worry about that anymore, since there are dozens of sites available to help make that tough first step as easy as a dip in the kiddy pool. There are a number of plugins that can make your life a little easier such as Google Analytics Dashboard, Backup WordPress, Akismet, and more. Get ready, because here are the top 10 WordPress plugins that you need in your life, starting now.

  1. Backup WordPress

WordPress › BackUpWordPress « WordPress Plugins

You might think once something is on the internet, you’ll either always regret putting it there, or never think twice about losing it. Well, that is a good mentality to have, but it’s a splendid idea to backup important things. If you do happen to be concerned about backing that website or blog up, then Backup WordPress will help solve that problem, since it will back up your entire site, and do so on a schedule fitted to your own.

  1. Akismet

akismet20-teaser

You probably aren’t starting a blog about your cats if you aren’t familiar with how much the internet loves cats. Or maybe you aren’t, and you just really, really love your cats. Either way, nobody likes spam comments or emails (except for the occasional laugh), so use Akismet to filter them out. Akismet serves as a filter that catches comments that could be spam, and then you sift through and allow only the non-spam comments to be posted. Of course, few things work 100 percent of the time, but this does a great job.

  1. Social Networks Auto-Poster

WordPress › NextScripts  Social Networks Auto-Poster « WordPress Plugins

Speaking of the internet and its love for all things feline, you’ll probably want to share all those posts and updates on social media, so the whole world can know. The Social Networks Auto-Poster Plugin can be configured to automatically post to your social networks so that you don’t kill your thumbs with all that tweeting you’ll be doing.

  1. Contact Form 7

WordPress › Contact Form 7 « WordPress Plugins

A simple plugin that will allow you to customize the form and contents of contact forms is Contact Form 7. Not really useful for your cat blog, but it could prove useful for a business.

  1. Yet Another Related Posts Plugin (YARPP)

WordPress › Yet Another Related Posts Plugin  YARPP  « WordPress Plugins

Exactly like the title, this is Yet Another Related Posts Plugin. With such a title, details would be redundant. It’ll display relevant content related to the current post being written.

  1. NextGEN Gallery

Basic Thumbnail Gallery   NextGEN Gallery

One of the most popular WordPress plugins of all time, NextGEN Gallery does a great job of providing a powerful engine to upload and manage those galleries of cat images, or whatever you enjoy.

  1. WordPress SEO

yoast-seo-premium

If your site isn’t maximizing SEO, then your site isn’t going to do well. WordPress SEO can help fix that, or try to. Give the plugin a try, and see what all the hype is about.

  1. Google Analytics Dashboard

screenshot-2

Google Analytics Dashboard will help you keep track of your traffic, which can help determine just what people are coming to the site for, and what you should focus on if the numbers aren’t to your liking.

  1. Simple Share Buttons Adder

SimpleShareButtonsAdder

As the name implies, this is a simple plugin that adds share buttons to all of your pages and posts, without hassle. Truly, a Simple Share Buttons Adder.

  1. MailPoet Newsletter

WordPress › MailPoet Newsletters « WordPress Plugins

Newsletter are important parts of any real venture, and MailPoet Newsletter can help you with that. Of course, there are plenty of ways to grow that mailing list, too.

From utilizing SEO to implementing sharing buttons on your page, there’s truly a plugin for everything. Which ones will you choose to maximize your blog or website?

The post 10 Essential WordPress Plugins You Need in Your Tool-set appeared first on SpyreStudios.


SpyreStudios

FacebookTwitterGoogle+LinkedInEmailPinterest

Techniques for Building Name Recognition as a Designer

Breaking into the design world is no simple task. It requires years of practice along with arduous struggles, overcoming obstacles, and of course meeting great people. But this whole process can be eased slightly by creating a recognizable brand around your name.

Freelance design is a competitive marketplace and you’ll want to stand out to be recognized as a key player. There are many ways to do this but it’s best to just be who you are. Show people that you’re a real person who’s interesting, insightful, and well informed. The following tips should help all designers build a name for themselves from the print world to the digital superhighway.

Assemble Case Studies

The idea behind a case study is to show people a behind-the-scenes glimpse at your creative process. Potential clients love to see your process because it demonstrates how you’d normally tackle a project from start to finish.

Case studies are just write-ups that include photos and screenshots throughout a project’s creative process. You might include sketches, prototypes, icons/logos, original designs, and of course the finished piece. Also be sure to write details that visitors may find interesting. Talk about the challenges you faced and try explaining some ideas which were tossed out.

Related post: Case Study on Building for Mobile First

Very few freelance designers take the time to write in-depth case studies about their work. If you take the time to do so it will help you stand out from the masses of other creative professionals. You’ll also be seen as a more competent designer who has a tighter grasp of explaining how the design process unfolds from start to finish.

Try to put together case studies from actual project work when applicable. Sometimes clients will request an NDA saying that you cannot share certain bits of information. In these cases it may be best to instead share your experience developing a personal project.

Social Portfolio Sites

While it’s highly recommended that you have your own personal online portfolio, there is a lot to glean from also using social media. I do not mean websites like Twitter or Facebook(although they’re useful as well).

Along with your own personal website it’s a good idea to create social profiles on portfolio websites. Consider resources like Behance or Dribbble which both focus on the design community. Professionals can share their work online and include other details like clientel, sketches, and extra shots.

In fact these networks are great for minor case studies. It’s a good idea to keep your own portfolio up-to-date and relevant with your current skillset. But these social profile communities behave more like an archive of your work over months and even years.

behance homepage design

Behance is completely free to signup and start posting your work, however Dribbble is an invite-only network. You’ll need to find someone who has an invitation to let you into the site. Otherwise you can sign up as a prospective user who can be drafted by others in time.

dribbble homepage design network

Generally speaking these are both fantastic resources for modern designers. When people Google search your name these profiles will typically appear on the first page. This gives your name much more credibility and reassures potential clients that you are skilled at what you do.

Share Design Freebies

There’s no doubt that everyone loves free stuff. Open source code is a popular avenue for developers to get their name out and start meeting people. The design world is very similar and talent will naturally rise to the top.

If you have the time there’s nothing better than creating a series of free PSD files for Photoshop users. These could be made for other designers, creative directors, or even just people who want to start learning about Photoshop. 365PSD is a heavily trafficked gallery which can be perfect for your first couple of freebie releases.

365psd freebies gallery

You should also consider releasing freebies related to design projects. Adobe Illustrator is another popular program which can be used for vector shapes and custom icons. If you have the skills why not release a free vector iconset? Lots of designers release their stuff online and it’s a great way to draw attention to yourself.

Other resources may includes brushes, font faces, or even full website mockups. Interface design is a skill which requires a panoply of artistic talents. By releasing fully-fledged mockup PSDs you can prove your skillset while also helping the design community.

Periodic Guest Writing

Lots of online design blogs have request forms offering to bring on guest writers. Some websites even pay writers for their work, but writing for free can be worthwhile if it’s on a popular blog or magazine.

It never hurts to send out an email and see who may be interested in your work. Writing about design can get your name out there and showcase your knowledge at the same time. It helps to build connections with other webmasters and designers in the same field.

Unfortunately this doesn’t work well for designers who are not natural writers. In this scenario you might instead try launching your own custom blog. Medium is a free blogging platform where many creatives write to share their thoughts on various subjects. It’s a great way to practice your writing skills and try to share what you know with others.

medium sample blog post

One huge benefit to writing online is the author biography section. Most blog articles will include a small “about the author” section which details the author’s name, experience, and links to their website(s). If you write a great piece then people should continue reading it for years to come. That author bio will act as a passive marketing tool for yourself and your design work.

While design is often seen as a vast landscape, the world of freelance design is much smaller than you might imagine. These tips are meant for building your name online but don’t think you can stop there. Try to attend conferences or meetups with other designers. Offer to do work for small agencies or companies so you can build referrals from top tier employers.

Name recognition is only partially tied to skillset. Of course you need to actually be good at design to turn some heads but that isn’t the only thing people care about. You should also be somebody fun that people love to work with. Demonstrate your skill and your personality by building a reputation for yourself both online and in the real world.

The post Techniques for Building Name Recognition as a Designer appeared first on SpyreStudios.


SpyreStudios

FacebookTwitterGoogle+LinkedInEmailPinterest

Get In Touch!

Or save my details for later...