Using the Ribbon Bar elements already in GUI Design Studio, our new design library, application template and prototype sample make it easier for you to get started quickly.

1. Ribbon Library

The Ribbon Library contains:

• 15 common ribbon groups: Clipboard, Document Views, Editing, Font, Illustrations, Links, Pages, Page Setup, Paragraph, Sort, Styles, Symbols, Tables, Window and Zoom
• 3 pre-configured ribbons that use the groups: Home, Insert and View
• An application window, menu and quick access drop-down
• Various grids for colour selectors and generic item selections
• Other popups including a page size and symbol selector
   

Once you’ve added these to your design projects you can edit and expand them as necessary for your own application.

2. Ribbon Application Template

The Ribbon Application Template, for GUI Design Studio v4 Professional edition, provides you with an instant starting point for a ribbon bar application:

• 3 ribbon tabs with associated drop-downs in their own component design files, ready for editing: Home, Insert and View
• A main application window hooked up to the menu and ribbon tabs

3. “Wordsmith” Sample

The “Wordsmith” sample prototype application, also available from our Design Gallery, is a tribute to Microsoft Word.

Initially built from the Ribbon Application Template, it expands on the existing ribbon tabs and adds 3 new context sensitive tabs for “Picture Tools” and “Table Tools”.

A scrolling Document design demonstrates how to activate the context tabs when objects are selected within the document and also highlight those objects with a bounding box.

Note 1: GUI Design Studio v4 Express edition users can open and run this sample prototype, and explore the various tabs and drop-downs. However, it makes use of Professional edition features to activate context tabs and selection boxes, so these will be permanently visible.

Note 2: GUI Design Studio v3 users can also open this sample and get a similar experience to v4 Express users. However, the sample makes use of many Ribbon Library components and icons and the sample/library paths changed with v4. To view and edit the sample project in all its glory, you’ll need to install (unzip) the Ribbon Library to a new “Libraries” folder instead of the usual “Samples” folder:

   C:\Program Files\GUI Design Studio\Libraries\

Use them in your own ribbon design projects!

We’d love to hear your feedback so let us know what you think of these new Ribbon resources and how you get on with using them in your own projects.

The iPhone Contacts application prototype example is based on the built-in Contacts application on the Apple iPhone. It was built entirely from elements within the library, very quickly.

Here are some of the key areas this example demonstrates:

• The typical structure for an iPhone application prototype project in GUI Design Studio.
• Putting together a Quick Concept flow of the application.
• The basic elements needed to create the screens.
• How a typical screen design is put together.
• How to create a scrolling section on a screen.
• Flipping between portrait and landscape oriented designs.

The project files can be downloaded from the example gallery page.

I hope this example will help you get your iPhone application prototypes off to a flying start!

This is also a really useful way of sharing your designs. If you work in a team, or in an organisation that creates multiple products, you can share complete designs, templates of multi-page design patterns or individual components. Not only does this help save lots of time, it also promotes consistency and best practice in your designs.

What’s been missing is an easy way for you to get access to design libraries and to share your own.

So we’ve just launched www.guidesignpatterns.com where you can download libraries, templates, samples and patterns, and make your own contributions to the community. So, even if you work on your own, you’ll be able to benefit from the work of others and to share your work with them.

Our aim for this site is to build up an extensive resource of common design patterns and elements to help you create your prototypes as quickly as possible.

Contributing your own designs is as easy as sending an email. To help structure and search the database of samples there are some simple guidelines to follow in submitting your work. Things like how to set the right tags and what files to attach.

To help you download and make use of the designs on the site, we’ve prepared three posts to take you through the process for libraries, templates and samples.

There’s also a helpful link within GUI Design Studio to go straight to the set of available libraries from the “New Project” dialog:

And there’s another link within the template browser to take you to the templates on the site:

We’ve started the ball rolling by adding an updated Web Widgets Library and some other templates and samples. We’ll be adding lots more in the next few weeks, so you may want to follow the RSS feed, or bookmark the home page.

We look forward to seeing some of your useful patterns on the site too.

The new features are grouped around interactivity and element and design sharing. They enable you to build more realistic and interactive prototypes and to share or reuse individual elements or whole design templates with ease.

New editions

GUI Design Studio is now available in two different editions.

GUI Design Studio Express provides the prototyping functionality that was in v3, but focussed on individuals without the need to share projects and generate specification documentation.

GUI Design Studio Professional builds on v3, adding new interactivity and design sharing features, and is better suited to those working on larger projects, in teams, or on multiple designs.

All projects created in one edition will run in the other, or in the free viewer, except that the enhanced interactivity features in the Professional edition (see below) are not available in the Express edition. You can compare the two editions here.

Prototypes get more interactive (Pro edition only)

As your user interface design develops, everyone involved starts to focus on the details of interactivity. What process does the user need to go through to achieve certain tasks, how many button presses, how much navigation, is it clear and obvious, can they make simple mistakes?

All of these questions, and more, need to be considered in developing and refining a good UI and they cannot be addressed easily in a simple mock-up.

GUI Design Studio v4 introduces a range of new features to enhance the realism of your prototype, allowing you to model UI behaviour that depends upon decisions or input that the user has provided. We’re providing a whole set of flexible tools to make it easy to do this and more.

Simple Variables

Interaction controls depend upon simple variables. You choose a name for your variable in the new Prototype tab of the Properties dialog and that variable is then assigned a value when you run the Prototype and interact with the element.

Most elements can have an associated variable, even Trees and Ribbon Bars, and these variables can be shared among elements.

This variable can control other elements in various ways. For example, you could use it to insert a name that the user has entered into a piece of text, provide a default value, or you could drive a progress bar from other elements.

Variables are also tied into the Storyboard elements, as you can set up values from the new “Set Data” box. This allows you to reset variables in your UI to a particular set of values whilst running the Prototype. You might do this to simulate having different users, to reset the UI to its default value, or to jump to a particular state.

With project-level presets, it becomes even easier to repeatedly test or demonstrate different scenarios.

Handling Radio Buttons

Radio Buttons can be grouped so that they can act in unison.

Keyboard Control

Now that your users can start to interact with the design in a far richer and more realistic way, they are going to want to navigate around it using the keyboard just as they will in the finished user interface.

To do this you can click to gain focus on an element and use the Tab key to navigate around. The Spacebar changes the state of an element and the Enter key will “Close and Accept”, or the Escape key will “Close and Cancel”. Just like the real thing.

Control when to Show or Enable controls using conditions

Not only can you control the value and text in an element, you can also control when an element is enabled and when it is visible. That means that you can make additional controls appear or disappear depending upon which options the user has selected, or make sure that the next logical control is automatically enabled based on the user’s selection.

Conditional navigation in different scenarios

Variables are firmly embedded in Scenarios and Conditional Navigation too. The Condition Box properties now include a “Condition” entry allowing you to control the flow of the user interface with more flexibility and clarity.

For example, you could set up conditional navigation to bring up a warning if the user tries to create a password of less than a particular number of characters, or to ask for confirmation of a destructive action if the user has set an option.

Wherever you need to test a condition or use the value of a variable, you can use a general expression to combine or process the values of your variables. A wide range of Boolean, binary, comparison, arithmetic, trigonometric and text operators and functions are included.

Conditional Content Panels

Conditional Panels (on the Storyboard panel) build on top of these conditions. Using a Conditions box, (like those in navigation scenarios), you can control what content appears within a particular area. In the example below, it controls whether a Log In panel is displayed or a Welcome panel depending upon whether the user has already pressed the “Log In” button.

The User Name also shows up on the Welcome panel when running the prototype, though it doesn’t show in design mode (as above). This example can also be easily extended to validate the User Name and Password.

Advanced Features

Once you’ve mastered the basics of interaction control you’ll be ready to start using the advanced features to prototype the behaviour of your UI in detail.

Text substitutions, for example, allow you to perform complex substitutions where text content, or a variable name and value, can be set from other variables. You can even combine multiple variables to build new ones; we’re calling these “translation variables”.

Whatever your application, we’re confident that you’ll find that these new interaction features make it much easier and quicker to build a more complete UI prototype, and still without writing a single line of code.

Creating and sharing libraries of designs and elements

Custom Elements

Any folder (and its sub-folders) within the Project tree can be made into a Custom Element Folder. The folder icon then changes to indicate its new status.

You can create Custom Element designs within the folder and any existing GUI design that you want to be used as a Custom Element can be dragged into it.

A Custom Element design can be as complex as you like, from a single pre-styled element to an entire form full of controls. You can still edit this design just by double clicking on it, so it’s easy to update and maintain.

When you drag a Custom Element design onto another design, the whole content is copied across as if you’d added the elements individually. At this stage, changes to the original Custom Element will no longer affect the new design.

That means you can then modify it in your design to suit the particular circumstances, changing the style, size and layout, and adding in specific information relevant to its context.

Custom Element Libraries

Custom element folders can be created in any project but they really come into their own when creating library projects full of reusable designs that you can link into your working projects.  These can contain house-styled elements, time-saving common groups of elements or entire design patterns.

Compared to Components…

Custom Elements are different from Components (also known as Masters) which remain linked to the original design. If you change the original Component design, each instance of use in your project will also change.

Although you can use overrides to change certain properties of elements within a Component instance, you can’t change their size or layout. They act as a single unit.

Among other things, Components are good for headers and footers on web pages, reusable panels and common dialogs; areas that you need to be consistent between many designs. They’re also very good for breaking your design into more manageable chunks, often with self-contained behaviour.

In comparison, Custom Elements are good for common patterns in your design that will most likely need to be customised for each use.

What if you want to add a Component to a design as a Custom Element? Well, you could put it into a Custom Element Folder first (perhaps as a copy), but there is no need. You can just hold down the CTRL key as you drag and drop it into your design and it will be added as a Custom Element instead.

Templates (Pro edition only)

Templates are a great way to start a whole project from a consistent pattern. Maybe you always like to have your projects set up with a particular set of pages, or with some standard elements that you always include. You could start with a copy of your last project, but a Template is a neater way to achieve it.

Templates can be inserted into an existing project so they can be used for creating complex, reusable design patterns that are beyond the single design restriction of Custom Elements.

A Template includes all GUI files and their contents, so loading a single template could set up lots of files, ready for you to dive straight into the design work.

Like Custom Elements, Templates are copied when they are loaded, so changing the original Template file will not change the projects that are based upon it. They provide a basis for you to edit and extend.

You can create a Template from your whole project, only the designs in the currently selected folder, or just the current design file. That makes it easy to turn what you’re working on into a Template for reuse in another project.

You can name the Template, categorize it, and choose to attach a representative screenshot to make it easy to find later. The new facility to export images from a running prototype can help here but if you don’t provide a screenshot, one will be generated automatically.

When you create a Template, it becomes available for immediate use within all projects. No library project linking is required.

Templates and Libraries Online

We’re in the process of setting up a new community site to publish and share Templates and Libraries containing reusable Components, Custom Elements and Design Patterns.

We’ve been waiting a long time to do this but with these new features in GUI Design Studio 4.0, it now makes more sense. The links are already in the software and the new site will go live soon. Stay tuned!

Download and Upgrade

You can download a 30-day trial of v4.0 here (either edition) and install it along side any existing version that you might be using.

Upgrading from an earlier version

GUI Design Studio version 4.0 is fully compatible with projects and files created in earlier versions but, of course, if you modify your projects to use the new interactive features of 4.0 Professional (such as Conditional Content Panels) then these will be ignored when re-opened in earlier versions.

If you want to experiment with the 4.0 features before committing to upgrading then it’s best to work from a copy of your project or create a backup first.

Purchasing

If you purchased version 3 on or after 1 December 2009 then we will be sending you a new v4 license key for each license you bought at that time, free of charge.

Otherwise, you can buy new licenses or low cost upgrades here. And look out for our special March promotional discount!

Tell us what you want!

As always, we welcome all your feedback and suggestions so that we can create the tools and features you want to use. We’re already working on prioritizing the current list for the next string of releases!

Please leave a comment to let us know how you get on and what you think of the latest release.

When we started designing this feature, we looked around for examples of different calendars in desktop and web applications. We found a wide range of different designs; some with one month, some with 3 or 4, some highlighting “today”, others highlighting a particular day or a range of days. Of course, each application had quite a different visual design to its calendars as well.

In the past, we’ve tried to simplify elements and minimize the number of settings and options they have but, with this new element, we felt we had to provide for the increasing demand on design flexibility.

The problem, as all of you designers of great user interfaces will know, is that with flexibility comes complexity. We didn’t want to give you a tool which is hard to learn or slow to use because it has so many options and special cases, but we did want to give you a tool which will let you create the calendar design you need, quickly and simply.

That was the aim.

We’ve ended up with eleven different areas or labels. There is the Main Control background to the element, the Title Box, an optional Week Numbers column, a Week Day Names and Weekend Names title row (weekends don’t have to be different from week days, but they can if you like).

Then there are the Week Days and Weekends that appear in the calendar body. You can choose to display the Trailing Days in a month (these are the days from the previous month that make up the first week of the current month, and the days of the next month which complete the final week).

Finally there are the specially highlighted days; Today Highlight, Selected Day and (because selected days can be in the trailing period) the Selected Trailing.

Each of these needs a colour for the background (Fill), the Border and the Text. That is 33 different colours!

Here’s what the ‘Colours’ property panel looks like:

And that’s before we even start talking about the options to specify what parts of the calendar should be included, cell sizes and spacing and various other controls.

Actually, we could have gone further. While trying to replicate some of the designs we came across, we found the need for even finer control over some of the colour and layout parameters.  But there comes a point when you need to say ‘enough is enough’ and compromise between total flexibility and usability.

Clever use of the different colours and the various borders and spacing between the elements allows you to create an incredibly wide variety of calendar designs.

You’ll find a small gallery of some of the possible designs below. The top one’s from Windows XP but the rest of the examples are loosely based on calendar designs from around the Web, including Google and a range of examples highlighted in Antonio Lupetti’s blog post on “Beautiful datepickers and calendars for web developers”.

So, what do you think? Did we provide enough styling options, or too many?

We think we’ve got the balance just about right, but we’re happy to hear your opinion too. We’d also love to showcase your own beautiful calendar. If you have a design you’d like to share, or something to say about the new element, why not post a comment?

Enjoy your GUI Design Studio Calendars!

For customers using any prior version of GUI Design Studio, simply install the new version and your existing licenses will continue to work.

Calendar Elements

With so many requests from users, we’ve finally added Calendar elements to the mix. This was essentially the last missing native Windows control and a common feature in a vast number of desktop and Web applications.

So why has it taken so long to appear? Well, that’s a very good question. Right from the start, with the version 1.0 release 5 years ago, we realized that calendar controls were important. But rather than create complex elements for every conceivable situation, the idea then was to provide basic building blocks from which other elements could be assembled.

The very first design samples library contained various calendar controls with different display options. We thought that this would be enough for simple mock-up purposes. Well, clearly, we were wrong! Creating calendar controls from scratch using text boxes and other elements is both tedious and time consuming, especially if you don’t want a design that’s stuck in 2005!

So we’ve pulled out all the stops to bring you a very flexible Calendar element that should suit most purposes. There are 2 variants to get you started: one in the “Lists, Trees and Tables” category that represents your standard Windows month calendar, and one in the “Web” category with some very different styling options.

Now it has to be said that there are a lot of property options for the Calendar. With all of the other elements, we’ve tried to cut back on options and minimize them wherever possible. But there’s an increasing demand for more flexibility and more styling options so that’s what we’ve provided here.

Option overload is an important topic for usability so we’ll be revisiting this in a future post with a collection of Calendar element designs. In the meantime, see what fancy Calendars you can create for yourself.

Other Changes in this 3.6 Release

• The “Window” menu now contains some very handy new commands to “Close All” design windows and to “Close Others” so that you can focus on just the design you’re working on.
• Thumbnail Components now have the same ability as regular Components to be redirected to different design files through their property settings. This can be hugely useful, especially when working on Web applications, when you want to change the target of a link without having to delete the old target then drag and drop the new target and hook it up again.
• There’s a new Preference option to Disable Subversion (SVN) support. GUI Design Studio normally detects folders that are under Subversion control and automatically handles them appropriately. However, all Subversion clients on a particular machine must be based on the same version libraries (version 1.6 in this case), otherwise the working copies will be incompatible. This option is for users who are unable to upgrade their Subversion clients from version 1.5 or earlier.
• There’s another Preference option to disable a change we made in version 3.5 to enhance the File Open/Save dialogs by switching to Thumbnail view for images where appropriate. It’s possible that this feature caused compatibility problems (though we’ve been unable to reproduce or confirm these) so the option is there to turn it off.

Bug Fixes

• Using the right mouse button to cancel a drag and drop operation from the Project file tree, Elements or Icons panel no longer activates the popup context menu.
• Custom Tree Icons (added in version 3.5) are now correctly saved to distribution .gdd files.
• Custom Tree Icons are now maintained properly when the Tree is within a Component and has its properties overridden. Previously, in that situation, the icons would revert to the defaults if the icons were within the project (application and other external icons were okay).
• Some of the automatic connection types were not behaving as intended and reverted to “Modal Popup” instead of the correct type. This has now been fixed.
• There’s also a few other minor fixes related to command keyboard shortcuts and annotation popup text spacing.

Download and Upgrade

Download GUI Design Studio version 3.6 now and install it over your existing version. If you have purchased a license, your existing key will continue to work.

Version 3.6 is fully compatible with projects and files created in earlier versions but certain features, such as the new Calendar elements, will not be recognized by earlier versions of the software so be careful if sharing projects with others who haven’t yet upgraded.

Leave a comment to let us know how you get on and what you think of the latest release. As always, we welcome your feedback and suggestions!

The experts at UXmatters have done extensive research in this area and have a lot to say on the subject.

In an article, published earlier this week, they provide detailed answers to a question about Label Alignment in Long Forms.

And that article is essentially a follow up to their Label Placement in Forms article published over 3 years ago but still as relevant today as it was then.

Using eye tracking tests with users, they tested the time spent filling forms and, specifically, the eye saccades between labels and entry fields. This basically showed how much effort was required by the eyes to scan the form and by the brain to make sense of what it was seeing.

Here’s my interpretation of the results:

1. Placing labels above the entry field is preferable in most cases as users can view the label and input field at the same time. It’s important to leave space between each input field and the next label.
2. When placing labels to the left of fields, although left alignment allows a user to quickly scan down the list of entries, right alignment is much better as it keeps the label with the input field and greatly reduces eye movement and effort.
3. A caveat to right-aligned labels placed on the left is that it’s very important to try to keep them all to a similar length to avoid large areas of ragged whitespace. Shorter, concise labels are better but they must still make sense.
4. Bold text labels are almost always a bad idea. Users find them harder to read and they pull the focus away from the input fields. The increased time with bold compared to normal labels in the tests was surprisingly significant.
5. For long forms, placing labels above entry fields increases the length of the page so might not be such a good thing. Long forms can often be improved by grouping entries and group labels can also add visual confusion when labels are above fields.
6. These are not rules, they are guidelines. More important than any of this, especially for long forms, is to ensure that users can easily comprehend the form, that they scan easily and that users are only presented with requests for essential information so that they are not daunted by the form and are willing to complete it.

This is just a very brief summary and doesn’t do the detailed articles justice at all. I highly recommend that you read both articles. If you thought this was a mundane subject before, these articles and the huge number of comments they provoked will open your eyes and hopefully make you a better interface designer.

We are planning a complete revamp of element property editing in GUI Design Studio (among other things) so this has been vital information for us. I think there are improvements we can make everywhere in this area!

Here are the article links again:
Label Placement in Forms
Label Alignment in Long Forms

For customers using any prior version of GUI Design Studio, simply install the new version and your existing licenses will continue to work.

Tree Icons
Until now, Tree elements have come with just a couple of basic sets of icons and the only way to change individual item icons was to place other icons on top.

That worked well until scrolling and item expansion/contraction functionality was added in version 3.3. After that, you needed to jump through a few hoops with components to get custom tree icons working properly.

Well, we’ve finally given Tree items their own icon property so you can now select them directly and everything works as it should. For convenience, the icon selector also keeps a record of the 10 most recent icons for fast, one-click selection.

Other Changes

• Slider elements now have a “Reverse Range” option that makes them slide from right to left instead of left to right (for Horizontal Sliders). This will become more important in version 4.0 when it’s released. Vertical Sliders now default to upwards unless reversed and this may have a minor impact on some existing designs.
• Based on customer requests, the context menu on the Project panel file tree has been expanded and re-arranged to make it even more useful.
• When you connect screens in GUI Design Studio, you’re really building a true application prototype. We want to emphasize this more so, as a rather subtle but pervasive change, all references to “Simulation” are being phased out and replaced with references to “Prototypes”. This will be most apparent with the disappearance of the “Simulator” menu which has been renamed to “Run”.
• We realized that a few of the newer keyboard shortcuts were conflicting with the main menu so we’ve changed them as follows:
  • Go to connection source: Alt+R -> Ctrl+R
  • Go to connection target: Alt+T -> Ctrl+T
  • Swap selected elements: Alt+S -> Ctrl+W

Bug Fixes

• The Notes panel now behaves correctly when the Design/Activity Bar is floating rather than docked to the side of the main window. Now you can make full use of the design screen by placing the panels out of the way on a second monitor. Thanks to all those that reported this bug.
• Redundant checking of the SVN repository has been removed to improve performance in certain circumstances when using team collaboration features.
• Changes to project and folder links are now saved correctly. In V3.4 this became intermittent depending on whether other changes were triggering the project save or not.
• Property editor buttons have been made taller, where necessary, to ensure that shortcut key indicators (underlines) are visible on all supported platforms.

Download and Upgrade

Download GUI Design Studio version 3.5 now and install it over your existing version. If you have purchased a license, your existing key will continue to work.

Version 3.5 is fully compatible with projects and files created in earlier versions but certain features, such as Tree item icons, will not be recognized by earlier versions of the software so be careful if sharing projects with others.

Finally, do let us know how you get on. As always, we welcome your feedback and suggestions!

In the highly competitive smart phone market, a new breed of phones based on Google Android are doing just that, going head-to-head with the Apple iPhone.

Whether or not you’re interested in smart phone technology, this video, comparing the new HTC Hero with the iPhone 3GS (courtesy of PhoneDog.com), contains a great example of taking a specific user profile and creating a targeted user experience for them.

In many respects, the two phones are similar, but see how the folks developing the HTC Sense UI have focussed their efforts on provding a far superior interface for people who need to communicate through email and social media. This is a very specific (and growing) target market and a key distinction for HTC when the Hero lags behind the much more mature iPhone in many other areas.

Parts 2 and 3 of the review are less interesting from a user interface design and usability point of view as these are more concerned with performance and comparison of like-for-like application features.

However, it’s worth watching Part 2 from around the 7 minute mark for another great example of how the HTC keyboard interface and the spell checking facility has some really well thought out advantages over that of the iPhone.

From a hardware usability perspective, it’s interesting to note how the ‘chin’ of the HTC Hero causes the device to flip up when it’s placed on a flat surface and the buttons are pressed. This may have become an issue for early users because newer versions seem to have dispensed with the chin and adopted the more streamlined, flat form factor.

For customers using any prior version of GUI Design Studio, simply install the new version and your existing licenses will continue to work.

(1) Project Organisation

Now you can re-organise your projects with ease. In previous versions, we restricted the ability to move and rename design files to ensure that references remained intact and to help with project sharing.

In version 3.4, you can rename files and move them around using drag and drop. GUI Design Studio will track the changes and keep those references working.

New projects will automatically get this functionality but you’ll need to enable this feature for existing projects using the “Project | Enable Move and Rename…” menu command. This is a precaution to ensure that team members synchronise project files first.

(2) Enhanced Team Collaboration

Version 3.4 also brings new collaboration features to allow multiple designers to work on the same project simultaneously using a shared Subversion (SVN) repository. Move and rename are fully supported and changes by different team members to the same file can be merged automatically (in most cases).

For full details on how this works see the Team Collaboration with GUI Design Studio and Subversion section on our main Website.

(3) Image and Component Replacement

Have you ever wanted to change an icon or bitmap image, or replace a design component? Well now there’s a new “File” tab that allows the associated file to be changed. If the replacement component is compatible, such as a duplicated variation, then all navigations from within the component will be maintained.

When files are deleted, we’ve made it easier to work out what’s missing by displaying the filename in the placeholder box and we also now include the placeholders in simulation, printing and image generation where they were previously ignored.

(4) Other Changes

In order to make the simulation of Browser mode more realistic, Back and Forward now restore the view position (scroll bar states) instead of always jumping to the top of the page.
 
To help you edit elements more quickly the F2 key can now be used as a shortcut key to edit text for the selected element. You can still just start typing if you simply want to replace the whole of the text.
 
We’ve also fixed a number of bugs such as making GUI Design Studio use less CPU time on certain machines when idle and transferring project options to distribution files for use in the Viewer.

Download

Download GUI Design Studio version 3.4 now, and let us know how you get on with it.

Happy designing! Feel free to leave a comment…