Breaking News
Home » Digital » The Internet » Coding and Customization » Website Redesign: The Plan For 416BC
Website Redesign - The Plan for 416BC

Website Redesign: The Plan For 416BC

Every now and then a website needs to be redesigned. Sometimes this is a minor aspect, while other times it involves a major shift to a new idea. Currently is undergoing a redesign, but more on that later.

The Internet is always evolving.

(Hippies' Note: If you enjoy reading our articles, you'll love our newsletter. Receive updates directly to your inbox. Subscribe now!)

As the Web evolves new trends emerge that make websites more user friendly and visually appealing, with the addition of new features. This was seen with moving from blocky content to rounded edges in Web 2.0. The latest trend appears to be using responsive themes and more white space (both will be seen in the new 416BC website).

Although the addition of new features makes it appealing to redesign your website with every new feature or design, it does not mean that it’s the best. (We probably still do this more than we should. Probably a common thing amongst Web designers.)

Should you redesign your existing website?

Before you do, think about what your visitors will think about any new changes and how they would respond. If you are constantly changing the navigation or menus, then returning visitors could become frustrated. But if you are relatively new without a returning audience it probably won’t matter.

However, if you do have an existing readership you can get them involved in the design process for major (and less frequent) site updates. Some ideas for including your readers input:

  • Survey your readers. Ask them about the current design and what they want. Here are some ideas you can ask:Have readers vote on the redesign. Quickly rough out a few different designs you are thinking about. Sketch it out on paper and scan them, or you can use a program like Photoshop. Then ask readers to vote (remember to include your social media followers!) on their favorite. You can then build from that.
    • What do you like about the current design?
    • What don’t you like?
    • What would you change?
    • What new features would you like to see added?
  • Have readers vote on the redesign. Quickly rough out a few different designs you are thinking about. Sketch it out on paper and scan them, or you can use a program like Photoshop. Then ask readers to vote (remember to include your social media followers!) on their favorite. You can then build from that.

The Evolution of Website Design Examples

Here are a few examples of common website design since the beginning. You’ll notice the examples of older websites look… well old. They look out-of-date. And the newer designs tend to be more eye catching with the latest trends.

Take a look at the changes to over the years. (Hint: Hover over an image to see a larger version.)

Way Back Machine: 416BC in the Past

Just for fun take a look at how the 416BC website has changed over the years. If you would like to see how any website used to look, check out the Internet Archive Wayback Machine.

Redesigning 416BC

Note: We love WordPress and will continue to use this content management system (CMS).

Designing from scratch can be extremely time consuming. Instead we will be using a theme (Sahifa) and then making adjustments where desired. By using a premium theme we will be saving time and money. (We also get to create tutorials along the way to help our readers!)

Theme: Sahifa

Previously we used mostly WooThemes as they had beautiful designs and an easy to use backend, with a main settings area and short codes for adding design elements. (We still use them occasionally, and recommend them as a premium WordPress theme source on our Resources page.)

Over time more developers began adding their own custom shortcodes and a theme settings area to configure the design. In addition to these features themes have become responsive. Responsive themes avoid the hassle of designing (and coding) a second theme to be used for mobile devices (or even a third theme for tablets!).

Instead we get a single theme that adjusts automatically by detecting the screen size of the device being used.

Desktop Users: See it in action on our website. Simply resize your browser window to see the layout adjust accordingly. (Pretty neat, huh?)

ThemeForest: Premium Theme Marketplace

ThemeForest offers several designs from different developers around the world. It’s a one-stop shop offering Premium WordPress themes (and other website themes). This is one of the reasons why we chose Sahifa from ThemeForest. We wanted to see other designs from new developers for a new perspective.

Benefits of ThemeForest

  • More themes to chose from (over 2,500!)
  • Average price $40-$45 (single domain, much more for multiple site license)

Disadvantages of ThemeForest

One of the biggest downsides to choosing themes from ThemeForest is that themes are submitted from a variety of developers. If you choose a theme today and use their shortcodes, then in the future switch to a new theme design (by a different developer) the shortcodes will no longer work. This will add an extra step in the new theme installation to fix the site from showing shortcodes that don’t work. (We didn’t think about this beforehand.)

  • Different themes are made by different developers
  • Chance of shortcodes changing

Color Palette: Leaning towards Black and White, with Bursts of Color

To continue along with the latest white space trend I’ve decided on a simple black and white design, with shades of gray. It will be clean and monochromatic, but not boring (I hope).

Bursts of color will be introduced in the sliders, featured post images and any banners. My idea is to help focus the readers attention to where I want it. Sometimes color will draw their attention to coding snippets, step-by-step directions via images in the tutorials, or banner ads focusing on a specific response (such as signing up for our newsletter). If the overall design was full of color, then it would dilute the power from when we are actually trying to capture a reader’s attention.

For our ‘clients only area’ the theme will get probably get some color. Currently I’m leaning towards blue or purple, but I haven’t decided.

Navigation and Menu Systems: A New Trend

Recently there has been a trend with website navigation to have a changing menu (primary or upper) system based on the reader. It might show differently for those visiting for the first time (not logged in) versus for the logged in visitors.

There are times when this is especially useful. First time visitors will be more likely interested in learning more about you or your service/produce (About/FAQ). However, if someone has already signed up to your website they might be more interested in a ‘Getting Started’ link walking them through their membership benefits.


416BC Top Menu - Login
This is the menu guests and unlogged in visitors would see in the upper left.
416BC Top Menu - Logout
This is the menu logged in clients would see in the upper left.

The plan is to utilize this style of navigation in the upper menu system instead of the primary menu area. The primary menu will consist of the most popular links around our website, including services, tutorials and guides, resources (free and paid solutions), case studies (our projects and client projects) and our blog.

Anything we miss? Let us know in the comments.

Subscribe to our mailing list

I'm interested in...

About Brianne

Born and raised in Orange County, California, I am definitely a "summer" girl at heart. Today I am a full-time mother to a rambunctious two-year old living in a RV. Together Branndon and I are learning how to become financial and location independent.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

CommentLuv badge