Creating a Scalable SVG Infographic

Benedikte Vanderweeën  •  Tutorials  •  June 18, 2014
Creating a Scalable SVG Infographic

In this tutorial, I’m exploring how to make a scalable infographic in the browser using SVG as graphical format. I’m also using CSS3 animation techniques to animate most elements. The subject of the infographic is “Population growth on this planet”. Preview the finished, animated infographic here: The scalable infographic is divided into 11 parts, from...

Free jQuery Content Slider Scripts and Tutorials

Adrian  •  Resources  •  June 16, 2014
Free jQuery Content Slider Scripts and Tutorials

Maybe you’ve seen some businesses with beautifully designed websites that also have a content slider which displays their available products and services; and since then you’ve been asking yourself how it’s done? If you still haven’t found out, then lend me an ear, because here’s the answer. It’s done with jQuery. From year to year the...

Optimizing the Usability of Online Forms

Paula Borowska  •  Design, UX Design  •  June 16, 2014
Optimizing the Usability of Online Forms

Forms are the gatekeepers of the internet. They are often filled out as a starting point for one’s journey – such as signing up for an account. They are also filled out in order to get to one’s account – such as login forms. Do you ever wonder that when you compose a tweet or email you are technically filling out a form? They are everywhere and they are underrated....

Preparing Your Conference Website (And What to Include)

Nataly Birch  •  Inspiration  •  June 13, 2014
Preparing Your Conference Website (And What to Include)

Meta Refresh is the official website of a conference that is focused on the important topic of “The Construction of User Interface on the Web,” offering various workshops. Though it was successfully held, the website for this event serves as an excellent example of how to properly inform regular users about the upcoming event as well as attract as many visitors as the...

Tips for Creating a Great Personal Online Portfolio

Eelco Guntlisbergen  •  Design  •  June 11, 2014
Tips for Creating a Great Personal Online Portfolio

As a designer I think we’ve all experienced the difficulty of creating something personal, including a portfolio. You end up spending countless hours in Photoshop, trying a hundred different things and after two months you realize that your homepage still says “under construction.” This might not be the case for everybody, but being my own client is quite challenge and...

5 Ways to Enhance Your Website Login Process

Paula Borowska  •  Design, UX Design  •  June 9, 2014
5 Ways to Enhance Your Website Login Process

The best way to enhance an experience, or to actually make it great, comes down to making the entire process simple for the user. There are many different things you can do to improve the login process. Here we’ll discuss five things you can do to improve the experience of the process, starting with the two types of logging in and ending with the importance of labels and...

Free Fonts for Web Design, Print and Products

Adrian  •  Resources  •  June 5, 2014
Free Fonts for Web Design, Print and Products

Want to find a proper free fonts that will feel comfortable in your project’s surrounding? Want to enrich your design with some decorative typography? Or simply lay a great emphasis on certain words? Then you should definitely enter the properly-executed first-rate original fonts – that by the way won’t cost you a penny – into a “game”. Sounds intriguing?...

Challenges and Opportunities of UX in Augmented Reality

Armen Ghazarian  •  Design, UX Design  •  June 5, 2014
Challenges and Opportunities of UX in Augmented Reality

Augmented reality is a recent technological innovation that is widely used in marketing by major brands like Pepsi and IKEA. It adds layers of computer-generated content over real life objects enhancing the user experience and perception of the brand. The reason why UX designers should care about augmented reality is that it is yet another type of user interaction, albeit a...

Animating SVG Gradients

Joni Trythall  •  Coding, CSS3  •  June 4, 2014
Animating SVG Gradients

SVG gradients are so handy. We can fill complex shapes and create depth and character for our artwork all while having access to it in the DOM. Within SVG linear and radial gradient elements there are several attribute options available for thorough customization. Animating these gradients takes this customization even further and presents a unique opportunity that can be used...

Create Vertical Rhythm on Your Webpage

Paula Borowska  •  Coding, Design  •  June 2, 2014
Create Vertical Rhythm on Your Webpage

The technical side of typography can be a bit tough to grasp since it means dealing with numbers and proportions. However, it means that you will understand typography more and be able to adjust it to make better designs and better reading experiences. Vertical rhythm is the term that comes to mind when talking about typography on the web, which can be difficult to get...