Breadcrumbs

Designing Lowter's Admin Interface

Here at Lowter, we finally have a few pieces of our new administration interface, something we have needed for months. When we moved from Ottoman to our own custom-coded system, I never actually coded an admin interface to accompany it. Everything was managed through PHPMyAdmin, directly adding content into our MySQL database. Awful idea I know. Now though, we have the ability to administer most of our day-to-day content on Lowter. One of the aspects of our new admin interface that I settled on right away is having the design extremely simple and unobtrusive.

Quite a number of applications that I have used have extremely complex admin interfaces. They usually look pretty, but overall there is a lot of clutter for an interface that only the administrator is going to see. This includes applications such as vBulletin (external link), Basecamp (external link), and Mambo (external link). All of these admin interfaces load slow (too many graphics), are hard to use on mobile devices, and add an unnecessary amount of clutter. Especially in the case of vBulletin and Mambo; their flashy interfaces contribute to the disorganisation within the applications overall.

When I started to design Lowter's admin interface I had a few goals in mind:

  • Use as few graphics as possible
  • Keep XHTML markup and CSS super simple
  • Lots of padding and whitespace
  • Simple colour scheme
  • Expandable menu
  • Make it relatively usable on a mobile device

One other nice aspect of the project - that really helped to speed things up - is that I only had to worry about the interface rendering in Opera, Firefox, and Safari. None of the Lowter admin use Internet Explorer, so a lot of time was saved not having to deal with IE. Opera, Firefox, and Safari all render identical in the case of such a simple interface, which is a huge timesaver!

Here are a few screenshots from Lowter's admin interface that resulted from my goals:

Screenshot of Lowter\'s admin interface

Screenshot of Lowter\'s admin interface

Anyone who has seen other admin interfaces that I have designed will notice how trimmed down Lowter's interface is from them. The notification boxes are identical, but overall the layout is super simple. It works very well to allow us just to focus on managing Lowter's content without an impeding user admin interface. Just as a comparison, the page size of our interface is roughly 6 KB compared to Basecamp's 187 KB and Mambo's 184 KB.

I've become quite fond of the very simple interface and I might recycle it for a few low-budget client projects that I'm working on now. Overall, I know the Lowter staff is relieved that I have finally got off my but and coded a useable admin interface!

Comments

  • Heh, reminds me of Jon Valvatne's simple admin interfaces for Avidgamers, though those might have been more out of lack of time than design since Jon was rather inexperienced at the time.

    Posted by Eugene Wee on Mon 8 Dec 2008 at 12:25

  • The new interface is nice to use. Simple and effective.

    It is a bit like the Avidgamers one. Been a while since I heard that name being used. Just had a look an AG seems to have gone now. Donno when that happened sick

    Posted by Matt Oakes (external link) on Mon 8 Dec 2008 at 14:22

  • I was looking for AG the other day too. Although it wasn't really direct inspiration at the time, I wouldn't be surprised if AG was somehow in the back of my brain when I designed this lol. razz

    Posted by Ethan Poole (external link) on Mon 8 Dec 2008 at 14:28

  • It looks quite a bit like the admin interface I created for Watchzine over 4 years ago. I might've been somewhat inspired by AG at the time.

    Posted by Frans (external link) on Mon 8 Dec 2008 at 14:58

  • I have to say that the screen shots do look good, it's a nice job.

    Posted by -=Hero Doug=- on Tue 9 Dec 2008 at 5:49