Having had to work on iPads these past 3 weeks I decided to see what the for hire graphic artists were offering. I could not have been more disappointed with their offering. While the designs were functional they all lacked pizazz. It was like dealing with my former graphic artist. The designs were simple, mono-chromatic and boring. Crestron's graphic artist consistently does a better job of integrating functionality and sexiness into his designs. Even GWStudios whose work had been so good disappointed.

Does anyone know of any graphic templates that combine functionality with some sexy graphics? And if anyone wishes to get some sense of what I think is sexy take a look at the Crestron iPad template.

Alan

Government Intelligence

Escalade Hybrid

Sexy Touchpanel

As you know Alan, Crestron Mobile still lacks a lot of the ingredients that make up a typical touchpanel. Then there is the portrait only issue. This means that you cant just port your 1024X768 panel. Actually.. Crestron Mobile is 1004X768 to allow for the iPad status line at the top. There are other odd issues like not being able to use guifx fonts so as an example.. i have to create a graphic for each transport button.

AFAIK this is whats available right now.

http://www.ntdesignsonline.com (encompass - horizon)
http://www.blackmancustoms.com (eclipse - fusion)
http://www.customcodecrafters.com (x-ray)
http://www.guifx.com (victoria)

This is what im working on:

Diet Soda

Light Cigarettes

Yours are better than anyone else's by a large margin. Yet it's still monochromatic, save for the channel icons and bottom menu bar.

You've seen the Crestron vtp file. While it needs a lot of editing its images add substantially to its "sexiness." I'd post my editions to Crestron's work but I don't have a url to serve them from. My point is that none of anyone Else's designs approach what Crstron's graphic artist is coming up with.

Why is that?

Alan

Crestron's iPad demo uses semi transparent buttons and borders along with interchangable backgrounds. This allows you to see the monochromatic buttons and layout borders on top of the multi-colored background choices. Looks nice.

My template is actually more colorful than i originally wanted. I was going for a flat black SWAT team look. I added in the colorful icons later after getting feedback about it being monochromatic. My design was meant to be 1 color so thats why it is :). This was the original screenshot.



If you look at this gallery [Link: ntdesignsonline.com] from NTDesigns you will see the encompass template. The background graphic can be swapped with anything you want. There are several options included and you could always use the one you like from the Crestron file you like. The C3 and BSD templates are similar. I think that they chose the 'not so crazy' background graphics so they would appeal to more people. I think you could take any of those, swap the background and have a similar look to the crestron ui.

I like the transparent stuff but i prefer solid colors with gradients. I also love the wild background graphics but others want the UI to look like an antique jaguars dash board. If you look at the guifx blog and read the responses about their Victoria UI you will see that the opinions go from "wow this is so cool" to "i hate it, its old fashioned". I would wager that some love crestrons ui and some hate it.

Destiny was a huge improvement over Gel and i would guess that most CI's are using it. The crestron iPad template is like a transparent Destiny. Its attractive and i assume many dealers will use it. The primary reason to use a purchased template hasn't changed though. You get something that sets you apart from the competition and you get to choose one that navigates like you want it to.

First of all, I see no evidence that GUIFX has a clue. Some of their work is clean but their GUIs are almost never functional. Even the work that was supposedly sexy, as was the case in the "cockpit" GUI was really a POS. Crestron did them so much better in an equally ugly but far more functional GUI.

Most graphic artists are taught that monochromatic GUIs are evidence of good design. From my point of view they point out that they may know how to use Photoshop and Illustrator or some other graphics suite but they haven't a clue about what constitutes a good touch panel design, let alone good GUI design.

I've been very fond of the work of GUIWURK and NTDESIGNS but their latest efforts reflect the sad state of touch panel design. The designs may be clean and they may make the seller a profit but they are boring and, worse, not particularly elegant GUIs.

You use some of the required elements that are missing from your competitors' work. You need to use texture, shape and color in the design. Your mixing round and rectangular buttons is very good and your use of depth on mute and previous channel commendable. You need to break up your cursor and keypad areas with textured and oddly shaped boarders. You need to use rectangular buttons of different sizes. Yours are too regular. Some might call this elegant. You would surely receive high marks from the graphics art professors.

But Crestron's graphic artist understands something all of you miss. His designs are visually interesting and pleasing. They contain buttons of different sizes, shapes and textures. He uses color and borders to advantage. Moreover, in his latest design he is doing more than using transparent and semi-transparent buttons over colorful backgrounds. He is placing those buttons into very stimulating images such as the bending film graphic he uses in the iPad DVR menu ( and I apologize to everyone for not having a web page on which to serve this image. ). Look at his design for the iPod. He's woven a textured background on which a variety of button shapes and colors sit. And he's situated a variety of images onto those backgrounds, an iPhone of the ipod, swerving, colored film negatives for the cable DVR that are visually stimulating without being overwhelming.

At the same time his touch panels are more efficient from the point of view of the GUI flow. They are functional and attractive. Destiny was a huge improvement on just about any design I've seen from the design community. His iPad designs put you to shame. I doubt the difference is in understanding graphics software or his understanding touch panel resolution and how to use this to advantage in a specific panel design. He seems to understand that you can make a functional panel attractive and that good graphic design does not have to be monochromatic. It's not just his use of png graphics on to a variety of backgrounds. It's his use of texture, shape, color and images in a design that is visually stimulating but not overwhelmingly so.

This design works perfectly well on an iPad, 8x or VPanel. It's not going to work well on a 6L or 6x. But his use of color, texture, shape and depth puts the rest of you to shame. Since I am aware many of the designers pay attention to these sites I wish you all would pay more attention to this man's work. Screw what you've been taught in design school. They're wrong. Or put slightly differently monochromatic designs can be improved upon greatly with slightly darker or lighter, odd shaped boarders on which your buttons sit. He's show the way with his Destiny graphics and you all have failed to pay attention.

Alan

I am still in the midst of finalizing a few panels for a couple of projects, and the one thing that comes to mind... this panel would be much more pleasant to use in the landscape orientation. I find trying to populate a panel that is in the shape of a book, to be quite awkward. I don't even necessarily even want dynamic portrait / landscape orientations, but I suppose a future version of the Crestron software would make that a nice option, as long as it has the ability to turn the feature off where not appropriate.

I cant blame a design class on my shortcomings. I downloaded the trial version of Macromedia Fireworks about 8 years ago and stumbled my way thru it. I got interested in web design and needed to create a logo for my site. About 5 years ago the CI firm i worked for purchased a guifx template to use on a large project. The TPMC-10 was fresh off the assembly lines and we needed a template. When we opened it in VTpro-e we realized for the first time that we couldnt change it as much as we would have liked to. That was the good old days of jpg's and bitmaps so it wasnt easy to move things around. This prompted my boss to have me design our first GUI.

When the TPMC-8X showed up with transparent png's i got interested in Fireworks in a big way. Another thing that happened was i moved out of the city into a house in the suburbs and began traveling a lot so i had tons of free time. You can see when that happened by looking at my Join date here at RC or the size increase in my pants (thank god for elastic waist bands). I have been a member here since the pronto TS-1000 and Phast systems were our bread and butter but i never had time or any interest in posting here. Once i started posting here i got website fever again and guijaboard was born. Then wiremunky. Then both became blogs. Then the freebie GUI work introduced me to someone who was able to set up a shopping cart for me at guijaboard. I watched a movie one night that had a SWAT team in it and i sat up until 4AM designing the screenshot above. The date is in the screenshot "October 2 2009".

Not that you asked for it... but thats my story :). You wont find a ton of graphical wonder in my templates yet because to be quite honest my skill level isnt there yet. I wish i had a year to take off and take a graphic design course and i actually think about it all the time. But a mortgage and bills and slow economy are in the way right now. What you will find in my templates is carefully thought out placement of commands that make it easy to navigate and use.

My only comment about the Crestron GUI guy is he had a head start. He knew what the limitations and specs would be before everyone else. This helped him complete his first but its not an argument against your opinion about the quality of available UI's.

I like TACTICAL a lot but i know there is a very small market for something so specific. I imagined it on the bridge deck of a luxury yacht when they want the lights low at night but still need to be able to use the touchpanel. Or at a security console some where and finally in a theater setting. It does a great job of staying dark even when its lit. My new template thats still in the works is totally different. Its bright and comes with 7 colors for all buttons/elements/backgrounds so it can be mixed and matched. The idea behind this is to give a programmer options for appearance without translucent backgrounds. I like the web 2.0 look and im trying to stay away from translucency. I know how do it but now that we can do gradients (more colors and higher resolution on touchpanels) im sort of stuck on it. I did this translucent set a few years ago.



This is the guifx blog entry i talked about in my last post [Link: blog.guifx.com]. 55 comments and opinions that are allover the place. The final version of the template came with multiple background options. I am not saying this template is any better or worse than any of the others available. I am just using it as an example because its the only blog poll of its kind and it does a great job of illustrating how no one sees things the same way.

My personal opinion is that Victoria is very well done. I think they came up with a good concept with Deana and polished it with Victoria. There are 2 issues with it that i have.

#1 is having multiple pages for a menu or having large icons for activities. This can be solved by using smaller icons and carefully arranging the buttons. I know why they do it.. to make the small panels match the big ones. But IMO.. the dealers shouldn't be selling 5 different model panels in a house so i dont think the GUI template should have to make up for their poor design skills.

#2 In the Deana video you select a source from the activities menu then your prompted to select rooms to send it to. I prefer that a panel is defaulted to the room its in so if i press iPod.. the iPod comes on in the room im in. I think 99% of the time you will be operating the room your in an 1% of the time you will be wanting to send a source to multiple zones. But this is also an easy fix. You remove one page flip and your navigating the panel the way i would like it.

I dont use the term Activities because IMO clients dont know what the hell that means. I didnt know what it meant until a couple of years ago when someone here at RC explained what "activities" meant. If they are watching tv or listening to music its as far from being active as they possible can be :). I call it Audio Video or Sources or TV Music. This is also easily edited from their GUI or any of the others.

I like the way they have separated subsystems from AV also. And if you look at the iPad UI from NTDesigns you will see they have also taken advantage of the new design/additional screen real estate and separated subsystems from AV. I like this concept a lot especially now that there are so many sources and features available. I have something in the works for the company i work for that i think is even better but i cant post screenshots of it now or maybe ever. I think it finally and completely nails down navigation for large projects making GUI's 100% intuitive. I did not come up with the concept but i think its really good.

Another thing i would like to mention is that 2 people can look at the same thing and see something totally different. I can look at a hand drawn sketch of a menu page and visualize it in a million colors with different button finishes. My boss has to see a screenshot of it. I cant just throw in squares where buttons go. He needs to see the buttons as they will be.. placed exactly where they should go. I can look at a button and know its 10 pixels away from another and he has to turn grid-lines on to make sure.

My ability to visualize this stuff makes it so when i look at screenshots from the Crestron GUI and screenshots from the one at NTDesigns.. i see the same thing. I can imagine using the same background on either one and having them look exactly the same. I can make the buttons pretty and now i have a good idea of how a panel should function but without my boss there planning it out i wouldnt be where i am at. I could say the same for the racks i wire. I got good at making the wiring pretty because i didnt have to reinvent the wheel at each job. I dont have to spend time making it up as i go. I get drawings that show where things are positioned in the rack and schematics to show how things connect. The drawings are planned and thought goes into how they will wire so we dont have bundles crossing each other or power cords blocking the path that my speaker cables will be running. We spend 45 minutes discussing where we should put the ethernet switch so we make sure it is serviceable, can be wired easily etc. The same attention to detail goes into the GUI. I literally HATE to work on the GUI with my boss because its painful :) but it always pays off!

When he looks at a finished panel.. he can "see" how things should be laid out much better than i can. My current layout was decided by him 5 years ago. The way things are broken up and positioned is something he spent a significant amount of time on. What im getting at is that when the GUI guys are looking at these panels they are not seeing what you are and you may not be seeing what they are trying to show you. Its quite possible that Crestron's GUI guy having access to Crestron in a way that no one else does is why he or she has created something that your in love with.
I
m working out of town tonight with a lot of free time. That should explain the many paragraphs of me jabbering on :).

I knew of 39's relative "newness" to the graphics realm when I first started talking to him about a couple of things for my business. I have to say that I think that he has a bridge between artist and installer ( a little heavier on the installer) which gives him a unique advantage to most of the graphics designers who merely dabbled or spent a short time installing. I like tactical a lot and think it is a much better design than many of the guifx products that I have looked at, but it isn't for every client. I also think that he spent a lot of time designing a real template from a users point of view.

I think that 39 may be able to continue his graphics education and put out products that will challenge the CI graphics template leaders we have today.

Additionally though, I agree with Alan. I think there is a lot of room for improvement when it comes to UI design for a non geek system owner from everyone in the field. Women are the most critical of the UI's and I can't say I blame them. The days of the fat husband holding the clicker are gone unless you live in Alan, Roddy's or my home.....

or ed's. don't leave out ed.

(POS = Piece of Sh*t, in this case?)
Though honestly I agree with your, haven't used an UI build by them I can't say for sure. Judging by the screenshots however it seems that the G in GUI is good, but the UI part is lacking. I don't think it looks ugly at all though. It's quite stylish, though they make the effects way too much and large in my opinion.


No, just no. That's not what you get taught. You get taught which colours work together! That's more than just 1 colour. 

1 colour however is much easier to incorporate in your GUI than several colours, naturally it's more common to find 1 colour layouts than multi-colour layouts.

Especially with templates, templates are per definition made to work for several people.

If you want a good GUI, you will always need to get a custom done GUI. Why? You might like it, but a lot of people don't. If the people are 50-50 on the design instead of 70-30 you're missing a lot of sales.



This is not the state of touch panel design, this is the state of template design. Again if you want a good, visually appealing GUI. Hire someone to do it. (Like me :))


Placement, size, textures, shape and colour affect a lot. You will need a custom design, because not 1 device is the same. When it comes to several devices a LOT is different. You need to design the GUI to work FOR the client WITH the devices. This is of course impossible to achieve with a pre-built template.


Where can I find these designs? (i'm authorized. But I doubt you're talking about the designs under the "GUI solutions" link. Is it on the FTP or something?)


I really want to see these templates.
 

Honestly Alan, I think your impression of graphic schools is wrong. Or the schools in the US and the EU differ a lot.

What I like about 39 cents templates is that you can really see the growth he went through when it comes to those. Keep it up, at this rate you'll be a fine GUInizer in no time.

[Link: crestron.com]

Apple_iPad-XMac_Demo_2010
Models Included: CRESTRON-MOBILE-PRO-G, SW-XPANEL-FOR-MAC


The vtp file is embedded in the example program. To be clear, it's not a perfect design. It does require customization. But it gets the important points right. And Crestron's graphic artist gets it right more often than anyone else selling templates.

Yellow Jacket blows away GUIFX's cockpit GUI. Adagio Nitrate and Destiny get more right then they do wrong. All require editing and customization, to get them to match one's design goals. That is to be expected. I've only seen one other person who worked for a company for whom I once programmed who also got GUI design right ( and I mean touch panel graphical design, not touch panel GUI design. I don't expect a graphic artist to understand GUI flow. ). Whose designs incorporated color, textured boarders, different button shapes and depth and were visually interesting without going over the top.

In all honesty the stock TPMC-10 GUI and GUI code were among the best examples I've ever seen. It's a lot of work to modify but it is a fabulous example of aesthetic touch panel design and GUI flow.

I do not think his designs are better because he has inside information. It's not just his use of png graphics. Yellow Jacket, Nitrate, and Destiny use traditional jpg and bmp graphics. He does use curved images, textured borders, and subtle use of color differences. His work deserves imitation. Many have said that Destiny is being used by many dealers. It's not just because it's free. That's a factor. But it's significantly better than any of the designs template designers are offering.

My brother and sister are in the design business and they mimic the design goals that can be found in touch panel design.

In a past life I took a GUIFX design and spent considerable amount of time modifying it to work as a GUI. It's not that all of their designs suck. Their cockpit design ( which probably was NTDESIGNs work ) was less than satisfactory. If you look at the Crestron designs here you will see they are generally superior to the design template community.

[Link: crestron.com]

Alan

Stamp is absolutely correct about some of the limits Crestron puts in VTPro-e fpr iPad template creation. When I prted Fusion to the iPad, I wanted it to look just like the other Crestron designs with the static bars on the top and bottom and not something completely different than the others.

When I decided to create a port for CommandFusion, I realized that the only way I could create a design that worked for both orientations in the same template was to start over. The iFusion template that I came up with is a total re-work of the Crestron version, almost every element, button, etc... was scrapped in favor of a brand new library. The only carry over was the activity and page icons which went from 41 to 101 total because I added a lot for newer devices like 3DTVs, 3D Blu Ray etc... and a few that I missed like DVD/VCR combo.

I agree that our Crestron iPad template is not nearly as nice as the CF version, but is was CF's GUI designer that allows for the swipe features and dual orientation. Neither of the two big players (Crestron and AMX) allows for the flexibility and creativity of CF, I think they both wanted to get something ready as quick as they could.

I just ported the CF iFusion (iPad) template to work with Bitwise Controls as an exact clone, but without the swipe features and popups. BC uses only full pages and no popups, so some elements the design had to be re-thought to work this way, but appears almost identical. Bitwise will be adding the ability to have both landscape and portrait in the same template in the near future but the initial iFusion design is portrait only so it can be used when docked.

When it comes to opinions on touch panel design, you can ask five people and usually get five different opinions. Aaron Craig at NTDesigns, Stamp, Guilink, C3, Fiasco, myself and a handful of other designers all have thier own unique styles and they are all completely different.

When I approached Jerrod Bell about creating an iPad / iPhone template for CF, who is also the owner of Guilink, a direct competitor of mine, he was all for it. Most of the people in the touch panel design community operate under a freindly "truce" where we link to each others sites or pass along business to one another. So, I say take a look at what everyone has to offer before you make a purchase and buy what you like.

Getting back to the topic at hand, as soon as Crestron and AMX allow for dual orientation, swipe menus. etc.... I would happy to go back and convert them to be used at thier full potential and make them as appealing as possible. Right now, CF is the only program that lets you operate your GUI like an Apple device and not just an emulation of your standard touch panels, which is why it appears so different than the Crestron and AMX versions.

Here is a link to the video if you want to take a look. I have a newer one that will be uploaded soon. I have added more pages and features since this was made and I also have a video for the iPhone / iPad touch.



I think Stamp, Aaron and the other GUI designers out there are all incredibly talented. A lot of work goes into these templates, especially when you come up with a new design that spans every resolution for a given manufacturer.