Phew, we did it! Welcome to the new Tilted Pixel website, the biggest redesign of our own site, ever!

To celebrate we are taking you behind the scenes of the website development process. This is the same process we proudly use with all of our client projects.

Major features of the new website:

• Brand new graphic design optimized for modern devices, from smartphones to giant high resolution displays.
• The blog that you are reading right now.
• Results-oriented portfolio with video testimonials.
• Long-format service pages.
• Marketing 101 resources section.

Step 1: Establishing Website Objectives

Like all of our projects, we began by establishing exactly what business objectives we were trying to accomplish. 

In our case we had four:

• Presell potential customers by showing off what we are capable of, then make sure they know the next step is to get in touch.
• Educate and engage existing (and prospective) customers about how to get the most out of their online presence. We feel very strongly about this.
• Fit our "exceed every expectation" approach. We'll write more about this in a future post. It forms the cornerstone of all that we do.
• Help us get found online. The website had to support our new content marketing plans.
  

Step 2: Establishing Features and a Site Map

Once we had a firm handle on what we wanted to achieve, we had to figure out the "how". We came up with the following set of requirements for the website and surrounding services:

Identifying the Key Website Sections

We identified 5 key website sections:

Home: As the first page that many visitors see, the home page is the most important. We decided that we wanted something that is self-contained; the visitor could do nothing except read our home page and still get educated, get proof of work, and get in touch.

What We Do: We decided to breakdown our services into four key pages. Three that speak to the three main types of projects that we target, and one that explains the Tilted Pixel philosophy.

Portfolio: We would show off the results we got for each client, not just pretty pictures. Two different layout styles would be developed for portfolio entries depending on whether a video about the project existed or not.

Online Marketing 101: This section would be a more permanent resource of high quality tools and information to help marketers and business owners get the more out of their website. We intend for this to become a major go-to resource for marketers and business owners looking for effective ways to utilize their website, whether Tilted Pixel customer or not (yet).

The Tilted Pixel Blog

This is what you are reading right now. We have been itching to share our knowledge and a blog is a natural way to do this on the web. It is the center of our content marketing strategy. Articles that are particularly comprehensive will be crosslinked from our Online Marketing 101 section.

Social Media: Twitter, YouTube, Google+

Choosing which social media services to use is a tough decision. We all want to be everywhere at once, but social media management takes time and resources. We limited ourselves to the services that we felt would have the biggest impact:

Twitter: It's hard to beat Twitter for engagement and the fast spread of ideas so we adopted it as our primary means of social communication.

YouTube: This was a natural choice since we had already created videos for our portfolio and plan to be regularly creating educational videos (our first are coming soon!).

Google+: Essential for attributing authorship to our blog articles, allowing author photos to appear beside the article in Google search. This is a young service and time will tell what other uses it has for us.

We decided to hold-off on Facebook until we have good processes for managing the above three, but let's face it (no pun intended), we will need to build a presence there too.

Web Technologies: HTML5 with Responsive Design & Retina Support

To us this was obvious: we wanted the site to be built on current technologies that will work great on current and future devices.

HTML5 is the modern way to code websites. Combined with responsive design, it allows websites to be viewed on virtually any modern device and not just load, but to actually adapt the layout to fit naturally to each device. No more having to zoom-in or scroll horizontally on smartphones.

Step 3: Wireframing

The next step was determining the layout of each main website section and the key content that would go on it. This process is called wireframing and involves sketching out the website in a blueprint-style format. It allows us to focus on the strategic layout of elements without worry about design details.

Crucial things we pay attention to when creating wireframes are the core messages and how they are told, the key calls-to-action, and the visitor's path through the website that takes them from lukewarm interest to dying to get in touch.

To your right you can see our very first stab at the home page layout. Iteration is key: this was revised several times based on feedback we solicited. If you compare this first version to our actual website you will notice that the text has been shorted up a LOT. We also changed the first area of the home page to be simpler and more direct.

Every major section and page was wireframed in this way, making it easier to structure content and to ensure we would end up with a good visitor experience.

Step 4: Content Creation

Writing is a key part of the website creation process, whether you do it yourself or you hire a company like Tilted Pixel to do it for you. It can often be one of the most challenging parts, because it requires truly understanding your business.

Writing the Tilted Pixel website content began with deciding exactly how to tell the Tilted Pixel story. Who are we really? Who do we work with? Why on EARTH would someone hire us?

As the founder of Tilted Pixel, answering these questions and writing the main content fell to me. Boy was that an adventure!

Writing about your own business is always ten times harder than writing about someone else's; you know so much and everything seems critical. Did people choose us because of...

• The fact that we dig deep into your marketing and build a website that supports it?
• Requiring every website page and design decision to support your business goals?
• Editing tools that leave marketers grinning with joy because someone finally understands what they need?
• Maybe it's the ridiculously dedicated on-going support?

We're all ridiculously proud of what we deliver to clients at Tilted Pixel. But are any of these factors THE reason to work with us? Not on their own. For that we need to dig deeper to find the common motive that drives everything we do above:

Tilted Pixel Delivers Results!

That's what we put laser focus on with every project, and that is why we want people getting in touch. And that is what the content came to focus on.

Never underestimate the content writing process. It takes time, and it requires being able to focus undistracted for several hours at a time. It requires understanding the story that you want to tell. By the time the Tilted Pixel website content was finished, it was responsible for the consumption of at least 50 cups of coffee throughout coffee shops in three different countries. But it got done, and it was time to move on to the design.

Step 5: Graphic Design

Finally, time for the visuals! Notice how design is step 5, not step 1. That's the difference between simply designing a website and hoping that it works, and a strategic process built on delivering results.

With solid objectives, wireframes, and some content ready, it was time for design. The design on a project begins with a design brief, which goes into further detail about the Tilted Pixel brand and what we were trying to achieve with the design.

The next step is to turn the design brief into an actual look-and-feel for the website. This is accomplished by creating several style tiles that allow us to experiment with the general look-and-feel, without having to create entire designs that get scrapped.

Here is version 1 of the style tile we decided was the winner:

With the style tile finalized we get to the really good stuff: designing the website. Our design process always begins with the home page and an example of how a sub page would look like. The home page is the natural choice because it's normally the most important and complex page, and the rest of the website content inevitably exists to support it.

One of the most exciting parts of the development process is the unveiling of the first version of the home page design. For the first time the actual appearance of the website begins to take shape, bringing together all the hard work of planning, wireframing, and writing, into something that can be seen.

With version 1 done (see right) we were off to a good start. The process then went through several iterations. With each iteration we would show the designs to a test group of people who would review. We made sure to ask specific questions that would test their understanding of the messages and usability of the site, as well as qualitative feedback on the look and feel.

Some of the main evolutions in the design from the original concept:

• The logo wasn't working quite right with the modern header design, so we modified tweaked it and the header to create a badge that focused on the symbol in our logo. It's what all the cool kids are doing anyway.
• The icons under "What Can We Build For You" looked good, but didn't really convey sufficient meaning. We tackled the problem by using more abstract images instead.
• The footer lead to too much orange on the page and wasn't distinctive enough from the content.

A few tries later, we were happy with our new baby and it was time to create all the other website pages. These were completed more or less in parallel as content and wireframes became available (we actually started the design process before all content was written).

Step 6: Shooting Video

While content was being written and designs formed, we were also working on shooting several video testimonials that would live on our home page and in our portfolio section.

We felt very strongly about making sure that the videos were authentic with real client feedback. The videos were shot without a script (other than a very general outline of three main parts to each video) and on-location. These videos were then edited further to insert shots of the website being used with the client speaking over top.

Browse around our portfolio to see the final video results.

Step 7: Programming (everything comes together!)

Up until this point we have pretty pictures, lots of content, and awesome videos. To make it all come together into an actual website requires programming expertise.

A website project is generally split into two types of programming: frontend and backend. The frontend controls the look and feel. It's what allows your website to display correctly, to show little animations, for videos to play, and for the website to resize correctly to fit your smartphone. The backend takes care of storing and delivering all the website content, and allowing for complex functionality (such as emailing the quote form to us when it gets submitted). Both are required for a great website.

The complex design, obsessive desire to look great on a variety of platforms, and little animated touches required significant amounts of frontend development to get it right. We wanted to create a certain experience and that required paying attention the little details.

The backend portion required less programming time, but is nevertheless very cool. Thanks to the Tilted Pixel Platform we are able to edit the website's content, post new blog entries, and manage the portfolio without having to modify any code. This is a huge timesaver and opens the website up for editing by anyone on our staff, not just the tech team.

Step 8: Testing and Launch Day!

As you have probably caught on, proper testing isn't just a step, it's something that's done throughout the development process. Still, a final testing stage is required. At this point we go through the site with a fine-tooth comb to catch all the little glitches and bugs in the work, particularly on different devices and browsers (one of the toughest parts of web development is that your work is never guaranteed to appear the same way on everything).

At some point it's time to stand back, accept that you have fixed all you can find, and launch your hard work to the world. Proper planning and coordination is vital for the site launch and it requires making sure a few critical pieces are in place:

• Technical: access to domain name information, servers, etc is available.
• Marketing: the marketing plan is in place, and promotion is set to start.
• Development: the appropriate people are in place to launch the site and troubleshoot any issues.

Side note: Making sure your website launch fits your marketing is vital and will make a huge difference in the results that you get. We will be writing more on this topic in a future post. 

Step 9: The Real Work Begins

Just like we tell our clients, launch day is the starting line, not the finish. With a new website presence we must now:

• Make full use of it in our sales and marketing efforts.
• Write content and shoot video for our Blog and Online Marketing 101 sections.
• Continue to tweak the website. No website is perfect on day one and as visitors find more glitches or provide feedback, we continue to make adjustments.

We look forward to doing exactly that.

Website Credits

Realizing the vision for a website requires multiple talented individuals to make it happen and our new site is no exception. This project was made possible by:

• Graphic Design: Kyle Nash
• Front-end Design: Ira Vilchynska
• Content creation: Matt Inglot
• The rest of the Tilted Pixel team: working hard on client projects, so that there would be time and resources to get this done!

Special thanks goes to the numerous people that (in)voluntarily became the Tilted Pixel website focus group, sometimes at odd hours of the night. Your feedback has made the end result so much better.

Have questions about the website development process? Feedback about the website? Leave a comment!