Creating animations with GSAP | GreenSock

As designers/developers, sometimes we face a project that requires animation. Could be a simple one, or the trickiest animation you have seen before. So, we need to use the right tool for the occasion, one that could bring us good performance without sacrificing its ...

Color Contrast: an accessibility primer for Interface Design

As designers and developers, we need to take into consideration all the people that reach our apps/websites, including the people that are visually impaired. Our creations should be, or at least try to be, suitable for them, including those with less than 20/20 vision. ...

Gestalt principles in Web Design

Perhaps, too many designers overlook the importance of psychology within the creative process and the impact that some of its principles has in the design choices that are made on a daily basis, whether printed or digital. In web design, these principles are effectively ...

Discovering Storybook

Storybook is a javascript library that allows you to test "visual components" by splitting the business logic from the context of the application. Storybook currently supports several frameworks and libraries such as: React, Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, and Ember. In Swapps ...

What is AMP and why you should use it?

AMP (Accelerated Mobile Pages) is an open source project initiative which aims to improve the performance of the mobile web. We are currently living in the smartphone age so all the websites should consider this on their design. Because of this, the AMP initiative ...

How To Automate The Workflow In Frontend

The idea of this post is to learn how you can automate your job in the front-end area, because it doesn't include just to translate a design onto the web, but also how you can save time and work when building your page, e.g. ...

App development with Ionic

Have you ever think about building an app? It may sound scary to learn platform-specific technologies just to develop one, and maybe you just don't have time to invest in it. But there is another, much more faster way. Ionic is an HTML5 mobile ...

What is SMACSS and how to use it

What is SMACSS? Smacss (Scalable and Modular Architecture for CSS) is a style guide that follows five simple categories. SMACSS is a way to examine your design process and to fit those rigid frameworks into a flexible thought process. It is an attempt to ...

Website design for specialized dentists and doctors

Have you ever thought on having your own website but don't know how to differentiate from others? One clear need for specialized dentists and doctors in their website, apart from showing their services, is making appointments. The usual thing, is making appointments through a ...

Bootstrapping WordPress Theme Development with Sage

If you are familiar with Wordpress theme development, you know things can get a little messy when you are starting from the ground up. Building a theme from scratch is not easy, and setting it up can take a lot of the time you ...

Animations with CSS3

In the last animations post we spoke about how to make animations with Javascript, this time we're going to talk about how to make the same thing using CSS3. Worth mentioning that with CSS3 we are going to write less code, in this case ...
Flexbox post featured image

A quick review of Flexbox

As front-end developers we usually need to align vertically any type of content, or to define a grid with equal-height columns, to say the least. Before CSS3, these kind of tasks were done in a hacky, unclear way and didn’t always worked well in ...