Designing the SimpleAdmin Theme: Login Page

Adi Purdila Jan 31, 2012

Read Time: 1 min

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

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Further Resources

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

Complete Websites Adobe Photoshop

Did you find this post useful?

Yes No

Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.

Adi Purdila

Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.

adipurdila