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. 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 […]

  2. 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: 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.

  3. 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
  4. 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.

  5. 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!