Finding my style with Material Design

As I continue converting this website into a Nuxt app, I’m encountering design decisions that permeate deep into the style of my actual website. It’s amazing how dramatic a decision about padding, font, and color can impact the aesthetic and usability of a web interface. I’m more inclined to use an established UI framework that’s been battle-tested and brainstormed into something more polished, rather than making something homebrew for the user to see and interact with. As a result, I’ve started mastering Material Design as I assemble my website and blog with Vuetify components.

Starting out, I spent a great deal of time making mockups for my website in Sketch with the Material Theme Editor plugin. I adapted my current website color palette into a new medley of pastels and grays that felt more modern when paired with the rounded corners of my new elements. One by one, I assembled the different types of components I would need in order to render my website on both desktop and mobile. It took some time, but I build mock-ups for every type of view for my website so I would be forced to make design decisions globally, not on the fly. I didn’t want to pigeonhole myself by making a quick decision that could ripple out and tarnish the entire design, so I worked on a canvas before I started writing HTML and CSS.

This approach worked well for me as I learned the basics of Material Design, but as I finish this project and embark on my next endeavor, I know future implementations of Vuetify will be faster and cleaner as I continue to build my own library of components. The power of prototyping in Sketch becomes evident when I want to make impactful changes, as I can globally change the colors, fonts, and other properties in a way that intelligently affects all of the components downstream. The plugin will even vertically re-center text if the new font has a different midline height.

A final challenge I’m currently work through is adapting text styles within the actual blog posts. I was using Markdown before, but now I’m using a rich text editor that actually serializes the content into HTML, and I have full control over that serializer. I already have as much control as I need by styling the component that holds the actual blog post content, but I’ll also use the serializer to tag the generated HTML appropriately so I can adjust the end content and make it look professional.

In the final entry of this series, I’ll be exploring the SEO and infrastructural changes I’ve made to the website as part of the conversion.

Click here to read Part 3!