Content Strategy

Since the last version of my site, my general work has trended far more towards development than design. So, I decided this new version would contain case studies of my prominent projects. I also plan to keep up on a blog to showcase examples of my skills, and share tutorials like the one’s I’ve learned from over the years.

A lot of thought was put into the first three lines you see on the home page: “stephanie eckles, user experience craftswoman, wordpress code poet.” While previously I leaned on the “ThinkDoBeCreate (TDBC)” namesake, and still do consider it part of my brand (see: URL), I’m a one person shop on a freelance level. Therefore the decision was made to keep that fact up-front. The next two lines mention those things which I am most passionate about working on: user experience and WordPress development. I truly consider this career a craft, and a beautiful way to make a living.

Design Evolution

The content strategy led to choosing a general site structure quite quickly. And because there would be more content than design samples, readability and flow were of special emphasis. But I also wanted the site itself to be an example of my design ability, because I still push pixels part of the time.

Design Style Progression

My old color palette was reds for the logo, and a dark theme meant to highlight the design of the sites I had showcased. For this refresh, I initially wanted to go quite bright, possibly with photos. Several .ai files and moodboard additions later, I arrived at the palette of blues and orange. Blue has a fresh, social, bright, and calming feeling. Orange is it’s complement, and provides a nice contrast as an attention-getter used for links and other call-to-actions.

Discarded Designs

Updating the Front-End Tech Stack

At the time of my last design, responsive web design (RWD) was HOT RIGHT NOW. Now, a few years later, the conversation has evolved to say that RWD is important, but to consider the impact of frameworks and other tech on the load time. I spent several nights researching better methods than the habits I had fallen into (such as defaulting to the wonderful but rather bloated Bootstrap framework).

RWD Framework: ConciseCSS

ConciseCSS clocks in at 21kb minified, with no javascript files required (unless you’re using a “hamburger menu” collapse on mobile, or not responsive, or a few other small things). Plus, transitioning from Bootstrap syntax was not only easy, but pleasurable. During dev, I found I was adding quite a few classes to elements, but writing less, more DRY CSS in my site’s style file.

Getting Organized

For this new site, I also spent a considerable amount of time laying out a structured CSS file from the start, including declaring “CSS Structure Standards” and a Table of Contents section. I made a big push to keep typography rules all together, as well as colors, navigation, site structure, etc. I exposed some subheadings that I normally considered too granular because of ultimately being frustrated in the past when trying to find a block.

I also carefully considered my structure in a modular way (i.e. if this is always in this formation, then it will always have this margin, etc). This helped use cascading to my advantage to slim down the number of classes for those elements.

Hello WordPress, My Old Friend

Of course, the site is proudly powered by WordPress. The front page is customized with a featured post from a “case study” custom post type, plus space for up to three of the latest blog posts. The theme is based off of _s, but customized to use only the essential features.

Plugins In Use

All graphics are SVG (when the browser supports that) so the Scalable Vector Graphics (SVG) plugin was installed to allow the media library upload to support SVG.

Other plugins are the classically necessary WordPress SEO by Yoast, and Ninja Forms for the contact page form.

I also created a plugin to initiate two custom meta boxes and the Case Study custom post type, because I am of the school of thought that content-creating functions belong in a plugin vs. tied to the theme. One meta box allows marking a case study as featured, and one is a text area for the “teaser” content that appears below the title on single posts, pages, and case studies.

2014 Redesign