Ghost buttons and Other Web Design Trends


by on July 23, 2014

Ghost buttons and Other Web Design Trends


Well… just like V-necks and craft beers the trends of web design, particularly stylish new sites ends up catching up with us

For me, some of these elements and styles have grown on me and started to saturate the work I’m doing currently. I’m going to talk about what ghost buttons are, when or if to use them, Alternative mobile menu icons such as a plus sign instead of that classic hamburger looking icon that took everybody 3 years to consider a staple of the internet, and full-width static images on the front pages of websites for the above the fold promotion rather than the fancy sliders of 2010 and back.

Ghost buttons and other recent web design trends

Ghost Buttons

First, ghost buttons are those outlined buttons, often with a slight radius around the edges, but sometimes completely square with no fill color, and simple fonts. These buttons are being used all around the web today, often quite successfully by some of the most savvy designers. I’m going to have to say at this current moment I give them 5/5 big approving designer fist-pumps. They serve a purpose, and seem to really carry weight and meaning now, though they may have been mildly confusing at first. Going back between the whole discussion of ‘Flat vs. Skeuomorphic’ design, it may have been said that they didn’t have enough affordance (or indicators of what they would do) but being that they exist in so many places now I believe they can be used without confusing anyone now. The rules are so fluid now, what was once perhaps not advisable to do 2 years ago, might make a lot of sense now because enough people risked it when it was iffy, that it could now be considered a convention.

Alternative Mobile Menu Icons, trends 2014

Alternative mobile menu icons

From discussions I’ve heard, the shift to start including more alternative mobile menu icons was driven partly be the ‘hamburger’ or three bar mobile menu icon being seen as not clear. We want people to see and interact with our menu, let’s make it more prominent and maybe give it a more universal symbol.

You see plus signs that transform into X’s when the user opens them, or a mildly more designed version of the hamburger menu, the club sandwich (pictured above.) I think that the problem with the new styles is only in that I quite like the visual look of the hamburger menu, and it starts to become part of the infrastructure, an obvious little cornerstone, rather than a design element, and to me that’s a good design.

I’m of the mind that design doesn’t need to stand out in many ways. You can have beautiful full width photography that grabs your attention and is complemented by delicious subtle typography that is high contrast, and well-done copywriting that accentuates the brand and gives a compelling voice that resonates with person viewing the site, and a strong call to action that invites them to take whatever action the design team has worked out with the business that they need to take, but design doesn’t need to stand out. Thus I don’t think we need to have a highly stylized mobile menu icon, but then again I believe for certain projects, it might make a lot of sense. For instance, when the design for some reason is having the attention called to it a bit, in the case of a design studio.

Full width photography in place of a slider

What a nice segue. Full width photography in place of a slider snuck in ever so slightly as if it was just a familiar cousin of whatever we did before those (happy-go-lucky friendly, or insidious depending on how you look at it) sliders came to infest the internet. So when I was learning web design, I think having a slider was kind of prestigious for some reason. Yes, at that time your barber shop would have one and the fancy design studio still had one and I wanted one too. It was driven into the ground like a great song that top 40 radio gets ahold of. Poorly done sliders were on every WordPress theme and organizations crammed them into every nook and cranny as a way to keep stakeholders happy.

The good part is, is that the alternative is very attractive. Big full-width photos give a viewer the necessary invitation inward, and captivate you when done well. The issue with sliders from a less subjective standpoint is that they actually can decrease conversion rates. Research done on the subject seems to suggest that people visiting your website are likely to view sliders as an ‘ad’ and are less likely to interact with them. You don’t necessarily need to abandon them entirely, but surely be careful. I am working on a website now and am using a slider (slick slider) on the design but I’ve made it full width and in many ways it feels more just like a full width image.

Another tip to make these more successful is to give the person using the website as much control over them as possible, even so far as perhaps not making it scroll automatically. To have a slider scroll automatically increases a viewer sense that it’s not an element they control, and more of just an advertisement. If you do have it scroll automatically, make it slow, no one wants to feel sick at a speedy slider.

In essence the fringe ideas of design today will move into the common design language of tomorrow and the popular ideas of today, such as those above, will fall by the wayside.

The seasons of design come and go and perhaps cycle around again. Put on suntan lotion, but get your coat ready. If you need Minneapolis, St.Louis Park, Hopkins or Plymouth Web Design let me know, by contacting me below, I’m here for you! Thank you for reading.

Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of

Ready to get started?

Get a free consultation now