So lets take a look at some of my good (and not so good) designs and how my design patterns have changed or evolved since 2004. (I got asked to post something and I managed to come across some old archives of mine)
Prototype design that never went live:
(The design never went any further than that)
(Never finished either)
(Powered by bBlog)
I’ve recently seen two sites which have been very much inspired by two of my sites. The question is, how do I take this?
People have ripped my layouts before, it happened to Michele the other week, and now it’s happened to me again. The difference here is that these sites have been inspired only by certain parts of my layouts. Usually I’d go nuts and bring on the cursing but this time I’m not sure if I even want to.
How’s that for an update?
Take two – AvidCP, an accessible and usable control panel application. So previously , I took a bit of a quick look at the control panel solution i’ve been developing to run here. Tonight’s update focuses on the “Email Services” area of the system.
The Email Services section allows users to easily add mail handling for domains to their account. Further to that they can create domains which redirect to another domain or standard POP/IMAP/SMTP accounts and forwarders. The underlaying base of this is powered by Postfix and Courier-IMAP/POP3 as well as a MySQL database.
The client site implementation makes use of some javascript techniques to hide or show certain parts or features. This reduces the clutter in the layout but still provides full functionality to the user when they place their mouse over a certain item or click a certain check box.
The focus was once again on keeping the design simple and minimalist whilst maintaining the functionality of other control panel scripts. Other control panel scripts make horrible use of tables with hardly any spacing and present all of the information in one huge “chunk”. Not very appealing to look at (Yes Hsphere, I’m primarily talking about you!). My focus here is to try and get the word out to developers that there are much simpler and attractive ways of doing things instead of throwing all of the data on the screen.
After clicking on “Email Services” in the menu you’re presented with a page which lists all of the domains in your account associated with email. It shows you domains which contain mail accounts as well as redirection domains. Placing your mouse over one of the domains (and the section of data below it) will show the various control links for that domain – the delete button in the case of this screenshot.
At the bottom of the screen there is the “Add a new Domain” form which allows you to either add a new domain or forwarded mail domain. Want a forwarded domain? Check the appropriate check box and the form content turns in to one specifically for creating that (i.e., it adds another text box to enter the domain to redirect to).
Clicking on a domain leads you to another page.
You’re taken to a page which lists all of the specific mail accounts assigned to that domain. You get an overview of both your standard mail accounts and your forwards.
Once again – icons are used to differentiate between the two different kinds of accounts and the controls (Edit, Delete and Set as catch all) are shown or hidden using javascript depending if the mouse is over that item or not.
A form similar to that of the create domain form exists at the bottom of the page allowing you to create new POP/IMAP accounts as well as forwarded accounts. Using a similar javascript based system, checking either “Mailbox” or “Forward” presents two different forms allowing for the different types of input.
Clicking edit on one of the mail accounts or forwards takes you to a page where you can change a few of the options for that mail account – such as the password or redirection address.
Now, a bit on the back end of the system. I’ve developed a custom daemon in PHP which stays in memory on the server. This daemon checks the modified time of a certain file – if it has been modified since the last check then the daemon needs to perform some tasks. Tasks are assigned on the front end. An example of a task is the creation of mailboxes on the server (done using a Unix command). The front end stores task information needing to be done in the database and then touches the task to do file updating its modified time stamp.
The server was built in a modular way so that I can easily add new functionality to it by simply dropping a file in a “modules” folder and then storing the appropriate information in the database when I need to run that specific module.
That’s all for this little installment. The next module will either be DNS, Database or Web management.
There’s no doubt about it, people like simple things. Simple applications to perform simple tasks with a simple interface which is clean and intuitive.
When people come to me asking for design advice the most common thing I find myself saying is that you need to keep it simple but attractive. People are most probably visiting your site to find out some sort of information (Whether it be MSN Messenger related, or your own personal blog). If you think a layout looks good because it has all of this fancy stuff happening then it most probably doesn’t look good to other people who could care less about that. Minimal design can be attractive too.
And you’re about to ask what does this have to do with the subject line?
Today I found myself designing (after Dane requested it) a simple sort of control panel which would allow him to manage his POP/IMAP accounts and mail forwarders on my server. I don’t believe in traditional control panels which waste resources.
What I needed to do was build my own and keep it very simple. I didn’t have the time to add feature X and feature Y to it so I concentrated on what was important for myself as well as the people I host. Most importantly would be their disk and bandwidth usage on the server.
I’d already designed a framework set of scripts which run via cron jobs every few hours to calculate the disk and bandwidth usage on each account on the server so I just needed to build an interface to access that information.
So there we have it – a simple and attractive looking interface which directly presents you with the information you need and no extra “bloat”. It makes use of the Windows Vista icons which really add up making it an attractive layout.
I’ll throw up screenshots of the mail management screen when I get around to working on it.
You know how it works; you get tired of your old layout so you spend 2 months on and off trying to create something you would want to use. Once you finally hit the nail on the head and begin improving on what you’ve already designed, you get bored of it. You start again, only to find the same happening over and over.
Well, at least that is how it is for me. The number of times I created prototype layouts and threw them into WordPress over the last few months is just ridiculous. If I could find something I like, and stick with it, that is what I’d do.
That is what I did. I created something fairly quickly (as to not get bored of creating it), and decided i’d put it into place. Welcome to the new SurfiOnline, in a rather simplistic layout, but something I find is nice.
The short answer is: really busy. In fact, too busy to even wish everyone a Merry Christmas! I hope you had a great one, mine was!
Well, maybe me because I’m GMT +10:00. What does a new year bring for SurfiOnline? Hopefully a whole lot more in terms of activity, updates and design. I’ll be trying to get things as finished as possible given that I have time.
And MyBB you ask? Alot of things are happening. Peter, Dennis and I have been having a few branstorming sessions on things we’re going to add, the team and I have rewritten a fair deal of code, optimised things, and added a few new small features (we’re trying to concentrate on optimisation and code cleanups). You’ll hear more about a lot of this soon!
Happy New Year! and welcome to 2006!
I like mine with a touch of AJAX functionality and the script.aculo.us effect library for both commenting and live previewing of comments.
Coming soon.
Okay, so I promised earlier that I would have a new redesign finished by 1st November for the CSS Reboot. However, due to a few reasons, this is far from done.
I’ve been having trouble with inspiration and creativity recently in regards to design. In the little time that I’ve had to actually work on something, most of the time was spent sitting around trying to think of new and creative ideas. Of course, I came up with a few then when I began to play around with them – they were gone, didn’t look good or were almost impossible to create (mostly thanks to Internet Explorer).
A serious lack of personal time to do such a redesign is also something I’ve been suffering from. Too much work, too many assignments and just way too many other things to really even think about the CSS Reboot and redesign. I’ve tried to focus the majority of my spare time into MyBB as it is far more important to me than a design for this place.
Oh, back up on that Internet Explorer issue – when I finally did manage to come up with a header and menu design that I’m going to use eventually (Yes Peter, that is what I sent you – well a rough copy of it), I was struck with Internet Explorer like nothing else! “Well, scrap that, back to the drawing board,” I thought. I changed a few of my ideas and after hours and hours of tedious debugging in Internet Explorer and little changes to the header design I worked it all out.
I’m facing another problem now though – how should I design the rest of the layout? At first I was going to adopt a “semi-fixed-liquid width” layout similar to the Mozilla.org layout. However this wasn’t going to work because I really needed the min-width support in Internet Explorer – but wait, it doesn’t support it! In the end, I opted for another fixed width layout. Decision has been made.
For colours, I’ve decided to go back to orange and blue – two colours I now feel comfortable with. However I’ve decided I’m going to throw in a bit of a Retro 60’s look to the design with some green, yellow, and red too – that’s if I can make it look decent.
Taking a look at the rebooters – i’m very impressed and am now feeling very jealous! Here’s a short list of a few I prepared earlier:
.. Just a few.. There are plenty more on the CSS Reboot website.
There’s an update – sorry to disappoint those who were waiting on a redesign as well as my fellow rebooters.
So I decided I would signup for the CSS Reboot on the 1st November. What’s going to be interesting is me sticking to a dealine and coming up with a new design. Closer to the Reboot you’ll be able to take a look at my reboot profile which will hopefully contain some notes and screenshots of what i’m working on.