Web-Crunch Blog

December 2014, a new website was launched for creative professionals. That website is known as Web-Crunch.com

Web-Crunch is a place where designers, developers and entrepreneurs come together and share insight on their profession. We lead the discussion offering new articles and content every week. We even write books.

Video Walkthrough

Below is a video overview of the newly redesigned Web-Crunch.com. Andy walks you through his process and some of the design decisions we made throughout.

Why Web-Crunch?

It all began as a side project. Andy was working full-time as a UX designer for a startup company. He was already contributing to other design and development blogs such as Elegant Themes, Web Designer Depot, and Specky Boy. He decided to create a publication of his own. Thus, Web-Crunch was born.

The Original Design

The original design was a colorful take on articles about branding, web design, web development, freelancing and design. Below, you can see screenshots of the old design. We thought the design felt a bit messy and constrained for future growth.

couple of creatives case study

The old home page served its purpose but was crowded. Small things were amiss throughout the site, which prompted our push for a fresh redesign.

couple of creatives case study
couple of creatives case study

The Redesign

Not only did the look and feel change, but so did the code underneath.

At first glance, the new design is quite minimal. We decided this time around to focus more on the content rather than the appearance.

Much of the site architecture and pages remained intact but the experience you now see live on the site was altered to improve the most important thing, readability.

couple of creatives case study
Home Page

We were inspired to mimic the general layout of a newspaper publication and utilize a rigid grid with columns on the home page. This page is the home for the most recent articles that get published on Web-Crunch.com. You can paginate through them all or visit the archives page to see the entire article history to date.

couple of creatives case study
Category Page

Each category archive page still retains it’s original color scheme, though is much less prominent. You can preview each color scheme by using the main navigation.

couple of creatives case study
Article Page

The article page is where you do most of your reading when on the site. Usually, most users will be linked directly to each article rather than a category page or the home page. With that in mind, we omitted the sidebar that existed previously on the old design. Large margins are enforced here to improve readability. Overall, things are more neat, which was our main goal from the start.

couple of creatives case study
Products Page

We have a page to promote Andy’s ebooks, Pro Tumblr Theming and LUXD: Learn User Experience Design.

Color

The color palette is simple. What was once loud, bright and bold colors turned into 3 primary colors used throughout the entire site. Most of what you see is simply black and white.

Typography

First, we experimented with many different typeface options before making our final decision. Finally, we used a combination of sans-serif and serif typefaces to keep the look modern and easy to read. For the main body font, we used Mercury Text from Hoefler & Co. For headings, we made use of Franklin Gothic FS which comes in four styles. Pairing these typefaces worked nicely.

Code

We used WordPress, a content management system, to build Web-Cruch.com. WordPress is written in PHP. We decided to give Timber a shot. Timber simplifies a lot of outdated WordPress PHP code. New template files are authored in Twig (HTML) format present the data. Timber combined with Twig clean up your code tremendously.

Bootstrap
We decided to make use of Bootstrap for the redesign. This was done for a variety of reasons but mostly because the framework is tested and contributed toward by many talented individuals. Their experience and skills have made Bootstrap a highly adaptive framework no matter the device from which you view it. We defined our own theme and some custom styles but bootstrap has our back for the remainder of the site design.