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 »

Now, it’s Creately for JIRA!

Well, this has been quite an exciting month for us! We had our Creately for Confluence go live last week, and today, we’re happy to announce the beta release of Creately for JIRA, a diagramming plugin for everyone’s favourite issue tracking and project management software, Atlassian JIRA.

Creately for JIRA helps your development team to improve the quality of detailing on their JIRA issues by easily creating and including Creately diagrams. Issues keep bouncing to and fro, and you cannot just replace a diagram with text when explaining a requirement. Now with Creately’s full integration into the JIRA interface, you can easily add flowcharts, use cases, mockups, mindmaps, UML or any other diagrams to your JIRA issues.

Creately for JIRA comes with the same user loved experience just like our Creately online, Creately for Confluence and all other Creately products -

  • Easy-to-use interface
  • User loved functionality
  • Contextual toolbar with the 1-click create and connect features
  • A vast library of smart objects
  • Access to images from Google and
  • In-line commenting

With Creately for JIRA, when you invite your team to edit the JIRA issue, they can edit the attached diagrams too. Working with Creately for JIRA is just absolute wonder, read our usage guide to see how to use Creately for JIRA.

Creately for JIRA plugin is now available for free downloads. This is only the beta release, so let us know if you have any suggestions on how we can improve.

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 »

Choosing the Key Ingredients for the Perfect Sitemap

Putting together a sitemap is akin to cooking up a perfect dish. We mentioned sometime back how a sitemap is more to do with the thinking behind a website, whereas a wireframe and mockup is all about “dressing up” your site in frills and lace. But this does not mean that drawing up a sitemap should be a boring affair with a minimum level of effort being put in. To be honest, there are some best practices that you should adhere to when drawing any sitemap. Check them out below.

Yeah, we know, paper is such an old-fashioned concept. You can just see how old-fashioned books are since they are being replaced by the whole “Amazon ebooks & Kindle” factor. But we still do have a penchant for pen and paper, especially when it comes to noting down that quick-as-a-flash idea that usually crops out of nowhere. Want to do up a sitemap? Doodle it out. If paper won’t work, try mindmapping software or anything else that you fancy. Ask yourself – What’s my product (or service)? What are the basic pages I need? How can I stand out? Do I need Flash? Do I want my site to be content rich? What about video clips? Keep at it, until you get a clear picture of what your basic sitemap should  look like.

Image reference:


Lucky for you, we’ve got an excellent repository of information on sitemaps that will rid you of any doubts. We do urge you to read through this page at your earliest. When drawing any type of a diagram you do need to ensure that you know what all the basic shapes stand for. To make it simple for you, we’ve illustrated the three basic shapes associated with sitemaps below. A page is basically used to represent general content, like About Us, Contact Us and Products etc. The Future Page represents a page that you would draw in the future. Finally, a Page Cluster shows you a number of pages of the same kind. We’ve just show you 3 shapes here, find out about the remaining 4 here.


Spacing could be regarded as being part and parcel of diagramming aesthetics. With sitemaps it really is no different. You could probably place spacing under the wider banner of “Attention-to-detail”, which is certainly an important part of diagramming as a whole. Sure, you may have your own idea on how you want to have your spacing sorted out. What we recommend is that you do not crowd your sitemap or vice versa. Ensure it is pleasing to the eye and devoid of clutter.


Color is mandatory for beautiful diagrams. What’s more, choosing the right colors for you website could very well lead to an increase or decrease in customers. But when it comes to using colors in a sitemap, the reasons may be quite different. You can use colors for basically anything. One example of using colors would be to indicate the various stages of completeness.

Finally, having a sitemap on one side and a wireframe on the other would give you an excellent perspective on what the end result would look like. The conventional way of doing things is to do up a sitemap then move onto a wireframe and a mockup. Having two different interpretations of the same piece of information would help you ascertain whether you are on the right track. Other benefits would be saving time, since you can finish off discussing the Homepage and its design before moving onto subsequent pages.

There you have it. Just 5 basic factors you can consider when it comes to getting your sitemap achieve that desired level of perfection. Got any queries, suggestions or comments? Do get in touch with us, we’re more than happy to help you out.

Posted via email from Creately | Comment »

First a Sitemap then a Wireframe, right? Why not both, at once!

When it comes to ideating a website design, the usual MO for most is to conjure up a sitemap (which can be defined as a set of pages of a web site, which is accessible to both crawlers and users) before proceeding towards the design of a wireframe. This would be a logical and the most natural way to proceed, however, there is no reason why you cannot do both in tandem. This is certainly something that can save you quite a bit of time while also helping you get a better end result as well. Let’s put some real world practicality into this process. Hypothetically speaking, imagine your aim is to start an e-commerce site that sells groceries.

Now, observe the following two screen shots that have been designed on Creately.





The topmost screen shot illustrates your sitemap, while the one below shows you the wireframe for your homepage.








As you may be aware, both tools offer you the same information but in two different perspectives. The main advantages of this two-pronged approach is that you can:

  • Save time doing two tasks at once
  • Crucially, consider the wireframe to help you add or subtract more pages onto the sitemap as you go along, and
  • Collaborateand agree/disagree on whether you like the basic design or not in the first instance (as shown below). This is an approach that you can employ for every stage of your site, thereby discussing and finishing off the whole process page by page.

We hope this new approach helps you out when it comes to the process of effective diagramming. As always we encourage you to reach out to us via our support page. We’d certainly love it if you would like us to cover any topics that you may have any difficulty in. Make sure you stay tuned to this space for more information on sitemaps.

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 »

Creately turns One with a major update to its collaborative diagramming platform

Creately turns One with a major update to its collaborative diagramming platform

PRLog (Press Release)Sep 17, 2010 – This week Creately celebrates its first birthday by announcing a major product update to its
online collaborative diagramming platform introducing new capabilities and features tosimplify how businesses collaborate on diagrams and non-text based documents.

“We’ve been selling the Creately Online Diagramming platform for a year now and it has been extremely well received by the market. We feel the time is now right to expand our offering to reach the professional segments in the market.” said Chandika Jayasundara, CEO of Cinergix Pty Ltd.

In line with this, Creately comes with a refreshed interface, brand new customizable smart
objects for Wireframing, UML and Database designs and the Creately Diagram Viewer, a simple embeddable widget that allows user’s to include a zoom-able, sharable and always updated Creately diagrams in any web page.

Creately Diagram Viewer is a HTML5 web widget that’s designed to make sharing business and technical diagrams very easy. The new Diagram Viewer will come with full zoom and pan capabilities that will allow users to embed even large diagrams without losing any of the diagram’s resolution. Along with built in sharing buttons from popular online communities, the new Diagram Viewer will provide an innovative collaboration experience.

“With this viewer, its now faster and easier for businesses to share their flowcharts, org charts, and other business diagrams with their staff. And we’ve added a Google Gadget to the mix, so our Google Apps customers can include the Diagram Viewer in their Google Sites.” added Mr Jayasundara. “With this announcement, Google Sites finally gets what it was missing - built-in diagrams that work just like the wiki does.”

Besides the viewer, Creately now comes with new smart shapes for Wireframing, UML and
Database design. “We’ve worked hard in putting the final touches to a brand new smart KObject framework to bring a new level of ease of use and flexibility to your Creately diagrams.” says Chandika Jayasundara, CEO, Cinergix Pty Ltd. “These shapes can now be easily configured, which means you can change the way they look by simply editing the Text in them”.

The Diagram Viewer is available immediately to all Creately users. Examples of the Viewer can be seen on the Creately Community Diagram Pages -

More information on this announcement can be found on the Creately blog - … …

About Cinergix

Cinergix is an Australia based company that builds and sells Creately - a diagramming platform and its patent-pending KObject technology. Creately is a powerful web-based software with an interactive interface and collaborative capabilities that are changing the way teams communicate and collaborate online. This new paradigm of leveraging user-generated content for design work will enable Cinergix to support the long trail of design problems. Started in 2008 by a team from Sri Lanka, the UK, and Singapore, the company also runs a research and development centre in Colombo, Sri Lanka. For more information, visit

# # #

Creately is a collaborative diagramming software used by teams around the world to communicate more effectively. Creately lets users invite team-members and clients to collaborate on flowcharts, software designs, wireframes and business diagrams easily. Loaded with a large selection of smart objects and ready-made templates, Creately offers unlimited possibilities with the types of diagrams that can be created. Creately is offered as a web-based application with an intuitive and powerful interface which runs in your browser.

—- end —-

Posted via email from Creately | Comment »