Simone is a graphic designer who loves technology, design and who is always looking for new trends and innovative concepts. He also likes to give tips and to share his knowledge with other tech-lovers.
The first half of 2014 has come and gone, but it leaves us with a handful of new design trends which will likely come to characterize the whole year. Among these 2014 signatures, the rise of the so called “Ghost Button” is one that has caught my eye.
So, exactly what is a ‘Ghost Button’?
“Ghost buttons” are those transparent and empty buttons that have a basic shape form, such as a rectangular or perhaps squared. They are generally bordered by a very thin line, while the internal section consists of just text printed in a light, sans-serif font.
These buttons, are also sometimes referred to as “empty” of “hollow” buttons, and tend to be bigger than the standard color-filled buttons.
The attribute “ghost” is due to the fact that these buttons are transparent like phantoms but, at the same time, they immediately grab the user attention, almost in the way ghost stories can grab your interest, with both mystery and scepticism.
Indeed a beautiful hollow button performs a pretty neat magic trick in both merging itself seamlessly within a site, but, if set in a proper background and position, it can very successfully attract the users’ eyes.
The term ‘ghost button’ seems to have been coined by a “Tumblr page (websiteswithghostbuttons.tumblr.com)”, which started documenting examples earlier this year.
Although ghost buttons are present on a wide variety of websites, they aren’t appropriate for all sites. They are best suited to websites and applications, that have a minimal or flat user interface or those which use a full-screen photo background.
**Origins of the Ghost **
Though it is difficult to identify a single origin for ghost buttons, you can discern a handful of important seeds.
Head-Up Displays (Wikipedia: HUDs) have been used in military aircraft since the late 1960’s, but only really entered the popular culture in recent years via car dashboards, movies and video games.
As HUD data is projected on top your viewport, this data needs to be presented in a mostly transparent, lightweight style so as not to obscure the user’s view. Although not strictly buttons, you’ll often find HUD interface elements are clear, text-based units enclosed by thin borders.
A high profile example has been the visualizations created for Ironman’s HUD in the movies. I suspect they were early inspirations for the ghost button.
The arrival of the Apple’s iOS 7 widely contributed to the adoption of the empty buttons. Although not universally loved, the iOS user interface is choc full of minimal buttons and even icons delimited by very thin lines of grey or blue ones.
For most of the admittedly short history of web development, the only platform that we could rely on for graphic purposes was the desktop computer.
I probably don’t have to tell you, as SitPoint readers that, thanks to the never ending processes of innovation, there are now many other alternatives. Smartphones and tablets, have moved beyond the realm of mere toy gadgets, and can offer production-quality tools to help us in our work as designers.
The two most important operating systems for these devices are surely Apple’s iOS and the Google’s Android.
The later, thanks to its open source nature and its flexibility, has became the world’s most widespread operating system, acccountinf for more than 1 billion active monthly users.
Thanks to its wild popularity, it boasts an amost ridiculously vibrant app ecosystem, including many dozens of apps brilliantly suited to help designers and developers.
However, choice isn’t always all it’s cracked up to to be.
This colossal range of apps means it takes a lot of time and experience to sift through the oceans of mediocrity in search of the truly useful gems.
That’s why, in this article, we’re going to show you 5 of the best Android design apps that can improve your productivity wherever you are.
Paperless-Draw, sketch, tablet
The first app we are going to analyze is “Paperless-Draw, sketch, tablet”. With this software you have access to 6 different tools that allow you to color, sketch and to insert text annotations. Of course, you can save your works and organize them in books and, if you want to show the images you created to your friends, you can directly share them on Facebook without leaving the app.
“Paperless” gives you the opportunity to create up to three different layers and to manage the opacity of different parts of the picture.
All things considered, “Paperless” is a good application for designers but it won’t be helpful if you are looking to create great masterpieces. In my opinion, this app is more suitable to realize a first draft of your project rather than the whole work.
Adobe Photoshop is the most famous program used by designers to create new images from scratch or to edit existing photos.
However, Photoshop is not always your best option. Many people who use this software for simple purposes, don’t really need all the features that are provided. Moreover, Photoshop is very expensive: if you are just approaching the design world, spending too much money for a unique program, may not be worth it.
Luckily, there are some effective and cheap alternatives to Photoshop that can satisfy your needs.
So, let’s have a look at a few of the best possibilities.
PhotoPlus Starter Edition
Photo Plus Starter Edition is a free design tool created by Serif. It is characterized by a great intuitiveness that makes the program very easy to use. Also, it has a user interface that reminds the one of Photoshop, in this way you won’t have any problems of adaptation if you need to go from one editor to the other.
PhotoPlus SE supports different image formats, thus you are granted to import and work on a wide variety of images. Thanks to some special tools you can fix common problems, such as the detested red eyes, or you can add effects to your pictures transforming them into artworks.
Since this is a free version of the program, some functions are disabled. For example, you can’t use the Dodge and Burn tools, which are quite fundamental in photo editing.
In case you are more interested in web design rather that photo manipulation, you should know that PhotoPlus SE is chosen by some designers to create graphic elements.
Indeed, logos, banners or pieces of user interfaces can all be realized with this program even if you won’t get results comparable with Photoshop ones.
The point is that PhotoPlus SE was primary thought as a photography editor, so you don’t have the possibility to act on several important graphic parameters such as text leading or word formatting.
Despite PhotoPlus SE doesn’t have all the features of Photoshop, considering that this software can be downloaded free of charge, I think it is a great alternative to Photoshop.
Every good designer needs their own collection of trusty Photoshop brushes. These are a invaluable tool to produce fine works without losing precious time reproducing each part of the project.
You don’t have to look hard to find brushes on the web. However, the problem is in discovering those of the highest quality — those that can really help you to improve the look of your design.
I think there are two rules for choosing Photoshop brushes and filters:
- Only download filters you need: It’s tempting to download every brushes you find that looks interesting, but the reality is, the more you collect, the less you seem to actually use them.
- Avoid ‘one-trick-ponies': Like a good knife is more useful than a pizza-cutter, look for brushes that are multipurpose and versatile.
Let’s run through some of the most useful Photoshop brushes to download.
Watercolor Paint Brushes
Since watercolor as always been one of the most popular styles used in design, the first brush we are going to look at is the ‘WaterColor Paint Set’ by ‘wegraphics’.
Today’s article is going to be the first in new series called ‘Nailing the Detail’. Each week we’re going to pick a famous ‘style’ or ‘design movement’, tell you a little about it’s history and where it fits in.
Then we’re going to try to help you incorporate that look into your web design.
Today we’re starting with Bauhaus!
Let’s go back. Waaay Back..
To understand the Bauhaus movement, it helps to know a little about the time before it.
Throughout most of recorded history, every item we used — chairs, pots, hammers, fabric — was handmade, one-by-one, by a person in a shed somewhere.
While these items weren’t always beautiful, even the simplest of items was generally, at least ruggedly functional, because each had been individually crafted and considered by it’s maker.
However, by the mid-1800’s, the industrial revolution was really getting up a head of steam — literally! — and things had changed. Volume and production speed was the name of the game.
Typography is one of those strange skills — too mathematical to be pure art, but a touch too intangible to be pure science.
Our modern life is awash with text, so all front-end devs really need to have a thorough working knowledge of the “art of arranging type”.
So, let’s run through a quick-fire cheat sheet of some of the most common typography mistakes — and ways to avoid them.
Mis-judged Text Line Lengths
Many designers tend to not pay enough attention to the number of characters in an average line of their text and adversely affect the readability of the text.
Happily, this is an easy mistake to avoid, as the optimal length has long been identified.
The great Swiss typographer, Emil Ruder did a lot of work on this topic in the 1950’s.
In his seminal essay, “Typographie: A Manual of Design”, he concluded that the ‘sweet spot’ for line length was around 50 or 60 characters.[caption id="attachment_77403" align="alignright" width="179"] Shorter line lengths
slows comprehension as
the eye spends more time
tracking back to the next
His tests found readers had more difficulty tracking from one line ending to the start of the next when scanning longer, horizontally strung-out texts. In fact, readers would often have to re-read the previous line to ensure they had located the next one.
In 2006, Swiss-based Information Architect, Oliver Reichenstein, estimated 95% of all information on the web was text-based. He reasoned that therefore, web design was 95% typography. Although photojournalists, Netflix and Youtube might argue otherwise, in 2014 the vast majority of web-based communications — the article headlines, online books, tweets, social updates, forum posts and blogs […]
It’s 2014: Everyone you know has a web-ready phone, and it seems like every second person you talk to dreams of creating their own chart-topping, million-selling app. This has lead to a truly crazy proliferation of apps available across the various, different online stores. On October 2013, Apple announced their millionth app in the App […]
I come across a lot of people — often small teams ‘all-rounders’ — who use Photoshop in their job, but never really learned it. Today we’re going to make something new, but we’ll also cover off some useful foundation skills (Photoshop gurus: you’re excused). Let’s get started! So, we all know that flat design is […]
So, 2013 has come and gone, along the way ushering in as many new trends, as it has seen out. Although the concept of simplicity in design is never truly out of fashion, it has arguably assumed an even more central role in web design, as a primary method to make websites and their content […]