This post is currently evolving! 🌱 Check back for new updates on the design process as new elements appear.
Starting Point
Developer sites are always neglected and short on time. This site has undergone several changes, but before committing to a redesign, I had set up a simple brochure site with the WordPress 2019 theme and stock photography.
I began this site by spending a weekend designing and developing a simple landing page with the primary details: who I was, a basic summary of my services, and a simple contact form whose submissions were handled via email.
First Phase
The first goal was to get a site launched in forty-eight hours in February 2020, with plans to expand other site elements over the course of the next month. To springboard the design process, I began with a photo of the Chicago skyline I took on my iPhone, and chose two main colors to guide the theme design. Complimentary colors were generated.
A cropped section of the original photo formed the theme’s landing page background image and site icon. These five colors, along with shades on specialized elements, represent all of the colors used site-wide.
Choosing a Theme
Choosing a WordPress theme can be challenging – I’ve used many premium and free themes for site development, and have built custom child themes using technologies like Understrap and Genesis. But with a limited time window for launch, I didn’t want to be fiddling with basic site structures and setup. Using the free Astra theme, I created a basic site with WordPress’s Customizer settings and created a small child theme. This allows us to add small development changes to the theme without worrying about updates to the core Astra code overwriting them in the future.
Second Phase
Designing the sidebar
I wanted to use a sidebar on the secondary pages to help guide the user back to the most important elements – what I offer, and how to get in touch with me. I customized elements and created a secondary form specifically for use in the sidebar. Using a separate form allows the same functionality, with easier customization options if they need to be implemented later on.
Blog Posts
I had planned to use WordPress’s native Posts feature to create an ongoing archive of common digital strategy questions to refer clients back to, as well as keep an updated archive of current projects. I customized the site elements on both single view & archive pages to dress up elements like entry meta and block heading elements. While posts offer the functionality of adding spacing within each post, taking a little time to assign variables to block elements means that we don’t spend time inserting spacing and font sizes within the editor manually.
Currently I’m not using the WordPress comments feature, but we can easily extend the site’s form styles towards these later on if need be.
Site Elements
I use SASS to speed up development time – using mixins and variables allows me to style and check variable elements quickly. Elements like image and Youtube figure captions, form fields, read more tags, and menus were styled as needed.