Developing a CMS Site. Part1: Design

I’ve decided to teach some of my coworkers and friends how to develop a dynamic website based on clean and valid XHTML/CSS and the WordPress CMS. This tutorial is aimed specifically for their benefit, but I figured i may as well offer it to the public, because I’m sure someone else out there will take interest.

***Please direct all comments and questions through this blog post rather than emailing me, that way others can review and build off communication back and forth***

Prerequisites

There are two main phases to web development and they are the most crucial. An application or website needs to have a good User Inteface (UI) and remain highly reliable/functional. These two phases are usually labeled as Front-end development (which covers everything from Graphic Design to coding in XHTML, CSS, Flash, and JS) and Back-end development ( which involves a server side programming language such as PHP, ASP, or Ruby and a database such as MySQL, MS SQL, etc). I’m going to use this terminology often throughout this tutorial, so it’s best that you research these terms now if you don’t know what those technologies are.

Part 1: Design

Lets get started. First I want you to draw a design. You can do this however you want, a lot of people jump right into Photoshop and start designing. I personally like to bust out a pen and paper and sketch first. I like to get a feel for layout, grid, and flow before I get too heavy into a designed mockup. This method may prove useful for those of you who don’t know photoshop, as it will help you understand and learn the process of creative and UI thinking and give you a blueprint to reference if you design without a PSD to breakdown.

Spend some time on this phase. Like I said its the most important phase. Often times, in the professional world, a designer will create 3 completely different mockups or wireframes presenting the same content. This allows and forces the designer as well as the client to see and think with three completely different concepts and ideas for presentation. I recommend that you do such as well. After you develop 3 completely different ideas, sit down with someone else and circle things that you like and dislike about each and try to chose the one that best presents the concept. If you can or want, merge ideas from the other concept designs with the base that you choose. Then refine it like crazy. Many iterations are often necessary to reach a design that you’re completely satisfied with.

The next tutorial will follow in 1 week. This will force those who are following my posts in real time, to spend the amount of time necessary to refine. Feel free to leave comments, ask questions, or make suggestions in the mean time.