Style Tile – New Design Phase 3

The idea of the Style Tile is to start solidifying the look and feel you will be going for without needing to do a full-fledged comp. Since this will be a responsive design, moving to the style tile next works as a great in between step before the code stage where we build out our module system. For more information about the advantages of style tiles over mood boards or full-fledged comps, check out styletil.es by Samantha Warren.

In the style tile, the fonts, links, buttons, and several other interface elements were hashed out. The background color chosen previously had to be removed as it wasn’t working. It added unnecessary complexity to site whose goal was to be as simple as possible, putting all focus on the content. The purple was brought in to highlight the important links on the page, which would either be content links or buttons. The secondary font chosen is FF Dagny Pro. It was selected due to its similarities to the title font especially x-height and counters. As with most of the choices on here, personal preference also played a significant role. There’s nothing wrong with that, as long as personal preference doesn’t get in the way of the goals and usability of the website.

The style tile also includes several text patterns for headings, bylines, blockquotes, and code blocks. Those are the elements expected to be most used in the blogs, which are the primary focus of the site. There are also several patterns in the bottom right had corner that can used in certain sections as backgrounds or borders to provide additional emphasis if needed. The final piece is the image border, padding, and caption layout, which will also be used regularly during blogging.

Style Tile

Style Tile for KyleBreckenridge.com