Join me in this screencast series as we build a clean, flexible admin template. We'll begin by mocking up our designs in Photoshop and today we'll get the ball rolling with our login page.

Admin Templates

With the rise of various Content Management Systems (CMS), admin templates are in high demand right now. Some of them are so popular that they've racked up over 2000 sales on ThemeForest in a relatively short amount of time.

So, what makes a CMS theme successful? Is it the design or the functionality? I think a little bit of both. Also, how can such a theme become a top seller? I mean, there are hundreds of CMS's out there. Can we really account for all of them and make a theme that would fit them like a universal size glove? Probably not. But my goal in this tutorial is to create a flexible theme that can be adapted to as many systems as possible.

We'll start with some quick mockups in Photoshop to get an idea of the general placement of the elements and also about colors and typography. We'll then continue with the coding part, learning and experimenting with EM layouts.

Part 1: Designing the Login Page

Further Resources

• Crisp web app icons - Webdesigntuts+
• Wireframing kits - Smashing Magazine