Design Competition Discussion & Submissions

[MACscr]

Here is bigger one:

http://img8.imageshack.us/img8/521/78controlpanel2.png

 

Um, thats just a generic design and not specific to WHMCS. Your also not showing the 3-4 areas that are required as part of the contest.

[Matt]

Hi Guys,

 

Thanks for all the enquiries and entries. We've only had 5 submissions so far which is a little disappointing, but hopefully everyone is waiting right until the end to submit their ideas!

 

With regards to extending the competition, it would be something we would do if we have to, but ideally if you could at least get a mockup of your initial idea, even if it were only 1 page, submitted by the deadline, then that would be preferred. As otherwise it's not fair to those who have met the deadline. And that deadline is 5 days away.

 

And in answer to some users who have questioned why we aren't coming up with a new design ourselves, firstly no it's not some sneaky money saving scheme! Rather we thought that as there's a lot of web developers & designers out there who actually use WHMCS, that they might have some great ideas that we haven't even thought of yet, and so the aim is to try and pool all the resources together and come up with the best looking and functional client area possible. We've done all the design used in WHMCS in-house to date and so this time we're trying something different. Hopefully it works out!

 

Matt

[thehost5968]

Matt

 

Could you not make the client-area template work the same as the order forms template then all the submissions could be made and used for all by all.

[mojahed]

Um, thats just a generic design and not specific to WHMCS. Your also not showing the 3-4 areas that are required as part of the contest.

 

It is not generic, it has been made for WHMCS, but i won't add the words like order now, or support ticket, as if it is the winning design the WHMCS team will add these.

 

What is the 3-4 areas ?

Edited August 31, 2011 by professional

[thehost5968]

Well hold on if they have not got the wording for whmcs in the design then what stop's users from (I am not saying you have or would but some would) just looking on the net and doing a screen shot and entering it?

[mojahed]

Well hold on if they have not got the wording for whmcs in the design then what stop's users from (I am not saying you have or would but some would) just looking on the net and doing a screen shot and entering it?

 

If the WHMCS TEAM accept my design they will slice it and integrate it to WHMCS so why i should fill out the design with WHMCS Wording ? The design is not a Pre-made template from the WEB , i have designed it using Photoshop once i seen that there is a competition .... it is a unique design , filling out the design with the WHMCS wording is not really important as it is a PSD Design, Is it important Mr. Matt , John, or the rest of the team please tell me ?

 

Anyone can do a design and make a screen shot and entering it here.

Thank you

[Gears]

We've only had 5 submissions so far which is a little disappointing, but hopefully everyone is waiting right until the end to submit their ideas!

Yes, waiting to submit the design.

 

...As otherwise it's not fair to those who have met the deadline. And that deadline is 5 days away.

Thank you!

[Clebson]

See my Client Area below:

 

Image 1: http://dl.dropbox.com/u/40718161/IMG-1.png

Image 2: http://dl.dropbox.com/u/40718161/IMG-2.png

Image 3: http://dl.dropbox.com/u/40718161/IMG-3.png

Image 4: http://dl.dropbox.com/u/40718161/IMG-4.png

[Brett]

I would like to throw my entry out there. One thing that I wave always liked about WHMCS is the ease of changing the template and fitting them to the design that I want. However, the biggest problem that WHMCS has is that the HTML and CSS are sometimes a bit difficult to work with.

 

I would propose that we implement a CSS framework. I came across a framework that Twitter released as an open source project called Bootstrap. It can be found here - http://twitter.github.com/bootstrap/

 

This will give the designer / developer a whole set of tools to use when changing the theme to match their own site. What I would like to see is the theme be more generic. No more colored backgrounds and use black, white and grey. I would also like to see the theme be better able to stand on it's own. This means that if someone were to upload WHMCS to clients.mydomain.com, it would look more like a stand alone portal that is vastly different from the main site.

 

So this is a very quick mockup of the front page -

http://www.giverepair.com/whmcs/whmcs_front_page.png

 

This is the front page with the top bar detached -

http://giverepair.com/whmcs/whmcs_front_page_detached.png

 

I will try and get a client area put together as well. Let me know what everyone's thoughts are as well. I will be submitting a couple more images of mockups for the client area and such.

Edited September 2, 2011 by Brett

[Driss]

Hello everyone !

My name is Driss and I work for a Moroccan hosting company as a Webdeveloper.

I've noticed your tweet about this competition earlier this week and decided to give it a shot

First of all, I wanna say that I don't do anymore webdesign lately but I tried to do my best to make a clean, simple, modern design and add a few things that were missing in WHMCS in my opinion.

 

Previews

 

Comments

 

Misc

A preview of the existing ajax order form in this theme

Quick rendering in other colors :

 

Highlights

- Currency and language switchers always available

- Company's contact informations on the footer and a "Call us now" on the header

- Domain checker widget in the homepage

- Client Area block acting a menu displaying basic statistics

- Main and secondary menus

 

 

Additionnal informations

Theme name : genious (this is not a typo, it's my company's name )

Javascript (optionnal) : DD_Roundies, an awesome standalone library for rounded corners in older browsers, focusing on IE (MIT Licence - http://www.dillerdesign.com/experiment/DD_roundies)

Graphics : The icons used in this design are under the Creative Commons (Attribution 3.0 United States) and are part of an icon set called Farm-fresh distributed by FatCow Web Hosting for free on their website (http://www.fatcow.com/free-icons)

Coding : I can do te PSD > XHTML conversion but I don't think I would be able to do it in your timeframe.. I'm overbooked untill the end of october.. but if you can wait untill then, there is no problem.

[MACscr]

I would like to throw my entry out there. One thing that I wave always liked about WHMCS is the ease of changing the template and fitting them to the design that I want. However, the biggest problem that WHMCS has is that the HTML and CSS are sometimes a bit difficult to work with.

 

I would propose that we implement a CSS framework. I came across a framework that Twitter released as an open source project called Bootstrap. It can be found here - http://twitter.github.com/bootstrap/

 

This will give the designer / developer a whole set of tools to use when changing the theme to match their own site. What I would like to see is the theme be more generic. No more colored backgrounds and use black, white and grey. I would also like to see the theme be better able to stand on it's own. This means that if someone were to upload WHMCS to clients.mydomain.com, it would look more like a stand alone portal that is vastly different from the main site.

 

So this is a very quick mockup of the front page -

http://www.giverepair.com/whmcs/whmcs_front_page.png

 

This is the front page with the top bar detached -

http://giverepair.com/whmcs/whmcs_front_page_detached.png

 

I will try and get a client area put together as well. Let me know what everyone's thoughts are as well. I will be submitting a couple more images of mockups for the client area and such.

 

Brett,

 

If it was up to me, you would definitely be the one in the lead so far by a wide margin. Would love to see more ideas though of an area that is a bit more unique to WHMCS. Maybe the client area homepage (aka, after user logs in)?

[mojahed]

Hi All i have designed the Ticket Page & View Product Page:

1-Home Page & Login Page:

http://imageshack.us/f/199/controlpanel2f.png/

2-View Products Page:

http://imageshack.us/f/33/controlpanel2viewproduc.png/

3-View Ticket Page:

http://imageshack.us/f/51/controlpanel2viewticket.png/

[Driss]

Lol I did a little mistake in my first post (posted the thumbs without the links to the real size screens.., please delete my first post and approve the second one... I tried to edit it but I couldn't...

Edited September 2, 2011 by Driss

[iJohnnyCP]

So far love Driss design. Its much more better than the ones I have saw. And Clebson, I can't see your image so please reupload. Thanks.

Oh and Driss, is it possibly to intregate some web hosting plans pages into your template or just a page empty for us to fill up?

Edited September 2, 2011 by iJohnnyCP
Just wanted to add some question.

[dordal]

Matt-

 

When you say "There are no constraints for it to look like the existing templates, this should be a completely new design." ... how far are you willing to go with that? Each template now depends on a specific set of Smarty variables passed on a per-page basis.

 

So you couldn't put, say, ticket details and invoice details on the same screen because they come out of two different PHP files ( clientarea.php?action=invoices and supporttickets.php ). If designers come up with designs that meld data like that, are you willing to make the needed modifications, or does it need to fit within the existing confines of the Client Area pages?

 

D

 

P.S. Brett, fully agree with the idea of using something standards based, e.g. Bootstrap!.

[MACscr]

Matt-

 

When you say "There are no constraints for it to look like the existing templates, this should be a completely new design." ... how far are you willing to go with that? Each template now depends on a specific set of Smarty variables passed on a per-page basis.

 

So you couldn't put, say, ticket details and invoice details on the same screen because they come out of two different PHP files ( clientarea.php?action=invoices and supporttickets.php ). If designers come up with designs that meld data like that, are you willing to make the needed modifications, or does it need to fit within the existing confines of the Client Area pages?

 

D

 

P.S. Brett, fully agree with the idea of using something standards based, e.g. Bootstrap!.

 

Not really the best solution, but I always just wrote smarty plugins to add that extra functionality. Though to be perfectly honest, i regret ever suggesting matt use smarty as a templating engine. I liked it backed in 2006, but have since learned that straight php is a much, much better way to go.

[Driss]

So far love Driss design. Its much more better than the ones I have saw. And Clebson, I can't see your image so please reupload. Thanks.

Oh and Driss, is it possibly to intregate some web hosting plans pages into your template or just a page empty for us to fill up?

 

Thank you.. here is a blank page as u asked..

http://dl.dropbox.com/u/227591/whmcs/empty.png

To be honest, my idea at first was to add also a "Featured Products" widget under the domain checker in the homepage.. but you know.. You can have a lot of different type of products and services (third party modules) and I wasn"t sure if it was something doable.

[Driss]

Not really the best solution, but I always just wrote smarty plugins to add that extra functionality. Though to be perfectly honest, i regret ever suggesting matt use smarty as a templating engine. I liked it backed in 2006, but have since learned that straight php is a much, much better way to go.

 

Twig (twig.sensiolabs.org) is the new Smarty these days

I personnaly don't see any problem using these templating engines... even if they are limited by the variables/information passed to them.. they offer an easy way to seperate the logic from the views. wich is a good thing for people who doesn't have the skills or just don't want to be facing some scary php code

I guess if something is missing, well... ask Matt

[thehost5968]

Hi Driss,

 

Can you change the portal and client home pages to have a like igoogle style I have the coding for it but can not do design and love yours.

 

like this:

Edited September 3, 2011 by thehost5968

[Brett]

Brett,

 

If it was up to me, you would definitely be the one in the lead so far by a wide margin. Would love to see more ideas though of an area that is a bit more unique to WHMCS. Maybe the client area homepage (aka, after user logs in)?

 

I have put together a demo of what I am thinking about. these are in no way complete, but it should give everyone a good idea of where I am going with this.

 

Here is a link to the home page. This is what the user will see when they go to the main site -

http://giverepair.com/whmcs/default_home.html

 

This would be the the site when the user logs in. Please notice the nav up top changes -

http://giverepair.com/whmcs/client_home.html

 

This is what the user would see when they go to the invoices -

http://giverepair.com/whmcs/client_invoices.html

 

Now you might be wondering how this could possibly integrate into existing designes. It is very simple. There is only ~4 lines that need to be commented out or changed.

 

Here are the pages again with the top menu detached. It should be easy to integrate this into existing sites -

http://giverepair.com/whmcs/default_home_det.html

http://giverepair.com/whmcs/client_home_det.html

http://giverepair.com/whmcs/client_invoices_det.html

 

This would cover the majority of the sections. Now if you notice, the search is now missing from the tool bar. After thinking about it, I don't know if the user would use the search from the main sections of the site very often. Instead what I would propose is to have the search section very prominently placed sort of like this - http://support.assistly.com/

 

Again, here is a link to the bootstrap docs - http://giverepair.com/whmcs/bootstrap/docs/

 

This would be basically building on top of a framework. If you notice on the HTML side of things, I have a whmcs.css file. Ideally you would never make any changes to the bootstrap css file. You would use the whmcs.css file to override any default changes that you want in that file. This will allow easy upgrading of the css framework in the future.

 

Let me know if there is something that could be changed to make this better.

 

Thanks!

Edited September 3, 2011 by Brett

[Brett]

One last quick update, and then I am done unless someone wants to see some other page.

 

Here are some domain management ideas -

 

Main domains list

http://giverepair.com/whmcs/client_domains.html

 

Domain information

http://giverepair.com/whmcs/client_domains_domain.html

 

Changing Domain Nameservers

http://giverepair.com/whmcs/client_domains_nameserver.html

[Grizzlyware Josh]

Looks great Brett! One thing, your menu at the top overlaps, would be better if the other menus closed when you opened a new one.

 

I'm running Mac OS X Lion & Firefox 6.0.1

[MACscr]

One last quick update, and then I am done unless someone wants to see some other page.

 

Here are some domain management ideas -

 

Main domains list

http://giverepair.com/whmcs/client_domains.html

 

Domain information

http://giverepair.com/whmcs/client_domains_domain.html

 

Changing Domain Nameservers

http://giverepair.com/whmcs/client_domains_nameserver.html

 

Brett,

 

Looks great. I will buy the theme if you dont for some crazy reason win. =P

[xpcwebhosting]

I would HIGHLY recommend writing a WordPress plugin that lets us place the order modules and such on our WordPress sites. This way we can pick whatever design we want easily. I'm not sure if I can even explain how badly I've been wanting something like this...

[Brett]

Looks great Brett! One thing, your menu at the top overlaps, would be better if the other menus closed when you opened a new one.

 

I'm running Mac OS X Lion & Firefox 6.0.1

 

Thanks, I kinda fixed the issue. The only problem now is that the menu will not hide when you click on the actual root menu item. I will see if I can fix that later. I am by no means a jQuery expert, so it will take me a little while.

 

Thanks for the feedback!