Upgrades to My Web Site – Eating My Own Dog Food

It has been a couple years since I have made any big changes to my web site, so I thought it was time.  I have taken my own advice in my post 2014 Web Design Trends, and added some changes to my own site.  I have flattened the design, added a hero image area, focused on Mobile First design, trimmed some text, and focused on a card based design.

Flat Design

I have made some minor changes to focus on a flatter, simpler design.  I have removed shadows and rounded corners throughout.  This makes the site look lighter, simpler, and cleaner.  I like the look. You can see more at 25 Delightful Flat Design 2.0 Websites for Inspiration.

Fixed header and navigation

I have anchored the header and navigation at the top of the page, so that it is visible even if you scroll away from the top of the page.  This is a very popular technique, particularly if the header and navigation is kept slim.  You can see more examples of fixed header and navigation areas at 22 Examples of Fixed Position Navigation in Web Design.

Hero Area

I have added a hero area on the home page, which showcases my own photos stored on flickr.  This adds a lot more interest and personalization to my site.  Some additional examples of this design can be seen at 30 Web Designs that Fully Embrace the Hero Image.

Mobile First

The amount of traffic coming from mobile devices increases with each passing day.  Building mobile specific web sites or applications separate from your desktop web site is not sustainable.  My site is now accessible on phones, tablets, desktops, and extra large screens.

Less Text

I have trimmed the extra, unneeded filler text from each of the different areas of my web site.  this kept the site focused on the original content, and on my photography too.

Card Based Design

This is a very popular design lately.  I have gathered and organized my most recent social media content from pinterest, tumblr, twitter, and my blog, and displayed it on my home page.  Each post, tweet, and pin is shown as a separate card.  I like that it is always updating and follows my pixelated design theme.  You can see more examples of card based designs at 15 delicious examples of card-based web design.