Redesigning This Blog Based on Components

Around the end of June, I decided it was time to redesign my blog. On a flight back from Disney in Orlando, Florida, I opened up Sketch and began crafting a new design.

This is what I came up with:

I’ve always built my WordPress theme from scratch. I like having as little code as possible, speed, and hand-crafting custom CSS. I’m not against frameworks, I just choose not to use one for my own site. More on that in a future post.

Then I let the design sit for a week. Great.

I was also stuck on what I wanted the mobile layout’s navigation to look like. I still have work to do on that. That’s fine. Ship it. Iterate. Repeat.

Evolving the Approach

In the past, I would have taken my own mockup, put it in Zeplin, and then start coding out the CSS from the top down. However, this time, I decided to try something different: I would look at the code as components. With this task, I was not only creating the HTML/CSS but also cleaning up the PHP & HTML that makes up the current theme.

The site would consist of: the main template structure, a blog template, the main navigation, a blog topic navigation, the search bar, a social media cluster, and the blog post content area.

To build momentum, I started out with the smaller components. Doing that ends up being a quick win, which gives you a boost of creative energy. Then repeat and knock out another; repeat it again.

Travel and New Experiences

There are a few sub-themes to which I follow in order to maintain happiness. However, my overarching theme is this:

Happiness is sustained fulfillment.
Fulfillment is born out of creating art.

What does that mean? How do I achieve this baseline?

1. Create art.
2. Be authentic.
3. Travel and have new experiences.
4. Solid relationships: friends/family.
5. Peace where I live.

Travel

Much of my best reading gets done on airplanes. In my experience, zero reading gets done in the actual airport. Too much background noise, gate changes, and the constant distractions of awaiting the boarding process. However, once I’m in my distraction-free bubble in the air, I can power through books with ease.

To try and recreate this distraction-free environment, as best as possible at home, I put on my noise canceling headphones and set the iPhone to airplane mode.

Booking airline tickets 2-4 months in advance gives me the freedom to fly. With that much planning in advance, most ticket prices are in the $200-300 range for roundtrip; even west coast trips.

Budgeting for this is of upmost importance to me. I try and keep them to weekend trips, even if it is a 3-day weekend, as to not disrupt the day job. However, I find the inspiration that I gather from traveling to new places fuels my creativity and only enhances my work.

Authenticity

There are a few sub-themes to which I follow in order to maintain happiness. However, my overarching theme is this:

Happiness is sustained fulfillment.
Fulfillment is born out of creating art.

What does that mean? How do I achieve this baseline?

1. Create art.
2. Be authentic.
3. Travel and have new experiences.
4. Solid relationships: friends/family.
5. Peace where I live.

Being authentic.

I believe in being 100% authentic. The person that I am at work is who I am at home and amongst my friends. What you see is what you get.

After observation, some folks in life learn to conceal genuine thoughts and feelings, which can be an aspect of insecurity. A breakdown in communication sure, but they are trying to protect themselves. When encountering someone who is authentic, it can be intimidating. They hide behind a veil and this exposes them.

Trying to be someone who we are not, trying to “make the right moves”, or the fear of making the wrong decision: all of those reasons hinder us from being truly authentic.

Keep Your Freedom

There are a few sub-themes to which I follow in order to maintain happiness. However, my overarching theme is this:

Happiness is sustained fulfillment.
Fulfillment is born out of creating art.

What does that mean? How do I achieve this baseline?

1. Create art.
2. Be authentic.
3. Travel and have new experiences.
4. Solid relationships: friends/family.
5. Peace where I live.

Give yourself options.

Will saying yes to _______ give up my freedom?

Everything in life is about having as many options as possible so you can maximize your freedom.

— James Altucher
The Choose Yourself Guide To Wealth

Keeping your options open is paramount in making decisions. Be patient, think it through, and do not act out of emotion nor haste.

It’s not always about money either. Will that “dream job” paying $400,000 a year also absorb all extra free time that you have? If so, not worth it. It goes against theme No. 1, “Create art.”

Sure, there are always bills to pay. Having that day job, which pays the bills, allows you the freedom to work on your art for a couple hours every morning. But it’s a balancing act. Eventually, the art will start to pay the bills. ( Just don’t chase after it. ) Being mindful and adjusting the calibration of that combination comes with practice and assessment of self.

Be able to create art.

The freedom to create art. That’s what I love.

Design Workflow

Over the last year, I have made it a goal to continue to refine my design process. Iterating on design includes the process and tools as well as the art that you are creating. As a user experience and user interface designer, I have be able to work efficiently. These are the tools that I use on a day-to-day basis:

Sketch

I’ve used many programs over the years: Photoshop, Illustrator, Fireworks, etc. None really hit a sweet spot for me in terms of creating mockups, prototypes, and user interface elements. Once Adobe announced the decision to kill off Fireworks, I made the switch to Sketch. I have loved every moment of it.

The app is completely vector and Mac native. Thoughtful features include: multiple art boards, infinite canvas, retina support ( @2x, @3x ), SVG generation, OSX Versions support, etc. Highly recommended.