Design with CSS in mind

A piece of advice to fellow designers: when working on a design for your web project, always try to think one step ahead. Try to think within the boundaries of code and about the process of modules being translated into HTML and CSS. It can save you a lot of time and headache. Ideally, work closely with the developers and iterate to produce best results.

Take a look at one of the icons I created for a web app I have been working on recently with the guys at neno:

CA app date icon

It’s an icon representing a date, as you may have guessed. This icon can be done with pure CSS and that is exactly how our front end team executed it. A little bit of rounded borders here, and a little bit of pseudo-content there. In case you’re curious, here’s our SCSS:

.location-navigation-count {
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: 15px;
    margin-right: 1.5rem;
    text-align: center;
    background: $blue-dark-2;
    color: $white-1;
    @include border-radius(10px);

    &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        margin-top: -1px;
        background: $gray-1;
    }
}

I could have just as easily designed a different and more complex icon, but that maybe couldn’t have been done with just CSS and we would have been forced to export an SVG icon. That would take more time to implement and make the module more complex, more difficult to iterate, lengthen load time, etc. So, there you have it. The next time you design a comp, try to design with CSS in mind and make life a little bit easier for you and your team.

On order

Thought provoking stuff — Albert Camus on Happiness, Unhappiness, and Our Self-Imposed Prisons.

“All true happiness, as all that is truly beautiful, can only result from order,” Benjamin Franklin wrote, and yet, as Camus so stirringly reminds us, order itself, when worshiped too blindly and rigidly, can consume our fragile chance of happiness.

Super cool focus transitions

Check out the super cool focus transitions for keyboard navigation by Nikita Vasilyev. As Nikita says, transitions like these are not limited to the web and I can see them being implemented on an OS level in the future. You can see them in action on Swiss.com.