Gary Bacon

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.

Snapchat vs. Instagram Stories and It’s Confused User Experience

Earlier this month, Instagram released a new feature for it’s app: Instagram Stories. This isn’t a groundbreaking new feature. It’s a feed of stories from your followers that expire in 24 hours.

Just. Like. Snapchat.
( Admittedly so. )

There is definitely a conflict of attention here. You can’t recreate a spontaneous moment to capture it for another platform. I’ve seen many Snapchat users upload videos to Instagram to share with their audience later. That is, until Snapchat introduced the Memories feature and made it much more difficult to save stories to your phone.

We’ll see if Instagram Stories takes off or not. Just due to the sheer volume of users already on Instagram, most likely it will. That being said, having two feeds competing for attention within the same app does seem to be a bit of an odd user experience.

On the other hand, for any app, increased engagement is definitely the goal and a plus.

Amazon’s Persistent Cart

The shopping cart, when the user hits a larger viewport size expands and becomes persistent. This is a nice touch.

Click to Zoom

The items in the cart show you price, Prime status, and an image thumbnail. Hovering over each product image displays: product title, price, quantity, delete, and “save for later”.

There is also a save for later panel under the cart as well, which expands accordian style.

This experience and the cooresponding interactions are not included on iPad/tablet.