Tag Archives: Designer How-to’s

How to cook an infographic that looks and tastes great!

Infographics aren’t new in the web. But since the launch of various data-driven websites such as Fivethirtyeight and the Vox, they are becoming more popular.

However, this time the viewers of infographics are not limited to desktops, but mobiles and tablets as well. In order to design an infographic for these channels, using HTML5 is the way to go. If you are making those graphics for a client or co-worker, it’s likely the way they will ask you to do so.

Here are the three ways that Dezine Geek practices for making an HTML5 infographic break through the clutter.

Before You Serve, See What Happens If You “FRIED” Your Infographics


Now “FRIED” isn’t some special tech process you need to do before designing infographics, this is basically an analysis that lets you consider why you’re making an infographic in the first place.

The word “FRIED” comes from the initials of five questions that allow you to think critically before you apply latest tricks to make an interactive infographics.  

Fresh – How will your infographics design stand out from the rest?

Relevant – Is your info engaging or tells a story?

Informative – Are your facts intriguing and accurate?

Entertaining – Will your infographic draw and excite the viewers

Different –Has your infographic been done before or is it new?

Designing an infographic not only demands you to be creative but also disciplined. The “FRIED” method right here will discipline your entire strategy for making one. Asking these questions before hand will also allow you to map out your objectives and make the message of your infographics resonate with your audience. Once you have FRIED your infographic, the design will draw the reader in and the data will be easy to digest.

Let It Shake, Make It Move


Interactive infographics are trending these days. You can make yours even more appealing by introducing motion to the web graphics. For this, the Adobe Edge Animate, an HTML5 animation tool might come in handy.  This tool allows you to extend your custom infographic designs with interactivity and movement. Furthermore, it also integrates other tools and provides a bridge between design and HTML that you create for the web.

To get you started here are some really great samples and templates on the showcase page. If you want to go a level deeper and add more elements such as click & touch draggable scrubbers, here is a tutorial with examples to help you more.

You can further weave in interactivity that will leverage the latest browser updates to CSS and HTML5 and make some pretty awesome effects. Check out this blog about CSS shapes which is in its last stages of specification. Consider the evolution of the web infographic as an example.

Data Here, Data There, Data Every Where


An infographic sinks if it is without powerful data sources and the tools to illustrate them. Whether it’s your own research or your client’s, data sources can vary. So invest some time so that you can get the hang of the topic as well as its sources.

We suggest you to head on to Quora that has a good list of publicly available datasets to give you some good raw data to play with.

You can also use some recommended infographic services such as Piktochart & infogr.am that provide HTML 5 products for collecting and evaluating your data and building visual graphs.


The aforementioned points are the key to a successful and highly shareable infographics on any topic that you have picked. Once you have got your stats right, but you feel stuck in making illustrations for your infographic design- you can always find tremendous websites, offering free illustrations and even a pen & brush platform where you can make your own. All in all, you can always contact Dezine Geek in-case you need any help regarding creative illustrations, or a totally unique infographic design.

Need a unique “never-been-done-before” kinda infographic !we can help you! 

How to be a Design Geek (Dezine Geeks best design practices)

A good design isn’t always just about good looks. It should also perform with same efficacy, should convert and also keep on astonishing web visitors which is one of its main purposes. At the same time a good design should also be innovative or it might just get the job done; says Dezine Geek.

Inspired by Dezine Geek, I have always kept a close look on their habits and operations while they are busy doing, what they do best; Web Designing & Development. I have long kept a list of what I thought should be things to look upon while designing web application, however what I was missing was sequence.

Upon my request to know the best practices while designing or being a designer, I was bestowed by an ever expanding list of tidbits by Dezine Geek, which I believe Web Designers & Developers out there can find very useful.

So do you want to rock your Design the Dezine Geek way, read on below to see what are the best practices of Dezine Geek while designing & hand-coding websites.

Never Claim To Be A Guru, Always Learn & Improvise


Even if you have been working as a designer for ages and that your personal portfolio consists of some great master pieces, you should still never call yourself an expert, let alone a Guru. Calling yourself a “Design Rockstar” or a “Development Guru” concludes your online sales pitch with great many doubts. And if you are posing to be one and something goes wrong with your work assigned by a client, this can get fingers pointing at your image as a designer.

Let people recognize your worth through your work and let the quality of your design speak for itself. A well-presented portfolio can be your best arsenal but then again if you are a learner, hopping and excelling into new technologies and improvising your skillset, will always get you appreciation from clientele looking to acquire your services.

Don’t Hesitate To Innovate, Be Creative & (Borrow Ideas)


Every great design is made through innovation, but every innovation at some point has a borrowed idea, a fascination or idolization of something as great. Although, every great designer isn’t great right from the beginning, it’s just their innovative skills getting toned up with time- But this one secret is what very few of them accept.

Innovating something new, equally or more greater than its predecessor idea or fascination is a talent. In other words, this is called creativity. In web designing, creativity is the holy grail of innovation. It is an art that takes the very best of designers into procuring something new and far more astonishing while abstaining from plagiarism.

Even Steve Jobs, Founder of Tech Giant, Apple accepts the fact as:

“Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while”.

Be A Critique But Appreciate A Quality Design (See Point 2)


If you see an exceptionally great web design, or let’s say a website, don’t just start shredding it to find any possible design loop holes or development bugs. Appreciate its details, bookmark it and take notes on anything new you learn from that design.

No doubt, it’s tempting to contemplate, what you could have done, or how you would have toned the details given the opportunity to design the same website. But, taking notes on all the innovative features of the website is even more useful. The next day if you get to make a website of same sort, you can churn your creativity faster and as mentioned above- with the notes in hand, you can make websites even more wonderful.

Maintain Your Library, Don’t Just Bookmark, Save Screen Shots As Well


Your creativity, innovative skills and design ideas aren’t going to spark on their own, or come as revelations, so research more and more to get a grip on what’s in trend and what you can do make something trending.

Researching, studying designs from all over the alcove and stashing ideas are food for thought for every designer and keeps their creativity flowing. So maintain a library of every amazing design and artsy thing you see on the web. Bookmark websites you seem to like and want to come back to for ideas and more researching. You can also save screenshots which is useful especially if you are designing for cross gadget compatibility.

Don’t miss out freebies, they are Free!!


Sometimes an intrinsic detail to your design piece can come from the common most examples on the web or what if you could use that same common example to make a rare master piece. So never miss out freebies on the web, thinking that they are common and could be in possession of every other designer or developer out there.

Whether it’s a free theme, a template, free subscriber images from icon finder or iStock, illustrations or even just wallpapers- bag them all and as said previously, make a library. Down the road, you’ll be amazed to have new ideas and designer intuitions just from a free image you saw and collected.