HOW I REDESIGNED THE COURTYARD CREATIVE WEBSITE

So I thought I’d shine some light on how the new Courtyard Creative website came to life.

This is an account of how I approached the redesign with reference to the tools and processes I used along the way.  If you are a web designer you might or (might not) be familiar with some of these resources. If you are client or prospective client you will gain insight into how I plan and execute web design projects.

DESIGN INSPIRATION

The Courtyard Creative redesign started with a blank Photoshop (PSD) file one Monday morning in early March. I had already previously redesigned the Courtyard Creative logo – so this was pretty much my starting point.

My inspiration for this project came from the following sources.

dribbble

Dribbble

I use Dribbble to browse other designers work and find inspiration for new web design techniques. Dribbble is a community website where designers share snapshots of their work with other designers. It’s pretty exclusive (you need to be invited to join the site) but it hosts a huge collection of work from a variety of talented designers. It’s a great place to view and comment on what other designers are working on and find inspiration for your next project.

Google Web Font Directory

Something I have been reading up on recently is the use of typography in web design. There are some great web typography products available on the market and one of the most popular and free resources is the Google Web Font Directory.

The one issue I find with the Google Web Font Directory is that it can take forever searching through hundreds (over 400) of different web fonts looking for that perfect font.

One website I find to be really useful is Beautiful Web Type maintained by Chad Mazzola. This site showcases some of the best high quality typefaces from the Google Web Font Directory. It’s basically where I decided to use the Lato Font.

DEVELOPMENT PROCESS

html

I am not the type of web designer that completes a pixel perfect Photoshop design before moving onto templating in HTML/CSS. I tend to work iteratively on my design, adding to it as I go.

I use Photoshop to come up with a solid base design first, usually the homepage and a sub page that incorporates all the main typefaces and design elements for the site. Then I move onto slicing the PSD up into web optimized images ready for templating in HTML/CSS. All the HTML and CSS is hand coded by myself using Komodo edit for Mac/OS.

Skeleton Responsive CSS Grid System

Before I started the redesign, I decided that I wanted the website to display elegantly on as many devices as possible, this had to include the iPad, iPhone and Android Handheld devices. To support this requirement, I developed the HTML/CSS templates with the Skeleton Responsive CSS Grid System.

Skeleton is developed and maintained by Dave Gamache and is a flexible, lightweight collection of CSS files based on the 960 grid system and scales all the way down to tablets, mobile phones. The syntax is simple and it easily integrates with your HTML files for rapid and responsive website development.

Now, the jury is out on the use of frameworks in web design. Some designers/developers are staunchly against using other people’s frameworks and prefer to develop their own. This is great if you have the time to invest in developing your own framework. However, if you are short on time and require a more rapid approach to development, a reliable pre-built framework like Skeleton helps speed up the process.

For me personally, using Skeleton not only helped me develop for multiple devices quickly and efficiently  but it helped me learn a few things about responsive web design and set me up for success for developing my own possible responsive framework in the future.

jQuery

JQUERY RESOURCES

jQuery is a fast, small and feature rich Javascript library. It’s open source and is used to enhance user interaction and user experience on websites. There are many open source jQuery plugins freely available for customisation on the web and are a popular choice amongst web designers and developers alike.

I used the following few select jQuery plugins to build interactive features into the Courtyard Creative website.

Flexslider

Flexslider is a responsive jQuery slider built by WooThemes. It is easy to customize and supports multiple options. I customized Flexslider for the homepage to showcase the latest websites from the Courtyard Creative portfolio.

Respond.js

Respond is a fast and lightweight plugin that enables responsiveness in browsers that do not support CSS3 media queries (Internet Explorer 6, 7 and 8).  This is a really useful and simple plugin if you want your website to be responsive on Internet Explorer browsers.

Quicksand

Quicksand at its very basic is a jQuery plugin that reorders and filters items with a shuffling animation. It’s used for the Courtyard Creative portfolio and is great for organising items based on a set of categories or tags within WordPress.

chrome-tools

DESIGNING IN THE BROWSER

Once the templates are developed and I can preview them in the browser, I continue to debug and add elements to the design in the browser by using Google Chrome Developer Tools. I find that using the browser screen as a canvas and actually designing with real elements in the browser improves my designs and makes it a much more interactive development experience than just purely relying on my design in Photoshop.

wordpress-codex

WORDPRESS THEME DEVELOPMENT

Once the design is completed in HTML /CSS and tested on a number of devices and latest browsers, I move onto the next and final step in the development process. WordPress Theme Development

Developing for WordPress does add another step in the web design process, but for me it was necessary as I wanted to be able to update my website regularly with content and quickly and easily manage my portfolio work without having to access any of the core template files to update the site.

WordPress development is a large subject on it’s own, so I wont go into the fine detail of how to setup a local environment to develop with WordPress or how to integrate your templates into WordPress – there are more than enough tutorials on the interweb about this. Instead, I will focus on a couple of tools and tips that I found particularly useful while developing the redesign in WordPress.

starkers

Starkers for WordPress

Before diving straight into WordPress development, I wanted to use a fresh clean set of WordPress files as a starting point. One option was to use another WordPress theme such as the default Twenty Twelve Theme or look at developing a child theme from the many WordPress frameworks available on the market. Personally, after researching and downloading quite a few frameworks, I decided that I did not necessarily need or want to use a comprehensive framework, instead I what I needed was just a blank canvas to begin my WordPress development. With this notion, I decided to use Starkers for WordPress.

Starkers is a bare bones WordPress Theme that is free of all style and non-semantic mark up. It’s basically a clean set of basic WordPress files required to start developing a custom WordPress theme.

WORDPRESS STANDARDS

Even though I had decided that the Courtyard Creative site was only going to be used by myself and not released as a commercial theme, I still wanted to develop a WordPress site that would be standards compliant and would last me a good few years before having to redesign it again!

The WordPress community was really my first stop in learning more about how to develop with WordPress the correct way. The community is made up of hundreds of volunteers who contribute to WordPress and support the system on a very frequent basis. Some of the most useful advice I have found online in the way of blog posts, articles and tweets have been from Pippin Williamson, Japh Thomson, Justin Tadlock, Devin Price and Chris Spooner.

All of these people have been approachable on Twitter, on their respective blogs and email. They provide advice, resources, products, and insight into developing with WordPress.

There are literally hundreds of WordPress tutorials and articles online to help you develop a better understanding of WordPress, far too many to list here. So instead, to complete this post, I have listed a handful of the most useful WordPress tools and tutorials I have stumbled upon on my journey into WordPress development. Many of these resources have been recommended and contributed to from members of the WordPress community.

WordPress Debug Bar Plugin

WordPress Theme Check Plugin

Building a Responsive Layout with Skeleton 

Beginners Guide to Enqueuing jQuery

Including jQuery in WordPress the Right Way

A definitive guide to page and post navigation in WordPress

WordPress Codex Lessons

Create a Responsive Slider Plugin with FlexSlider for WordPress

So that just about covers it. The Courtyard Creative redesign took 3 weeks to design and develop from blank canvas to completion and launched on Tuesday 26th March 2013.

I hope you have found this post interesting, if not insightful. If you would like to share your own approach to web design or would like to share some other resources not mentioned here, I’d love to hear from you in the comments section below.

3 Comments

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

CATEGORIES