I firmly believe that design and development are inseparable. One cannot be done without a thorough understanding of the other. As a developer, I feel that more experience with all kinds of design (visual, interaction, product, etc…) will only do good things for me. Because of this, I’ve spent the past few months trying to work out my design muscle. My most recent design-heavy project was to build a custom WordPress theme for the Ms. Estelle Marie beauty blog. Here’s a quick rundown:

Goals

For this project I was shooting for a very minimal aesthetic. I wanted the theme to be as unobtrusive and undistracting as possible to draw more of the user’s attention to the bright, colorful content. For this reason I went with a mostly achromatic color scheme with a single gold accent and generous amounts of whitespace.

Because the design of Ms. Estelle Marie is so minimal, much of the aesthetic value comes from the typeface selection. After going back and forth between different combinations, I landed on two typefaces: Playfair Display and Raleway. I felt that the heaviness of the Playfair Display contrasted nicely with the lightness of Raleway.

Base Wordpress Template

Before this project, I had zero exposure to WordPress development (although I’m no stranger to PHP). I figured that the best way to quickly get moving with the CMS was to start with a bare bones template. After sifting through a few options, I finally landed on the Underscores (_s) theme. Underscores offered everything I was looking for. Namely, not much at all! A clean Underscores install presented with me with a very minimal theme with next to no superfluous styling or content to get in my way. With the help of the WordPress Codex, I was able to quickly wrap my mind around things like the WordPress file structure, API functionality and the general WordPress way of doing things. I’d highly recommend Underscores to anyone looking for a bare bones starter theme.

Grunt

As with nearly all of my projects, my frontend workflow for this project relied heavily on Grunt. For this project, I was running WordPress out of /var/www, so the only tools I used were SASS and LiveReload. My Gruntfile was relatively thin:

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            dist: {
                files: {
                    'style.css': 'scss/style.scss'
                }
            }
        },
        watch: {
            options: {
                livereload: true,
            },
            less: {
                files: ['scss/**/*.scss'],
                tasks: ['sass']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

In previous posts, I described creating scaling SVG text. I used a technique like this to manually create the Ms. Estelle Marie logo. My technique was fairly primitive. I created two text elements, styled them with a Google font and then resized and positioned them until I was happy with the results. Because the SVG element is using a viewBox to define its internal coordinate system, the logo can responsively resize to whatever size is needed.

Google Fonts

From a technicaly standpoint, I’m a huge fan of Google Fonts. Being one line of CSS away from using any font you want is incredibly convenient. However, I did run into issues on this project with flashes of unstyled content (FOUC). The SVG logo would render before the font was loaded, which caused a flash of ugly, misaligned text. As recommended by Google, I used the Web Font Loader to fix these problems. The Web Font Loader synchronously loads the fonts specified, so by placing the provided script tags before any of your content, the script will block rendering until all of the fonts have been loaded, preventing the FOUC!