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.

Next Post:
Previous Post: