Elio is a freelance graphic designer and video game artist, with a passion for open source technologies and movements. He is a board member at Open Labs Albania and also official Representative at Mozilla, the company behind the Firefox web browser.

Elio's articles

  1. Treasure! More Awesome Creative Commons Resources

    A few weeks ago we covered a collection of great free design resources licensed under various Creative Commons licenses, allowing you to use them in your projects for free without or with minimal restrictions. This is a good way to save some bucks for the copious amounts of coffee needed for long work nights.

    In the following, we plan to serve up even more Creative Commons goodness, from photos, to icons and even videos. Take the time to try them out for yourself – there should be something just right for your next project.

    Mazwai

    With more advanced video backgrounds becoming a more common web design technique, the market for versatile generic video resource have been growing. The use of videos are perfect to introduce users to a specific product of yours in an easy and straightforward way, avoiding too much text and verbal explanations.

    Mazwai - Clouds

    Mazwai takes advantage of that and offers a significant collection of HD videos, perfectly fitted for website design projects. Be careful though; the site is very heavy and it might even crash your browser or stop running scripts. The videos are all licensed under a Creative Commons 3.0 BY (Attribution) license. You basically only need to give attribution (credit) when using it.

    Unsplash

    If you like Gratisography from the previous article, you will love Unsplash! Unsplash is a Tumblr Blog by Crew, which hosts a large number of high quality imagery, free for all uses (Creative Commons) and dedicated to the public domain.

    10 new images are added every 10 days, making Unsplash an invaluable resource for stock images. Follow the Unsplash twitter feed to make sure you don’t miss anything.

    It’s always great to see such outstanding quality available for the public domain, made possible by people who live by the words “sharing is caring”. We can always use more of these services.

    Pic Drome

    Pic Drome is another site, like Unsplash, which hosts free stock imagery licensed under a Creative Commons 0 license, put out for the public domain. Again you are free to use these, without any restriction. The downside is that the images are not in HD, but usually around 1024x768px, which might be a problem sometimes (quite often, frankly), but you can ask for the original photo by request.

  2. The Long Road to Google’s Material Design

    It was pretty awesome to have a car in the 70’s and 80’s. If you had a cool uncle or cousin, he might have owned a Chrysler with faux woodgrain panelling.

    Back in the early part of the century genuine wood panelling was reasonably common in car exteriors, but fell out of favour as metalworking techniques got better and cheaper.

    This fake woodgrain is a classic example of 'skeuomorphism', or the tendency for a new design to mimic the look of older design tropes — even when those tropes have no obvious functional value. Some love it, some hate it.

    Of course, skeuomorphism is not limited to physical objects — it often finds a home in our digital environments.

    In this article, we’ll skim through the recent history of the major mobile operating systems, before zooming in for a closer look at how Google’s new Material Design for Android L fits into the picture.

    Skeuomorphistic Apples: iOS

    When Steve Jobs introduced the original iPhone, the mobile OS ecosystem was in a very different state to today. The iPhone’s 3.5-inch screen was considered huge and skeptics even labelled it as overkill.

    In the context of the 2007 mobile UI landscape, the iPhone’s arrival was quite a shock. With an advanced touchscreen that allowed for the kind of lush, detailed UI that simply wasn’t possible on most competing devices, it made perfect sense to play up the rich screen to a mobile market that had grown up on ‘candy bar Nokias’ and 90’s era Blackberrys.

    That first version of iOS had complex shadows falling across 3d textures and faux-metal edges glinted in the faux-light.

    In 2007, few people knew what ‘skeuomorphism’ was – much less talked about it. They just knew they couldn’t wait to show their friends and colleagues “the cool way the pages turn like a real book on my iPhone? Z. O. M. G!“. It’s hard to remember 8 years later, but at the time everyday people — teachers, grandpas, bus drivers and nurses — were genuinely charmed that Youtube was a cute little retro TV and the calendar had leather stitching.

    Of course, like people, user interfaces rarely get simpler as they age.

    Four years later, large, touch-screened smartphones had become the norm for hundreds of millions of users around the world, and industry standards were slowly moving towards simpler UI designs.

    However Apple’s then iOS chief, Scott Forstall, was still a firm devotee of the rich, skeuomorphic interface they’d pioneered. Who wouldn’t want fake leather stitching, shiny metallic gradients, specular reflections and Marker Felt fonts for the iOS6 stock apps after all?

  3. How to Create Icons for Your Android App

    You’ve finished your great new app, it runs smoothly and you can’t wait to tell everyone about it.

    But wait, there’s something very important missing. If you are not a designer and get nightmares from staring at too many pixels, you’ve probably left working on the launch icon to the end of the process. This is perfectly fine, you wouldn’t want to waste your time if your app will never see the light of the day, right?

    We are going to have a look at creating your own launch icon for Android apps and getting them ready for use. We will also have a look at some various resources which will be helpful in the creation process.

    Preparation

    Before we begin you should check out the iconography reference guides on the Android Developers site.

  4. 2 Tools for Prototyping Mobile Apps

    “There is an app for that”

    Is the quote you’re likely to hear when asking someone for help these days. There is an app for almost anything.

    But what about the developers and designers amongst us? Is there an app for that app?

    That’s a different story…

    Historically, prototyping apps have been a pain for developers and designers. Creating app interfaces with mobile responsive technologies is not efficient and often demands thousands of lines of JavaScript code. Visually depicting touch gestures with wireframe annotations is chaotic and not intuitive. You will end up pitching your app in front of an audience with statements like “imagine if the tool bar swooshes in from the top” while waving your hands like a helicopter, desperately trying to imitate the touch gestures.

    I remember having undertaken such presentations in High School, which were great fun, however you probably want to aim a bit higher.

    The future is now

    Luckily, there are more and more tools which allow you prototyping mobile apps. Below we will have a look at some of them, what their features are, and if it’s the right tool for you to use.

    Proto.io

  5. 5 Sites For Fantastic Creative Commons Design Resources

    “You wouldn’t download a car” You might recognise this question from the compulsory anti-piracy video on many movies and other digital media. The irony? In 2014, I very well might download a car! 3D printing makes this very achievable — even trivial — if you have the necessary hardware and resources. Yet statements like this […]

  6. Bounce.JS: Create Complex CSS Animations Fast

    Javascript — a simple scripting language designed for the humble task of ‘making a web page more dynamic’ — has come a long way since 1995.

    Invented by Mozilla Co-Founder Brendan Eich, it has been steadily replacing Adobe's Flash as the web's preferred vehicle for animation, games and apps for most of the past five years.

    With the rise of JavaScript, a raft of new libraries and generators have emerged to allow developers to easy access more complex functionality. BounceJS is one of these new tools.

    Created by Joel Besada, BounceJS lets you generate smooth, elegant CSS animations with the help of a simple interface, and then preview, share and export them. It's remarkably straightforward! If you like nifty animations, give BounceJS a go.

    In the following, we will have a look at its features and animation workflow, and design a custom animation from created scratch by us.

    It should be fun, trust me!

    Interface

    Interface: Add component with presets.

    The interface of the generator is clean and minimalistic, making the creation of an animation a straightforward task.

    On the left is the component list, this is where we can add various effects to your animation chain and mix and tweak them later. It also offers a list of various animation presets which you can check out and remix.

    The Road Runner animation preset is hilarious. You got to admire the love of detail the author committed to it.

    A lot of these presets can be used as templates, so you can remix your custom animations and save some time when adding components.

    In the middle of the screen, you can find the preview of the animation. A square is the placeholder, visualizing all the movements of your animations.

    There are 3 buttons under the preview screen: Play animation, Loop Animation, and Slow motion.

    Play Animation tab

    The later is particularly useful for analyzing movements in detail.

    Every animation you create has a unique URL. You can also get this short link by clicking on: GET SHORT URL

    Disclaimer: As with most code generators, thoughtful, manually-composed code will almost always be far superior. However it will also be considerably more demanding and time consuming. I recommend not pushing Bounce too far if you're not interested in manually tweaking your code afterwards. Bounce.JS uses a lot of matrix transforms, which isn’t the optimal approach for all animation scenarios.

    I learned this the hard way while working on this animation. However it's likely your animations will less complex than this one, which is a good thing. Remember: the longer the animation timeline, the more code is generated, so don’t go crazy.

    So that’s the basics. There is nothing technically difficult about the process — the rest depends on your imagination.

  7. Firefox OS 2.0 UI and Design Features

    In the tech space there are two definitions of free. Free as in free beer, and free as in freedom.

    The latter definition is at the core of Open Source communities such as Mozilla. It was also initially the reason why Mozilla’s new mobile operating system Firefox OS was received so well. The idea of a mobile operating system fully based on web and open source technology was attractive to many. It motivated people to contribute to the project, support it and even switch from their iOS or Android smartphone to Firefox OS.

    With it’s prime focus on the low end market and developing countries, Firefox OS is gaining a solid user base and is trying to break the Apple and Google mobile duopoly. The announcement of a $25 smartphone in several markets has helped gain further interest.

    With the announcement of Firefox OS 2.0, a new chapter is set to be started, the first since the launch of the first Firefox OS smartphones, exactly 1 year ago.

    Some of the new features announced for Firefox OS 2.0 are:

    • Users can copy/paste and select items.
    • A new lock screen with a music player and scrollable notifications.
    • Find my phone feature that will help you find your phone through GPS trackers and will emit a noise when near.
    • Firefox Accounts Integration that will log you into everything with the help of just one login.
    • Creating ringtones from music.
    • Smarter typing input
    • NFC technology that will help share data with other phones and devices
    • Direct dialing within the call log
    • A new camera app
  8. 5 More Killer Firefox Addons for Designers

    If you compare the way you use your computer today with how you used it, let’s say 10 years ago, you will probably notice a big difference, even if you essentially still do the same tasks with it. Applications replace Software and Add-Ons replace Stand Alone Programs.

    It’s obvious, we are doing a majority of our work in our browser. Even designers can utilize free photoshop alternatives which are completely web based, without ever leaving their beloved browser. Extensions and Add-Ons enhance this experience also, by turning your web browser into a real hub. Mozilla Firefox is one of the browsers which can offer you very powerful assets of tools, if it’s used right.

    Whether if it’s Web Design, UX, UI, Typography or anything else; some of Mozilla’s Firefox Web Browser’s strong points lie in it’s broad selection of available add-ons. Apart from the must have add-ons as the Web Developer Toolbar by Chris Pederick , and Firebug by Joe Hewitt, there are a lot of other little tools which can make your design life a tad bit easier.

    Following is a small selection of great design add-ons for Firefox, which you probably haven’t heard of, but will appreciate getting to know now.

    Dummy Lipsum

    • Current Version: 3.0.0

    • No. of Users: 12.000 +

    • Avg. Rating: 4 stars

    • Download

    Lorem Ipsum: As web developers, we probably remember it better than any verse we might have learned at elementary school. First introduced in the 16th century, it is still useful for us today. It scans like proper text, reads naturally and doesn’t distract the reader (unless you are a latin-reading doctor or DaVinci Code super-fan, of course ).

    If you are also one of the Lipsum enthusiasts and tire of opening a Lorem Ipsum generator every time you need to insert dummy text, try out this small add-on which can be accessed very quickly in your Firefox toolbar. You can specify precisely how much text you require, and even insert HTML tags in the generated text.

  9. How to Create a Slick Infographic with Piktochart

    We all love infographics — those fascinating graphics designed to distill often complex data into a more digestible, compelling visual story.

    We encounter them on more and and more websites, and they’ve become a major weapon for everyone from designers to journalists to marketers to lobbyists to PR companies and more.

    They understand that a great infographic can not only change minds and hearts — but purchasing decisions, government policy and even election results.

    The demand for infographics has increased rapidly in recent years, with entire sites dedicated to crowd-sourcing their design. It’s a powerful medium for translating idea, while still being visually informal and in some cases, even delivering it’s message with a good dose of humour attached.

    This can lead to the reader absorbing a message they might not have paid any attention to in other mediums.

    Creating your own high quality infographics with classic design tools can be often quite time-consuming. The usual designer toolbox can be ‘over featured’ for this kind of simple visual storytelling.

    Piktochart logo

    Happily, there are now a few specialist infographics creations tools out there aimed at precisely this market. Today, we’re going to take one of them — Piktochart — for a test-drive, and see what kind of result we get.

    Piktochart.com is a tool for creating visually appealing, fully customizable, infographics, yet remains straightforward to use, even for non-designers.

    Let’s take a look at it and create our first infographic.

    Create your first infographic

    Piktochart offers a Pro pricing plan and a free plan. For now, let’s start with the free plan. This allows you to accomplish quite a lot, and you can always decide later if you would like to upgrade.

    For this test-drive, I thought we’d have some fun. I’ve set myself the challenge of producing an infographic that explains the steps you need to accomplish to become a genuine superhero!