Say hello to our versatile 3D objects!

As promised in our last post, where we unveiled Creately’s forward thinking Text capabilities, we are now thrilled to offer a fresh new perspective, in this post, on our intuitive KObjects, namely 3D versions of the CubeCylinder and Cone. So why is this such BIG news? We’ve listed ‘em out for you below.

1. Cool Features


What we actually did was to create 3D objects that have a list of features associated with it. As you can see below, you can change the Position & Size of these objects along with the 3D Angle andCube Depth as well.


2. Such versatile Fun!

Click and drag either one of the 3D objects onto the editor and you are sure to have oodles of fun, creating and designing diagrams, like a rocket blasting off into space, a pencil and even the Tower of Hanoi below.

We’ve already established that creating complex diagrams, such as UML diagramswireframes andmockups are easy. But Creately has also quite a bit of a fun side to it, as seen by the screen shots above.


3. Better usability = Simple but Beautiful Diagrams

What better way to highlight this sentiment than to draw a system architecture diagram. Having a 3D look and feel to the whole diagram is certainly something that makes it look better, more interesting and beautiful.

That wraps up this post, in the meanwhile, do spread the word to your friends and peers and other aficionados of diagramming. For more interesting announcements and tips and trends on diagramming, stay tuned to this space.

Posted via email from Creately | Comment »

Top 10 Tips that will Increase Visitors to your Site

When it comes to generating more traffic for your site there is no formula as such. If you design a site that is competent and consistent, your visitors will atleast stick around and may be tell others about your site. Using Creately, we’ve done a colorful mockup along with 10 mandatory points, which can be found after the mockup, of what a good site should have.

1. Have a really good headline + copy This really is a no brainer. Besides the fact that a good headline and copy is all part and parcel of good web design aesthetics, the fact is that must ensure that it is rich with keywords and compelling copy in order to aid adoption and conversion. 2. Headlines need to be clear and succint You’ve only got seconds to get a visitor to scour through your website. So instead of having reels full of monotonous content, make sure that you focus on the right message. 3. Know your language It is mandatory that you proof read your content always. Having erroneous spelling and grammar would lead to loss of credibility and make you the laughing stock of your industry. 4. Trust indicators are a must There really is nothing like having another customer endorse your product or service. But besides this ensure that you also have 3rd party trust and security certification, like VeriSign. 5. You should have CTA There is no compromising on this point, it is a must that you have CTA buttons on your site. It is a key element of persuasion that always works. 6. Make your buttons stand out There is a fine line between being garish and standing out. But, what you need to remember is that such buttons (if supported with an excellent design) can help a visitor to your site make that all-important decision to click and access a free demo, thereby bringing him one step closer to making a purchase. 7. Too many links = distraction It’s true you do need links when a visitor hits your homepage but this is not always the case if we are talking about a landing page. Giving a visitor too many options when it comes to links could lead to confusion and probably annoyance as well. 8. Images and videos should be relevant There is enough evidence to show that videos and speeches does help convince visitors. However, a word of caution. Ensure that all images and videos that you do use are relevant to the copy you have on your homepage. 9. Keep it visible Ever had to scroll through a site to view all the important information? Annoying, isn’t it? This is precisely why you need to make sure that you have all the important details with regard to your site above the fold. 10. Consistent testing leads to success As the cyberspace landscape evolves and changes over time with new trends and design becoming mainstream, it is imperative that you consider testing two different site designs against each other and even AB testing.
We hope you enjoyed this particular post, if you got any questions or queries, you’re more than welcome to pop us a tweet or send us an email. Until next time, keep those diagrams awesome!

Posted via email from Creately | Comment »

Plan your website before you start building it : Phases of website designing

Considering the rationality of creating a website is important, but it is even more important to have a clear plan for the website designing before that. The more planning you do, the easier it is to make decisions. Not taking enough time to plan and jumping straight to website development is one of the biggest mistakes you can make when designing a new website.

The different stages of website designing

Define the website plan

Answering some basic questions and refining them into a plan is an important process in understanding the web-site’s objectives and requirements. For example – What are we aiming to achieve through the website? What will the website do? Who is our target audience and how do we attract visitors?

Sketch out your website map

After brainstorming on the basic aims of your website, you have to understand the overall organization of the website. A website map is a desperately needed tool for planning and designing web sites. You can get a pictorial representation of your website architecture by sketching out a sitemap as it helps in creating coherent navigation paths for users to follow through the website. It shows the logical hierarchy (including primary navigation through to the secondary or sub-navigation) of the different pages within your website.

Usability of your website has to be kept under constant consideration as part of your planning. Your site should not create confusion in the minds of the visitors. You should make sure the navigation between pages is clear, and it does not confuse the visitor about what to do next. With a clear website architecture map in place, you can logically understand and consider how your users will navigate through the site, then tailor content to them.


Make your wireframe prototype

Wireframes are fundamental line drawings that allow you and your client to focus on the layout of the website. They are prototype models built for testing purposes. Wireframes show you how your website will look and feel so you can identify the functionality of the website even before engaging in development.


If you are ever wondering on how to get started, you can try a sheet of paper and a pen or simply sign up for Creately and create your sitemap in the Cloud with collaboration built in. Hope you liked this post, if you got anything else to add, please write to us or leave a comment below.

Posted via email from Creately | Comment »

A new Creately Desktop Release amid Wesak

Today, we interrupt our usual slew of posts on diagramming and diagram types to make a new release announcement for Creately Desktop. Thanks to some really great customer feedback, we’ve been able to take all your concerns and include it into the latest Creately Desktop release. Some of the improvements include bug fixes, ensuring the process of syncing is smooth and trouble-free, while minute issues related to licensing have also been resolved. With this new release, you are sure to enjoy fast and easy diagramming par excellence.

Additionally, we got some great news for all our Creately for Fogbugz users. You can now renew your 1-year maintenance license by logging in with your existing account and extending your maintenance here. This license will allow you to enjoy a year’s worth of cool new upgrades for a nominal fee.

Indeed, things like bug fixes, new releases and updates may have kept the Creately team busy this past week but the truth is it has been a slow couple of days due to the celebration of Wesak in our R&D office in Sri Lanka. Taking some time off, the development boys and girls decked the office with colorful lanterns that are intrinsic to such an important religious festival.

Creately’s R&D center in Sri Lanka

As this week winds down, make sure that you stick to this space since the next few posts will focus on Sitemaps and some best practices related to it. Additionally, we just launched our Flowchart Minisite and Wireframe Ministe, so this is definitely a repository of valuable information that you should take a peek at. Stay tuned, more diagramming joy comes your way soon!


Posted via email from Creately | Comment »

The Art of Wireframing: A 10-step Guide

While our last post was all about highlighting some benefits and uses of wireframes, today’s post will focus on some tips that need to be taken into consideration when dealing with the process of wireframing. While some of them may not be focused directly on designing per se, there are certain elements like gathering feedback and adhering to a set objective, which are important to say the least.

As you may already know, a mockup is more inclined to show what a site will LOOK like; whereas a wireframe would be more focused on showing what a site DOES. This is a distinction that we do lose track of at times. The 10 steps shown below is an effective check list of what needs to be taken into account with regard to your wireframing project. These steps, if put into practice from your end, can help your client understand how exactly his site will function once it comes into fruition.

1. Set an achievable objective

A wireframe aims at solving all kind of problems. In addition to this, it will save you money and time since it is easier to change a paper wireframe or a prototype than to discover errors in many lines of code.

2. Functionality counts

Wireframes are about function, not form. That’s why they come before the actual design.

3. Who is in Charge?

 When doing a wireframe, remember that it’s vital to have someone in charge. This person should keep it current, manage feedback and relevant changes.

4. Is everyone involved?


It is imperative that you involve all staff in the process, from marketers to designers and developers and even users.

5. Put a deadline to the wireframe

If you want to keep a project moving, choose a deadline for your deliverables and make sure you stick to it.

6. Focused on users

 As mentioned in our little intro, a wireframe is all about showing what a site DOES, having said that you would also need to take into account the user experience. For instance, it is never a good idea to let a site be too detailed whereby a user is confused when it comes to navigating around. Always have the user in mind and see how you can make the whole website experience easy and convenient.

7. Consistency

 Consistency in your wireframe will assist users, developers and designers. When it comes to the repetition of groups of elements; remember that this can be useful to clarify things to users.

8. Does everyone understand your wireframe?

 Everyone from business men, to marketers and designers, should find the wireframe easy to follow. As a rule of thumb it is best that you ask someone not involved in the project to see whether it is easy to assimilate. Perhaps your mother?

9. Get feedback

 Ideally, an initial wireframe should gather feedback, a second one should show this feedback that was considered and the last one should be refined and polished.

10. The perfect tool

 Paper prototyping is an excellent way to get started. However, as the project evolves, it is best that you consider an app or wireframing software to bring your wireframe into fruition and to help you manage the many iterations and screens involved.


So there you have it, 10 easy but significant steps that you should stick to at all times when wireframing. We hope you enjoyed this particular blog post, stay tuned for posts on sitemaps during this week. We do encourage you to send us your thoughts or comments via our site. Till next time – keep those wireframes picture perfect!

Posted via email from Creately | Comment »

Some Benefits and Uses of Wireframes

From flowcharts to UML diagrams, we’ve offered quite a bit of important reading material for you out there. Our last post focused on wireframes and this present one also revolves around this really useful tool. To start things off we thought we’d focus a bit on the uses and benefits of wireframes.

You see, for the layman, the topic of wireframes may relate to just web designers and software developers. However, the fact of the matter is that wireframes are actually used by a variety of disciplines. While the main functionality of wireframes depends on the profession per se, find below some of the professions that utilize wireframes the most and how it benefits them.

  • Developers would use a wireframe to understand the functionality of a particular site
  • Designers would use a wireframe to push the user interface process
  • Information architects would utilize wireframes to illustrate the navigation paths that is present between pages
  • Business stakeholders would use wireframes to make sure that objectives and requirements are met via the design

Choosing to work with wireframes will lead to a collaborative effort since it helps link the information architecture to the visual design. Conflicts are sure to take place among these professional roles, as wireframing is a controversial part of the design process. Since wireframes signify an aesthetic that is very minimal, it is hard for designers to see how close the wireframe needs to depict actual screen layouts. Another difficulty with wireframes is that they don’t effectively display interactive details.

Generally speaking, wireframes usually have different levels of detail and may be split into two categories to show how closely they resemble the end product (this is also known as fidelity).

Wireframes that are Low-fidelity

Ideally low-fidelity wireframes (more like a quick mock-up) possess less detail and consume less time to produce. Additionally, these wireframes assist a project team to share effectively since they are usually abstract, with the use of rectangles and labelling to provide content. These wireframes are easy to identify with dummy content or symbolic content utilized to represent data when there is a lack of real content being available. For simple or low-fidelity drawings, paper prototyping is a common technique. Since these sketches are just representations, annotations—adjacent notes to explain behavior–are useful. However, online wire framing provides added benefits such as collaboration across distances, versioning and publishing for the next stage.

Wireframes that are High-fidelity

Then there are also high-fidelity wireframes. These are used for documenting, since they incorporate a level of detail that is very close to the design of the actual webpage or application, thus taking longer to create. With high fidelity wireframes, it is far easier to engage the client of a project since you are showing something that is close to the finished product. As mentioned previously, high fidelity wireframes gives a lot of priority to documenting. Needless to say, documenting is very significant since it is very important to communicate clearly with the next stage of a project. This would offer many benefits like reducing the chances of having to do re-work and also reducing time and money wastage.

We hope this gives you some useful insights into wireframes. However, there is more to come next week, with the focus once again being on wireframes and UI mockups, so stay tuned to this space. As always, you are more than welcome to give us a shout or to leave a comment below this post. Till next time – Happy Diagramming!

Posted via email from Creately | Comment »

Why you should annotate Wireframes

As we all know, clarity is the main goal of any wireframe or UI mockup. What we seek to elucidate via this post is that when structuring a wireframe you need to ensure that you

  • focus on the client requirements
  • ensure that the design is clear and uncomplicated
  • and you concentrate on annotating the design.

Simple points but certainly potent points to ponder.

If you have experienced rejection at the hands of your clients, one too many times, you must remember that it may not actually be a fault of your design. Rather it could be all to do with the way you present your design to your client. While most designers are adept enough to get 1 and 2 sorted, then usually forget to do 3. And this is where it all goes horribly wrong.

Looking at a design from a client’s perspective, he/she would need to understand it before taking a decision on it. This is what annotating does. Consider this task as a step-by-step guide to the functionality of explaining what a wireframe design is all about. So at this stage, a client would be able to understand the whole concept and then, after much reflection, pass judgement on it.

Find below 4 best practices when it comes to annotating wireframes.

1. Short, simple and sweet

Think about it. How many clients do you know have oodles of time for meetings? You get the point. When annotating, make sure that you are clear and succinct in what you state. Be convincing, state the usefulness of whatever you annotate and keep it really short.

2. Annotate for the sake of usefulness

Your wireframe design is meant to solve a problem. Your client is only concerned about how useful your wireframe design is, so make sure that you annotate with “usefulness” being the main priority.

3. Order, please!

So your client has little or no time to spend meandering around a document figuring out how the wireframe design he is looking at is going to help him out. If you got the first two best practices sorted out, then all you need to do is to ensure that you arrange everything in numerical order. From the client’s perspective, this will lead to a natural flow whereby all information can be easily assimilated.

4. Get some space

You already probably know how the natural progression is to read from left to right. So it’s natural to have your design on the left while your annotations are on the right. An example using all these 4 best practices are shown right below.


If you do find this post useful, please do make a comment below. We’d be more than happy to field in any questions that you may have. If you got any suggestions for topics that you would like us to cover, you are more than welcome to let us know.

Posted via email from Creately | Comment »

Wireframe Objects and their usage | Creately

Wireframe Objects and their usage
This is an overview of all the wireframe objects that you will use when drawing wireframes and web mockups. All these objects are available in Creately and you can try out a demo or take a look at some sample wireframe and mock-ups for more context.



Creately’s Table object from the UI Mockup set is a real ease to use! It can be used for anything as simple as a data sheet, to a complex sudoku game and even a word puzzle.




Completely customizable, collapsible Accordion pane is just a few keystrokes away. Let yourself go - explore!


Tree View Control


Tree View control is a real child’s play with Creately. Use it in your UI mock-ups to execute hierarchical data sets, folder views and other similar data structures. This is the most simple Text-driven Smart KObject from the list. Go give it a spin!


Tab Control


Are you looking for a solution to create multiple tab pages in seconds? With Creately’s smart KObject improvements you can create as many Tabs as you might inside the Tab Control. Check this for some usage examples of Tab Controls.


Star Rating


Creately’s Star Rating object provides an easy rating experience that allows users to select the number of stars that represents their rating. Wanna see some examples? Click here!




Have you designed a mockup, and want to see how it’ll appear in a browser? This is simple with Creately’s Browser object! Simply drag-n-drop a Browser object and configure the properties to create your browser.


Dropdown Menu


Create stylish Dropdown Menus in just a few minutes! Make a few text edits on the Smart Dropdown Menu object to configure your Dropdown Menu. Then select a suitable Dropdown menu style and attach it to your Menu bar.




Creately’s Calendar object re-sizes pretty well to fit into mockup or wireframe. Add the Month, Year and Day to highlight the day. Check out here for some real Calendar object examples!


Breadcrumb Navigation


Designing a Breadcrumb Navigation in Creately is easy and simple as typing in some comma separated text. Then select the arrow styles to display the trail of links; and you’re good to go!




In Creately, the Slider object’s orientation can be horizontal or vertical. You can use these slider objects to illustrate the equalizer controls, volume controls and more. Take a sneak peek at these examples and you’ll know what I mean!



Posted via email from Creately | Comment »

Wireframes and Mockups. Are they worth getting to know?

There’s a reason why we’ve implied (above) that both wireframes and mockups share a close relationship.

But before (we explain, and) you get your brain all jittery with definitions, remember that figuring out what a wireframe and a mockup is a simple deal. The former is basically a skeleton of an interface minus the aesthetic details. The latter, on the other hand, is a model of the web site in real life complete with fonts, colours, buttons, and the whole nine yards.

While a wireframe is commonly used to establish the basic structure of a site, so that a client is aware of how it will look, a mockup is just one step before the site is launched (for real) – see the relationship? There’s nothing like a diagram to show this, so take a peek at the wireframe below.

image Now, sneek a peek at a mockup, again below.

image Of course, with Creately offering an online platform, you are at the receiving end of a whole host of advantages. Not only do you get to create interactive mockups, you get to share them with your team & clients by inviting them to review & comment. You can also engage clients to iterate over your mockups to reduce project turnaround times.

So with Creately being a real diagramming-meister, you can betcha we’ll be back with more (and varied!!) wireframes and mockups in no time. Til then, run amok with them mockups!


Posted via email from Creately | Comment »

Central Desktop Introduces Online Diagrams by Creately

Central Desktop announces Online Diagrams by CreatelyThat moment, which you all (excitedly, no doubt!) waited for, is finally here! Well, folks, (drum roll) Central Desktop officially announced the availability of its new Online Diagramming feature.

Online Diagrams Powered By Creately

Central Desktop delivers a complete Software-as-a-Service (SaaS) collaboration platform that allows business teams to communicate and collaborate online. This gets more powerful now with Creately’s integration into Central Desktop’s collaboration platform, which gives customers the ability to translate their ideas graphically. Comprehende, amigo?

In other words, users can directly create and collaborate on diagrams from right within their Central Desktop workspace to literally create anything visual. Cool, eh? For instance, users can now create professional  flowcharts, org charts, pretty mind maps, interactive wireframes to include in reports, docs and wiki pages. In fact, according to Isaac Garcia (who is the CEO and co-founder of Central Desktop), this new dimension to online collaboration will help their users communicate more efficiently and improve the decision-making process.

Fully Interactive Creately Diagram Editor

All of Creately’s key features are available on the Central Desktop’s Online Diagrams so Central Desktop customers will be working in Creately’s fully interactive interface loaded with our extensive library of objects to create any type of diagram.

As a technology leader in the online diagramming space, Creately is proud to deliver the best diagramming capabilities to Central Desktop’s collaboration platform.

So without any further ado, take a quick glimpse at this short video, and then get creative!

Central Desktop Online Diagrams from Central Desktop on Vimeo.

Try Creately Now


Posted via email from Creately | Comment »