Saturday, 15 October 2011 17:02

The Typical Ringer Design Workflow

Written by 
Rate this item
(0 votes)

Design Meeting & Research - We want to know everything about our clients. We believe a company’s website is more than HTML CSS and Images thrown together on a page. The more we understand about our client, our client’s customers, and their competitors, the better the end result will be.

Design Meeting & Research - We want to know everything about our clients. We believe a company’s website is more than HTML CSS and Images thrown together on a page. The more we understand about our client, our client’s customers, and their competitors, the better the end result will be. I will usually gather as much style and aesthetic preference information from the client and contract that information with the styling of their competition. After talking with the client, I generally have a solid understanding of what the website needs to look like.

Pen & Paper Comps - This is the fun part. I start with good old fashion colored pencils, markers and crayons when necessary. I'm actually not much of a pen and paper artist, however, I think it is vital to the design process. The pen and paper comps are almost always done with the client present. This allows me to share my layout ideas and interface with the client in real time. Our ideas usually evolve together, but by the end of this phase we all have a good idea of how the site will function, have a good understanding of the layout and variations, and the general aesthetic styling.

Photoshop Mockups & Revisions - This is where all of our ideas and concepts start to take on a personality of their own. It’s crazy how once we start seeing the design come together in front of us it recharges and invigorates me as a designer. The main challenge here is not to go overboard. I constantly have to think about how changing an element or adding detail will affect the rest of the process. At the end of the day the designs need to be functional and easily translated into HTML / CSS. This places limits on how "out-there" we can get with the design. With a little magic and some design guru trickery, I can nearly always get the detail and functionality into balance.

Slice Design & Generate HTML / CSS - This is by far the hard part! I have to take off my artist hat and put on my engineer helmet. Anyone who had the task of cutting up a custom site design in Photoshop can tell you it can be tricky. You have to think in terms of layers and space. I strive to create a flexible design that will work regardless of the content and will be somewhat future proof. Online people call this Pixel Perfect Design, I call it turning a painting into a puzzle. Depending on the complexity of the design this usually is the most taxing and time-consuming part of the design process.

Install & Configure Content Management System (CMS) - Many of our customers opt to utilize a content management system. We here at Ringer feel that the best open source content management solution available today is Joomla. We have been integrating Joomla into our designs for three years now and are very pleased with the flexibility and overall horsepower of the system. This is where my team steps in and starts sharing the workload. We setup hosting, create the MYSQL databases, and install the Joomla core files. Once installation is complete we run the security patches and updates, install our favorite administration components, and test the system.

Create CMS (Joomla) Templates - Creating a Joomla template is a pretty easy task - If the site HTML / CSS was created with Joomla integration in mind. I setup my module positions and create the XML code that Joomla requires for smooth operation. Often times we need to create several layout variations or templates to accommodate different content types and layouts required by the client.

Site Content Build Out - We generally work with one of our copywriters to create all of the copy used on the site. I tell people constantly, "I am a visual artist and not much of a content writer". I do however understand what the customer should be reading and how to setup a sale on the site. Balancing keyword placement, providing valuable content, and pitching the site visitor all at the same time requires a keen attention to detail. We feel that when content is properly placed and balanced with some interactive components the end result for the client is always successful.

Install + Modify Module CSS - This phase is often a back breaker. Most designers don't take the time to modify the module CSS and PHP code where necessary. Ringer believes that the devil is in the details. It’s the small adjustments to a slider module or the slight color shift on a slide show that makes the site look 100% custom integrated. My goal here is to make it look like the module was custom made for the custom design. It takes time but the payoff is always worth it.

Content Optimization for Search Engines - This is where we take a fine tooth comb through the website and making sure that the header title and alt tags are all properly formatted and include all of the valuable keyword phrases. This is clearly Phil’s department. See his blog posts for additional information here.

Final Modifications & Site Launch - The day we have all been waiting for! We are ready to collaborate with the client and generate a list of punch-out items. We all want the site to launch so we rocket through the list and get the site perfect for unveiling. Pop a bottle of sparkling apple juice and break out the fine plastic ware... the site is up and running!

Read 843 times Last modified on Tuesday, 27 September 2016 16:13
Gabe Meacham

Gabe has over 15 years’ experience in designing and developing business web based automation systems.

Slide background

Goza Tequila

Branded Website - June 2016

When I met Gabe and the rest of the team at Ringer I really felt like they could bring my site to the next level. They brought plenty of ideas to the table in our first consultation. That never stopped throughout the process of building the site out. That’s why we ended up with such a great website, custom to us. I’M HAPPY I HIRED A RINGER.


Slide background

Custom Suit Shop

Custom Responsive Website - June 2013

It was nice because there’s the professional photographer, there’s the models, everything’s coming together and I look up and there is Gabe, Gabe actually comes to the meeting to supervise for the whole day, it was something I didn’t expect, A very nice touch, a personal touch!


Slide background

Hidden Gems 411

Custom Social Network Platform - December 2016

"While working with Ringer, they always kept me abreast of what was going on with the project. I never had to ask what was happening. They always kept me informed. The website is way better then I ever dreamed of. I would highly recommend Ringer to work on your project."